(스톱워치 시작) #(타이틀, 팀원 이름) 안녕하세요, 심화 프로젝트 3팀, GiveMeFive의 팀장 겸 발표를 맡은 김민찬입니다. 벌써 심화 프로젝트도 마무리되었네요. 반년이라는 시간이 결코 짧지 않은 시간인데, 모두들 그 동안 정말 고생 많으셨다는 말씀드리면서 발표를 시작해보도록 하겠습니다.

#(목차) 먼저 목차입니다. 발표 순서는 보시는 바와 같은 순서로 진행됩니다. 프로젝트 설명 이후에 시연 영상을 보시고 나서, 트러블 슈팅 과정으로 이어지게 될 것 입니다.

#(서브 타이틀) 첫번째로 팀 구성 및 소개입니다.

#(팀 소개) 구체적인 프로젝트 설명에 앞서 간단하게 저희 팀의 구성 및 역할부터 말씀드리도록 하겠습니다. 저희 팀은 팀장인 저와, 다솜님, 윤하님, 성진님, 성구님. 이렇게 총 5명으로 이루어진 팀입니다.

각자 맡은 업무로는, 저는 OAuth를 포함한 유저 기능과 로그인 및 회원가입 페이지, 알림, 예약 캘린더 컴포넌트 등을 맡았습니다. 다솜님께서는 내 정보 및 내 체험 관리, 예약 내역 페이지, 공통 모달 컴포넌트를 맡으셨구요. 윤하님은 메인 및 체험 상세 페이지와 푸터, 버튼과 같은 공통 컴포넌트와 오픈 그래프 기능을, 그리고 성진님은 내 체험 등록 및 수정, 예약 현황 관리 페이지와, 공통 드롭다운 컴포넌트를 맡으셨습니다. 성구님께서는 취업 관계로 프로젝트의 시연 영상과 문서화 관련 작업을 담당해주셨습니다.

#(글로벌 노마드 피그마 참고) 다음은 프로젝트 선정 과정입니다. 저희가 선택한 주제는 ‘글로벌노마드’인데요, 글로벌노마드는 크리에이터 입장에서는 단체나 개인이 만든 이색 체험을 사람들에게 소개할 수 있고, 사용자 입장에서는 휴일이나 휴가 또는 이색 데이트 코스로써 새로운 체험을 찾을 수 있는 서비스 플랫폼입니다.

해당 주제를 선택한 이유는 B2C 컨텐츠로써 굉장히 많이 활용되는 레이아웃이었기 때문도 있고, 마이리얼트랩, 여기어때, 에어비엔비 등 참고할 수 있는 메이저 레퍼런스 사이트들이 많기 때문이었습니다. 또한 해당 프로젝트가 데스크탑, 태블릿, 모바일마다 레이아웃이 다 달라서, 반응형 웹 구현에 대한 이해와 연습에 도움이 많이 될 것 같았기 때문입니다.

#(글로벌 노마드 피그마 참고) 다음은 프로젝트 개선 과정입니다. 일단 눈에 가장 먼저 띄는 것은 프로젝트 전체의 색감과 로고의 변화일 것입니다.

프로젝트 설계 당시, 체험 플랫폼이라기에는 디자인적으로 색감이 너무 칙칙하고, ’글로벌노마드’라는 타이틀이 뭔가 체험이라기 보다는 해외 여행 상품 소개 같은 느낌이라는 것이 전반적인 의견이었습니다.

#(팀 노션 이름 공모 페이지) 그래서 팀 자체적으로 이름 공모전을 열었고, 각자 아이디어를 낸 결과, GiveMeFive라는 이름이 선정되었습니다. 해당 아이디어의 의미는 일단 GiveMeFive가 관용어구로 ‘하이파이브를 해줘!’라는 의미를 담고 있기에, 체험 크리에이터와 사용자를 이어주는 느낌을 주기를 바랐습니다.

이는 단순히 사용자만을 위한 플랫폼이 아니라, 누구나 자신만의 체험 아이디어를 소개하고 사람들에게 공유할 수 있는 플랫폼으로 만들어지면 좋겠다고 생각했기 때문입니다.

#(공방 및 사람들이 스포츠를 즐기고 있는 사진) 이로써 베이킹이나 수작업 공방 등의 소상공인 사장님들에게는 물론이고, 자신이 즐기는 클라이밍, 스케이트 보드 등과 같은 아웃도어 스포츠를 대중에게 알리고 싶은 일반 동호인들도, 체험 일정을 제작하고 그로인한 부수입을 만들 수 있게 하면, 좀 더 많은 유저풀을 가질 수 있게 될 수 있을 거라 생각하여, 글로벌노마드라는 기존 이름을 GiveMeFive로 대체하고, 웹 사이트 색상도 좀더 통통 튀는 밝은 색감으로 바꾸어 보았습니다.

#(아이콘 활용) 시연 영상을 보여드리기 전에 저희 프로젝트의 목표를 말씀드리겠습니다. 저희 프로젝트의 팀 목표는, 다른 팀원들이 함께 그리고 쉽게 사용할 수 있는 공통 컴포넌트를 모두가 만들어보는 경험과 tanstack-query, zustand를 사용하여 서버 상태와 클라이언트 전역 상태를 구분하여 사용할 수 있는 능력을 길러보는 것이었습니다. 또한 드롭다운, 모달, 캘린더와 같은 UI는 멘토님께서 알려주신 Mantine UI 라이브러리를 활용하여 만들었고 프레임워크로는 Nextjs의 앱 라우터를, 스타일 관리는 SCSS를 사용하여, 취업 시 실무적으로 도움이 될 수 있는 조합을 경험해보고자 하였습니다.

#(진행 과정) 다음은 저희 프로젝트의 팀 문화입니다. 저희는 POC 및 컴포넌트 설계에 많은 시간을 할애하였습니다. 각자 본인이 맡은 역할에 필요한 라이브러리를 비교하고, API를 분석하고, 어떻게 공통 컴포넌트를 만들어야 다른 팀원이 쓰기 편할까에 대한 의견을 서로 주고 받으며 팀으로써 함께 만드는 프로젝트라는 느낌을 받을 수 있었습니다. 해당 과정은 팀 노션에 상세히 기록하여 놓았습니다.

#(공통 컴포넌트 usage 폴더 구조 및 설명 파일 스크린샷) 공통 컴포넌트를 만들 때에도, 다른 팀원들이 쉽게 사용할 수 있게끔, 사용 설명서 파일을 따로 관리하였습니다. 설명에는 props에 대한 구체적인 설명과 예시 코드를 추가해두어, 본인이 만든 컴포넌트에 대한 확실한 이해를 기반으로 문서화 능력과 동시에 협업 효율도 올릴 수 있도록 하였습니다.

#(우리 PR 사진) 또한 프로젝트 진행 중에도 되도록 모든 PR에 서로 의견을 남기고, 적어도 ’수고했습니다, 고생하셨습니다.’ 라는 감사의 말을 남기는 것을 규칙으로 하여 내가 맡은 작업만 하면 끝이 아니라 서로에게 부족한 점을 서로가 보완해가며 완성도 있는 프로젝트를 만들기 위해 노력하였습니다.

#(시연 영상) 다음은 프로젝트의 시연영상입니다.

#(트러블 슈팅 서브 타이틀) 시연 영상을 보시고 오셨으니 이제 저희가 프로젝트를 진행하면서 경험했던 트러블 슈팅 과정에 대해서 말씀드리겠습니다. 트러블 슈팅은 문제 해결 과정으로써, 각 팀원 별로 문제 발견과 원인 분석 그리고 해결 방법으로 나누어 이야기해보도록 하겠습니다.

#(각 트러블슈팅마다 작성자 이름 타이틀로 붙이기) 먼저 다솜님입니다.

다솜님께서 직면한 문제는 마이 페이지에서 프로필 이미지를 변경할 때, 헤더에 표출되는 프로필 이미지가 동시에 변하지 않고, 페이지 새로고침 후에 변경 사항이 적용되는 것이었습니다.

해당 문제의 원인은 헤더에서는 매 렌더링마다 쿠키의 토큰 유무를 확인하여 자동으로 로그인 및 유저 정보를 갱신하는 로직을 가지고 있고, 이때 유저의 프로필 정보를 가져와 전역 상태로 저장해두기 때문에, 서로 다른 컴포넌트인 마이 페이지에서 프로필을 변경한다고 해서 헤더가 리렌더링되는 것은 아니기 때문입니다.