부트캠프 마지막 프로젝트랑 학교 복학 일정이 겹쳐서 꽤 빡빡한 기간이었다. 게다가 기획, 디자인, 백엔드랑 협업하는 게 처음이라 걱정도 됐는데, 다행히 팀원들이 잘 이해해 주고 적극적으로 참여해 줘서 무사히 마무리할 수 있었다.
프로젝트 흐름을 보니까 초반엔 기획이랑 디자인 파트가 바빴고, 그다음 백엔드에서 API를 만들면 프론트가 기능을 구현하는 식으로 진행됐다. 초반엔 뭐부터 해야 할지 좀 헤맸는데, 다음번에도 협업을 하게 된다면 아래 것들을 먼저 신경 써야겠다고 느꼈다.
프론트엔드는 초반에 뭘 해야 할까?
- 디자이너한테 와이어프레임 받아서 화면 레이아웃 퍼블리싱
- 프로젝트 기획서랑 와이어프레임 보고 API 설계서 작성 참여
- 초반에 학교 일정 때문에 API 설계 회의에 못 들어갔는데, 나중에 보니까 API 수정이 필요해서 요청하는 상황이 생겼다. 초반부터 참여하는 게 중요하다.
- 핵심 기능(MVP)에 대한 컴포넌트 구조 설계
- 주요 기능을 미리 어떻게 구현할지 고민해 두면 나중에 훨씬 수월하다.
- 필요한 기술 스택 미리 공부하기
- 이번에 STOMP 프로토콜로 채팅 기능을 구현했는데, 기능 만들면서 공부하려니 시간이 너무 부족했다.
발생한 이슈
- 반응형 설계할 시간 부족
- 웹소켓 기반 질문 좋아요 기능 상태 관리 문제
- 좋아요를 많이 받은 질문 순으로 정렬하는 기능이 있었는데, 사용자가 같은 질문에 좋아요를 여러 번 눌러도 상태 반영이 제대로 안 되는 문제가 있었다.
- GPT에 너무 의존한 바이브 코딩
- 막판엔 시간이 부족해서 GPT한테 많이 의존했는데, 코드가 많아지면서 GPT가 전체 맥락을 이해 못 하는 경우가 많았다. 결국 나중에 다시 처음부터 뜯어고쳐야 하는 상황이 자주 발생했다.
아쉬웠던 점
- 마지막엔 GPT에 너무 기대서 작업했다.
- 시간에 쫓기다 보니 기본적인 원칙을 지키지 못하고 문서화도 제대로 못 했다.
- 기능 구현 리스트를 미리 정리하지 않고, 즉흥적으로 이슈 티켓을 만들면서 개발해서 주먹구구식으로 진행한 느낌이었다.
- Tailwind CSS 사용 방식의 문제
- JSX에 스타일을 바로바로 넣다 보니 코드가 너무 지저분해졌다.
- 디자이너가 없는 경우: TailwindCSS나 ShadCN을 바로 적용하면 빠르게 개발할 수 있음.
- 디자이너가 있는 경우:
- Styled-components를 사용하거나
- TailwindCSS 플러그인을 활용하는 방식이 더 나을 것 같다.
개선할 점
- GPT는 어디까지나 보조 도구로만 활용하기
- 프로젝트 초반에 기획서를 꼼꼼히 읽고, 기능을 미리 이슈 티켓으로 정리하기
- 미리 발행한 이슈 티켓을 기반으로 브랜치를 만들고 작업하는 방식 적용하기
잘한 점
- GitHub Actions 설정해서 빌드 실패하면 merge 못 하게 막은 것
느낀 점
- 디자이너랑 백엔드 개발자의 언어를 이해할수록 소통이 훨씬 쉬워진다.
- AI 시대에는 특정 분야만 잘하는 것보다, 내 분야를 탄탄히 하면서 협업하는 다른 분야도 잘 이해하는 게 중요하다고 느꼈다.
이번 프로젝트를 하면서 실시간 웹소켓 통신, 상태 관리, 서버와의 효율적인 데이터 교환 방식을 깊이 고민해볼 수 있었다. 협업 과정에서 역할 분배, 기술 학습 타이밍 조정 등의 개선점이 남았지만, 실전 경험을 쌓고 문제 해결 능력을 키울 수 있었던 값진 시간이었다.
