주제 선정 및 설계 배경
이번 미니 프로젝트는 “실제 서비스 환경에서 동작하는 웹 애플리케이션과 클라우드 인프라를 직접 설계하고 운영해보는 것”을 목표로 두었다. 단순히 화면(UI)을 만드는 수준이 아니라, 사용자가 웹 브라우저에서 서비스를 이용하고, 서버는 안정적으로 요청을 처리하며, 백엔드에서 수집·저장된 데이터가 클라우드 환경에서 자동으로 운영될 수 있는 구조까지 설계하고 구현하는 데 초점을 맞췄다.
프로젝트 개요 및 목표
이번 프로젝트의 주제는 “구내식당 메뉴 추천 및 정보 제공 웹 서비스”이다. 매일 반복되는 “오늘 점심 뭐 먹지?”라는 고민에서 출발하여, 사용자가 직관적으로 식당 정보를 확인하고, 메뉴, 가격, 위치 등을 한눈에 볼 수 있도록 하는 웹 서비스를 만들고자 했다. 이를 통해 단순한 클라이언트 개발을 넘어, 백엔드 API 서버, 클라우드 인프라, CI/CD 자동화까지 전체적인 서비스 구조를 직접 구축하는 경험을 쌓는 것이 목표다.
웹 아키텍처 설계
서비스의 프런트엔드는 React를 사용하여 제작하였다. 반응형 UI를 통해 데스크탑과 모바일 환경 모두에서 최적화된 화면을 제공하며, 사용자는 메뉴 이미지, 식당명, 가격, 주소 등의 정보를 직관적으로 탐색할 수 있다. 프런트엔드는 단순한 정적 페이지를 넘어 API 연동, 이미지 확대 모달, 터치 스와이프 지원, 반응형 레이아웃과 같은 기능을 포함하고 있어 사용자 경험을 풍부하게 만든다.
백엔드는 Spring Boot 기반으로 구현되었으며, REST API 형태로 메뉴 크롤링 데이터 및 식당 정보를 제공한다. 데이터는 일정 시간마다 자동으로 크롤링되어 갱신되며, 이를 통해 사용자는 항상 최신의 정보를 받을 수 있다.
클라우드 및 운영 환경 설계
이번 프로젝트는 단순한 로컬 개발에 그치지 않고, 실제 서비스 운영 환경을 모사하기 위해 AWS EC2 기반 쿠버네티스(Kubernetes) 클러스터를 구축하여 배포 및 운영까지 설계하였다. CI/CD 자동화를 위해 다음과 같은 파이프라인을 구성하였다:
- CI (Continuous Integration): GitHub Actions를 사용하여 코드를 push할 때마다 자동으로 Docker 이미지를 빌드하고 GitHub Container Registry(GHCR)에 푸시한다.
- CD (Continuous Deployment): Argo CD를 이용하여 Git 리포지토리의 변경을 감지하고, 자동으로 클러스터에 새로운 이미지를 배포한다.
이 과정에서 프런트엔드(React)는 Nginx 기반 정적 서버 이미지로, 백엔드(Spring Boot)는 JAR 실행 이미지로 각각 컨테이너화되었다. Ingress Controller를 활용하여 단일 도메인 하에서 / 경로는 프런트엔드로, /api 경로는 백엔드로 라우팅되도록 구성하여 실제 프로덕션 환경과 유사한 구조를 구현하였다.
결과 및 기대 효과
이번 프로젝트는 단순히 웹 페이지를 만드는 수준을 넘어, 클라우드 환경에서의 서비스 개발부터 운영까지 전 과정을 직접 경험했다는 점에서 큰 의미가 있다. 프런트엔드·백엔드 개발뿐만 아니라, CI/CD 자동화, 컨테이너화, 쿠버네티스 운영, API 게이트웨이 설계 등 실무에서 필수적인 기술 스택을 프로젝트에 적용하며 서비스 전체를 바라보는 시야를 넓힐 수 있었다.
'2025 현대오토에버 모빌리티 SW 스쿨(클라우드 2기) > 미니프로젝트' 카테고리의 다른 글
| [클라우드] GitOps + ArgoCD를 이용한 EC2 배포 과정 (+HA) (0) | 2025.09.30 |
|---|---|
| [클라우드] CI/CD 자동화 과정 (0) | 2025.09.30 |
| [React] 프론트엔드 설계 (0) | 2025.09.27 |
| [Spring Boot] 백엔드 설계 (0) | 2025.09.27 |