기룡아 밥먹자

교내 식단 서비스 웹 프로젝트

2024년 10월부터 약 1년간 진행된 교내 식단 서비스 웹 프로젝트는 학교 기숙사 및 교내 식당의 식단 정보를 통합 제공하고, 학생들이 직접 리뷰를 작성하거나 메뉴 평점을 남길 수 있는 웹 플랫폼으로 개발되었다. 프론트엔드의 모든 전반 과정을 담당했으며, 디자이너가 부재한 상황에서 직접 UX/UI 설계와 화면 구성, 애셋 제작까지 전담했다. 초기에는 디자인에 대한 감이 부족했으나, 반복적인 개선을 거쳐 3차 구현에서 shadcn ui를 도입함으로써 UI 설계에 드는 시간과 노력을 크게 줄이고 서비스 로직 구조에 집중할 수 있었다.

개발 진행 과정

프로젝트는 1차부터 3차까지 세 번의 주요 구현 과정을 거쳤다.
1차 구현(2024.10.20~2024.11.20)은 웹 개발 입문 단계에서 진행된 첫 프로젝트로, 약 한 달간의 집중 개발과 일주일간의 실제 서비스 운영을 경험했다. 짧은 기간 동안 약 100명의 방문자가 있었지만, 학기 종료와 높은 서버비용(약 80달러)으로 인해 서비스는 일시 중단되었다.

2025년 8월에 착수한 2차 구현에서는 오류 처리와 로딩 상태 관리, 데이터 요청 최적화에 중점을 두었다. 단순한 axios 요청 구조를 React Router Dom의 Loader 함수 기반으로 변경하여 초기 접속 시 한 번만 API 요청이 이루어지고 이후에는 상태 전환만으로 화면이 변경되도록 설계했다. 또한 Tanstack Query를 도입해 로딩 상태를 시각적으로 명확히 보여주는 동시에 staleTime 설정을 통해 불필요한 중복 요청을 줄이며 페이지 전환 속도를 개선했다.

3차 구현(2025.09.29~2025.10.16)은 기능 확장과 구조 재정립의 단계였다. 이전까지 기숙사 식단 정보 중심이었던 서비스를 교내 식당(푸드코트) 메뉴와 리뷰 기능까지 포함한 통합 플랫폼으로 발전시켰으며, 홈·기숙사 식당·교내식당·리뷰·유저 페이지로 구성을 세분화했다. Next.js를 채택한 것은 식단 정보의 업데이트 빈도가 낮고 SSG 방식으로도 충분히 효율적인 구조를 구성할 수 있다는 판단 때문이었다. 이를 통해 SEO 개선, 초기 로딩 속도 향상, 캐싱 기반의 서버비 절감 효과를 동시에 얻을 수 있었다. 실제 3차 배포 이후에는 눈에 띄게 많은 트래픽과 사용자 반응이 확인되었으며, 특히 점심시간대 집중 트래픽 발생 시에도 오류 대응을 실시간으로 반영할 수 있었다.

기술적 접근과 구조 설계

Next.js 환경에서 App Router를 기반으로 렌더링 속도 문제를 분석하던 중, HTML을 직접 제공하지 않고 RSC(Rendering Streaming Component) 형태로 스트리밍 처리된다는 점을 발견했다. 이러한 구조 특성에 맞춰 독자적인 캐시 전략을 설계하여 정적 페이지 생성과 실시간 데이터 갱신 간의 균형을 구축했다. 이 과정에서 포착한 학습 내용은 별도로 정리하여 블로그 포스트로 공유할 계획이다.

또한 프로젝트의 확장성과 유지보수를 고려해 Feature-Sliced Design(FSD)을 적용했다. 메뉴 및 리뷰 기능을 모듈화하여 기능 단위로 분리하고, 폴더 구조를 기능 중심으로 정리함으로써 코드 재사용성과 일관성을 확보했다. 다국어 지원(next-intl), 카카오 로그인 연동, PWA 적용 등도 이루어져 사용자 접근성과 편의성을 강화했다.

문제 해결과 배움

개발 과정에서 Axios Wrapper 패턴을 도입해 동일한 방식으로 요청과 오류를 처리할 수 있게 되었고, 타입 안정성이 대폭 개선되었다. 또한 DTO(Data Transfer Object) 구조를 명시적으로 정의함으로써 API와 상태 간 데이터 교환의 일관성을 유지하고, 구조적으로 안전한 인터페이스를 설계할 수 있었다. 정적 페이지의 장점과 캐시 전략의 중요성을 직접 체득하며, 단순 UI 기반 개발을 넘어 서비스 전체의 구조적 효율을 고려하는 관점을 얻었다.

결과와 회고

1차 공개 당시 약 100명의 사용자와 5명 이하의 리뷰 작성자가 있었으나, 2차에서는 학기 종료와 학생 커뮤니티의 대체 채널 확산으로 관심이 다소 감소했다. 그러나 3차 배포에서는 교내식당 추가 및 리뷰 기능 확장으로 가장 높은 사용자 반응과 안정적인 퍼포먼스를 달성했다.

이 프로젝트는 단순히 식단을 보여주는 웹사이트를 만드는 단계를 넘어, 구조적 설계와 캐시 전략, 사용성 중심의 서비스 운영까지 아우르는 경험이었다. 소규모 프로젝트라 하더라도 명확한 설계 철학이 필요하며, 기술적 깊이를 쌓을수록 서비스의 완성도가 달라진다는 점을 체감할 수 있었던 의미 있는 과정이었다.