개요
결혼 하려니까 청첩장은 필요한데, 종이 청첩장은 만들기 귀찮고 아무도 초대 안 할거라 쓸모가 없어서 그냥 모바일 청첩장만 만들기로 했다.
개발
Backend
사용 라이브러리 및 환경
내용
기본적으로 서버는 리버스 프록시를 물려둔 nginx 에서 node.js 프로세스를 사용해서 띄웠다. 서버가 하는 일이 별로 없는 관계로 최대한 간단하게 구성했다. 축하 인사 남기는 기능만 없었어도 DB 랑 패스포트도 필요 없이 그냥 단순 깃헙 페이지만으로도 만들 수 있었을텐데..
축하인사
나는 남의 사이트에 가입하기 귀찮으니까 남들도 이런거에 가입하기 귀찮을 게 분명하다. 그래서 가입은 안 만들었다.
그렇다고 스팸을 다 받아주기도 싫고 해서 많이들 쓰는 SNS 계정 연동을 붙였다. 이건 그냥 이름하고 사진만 가져오면 되는거기 때문에 가입 절차도 필요 없고 간단했다.
passport 를 통해 가져온 데이터들이 형태가 각기 달라서 거기 맞춰서 가공해주는 정도가 끝.
축하 인사 건수가 엄청 많을 거 같진 않은데, 그래도 내 서버가 연약하기 때문에 간단한 방법으로 캐싱을 구현했다. 그냥 축하인사 전체 배열을 메모리에 들고 있는 거...
그래서 사용자가 축하인사를 저장할 때와, 처음 서버를 기동할 때를 제외하면 별다른 DB IO 없이 처리가 가능한 구조로 만들었다.
더보기 기능 구현은 별 거 없으니 딱히 쓸 말이 없지만, 사실 사이트 전체적으로 별다른 쓸 거리가 없는 건 마찬가지다.
Frontend
사용 라이브러리
내용
전체적으로 CSS trasition 속성을 통해 애니메이션 기능을 구현했고, 키워드 맵에는 D3를 사용했다. 사실 없어도 별 차이는 없었을 거 같은데 그냥 써보고 싶어서...
모바일 사파리가 거지같다는 점을 새삼 깨닫게 되는 개발이었는데, 이놈은 아직도 -webkit- prefix 를 붙여줘야 한다.
전체적으로 애니메이션 성능을 위해서 transform 과 opacity 속성으로 애니메이션을 했고, 최대한 단순한 방식으로 페이지를 구성했다. 사용된 이미지의 양도 엄청나게 적다.
나의 구린 디자인 센스를 보다못한 또띠느님이 디자인을 해줘서 별 기능이 없는데도 모양새가 그럴싸한 사이트가 된 점이 포인트!
meta viewport 에서 가로 사이즈를 750px 로 놓고 작업했는데, 이정도가 딱 적당하고 좋은 것 같다. 모바일에서도 잘 보이고 웹에서 보기에도 너무 작지 않아서 다행이었다.
테스트는 PC 웹브라우저(엣지, 크롬, 사파리, 파폭)과 모바일 엣지(윈도폰), 아이패드/아이폰용 사파리에서 진행했는데 이 중에서 iOS 기기의 렌더링이 제일 느리고 찐따같았다. 당연한거겠지만..
아이콘은 공개 아이콘 사이트에서 라이센스를 확인해서 가져다 사용했고, 사진은 다 그냥 직접 찍은 것들.
기타
나중에 회사 짤리면 모바일 청첩장 사업이라도 해야겠다고 농담은 했지만, 사실 수익성이 전혀 없을 것 같기 때문에 안 될 것 같다...