모바일 청첩장 만들기 (4) - 피드백 반영과 버그 수정
피드백의 시작
12월 말, 드디어 청첩장을 실제 사용자들에게 보여줄 때가 왔다. "실제 사용자"란 친구 커플과 양가 가족이다. 개발자 혼자서는 절대 발견할 수 없는 문제들이 쏟아졌다.
1차 피드백 (12/27)
하루에 8개의 커밋을 찍었다. 피드백 내용은 대부분 "사소하지만 중요한" 것들이었다.
폰트와 여백
d8b0abb 폰트 수정
76c133b 여백 줄이기"이 글씨체가 좀 안 어울려요"라는 피드백은 개발자에게 가장 어려운 종류다. 어떤 폰트가 "어울리는지"는 주관적이기 때문이다. 결국 여러 폰트를 번갈아가며 보여주고, 가장 반응이 좋았던 것을 선택했다.
여백도 마찬가지다. 개발자의 눈과 일반 사용자의 눈이 보는 "적당한 여백"은 다르다. 대체로 개발자는 여백을 넓넓하게 잡는 경향이 있는데, 모바일에서는 화면이 작기 때문에 여백을 줄여야 콘텐츠가 더 잘 보인다.
계좌 정보 관련
bf70f01 번호 및 계좌 삭제
2af2711 QR 링크 변경아직 확정되지 않은 계좌번호를 임시로 넣어둬는데, 이걸 먼저 비워두기로 했다. QR 링크도 테스트용이었던 걸 실제 링크로 교체했다.
카카오 지도 수정
07727c6 카카오 지도 URL 변경
2dd6642 버그 발생하는 부분 수정
63986af 위도와 경도를 좀 더 세밀하게 변경카카오 지도 관련 수정이 세 건이나 있었다. 처음에 설정한 좌표가 건물 정확한 위치가 아니었다. 소수점 네 자리에서 차이가 나면 모바일 지도에서 수십 미터가 벗어난다.
// Before
"latitude": 37.xxxx,
"longitude": 127.xxxx
// After: 소수점 자리를 더 세밀하게
"latitude": 37.xxxxx,
"longitude": 127.xxxxx사소해 보이지만, 하객들이 "찾아오시는 길"을 보고 실제로 이동하기 때문에 정확도가 중요하다.
2차 피드백 (12/30)
3일 뒤 두 번째 라운드의 피드백이 왔다.
모바일 특화 이슈
be36338 모바일에서 여백이 보이는 현상 수정
af2f273 모바일에서 포토 갤러리의 하단이 잘려서 보이는 현상 수정이 두 가지는 모바일에서만 발생하는 문제였다. 데스크톱 크롬 개발자 도구의 모바일 모드에서는 재현되지 않았는데, 실제 아이폰에서는 발생했다.
포토 갤러리 하단이 잘리는 문제는 iOS Safari의 세이프 에리어(safe area)와 관련이 있었다. 하단 홈 바 영역을 고려하지 않으면 콘텐츠가 가려진다.
디자인 마무리
270e98e 메인 이미지에 검은색 배경화면 추가
7359da2 교통 안내 아래 여백 조정
2376d35 장소명으로 검색되도록 설정메인 이미지 로딩 중에 흰 배경이 보이는 것이 어색해서 검은색 배경을 깔았다. 사진이 로드되기 전에도 자연스럽게 보인다.
카카오맵 연동도 개선했다. 좌표 기반 검색 대신 장소명으로 검색되도록 바꿐서, 사용자가 카카오맵 앱에서 바로 길찾기를 할 수 있게 했다.
피드백에서 배운 것
1. 개발자는 "빈 화면"을 못 본다
개발자는 항상 최신 코드, 빠른 네트워크, 캐시된 상태에서 확인한다. 하지만 실제 사용자는 처음 접속하는 사람이다. 이미지 로딩 전의 빈 화면, 폰트 로딩 전의 깜박임 같은 건 직접 경험해보지 않으면 알 수 없다.
2. 크롬 DevTools ≠ 실제 모바일
반응형 모드에서 아무리 테스트해도, 실제 기기의 동작과는 차이가 있다. 특히 iOS Safari의 세이프 에리어, 주소창 동작, 터치 이벤트 처리는 시뮬레이터로 완벽하게 재현할 수 없다.
3. "사소한 수정"은 없다
좌표 소수점 하나, 여백 몇 픽셀, 폰트 변경은 코드 변경량이 적지만 사용자 경험에 미치는 영향은 크다. 특히 청첩장은 첫인상이 전부인 제품이라, 이런 디테일이 전체 품질을 결정한다.
4. 빠른 반복의 가치
12/27에 8개, 12/30에 5개의 커밋을 했다. 피드백을 받으면 바로 반영하고, 다시 확인받는 사이클을 빠르게 돌렸다. 사이드 프로젝트에서도 이런 빠른 반복이 결과물의 완성도를 높인다.
다음 편에서는 방명록, 애니메이션 등 마무리 기능을 추가하고, 프로젝트 전체를 회고한다.