“껨부” 프로젝트 회고록
목차
- 프로젝트 개요
- 프로젝트 경과
- 프로젝트를 하며 느낀 점
- 앞으로의 과제
프로젝트 개요
이 프로젝트는 프론트엔드 데브코스의 과정 중 일환으로, 주어진 API를 사용하여 SNS의 형태를 띄는 웹 어플리케이션을 제작하는 것이 목표였다. 테스트는 주로 컴퓨터의 웹브라우저로 하였지만, 개발상의 편의성을 위해 모바일 환경에서 구동한다 가정하고 레이아웃을 설계하였다. 기간은 6월 8일~6월 22일로 상당히 촉박한 편이었다.
껨부 프로젝트는 웹에서 게임 구인을 하기 위한 어플리케이션이다. 현재 많은 게임 시스템에는 유저들이 원하는 게임 파티를 찾아가거나 맞는 사람을 찾아가기 어렵다는 문제가 있다. 껨부는 게임별 카테고리와 게시물 태그, 유저 댓글과 게시글 추적을 통해 게이머들이 자신이 원하는 파티를 찾기 쉽도록 도와줄 수 있다.
이번 프로젝트에서 큰 기능으로는 로그인, 채널 즐겨찾기, 게시물 작성/편집/삭제, 유저 프로필 전시/ 삭제, DM, 알람 기능 등이 있었다. 이 중 나는 게시물 작성, 편집과 태그를 담당했다.
사용한 주요 기술스택은 React, React-Router, Material UI, emotion styled 등이 있다. 패키지 매니저로는 NPM을 사용하였다.
프로젝트 경과
초기: 6월 8일부터 6월 11일까지는 거의 프로젝트 목표와 설정, 기술 스택, 컨벤션 등을 정하는데 소모했다. 회의가 그리 오래 걸리지는 않을 거라는 당초의 예상과는 달리, API를 이해하고 쓸 수 있는 기술들을 찾아보는 과정에서 상당한 시간을 소모하였고, 초보적인 개발자들이 모여 프로젝트의 전체적인 윤곽을 잡기까지는 꽤나 긴 시간이 필요했던 것 같다.
처음에 설정된 프로젝트 목표는 PC방 평가 사이트였다. 서비스에서 PC방 주인과 유저들이 소통할 수 있는 공간을 설정하면 SNS로서의 목표를 달성할 수 있다 생각하였다. 하지만 API의 한계와 채널 설정의 모호함 외에도 SNS로서의 기능이 부차적인 기능이 되었기에 초기 목표는 폐기하고 현재의 프로젝트 목표로 선회하였다.
개발 프레임워크 선택은 비교적 빠르게 이루어졌다. 팀원 다수가 익숙하다 생각하고 프로젝트를 취업 포트폴리오에 사용할 것을 가정했기 때문에, 기업 다수가 사용하는 React를 사용하기로 했다. Vue와 React양쪽에 대해 아직 심도있게 사용하지 않았기 때문에 현 상황에서는 최선의 판단이었다 생각한다.
디자인 프레임워크 선택은 다소 시간이 걸렸다. 디자인 프레임워크를 사용해본 팀원들이 몇 없기도 했거니와 프레임워크별 차이를 설명할 수 있는 경우도 별로 없었다. 때문에 디자인 프레임워크 선정은 멘토님의 조언을 바탕으로 어둠을 더듬어가며 골라냈다. 결과만 보면 Material UI는 사용이 꽤나 직관적이고 자유도가 높았으며 우리의 디자인에 잘 어울렸다. 하지만 생각치도 못한 부분에서 제한 사항이 생기기도 하거나(이벤트 인터셉팅 등) 짧은 일정에서 새 프레임워크를 배우기 위해 시간을 할애해야하는 문제가 생기기도 했다. 결론적으로 보다 많은 디자인 프레임워크를 사용하여 원하는 것을 골라낼 수 있는 능력이 있다면 좋겠다는 생각을 했다.
페이지 분류와 역할 분담은 생각보다 느리게 이루어졌다. 과제의 요구사항을 생각하며 페이지를 나누고, 이미 있는 레이아웃을 참고하며 진행하니 페이지 분류 자체는 빠르게 진행되긴 했다. 하지만 각자 최선이라 생각하던 페이지의 세세한 기능과 레이아웃이 달랐고, 이를 조정하는 시간에서 이틀 정도를 소모했던 것 같다. 우리는 아직 필요한 모든 기능들(Router나 전역 API 설정 등)을 파악하지 못했고, 비슷한 페이지끼리 묶어서 개발하면 좋겠다는 판단 하에 페이지 별로 역할 분담을 하기로 했다. 나는 강의 때 배운 custom hook 과 form 제출을 복습하고자 게시물 작성, 편집을 담당했다.
프로젝트 초기에 생각보다 오랜 시간을 잡아먹었고, 6월 20일부터 22일까지는 각자의 결과물을 합치고 테스트를 해야했던만큼 실제로 주어진 작업시간은 12일부터 19일까지 총 9일로 꽤나 짧은 시간이었던 것 같다. 아직도 프로젝트 초기를 좀 더 빨리 넘길 수 있지 않았을까 하는 아쉬움이 있다. 어쩌면 여럿이 함께 일하기 위해서 이 정도 시간은 필요할지도 모르겠다.
중기: 6월 12일부터 6월 19일까지는 팀원 각자가 맡은 페이지를 개발하는데 집중했다. 코어 타임 시작과 끝에서 각자가 가진 기술적 여러움이나 합의가 필요한 부분에 대해 토론했고, 코어 타임 중간중간에도 막힌 부분에 대해 상의하며 풀어갔다. 여럿이서 개발하는 보람을 느낄 수 있어서 좋은 부분이었다.
하지만 개인적으로 맡은 부분에서의 개발은 그리 순조롭지 않았다. 디자인 프레임워크에 대해 알아가며 코딩하다 수업 때 배운 내용을 적용 못하는 구조로 만들어졌을 때 한번, 제출 양식에 변경이 생겼을 때 다시 한번 페이지 전체를 갈아엎었기 때문에 같은 기능에 대해 코딩을 3번 해서 시간을 상당히 많이 소요했다. 단순히 경험 부족으로 치부하기에는 다른 팀원들의 개발은 꽤나 순조로워 보였기 때문에 초조한 시간이었다. 연습을 통해 시행착오를 줄여야한다는게 느껴졌다.
특히 생각 이상으로 강력한 디자인 프레임워크의 기능도 생각치 못한 골치였다. 수업 때 배운 내용대로 코딩을 해놓아도 나중에 MUI 공식 문서를 보면 더 간결하고 안정적인 기능을 제공해준 적이 많았고, 해당 양식으로 리팩토링 하는 과정에서 소위 말하는 현타가 오기도 했다. 이 외에도 Select 컴포넌트와 특히 오랜 시간 동안 씨름을 했던 것 같다. 이 컴포넌트는 이벤트 인터셉팅 외에도 자잘하지만 거슬리는 기능들이 매우 많았고, 이 컴포넌트를 배우는데 꼬박 반나절을 썼던 기억이 난다. 아직도 이 컴포넌트를 제대로 다룰 자신은 없는 것 같다.
18일 19일 양일 간에는 TagList 컴포넌트를 만드는데 썼지만, Select 컴포넌트 내에서 Seletcted 태그들을 deletable 옵션을 사용해 delete 버튼을 이용해 지우는 기능은 구현하지 못했다. 정확히는 기능 자체는 구현이 가능했지만, Focusout 이벤트가 필요한 ErrorCheck 기능과 양립이 불가능해 기능은 구현했지만 사용하지 못하게 되었다. 이번 프로젝트의 가장 아쉬운 부분 중 하나이다.
종합적으로 보면 아직은 능력이 부족해 원하는 페이지를 빠르게 만들어내기 힘든 것 같다. 프롭의 흐름을 설계하는 능력을 더 길러야할 것 같다고 느꼈다.
말기: 6월 20일부터 22일까지는 기능들을 합치고 조정하는 시간을 가졌다. Router 설정을 조정하고, 전역적으로 필요한 정보나 다른 페이지들에 필요한 정보들을 넘기거나 받는 작업들을 실행했다. 주로 디버깅과 관련된 작업이다보니 길게 쓸 거리는 없지만, 뭔가 막판이 되어서 그런지 긴장감이 좀 풀어졌었다. 팀원들간의 대화도 잘 안 따라가지고 눈 앞의 버그를 고치는데에만 집중해서 후회되는 시간이 많다. 하지만 내 작업물이 다른 팀원들의 작업물에 영향을 주는게 신기한 경험이기도 했다. 내가 작성한 게시물이 게시물 목록에 표시될 때는 정말 기뻤다.
한편으로 이때 다른 팀원분들께서 막판에 많은 기능을 추가하는걸 보고 놀라기도 했다. 기본적인 기능을 다 구현한만큼 슬슬 디자인에 공을 들여도 될 것 같다는 생각이 들었지만, 이런 방향성도 좋다는 생각이 들어 계속했던 것 같다.
제출 전날부터는 QA라 하기에는 민망하지만 여러 기능들을 점검해보면서 개선할 점이나 고쳐야할 점들을 찾는데 중점을 두었다. 이미 많은 파일들을 하나의 브랜치에서 고치는 혼란스러운 상황이었기 때문에 나까지 파일들을 고치다가는 분명히 Conflict가 났을 것이다…
프로젝트를 하며 느낀 점
- 디자인 프레임워크는 매우 강력하다.
사실 MUI를 사용하기 전에는 과제 면접에서 디자인 프레임워크가 금지되는지 이해를 못했는데, 이번에 사용해보니 왜 좋은지 알 것 같다. 개발 과정에서 설정해줘야할 법한 기능들은 대부분 설정이 되어있고, 커스터마이징도 프롭을 통해 엄청 편하게 할 수 있었다. 기능적으로는 TextField, Select 등이 그러했고, 디자인 적으로는 Chip이나 SX 프롭 등이 편리했던 것 같다. 한편으로는 짧은 개발 기간 동안 MUI 공식 문서를 흝는 시간도 길어서 불편하기도 했다.
- 새로 배운 것들을 복습할 필요가 있다.
팀원들과 기술적인 이야기를 하면서 내가 지금까지 알고있던 지식들에 구멍이 많다는 것을 느꼈다. 특히 context api나 react router 같은 경우에는 거의 인터넷에 의존하다싶이 하며 필요한 것들을 찾아갔다.
- 팀원들의 회의는 누군가가 항상 기록해야한다.
회의 과정에서 결정했던 사안을 자꾸 반복해서 이야기하는 경우가 많았다. 팀원 중 하나가 회의록을 작성해서 같은 일에 대해 반복적으로 얘기하는 것을 줄여야한다고 생각했다.
- 개발을 하는데는 코딩말고도 여러가지가 필요하다.
다른 사람들과의 의사소통 능력 뿐만 아니라 현재 할 일을 정리하는 능력, 문제점을 파악하는 능력 등등이 부족하다는 것을 느꼈다.
- 잘 모를 때는 많이들 하는 것 같으면 따라한 다음에 이유를 묻고, 아니면 이유를 묻고 사용해보자
이번 Branch 전략은 마지막에 좀 어그러지긴 했지만, 협업을 하는 과정에서 어떻게 유용하게 사용할 수 있는지 느낄 수 있어 좋은 체험을 했던 것 같다. 따라해보는 과정에서 유용성도 알고 결과적으로 멘토님께 고칠 점도 들었기 때문에 다음에는 Branch 전략을 더 잘 쓸 수 있을 것 같다.
- 시간관리가 아직도 어렵다
이번 프로젝트에서 시간관리에 대실패 하면서 결과적으로 산출량이 좀 적었던 것 같다. 특히 PR 리뷰의 경우 거의 안 했기 때문에 다른 사람의 코드는 거의 모르는 상태로 프로젝트가 끝나 버렸다.
앞으로의 과제
- 업무 수행의 체계성 - GitHub Action, Issue 와 회의록 작성, 노션을 활용한 현재 할일과 수정사항 정리를 통해 팀원들과 문제와 진행사항을 공유해야한다는 것을 느꼈다.
- React hook 과 작동 방식에 대한 공부 - TagList의 선택적 렌더링에서 느낀 부분으로 React 컴포넌트의 생명주기에 대해 자세히 알지 못하면 최적화를 하기 매우 힘들다는 것을 느꼈다.
- React Router, Fetch, Context api, local Storage 에 대한 공부 - 이 네 부분에 대한 이해가 특히 취약하다고 느꼈다.