셀프 모바일청첩장 만들기!(feat. Github)

개발자니까 모바일 청첩장은 내가 만들어볼게

실수였다...
나는 백엔드 개발잔데 화면 구성은 어떻게 하지...?

그래도 학교 다닐때 html이랑 javaScript를 잠깐 배웠으니...가능할지도...????????
라는 생각으로 여러 레퍼런스들을 찾아봤다. 그리고 디자인 부터 시작했다.

1. 구성

• 먼저 디자인을 구성하기 전에 우리가 모바일 청첩장에 담고 싶은 내용들을 생각해봤다.
  • 기존 업체들의 틀에 박힌 모바일 청첩장보단 내가 만들었으니 차별점을 두고 싶었다.
  • BGM없고 부모님이 해외에 계시기에 연락처보단 카카오 연동이 필요했다.
  • 간단한 메세지와 전달해야 하는 내용들만 담고 싶었다.

2. 타겟

• 우리의 청첩장을 누구에게 전달해야 할까 생각해봤다.
  • 친구
  • 지인
  • 회사
  • 친인척, 부모님 지인
• 크게 타켓은 [친구, 지인] , [회사, 친인척, 부모님 지인] 이렇게 2분류로 나누기로 했다.

타겟은 나눴는데 기존 업체들의 모바일 청첩장과 차별점이 무엇일까... 생각했다

다른 개발자분들 레퍼런스를 보며 '우기님'이 작성하신 블로그를 보고 많은 도움이 되었다. (감사합니다. 꾸벅) 나도 친구, 지인마다 문구를 넣고 싶었다. "ㅇㅇ야 나 장가간다" 라고

[참고]

https://velog.io/@woogiemadeit/%EA%B7%B8%EB%9E%98%EB%8F%84-%EB%AA%85%EC%83%89%EC%9D%B4-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%B8%EB%8D%B0-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%B2%AD%EC%B2%A9%EC%9E%A5%EC%9D%80-%EB%82%B4%EA%B0%80-%EB%A7%8C%EB%93%A4%EC%96%B4%EC%95%BC%EC%A7%80

3. 디자인

• 갤러리에서 와이프와 고민을 했었다. 9~12장 정도 미리 보기 형식처럼 띄워주고 터치해서 크게 볼건지 메인 이미지 사이즈를 키우고 자동으로 넘어가고 밑에 작게 썸네일 처럼 보여줄건지
• 메인 이미지 사이즈를 키우고 자동으로 넘어가고 터치하면 확장해서 볼수있게 결정했다.

4. 개발

• [친구,지인] 용으로 개발하기 위해선 URL 파라미터로 이름과 성별 타입을 받아서 개별적으로 분류했다.
• 지인들중엔 우리보다 형님 누님들이 계셨기에 이름, 성별외에 손윗사람을 구분하는 타입도 추가로 받았다.

5. 호스팅

• 우리도 깃헙에 우리의 계정을 새로 하나 만들고 호스팅 하기로 했다.
• 깃헙에 호스팅 한다면 "asdasd.github.io" 처럼 뭔가... 지인들이 봤을때 생소할 수도 있겠다고 생각해서 가비아에서 도메인 하나를 사서 붙였다.

6. 결과

• [회사, 친인척, 부모님 지인]
  

• [친구,지인]
  

• 갤러리
  

• 달력
  

• 연락처
  

• 계좌
  

7. 후기

• 정말 심플하게 만들었고, 주변 지인들에게 이런 청첩장은 처음 받아본다며 신기하다고 피드백을 많이 받았다 :)
• 와이프가 갤러리에서 사진 확대, 저장을 막아 달라는 요청이 있어 이부분에서 조금 애먹었다. HTML과 Java Script는 진짜 몇년만에 해본건지 ㅠㅠㅠ