모바일 청첩장 만들면서 느낀점들

3줄 요약
1. 모바일 청첩장 혼자 만들긴 힘들다.
2. 100vh 조심하자.
3. 시간적 여유가 된다면 모바일 청첩장 직접 만드는 것 추천한다.

만든 계기

작년부터 결혼식을 준비하면서 주변 (프론트엔드) 개발자분들에게 여쭤봤다. 혹시 모바일 청첩장 만드셨나고. 하지만 대부분은 만들기 귀찮기도 하고 청첩장을 만들면 무료로 해주기에 안하셨다고 하셨다. 나도 그래서 안 만들줄 알았다.

최근에 청첩장을 신청했고, 해당 업체에서 모바일 청첩장 무료 쿠폰을 주더라. 그때 갑자기 그런 생각이 들었다. 업체 템플릿에 몸을 맡기지 말고 직접 해보기로. 나의 재능(?)을 살려서 하나뿐인 청첩장을 만들면 더없이 기쁠 것 같았다. 거기에 주변 개발자분들에게 모바일 청첩장을 공유할 때 “이 자식 github page로 배포했네? 좀 치네?” 이라는 말을 들을 생각하니 당장 시작해야겠다는 마음뿐이었다.

우선 구글에 “github 청첩장”이라고 검색해봤다. 꽤 예시를 많이 마주했고, 인상 깊었던 분은 구글 태그를 활용해서 청첩장 내 어떤 버튼이 많이 눌렸는지 확인했다는 글을 보고 나도 해볼까 생각이 들었다. 그러다 이 레포를 알게되었고 간단한 구성에 빠르게 시작할 수 있었다.

만들면서 느낀 점

1. 디자인 + 기획까지 하니 너무 힘들었다. 대문까지는 쉬웠는데, 그 다음부터는 유려한 느낌이 안나더라. 역시 디자이너가 있어야 되나 싶었지만 나에겐 그런 역량 + 부탁드릴 지인도 없기에, 각 모바일 청첩장 업체의 샘플을 보면서 어떻게 했나 참고하면서 스타일을 입혔다.
2. 업체의 모바일 청첩장은 잘 만들어졌다고 생각했다. 만들면서 크게 4곳의 청첩장을 확인했는데 각 업체별 만듦새 차이는 있었지만, 꽤나 잘만들어져있어 놀랐다.
3. 모든 업체가 alert을 사용한다는 걸 알게되었다. 모바일웹 개발 경험이 적은 나에겐 alert는 기피의 대상으로 생각했었는데, 막상 핸드폰(=카카오톡 인앱 브라우저)에서 확인했을 때 UX가 나쁘지 않더라. 앞으로 모바일웹 쪽을 개발할 때 마냥 alert를 기피해야하는건지 고민되긴 했다.
4. 100vh... ㅠㅠ 높이가 가변적으로 변하는 모바일웹을 생각하지 않고 PC에서만 개발하다보니 100vh에 대한 끔찍한 경험(스크롤 끊김 현상)을 하였다. 이에 대한 대처는 innerHeight로 대치하는 방식을 썼지만, 앞으로 화면 높이에 따라 CSS 적용하는건 조심해야겠다는 생각이 들었다.
5. 파이어베이스는 잘 만들어졌다는 걸 다시 한번 실감했다. 댓글이랑 좋아요 버튼 기능을 만들었는데 파이어베이스를 활용하니 너무 쉽게 만들 수 있었다. 콘솔로 테스트로 작성한 댓글을 삭제도 쉽게 할 수 있고. 파이어베이스의 경쟁업체가 있는지 모르겠으나 분발해야하는 거 아닌가 싶기도.
6. 스벨트로 작업을 했는데 코드량은 확실히 적은 것 같다. 다만 css로만 스타일링을 했는데 네이밍이 너무 맘에 안들더라. 부끄러워서 css 이름을 못 알아보게 난독화하고 싶었는데 하진 못했다. 차라리 tailwind나 teo가 만든 adorable css로 갈아타야하는 생각이 들었다.

글의 마무리

나에게 모바일 청첩장 직접 만드는거 어떻게 생각하냐고 묻는다면, 시간적 여유가 있으면 직접 만드는 것을 권유할 것 같다. 결혼식을 기념하는 의미 있는 일을 또 하나 만들 수 있기 때문이다.