Eric's Garden🌳

DO EAT FIT: 헬스케어 플랫폼 포트폴리오

10 min read

1. 개요

DO EAT FIT은 단순히 일회성 운동법을 제공하는 사이트를 넘어, 일반 사용자와 관리자(트레이너)라는 서로 다른 사용자 군에게 고도로 정렬된 맞춤 경험을 선사하는 차세대 지능형 헬스케어 플랫폼입니다. 일반 사용자에게는 신체 지표 기반의 정밀 영양 공식과 운동 일지를 가이드하고, 관리자에게는 콘텐츠 제작을 효과적으로 보좌하는 CMS(콘텐츠 관리 시스템)를 제공합니다. 이 포트폴리오 문서는 DO EAT FIT을 설계 및 구축해 나가는 과정에서 직면했던 복잡한 기술적 한계들과 의사결정 이정표, 그리고 인프라 고도화 경험을 총망라하고 있습니다. 분산 가용성과 관측 가능성(Observability)을 동시에 굳힌 DoEatFit의 강인한 아키텍처 설계 과정을 소개합니다.

2. 핵심 내용

2-1. 🏗️ 서비스 인프라 아키텍처 상세 설계

  • 관심사 분리 및 다중 서브도메인 인프라:
    • DDoS 보안 최전선 (Edge): Cloudflare WAF를 얹어 악성 봇 트래픽(Turnstile 검증)을 최우선 차단하고 CDN 캐싱 가용성을 마련했습니다. Nginx Proxy Manager를 리버스 프록시 허브로 배치해 SSL 암호화 처리 및 백엔드 포워딩 라우팅을 안전하게 조율했습니다.
    • 다중 프론트엔드 분리 아키텍처: 일반 사용자 앱(Next.js)과 완전히 분리된 전용 관리자 포털(Next.js CMS)을 구축했습니다. Next.js 미들웨어(middleware.ts)를 가동해 admin.* 서브도메인을 감지하고 전용 레이아웃 및 격리된 보안 인증 파이프라인을 타게 함으로써 어드민 관심사를 수려하게 물리 분리했습니다.
    • 스토리지 및 데이터 레이어 격리: 데이터베이스는 영속 정형 데이터용 MySQL과 휘발성 JWT 토큰 및 보안 인증용 Redis 캐시로 역할 분할했습니다. 공지사항 내 이미지 및 미디어 파일은 자체 호스팅 Object Storage인 MinIO로 일임하여 백엔드의 Disk I/O 부하를 근절했습니다.
sequenceDiagram
    participant User as 모바일 사용자 (Browser)
    participant FE as 프론트엔드 (Next.js)
    participant BE as API 서버 (Spring Boot)
    participant DB as 정형 데이터베이스 (MySQL)
    participant Cache as 세션 스토어 (Redis)

    User->>FE: 로그인 시도 (ID/PW 입력)
    FE->>BE: POST /api/auth/login (DTO 전달)
    BE->>BE: 비밀번호 해시 대조 (BCrypt)
    BE->>DB: 사용자 원본 레코드 조회
    BE->>BE: JWT 토큰셋 생성 (Access / Refresh)
    BE->>Cache: Refresh Token 원자적 저장 (Key: Email)
    BE-->>FE: TokenSetDto (Access / Refresh) 회신
    FE->>FE: LocalStorage 내 AccessToken 보관
    FE-->>User: 로그인 성공 및 마이페이지 진입 완료

2-2. ⚙️ 핵심 비즈니스 도메인 및 헬스케어 기능 구현

  • DoEatFit 기술 스택 총망라:
    • Backend: Java 17, Spring Boot 3.4.x, Spring Data JPA, Querydsl, Spring Security
    • Frontend: TypeScript, Next.js (Page Router), React, shadcn/ui, Tailwind CSS, React Query
    • Infra/DevOps: Jenkins, Docker, Prometheus & Grafana, Redis, MinIO
  • 고도화된 비즈니스 헬스케어 가치:
    • 클린 아키텍처 적용: 비즈니스 플로우를 제어하는 UserService(Application Service)와 순수 도메인 비즈니스 연산만을 수임하는 UserDomainService(Domain Service)로 경계를 분리해 테스트 독립성을 극적으로 높였습니다.
    • 지능형 식단 및 심박수 연산 엔진: 사용자의 활동 대사율(ActivityLevel)과 감량 목적(DietGoal)을 결합해 기초 대사량(BMR) 및 하루 총 에너지 소모량(TDEE)을 자동 튜닝하고, 카보넨 공식 기반의 운동 목표 심박수 데이터를 회원/비회원 구분 없이 탄력 연산해 줍니다.
    • 블록형 CMS 에디터: ToastUI 공식 중단 결함에 선제 대응해 블록 기반의 모던 Editor.js로 CMS 에디터를 마이그레이션했습니다. 생성된 JSON 데이터를 정교하게 파싱해 MinIO Object Storage에 파일을 자동 매핑 및 보관하는 인프라 결합도를 매끄럽게 마감했습니다.
    • 인터랙티브 SVG 지도 및 스케일러 빌더: 프론트엔드에 Beginner_Front.svg 인체 모형 벡터 지도를 이식하여, 부위 클릭 시 해당 부위 명세(majorMuscle, minorMuscle)를 추출하고 Querydsl 동적 조건절을 타고 운동 카드를 실시간 렌더링합니다. 데이터 로딩 시 Skeleton UI(workout-card-skeleton.tsx)를 주입해 사용자의 체감 지연 속도를 무너뜨렸습니다.

2-3. ✅ 인프라 트러블슈팅 성과 및 미래 로드맵

  • 핵심 트러블슈팅 해결 사례:
    1. [UI/UX] MUI에서 shadcn/ui로의 대전환: 기존 무거운 MUI 컴포넌트의 번들링 사이즈 과부하와 CSS 오버라이딩 난제를 타파하고자 tailwind와 결합된 경량의 shadcn/ui로 리팩토링을 감행, 다크 모드 구현과 웹 초기 드로잉 성능을 획기적으로 향상시켰습니다.
    2. [Security] JWT 하이브리드 토큰 보관 기법 확립: XSS 위협 방지용 HttpOnly 쿠키 방식의 SSR 환경 제어 난관을 타개하고자, 프론트는 localStorage에 AT를 두고 Axios Interceptor로 인젝션하되, 탈취 시 피해가 극심한 RT는 서버 Redis에서 영격 및 즉각 소멸시키는 하이브리드 설계로 XSS와 CSRF의 타협점을 영리하게 포착했습니다.
    3. [Infra] Nginx 500/502 게이트웨이 에러 척결 (LXC FD): 트래픽 급증 시 Nginx 프록시가 차갑게 마비되던 장애를 진단해, 백엔드 컨테이너 장애가 아닌 NPM을 감싸고 있던 비특권 Proxmox LXC 호스트의 파일 디스크립터 한도(ulimit -n: 1024)가 바틀넥이었음을 밝히고 호스트 limits.conf와 lxc.prlimit.nofile를 65536으로 동시에 관통 변경하여 대용량 트래픽을 완벽하게 잠재웠습니다.
    4. [Performance] MinIO 이관을 통한 미디어 스트리밍 최적화: 미디어를 스프링 API가 직접 바이트 I/O 로드하던 레거시를 파쇄하고, EditorJsStorageService를 제작하여 모든 운동 비디오 및 식단 스냅샷 이미지를 MinIO 파일 업로드 주소로 Direct 링크 서빙하여 WAS 병목 현상을 획기적으로 퇴치했습니다.
  • 미래 지향적 시스템 발전 로드맵:
    • Cloudflare R2 오브젝트 이관: 정적 파일 보관용 자가 호스트형 MinIO의 CE 라이선스 변경 대응책으로, Egress 비용 제로(0)에 무제한 내결함성을 가진 퍼블릭 클라우드 스토리지 Cloudflare R2로 인프라를 매끄럽게 이관할 기획을 품고 있습니다.
    • 종합 헬스 다이어리 및 소셜 다이내믹스: 사용자의 수면, 수분 섭취, 당일 컨디션 지수를 추적하는 통합 시각화 다이어리를 추가하고 기록 성취를 소셜 네트워킹 플랫폼(SNS)에 카드 형태로 내보내는 공유 모듈 빌드를 앞두고 있습니다.
    • Discord 연계 경보망 고도화: Prometheus & Grafana 모니터링을 넘어 특정 에러 누적 감지 시 Alertmanager 플러그인을 경유하여 개발 전용 디스코드(Discord) 채널로 메트릭 크래시 백트레이스를 즉시 실시간 회신하는 자동 예보 시스템을 준비 중입니다.

최신글

그래프 뷰

백링크