사전직무교육이 끝나고 프로젝트 주차가 시작되었다. 첫 주는 팀원들과 회의를 하며 프로젝트 시작 전 설계를 하는 시간을 가졌다.
디자인 회의
기업 측에서 기본 디자인을 제공해주기는 했지만, 그대로 만들기엔 조금 무리가 있어 보여서...팀원들과 회의하여 디자인을 변경하기로 하였다.
기존 디자인의 레이아웃은 그대로 가져가되, 메인 컬러와 포인트 컬러를 변경하고, 컴포넌트의 일부도 조금 변경하였다. 칼라피커와, blob 스킨을 도입하는 등 몇 가지 기능을 추가하기도 하였다.
기술 스택
프로젝트 중 사용할 기술 스택을 정했다.
- Next.js
- Typescript
- zustand
- shadcn.ui
Next.js를 메인으로 사용하고, 상태관리는 zustand를 사용하기로 하였다. 팀원 중 민규님이 강력하게 주장하셔서 CSS 라이브러리인 shadcn.ui를 사용하기로 최종 결정하였다. CSS 라이브러리를 사용하는게 맞는지, 아니면 제로부터 하나하나 다 만드는게 좋을지 고민이 많았지만 민규님께서 사용방법까지 공부해오시면서 설득하셔서 결국 OK..Chakra ui보다도 더 깔끔해보이는게 좋았다. 사용방법도 chakra ui나 material ui랑은 조금 다른 것 같은데, 이에 대해서는 실제로 한번 사용해보고 정리해야겠다.
개발 준비
개발 시작 전, 디자인이나 기술스택 결정을 위해 역할을 나누었다. 소은님이랑 나는 디자인 수정, 민규님은 shadcn ui 사용의 장단점과 사용방법 조사, 비성님은 next.js 상태관리 라이브러리 사용 권장 여부, tailwind 반응형 적용 시 모바일/PC 우선순위에 대해서 조사하기로 하였고 도이님은 공통 컴포넌트 제작 연습을 하기로 결정했다.
Mobile first? Desktop First?
회의 중 반응형까지 구현하기로 하였는데, tailwind는 모바일 first로 구현하는게 권장사항이라 mobile vs PC 중 어떤것을 베이스로 구현할지 의견이 조금 갈렸다.
나는 기업에서 제공한 디자인이 PC 뷰이고, 멘토님께서도 PC 화면만 구현할 것이라 하셨기에 요구사항에 맞춰 desktop first로 개발해야한다고 주장했고, 회의 결과 desktop first로 구현, 이후 mobile 반응형을 추가하기로 하였다.
디자인 수정
디자인...올려도 되나.? 소은님이랑 열심히 수정해서 나름 괜찮은(내눈에만 괜찮나 근데 깔끔하고 진짜 괜찬은거같음) 디자인을 만들어냈다. 우리 팀 이름이 LinkPalette여서, 팔레트 컨셉을 살려보려고 했는데 색을 여러개 쓰니 도무지 통일성을 만들어낼 수 없어서 포인트 색상을 검정색 하나로 통일하였다. 나중에 좀 밝은 색으로 바꿔보자고 해야지...깔끔하긴한데 너무 밋밋행..보라색이 딱 좋긴한데 하필 Linktree 포인트 색이 보라색이다😭😭
Git Flow
민규님께서 하루만에 엄청나게 많은 것을 준비해오셨다. 깃, 커밋 컨벤션 등등...확실히 실무 경험이 많으신 분이라 이것저것 배울 점이 많은 것 같다👍 깃헙 레포 볼때마다 컨벤션 같은거 정해서 하는 본격 팀플이 너무 부러웠는데 나도 드디어 제대로 팀플 해보는것 같아서 기분이 너무 좋다.
우리는 Git Flow 브랜치 전략을 사용하기로 햇다.
- master : 소프트웨어 제품을 배포하는 용도로 쓰는 브랜치
- develop : 개발용 default 브랜치로, 이 브랜치를 기준으로 feature 브랜치를 따고, 각 feature를 합치는 브랜치
- feature: 단위 기능 개발용 브랜치
- release: 다음배포를 위해 기능에 문제가 없는지 품질체크(QA) 용도의 브랜치
- hotfix: 배포가 되고 나서(master에 배포 코드가 합쳐진 후) 버그 발생 시 긴급 수정하는 브랜치
- support: 버전 호환성을 위한 브랜치
우리의 브랜치 규칙
feature/링크-등록-폼
위의 형태로 브랜치를 생성하고, 이후 merge하기로 결정
Git 커밋 메세지 작성 규칙
아래는 Gitmoji를 사용한 커밋 메시지. 우리는 이모지는 제외하고, 커밋 메시지 규칙만 정해서 사용하기로 했다.
✨Feat(페이지 경로 또는 컴포넌트): 새로운 기능 추가 또는 기능 업데이트
🐛Fix(페이지 경로 또는 컴포넌트): 버그 또는 에러 수정
💄Style(페이지 경로 또는 컴포넌트): 코드 포맷팅, 코드 오타, 함수명 수정 등 스타일 수정
♻️Refactor(페이지 경로 또는 컴포넌트): 코드 리팩토링(똑같은 기능인데 코드만 개선)
🚚File(페이지 경로 또는 컴포넌트): 파일 이동 또는 제거, 파일명 변경
💡Comment(페이지 경로 또는 컴포넌트): 주석 수정 및 삭제
📦Chore: 빌드 수정, 패키지 추가, 환경변수 설정
📝 Docs: 문서 수정, 블로그 포스트 추가
🚑 Hotfix: 핫픽스 수정
🎉 Init: 프로젝트 생성우리의 커밋 규칙
Feat: 링크 등록 폼 추가
(대소문자 및 띄어쓰기 잘 지키고 끝에 마침표 x)
기능정의
기업측에서 제안서와 디자인 파일 외 다른 문서는 전달해주지 않았다. 기능관련 문서가 하나도 없고, 멘토님께서 기능이 복잡하지 않아 더 제공되는 문서는 없을 것이라 하여 팀 내에서 간단하게 기능을 정의해보았다.
| 페이지 | ID 페이지 | 구성요소 | 기능 ID | 기능명 | 상세설명 | 페이지 경로 |
|---|
위 형식으로 작성해보았다. 문서로 작성해보니 애매했던 기능들이 명확하게 정의된 기분이다.
백로그
7주차여서, 프로젝트 설계를 위한 1주를 제외하고 2주씩 3 스프린트로 프로젝트를 진행하기로 했다.
노션에서 백로그 작성하여, 진도를 확인하기로 했다.
개발 파트
퍼블리싱 기간을 21일까지로 잡고, 각자 파트를 분배하였다.
나는 프로필 편집 페이지 중 배경 선택 페이지를 담당하게 되었다! 생성되는 링크 페이지의 스타일을 전반적으로 다루는 부분이다(카드 레이아웃 제외). 배경 스킨 변경도 다루고, 스킨 색상 또는 배경 이미지도 처리해야하고 생각보다 구현해야 할게 많은 느낌이다.
수요일에 파트 분배를 했는데 목요일부터 주말까지 멘토링 활동이랑 교육으로 바빠서 본격적인 개발을 시작하지 못했다. 월요일부터 본격적으로 개발 빡세게 해야겠다.
팀원 중에 실무 경험이 많은 분이 계서서 많이 배우는 것 같다. 🍀팀운🍀
익숙한 리액트가 아니라 Next.js 랑 타입스크립트 쓰게 되어서 긴장되긴 한데, 그래도 이왕하는거 우수 프로젝트 목표로 열심히 하자
