먼키 서비스(테이블오더, 키오스크, 앱)를 사용하는 가맹점 사장님들을 위한 웹 기반 관리자 사이트를 React, TypeScript, Next.js 기반으로 설계·구현했습니다.
서버 구성부터 디렉토리 아키텍처 설계, 핵심 기능 개발 및 배포까지 전 과정을 주도하였으며, 주요 기능으로는 대시보드(차트), 매출 관리, 매장 관리, 메뉴 관리, 운영기기 관리, 공지사항 등이 포함됩니다. 기술적으로는 Zustand를 이용한 상태 관리, Emotion 기반 스타일링, React Router 기반 라우팅, 그리고 Next.js 14(App Router)의 SSR/SSG 구조를 적용하였으며, 테스트 환경(Jest, React Testing Library)과 린팅 자동화(Husky, ESLint, Prettier)도 직접 구성하였습니다. 배포는 Vercel을 사용했습니다.
본 프로젝트에 착수하기 전 1년간의 휴식기 이후 복귀한 상황이었기에, 프레임워크 및 라이브러리의 버전업에 따른 러닝커브를 예상했으나, AI 도구를 적극 활용하여 빠른 시간 내 기술 변화에 적응할 수 있었습니다. 예를 들어, Next.js 14의 App Router 구조나 Emotion의 스타일링 최적화 방식 등을 실시간 예제 기반으로 학습하며, 팀 내에서 가장 빠르게 적용하고 공유하는 역할을 맡았습니다.
또한, 프로젝트 과정 중 NestJS 및 Go 기반으로 개발된 백엔드 API 플로우를 분석하며 프론트엔드-백엔드 간의 연결을 더 깊이 이해하려 노력했습니다. 특히 Swagger 문서에 예제 데이터가 부족한 상황에서 실제 API 응답 JSON 데이터를 기반으로 AI를 활용해 프롬프트를 구성하고, 이를 통해 프론트엔드에서 자동 타입 정의 및 Axios API 모듈을 생성하는 워크플로우를 구축했습니다. 이 작업은 백엔드 구조 이해뿐 아니라, 문서화와 협업 기준 정립에도 기여하였으며, 결과적으로 프론트 개발 속도와 팀 전체 생산성 향상에 긍정적인 영향을 주었습니다.
이 프로젝트는 단순히 프론트엔드 구현에 그치지 않고, AI를 활용한 기술 습득 및 자동화, 백엔드와의 연계 이해, 그리고 실질적인 협업 개선을 통해 더 넓은 시야를 가진 프론트엔드 개발자로 성장하는 기반이 된 경험이었습니다.
더보기