두 번째 프로젝트; Habit, Have it
목표 달성 서비스(Habit, Have it) 개발 로그
서비스 링크 : https://habit-haveit-tau.vercel.app/
github 링크 : https://github.com/SNU-X-KU-HackaThon/habit-haveit
0. 후기
1. 모두 최선을 다했다. 해커톤 1/22~23 , 홍보 2/1까지. 짧다면 짧고 길다면 긴 약 1주일간의 시간 동안 정말 친구들에게 보내줄 수 있을 간단하게 라도 서비스를 만들 줄이야. 사실 해커톤 이후 더 디벨롭시켜서 실제 배포해서 홍보까지 해본 경우가 처음이기에 정말 뿌듯했다. 마침표를 드디어 찍은 기분이다.
2. 홍보 이후 이슈가 터졌다. 어제 새벽까지 고쳐봤는데 잘 되지 않았다. 이게 실제 규모가 더 크고, 더 중요한 서비스였다면. QA, 결국 퀄리티를 좌우하는 것은 모든 경우의 이슈까지 전부 생각해서 대응하는 것.
3. 많은 것들을 배웠다. Next.js, 배포, 반응형 등등. 거창한 문제를 해결하려 한 것도 아니다. 그저 한 달 한 달 자신의 목표를 세우고 서로 응원을 나누는 그런 따뜻한 그림을 상상하며, 일주일을 보내왔다.
4. 개발 공부를 처음 시작한 이유가 기억난다. '그냥 내가 만들어보고 싶은 서비스를 진짜 만들 수 있었으면 좋겠다.' 간단하지만 이렇게 한걸음 한걸음 원하는 그림에 다가가는 것 같다.
1. 발단 : 월말 결산
기록의 중요성에 대해 많이 느낀다. 쏟아지는 정보, 경험, 생각들이 정돈되지 않고 머릿속에 잠시 머무른 채 떠내려가는 기분이었다. 특히 2021년을 마무리하는 날, 1년을 돌아보며 느꼈다. '정말 많은 것들을 했고 분명 많이 성장했는데 정돈되지 않았구나'.
또, 혼자서 뭔가를 시작하면 끝까지 꾸준히 실천으로 이어지기가 힘들었다. 항상 공부도 스터디나 모임을 이용하는 편. 그래서 생각했다. 1년보다 더 작은 단위인 한 달을 단위로 정리해보자. 그리고 그 정리를 다수의 사람들과 함께 해본다면, 적어도 내 1년은 12배 정도는 효율적으로 보낼 수 있지 않을까.
https://open.kakao.com/o/gGVcg8Rd
2. 문제
월말 결산 프로젝트를 그래서 진행 중이다. 진행을 해보니, 욕심 일수도 있지만, 문제가 느껴졌다. 정말 월초와 월말에 진행하는 계획과 회고뿐만 아니라, 그 사이의 실천도 조금 더 도와줄 수 있었으면 좋겠다는 생각. 내가 목표를 정하고 이번 한 달은 그걸 지키고자 마음을 먹었으면, 그리고 그게 정말 지켜지게 하려면 어떤 것들이 더 있으면 좋을까.
3. 아이디어톤
마침 1월 달에 고려대 X 서울대 멋사 연합 해커톤이 있었다. 아이디에이션을 하면서, 나는 앞선 문제를 해결할 수 있는 서비스를 제안했다.
아이디어톤에서의 경험이 인상적이다. 3시간 남짓하는 짧은 시간 동안, 처음 보는 사람들과의 만남, 바로 아이디어 브레인스토밍, 이후 선정과 발표 준비.
팀원들과의 대화를 통해 처음의 나의 러프한 아이디어는 어느새 '어드벤트 캘린더'라는 콘셉트를 달았고, 친구들과의 상호작용이라는 요소들이 더해졌다.
4. 해커톤
이번 해커톤은, 다시는 잊지 못할 것 같다. 처음부터 끝까지 정말 스펙터클했는데 결국 해냈다.
1) REST API 방식을 사용해본 백엔드 개발 포지션이 없었다
Django를 이용해 풀 스택 방식으로만 사용해본 한분이 있었을 뿐. 정말 기적처럼 첫날은 내내 기존의 장고 방식에 REST API로 통신할 수 있는 방식을 연구하고, 둘째 날에는 완벽하게 구현해 냈다. 하루 만에 백엔드 개발자 되기.. 정말 리스 팩 한다. 우리 팀의 백엔드 구원자...
2) 프론트 버전 에러로 시간이 생명인 해커톤 당일에 약 6시간을 그냥 날렸다
사람은 발전이 있어야 한다고, next.js 프레임 워크를 회사에서 조금씩 적용하며 써보기 시작했기에 아예 next.js로 해커톤을 해보려고 했었다. 문제는, 모든 페이지에 공통된 레이아웃( 핸드폰 비율 )을 적용하려 했는데 next.js에서 그 방식이 기존 react와 달라서였는지, 계속 에러가 뜨는 것이었다. 여기까지가 3시간..
멘탈이 나가고, 역시 익숙하던 걸 해야 된다며 다시 리액트를 깔아해 봤으나 갑자기 처음 본 버전 문제가 나타나 node 버전부터 다시 점검하던 차. 시간이 생명인 해커톤에서 멘탈은 계속 나가고 마음은 급하고. 다행히 그동안 다른 분들이 간단한 페이지들을 기존 코드에서 조금 구현해 두어서 시간이 맞았던 것 같다.
결국 밥 먹고 에너지를 되찾은 뒤, next.js 레이아웃을 무시하고 그냥 진행했다. 후에 알게 되었는데 그 레이아웃 에러는, 아예 global.css에서 직접 > div로 잡아서 max-with를 설정하니 드디어 적용되었다. 컴포넌트 상으로는 잡히지 않는, 렌더링 된 div가 어디 생겨났나 보다.
첫날
첫날밤에 집에 가자마자 거의 5시까지 계속 메인 페이지 작업을 했다. 이대로면 정말 다음날 발표할 때 보여줄 수 있는 게 없을 것 같다는 생각에 정말 미친 듯이 코드를 짰던 것 같다. 최대한 빠르게.
둘째 날
둘째 날, 우리 팀은 심각한 상황에 아침 8시까지 근처 스타벅스에서 모여 코드를 짰다. 이때부터 갑자기 분위기가 달라졌던 점은, 한번 큰 이슈들이 해결되고, 이제 어떻게 작업할지가 보이니까 정말 빠르고 효율적으로 역할분담과 코드를 마무리를 지을 수 있었다. 마치 우리 팀의 완성 곡선을 보면 한동안 정체되어있다가 기울기가 매우 가파르게 상승하는 곡선과 같달까.
발표
발표시간 전에는 여유가 넘쳤다. 갑자기 모든 게 끝나버려서 이제는 욕심이 생기기 시작했다. 아예 배포를 해버려서 발표할 때 배포된 링크를 통해 진짜 테스트도 하면서 발표를 하면 정말 1등 하지 않을까?
문제는, 배포를 하려면 eslint 에러를 해결했었어야 했다. 결국 발표시간 근처에 급하게 eslint 에러를 해결하면서 어떻게든 배포를 해보려고 했으나 잘 안되자 commit을 여러 번 왔다 갔다 하며 조금 급하게 발표 시간이 되었던 것 같다.
처음 발표 당시, 앞부분 인트로를 발표한 언니의 설명으로 사람들이 기대하는 반응을 보일 때, 완벽하게 첫 기능부터 에러 메시지를 띄우며 실패했다.
결국 에러를 고치고 다시 발표를 했고, 우리의 모든 기능들이 여유롭게 발표되지 못한 것 같아 너무 아쉬웠다. 그럼에도 듣기로는 우리 팀이 3등이라 하길래 기분은 좋았다
5. 리팩토링
해커톤이 끝나고 조금 쉬고 나니 다시 욕심이 생겼다.
아예 근본부터 갈았다. 레포지토리를 아예 새로 파고, 처음부터 만들었다. 이번에는 배포에 욕심이 있었기에 완전히 첫 페이지부터 배 포상 에러가 뜨지는 않는지를 계속 체크하면서 기존 페이지들을 붙여 넣었다.
배포는 Vercel을 이용했다. 생각보다 매우 간단하고, 예상 못한 변수는 pro무료 이용이 14일 정도라는 것이다.
리팩토링을 하면서 앞서 말한 전체 레이아웃에 핸드폰 비율을 적용시켰다. 동시에 반응형 (사실상 media 사이즈를 나눈 반응형은 아니지만, 그래도 모든 화면 비율에서 깨지지 않는 UI를 고려)으로 제작했다.
6. 다시 해커톤
리팩토링도 하고 배포도 하고 다시 팀원들에게 링크를 보냈다. 해커톤이 끝나고 진짜로 다듬어서 친구들에게 공유하고 나름 홍보도 해보자라고 다들 말했기에, 이제 우리만의 해커톤을 다시 시작했다.
1/27일에 줌으로 한 번에 여러 에러들과 피드백들을 받아 당시 해커톤 때 시간이 없어 부족했던 부분들을 전부 수정했다.
이후 계속 거의 매일 새벽마다 자잘한 에러들을 고치고, 디자인을 조정했다.
전체적으로 올리기 전에, 주변 지인들에게 우선 피드백을 받았다.
핵심적인 문제는 , 그래서 여기서 무엇을 하라는 건지 모르겠다는 것이었다.
1) 대부분 어드벤트 캘린더 자체의 이해도가 부족하다.
-> 랜딩 페이지에서 어드벤트 캘린더에 대한 소개를 넣었다.
2) 푸터의 버튼들로 무엇을 하라는 것인지를 알기 어려웠다.
-> 랜딩 페이지에서 푸터를 설명해주는 부분을 넣었다.
그리고 기타 등등 기억나는 수정들..
1) heroku db에서 날짜를 받아올 때 UTC 시간으로 받아와 져서 편지 날짜가 하나씩 밀렸다.
2) 로딩 gif를 추가했다. 특히 오래 걸린 페이지들만 추가했다 (메인 정보 불러오기, 로그인, 회원가입)
3) 처음 친구의 공유된 페이지를 받았을 때, 응원이 어떤 의미고 어떤 식으로 보내면 되는지를 설명하는 모달을 추가했다.
4) 여러 가지 에러 상황에서 전부 에러 모달을 만들어 어떤 에러인지 보여줬다.
5) 랜딩페이지에서 케이스별로 게임과 같이 튜토리얼을 따라가도록 했다.
7. 홍보
2/1일 12시가 되는 순간 드디어 홍보했다. 정말, 모두 수고했다!
안녕하세요☺️ 저희가 사이드 프로젝트로 만든 목표 달성 서비스
<해빗, 해빗(Habit, have it)>을 소개합니다!
여러분은 만족할만한 1월을 보내셨나요? 언제나 작심삼일에 그치고 마는 우리의 결심들. 혼자만의 결심은 잘 지켜지지 않죠. 그 결심을 친구들과 공유해, 알찬 한 달을 보내봐요:)
인스타그램을 통해 친구들에게 내 링크를 공유해봐요 �
8. 여담
1 ) 문 30개 전부 손수 만든 거다. 심지어 열린 버전을 커스텀해서 만든 거다. 이거 만들어준 팀원.. 정말 수고했다.
2 ) 홍보 후 사실 순탄한 엔딩은 아니었다. 갑자기 나지 않던 에러가 나고, 날짜가 이상하게 들어오고.. 알고 보니 앞서 언급한 UTC 시간 때문이었다. 당시 2/1일 새벽은 UTC 시간 기준 1/31일 오후. 홍보하고 나서도 새벽 3시까지 에러 때문에 난리 났다. 더 심각한 사실은, 이미 홍보를 한 이후였기 때문에 디비를 날릴 수도 없었다는 점. 앞으로는 정말 올리기 직전까지 QA를 정말 신중하게 해 봐야겠다. 또, 이런 이슈가 만일 실제 창업 서비스에서 발생했다면 어땠을지 생각해보니, 이슈에 대한 대응도 런칭 이후에 충분히 생각해보고 모든 경우에 대한 대비가 확실하다면 런칭하는 것이 중요하겠다는 생각이 들었다.
