2019년 5월 18일.
이날은 여자친구와 4년 그리고 1일 되는날, 그리고 결혼식이 열렸던 날이다.
결혼식을 준비하면서 만든 github.io blog기반 모바일 청첩장을 만들게 된 이유와 만들기까지의 과정에 대해 이야기 하고자 한다.
결혼식을 위해 뼈발자(뼈속까지 개발자)인 나는 어떻게 결혼식을 준비하는데 있어 실력을 발휘할까 고민하던 도중 모바일 청첩장을 직접! 만들어보면 어떨까 아이디어를 생각하였다.
모바일 청첩장을 직접 만들고자 한 이유는 아래와 같았다.
첫째. 바른x, 더카x 등 종이 청첩장을 만들어주는 사이트의 디자인이 마음에 안든다.
둘째. 무료로 청첩장을 만들어 주는 사이트는 시간이 지나면 만료되어 더이상 조회가 불가능하다.
셋째. 선물 예약 기능. 친구들에게 필요한 선물을 알려주고 예약하는 기능을 모바일을 통해 제공하고 싶었다.
상기와 같은 이유로 아내(구 여자친구)에게 직접 만들어보자고 제안했고. 그녀 또한 개발자였기에 내 제안을 흔쾌히 승낙했다.
호스팅 서버 정하기
우리가 직접 만들고자 하는 Html기반의 모바일 청첩장을 올리는 방법은 세가지가 있었는데 다음과 같았다.
첫째. aws ec2를 사용, 둘째. aws s3을 사용한 html public access, 셋째. github.io 블로그.
첫번째로 생각한 aws ec2의 방식은 가장 전통적인 홈페이지 서버 제작 방식이다. web server 또는 was server을 개발하여 ec2 서버에 올리고 domain(혹은 ip)기반 주소를 고객들(모바일 청첩장을 받는 대상)에게 제공해 줄수 있다. ec2를 사용한다면 가장 기능을 다양하게 만들 수 있으며 자유도가 높다. 그러나 ec2 computing비용과 network비용이 부담될 수 있으며 방문자 수에 따라 ec2를 scale up/scale out을 해야할 수도 있다. 이는 모바일 청첩장 만드는데 소잡는 칼(Over engineering)이라고 생각하여 탈락시켰다.
둘째로 생각한 aws s3방식은 첫번째 방법에서 약간 편법을 사용한 방식인데, aws의 object storage를 사용하여 html 등 정적페이지를 올리고 해당 bucket을 public access로 설정하여 index.html을 고객들에게 제공할 수 있다. 이 방법은 세가지 방식중에 가장 간편하고 local에서 정적 source들을 개발한 뒤에 upload하기만 하면 바로 적용되는 구조다. 하지만 정적페이지만 올려야 하므로 여러가지 기능들을 추가하기 까다로웠고 s3의 download network비용이 예측못하게 발생할 수 있었기에 탈락시켰다.
마지막으로 생각한 github.io 블로그를 사용하는 방식은 나와 아내가 생각한 가장 이상적인 호스팅 방식이였다. 일단 얼마든지 사용해도 무료라는 점이 가장 매력적으로 들려왔다. 모바일 청첩장에 들어오는 고객들의 수요를 몰랐기에 함부로 비용이 나오는 서비스에 올리는 것은 무모하다고 생각했다. github.io 블로그는 간단한 이벤트 페이지를 만들기에도 적합했고, 적절한 속도를 가지고 있으며, docs folder이하의 index.html 정적페이지를 올리면 간단한 설정을 통해 blog연결 domain도 자동 생성된다. 또한 readme.md에 나와 아내의 친구들(개발자들)이 pull request기반으로 축하의 말을 올리면 blog에 반영되게 하는 기능도 넣어 모바일 청첩장에 기여할수 있는 기능도 넣었는데, 이 기능은 친구들 그리고 선후배들(개발자들)에게 아주 반응이 뜨거웠다.
모바일 청첩장 템플릿 정하기
나는 마크업 개발자가 아니다. 아내 또한 마크업 개발자가 아니다. 프론트는 간단하게 js, html, css 정도만 학교에서 배운지식을 가지고 있고 실무에서 깊게 사용해본적이 없기 때문에 직접 맨땅(File > New file)에 만들기는 무리였다. 하지만 구글신은 나를 버리지 않았기에 구글링을 해보니 Wedding mobile html template를 아주 많이 제공하고 있다는 사실을 알게 되었다.
구글에 wedding html template 라고 검색하면 다양한 html template 판매사이트들이 나오는데 유료부터 무료까지 다양하다. 잘 찾으면 무료로도 훌륭한 퀄리티의 html template를 찾을 수 있다. 일단 template를 구하면 내부에 필요/불필요한 부분은 수정할 수 있으니 최대한 마음에 드는 것으로 골라서 추후 수정하는 방식으로 진행했다.
기능 추가하기
이번 모바일 청첩장에 필요한 기능은 총 세가지 이다. 댓글, 지도 그리고 선물하기.
댓글기능은 생각보다 간편하게 만들 수 있었다. 모바일 청첩장 repository의 readme.md에 축하의 말 세션을 집어넣고 정적페이지 로딩시 ajax로 해당 readme.md를 파싱하여 축하의 말 세션 아래를 모두 markdown text로 파싱하여 보여주는 방식을 취했다.
지도 기능은 daum, naver, google이 후보였는데, daum, naver지도 두개다 template에 넣으니 정상적으로 보이지 않았다. width 100%, left, right 등 내가 알고 있는 css지식을 최대한 활용해보았지만 좌절하고 포기했다. 약간 불편하지만 넣기 좋고 보기 좋은(css가 잘 먹는) google 지도를 사용했다. 추가로 네이버지도, 카카오지도, 구글지도 버튼을 추가하여 고객이 편한 지도로 볼 수 있도록 유도하였다.
마지막으로 이번 모바일 청첩장을 만들게 된 가장 중요한 이유중 하나인 선물하기 기능.
선물하기 기능을 통해 친구들 혹은 지인, 친척들이 중복해서 선물하지 않도록하는 목적으로 만들었다. 처음에는 말그대로 예약! 하면 나와 아내에게 알람이 가고, 해당 버튼도 닫히는 기능을 넣으려고 했지만 결혼식 준비하는데 모바일청첩장을 만드는데 모든 시간을 쓰는 것은 무리였다.
고객(친구, 지인 등)이 선물 예약하기를 통해 성함과 메시지를 적으면 email SaaS(Software as a Service)를 사용하여 예약 이메일이 나랑 아내에게 발송하게 하였고 실시간으로 나 혹은 아내가 발송을 받으면 html의 css를 수정하여 disabled + dimmed 처리하여 더이상 예약을 하지 못하게 alert를 보여주는 방식으로 구현했다. 반자동이지만 효과적이였다!
아쉬웠던점
백엔드소프트웨어 개발자라 마크업에서 화려하게 사용하는 parallex, animation, micro animation등을 사용하지 못해 매우 아쉽다. 세세한 design들이 unique한 모바일 청첩장을 만들게 되는데, 다음에 청첩장(아기 돌잔치 같은거?) 만들일이 있다면 한번 도전해보고 싶다.
그리고 많은 고객들이 아쉬워했던 기능은 댓글이다. 댓글기능은 현재 github에 회원가입 되어 있는 개발을 사랑하는 멋진 Developer들만 pull request를 날릴 수 있어 개발자가 아닌 친구들에게는 허들이 높아 댓글을 달기 무척이나 어려웠다.ㅠㅜ
결론
결혼을 준비한다는 일은 쉽지 않았다. 하나하나 세세한거 부터 큼직큼직한것 까지 결정할게 많았다. 이런 이벤트 도중 모바일 청첩장을 만드는 것은 사실 도전적인 과제였다. 나와 아내는 각자 자신이 할 수 있는 부분을 분배하여 개발을 진행하였고 결과적으로 모두가 만족하는 모바일 청첩장을 만들 수 있었다. 이 자리를 빌어 모바일 청첩장을 같이 만들어준 아내에게 감사의 인사의 전하며, 지난 5월 18일 부산에서 열린 결혼식에도 찾아와주신 가족, 친구, 지인 모두에게 또한번 진심으로 감사의 인사를 전한다.
출처
'개발이야기' 카테고리의 다른 글
| [Python서버] Django vs Flask (0) | 2019.10.10 |
|---|---|
| shell script - apache access log에서 접근 url top 10 추출하기 (0) | 2019.08.30 |
| Intellij에서 줄바꿈 간격 화면에 맞게 custom 조정하기 꿀팁 (379) | 2019.08.08 |
| Java에서 method작성시 파라미터 개수를 5개미만으로 해야하는 이유?? (270) | 2019.05.03 |
| 특정 문자가 들어간 line만 뽑아내는 정규식 (405) | 2019.04.01 |
| Back-end 개발자라면 답변가능한 Questions (258) | 2019.02.11 |
