하남에서 전국으로 넓힌 자유수영 정보 앱 '오늘수영'의 홈 화면을 리스트 중심에서 지도 중심으로 다시 짠 기록입니다. 왜 갈아엎었는지, 어떤 함정을 밟았는지 솔직하게 적습니다.
왜 지도-퍼스트로 바꿨나
수영장이 전국 600곳으로 늘어나자 리스트가 무의미해졌습니다. 사용자가 궁금한 건 '전국 목록'이 아니라 '지금 내 근처에 갈 수 있는 곳'이니까요. 그래서 홈을 리스트가 아니라 내 위치 기반 지도로 바꿨습니다.
디자인 레퍼런스는 최신 애플 지도로 잡았습니다. 지도가 화면을 꽉 채우고, 필터는 그 위에 반투명 유리처럼 떠 있고, 목록은 아래에서 끌어올리는 시트로 보조 역할만 합니다.
새로 만든 것
함정 1: 내 컴퓨터에선 안 잡히던 버그
시트를 위로 올리면 헤더와 첫 카드가 상단 필터에 가려졌습니다. 그런데 제 테스트 환경(헤드리스 브라우저)에선 멀쩡했습니다. 원인은 노치 안전영역(safe-area)이었습니다. 실제 폰에는 상단 노치 여백이 있어 필터가 그만큼 아래로 밀리는데, 헤드리스에는 그 여백이 0이라 겹침이 재현되지 않았던 겁니다.
교훈: 위아래 여백을 고정 픽셀로 박아두면 기기마다 어긋납니다. 필터 높이를 실제로 재서 그 아래에 시트를 붙이도록 동적으로 계산하게 바꿨습니다.
함정 2: 바텀시트가 탭바를 먹었다
시트를 끝까지 올리면 하단 탭바를 덮어서 목록 끝이 안 보였습니다. 시트 바닥을 화면 바닥에 고정하고, 스크롤 내용 아래에 탭바 높이만큼 여백을 줘서 목록이 탭바 뒤로 숨지 않게 했습니다.
함정 3: '오픈 준비중'을 어떻게 정의할까
상태 필터에 '지금 운영중'과 '오픈 준비중'을 넣었는데, 처음엔 '오픈 준비중'을 곧 여는 곳으로만 좁게 잡았더니 거의 아무것도 안 걸렸습니다. 사용자 입장에서 '오픈 준비중'은 '지금 열지 않은 곳 전부'가 자연스러웠습니다. 필터는 개발자가 만든 상태값이 아니라 사용자의 의도로 정의해야 한다는 걸 다시 확인했습니다.
정리
| 영역 | 바뀐 점 |
|---|---|
| 홈 | 리스트에서 내 위치 기반 지도로 |
| 목록 | 메인에서 빠지고 끌어올리는 바텀시트로 보조 |
| 필터 | 지도 위 반투명 유리(위치·요일·상태) |
| 테마 | 다크 모드 추가(시스템 자동) |
리스트에서 지도로 옮기는 일은 화면만 바꾸는 게 아니었습니다. '무엇을 가장 먼저 보여줄지'를 다시 정하는 일이었고, 그 과정에서 기기 차이와 사용자 관점 같은 것들을 다시 배웠습니다.