1 - 안녕하세요 커스텀 키보드 구매 사이트 키득의 발표를 맡은 쿼드에잇 팀장 김예진입니다.

2- 목차로는 팀과 프로젝트에 대헤 소개드리고, 저희가 협업한 과정과 저희 프로젝트의 페이지별 소개를 해드리겠습니다. 끝으로 트러블 슈팅 과정에 대해 말씀드리고 시연 보여드리겠습니다.

3- 먼저 저희 팀에 대해 소개해 드리겠습니다. 저희는 코드잇 스프린트 4기 파트4의 4팀이고, 총 8명으로 이루어져있기 때문에 Quad8이라는 팀명을 짓게 되었습니다. 팀원으로는 디자이너 도은님, 백엔드 수빈님과 윤설님, 프론트는 저, 도원님, 영은님, 민정님, 보경님이 있습니다.

4- 다음으로 저희 프로젝트에 대해 소개해드리겠습니다. 저희 개발자들이 아무래도 키보드와 가까운 직업이다 보니 커스텀 키보드에 관심있으신 분들이 많을거라 생각이 듭니다. 하지만 커스텀 키보드를 구매하려고 하면 키캡, 스위치, 베어본 등 하나하나 다 따로 구매를 해야 해서 키보드에 대해 잘 알지 못하는 사람의 입장에서는 쉽게 접근하기 어렵다고 느껴졌습니다.

그래서 커스텀 키보드를 조금 더 간편하게 구매할 수 있는 사이트가 있으면 어떨까? 하는 아이디어에서 키득을 기획하게 되었습니다. 키득은 키보드 득템의 줄임말로 저희 사이트를 통해 키보드에 관련된 다양한 제품을 구매할 수 있습니다.

또한 저희 사이트만의 핵심 기능이라고 할 수 있는 3D 시뮬레이션으로 커스텀 키보드를 직접 만들어보고 구매할 수 있습니다. 직접 만든 커스텀 키보드를 구매했다면 커뮤니티 게시판에서 해당 키보드의 리뷰로 게시글을 작성할 수 있습니다.

5- 각 분야별 주요 기술 스택으로는 크게 피그마, 스프링, next.js 14버전의 app router를 사용했습니다.

6- 이제 저희가 프로젝트를 진행하며 어떻게 협업했는지에 대해 설명드리겠습니다. 프로젝트 초반에 주제를 정하기 위해 디자이너, 백엔드, 프론트 팀원 모두 아이디어를 가져와 노션에서 많은 회의를 진행 했고, 주제가 정해진 후 피그잼에서 페이지, 기능에 관련된 레퍼런스를 가져와서 다같이 세부 기획을 진행했습니다.

7 - 그리고 노션에 컨벤션과 작업 사항, 회의록을 열심히 기록해 회의 중 놓치거나 헷갈리는 부분이 있더라도 다시 찾아볼 수 있게 하였습니다.

8 - 디자이너님과의 협업에서는 만들어주신 피그마 디자인 시안에 댓글을 남겨 피드백을 빠르게 주고 받았습니다.

9 - 백엔드 분들과는 기획이 어느 정도 완료된 후에, API 명세서와 ERD를 다같이 작성해보며 필요한 내용에 대해 구체화하였습니다. 그리고 디스코드와 스웨거를 이용해 API가 만들어질때마다 원활하게 소통 할 수 있었습니다.

10- 프론트 팀원들과의 협업에서는 깃허브 위키에 개발 일지를 작성하여 기술적인 고민을 같이 나눴으며,

11- 서로의 PR을 꼼꼼히 봐주고 리뷰를 남기면서 서로에게 부족한 부분을 채워줬습니다.

12 - 또한 스토리북도 작성해 공통 컴포넌트의 이용을 원활하게 할 수 있었습니다

13- 그리고 사전에 논의한 컨벤션을 실수 없이 지키고, 빌드 에러를 방지하기 위해 husky를 도입해 모두가 코드를 조금 더 신중하게 작성하게 되고, 원활한 배포가 가능했습니다.