[뉴스피드 프로젝트] - 처음 해보는 팀 프로젝트

개요

드디어 부트캠프에 들어와서 팀 프로젝트를 처음 시작하게 되었다.

개발 팀플을 처음 해보는지라 걱정 반 설렘 반의 감정이었다.

팀 프로젝트를 진행하면서 거치는 과정을 최대한 빠짐없이 기록해두려고 한다.

 

 

팀 프로젝트 Day 1

첫날에 했던 일들은 다음과 같다.

🔥 Day 1
1. 뉴스피드 프로젝트 기획하기
2. User Flow 구성하기
3. 페이지마다 레퍼런스 찾기
4. 와이어 프레임 만들기
5. 역할 분담하기
6. 프로젝트 세팅하기

 

1. 뉴스피드 프로젝트 기획하기

처음 하는 프로젝트이기도 하고, 기간이 짧아서 기획에 큰 시간을 들이지 않았다.

우리는 개발을 하는 것이기 때문에 기획보다 개발에 우선순위를 두었다.

항상 오랜 시간 동안 기획하는 것에 습관이 들어서 그런가 이런 상황이 낯설었다.

프로젝트 기간이 길게 주어진다면 진짜 문제를 해결할 수 있는 프로젝트를 진행해보고 싶어졌다.

 

아무튼..

팀원들과 이야기를 나누면서 뉴스피드의 주제를 빠르게 정했다.

 

만장의 일치로...

😽 고양이 집사 커뮤니티

해당 주제로 프로젝트를 진행하기로 하였다.

인스타그램을 벤치마킹해서 우리 집 고양이를 보여주는 뉴스 피드를 만들기로 하였다.

 

2. User Flow 구상하기

거창하게 User Flow라고 하긴 했지만, user flow라고 하기에는 조금 부끄럽다.

사용자가 뉴스 피드를 이용하면서 이용할 페이지의 흐름을 크게 구성하였다.

로그인 페이지, 회원가입 페이지, 메인 홈페이지, 글 작성 페이지, 게시글 세부 페이지, 마이 페이지, 검색 페이지

 

사용자가 처음에 들어왔을 때는 메인 홈페이지를 만나게 된다.

로그인 여부에 따라 접근할 수 있는 페이지가 다르다.

 

❌ 로그인이 안되어 있을 때 접근 가능한 페이지

메인 홈페이지, 게시글 세부 페이지, 다른 유저의 개인 페이지, 검색 페이지

로그인이 안 되어 있을 때는 위의 페이지를 제외하고서 접근할 수 없다.

바로 로그인 화면으로 넘어가게 흐름을 구성하였다.

 

✅ 로그인이 되어 있을 때 접근 불가능한 페이지

로그인 페이지, 회원가입 페이지

로그인이 되어 있을 때는 위의 두 페이지를 제외하고 모두 접근할 수 있다.

 

3. 페이지마다 레퍼런스 찾기

디자인이 중요하지는 않지만...

그래도 어느 정도의 디자인을 갖춰야 사용자 입장에서 웹 사이트를 쓰고 싶은 생각이 들지 않을까 싶었다.

아직 미니 프로젝트이기 때문에 레퍼런스를 찾는데 큰 시간을 쏟지 않았다.

15분 정도 투자하여 각자 페이지마다 괜찮은 레퍼런스를 찾아오기로 하였다.

디자인을 위주로 보기보다 페이지의 구성과 기능을 중심으로 선택하였다.

열심히 투표용지도 만들어서 민주주의 방식으로 진행하였다. 하하하.

찾아온 레퍼런스 중에 인스타그램의 페이지가 제일 많이 선택되었다.

 

4. 와이어 프레임 만들기

선정한 레퍼런스를 참고하여 와이어 프레임을 그렸다.

1명당 한 페이지씩 맡아서 간단하게 와이어 프레임을 제작하였다.

각자 흩어져서 그린 와이어 프레임을 한 곳에 모아, 수정의 시간을 가졌다.

의논을 하면서 필요하지 않을 것 같은 부분은 제외하고, 있으면 좋을 것 같은 부분은 새롭게 넣었다.

 

5. 역할 분담하기

개발 팀프로젝트가 처음이라 어떻게 역할 분담을 나눠야 할지 잘 모르겠었다.

기능별로 나누는 것이 좋을까? 페이지별로 나누는 것이 좋을까?를 의논하다가

일단 페이지별로 역할을 분담하기로 하였다.

로그인/회원가입 페이지 - 본인
검색 페이지/공통 레이아웃(헤더, 사이드바) - 🐲
메인 홈페이지/마이 페이지 - 🔔
게시글 작성 페이지 - 🌊
게시글 세부 페이지 - 🎶
게시글 북마크 페이지 - 🕝

로그인/회원가입 페이지는 다른 페이지들과 연관성이 높아 제일 먼저 작업을 끝냈어야 했다.

잘할 수 있을까 부담이 됐지만, 부딪혀야 성장할 수 있다고 생각하기 때문에 부딪히는 걸 선택하였다.

 

6. 프로젝트 세팅하기

어쩌다 보니 프로젝트를 세팅하는 것도 맡게 되었다.

처음 하는 것이라 자신이 없었는데 예전 조원분😇이 아주 친절하게 도와주셨다.

덕분에 어떻게 프로젝트를 세팅해야 되는지 많이 배웠다.

배운 내용들을 잊지 않기 위해 정리해두려고 한다.

 

⚙️ 프로젝트 세팅하는 방법

1️⃣ Github에서 레퍼지토리를 생성한다. (MIT 라이센스 추가)

 

2️⃣ 기본적으로 필요한 폴더를 추가한다.

 

3️⃣ 동일한 코드 포맷팅 구조를 위해 .prettierrc 파일을 추가한 뒤, 동일한 설정을 부여한다.

{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true,
    "trailingComma": "none"
}

 

3️⃣ 프로젝트에서 사용할 라이브러리를 설치한다.

여기서 주의할 점은 어떤 패키지 매니저를 설치할지 팀 내에서 미리 통일해야 한다.

처음에 다같이 yarn을 썼는데, 누군가 실수로 npm으로 설치하면 오류가 난다고 한다.

아직 겪어보지는 못했지만.. 어떤 오류일지 궁금하다.

 

4️⃣ Pull Request 할 때 사용할 템플릿을 적용한다.

PULL_REQUEST_TEMPLATE.md

프로젝트에는 .github 폴더만 생성해 주고, 템플릿 파일은 레퍼지토리 페이지에서 직접 추가해줘야한다.

 

Add file 버튼을 눌러준다.

상단에 github/PULL_REQUEST_TEMPLATE.md로 폴더 위치와 파일명을 설정해 준다.

PR 템플릿을 넣은 뒤에 파일을 생성해 주면 된다.

여기서 주의할 점은 까먹지 않고 로컬에서 pull을 해줘야 한다는 점이다.

 

5️⃣ 환경 변수 파일 추가하기

Github에 올라가면 안 되는 중요한 정보들(API_KEY 등)은. env 파일 안에 넣어줘야 한다.

# 환경 설정 파일
.env

.gitIgnore에 .env 파일을 추가해 두어야 Github에 올라가지 않는다.

 

이후 추가적인 세팅은 팀원분들과 회의를 통해 결정해야 되는 부분이었다.

ex) Router 페이지, style 파일(공통 컬러, 폰트 사이즈), Context API

 

이렇게 프로젝트 초기 세팅도 마무리하였다.

처음 하는 거다 보니 레퍼지토리를 10번은 지우고 만들고 했던 것 같다...

다른 팀원분들에게 편한 세팅을 제공해주고 싶은 욕심에 꽤 오랜 시간을 쏟아부었다.

레버지토리를 10번 지우고 만들고 하면서 프로젝트 세팅하는 방법이 자동으로 익숙해진 것 같다. 하하하.

 

 

느낀 점

처음 개발 팀 프로젝트를 진행하는 것이다 보니 이상하게 긴장이 됐었다.

팀 프로젝트를 하면서 실수하게 될까 봐 많이 걱정하였다.

내 의견을 잘 전달하고 있는지, 혹시나 기분 상하는 말을 하지는 않았는지 스스로를 되돌아보게 된다.

 

팀플 하면서 느낀 점은 무엇보다 "소통"이 중요하다는 것을 뼈저리게 느끼고 있다.

갠플이 아니라 "팀플"이기 때문에 모든 정보는 팀원들이 모두 알고 있어야 한다.

프로젝트 세팅은 어디까지 되었는지, 라이브러리는 무엇을 쓸 것인지, 패키지 매니저는 무엇으로 할 것인지 등등

공유해야 하는 이야기가 한둘이 아니었다.

 

왜 팀 프로젝트 경험이 중요한지 몸소 체험하고 있다.

나와 다른 사람들과 소통하는 과정을 통해 "어떻게 소통하면 좋은가"에 대해 배우게 된다.

한 배를 탄 선원들이기 때문에 한 명이랑도 배에서 떨어지지 않게 잘 운행해야 한다.

다른 사람들에게 나의 존재가 같이 배를 타고 싶은 선원이길 바란다.