황검명 한나영의 모바일 청첩장 💍

사이드 프로젝트 형식으로 모바일 청첩장을 만들게 됨.

• 클라이언트는 와이프, QA는 와이프와 장모님이 진행해주셨음
• 와이프가 세상에서 하나밖에 없는 청첩장을 만들고 싶어하여 시작됨
• 기간과 클라이언트의 (압박?) 이 있었지만 기간내에 필요한 기능만 릴리즈
• 기획, 디자인, 개발 프로세스를 진행 해 보았음
• 주위 반응은 괜찮았고 직접 만든 모바일 청첩장을 줄 수 있어 특별했음
• 백엔드 개발자들이 만든 청첩장은 많이 보았으나 프론트엔드 개발자들은 잘 만들지 않아 크게 참고 할 만한 것들이 없었음
• 지도는 카카오맵 Api를 사용하여 마커 구현
• 방명록 기능은 Disqus Api를 사용하려고 했으나 iframe으로 되어있어 스타일 커스텀 불가하여 구글 파이어베이스 db 사용
• 컴포넌트 구성을 통한 재사용 가능하게 만들었고 추후 지인들이 원한다면 정보만 교체하여 사용할 수 있게 작업함
• 배포는 깃헙 블로그를 사용함

모바일 청첩창

모바일 청첩장 보기.

사용기술

• HTML5 / CSS3
• Vue.js

API

• Kakao Map Api
• Disqus Reply Api -> Google Firebase Firestore

구현 사항

• 위치 정보 확인
• 라우터를 사용하여 부모님 버전 분기처리
• Swpier를 사용하여 사진 캐러셀, 확대 기능 구현
• GSAP를 사용하여 인터렉션 구현
• 스텝 마다 컴포넌트로 구성하여 재사용 가능하게 구현
• Google Firebase 를 사용하여 방명록 기능 구현

리뷰

• 지도 Api는 프로젝트에 간간히 사용하지만 카카오맵은 처음 사용했는데 공식문서가 잘 되어있어 그로인한 사용성이 좋았음
• 정해진 기간이 있어 급박하게 진행되었지만 디자인과 코드 리팩토링을 통해 살제 다른 청첩장으로 사용해도 될 것 같음
• firebase 를 사용하여 데이터베이스에 접근하고 읽고 데이터를 내려주는 공부가 더 필요하다고 생각됨