프로젝트에 대한 추가 정보는 이곳에서 확인하실 수 있습니다.
- 프로젝트명 : TripBuddies (트립버디즈)
- 배포주소 : https://www.tripbuddies.club/
- 서비스의 한줄 소개 : 여행 친구가 필요하신가요? 트립 버디와 함께라면 국내는 물론, 해외 여행지에서도 나에게 꼭 맞는 여행 친구를 구할 수 있습니다!
- 프로젝트 기간 : 2024.07.16 ~ 2024.08.21
- 팀원 : 6명 (FE 개발자 5명 + UI/UX 디자이너 1명)
| 포지션 | 역할 | 이름 | GitHub | Blog |
|---|---|---|---|---|
| UI/UX 디자이너 | 디자이너 | 이정인 | - | - |
| FE 개발자 | 팀장 | 오은 | https://github.com/eunohhh | https://ifelseif.tistory.com/ |
| FE 개발자 | 부팀장 | 김병준 | https://github.com/Captain-Kim | https://infistudy.tistory.com/ |
| FE 개발자 | 팀원 | 김민지 | https://github.com/slsl2 | https://velog.io/@minn__ij/posts |
| FE 개발자 | 팀원 | 곽현정 | https://github.com/hyunjeongkwak | https://velog.io/@hyunjeong/posts |
| FE 개발자 | 팀원 | 최유상 | https://github.com/Kyara0324 | https://blog.naver.com/kyara0324 |
- 프로젝트 주요 기술
- 언어 및 프레임워크
- TypeScript : 정적 타입을 추가하여 코드 품질과 유지보수성 향상
- Next.js : SEO 최적화 등을 위해, 서버 사이드 렌더링을 적극 활용하기 위한 목적의 프레임워크
- 데이터베이스 및 서버
- BE : Supabase (SQL, Storage, Auth, Realtime, Broadcast)
- FE : Vercel
- 상태 관리
- Zustand : 간단하고 직관적인 전역 상태 관리
- TanStack Query : 서버 상태 관리
- 스타일링
- TailwindCSS : 스타일링을 빠르게 도와주며 팀원 간 일관성 있는 스타일링을 보장
- NextUI : 복잡한 UI를 구현하기 위해 사용(달력)
- 개발 도구 및 라이브러리
- yarn : 패키지 매니저
- ESLint : 코드 린팅 도구
- Prettier : 코드 포매터
- Next-PWA : PWA 지원
- 리치 텍스트 에디터
- Slate.js : 리치 텍스트 에디터
- 협업 도구
- Figma : 디자인 협업 도구
- 버전 및 문서 관리
- Git : 버전 관리 도구
- GitHub : 코드 저장소
- Slack : 협업 도구
- 이미지 최적화
- WebP : 이미지 포맷
- 언어 및 프레임워크
- 사용자의 최초 가입 시 모바일과 PC 환경 각각의 환경에 알맞는 튜토리얼을 제공하여 사이트 이용의 편의를 돕습니다.
- 사용자가 선호하는 친구 성향, 선호하는 여정(여행) 방식 등을 온보딩에서 입력 받아, 모집 중인 여정을 검색 시 사용자에게 꼭 맞는 여정을 추천해줍니다.
- 같은 여정에 참여한 멤버끼리는 웹 사이트에서 실시간 채팅이 가능합니다.
- 프로필 기반으로 사용자(버디)들의 소셜 네트워킹을 지원하며, 팔로우 기능을 통해 선호하는 버디의 활동 내역을 북마크 할 수 있습니다.
- 단순 여정 모집 뿐만 아니라 여정 사진을 기반으로 스토리를 올리고, 이를 기반으로 버디즈 지수를 올려 랭킹을 올릴 수 있는 재미요소를 경험할 수 있습니다.
| 메인페이지 | 게시글 리스트 |
|---|---|
|
|
사용자의 자발적인 참여를 유도하는 요소들이 상호작용 되도록 개발하였습니다.
- 메인페이지 배너에서는 현재 사용자가 생성, 참여한 여정 중 하나의 일정을 보여주어사용자가 서비스의 핵심 기능을 잊지 않고 이용할 수 있도록 함과 동시에,지금 모집중인 여정의 리스트를 보여주어 사용자의 참여를 유도하였습니다.
- 같은 내용이어도 여러 방식으로 사이트 곳곳에 기능을 배치하여사용자의 서비스 이용 편의성을 높이고자 하였습니다.
| 마이페이지 | 스토리 | 채팅 목록 | 채팅 | 팔로우 |
|---|---|---|---|---|
|
|
|
|
|
소셜 네트워크 기능을 개발하여 사용자가 만들어 가는 서비스를 구축하고자 하였습니다.
추천 인기 버디즈(랭킹 시스템), 버디 프로필, 버디즈 스토리, 팔로우, 채팅 기능 등 다양한 소셜 네트워크 활동을 지원하여외부 API 의존 없이 사용자가 직접 데이터베이스를 구축해나가는, 지속 가능한 서비스를 구축하였습니다.
| 튜토리얼 | 온보딩 테스트 | 글쓰기 |
|---|---|---|
|
|
|
서비스 곳곳에서 사용자의 이용을 돕는 가이드 구현
- 서비스 첫 이용시, 회원가입 시, 글쓰기 시 등 다양한 곳에서퍼널 패턴을 적용하여 사이트 곳곳에서 사용자 가이드를제공하여 사용자 편의를 높였습니다.
- 이를 구현하면서 반복되는 페이지는 재사용 가능한 커스텀 훅으로 제작하여팀원 간 중복 코드를 작성하지 않도록 최적화하여 사용자 경험을 높였습니다.
2024년 기준, 해외여행객이 247% 증가하는 등 여행에 대한 수요는 지속적으로 증가하고 있습니다. 이에 여행 상품이 급증하고 여행 관련 판매 서비스 또한 증가하고 있지만, 여행 메이트를 구하는 서비스는 OOO어스를 제외하고 많이 알려진 서비스가 없습니다. 또한 OOO어스는 최근에 서비스가 시작되었고, 안전한 매칭을 위한 장치는 부족합니다.
여행 메이트를 구하는 서비스에 대한 니즈 또한 여행 열풍과 함께 증가할 것으로 보이며, 안전한 매칭에 대한 수요는 있으나 공급은 없는 상태로 보입니다.
우리에게 주어진 기간은 기획 1주, 개발 4주입니다. 우리가 가진 기술인 Next.js 프레임워크, 백엔드는 supabase로 구성하여 개발 난이도를 낮추고 CRUD, 다중 옵션 검색, 채팅 등의 소셜 기능 등 MVP를 제외한 Rich-Text-Editor 등의 기능은 과감히 제거하여 기간 내 구현하는 것을 목표로 합니다.
우리의 서비스는 외부 API를 사용하지 않고, 사용자가 직접 글쓰기 또는 소셜 기능 등을 통해 데이터를 생산해내고 활성화 시키도록 구현되어 있습니다. 또한 라이브러리도 유지보수 소요를 발생시킬 수 있어 캘린더와 같은 복잡한 UI를 제외하고 모든 부분은 자바스크립트로 직접 구현하였습니다.
우리의 핵심 기술 스택은 FE 개발자 5명이 모두 보유 중인 스택으로 개발되었으며, 외부 라이브러리와 API를 최소화하거나 사용하지 않았기에 기술적 러닝 커브가 낮습니다.
여행 메이트를 모집하는 데 필요한 필수 기능인 인증/인가 기능과 CRUD를 너머, 안전한 매칭을 보장하기 위해 유저 프로필, 스토리, 팔로우, 실시간 채팅, 안전 지수 등 사용자가 직접 판단하여 안전한 매칭을 할 수 있도록 안전성을 보장할 수 있는 기능을 추가 개발하였습니다.
사용자는 여행 메이트를 구하는 소기의 목적이 달성되면 사이트의 이용을 중단할 수 있는데, 여러 소셜 네트워크 기능을 개발하여 사용자의 자발적인 활성화를 기대할 수 있습니다.
실제 서비스에서는 구현하지 않았지만, 최초 기획 시 소셜 기능과 관련한 비즈니스 모델을 기획하였습니다.
이후에도 필요하다면 서비스의 핵심 기능인 여행 메이트 모집에는 영향을 주지 않으면서 결제를 이끌어 낼 수 있는 '상위 노출', '프로필 꾸미기' 등의 유료 아이템을 판매할 수 있으며 게시글 상세 페이지에서 해당 여행지의 추천 숙박 업소 또는 맛집 등의 정보를 업체와의 파트너십을 통해 지속 가능한 비즈니스 모델을 구축할 수 있습니다.
데이터 베이스는 관계형 데이터베이스를 사용하며, Forein Key를 적극 활용하여 대규모 서비스에서도 데이터를 쉽게 관리할 수 있고 서비스의 확장에도 유연하게 대응할 수 있습니다.
데이터 테이블 명세서는 이곳에서 확인할 수 있습니다.
팀원 2명 이상의 코드 리뷰를 의무화하고, PR 컨벤션 기본 서식을 정하여 팀 컨벤션에서 벗어나지 않는 일관성 있는 코드를 작성할 수 있도록 장치를 마련하였습니다.
개발이 시작된 7월 15일 이후 약 5주 간 총 175건의 PR이 우리 팀의 PR 컨벤션을 준수하여 작성되었습니다.
PR 내역은 이곳에서 확인할 수 있습니다.
supabase와 통신하는 로직을 API 라우트로 구성하여 일부 컴포넌트에서는 데이터를 pre-fetching하여 초기 렌더링 속도를 높였으며, 여러 테이블을 참조해야 하는 경우 클라이언트에서의 연산 비용을 낮추고 서버와 책임을 분산하였습니다. 또한 API 통신은 서비스의 핵심 비즈니스 로직으로, API 라우트를 구성하여 중앙화하여 팀원 간 코드 재사용을 용이하도록 하였습니다.
API 명세서는 이곳에서 확인할 수 있습니다.
| Projects | Discussion |
|---|---|
 |
 |
GitHub에서 제공하는 서비스를 적극 활용하였으며 Projects를 통해 팀원별 개발 티켓 타임라인을 체크하였고, Discussions를 통해 회의록을 정리하고 유틸을 공유하여 프로젝트의 볼륨이 확대되어도 개발에 혼선이 없이 컨벤션을 지키며 개발을 진행할 수 있었습니다.
| GitHub Bot 연동 | 적극적인 소통 |
|---|---|
 |
 |
Slack 메신저를 통해 GitHub Bot을 연결하여 개발 진행 상황을 실시간으로 점검할 수 있도록 하였고, 팀원 간 소통을 활발히 하였습니다.
| 실시간 음성/화상 채팅 |
|---|
 |
가상현실 공간에서 실시간 음성 및 화상 채팅, 화면 공유를 통해 실시간으로 소통하며 짧은 기간 효율적으로 개발을 진행할 수 있었습니다. 특히 일 2회의 회의시간을 정기적으로 가지며 팀원 간 개발 진행 상황을 공유하여 프로젝트의 타임라인에서 지정한 데드라인을 준수할 수 있었습니다.
위 와이어프레임은 모바일 버전이며 PC버전을 포함한 와이어프레임은 이곳에서 확인할 수 있습니다.
위 이미지를 클릭하면 시연영상 유튜브로 이동합니다.
| 메인페이지 |
|---|
 |
- 사용자가 등록한 여정 모집을 잊지 않도록 홈 배너에서 D-day를 알려주고 있어 사이트의 핵심 기능에 접근이 쉽도록 하였습니다.
- 사용자 지수를 기반으로 한 인기 사용자 리스트를 보여주어 소셜 기능을 강화하고 사용자 스스로 이용률을 높이도록 하였습니다.
- 사용자들이 여행에서의 추억을 사진 기반으로 스토리 형태로 업로드하고, 또 메인 페이지에서 리스트를 보여주어 사용자들의 흥미를 유발하고 살아있는 서비스라는 인상을 심어주도록 하였습니다.
- 현재 모집 중인 여행의 리스트의 일부를 메인 페이지에서 보여주어 사용자의 접근이 쉽도록 하였습니다.
| 튜토리얼 | 뒤로가기 | 건너뛰기 |
|---|---|---|
 |
 |
 |
- 사이트에 처음 방문하는 사용자를 위해 사용자 친화적인 튜토리얼을 보여주고 있습니다.
- 튜토리얼을 보고 싶지 않은 사용자를 위해 건너뛰기 기능을 구현하였습니다.
- 사용자 테스트 간 수집한 피드백을 반영하여 이전 스텝의 튜토리얼을 볼 수 있도록 뒤로가기 기능을 구현하였습니다.
| 리스트와 상세페이지 | 게시글 삭제 | 찜하기 | 참여 요청하기 |
|---|---|---|---|
 |
 |
 |
 |
- 사용자의 취향을 반영하기 위해 여행 메이트 모집 글에서는 다양한 옵션을 입력받고 있으며, 이 많은 내용을 깔끔한 카드 UI 형태로 보여주어 사용자 경험을 높였습니다.
- 보다 안전한 사용을 위해 참여를 희망하는 사용자는 파티의 리더에게 참여 요청을 보내고 리더에게는 알림이 뜨도록 하였습니다. 리더는 신청자의 프로필을 확인한 후 수락 여부를 결정할 수 있습니다.
- 여러 파티의 내용을 충분히 검토한 후 참여 여부를 결정하는 신중한 사용자의 편의를 고려하여 나중에 다시 볼 파티에 쉽게 접근할 수 있도록 찜하기 기능을 구현하였습니다.
| 글쓰기 (Funnel Pattern) | AI 이미지 생성 | 유효성 검사 |
|---|---|---|
 |
 |
 |
- 사용자의 취향에 딱 맞는 메이트를 모집할 수 있도록 다양한 옵션을 글쓰기에서 입력하도록 하였습니다.
- 다만 페이지가 많아 피로도가 높아질 수 있어 관심사 별로 컴포넌트를 나누어 인디케이터와 함께 보여주는 Funnel Design 기법을 사용하였고, 사용자는 스텝 별로 보여주는 가이드를 따라가다 보면 자연스럽게 모든 옵션을 입력하게 되도록 구현하여 사용자 경험을 높였습니다.
- 사용자에게 받는 옵션들 중 이미지는 준비되지 않을 수 있다고 판단하여 유효성 검사를 진행하지 않고, 게시글의 품질을 높이기 위해 이미지를 선택하지 않은 경우 Open AI의 API를 사용하여 선택한 지역에 맞는 이미지를 자동 생성합니다.
- 안전한 서비스 이용을 위해 모든 옵션은 필수로 입력하도록 하였고, 모든 필드에서 유효성 검사를 진행하며 통과하지 못할 경우 alert으로 사용자에게 안내합니다.
| 이메일 회원가입/로그인 | 소셜로그인 | 온보딩 테스트 |
|---|---|---|
 |
 |
 |
- Supabase auth를 활용하여 이메일 가입이 가능합니다.
- 안전한 회원가입을 위해 입력 필드에서 유효성 검사를 진행하며 검사에 통과하지 못했을 경우 사용자에게 그 내용을 알려줍니다.
- Supabase의 Provider로 제공되는 카카오 소셜 로그인도 지원하며, 지원하지 않는 Naver 소셜 로그인도 자체 구현하여 회원가입 절차를 최소화하였습니다.
- 회원가입 이후 사용자의 취향을 반영하기 위한 서비스 이용이 가능하도록 온보딩 테스트를 진행합니다. 이 단계는 건너뛸 수 있으며, 건너 뛴 경우
user_1234567과 같이 임의의 닉네임이 부여되며 마이페이지에서는 수정을 권고하는 문구가 출력됩니다.
| 팔로우 | 프로필 수정 | 내가 찜한 여정 / 나의 여정 | 미인가 상태에서의 조건부 렌더링 |
|---|---|---|---|
 |
 |
 |
 |
- 사용자 간 팔로우를 하여 활동 내역을 모니터링 할 수 있도록 소셜 네트워크 기능을 구현하였습니다. 팔로우는 (1) 유저 프로필 (2) 추천 인기 버디즈 (3) 게시글 상세페이지 총 세 개의 flow에서 접근이 가능하도록 설계하여 사용자의 자발적인 활성화를 도모하였습니다.
- '사용자들이 만들어 가는 서비스'라는 모토를 지킬 수 있고, 버디즈 지수로 표현되는 사용자 지수를 통해 메인 페이지의 추천 인기 버디즈에 사용자 프로필을 노출할 수 있습니다.
- 안전한 매칭을 위해 여러 게시글을 충분히 검토 후 마음에 드는 여정에 참여하는 신중한 사용자를 위하여, 마음에 드는 게시글을 찜하기 하고 마이페이지에서 쉽게 찾아볼 수 있도록 구현하였습니다.
- 내가 작성한 게시글과 내가 참여한 게시글을 구분하여 마이페이지에서 제공하여 사용자가 스스로 파티를 잊지 않고 관리할 수 있도록 구현하였습니다.
- 많은 정보를 입력해야 하는 서비스의 특성 상 인증되지 않은 불특정 다수에게 정보가 보여지는 것을 막고, 회원가입을 유도하여 서비스를 활성화시키기 위해 로그인을 하지 않은 상태에서는 회원정보를 볼 수 없고 로그인을 해야만 볼 수 있도록 오버레이 모달을 보여주고 있습니다.
| 키워드 검색 | 다중 옵션 검색 | 다른 게시글 추천 | 페이지네이션 |
|---|---|---|---|
 |
 |
 |
 |
- 우리가 마련한 옵션에서 제공하지 않는 검색 결과를 원하는 사용자를 위해 게시글 내용 중에서 키워드 검색을 할 수 있도록 구현하였습니다.
- 사용자의 취향에 딱 맞는 파티를 매칭해주기 위해 다중 옵션으로 검색이 가능하도록 구현하였습니다.
- 사용자가 선택한 다중 옵션에 해당하는 파티가 없거나 검색 결과가 만족스럽지 못한 경우, 진행 중인 다른 파티도 함께 추천해주어 사용자가 이탈하지 않고 서비스 이용의 흐름을 유지할 수 있도록 구현하였습니다.
- 검색 페이지에서 제공하는 다중 옵션은 선택적이고, 옵션을 적게 선택할 경우 많은 게시글이 노출될 수 있는데 이 경우 렌더링 속도를 빠르게 하기 위해
더보기형태의 페이지네이션을 구현하여 사용자 경험을 높였습니다.
| 실시간 채팅 목록 | 실시시간 채팅 기능 |
|---|---|
 |
 |
- 파티에 참여하게 되면 채팅창이 개설되고 사용자는 자동으로 참여됩니다. 읽지 않은 메시지와 읽은 메시지를 구분하여 사용자의 채팅 목록이 많을 때도 채팅을 관리할 수 있도록 실시간 리스트를 제공합니다.
Supabase Realtime기반으로 실시간 채팅 기능을 구현하였고, 새로고침 없이도 채팅을 실시간으로 주고 받을 수 있어 매끄러운 사용자 경험을 제공하고 있고, 여행 모임에 대한 이야기를 별도의 메신저를 통하지 않더라도 서비스 내에서 충분히 꾸려나갈 수 있도록 구현하였습니다.
| 파티 참여 수락/거부 알림 | 찜하기/팔로우 등 사용자 상호작용 알림 |
|---|---|
 |
 |
- 보다 안전한 서비스 이용을 위해 사용자가 파티에 참여를 신청할 경우 파티장에게 실시간으로 수락과 거절을 결정할 수 있는 알림창을 띄워주고, 참여를 신청한 사용자의 정보를 함께 보여주어 사용자가 안전성을 스스로 판단할 수 있는 충분한 정보를 제공하고 있습니다.
- 팔로우, 찜하기 등의 소셜 네트워크 기능에도 실시간 알림 기능을 구현하여 사용자의 서비스 이용 흐름을 유지할 수 있도록 구현하였습니다.
| 만족했던 부분 | 만족하지 못했던 부분 |
|---|---|
 |
 |
사용자 테스트는 구글 폼을 통해 약 4일 간 진행하였고, 서비스에서 보완할 점과 강점을 확실히 분석할 수 있었습니다. 80%의 사용자가 사이트 이용에 만족한다고 답변하였으며, 20%의 불만족 답변은 미구현 사항과 버그에 관한 피드백이 대부분이었으며, 115건에 달하는 사용자 피드백을 수집할 수 있었고 상당수 개선하여 재조사 시 사용자 만족도의 상승이 기대됩니다.
사용자 테스트의 분석 결과는 이곳에서 확인할 수 있습니다.
1. PWA 구현 과정에서 iOS 대응에 대한 어려움
iOS에서는 안내를 보여주는 방법밖에 없다는 것을 확인했고, 해결 방법이 없음에 따라 PWA는 MVP에서 제외하게 되었습니다.
2. Supabase 인증 에러
Supabase 인증 기능 구현 중 발생하는 ‘Auth session missing!’ 에러에 대처하기 위해, 이 부분을 라우트 핸들러에서 예외 처리하여 해결할 수 있었습니다.
3. 모바일 환경 대응
모바일에서 당겨서 새로고침 동작을 막아야 하는 상황이 있었는데 useEffect에서 documentElement에 선택적으로 overscrollBehavior='none' 속성을 주어서 해결했습니다.
1. Funnel Design Pattern 또는 커스텀 훅, 컴포넌트의 재사용성 고려 문제
팀 아키텍처로 모듈 패턴과 아토믹 패턴을 채택 함에 따라 컴포넌트의 재사용성을 극대화하여 아키텍처의 효율성과 최적화를 도모했지만, 개발이 진행 됨에 따라 새로운 컴포넌트가 생겨나면서 개발과 동시에 유지보수를 지속해야 하는 어려움이 있었습니다. 이미 해당 훅과 컴포넌트는 여러 페이지에서 사용되고 있는 상태에서의 유지보수는 충돌을 면하기 어려웠고, 동료 개발자가 작성한 코드를 모두 이해해야 충돌 없는 유지보수를 진행할 수 있었기 때문에 시간이 오래 걸리는 어려움이 있었습니다. 하지만 이것도 점차 익숙해져 이후 작성한 훅과 컴포넌트는 예측하지 못하는 다양한 상황에 대응할 수 있도록 유연하게 작성할 수 있었습니다.
2. 복잡한 자료구조 파악의 어려움
국내, 국외 등 지역 선택을 하는 컴포넌트가 있는데 적절한 API를 찾지 못하여 팀에서 자체적으로 DB를 프로젝트 내부에 구축한 것이 있습니다.
이 locationData에는 3단계 가량으로 배열과 객체가 혼합되어 있는 형태로 구성되어 있었는데,
원하는 데이터까지 접근하기 까지 타입을 지정하는 데 매우 큰 어려움이 있었고, 협업으로 해결하였습니다.
3. 컴포넌트 리렌더링에 대한 이해 부족으로 생긴 어려움
커스텀 훅 만능주의에 빠져 글쓰기 페이지도 제어컴포넌트 커스텀 훅으로 작성하였더니, 한 글자를 입력할 때마다 입력필드에서 포커스를 잃는 현상이 발생했습니다. 훅 내부에서 작성한 컴포넌트(입력필드)에 값이 입력될 때마다 새로운 인스턴스가 생성되면서 컴포넌트의 리렌더링을 유발하는 상황이었습니다. 이는 훅과 컴포넌트를 분리해서 해결하였습니다.
1. 채팅 목록과 채팅이 모바일, PC에서 다른 UI로 개발해야 하는 데서 오는 어려움
모바일 환경에서는 채팅 목록과 채팅 내용이 분리되어 있는 UI였으나, 데스크탑에서는 두 컴포넌트는 동시에 보여줘야 하는 UI를 구현해야
했습니다.
이 트러블 슈팅이 막막하여 다른 기능부터 개발하며 인스타그램 등의 다른 유사 서비스를 살펴보기도 하고, 구글링을 해보기도 하였습니다.
그러다 문득 아주 쉽게 해결할 수 있을 것 같다는 생각이 떠올랐는데,
chat 폴더의 layout.tsx에 컴포넌트를 넣는 방법입니다. layout.tsx에 채팅 리스트 컴포넌트를 넣고, 1280px 이상일 경우에만 보이도록 설정해주어서 간단히 해결할 수 있었습니다.
처음 해본다고 어렵게 생각하거나 두려워하지 말고, 기초부터 생각해보면 쉽게 답이 나올 수도 있다는 것을 배웠습니다.
- 무한렌더링 문제
상태 업데이트와 관련된 의존성을 정확히 설정하고, useEffect 내의 상태 변경을 조건부로 처리했습니다.
- 상태 관리의 복잡성
useReducer, themeReducer을 사용하여 복잡한 상태 변경 로직을 관리함으로써 상태 관리의 복잡성을 줄이고자 했습니다.
- 다양한 화면 크기에 대한 레이아웃 문제
window.matchMedia를 사용하여 화면 크기에 따라 레이아웃을 조정하고 반응형 디자인을 구현했습니다.
- 상태 관리 문제
튜토리얼 단계가 리프레시될 때 초기화되는 문제를 발견했습니다. 이를 해결하기 위해 상태 관리를 개선하고 튜토리얼 진행 상황을 로컬 스토리지에 저장하여 문제를 해결했습니다.
- UI 렌더링 이슈
일부 브라우저에서 튜토리얼 UI가 제대로 렌더링되지 않는 문제를 발견했고, 이 문제는 Tailwind CSS의 특정 설정을 조정하여 해결했습니다.
처음에 생각했던 것 만큼 기능을 구현하지 못했고, 컨벤션 측면에서도 부족함이 많습니다.
소통이 잘 되었습니다. 긴밀하게 협업하면서 완성까지 다함께 달려온 것 같습니다.
컨벤션, 아토믹 패턴, 퍼널 패턴,탠스택쿼리 사용, 라이브러리 사용모든 측면에서 프로젝트가 통일감있게 진행되도록 컨트롤 하지못한 것 같아서 아쉽습니다.
- 라우트핸들러 사용법, fetch사용법, 탠스택쿼리 사용법등에서 통일감 있게 진행되지못한 부분이 많습니다.
- 아토믹 패턴을 가능케 하는컴포넌트 분리에 있어 팀원간에 컨벤션 통일이 정확히이루어지지 못한 것 같습니다.
- 코드 스플리팅을 통한 사이트 속도 개선이 필요해보입니다.
- seo, web vital 부분에서 부족한 부분이 많습니다.
어느정도 규모가 되는 프로젝트에 익숙해 질 수 있었습니다
모두 그동안 빡빡한 일정 속에 너무나 수고 많으셨습니다.
기획 의도에 벗어나는 것이 없고 실력 편차를 고려했을 때 이정도 퍼포먼스라면 괄목할 만한 성과입니다. 시간만 있다면 코드 품질 또한 개선할 수 있었겠지만 이 정도면 최선의 결과물입니다.
훌륭한 팀이었습니다. 나이 차이도 많이 나고, 실력 차이도 많이 나는 팀 구성에서 이정도 퍼포먼스면 그 어떤 팀보다 우수했습니다.
한 달이라는 시간이 길 것 같았지만 역시나 시간에 쫓기듯 작업을 했고 모듈 재사용이나 최적화에 대한아쉬움을 인지하고 있음에도끝까지 해결하지 못한 아쉬움이 진하게 남습니다.
아토믹 패턴을 디자인 패턴으로 채택 했음에도 가장 작은 UI 조각으로 나누는 작업은 생략한 부분이 많습니다.
그 간의 프로젝트에서는 맡은 기능을 구현하는 데만 집중했다면, 이번 프로젝트는 프로젝트의 아키텍처를 볼 수 있게 되었습니다.
욕심만 앞섰던 부족한 부팀장이었습니다. 여러분이 팀원이 아니었다면 수료할 수 없었을 것 같습니다. 고맙습니다.
기능 구현과 UI, 보이는 결과물은 잘 만들어졌지만 몇몇 부분에서 코드의 개선이 필요합니다.
모두 맡으신 파트 잘 해주셨습니다. 특히 리더님과 부리더님이 맡은 파트 외의 개발적인 부분도, 개발 외적인 일들도 열정을 다해주시고 이끌어주신 덕분에 완성도 높은 프로젝트를 만들 수 있었습니다. 또한 디자이너님과 함께하는 첫 협업이라는 점에서도 어려움이 있을 수 있었지만, 서로 소통이 원만하게 이루어졌다고 느꼈습니다.
채팅 구현은 예전부터 해보고 싶었던 기능이었는데 좋은 경험이 되었습니다. 실시간 기능 구현, 깃허브 활용, zustand 사용, SQL작성 등 처음 해보는 게 많았는데 도전해보길 잘 했다고 느끼고 있습니다. 하지만 처음 팀에서 지키자고 했던 컨벤션을 못 지키고 정돈되지 않은 코드를 작성하게 되었고, 맡은 파트 구현 자체도 100% 하지는 못 하고 팀원 분들의 도움을 받아 완성시킬 수 있었어서, 프로젝트는 잘 마무리 되었지만 개인적으로 아쉬움이 남습니다.
맡은 파트 전체적으로리팩토링 해야 할 것 같습니다.
규모가 있는 프로젝트를 경험해볼 수 있었고, realtime, sql 등 새로운 기술을 배울 수 있었습니다.
파이널 프로젝트에서 좋은 팀을 만나 많이 배우고 캠프를 잘 마무리 할 수 있었습니다! 고생 많으셨습니다.
프로젝트 결과물이 대체로 잘 구현되었다고 생각하나 개선이 필요합니다.
소통 및 회의가 체계적이었고, 팀원분들이 맡은 부분 이상을 잘 해내주셨습니다.
구현하고자 했던 부분을 완벽히 끝내지 못했고 개선되어야 할 부분이 남아 아쉽습니다.
라우트 핸들러, 탠스택 쿼리로전환이 필요합니다.
일정 관리, 작업 우선 순위 설정 등 프로젝트 관리를 경험하며 배울 수 있었습니다.
협업에 대해 조금 더 알아가는 시간이 되었고 고생하신 팀원분들 수고 많으셨습니다.
팀원분들이 열심히 노력한 끝에 만들어진 완성도가 높은 프로젝트이기 때문에 만점을 줬습니다.
팀원들이 각자의 역할을 잘수행하며,서로의 작업을 적극적으로지원한 점이 좋았습니다.팀적으로는 완벽했으나 개인적으로리더님과 부리더님을 좀 더 많이도와드리지못해 아쉬운마음입니다.
맡은 기능을 시간 내에 구현하고끝까지 포기하지 않은 부분은잘 한 점이라고 생각됩니다.하지만 이왕 하는거면 더욱 많은기능을 맡아서 열심히 최선을 다해서 했으면 좋았겠다라는아쉬움도 남았습니다.
사용자가 튜토리얼 단계를 다시볼 수 있도록 하는 기능을추가할 필요가 있습니다.다양한 디바이스에서 일관된사용자 경험을 제공하기 위해반응형 디자인을 더 강화할 필요가 있습니다.
tailwind css를 조금이나마 익숙하게 다룰 수 있게 되었습니다.
스파르타 코딩클럽을 통해 많은 것을 배웠고, 특히 팀 작업의 중요성을 실감했습니다.앞으로도 계속해서 성장하며, 더 나은 사람이 되고자 노력하겠습니다. 팀원분들 한달간 정말 고생 많으셨습니다.
|
성공적인 프로젝트가 진행될 수 있도록 다양한 지원을 아끼지 않은 내일배움캠프,
기술적, 심리적 어려움을 옆에서 끝까지 함께 해결해주신 이강민, 남상림 튜터님,
프로젝트의 완성도가 높아질 수 있도록 UI/UX 개선에 도움을 주신 심유경 멘토님
그리고 프로젝트에 대해 진심어린 조언을 보내주신 React 5기 동기생 여러분께 다시 한 번 감사의 말씀을 드립니다. |
|---|