Cherry Pick 프로젝트
두번째 협업 프로젝트, 팀 단위로 백엔드 개발자와 협업하여 책과 문화 콘텐츠 정보 공유 서비스인 ‘Cherry Pick’ 웹 개발
다른 브랜치에서 원하는 커밋만을 골라 가져오는 명령어인 Cherry Pick처럼, 책과 관련된 정보를 제공함으로써 사용자가 책을 중심으로 원하는 정보를 얻고, 경험과 지식을 확장해 나가는 것을 목표로 개발. (사용자들이 책과 연관된 여러가지 문화 컨텐츠를 추천하고 공유하는 웹서비스)
개발 기간
22년 11월 8일 ~ 22년 12월 6일 (29일)
개발 인원
- Front-end : 4인
- Back-end : 3인
구현 항목
- 회원가입 및 로그인, 로그아웃
- 회원정보 수정
- 랜딩 페이지
- 메인 페이지
- 마이 페이지
- 책 정보, 관련 콘텐츠 추천
- 페어링 : 책과 어울리는 여러가지 문화 컨텐츠를 추천하고 공유 (영화/음식/장소/음악/책)
- 컬렉션 : 원하는 책들을 골라 나만의 책장을 만드는 서비스
- 코멘트
- 검색
- 반응형 : 모든 페이지 모바일 사이즈까지 대응
내가 구현한 부분
- 랜딩 페이지 (서비스를 소개하고 사용자의 관심을 끌어들이기 위해 react-page-slides 라이브러리를 사용한 랜딩 페이지 제작)
- 마이 페이지 (사용자의 작성 게시글로 이동 및 삭제 관리, 하트 수 조회, 책의 온기(활동 점수) 조회, 모바일 유저를 고려하고, 서버의 부하를 막기 위해 마이페이지 데이터 호출 방식으로 Infinite Scroll 라이브러리를 사용한 무한 스크롤 방식 적용)
- 반응형 대응 (제작한 랜딩 페이지와 마이 페이지를 모바일 및 데스크탑 환경에서 사용 가능)
기술 스택
FRONT
JavaScript React React Router Styled Components Redux Toolkit Prettier ESLint Axios Material-UI (MUI) Webpack
BACK
Sprint Spring Boot Spring Data JPA Spring Security Java Hibernate Apache Tomcat Gradle MYSQL Docker QueryDSL JWT
DEPLOYMENT
Github Action Gabia AWS AWS ALB AWS ACM AWS Route 53 AWS Cloud Front AWS EC2 AWS RDS AWS S3 AWS S3 Bucket
COMMON
Discord Github Notion Figma
프로젝트를 하면서
메인 프로젝트의 에피소드를 STAR 기법에 기반하여 정리해보았다.
당시의 상황 (S)
당시 상황부터 떠올려 보자면, 프리 프로젝트에도 매일 밤을 새면서 마무리 했는데 바로 이어서 메인 프로젝트를 진행 하려니 체력적으로 너무 힘들었던 기억이 있다. 새로 만난 메인 프로젝트의 팀원들이 다 잘하는 분들이어서, 내가 이 팀에 어떤 기여를 할 수 있을까 걱정이 앞섰던 기억이 있다.
목표 (T)
그래서 어떻게든 이 프로젝트를 잘 완성하고, 완주하자는 것이 첫번째 목표였다. 빡빡한 스케쥴 탓인지, 프로젝트 도중 하차한 사람들도 꽤 있다고 들었다. 아무리 힘들어도 중간에 하차하지 않고, 쉽게 주어지지 않을 이 기회에 최대한 많은 것을 배워가고 싶었다.
목표를 달성하기 위해 노력한 것 (A)
팀원들이 담당하고 싶은 페이지를 모두 고른 뒤 남은 페이지를 골랐는데 그게 마이페이지 부분이었다. 의욕 넘치는 팀원들과 멋진 사이트를 완성하기 위해 시작 첫 주에 전체적인 레이아웃을 완성 했더니 팀원들이 왜 이렇게 빨리 만들어냈냐며 놀랐었다. 기본적인 것들은 얼른 작업하고, 내가 더 추가할 수 있는 기술 스택이 있다면 구현해 보고 싶었다.
그래서 다른 사이트들을 많이 찾아 보면서, 어떤 레이아웃이 깔끔하고 Cherry Pick 사이트에 어울릴 지 고민하는 시간도 가졌었다. 그러다 일반적인 스크롤이 아닌, 무한 스크롤 라이브러리를 적용해 보고 싶었고, 백엔드 팀원과 오랜 연락 끝에 두 가지 방법으로 적용하는 데 성공했다.
노력의 결과 (R)
우선 피그마에 전체적인 마이페이지의 그림을 그렸고, 피그마에 그린 대로 1차적인 기능들을 구현해냈다. 그리고 못할 줄 알았던 무한 스크롤을 적용 시켰다. 처음엔 무한 스크롤을 적용 시키는 게 까다롭고 어려웠어서 고민이 컸다. 멘토님과 다른 팀원들도 무한 스크롤을 적용 시키지 말고, 그냥 전체 데이터를 불러온 뒤 프론트에서 쪼개는 것이 낫지 않냐고 말씀 하셨을 정도로 큰 어려움을 겪고 있었다. 그래도 이 라이브러리를 파기 시작한 이상 꼭 적용해 보고 싶었고, 백엔드 팀원 분도 구현을 위해 API를 만들고 함께 노력했는데 꼭 완성해보고 싶었다. 그리고 오랜 시간 끝에 결과적으로 두 가지 방법으로 구현에 성공했다.
첫번째 방법은 페이지를 1씩 증가 시키면서 다음 페이지를 호출하는 방식과, 두번째 방법으로는 불러온 게시글의 맨 끝 아이디를 기준으로 호출해서 다음 5개 게시글을 또 불러오는 방식으로 구현할 수 있었다.
그리고 내 작업 페이지를 마무리 한 뒤 다른 방식으로도 팀에 도움이 되고 싶어서 다양한 시도를 해 보았다. 로딩용 GIF를 직접 그려오기도 했는데 팀원들이 그림이 움직이는 것도 귀엽지만 좀 더 깔끔한 UI를 선호해서 로딩 GIF를 만드는 사이트에서 직접 만들어 온다거나(현재 사이트의 모든 로딩 화면에 잘 적용되었다), 프로젝트 사이트의 마스코트 캐릭터를 커미션을 통해 만들어오기도 했다. (캐릭터는 가입 환영으로 발송되는 이메일에 적용 시킬 수 있었다.)
랜딩 페이지는 코드만으로 작성 했다가, 디자인적으로 마음에 들지 않아서 데모데이를 하루 앞둔 시점에 아예 이미지로 작업해서 새로운 페이지 라이브러리를 찾아 적용했다. 그렇게 하는 것이 이미지도 반응형으로 잘 줄어들 수 있고, 디자인적으로도 내가 원하는 방향으로 작업할 수 있기 때문이었다. 이렇게 모바일, 태블릿, PC버전 3가지를 만들어 랜딩 페이지 작업을 완료할 수 있었다.
프로젝트 과정
아이디어 기획
플러스 세션으로 여러 아이디어를 도출하고, 마이너스 세션을 통해 선택과 집중으로 기획 단계에서 만들어 갈 초기 아이디어를 얻었다.
플러스 세션에서 다양한 의견이 나왔는데, 컨텐츠로 다른 사람의 인생 책, 추천 책을 랜덤으로 추천해 주는 서비스, 책에 대한 정보를 정리한 서비스, 당근 마켓처럼 장터에 책을 교환하거나 판매할 수 있는 플랫폼, 익명으로 친구들에게 책이나 영화를 추천하는 서비스 등등 여러 아이디어가 공유되었다. 이 중 책에 대한 정보를 정리하고 책과 같이 보기 좋은 컨텐츠를 추천해주는 서비스를 만들어보기로 했고 이 모습이 초기 기획에서 Cherry Pick에 가장 가까운 모습이었다.
<팀원 분의 아이디어 정리도>
사용자 요구사항 정의서 작성
그 다음 요구사항 정의서 구글 시트를 만들어 서비스에 필요한 부분에 대해 이야기를 나눠 보았다. Priority로 우선 순위를 정하고 분류하다 보니 꼭 필요하지 않은 기능들은 제거하면서 필요한 기능들에 대해서만 개발을 집중할 수 있었다.
API 명세서 작성
그리고 개발자간의 의사소통을 원활하게 진행하기 위해 API 명세서를 작성했다. 명세서를 작성하여, API의 요구사항과 제공하는 기능, 반환 값 등을 설명해 개발자들이 서로 이해하기 쉽도록 작성했다. 오류가 있는 부분은 오류 코드를 기록해 발생한 이슈를 함께 빠르게 수정할 수 있도록 하였다.
본격적인 개발
매일 팀원들과 아침에 디스코드로 작업한 것, 그리고 오늘 작업할 것을 3줄로 공유하면서 서로 응원해가며 진행했다. 전체 회의와 아이디어를 수시로 공유하며 좋은 프로젝트를 만들기 위해 더 자주 대화했다.
개발 환경을 세팅하고 다양한 사이트를 보면서 프로젝트에 어울리는 레이아웃을 고민하고, MUI로 전체적인 레이아웃을 만들었다.
일정 관리도 중요했는데, 순수 개발에 집중할 수 있는 시간은 2주 남짓으로 마지막 주는 발표 준비와 디버깅에 힘쓰기로 했다. 각 피쳐별 내 소요 시간을 정하고, 거기에 맞춰서 개발하기로 했다.
담당한 페이지인 마이 페이지는 사용자의 게시글을 관리할 수 있는 페이지로, 사용자 입장에서 눈에 익숙한 UI를 추구하되 Cherry Pick의 포인트 컬러와 편의성을 살리기 위해 노력했다. 마이 페이지에서는 무한 스크롤 라이브러리로 사용자가 어떤 장치를 사용하든 진정으로 반응하는 사용자 경험을 즐길 수 있도록 적용했다.
가이드 버튼도 추가했다. ‘나의 픽이란?’ 버튼 옆의 ‘?’ 로 표시되어있는 가이드 버튼을 누르면 나의 픽이 어떤 기능인지 쉽게 확인할 수 있도록 만들었다. 그래서 서비스를 처음 사용해, 잘 모르거나 익숙하지 않은 사용자가 보다 쉽게 다가갈 수 있도록 구성했다.
이외에도 클릭 시 해당 게시글로 이동 기능, 게시글 개수를 배지로 표시, 각 카테고리 별로 삭제 기능, 평점과 하트 수 조회, 북마크 취소, 전체 삭제, 선택 삭제 등 전반적인 게시글 관리 기능이 포함되게 만들었다.
그리고 닉네임 아래에 책의 온기(활동 점수)를 그래프로 표시하였다. 이 점수는 서비스 이용에 따른 활동 점수가 부여되는 장치로, 당근마켓의 매너온도와 같은 역할을 한다. 커뮤니티 활동을 통해 책의 온기 점수를 올리면서 즐거운 사용자 경험이 될 수 있도록 구상하였다.
제작한 페이지 모두 반응형으로 모바일 사이즈까지 대응해 원하는 디바이스에서 편하게 사용할 수 있도록 제작했다.
프로젝트 마무리
마지막 주에는 발표를 위한 PPT와 발표 스크립트 작성, 에러 해결에 많은 시간을 투자했다. 발표 준비가 끝난 뒤 서비스의 디버깅 작업을 마무리했다. 테스트를 통해 발견한 버그들을 수정하고, 서비스의 안정성을 확인했다.
아쉬운 점
시간 부족 등 미처 진행하지 못한 항목들이지만, 다른 프로젝트에서 꼭 적용해 보고자 한다.
— 다국어 지원
— 다크 모드
— 로그인 서비스 개발
— 랜딩 페이지 코딩으로 디자인, 다양한 인터랙션 추가
— 라이브러리도 기술 부채라는 멘토님의 조언.
라이브러리 사용은 리액트같은 프레임워크랑 호환이 안맞아지는 시점이 오기 때문에, 유지 보수 안해서 못 쓰는 라이브러리는 바꿔줘야 한다. 자주 쓰는 건 함수로 만들어서 반환하게 한다던가 모듈화 해서 만들기.
— 스켈레톤 UI 적용
두번째 프로젝트를 마치며
이렇게 끝날 것 같지 않았던 두번째 프로젝트가 끝났다.
이전의 기록과 기억을 더듬어가며 회고록을 작성했는데, 프로젝트 당시 해결한 에러들을 다 적기엔 너무 길어질 것 같아 미처 올리지 못했다. 이후 동일한 에러를 만났을 때 다양한 방법으로 해결해 보고, TIL 형태로 본격적인 해결 과정을 하나씩 올려보고자 한다.
메인 프로젝트를 진행하면서 여러 가지로 성장할 수 있어서 굉장히 좋았다. 프로젝트를 시작하기 전에는 프리 프로젝트의 클론 코딩보다 규모가 큰 서비스를 기획 단계부터 만들어야 해서, 기술적으로 어려움이 있을 것이라 생각했지만, 팀원들과 함께 협업하면서 문제를 해결해나가는 과정에서 많이 배웠다. 또한, 다른 팀원들의 코드를 보면서 새로운 지식과 기술적인 향상을 경험할 수 있었다.
그리고 프로젝트를 진행하면서 팀 내 협업 방식과 역할 분담이 중요하다는 것을 깨달았다. 서로의 의견을 존중하고 커뮤니케이션을 잘하면서 팀 프로젝트를 성공적으로 마무리할 수 있었다.
프론트엔드 개발자로서 한 걸음 더 나아갔다고 느낄 정도로 뿌듯한 경험이었다. 앞으로 겪게 될 더 많은 프로젝트에서 메인 프로젝트 때의 나처럼 계속해서 깨지고 부숴질 예정이지만, 더 단단해질 것이고, 더욱 유연한 사고를 하게 될 수 있을 것이라 믿는다 :)
