연하장 프로젝트 회고

연하장 프로젝트 회고

1. 연하장 만들기

2022년 새해를 맞이해서 주변 지인들에게 손으로 연하장을 써서 드릴까 하다가, 간단히 한번 만들어보기로 했다. 보통의 연하장들 디자인을 보면 그 해를 상징하는 동물이 나오거나, 아니면 해가 뜨는 모습을 형상화 한 디자인이 많이 있다. 그 중에서 보편적인 해가 뜨는 모습을 생각을 해서 만들기 시작했다. 따로 서버가 필요할거 같지는 않아서 Gatsby를 이용해서 하루동안 간단히 만들기 시작했다.

2. 디자인은?

따로 디자인이 없다보니 처음에는 가운데에 해와 글씨만 나오는 형태로 만들었다. 만들다 보니 해가 뜨는 모습을 애니메이션으로 넣으면 좋을 것 같아서, 아래에서 위로 올라오는 모습의 애니메이션을 추가했다. 그리고 신년에는 구름한점 없는 해처럼 밝은 모습을 보여주기 위해, 무료 구름 이미지를 추가해서 해가 뜨면서 사라지는 애니메이션으로 만들어 주었다.

같이 일하는 분들께 보여주면서 피드백을 받았다. 해의 색깔에 약간 그라데이션을 주면 좋을 것 같다, 또는 애니메이션을 좀 더 부드럽게 해주었으면 좋겠다등의 피드백을 받아서 디자인은 쉽게 수정할 수 있었다.

3. Vercel과 Bitly를 통한 배포 및 공유

vercel을 통해 배포를 했는데, 해당 url이 이쁘게 보이지 않아서 찾아보다가 마케팅팀에서 쓰는 bitly를 이용해보기로 했다. 다행히 bitly는 어느정도 사용해도 무료인데다 사용자가 직접 들어왔는지 또는 카카오톡, 페이스북 등 다양한 경로를 트레킹하는 기능도 제공해 주었다.

4. 사용자가 입력한 이름을 보여주기

피드백 중에, 공통 문구 앞에 받는 분의 이름을 넣을수 있으면 좋겠다고 해서 고민을 많이했다. 이름을 추가하게 되면 어딘가에는 저장해야하는데, 어디에 저장할 지 막막헀다.

bit.ly 링크는, bit.ly의 링크를 만들어서 실제 배포된 주소로 내 주소의 링크를 redirect해주는 역할을 하고 있다. 즉. https://every-happy-new-year.vercel.app/가 vercel로 배포된 링크라면, 이 주소를 쳐야지만 들어올 수 있지만, https://bit.ly/3EzJUo3라는 더 짧고 간결한 링크를 만들어서 공유하면 해당 링크를 타고 들어와도 vercel 배포한 곳으로 갈 수 있다.

처음에는 Url Parameter을 이용해서 공유될 url에 이름을 넣어서 사용하는 방법을 생각했다. 다만 이 방법은 bit.ly에서 생성된 링크는 param을 전달해주지 않아서 해결이 되지 않았다. 그러다 혹시나 하는 마음에 Hash를 이용하면 어떨까 싶어서 시도해보니 리다이렉팅 되도 잘 넘어오는 것을 확인할 수 있었다. 페이지 진입시 Hash에 값이 있으면 이를 이름으로 치환해서 보여줄 수 있게 만들었다.

5. TODO

주변 분들에게 인사할 때마다 전달해 드렸고, 그 분들이 공유하기 링크를 통해 사용함으로써 500여명의 사용자가 생길 수 있었다. 내년에 이 프로젝트를 리팩토링해서 쓴다면, 몇가지 개선해야 할 점들이 보였다.

• 60갑자를 계산해서 색깔, 동물이 맞게 나왔으면 좋겠다.
• 좀 더 애니메이션을 넣어도 좋지 않을까? 해가 뜨기 앞서서 카드를 열면 나온다던지 등등.
• 그 외 디자인, 색상, 파비콘, 썸네일 이미지 좀 더 개선…

---

참고

• Github
• Vercel link
• Bit.ly link