두 번째 팀 프로젝트 회고

 

시간이 참 빠르다. 벌써 두 번째 팀 프로젝트가 마무리 된게 1월 첫 째주였는데, 지금은 세 번째 팀 프로젝트 진행 중이고 벌써 1월이 다 끝나간다. 두 번째 프로젝트는 2주였던 첫 프로젝트에 비해 기간이 조금 더 긴 3주 정도의 프로젝트였고, 기존 기획안을 그대로 구현하기 보다 우리 팀 나름의 스타일과 유저 프렌들리한 접근 방식으로 변형했던 부분이 많아 생각보다 빠듯하게 완성시킨 프로젝트였다. 그만큼 애정도 높게 개발했고 만족도 높게 진행했던 것 같다.

 

🤓 어떤 서비스?

원래 주어진 기획안은 Taskify 라는 이름의 서비스였다. 트렐로나 노션의 칸반보드 같은 기능 중심의 할 일 관리 서비스이다. 대시보드를 만들어서 대시보드 구성원을 초대해 관리하고, 대시보드 내에서 할 일을 카드로 만들어 TO DO, IN PROGRESS, DONE과 같은 칼럼 내에 카드를 위치시켜 한 눈에 관리할 수 있다. 각 할 일 카드 내부에는 담당자 선정, 진행 상태 관리, 기한, 내용, 이미지 첨부 등으로 할 일 세부 내역을 관리하고 만든 카드 내에선 구성원들과 댓글로 소통할 수 있는 기능을 제공한다.

• 일정 : 2023. 12. 18. 월 ~ 2024. 1. 04. 목 (3주)
• 서비스 기획안 및 디자인 시안 Figma로 제공 (but 팀 자체적으로 일부 기획 및 디자인 변경)
• Swagger 기반 API 제공
• 팀 구성: FE 5인

 

👉 위드 플랜 서비스 바로가기

👉 위드 플랜 프로젝트 레포지토리 바로가기

 

🛠️ 주요 기술 스택

 

💫 주요 기능

• 페이지네이션 및 무한 스크롤 기능
• 반응형 디자인
• 회원가입 / 로그인 : 데이터 중복 검토 및 데이터 양식 검토 로직
• 나의 대시보드 : 초대 받은 대시보드 및 나의 대시보드 데이터 연동, 새로운 대시보드 생성 기능
• 대시보드 : 컬럼 추가/수정/삭제 기능, 컬럼에 할 일 카드 추가/수정/삭제 기능, 컬럼 관리 기능, 내가 생성한 대시보드 왕관 아이콘 적용 기능
• 대시보드 수정 : 대시보드 이름 및 색상 수정 기능, 구성원 리스트 확인 및 삭제 관리, 초대 내역 확인 및 삭제 관리 기능
• 모달 : 컬럼 추가/수정/삭제 모달, 구성원 초대하기 모달(메일 유효성 검토 로직) 기능
• 케밥 : 케밥 클릭시 모달 노출 및 외부 클릭시 모달 클로즈 기능
• 토스트 : 데이터 수정 반영 성공시 토스트 알림 기능
• 헤더 : 프로필 영역 데이터 및 클릭시 모달 - 홈/프로필 관리/로그아웃 기능, 대시보드 멤버 아이콘 및 전체 멤버 확인 리스트 모달, 관리 버튼(대시보드 수정 이동)
• 사이드 메뉴 : 대시보드 리스트 스크롤 기능 적용, 현재 위치 대시보드 표시 기능, 모바일 사이즈 리스트 드롭다운으로 세부 리스트 확인 및 외부 클릭시 클로즈 기능
• 할 일 카드(태스크) 생성 모달 : 담당자 드롭다운, 마감일 및 시간 선정, 태그 적용, 이미지 첨부 기능, 생성시 해당 컬럼에 카드 생성, 댓글 기능
• 댓글 : 댓글 생성, 등록한 댓글 수정 및 삭제 기능, 댓글 무한 스크롤 로딩
• 할 일 카드(태스크) 수정 모달 : 기존 데이터 보여주기, 컬럼 상태 값 및 기존 입력 내용 수정 및 반영 기능
• 404 페이지 : 각 접근 로직에 따른 404 페이지 노출
• 계정 관리 : 기존 프로필 정보 연동, 프로필 이미지 수정/삭제, 닉네임 수정 기능, 비밀번호 변경 기능

 

🖥️ 주요 화면 캡쳐

[나의 대시보드] 

[대시보드]

[할 일 생성 및 수정]

[대시보드 관리]

[계정 정보 관리]

 

🤔 개발시 고민사항과 문제들 및 해결 방법

 

1. 컴포넌트 공용화의 함정

사실 이 부분은 해결한 문제라기 보단, 나름의 효율성을 위해 택한 잘못된 전략으로 인해 얻은 교훈에 가깝다. 최대한 공용화된 컴포넌트를 만들어서 하나의 컴포넌트를 다용도로 쓸 수 있게 하자는 취지로 시작된 컴포넌트 공용화. 이로 인해 공용화의 지옥(?)을 경험했다.

무조건적으로 공용화한다고 효율적인 것이 아니라 정말 공통 컴포넌트로 필요한 목적성이 뚜렷한 아이템만 공용화를 했어야 했다. 하나의 버튼 컴포넌트로 대여섯 가지의 케이스를 포용하려니 오히려 간단한 컴포넌트가 복잡하게 쓰이기도 했다.

또한, 너무 다양한 목적을 포용하고자 공용화된 컴포넌트들로 인해 props-drilling을 몸소 경험하게 되었던 것 같다. 그래도 직접 이렇게 사용하며 복잡함과 어려움을 겪어 봐서 그만큼 공용화에 대한 판단의 중요성을 잘 깨닫게 된 것 같다. 아주 값진 교훈이었음.

 

2. 전역 상태관리 Jotai

불필요한 API 호출을 줄이고 클라이언트에서 상태관리를 통해 변경된 상태를 반영해 보여주는 방안이 필요했다. 이를 위해 전역 상태 관리 라이브러리를 쓰기로 했고, 처음에 리액트 문법에 친화적이고 유명한 Recoil을 생각했으나 페이스북에서 더이상 리코일에 대한 투자를 하지 않고 해당 팀도 해고되었다는 소식...을 듣게 되면서 대체제를 고민했다.

고민 중에 Recoil처럼 상태 단위 개념인 atom 기반으로 전역 상태관리를 할 수 있는 Jotai를 찾아보게 되었고 작동되는 패턴이 비슷하여 이를 채택하여 사용하게 되었다. 사실 처음 쓰다보니 서버 상태 관리와 클라이언트 상태 관리 목적을 혼용하여 쓰게 되었던 것 같은데, 확실히 atom 개념을 활용해 간편하게 전역 상태관리를 할 수 있다는 점이 이점인 것 같다. 사용 방법도 useState와 비슷하여 비교적 빠른 시간 내에 학습하여 적용해볼 수 있었다.

 

3. 사용자를 고려한 UX 설계

사실 기존에 주어진 기획안의 유징 플로우를 파악해보았을때, 납득이 가지 않는 부분들이나 뭔가 부자연스러운 부분들이 꽤 있었다. 실제 유저의 일반적인 유징 패턴과 다른 부분들도 발견되었고. 그래서 기획자와 디자이너 없이 프론트엔드 5인으로만 구성된 프로젝트이지만 기획안 상당 부분을 수정하기로 했다.

예를 들어, 모바일 환경에서 대시보드 리스트들이 리스트 이름 없이 색으로 표기된 원형 아이콘으로만 노출되다 보니 유저 입장에선 어떤 대시보드인지 전혀 알 수 없다. 그래서 우리는 해당 리스트를 명칭과 함께 볼 수 있는 모달을 추가해 여닫으며 리스트를 편하게 확인할 수 있는 기능을 추가했다.

할 일 카드에서는 담당자를 검색할 때 기본적으로 드롭다운을 눌러 모든 담당자를 확인할 수 있는 리스트에서 선택을 하거나 직접 타이핑을 통해 검색하고 해당 되는 결과 값을 선택할 수 있도록 기능을 제공했다.

그 외에도 스크롤바 구현 영역에서는 유저 편의를 위한 네비게이션 버튼을 추가, 색상 선택 옵션란에는 컬러 피커를 적용해 원하는 색상으로 설정할 수 있게 구현, 할 일 카드에 #태그 추가시 삭제도 편하게 x 버튼과 함께 추가 기능 구현, 섬세한 유효성 검사 및 에러 검증 단계 추가로 불필요한 API 콜 축소, 필요 없는 기능은 삭제 혹은 다른 필요 기능으로 대체 등 섬세하게 UX를 파악하고 고도화했다.

 

4. 무한스크롤과 페이지네이션으로 데이터 과부하 피하기

할 일 카드를 보여주는 각 상태 칼럼 영역(TO DO, IN PROGRESS, DONE, ... ) 이라던지, 초대 내역을 보여주는 영역, 대시보드 리스트를 보여주는 영역, 할 일 카드 내부에 댓글 보여주는 영역에서는 많은 데이터를 다뤄야 하기 때문에 무한 스크롤 혹은 페이지네이션으로 과부하를 피할 수 있었다.

 

5. 더욱 사용하고 싶은 서비스 UI

기존 기획과 디자인에 아쉬운 점이 많다보니, 3주라는 한정적인 시간이었지만 기획안도 수정하고 전체적인 디자인 - 서비스명, 서비스 로고, 컬러 시스템, 서비스 내부 레이아웃을 변경했다. 자칫 시간 안에 프로젝트를 완성시키지 못할까 걱정되었지만 오히려 결과적으로 너무 애정을 갖고 만들 수 있었던 서비스이다. 직접 서비스 이름과 로고, 메인 컬러까지 우리가 직접 논의해서 만드니 애정도가 남달랐고, 프로젝트 발표가 끝난 후에도 직접 우리끼리 대시보드 만들어서 리팩토링 논의에 활용하기도 했다.

직접 우리가 UX를 고려해 바꾼 기획과 UI는 실제 전체 프로젝트 발표 후에 좋은 피드백을 받았던 부분이기도 하다. 부트캠프 과정에서 주어진 포트폴리오용 프로젝트를 만드는 것이 아니라, 직접 우리가 사용하고 싶은 서비스, 사용할 수 있는 서비스를 만드는 관점에서 프로젝트를 진행했기 때문에 가능한 점이었던 것 같다.

 

💖 짧은 소회

3주가 진짜 짧은 기간인데 정말 밀도있게 보냈던 것 같다. 무엇보다 만족스러운 결과물(물론 각자 아쉬운 부분이 있겠지만)을 만들게 되어 너무 뿌듯하고, 이렇게 할 수 있었던 점은 팀원들이 모두 열정적이고 책임감 있는데다 적극적으로 소통을 잘해서이지 않을까 싶다. 5명이 각각 성향이나 작업 스타일, 현재 개발 수준도 다른데 서로가 진짜 배려도 많이 하고 다들 책임감이 강해서 정말 프로젝트를 성공적으로 만들고 그 과정에서 많은 학습이 되었던 것 같다. (API 세팅도 굳이 학습 차원에서 5명이 다함께 하느라 진짜 애 많이 먹고 비효율적인 부분도 있었지만... 나는 너무 큰 도움이 되었던!) 넘나 애정하는 우리 SWCF 공주들...👸💫 함께 팀이었어서 너무나 행운이었다 🍀