[개발자의 품격] 팀 프로젝트 4기 회고

안녕하세요, 저는 2022년 5월부터 시작하여 3개월간 개발자의 품격 4기에서 팀프로젝트를 진행했던 시간에 대해 회고를 작성해보려고 합니다.

 

개발자의 품격을 시작하게 된 계기

처음엔 사이드 프로젝트에 대한 목마름이었습니다. 또한 서비스의 초기 설계부터 개발을 완료하고 배포하는 것 까지 풀싸이클을 경험해 보고 싶다는 생각을 하고 있던 중에 개발자의 품격 공고를 확인하고 지원하게 되었습니다. 기술 스택이 프론트는 Vue, 백엔드는 Node로 정해져 있어 React를 메인으로 공부하고 있던 저에게는 조금 고민이 되기도 하였지만 새로운 프레임워크를 접하는 게 더욱 좋은 경험이 될 것이라고 생각하여 지원했고 합격 통보를 받게 되어 본격적으로 시작하게 되었습니다. 

 

첫 만남

개발자의 품격 첫 시간에는 줌을 이용하여 멘토님과 모든 참가자분들이 모이는 시간을 가지게 되었습니다. 앞으로 3달간의 시간이 어떻게 진행될지를 전해 듣고 바로 팀 선정을 하게 되었습니다. 저는 2팀으로 선정이 되었으며 과거에 같은 교육프로그램을 들어서 알고 있던 분이 계셔서 조금 편안하게 시작할 수 있었던 것 같습니다. 팀 선정이 끝난 후에, 팀끼리 모임을 했습니다.. 각자 자기 소개를 하고 서로에 대해 질문을 하며 알아가는 시간을 가지게 되었습니다. 각자 어떤 프로젝트를 해봤는지, 프로젝트에서 어떤 역할을 하고 싶은지를 나누고 팀프로젝트의 첫 시작인 아이템 선정에 대해 어떻게 할 지 이야기를 나누며 첫 만남을 마무리하게 되었습니다.

 

아이템 선정

처음에는 아이템 선정 시간을 가지게 되었습니다. 저희는 아이템 선정에 있어서 현실적인 아이템을 고르는 것을 목표로 하였습니다. 프로젝트 기간이 3개월이기 때문에 욕심을 부리기 보다는 차라리 핵심 기능을 제대로 구현하기로 했습니다. 고려 사항은 아래와 같았습니다.

 

고려 사항

- 왜 선택했는지 (선정 이유/기획 의도)

- 왜 필요한지?

- 기존의 어떤 문제를 해결할 수 있는지?

 

참고 키워드 - 창의력/신선도/희소성/사회 기여/수익성/사업성/현실성/매력/심플함/틈새 시장

 

저희는 이런 아이템들을 생각해 봤습니다.

- 주니어 개발자에게 친화적인 스터디용 소셜 서비스

- 스토리텔링, 테마 기반의 여행지 코스 추천 서비스

- 위치 기반의 공연 정보 제공 및 통합 티켓 발급 서비스

- 결정을 잘 하지 못하는 사람들을 위한 투표 기반 서비스

- 무명 시인(작가)들을 위한 글을 쓸 수 있는 서비스

- 50대 이상 시니어분들을 위한 친구 찾기 서비스

- 온도별 옷 추천, 커뮤니티 서비스

- 모임원 실시간 위치 공유 서비스

- 상황에 맞는 말, 표현등을 알려주는 서비스

- 주변 사람에게 하기 어려운 속 이야기를 털어 놓을 수 있는 공간을 제공하는 서비스

- 요리에 친숙하지 않은 사람들을 위해 요리 레시피를 제공해주는 서비스

- 팝업 스토어에 대한 정보를 한 곳에 모아 이용할 수 있는 서비스

 

위의 아이템들 중에서 팀원들의 투표를 통해 최종적으로 선택한 아이템은 아래와 같습니다.

- 50대 이상 시니어분들을 위한 친구 찾기 서비스

- 모임원 실시간 위치 공유 서비스

- 결정을 잘 하지 못하는 사람들을 위한 투표 기반 서비스

벤치마킹

저희가 선택했던 아이템들과 비슷한 목적으로 시중에 나와 있는 제품들을 조사하여 벤치마킹을 진행하였습니다. 최소 3가지 이상의 경쟁사/유사 서비스 제품을 분석하기로 하였고 해외와 국내를 구분하여 조사하였습니다. 제품별로 조사한 내용은 아래와 같습니다.

 

경쟁사 제품별 조사 내용

- 기능/서비스 목록 작성

- 사용자 조사

- 채널별 사용 점유율

- 시장 조사

각 서비스별로 주요 기능과 사용자 후기를 조사하면서 어떤 기능은 우리의 서비스에도 필수로 넣어야 할지, 어떤 기능들을 더 추가하면 사용자들을 만족시킬 수 있을지 조사하는 시간이었습니다. 

기능/서비스 설계

저희는 멘토님의 피드백도 받고 팀원들끼리 회의를 진행한 후에 모임원 실시간 위치 공유 서비스를 확장하여 혼행 (혼자 여행)하는 사람들을 위한 서비스를 만들기로 결정하고 벤치마킹도 간단하게 다시 진행하였고 기능/서비스 설계를 시작했습니다. 기능 서비스 설계에서는 명확한 사용자 타겟을 정하고 기능 목록을 작성하기로 하였습니다. 각 서비스별로 사용자 분석, 기능 목록, 사이트 맵을 작성하였습니다.

 

사용자 분석

- Primary User, Secondary User

- 페르소나

- 정량 조사 / 정성 조사

- 고객 그룹화

- User Flow Diagram

 

기능 목록

- 필수, 옵션으로 분리

- 사용자 그룹별로 어떤 기능 제공

- 우선순위 정리

- 기능 이름의 레이블링도 중요

 

사이트 맵 (메뉴 구조)

- 실제 보여지는 메뉴 + 기능으로 정리

- 서비스에서 제공하는 컨체르르 분류하고 메뉴별로 나누는 작업

 

UI 설계

기능/서비스 설계까지 마친 후에 UI 설계를 진행하게 되었습니다. 저희는 와이어프레임을 만들어 내는 것을 목표로 잡았습니다.

와이어 프레임을 작성하면서 고려했던 부분은 아래와 같습니다.

 

와이어 프레임 설계시 고려할 부분

- 해상도(스크린 사이즈)에 따른 레이아웃 고려

- 기능의 중요도/우선 순위에 따라 제작

- 피그마, ppt, 종이 다 괜찮음

- 핵심이 되는 화면은 반드시 설계

- 이 화면에는 어떤 데이터 필드가 들어갈 것인지 정의

- 3개월 동안 구현 가능한 목표에 맞게 작성

- 필요한 기능이 모두 들어가 있도록 잘 그리는것이 제일 중요

- User flow에 따른 화면 설계

- 레이블링 시스템 잘 활용하기

 

제작했던 와이어 프레임은 아래 링크에서 확인하실 수 있습니다.

- 피그마 링크

DB 설계

UI 설계를 마친 후에는 데이터 베이스 설계를 시작했습니다. 저희는 팀원 모두가 함께 DB 설계를 진행하기 위해 erdcloud라는 툴을 이용하였습니다. DB 설계시에 고려했던 부분들은 아래와 같습니다. 

 

DB 설계시 고려사항

- 성격이 다른 이미지는 별도 테이블로 분리

- 관심사 테이블 별도 생성

- 좋아요 기능도 DB에 기록, 찜 해제할 때도 상태 + 찜 해제 날짜 관리 고려

- 지역은 별도의 필드로 관리하기

- 거의 모든 테이블에 날짜/시간은 필수로 넣기 (생성/수정/삭제)

개발 셋업 및 화면 레이아웃

DB 설계까지 마치고 본격적으로 개발에 들어가기 앞서 프론트/백 개발 셋업과 화면 레이아웃부터 진행하였습니다. 저희가 진행했던 개발 셋업은 아래와 같습니다

 

프론트

- Vue 3 + Quasar

- Eslint + Prettier

 

백

- API Router 템플릿

- Postman 문서화

- MySQL 스키마 구성

- Eslint + Prettier

 

인프라

- 오라클 클라우드 서비스 서버 구축

- 오라클 클라우드 DB 서버 구축

- 임시 도메인 연결

 

빠른 개발을 위해 Quasar라는 CSS 프레임워크를 사용하기로 결정하였고 먼저 퍼블리싱부터 진행하게 되었습니다.

구현

역할

프로젝트 설계를 마치고 본격적으로 구현을 시작하는 단계에 오게 되었습니다. 저는 백엔드 개발을 맡아 프로젝트를 구현하게 되었습니다. 이전에도 개인 프로젝트를 하면서 간단하게 서버를 개발했던 적이 있는데 조금 더 경험을 해보고 싶어서 자원하게 되었습니다. 그래서 5명중 3명은 프론트 개발, 저를 포함하여 2명은 백엔드 개발을 하게 되었고 비록 역할은 나누었으나 이슈가 있으면 함께 고민하는 식으로 진행했습니다.

 

기술 스택

Node.js로 백엔드 개발을 하게 됨에 따라 Express를 프레임워크로 사용하게 되었고 DB는 일반적으로 많이 사용하는 MySQL을 사용하게 되었습니다. 그 외에 사용한 라이브러리들은 아래와 같습니다.

 

- prettier

- eslint

- axios

- cors

- dotenv, cross-env

- dayjs

- forever

- jsonwebtoken

- morgan

- multer

- node-cron

- nodemailer

- socket.io

 

협업 도구

프로젝트 개발중에 사용했던 협업 도구들은 아래와 같습니다.

 

- Git/Github

- ERDCloud

- Postman

- Trello

- Figma

 

담당 기능

제가 백엔드 개발에서 맡았던 부분은 eslint/prettier 셋업, 라우터 셋업, jwt 인증 미들웨어, 밥상 API, 매너 평가 점수 API, 프로필 API, 매너 평가 질문지 API SNS 로그인(카카오), 이미지 파일 저장, 리뷰 알림, 실시간으로 밥상 참여 여부를 알 수 있도록 소켓 연동, node-cron을 이용하여 1분 단위로 모집 기간이 지난 밥상은 모집 완료 상태로 변경 등을 구현하였습니다.

개발 이슈

1. express에서 req.body값을 참조할 때 undefined로 값을 받는 경우

- app.use(express.json()) 미들웨어를 사용했으나 undefined로 값이 와서 문제가 있었던 경우였습니다. 코드를 천천히 보니 api router보다 app.use(express.json())이 아래쪽에 있어서 미들웨어 실행 전에 라우터가 실행이 되어서 생겼던 문제였습니다. 미들웨어를 모두 실행하고 router가 실행하도록 순서를 바꾸어 해결할 수 있었습니다.

 

2. dotenv 환경변수 적용 안되는 에러

- 위와 같이 dotenv를 api router보다 아래에 작성하여 읽어올 수 없었던 에러였습니다. 코드 위치를 수정해주어 해결했습니다.

 

3. MySQL DB에서 function을 작성시 1418 에러

- SET GLOBAL log_bin_trust_function_creators = 1; 명령어를 적용하여 해결하였습니다.

 

4. multer 라이브러리 이용하여 이미지 파일을 서버에 저장하기

- 분명 이미지 파일을 클라이언트에서 넘겨주었지만 서버에서 사진을 받지 못하는 경우가 있었습니다. 이유를 찾아보니 imageUpload.single('file') single 메소드의 매개변수 명과 클라이언트에서 전송하는 formData 객체의 key 값이 일치해야 서버에서 파일을 받을 수 있었고 일치시켜주어 문제를 해결하였습니다.

 

5. MySQL에서 데이터를 가져올 때 시간이 -9시간으로 값이 받아와지는 경우

- DB의 시간이 UTC로 가져와지는 문제가 있었습니다. 이를 해결하기 위해 mysql.createPool의 옵션으로 timezone: "Asia/Seoul"을 넣어 타임존을 변경하여 해결할 수 있었습니다.

 

6 클라우드에 이미지 파일에 접근하려고 하면 .html 파일이 받아지는 에러

- 로컬 환경에서 테스트를 했을 때는 이미지를 정상적으로 참조할 수 있었지만 클라우드 환경에서는 이미지가 아닌 .html 파일을 참조하게 되었습니다. 이는 reverse proxy 설정을 해주지 않아서 생겼던 문제였습니다. https://nicespoons.com/static/images/[image-name].png 에 접근을 하게 되면 443포트로 접근하기 때문에 .html 파일이 내려오게 되었습니다. 이 문제를 해결하기 위해 nginx의 세팅파일인 conf 파일에 /static으로 요청이 올 경우에는 노드 서버의 포트번호인 3000으로 넘겨주도록 설정하여 해결할 수 있었습니다. 

최종 발표

개발을 모두 마치고 최종 발표를 했던 영상입니다. 저희 팀은 영상의 처음에 바로 나옵니다.

영상 링크

 

프로젝트를 통해 배운점

개발자의 품격 4기를 통해 진행했던 팀프로젝트를 통해 배웠던 가장 소중한 것은 아무 것도 없이 시작하여 서비스를 배포하는 것 까지의 풀싸이클을 경험하는 과정이었습니다. 개발자라고 하여 단지 개발에만 목적을 두는 것이 아닌 비즈니스적인 관점으로 서비스를 분석하고 설계하는 과정을 통해 개발 역량 외에도 서비스를 비즈니스적인 관점으로 바라볼 수 있는 안목을 많이 기를 수 있었습니다. 이를 실제 개발하는데 접목한다면 더욱 좋은 서비스를 만들어가는데 도움이 될 것이라고 생각합니다. 또한 팀원들과 함께 프로젝트를 시작부터 끝까지 의견을 공유하며 진행함으로써 마치 소규모의 스타트업에서 서비스를 런칭하는 것과 같은 힘들면서도 짜릿한 경험을 했던 것 같아서 너무 좋았습니다.

마무리

사실은 기술적으로 아쉬운 것들이 많은 3개월이었습니다. 조금 더 잘했다면, 구현에 능숙했다면 더 많은 기능들을 구현하고, 더욱 안정적인 서비스를 만들 수 있었을 탠데 하는 아쉬움이 있었습니다. 하지만 이 아쉬움은 긍정적으로 더욱 공부를 열심히 하게 되는 자양분이 된 것 같아 만족스럽습니다. 또한, 지금의 경험을 통해 앞으로 진행하게 될 사이드 프로젝트에서는 단지 기술을 연습하는 정도가 아닌 실제 시장에서 평가를 받을 수 있도록 제대로 런칭하는 그런 프로젝트를 진행해 보고 싶다는 생각이 많이 들었습니다. 언젠가는 제가 회사의 대표가 되어 제 서비스를 개발하거나 뜻을 함께할 수 있는 스타트업에 들어가 회사와 함께 성장하고 싶다는 꿈이 생겼습니다. 너무나 뜻깊고 소중한 3개월이라는 시간이었습니다. 읽어주셔서 감사합니다.