2026-07-17 · DEVELOPMENT RECORD
뒤로가기와 큰 화면을 함께 손본 이유
재료 팁을 연 뒤 브라우저 뒤로가기를 누르면 사이트 밖으로 나가는 경우가 있었다. 내부 이동 기록을 손보며 큰 화면의 셸 크기와 로컬 폰트도 실제 창 크기에서 다시 확인했다.
앱 안의 화면 전환이 브라우저 이력과 충돌했다
재료 팁과 위치 설정처럼 홈 밖의 화면이 생기자 자체 뒤로가기와 브라우저 뒤로가기가 같은 일을 하지 않았다. 사용자가 설정에서 돌아오려는데 사이트 밖으로 나가거나, 새로고침 뒤 이전 추천 화면을 억지로 복원하는 경험은 피해야 했다.
추천 결과도 대표 메뉴만 보여 주는 구조로는 조건을 조정한 의미를 충분히 전달하지 못했다. 후보의 다양성과 결과의 연속성을 함께 다뤄야 했다.
- 팁
- 5개 재료와 관련 메뉴
- 추천 결과
- 대표 1 + 후보 6
- 큰 화면
- 조건 충족 시 셸 1.3배
한 흐름으로 묶어 본 이유
팁 화면을 추가하면서 내부 뒤로가기와 새로고침 후 상태도 정리했다. 같은 기간 큰 화면의 셸 크기를 조정하고 로컬 폰트를 넣었다. 화면 이동과 크기 변경이 겹치는 시기라 돌아온 화면의 상태와 잘리는 글자를 함께 확인했다.
유지할 상태와 매번 새로 만들 상태를 구분했다
위치, 선호, 저장 목록처럼 다음 방문에도 의미가 있는 값만 저장하고 추천 화면 자체는 복원하지 않았다. 앱 내부 전환은 브라우저 이력 한 칸만 사용해 홈 복귀와 문서 이탈을 구분했다.
추천은 동점 그룹만 섞고 점수가 다른 메뉴의 순서는 유지했다. 정확 일치 후보가 적을 때의 보강 규칙과 실행 중 잠금도 추가해 빠른 반복 입력이 결과를 뒤섞지 않게 했다.
17개 추천 시나리오와 로컬 폰트로 마감했다
토마토·두부·계란·고등어·양파 팁과 관련 메뉴를 추가하고, 아무거나 퀵픽도 별도 정책으로 만들었다. 큰 화면에서는 가용 뷰포트가 충분할 때만 셸을 1.3배 확대했다.
추천 시나리오 테스트를 대폭 추가해 동점, 정확 일치, 후보 수, 제외 목록과 잠금을 확인했다. 폰트는 외부 요청 대신 필요한 글리프만 포함한 로컬 서브셋을 만들어 첫 화면 전달을 가볍게 했다.
화면을 더할 때의 확인 항목
팁을 열었다가 돌아오면 이전 선택을 이어갈 수 있어야 했다. 반대로 새로고침 때 끝난 작업까지 복원하면 엉뚱한 화면이 열릴 수 있어, 내부 이동과 재접속을 나눠 확인했다.
셸을 1.3배 키워도 높이가 부족하면 하단 조작이 잘릴 수 있다. 로컬 폰트는 필요한 글리프가 빠지지 않았는지도 봐야 했다. 넓고 낮은 창과 작은 모바일 창에서 크기와 글자 표시를 다시 확인했다.
팁은 심층 콘텐츠가 아니었다
앱 내부 팁은 메뉴 선택을 돕는 짧은 보조 정보로 설계됐다. 검색이나 독립적인 정보 탐색을 위한 긴 글을 그대로 대체할 수는 없었다.
이 한계는 나중에 JSON 원본에서 생성하는 재료 가이드로 이어진다. 다만 이 시기에는 먼저 앱 내부에서 팁과 탐색이 추천 흐름을 방해하지 않는지 확인하는 것이 우선이었다.