개발 기간 : 2021년 8월 11일 ~ 8월 26일
Front-End : React Hooks, Styled-Component, Recoil, React-query, Axios
Back-End : Python, Django, MySQL, Bcrypt, pyJWT, Docker, s3
Common : AWS(EC2,RDS), RESTful API
약 3주간 '느린 우체통'을 모티브로 한 편지 모음 발송 서비스를 PM을 담당하며 자체 기획 및 제작했습니다. 과거의 내가 보낸 사진과 문구를 지정한 날짜에 현재의 내가 받아 회고 및 추억을 할 수 있습니다.
서비스 사용을 예를 들자면, 프로젝트 진행시 2주동안 생성한 우체통에 추억할만한 코드나 사진들을 보내고 프로젝트가 끝나면 지정한 이메일로 취합하여 보내주는 플로우입니다. 현재 제작한 사이트의 상품성이 있다 판단하여 리디자인 및 크로스 브라우징을 완성도를 올릴 계획입니다. 현재 무료 도메인으로 배포는 완료하였습니다.
-
Ideation
3차 프로젝트를 위해 팀원들과 다양한 아이디어를 도출 하였고 그중 가장 서비스의 가치가 있다고 판단된 '느린 우체통'을 모티프로한 'Letter-Log'를 선정하였습니다. 처음으로 기획부터 시작한 프로젝트라 기획부터 탄탄히 하고자 하였습니다. 아이디어를 고른 후 구체적인 기능을 위해 사용자를 고려한 Ui를 구상 하였으며, 지속적신 사용자 시뮬레이션을 통해 접근성을 높였습니다.
-
메인페이지
-
카러셀, 무한스크롤, 필터링
기존 1,2차 프로젝트를 진행하며 라이브러리 없이 제작해보며 원리를 이해했다면, 3차 프로젝트에서는 라이브러리를 적극적으로 활용했습니다. react-intersection-observer의 useInView를 사용자가 바라보는 마지막 inView를 State로 의존성배열에 넣어 무한스크롤을 구현하였고, react-slick을 활용하여 카러셀을 제작했습니다.
-
우체통 생성
편지를 보낼 우체통을 생성하는 기능입니다. 이름, 날짜, 받을 이메일, 공개 및 비공개 여부에 따른 비밀번호 유무 등의 조건을 충족하면 생성하기 버튼이 활성화 됩니다.
-
편지 보내기
우체통에 편지를 보내고자 할때 공개/비공개 여부에 따라 비밀번호 모달을 띄우기 비공개인 경우에는 비밀번호를 백앤드에 보내고 토큰을 받아 접근할 수 있도록 제작했습니다. 편지 보내기를 완료하면 토큰이 삭제됩니다.
-
-
검색페이지
사용자들이 생성한 우체통을 검색하여 찾을 수 있도록 검색 페이지를 제작했습니다.
-
컬렉션페이지 (취합한 사진을 보내주는 페이지)
우체통 생성시 정한 기간이 되면 우체통을 마감하고 처음에 작성한 이메일로 취합된 페이지 링크를 보여줍니다. 공개, 비공개 여부에 따라 비밀번호 모달을 띄우고 들어가게 되면 그 동안 전송한 편지들이 핀터레스트 그리드로 보이게 됩니다.
-
이번 3차 프로젝트에서 가장 중점을 두었던 부분은 물론 다양한 스택을 사용해보는 목표도 있었지만, 코드의 분리, 효율적인 코드, 즉 테스트친화적인 코드를 작성해보는 것을 노력한 프로젝트였습니다.
아래 왼쪽에 있는 코드가 제가 처음 작성했던 것이고 오른쪽에 있는 코드가 중점 사항을 적용한 코드입니다. 단순히 if문을 반복하며 불필요한 경우를 굳이 거치는 것이 아닌, inPut의 Value를 filterType이라는 변수로 선언하여 바로 filterTypeToEng 객체에서 맞는 값으로 바꾸는 형태입니다.
프로젝트를 마치고 보니 새로 사용해본 전역상태관리 및 다양한 라이브러리가 아닌 이 코드가 가장 먼저 떠올랐습니다. 주어진대로 스타일대로 코드를 쓰는 것이 아닌 보다 개선된 방향을 고민하며 작성하기 시작한 코드라 의미가 있어 기억에 남는 것 같습니다.
-
3차 프로젝트는 실제 서비스를 배포하는 것을 목표로 하였기 때문에 처음에 코드 부터 짜는 것이 기획부터 세우기 시작하였습니다. 아무래도 기존 전공에서의 경험을 살려 팀원들과 다양한 아이디어를 도출하였고 그 중에 가장 이상적이며 현식적으로 서비스 배포까지 할 수 있는 아이템을 선정하였습니다.
기존에 진행했던 방식과는 다른 user flow를 고려한 프로젝트다 보니 단순히 코드부터 짜는 것이 아닌 기술 스택 선정과 코드의 구조에 대해 신경쓸 부분이 많아 어려움을 느꼈습니다. 하지만 처음이라 어색했던 것이지 팀원들과 협동하여 적응하였고 프로젝트를 원할히 마칠 수 있었습니다.
멘토님들께서 피어리뷰를 통해 코드의 재사용성을 고려하여 첨언 해주신 부분을 참고하여 리팩토링을 하며 한단계 성장하는 계기가 되었습니다. 또한 협업을 고려한 폴더의 구조 및 코드의 위치에 대해 생각해보는 시간이였습니다.
처음 사용해보는 전역관리가 어색하여 많은 오류를 많들었었고, 지금까지 사용했던 컴포넌트 재사용은 저 혼자만의 재사용이였다는 것을 깨달았습니다. 또한 팀원과의 원할한 소통에 대한 감사함도 배우게 되었습니다. 앞으로 코딩을 함에 있어서 이번 프로젝트의 교훈을 적용시킬 수 있도록 계속해서 노력하겠습니다.
이 프로젝트는 직접 기획 및 디자인하여 만들었습니다. 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.