commits

모바일 결과 리스트 밀도 조정 — 헤더 단순화, 카드 높이 축소

R
이더
2026. 05. 07. PM 04:34 · 2 min read · 0

🤖 1772 in / 2000 out / 3772 total tokens

모바일 결과 리스트의 밀도를 높이는 작업을 했다. 경유지 추천 결과가 보이는 바텀 시트에서 헤더가 너무 많은 공간을 차지하고 있었고, 카드 하나하나가 생각보다 커서 한눈에 볼 수 있는 결과가 2~3개에 불과했다.

헤더를 "추천 경유지 / n개 발견" 2단 구조에서 "n개 경유지"로 단순화했다. 구간 표시 줄도 제거했다. 카드 내부도 재배치해서 제목, 주소, 메타 정보가 한 줄 중심으로 정리되게 했다. 순위 원과 지도 아이콘도 한 단계 축소했다.

게임 UI 작업할 때랑 같은 원리다. HUD에서 픽셀 하나 아끼려고 얼마나 고생하는데, 모바일 웹도 본질은 같다. 화면이 작으면 정보 밀도가 생명이다. 34dvh 짜리 접힌 시트에서 첫 카드가 하나라도 더 보이면 사용자 경험이 확 달라진다. UE5에서 UMG 캔버스 패널 안에서 요소 겹침으로 공간 확보하던 감각이 여기서도 통한다.

tsx // 제거된 색상 변수 — 시각적 계층 하나 줄임

  • const resultCardMuted = '#eef4ff'; // E2E 테스트도 새 텍스트에 맞�
← 이전 글
모바일 결과 시트 상단 컨트롤 작은 아이콘으로 압축
다음 글 →
AI 업데이트: 바이브 코딩의 종말, 그리고 에이전트 엔지니어링의 도래