2026-06-17 · DEVELOPMENT RECORD
필터를 펼치자 추천 결과가 화면 밖으로 밀려났다
점심 메뉴를 고르는 화면은 조건을 많이 보여 주고 싶지만, 작은 화면에서 그 조건이 결과와 기록을 밀어내면 곧바로 사용 흐름이 끊긴다. 첫날에는 추천의 정교함보다 이 화면의 움직임부터 안정시키기로 했다.
처음 고정한 범위
첫 주에는 로그인과 개인화를 빼고 필터, 추천 결과, 이전 기록을 한 화면에 넣었다. 필터를 펼친 뒤에도 결과와 하단 탭을 찾을 수 있어야 했다. 화면 높이를 어디까지 고정하고 어느 영역만 움직일지가 첫 작업의 쟁점이었다.
FIRST BREAKAGE
필터가 열릴 때 결과가 사라졌다
초기 화면은 필터, 추천 결과, 기록 영역과 탭을 한정된 모바일 셸 안에 함께 두었다. 필터 항목을 문서 흐름 그대로 펼치면 아래쪽 기록이 보이지 않고, 셸 높이가 계속 바뀌어 버튼을 누른 뒤 화면이 흔들리는 인상이 생겼다.
이 문제는 단순히 여백을 줄여 해결할 수 없었다. 조건을 숨기면 추천 기준을 조정하기 어렵고, 화면 전체를 길게 만들면 처음부터 모바일 앱처럼 설계한 셸의 장점이 사라졌다.
- 초기 메뉴
- 10개
- 초기 구조
- Vite · React · TypeScript
- 핵심 판단
- 확장 필터를 별도 계층으로 분리
문서 높이 대신 레이어를 늘렸다
확장 필터를 일반 본문이 아니라 별도 오버레이로 분리했다. 기본 화면의 결과와 기록 위치를 고정한 채 필요한 순간에만 조건을 덮어 보여 주는 방식이다.
6월 17일의 f7ba1ba에서는 펼침 상태와 필터 영역을 App.tsx와 styles.css에 추가했다. 이어진 1378f36은 펼친 필터를 별도 오버레이로 분리했고, 8f42376은 화면 크기에 따른 셸 높이와 폭을 CSS에서 다시 조정했다. 한 번에 정한 구조가 아니라 펼침 기능, 레이어 분리, 반응형 크기 순으로 문제 범위를 줄였다.
탭과 저장 상태까지 한 셸 안에서 확인했다
React 앱의 시작점과 필터 정의, 브라우저 저장을 함께 만들고 탭 기반 화면 전환을 추가했다. 넓은 화면에서는 단순 확대가 아니라 셸이 지나치게 넓어지지 않도록 반응형 크기 규칙을 두었다.
검증 기준은 필터를 반복해서 열고 닫아도 결과·기록·탭의 위치가 변하지 않는지, 작은 폭에서 조작 대상이 겹치지 않는지였다. 이 시기에는 자동화보다 실제 화면을 보며 구조를 확인하는 일이 컸다.
남은 한계
당시 메뉴는 10개뿐이었다. 다양한 조건의 추천 품질을 살피기에는 후보가 적었고, 이번에는 필터를 열고 닫을 때의 배치와 화면 이동을 확인하는 데 집중했다.
메뉴판과 캐러셀, 팁 화면을 넣을 때는 셸을 다시 조정했다. 초기의 고정된 높이만으로는 새 화면을 모두 담을 수 없어, 각 영역이 차지할 공간과 스크롤을 다시 정해야 했다.
낮은 화면에서 남은 확인
필터를 닫았을 때 결과와 기록이 제자리에 남는다는 점은 이후 패널을 추가할 때도 지킬 조건이었다. 새 패널을 본문에 넣으면 아래 영역이 밀리고, 화면 위에 겹치면 가려진 영역을 다시 꺼낼 방법이 필요했다.
오버레이 안에서 스크롤하고 닫는 동작은 낮은 화면에서 더 까다롭다. 키보드가 열린 상황까지 포함한 자동 검사는 당시 갖추지 못했다. 이후 메뉴와 설정이 늘면서 좁은 폭뿐 아니라 남은 화면 높이도 따로 확인해야 했다.