17년 지기 친구가 오는 가을에 결혼한다는 소식을 전했다.... 아... 이놈이 결혼을 한다니 뭔가 마음이 싱숭생숭하다 선물을 주고 싶은데 무엇을 줄까 고민하다가 마침 개발 공부를 하고 있으니 모바일 청첩장이나 만들어줘야겠다 싶었는데... 이게 웬걸... 요즘은 모바일 청첩장도 웨딩플래너 업체에서 다 만들어준단다... 젠장.. 에라 모르겠다 하고 업체보다 더 잘 만들어주겠다고 말하고 프로젝트를 시작했다... 신부도 알고 지낸 지 10년이 넘은지라 어떤 스타일의 청첩장을 원하는지 물어봤는데 우선 가장 우선이 예뻐야 한다고했다...디자인..디자인이 가장 중요했다. 디자인에 "디" 자도 모르는 나이기에 우선 검색을 통해 요즘 모바일 청첩장들이 어떤지 확인하고 내 눈에 예쁜 디자인을 최대한 구현하려고 노력했다.
Info
Skill
React, TypeScript, SCSS, Firebase
우선 모바일 청첩장의 형태는 싱글 페이지에 각각의 섹션들로 구분되어 있으며 카카오톡 공유나 링크를 통해 전달되기 때문에 SEO 적인 부분은 신경 쓰지 않아도 될 거라고 생각했기에 React를 선택했다. 방명록과 같은 실시간 업데이트가 되어야 하는 부분이 있어 사용해 본 경험이 있는 Firebase FireStore를 사용했고 Mixin, include와 같은 기능들을 더 연습하기 위해 스탕일링은 SCSS를 사용했다. 추가로 TypeScript는 아직 미흡한 부분이 많아 연습할 용도로 추가했다.
Duration
회사에서 스케줄 근무로 밤을 새는 경우가 많다 보니 실질적으로 짬을 내서 해야 하는 시간이 많았다. 그마저도 몸이 너무 피로하면 제대로 하지도 못하고 지내는 경우가 많았다. 짧게 끝낼 수 있는 기간이 너무 길어져서 속상한 부분이 많다. 약 3주 정도 걸렸던 것 같다.
기능 구현
모바일 청첩장의 다양한 형태를 찾아보고 가장 예쁜 느낌이 나는 것을 최대한 구현하기로 결정했다. 간단하게 생각 했는데 생각보다 많은 기능을 구현해야 했다. 해서 결정된 기능들은 아래와 같다.
- 인터랙션을 포함한 배경음악 재생 기능
- 웨딩 이미지 갤러리 기능
- 캘린더 기능 구현
- 결혼식까지 남은 D-day 기능 구현
- 지도 API를 사용한 지도 구현
- 방명록 작성 구현
- 방명록 실시간 업데이트 구현
- 방명록 삭제 구현
- 참석 여부 기능 구현
- 카카오톡 공유 구현
중간 점검
기본적인 형태는 위의 동영상과 같다. 이제 제대로 스탕일링을 적용하고 여러 최적화 방법들을 거쳐서 최적화할 예정이다. 여러 기능들을 구현하면서 오류가 발생했던 부분들은 개발을 모두 완료한 뒤에 다시 공부하고 정리할 예정이다.
댓글