SSAFY 8th 마지막 자율프로젝트

하이킹덤(Hikingdom) 23.04.10 - 23.05.19

약 한 달 동안 [빛과 소금] 팀과 함께했던 하이킹덤 프로젝트 회고를 이제서야 정리해본다.

팀명 빛과 소금은 나와 다른 팀원 한 명이 SSAFY에서 프론트의 빛과 소금이라 소문이 났다며 (ㅎㅎ..) 귀여운 백엔드 팀원들이 의견을 내주었다.

1. 팀 목표

SSAFY 공통프로젝트, 특화프로젝트를 거치며 백과 프론트 모두 각자 원하는 기술 스택을 어느정도 경험해봤다.

SSAFY 과정이 워낙 촉박하고 강도가 높았기 때문에 다들 이전 프로젝트에 대한 리팩토링과 회고의 시간이 부족해 이번 자율프로젝트에서는 기존 접해봤던 기술 스택을 바탕으로 기초부터 찬찬히 다져보자!라는 목표가 있었다.

1-1. 목표 공유

백엔드, 프론트엔드를 나눠 각자 이번 프로젝트에서 원하는 것을 회의해보고, 간단하게 대략적인 입장을 공유하는 시간을 가졌다.

프론트 내부적으로 회의한 내용은 다음과 같았다.

1. Atomic 디자인 방식을 일부 반영해 컴포넌트 재활용 높이기
2. 정확한 server state 동기화 및 필요없는 API 호출 줄이기
3. 유지보수를 위한 개발 컨벤션 정형화 및 세부화
4. 비동기 요청 에러 관리 통일
5. 적절한 React Custom Hook 활용
6. LightHouse와 Sonar Qube로 성능 향상 고민

그리고 전체 팀회의 시간이 되어 다음과 같이 의견을 공유했다.

[백엔드] 
1. 다룰 수 있는 데이터양이 많았으면 좋겠다.
2. Kotlin을 활용해보고 싶다.
3. 사회적으로 기여할 수 있는 서비스를 만들면 좋겠다.

[프론트엔드]
1. React를 활용해 완성도 있는 개발을 진행하고 싶다.
2. 완성 후 성능 향상과 코드 구조화, 통일성에 중점을 두고 싶다.
3. 위와 같은 이유로 프로젝트의 규모가 너무 크지 않으면 좋겠다. (== 구현해야 하는 화면이 너무 많지 않으면 좋겠다.)

1-2. 기술 선정

공유한 의견을 바탕으로 어떤 기술을 쓸 것인지 협의를 거쳤고, React와 Kotlin을 활용한 웹앱 애플리케이션을 만들자는 결론이 났다.

만들 서비스를 먼저 정하고, 서비스 성격에 맞는 기술 스택을 정하는 것이 맞는 순서지만, 지난 시간동안 2-3개의 프로젝트를 거치면서 다들 서비스 기획에 많이 지친 상태였다.

내는 아이디어마다 이미 시장에 있거나, 6명이 하기엔 볼륨이 너무 작다는 컨설턴트님의 피드백이 있었다. (이러다가 스트레스성 탈모가 올 것 같다고 다들 우려했다)

2. 서비스 기획

2-1. 기획 과정

무려 2주 동안의 팀회의와 컨설턴트님, 코치님과의 무수한 대화를 거쳤다. 내 프로젝트처럼 열심히 같이 공유해주시고 자료도 찾아주시면서 정말 많은 도움을 주셨다.

매일매일 머리 부딪히며 했던 고민과 회의 흔적들.. (이것보다 더 많다)

프로젝트에 주어진 시간이 5주 정도였는데 2주가 되어도 모두가 동의하는 아이디어가 나오지 않아 다들 지치고 많이 힘들었다. 그러다 코로나가 끝난 뉴노멀 시대에서 주목받고 있는 외부 활동에 대한 기사를 우연히 보게되었다.

기사에서 다루고 있는 활동 중 하나가 바로 등산이었다.

1. 비용이 들지 않아 진입장벽이 낮다.
2. 작지만 확실한 성취, 눈에 보이는 성취라는 점에서 MZ세대의 취미활동으로 자리잡고 있다.
3. 남녀노소 즐길 수 있는 활동이다.

2-2. 주제 선정

팀원들 모두 해당 기사를 읽고 등산이라는 아이템에 흥미를 보였다.

1. 부모님들도 등산을 하신다.
2. 친구들 중 취미로 등산을 하는 애들이 실제로 늘어나고 있다.
3. MZ세대를 겨냥한 등산복도 많이 나오고 있다.
4. #오운완 #오하운이라는 테그로 인스타그램에서 등산 인증도 많이 한다.

etc ...

각자 나눈 의견을 바탕으로 등산을 중심으로 서비스 기획을 결정했고 각자 생각한 타겟층을 바탕으로 유저시나리오를 작성해오기로 했다.

2-3. 세부 기획

생각해온 타겟층과 유저시나리오를 공유했고 회의를 거쳐 기록, 동기부여, 안전 이 세가지를 중점으로 서비스를 기획하기로 결정했다.

🗓️ 기록

• 등산 모임 가입
• 등산 일정 등록 및 참여
• 사진 및 후기 기록
• 등산 트래킹 기록 저장 및 조회 (network 없이도 가능하게)

🚂 동기부여

• 완등 후 정상 위치 기준 3D 에셋부여
• 모임별 에셋을 통해 유니크한 산꾸미기 가능
• 모임별 랭킹
• 개인 랭킹

⛑️ 안전

• 실시간 위치 공유
• 실시간 채팅

🧩 기타

• 일정 알림
• 산정보 검색

2-3. MVP 및 고도화 방안

우선 MVP(Minium Viable Product)에 담을 기능을 추리고 이후 고도화 방안을 의논했다. 개발 시간이 매우 촉박했지만 고도화 기능 중 하나였던 실시간 채팅과 위치공유까지 구현할 수 있었다.

3. 기능 분담

3-1. Kotlin과 React

디바이스의 OS에 접근해야 하는 기능과, 웹뷰로 구현 가능한 기능을 분담했다.

산행의 특성상 네트워크가 터지지 않는 곳에서도 경로 기록을 했어야 했는데, 오프라인 상황에서도 기기의 위치 정보를 불러올 수 있게 Kotlin으로 해결할 수 있었다.

한편 React 웹뷰의 장점은 유저가 앱을 업데이트 할 필요 없이 서비스의 변경사항을 빠르게 반영할 수 있다는 것이다. 그래서 주로 유저에게 데이터를 보여주고 변경사항이 많은 부분은 웹뷰를 통해 구현했다.

3-2. Frontend

프론트 공통으로 담당했던 기능은 다음과 같다.

1. UI 디자인
2. Atom Component Props 설정
3. 담당 페이지 컴포넌트 제작

내가 담당했던 기능은 다음과 같다.

1. 실시간 채팅
2. React Query 도입
3. types 폴더 구조 관리
4. 무한스크롤
5. 채팅, 프로필, 일정 상세, 알림 페이지 CRUD

중간에 독감에 걸려서 며칠을 누워있었지만 이악물고 맡은 기능을 다 해냈다. 든든한 팀원들이 제 역할 +a를 해줘서 가능했다.

다음 포스팅은 개발하면서 맞닥뜨렸던 문제와 고민 과정에 대한 회고다.