💌 크리스마스 카드 보내는 웹사이트 개발하기 !

안녕하세요! 지난 여름쯔음 친구 생일 기념으로 웹사이트 만든 글을 쓴 이후로 오랜만에 프로젝트 관련 돼서 글을 쓰는 것 같네요.

정말 가볍고 재미를 위해서 만들었던 프로젝트였는데, 벨로그를 통해서 많은 사람들에게 관심을 받았던 좋은 경험이었던 것 같아요 :-)

🎂 지난 프로젝트 보러가기 !

이번에도 재밌고 귀여운 프로젝트를 하나 소개해볼까 합니다 😆

💌 파란우체통 : 편지로 마음을 전해주세요!

기획의도

매년 크리스마스 시즌이 다가오면 서점에 가서 크리스마스 카드를 항상 사곤했는데 .. 올해는 시국이 시국인지라 카드를 써도 전달할 방법이 마땅하지 않아 웹사이트로 쉽게 카드를 주고 받으면 어떨까 .. 하다가 바로 기획을 하게 되었습니다 !!

사용방법

마음에 드는 카드를 골라주세요

키워드로 검색도 가능합니다.

편지를 작성합니다!

공유하기 버튼 누르기 !!

보내고 싶은 사람한테 카톡으로 공유하면 끝 ~

빠르고 쉽게 카드에 마음을 적어서 전할 수 있습니다! (웹에서 보면 눈도 내려용 ❄️)

기술스택

• Angular
• GrapQL
• Apollo server
• Mysql
• AWS S3
• AWS EC2

기획을 하고 바로 개발을 시작하려고 했기 때문에 가장 많이 사용하고 자신있는 언어들을 기반으로 개발을 시작했습니다. 앵귤러 기반의 프론트엔드와 graphql과 아폴로 서버의 백엔드 조합으로 구현을 했습니다!

개발 회고.. 🥺

간단하게 프로젝트 소개를 한 것 같고 개발을 하면서 짧은 회고를 해볼까 합니다...!! 솔직히 간단한 웹사이트라고 생각을 해서 1주일이면 완성할 것 같은 생각을 하고 있었습니다. 하지만 디자인 UI 부터 프론트엔드, 백엔드, 배포까지 혼자하려니깐 생각보다 쉽지 않더군요 ...

사실 저는 여태 프로젝트를 하면서 대부분 백엔드를 맡았어서, 디자인 UI 와 프론트엔드 작업을 주로 하지 않았는데 .... 이 프로젝트를 하면서 어떻게 해도 맘에 안드는 웹 UI와 CSS가 저의 발목을 잡았습니다 .... 반응형으로 하고 싶은 욕심도 커서 많이 고민을 했는데, 웹과 앱 동시에 반응형을 하는건 무리일 것 같아서 웹사이트를 앱 사이즈에 맞추는 방법으로 진행했습니다! 이미지나 폰트 같은 건 앱이나 웹에 따라 맞춰서 수정해주고요! 개발하면서 주변에 디자인 잘하는 지인들에게 귀찮도록 이거 어떻냐고 물어본 결과 나름 제 맘에 드는 UI와 제가 표현하고 싶은 갬성이 잘 나타나는 웹사이트가 된 것 같습니다 ... ㅎㅎㅎㅎ

이 아이디어를 떠올리고 바로 개발을 시작을 했습니다. 사실 이번년도에 여러가지 사이드 프로젝트를 벌려놓은게 많았는데, 어쩌다보니 거의 다 흐지부지해져서 많이 아쉬웠습니다. 그래서 이번에는 혼자 개발하기로 마음 먹은 만큼 꼭 완성시켜서 크리스마스 1주 전까지 웹사이트 잘 굴러가게 만들기!!!! 를 목표로 잡았던 것 같아요. 퇴근하고 몇시간씩, 주말에도 계속 붙잡고 있던 결과 11일만에 어느정도 목표한 것 까진 달성한 웹사이트가 완성 된 것 같네요 ㅎㅎ

마지막으로 기획부터 배포까지 혼자서 다 해본 경험이었던 것 같습니다. 특히 간단한 정적 사이트 배포는 자주 해봤는데, 서버까지 동적인 서비스를 배포한 것이 처음이라 새롭기도 하고 삽질도 많이 했던 것 같습니다. 처음에는 간단하게 헤로쿠로 해볼까 했는데 .. 왜 때문인지 그 쉬운 헤로쿠가 안돼서 6시간동안 하다가 화나서 아마존으로 재도전.....그리고 도메인 연결해서 배포를 성공시킨 경험이 이번 프로젝트에서 가장 뿌듯하고 눈물 날 뻔한 순간이라고 할 수 있었던 것 같아요.. (몇시간 동안 404 에러만 뜨다가 새로고침 했을 때 딱 잘 나왔을 때 그 짜릿함 ...... 아직도 잊지 못합니다..ㅋㅋ)

개발방법

저만의 개발방법! 혼자 개발하거나 같이 개발할 때 자주 사용하는 유용한 도구들을 소개해드립니다..! 혼자 개발하더라도 협업한다는 느낌으로 계획적이게 개발하면 더 좋은 것 같아요.

개발하기 전에 어느정도 UI 작업은 필요할 것 같다고 생각을 했습니다. 사이드 프로젝트 하면서 디자이너분이 피그마를 주로 사용하시는 걸 보고 저두 한번 피그마를 사용해봤습니다! 포토샵이나 일러스트를 잘 못써서 피그마로 간단하게 UI 작업을 해봤는데 정말 간단하고 편하더라구요! 디자인툴을 잘 알지 못해도 쉽게 뚝딱뚝딱 그려낼 수 있어서 간단하게 화면 구현하기엔 좋았던 것 같아요.

프로젝트 진행 할 때 진행상황을 한눈에 관리하기엔 칸반 툴이 가장 간편한 것 같아요! 노션 칸반 또는 트렐로 같은 칸반으로 프로젝트를 관리해도 좋구요! 저는 깃허브 저장소 내에 있는 프로젝트를 사용했습니다. 보통 코드 관리를 깃허브로 하는데 쉽게 이슈로 넘길 수 있고 이에 따른 브랜치도 딸 수 있어서 깃허브랑 연동이 되는 것이 가장 큰 장점이라고 생각합니다! 또는 무엇보다 그냥 저장소 내에서 쉽게 관리가 되니깐 굳이 따른 툴을 안써도 된다는 점!? 제가 느끼기엔 가장 편리했습니다.

깃허브 프로젝트 강추합니다 !!

디비가 간단하긴 해도 대충이라도 ERD를 짜고 디비를 구현하는게 좋을 것 같았습니다.

https://www.erdcloud.com/

제가 사용한 웹사이트는 erdcloud라는 사이트고 깃허브로 쉽게 가입가능하고 간단하게 다이어그램을 만들 수 있습니다! 이것도 정말 추천..... 공유도 쉽게 돼서 협업할 때도 좋아요 ㅎㅎ

아쉬운점

일단 첫번째로 가장 아쉬운 건 카드 디자인이 아닐까 싶습니다. 카드를 보내려면 다량의 크리스마스 카드가 필요했는데, 디자이너가 아닌 제가 직접 카드 디자인을 하다보니 카드가 크리스마스에 한정적인 것이 가장 아쉽습니다. ㅠㅠ 생일카드, 신년카드 등등 여러가지 카드가 다양했음 좋았을텐데...!! (이건 조만간 추가될예정입니다!!)

두번째로는 '완성'이라는 목표에 막판에 갈수록 코드를 너무 대충 짜기 시작해서 부끄러운 코드가 되어버린 것 같습니다 .. ㅎㅎ 들여다보면 반복된 코드도 많고, 이상한 변수도 많을 것 같아서 나중에 한번 리팩토링 작업을 해야겠다는 생각이 들었습니다.

앞으로의 계획 !!

앞으로의 계획 중 가장 첫번째! 주변 디자이너 지인들에게 완성된 웹사이트를 보여주며 이제 카드 디자인이 마구마구 필요하다며 요청을 했더니 흔쾌히 디자인을 도와주겠다고 했습니다! 앞으로는 새롭고 다양한 퀄리티 있는 카드들이 업뎃 될 예정이니 기대해주세요 ... 😊

두번째로는 모바일 웹보다는 아무래도 앱이 더 편할 것 같다라는 생각이 들어 Angular로 구현한 프론트엔드를 Ionic을 사용해서 하이브리드 앱으로 바꿔보고 싶은 욕심도 있습니다!!

마지막으로는 이번 크리스마스 시즌, 더불어 신년 혹은 생일 등등 이 웹사이트가 유용하게 쓸 수 있도록 유지보수나 유저들의 사용후기를 들으면서 다양한 기능추가를 통해 더 완성된 웹사이트가 되는 것이 가장 큰 목표입니다!! (많이 써주세요....🥺🥺)

깃허브

https://github.com/blue-postman

버그 발견이나 기능요청 등등 댓글이나 이슈로 적어주시면 바로바로 반영하도록 하겠습니다 ...😎

마무리

긴 글 읽어주셔서 감사합니다! 벌써 2020년 끝자락이 보일랑말랑 하네요.. 유난히 힘들고 시간이 안가는 한 해 였던 것 같습니다 ㅠㅠ

글을 마무리하며 미리 메리크리스마스입니다 !!! 🎄💌

감사합니다 ㅎㅎ :-)