모바일 청첩장 만들기 (5) - 마무리 기능과 회고

마무리 단계 (1/4 ~ 2/9)

결혼식까지 약 두 달. 핵심 기능은 모두 갖춰졌고, 이제 완성도를 높이는 작업에 집중했다.

페이드인 애니메이션

e2ce7ae 화면 렌더링 시, 애니메이션 추가
105a1fb 위에 사진 영역은 페이드인 삭제, 페이드인 시간 늘림

스크롤할 때 각 섹션이 부드럽게 나타나는 페이드인 애니메이션을 추가했다. Intersection Observer API를 사용해서 뷰포트에 진입하는 순간 애니메이션을 트리거했다.

하지만 바로 수정이 필요했다. 메인 사진 섹션에 페이드인을 적용하니, 첫 화면이 비어 보이는 문제가 생겼다. 사용자가 청첩장을 열었을 때 가장 먼저 보는 메인 사진은 이미 보여야 하니까. 메인 사진의 페이드인은 삭제하고, 나머지 섹션의 페이드인 시간을 더 느리게 조정했다.

"모든 곳에 일괄 적용"보다 "상황에 맞게 선택 적용"이 중요하다는 걸 보여주는 사례다.

메인 사진 레이아웃 변경

29017c2 메인 사진 높이 고정 효과 삭제
f72a15c 첫번째 이미지를 꽉차는 형식으로 변경

메인 사진의 레이아웃을 여러 번 실험했다. 처음에는 높이를 고정하고 패럴랙스 효과를 줬는데, 모바일에서 오히려 부자연스러웠다. 결국 화면 전체를 꽉 채우는 단순한 레이아웃이 가장 임팩트 있었다.

방명록 기능

2db839f 방명록 추가
8a67351 길이 제한과 유효성 검사 추가
6169138 방명록을 폈다가 접는 기능 추가

청첩장의 마지막 기능으로 방명록을 추가했다. 하객들이 축하 메시지를 남길 수 있는 공간이다.

유효성 검사

방명록에는 기본적인 유효성 검사가 필요했다.

• 이름: 빈 값 체크
• 메시지: 빈 값 체크 + 길이 제한
• 비속어 필터링 같은 복잡한 건 넣지 않았다 — 결혼식 축하 메시지에 비속어를 쓸 사람은 없으니까

접기/펼치기

방명록이 길어지면 스크롤이 너무 길어지는 문제가 있었다. 최근 메시지 몇 개만 보여주고, "더 보기"로 펼칠 수 있게 했다. 마지막 커밋(2/9)에서 이 기능을 추가하며 프로젝트의 기능 개발을 마무리했다.

그 외 마무리 작업

4d7b70c 부모님 계좌 번호 등록
e2c37fa 신랑, 신부 계좌번호 추가
98da662 계좌 번호 입력

4편에서 비워뒀던 계좌번호들을 하나씩 채워 넣었다. 계좌 정보가 세 번의 커밋에 걸쳐 추가된 이유는, 양가 부모님과 커플의 계좌 정보가 시간차를 두고 확정되었기 때문이다.

16916f1 bgm 변경
7c9292e 사진은 22개로 변경
719479f 푸터 사진 추가
6df40ce footer 추가

배경 음악을 최종 버전으로 교체하고, 갤러리 사진을 10개에서 22개로 늘렸다. 푸터에는 커플 사진을 넣어 마무리했다.

eaabe7d 확대 시에 옆 이미지로 변경되는 현상 수정

갤러리에서 사진을 확대(pinch zoom)할 때 옆 이미지로 넘어가는 버그도 수정했다. 터치 이벤트의 스와이프 판정과 핀치 줌 제스처가 충돌하는 문제였다.

프로젝트 전체 회고

타임라인 요약

총 63개의 커밋, 약 3개월 반의 개발 기간이었다. 하지만 실제로 코드를 작성한 날은 10일 남짓이다. 나머지는 피드백을 기다리거나, 콘텐츠(사진, 텍스트)를 준비하는 시간이었다.

잘한 점

1. MVP 우선: 하루 만에 동작하는 제품을 만들고, 이후 점진적으로 개선했다. 처음부터 완벽하게 만들려 했다면 결혼식 전에 완성하지 못했을 것이다.

2. 데이터 분리: JSON 기반 데이터 관리 덕분에 콘텐츠 수정이 빠르고 안전했다.

3. 빠른 피드백 루프: 피드백을 받으면 당일에 반영했다. 이 속도감이 최종 품질을 결정했다.

4. 성능 최적화: WebP 변환과 LQIP로 모바일 로딩 속도를 크게 개선했다.

아쉬운 점

1. 테스트 부재: 자동화된 테스트가 하나도 없다. 사이드 프로젝트라 넘어갔지만, 갤러리 스와이프 같은 인터랙션은 테스트가 있었으면 버그를 더 빨리 잡았을 것이다.

2. 접근성: 스크린 리더 지원, 키보드 내비게이션 등을 충분히 고려하지 못했다. 이미지 alt 태그도 성의 없이 넣은 부분이 있다.

3. SEO: 모바일 청첩장은 카카오톡 공유로 유입되기 때문에 SEO가 중요하지 않다고 판단했지만, OG 태그 최적화는 더 신경 쓸 수 있었다.

기술적으로 배운 것

• CSS Scroll Snap: proximity vs mandatory, dvh 단위
• LQIP 패턴: Progressive Image Loading 구현
• 카카오 SDK: 지도, 공유 기능 연동
• 모바일 터치 이벤트: 스와이프와 핀치 줌의 충돌 처리
• iOS Safari 특이사항: 세이프 에리어, 자동 재생 정책

친구의 청첩장을 만들어준 의미

기술적 성장도 있었지만, 가장 큰 의미는 친구의 결혼을 기술로 축하할 수 있었다는 것이다. 청첩장 서비스를 쓰면 30분이면 끝나지만, 직접 만들면서 한 줄 한 줄에 마음을 담을 수 있었다.

하객들이 "이거 누가 만든 거야? 예쁘다!"라고 해줄 때의 뿌듯함은, 개발자로서 가장 보람 있는 순간 중 하나였다.

63개의 커밋에 담긴 건 코드만이 아니라, 친구의 결혼을 축하하는 마음이기도 했다.