벌써 6월이 코 앞이라 놀랐다. 그만큼 바빴던 일이 많았다. 민경 씨와 3년 반 넘는 장거리 연애 끝에 결혼하기로 작년 말 결정했다. 올해 들어서 이직도 하고, 책도 나오고, 이상한모임 앱도 만들고, 인사 겸 결혼 준비 겸 3월에도 짧게 한국을 다녀왔고, 5월은 한국에서 지내다가 결혼식을 한 후에 멜번으로 돌아왔다. 결혼 준비 과정도 글을 써서 남겨둘까 싶었지만 생각보다 직접 한 부분이 많지 않았다. 전문가들이 저렴한 비용으로 어디보다 빠르게 해결해주는 모습에서 한국에 왔음을 실감했다. 그 사이에 크게 필요 없었지만 부모님은 필요하실 것 같아 종이 청첩장도 주문했다.

청첩장을 주문하면서 예전에 규님이 올린 청첩장 개발기를 읽고 직접 만드는 것도 의미 있겠다 생각했던 게 기억이 났다. 그래서 청첩장 웹페이지는 직접 만드는 것이 좋겠다는 생각이 들어 민경 씨와 의논 후에 직접 만들게 되었다. 욕심에는 화려하게 만들어보고 싶었지만 생각보다 너무 바쁘게 지내다 결혼식 한 달 전에 가까스로 마무리 할 수 있었다.

  • 사진은 3월에 동생이 촬영해줬다. 짧은 시간이었는데 잘 찍어줘서 고마웠다.
  • 우리 이야기를 작성하는데 생각보다 시간이 많이 걸렸다. 그간 찍었던 사진을 민경 씨가 골라줘서 이야기 사이사이에 사진도 넣었다.
  • 영문 버전도 작성했다. 국문으로 먼저 작성하고 민경 씨가 번역했다.
  • html로 작성했고 페이스북 오픈그래프와 트위터 카드 메타를 추가했다.
  • 메시지 남기는 부분은 디비도 안쓰고 jQuery에 json으로 대충 저장하려고 그러다가 오히려 번잡스럽게 되어서 mysql 사용해서 제대로 자료도 저장하고 jQuery 부분도 angular 1.x 로 다 교체했다. 백엔드는 이미 서버에 있는 php를 사용했다.
  • 메시지는 간단하게 이름과 내용만 받았다.
  • 전송한 메시지는 pending 상태로 디비에 저장되며 확인이 된 메시지만 공개되도록 만들었다. 대신 제출했을
    때 안보이거나 확인 후 게시 된다는 표시가 보이면 기분이 언짢을 수(?) 있으므로 local storage에 저장해서 본인의 메시지가 바로 노출되는 것으로 보이게 작성했다. 문제가 있다면 내가 직접 거르면 되므로 따로 삭제/수정 기능은 넣지 않았다.
  • 원래는 다른 서체를 사용할 계획이었는데 본명조가 나와 바로 교체했다. Adobe CC를 구독하고 있어서 TypeKit으로 적용했다.
  • 미디어 쿼리로 여러 해상도에서도 디자이너가 고통받는 레이아웃이 나오지 않도록 조절하는 작업을 많이 했다. :lang으로 영문, 국문 스타일을 처리했는데 손이 많이 가긴 했지만 그럭저럭 괜찮은 수준까지 정리가 되었다.
  • 아이콘은 typicons을 사용했다.

이렇게 만든 청첩장은 wedding.haruair.com에서 확인할 수 있다. 많은 분들이 메시지를 남겨주셨고 제주까지 오셔서 축하해주신 분들도 계셔 너무 감사하다. (열심히 살겠습니다 😊)

The post 결혼 청첩장 페이지 개발기 appeared first on Haruair.