벌써 중간발표?
벌써 중간발표 했다. 07.13 ~ 08.04 거즘 4주? 정도 작업을 했음. 4명이었던 팀원이 2명이 되어서 R&R도 엎어졌음.
공통 컴포넌트 개발하고 있었는데 그럴 시간 없고 빨리 페이지 개발하는게 좋다고 판단해서 우리의 목표는 모든 페이지 구현이었음.
중간발표에서 보여준 것
1. 핵심 기능
슬리드 투두는 사용자가 다양한 콘텐츠를 할 일 목록으로 관리할 수 있는 서비스임. 사용자는 목표를 설정하고, 각 목표에 맞는 할 일을 등록하며 진행 상황을 관리할 수 있음. 전형적인 투두리스트 구조를 기반으로 하지만, 목표 단위로 할 일을 묶어 관리할 수 있다는 점을 중심으로 소개했음.
이번 중간발표에서는 기본적인 CRUD 기능과 주요 페이지 개발을 완료한 상태로 시연을 진행했음. TanStack Query를 활용해 서버 데이터를 최신 상태로 관리하는 흐름을 보여주었고, React Hook Form과 Zod를 사용해 사용자 입력값을 검증하는 방식도 함께 설명했음.
아직 디테일적인 부분이나 예외 처리 측면에서 보완할 부분은 남아 있지만, 발표 시점에 목표했던 핵심 기능과 전체 페이지 흐름은 무리 없이 시연할 수 있었음.
2. 맡은 역할
이번 프로젝트에서 나는 Orval API 세팅, BFF 패턴 적용, TanStack Query Prefetch 구조 설계, 그리고 CRUD 페이지 구현을 맡았음. 다른 팀원분들은 인증과 인가, 캘린더 기능, 그 외 주요 페이지들을 나누어 작업해주셨음.
가장 주도적으로 기여한 부분은 TanStack Query의 Prefetch 구조를 설계한 것임. App Router 환경에서 SSR이 가능한 데이터 흐름을 만들기 위해 서버에서 사용할 query와 클라이언트에서 사용할 query를 분리해 관리했음.
React에서 했던 것처럼 단순히 API를 호출하는 것보다, NextJS에서 서버와 클라이언트의 역할을 나누고 데이터 흐름을 일관되게 설계하는 것이 중요하다는 점을 배웠음.
아쉬웠던 점
가장 아쉬웠던 점은 테스트 코드를 작성하지 못했다는 것임. 단기심화 과정에 참여한 이유 중 하나가 테스트 코드와 최적화를 제대로 배워보기 위해서였는데, 실제 프로젝트를 진행하면서는 일정과 기능 구현을 우선하다 보니 TDD 방식으로 개발하지 못했음. 남은 기간에는 테스트 코드와 성능최적화를 하며 리팩토링을 진행해볼 계획임.
또 하나 아쉬웠던 점은 Figma MCP 활용 경험임. 개발을 시작하기 전에는 Figma MCP를 활용하면 디자인을 빠르게 코드로 옮길 수 있을 것이라고 기대했음. 대시보드 페이지 작업에 적용해보았지만, 결과물을 그대로 사용하기보다는 수정하는 데 더 많은 시간이 들었음... AI가 생성한 코드를 이해하고 내 프로젝트의 구조와 스타일에 맞게 고치는 과정이 생각보다 쉽지 않았고, 내가 작성하지 않은 코드를 수정하다 보니 코드에 대한 만족도도 낮았음.
물론 Agent.md를 작성해 프로젝트 컨벤션과 AI 설정을 맞추려는 시도도 했음. 하지만 이번 경험을 통해 AI 도구를 잘 활용하려면 단순히 “시켜서 만드는 것”보다, 작업 범위를 작게 나누고 명확한 기준을 준 뒤 결과물을 검토하며 AI 설정을 수정하고 사용하는 방식이 더 중요하다는 것을 느꼈음.
남은 기간에 개선할 것
남은 기간에 가장 먼저 개선하고 싶은 부분은 테스트 코드 작성임. 아직 테스트 코드를 많이 작성해본 경험이 없어 어느 정도의 시간이 걸릴지는 예상하기 어렵지만, 단기심화 기간이 끝나더라도 꾸준히 보완할 계획임. Jest와 React Testing Library를 활용해 테스트 코드 작성 예정임.
그 외에도 애니메이션, 성능 최적화, 에러 처리 등 보완해야 할 부분이 남아 있음. MVP 발표 피드백에서도 애니메이션이나 추가 기능이 들어가면 서비스의 완성도가 더 높아질 것 같다는 의견을 받았음. 남은 기간에는 사용자 경험을 위한 개선점을 찾으며 보완할 예정임.
성능 최적화는 Lighthouse 지표를 기준으로 진행할 예정임. 현재 페이지별 성능을 확인한 뒤, 이미지 최적화, 불필요한 렌더링 제거, 초기 로딩 개선 등을 점검하면서 90점 이상을 목표로 개선해보려고 함.
개인적으로 배운 점
이번 프로젝트를 진행하면서 Next.js App Router 사용법에 대해 많이 배울 수 있었음. 기존에 Pages Router로 작업할 때보다 데이터 Fetch 방식이 더 유연하다고 느꼈고, Server Component와 Client Component의 역할을 나누는 기준도 조금 더 명확하게 이해하게 되었음.
성능 최적화에 대해서도 새롭게 배운 점이 많았음. 평소 Motion 라이브러리를 자주 사용했지만, LazyMotion을 사용하면 애니메이션 기능을 필요한 시점에만 로드해 초기 번들 크기를 줄일 수 있다는 점은 이번 프로젝트를 통해 처음 알게 되었음!
중간발표 이후에도 테스트 코드 작성, 애니메이션 개선, 성능 최적화, 에러 처리 등 아직 보완해야 할 부분이 많이 남아 있음. 남은 기간에는 강사님과 멘토님께 배운 내용을 실제 프로젝트에 적용하면서, 더 안정적이고 완성도 있는 서비스로 다듬어가는 것을 목표로 할 것임.
