Fit Harmony Project

Fit Harmony — AI 기반 실시간 자세 교정 및 운동 추천 서비스

웹캠을 통해 사용자의 운동 자세를 실시간으로 분석하고 피드백을 제공하는 서비스입니다.

1. 시스템 아키텍처 (System Architecture)

프론트엔드에서 AI 모델을 직접 실행(On-Device AI)하여 서버 부하를 줄이고 실시간성을 확보했습니다.

flowchart TD
  user["사용자"]

  subgraph FIT_HARMONY["FIT_HARMONY"]
    subgraph Browser["Browser"]
      spa["WebApp SPA React Vite"]
    end

    subgraph EC2["EC2"]
      nginx["Nginx"]
      api["Backend API Node Express"]
      ai["OCR AI Runtime Python PaddleOCR"]
      pg["PostgreSQL"]
      fs["File Storage Public FS"]
    end
  end

  google["Google OAuth2"]
  openai["OpenAI API"]
  kakao["Kakao Maps API"]
  daum["Daum Postcode API"]

  user -->|HTTPS| nginx
  nginx -->|Static| spa
  nginx -->|Proxy API| api

  spa -->|Call API with Cookies| api
  api -->|SQL| pg
  api -->|Session Store| pg

  api -->|OAuth| google
  api -->|LLM Call| openai
  spa -->|Maps SDK| kakao
  spa -->|Postcode| daum

  api -->|Run OCR AI| ai
  api -->|Read Write Files| fs

  classDef person fill:#F3E8FF,stroke:#7C3AED,stroke-width:2px;
  classDef c_container fill:#E8F1FF,stroke:#2563EB,stroke-width:2px;
  classDef external fill:#FFF4E5,stroke:#F59E0B,stroke-width:2px;
  classDef datastore fill:#E9FBF0,stroke:#16A34A,stroke-width:2px;

  class user person;
  class spa,nginx,api,ai c_container;
  class google,openai,kakao,daum external;
  class pg,fs datastore;

▲ 클라이언트 기반 AI 분석 및 서버 연동 구조

2. 주요 기능 및 화면 (UI/UX)

자동 칼로리 계산

음식 사진을 입력하여 칼로리를 자동으로 계산합니다.

OCR 인식

Tesseract OCR을 활용하여 골격근량, 나이, 체성분량, 성별을 인식하고 저장합니다.

3. 인바디 결과지 자동 분석 Flow

이미지 업로드 후 백엔드가 Python AI 모듈을 호출해 분석 결과를 JSON으로 반환하고, 프론트 폼을 자동 채웁니다.

sequenceDiagram
    participant U as User
    participant FE as InbodyRegisterForm
    participant UP as /common/file/image/upload
    participant DB as PostgreSQL(file)
    participant OCR as /inbody/requestOcr
    participant PY as Python(inbodyGptModel.py)
    participant AI as OpenAI API

    U->>FE: 1. 인바디 이미지 선택
    FE->>UP: 2. FormData 업로드(file)
    UP->>DB: 3. file 메타데이터 저장(file_id)
    DB-->>UP: 4. file_id 반환
    UP-->>FE: 5. fileIdArr[0] 수신

    FE->>OCR: 6. POST /inbody/requestOcr {fileId}
    OCR->>DB: 7. file_id 존재 확인
    OCR->>PY: 8. spawn(python, [inbodyGptModel.py, "inbody_gpt", fileId, model])
    PY->>DB: 9. 파일 경로 조회
    PY->>AI: 10. 이미지 전처리/추출 후 GPT 호출
    AI-->>PY: 11. 분석 결과(JSON)
    PY-->>OCR: 12. stdout(JSON)
    OCR-->>FE: 13. analyzed_data 반환

    FE-->>U: 14. 폼 자동 입력(수정 가능) + 저장

4. 데이터베이스 설계 (ERD)

사용자, 운동 정보, 기록 데이터를 중심으로 설계된 관계형 데이터베이스(RDB) 구조입니다.

▲ MySQL 주요 엔티티 관계도

5. 기술 스택 (Tech Stack)

Frontend & AI

React 18 TypeScript TensorFlow.js PoseNet p5.js (Canvas) MUI/Styled-Components

Backend & DB

Node.js Express.js MySQL/MariaDB Sequelize ORM Redis JWT Auth

Deployment

AWS EC2 Docker Nginx Proxy Git Actions (CI/CD)

6. 트러블 슈팅

개발/배포 과정에서 발생한 이슈를 증상 → 원인 → 해결 흐름으로 정리했습니다.

[Backend | B-E-002] 메인 서버 OCR 미작동

증상

배포 환경(메인 서버)에서 OCR 기능이 정상 동작하지 않음

원인

EC2 메모리 부족으로 OCR 처리 과정이 실패/중단됨

해결

OCR 파이프라인을 GPT 기반 분석 방식으로 전환하여 메모리 부담을 완화
[Backend | B-E-003] 인바디 날짜별 조회 오류

증상

인바디 데이터를 날짜 기준으로 조회할 때 결과가 누락되거나 조회 실패

원인

DATETIME 타입/포맷 처리 오류로 날짜 비교 조건이 정상적으로 맞지 않음

해결

DATETIME 포맷을 정리하고, SQL에서 날짜 비교 시 AS DATE 형태로 캐스팅하여 수정
[Backend | B-E-004] 인트로 이미지 파일 로딩 오류

증상

인트로 화면 이미지가 로딩되지 않거나 404가 발생

원인

배포 환경 기준 파일 경로가 잘못 설정됨

해결

정적 파일 경로를 배포 기준으로 재정렬하고 이미지 경로를 올바르게 수정
[Backend | B-E-005] 댓글/리뷰 유효성 검사 부족

증상

비정상 리뷰 등록(구매 이력 없는 리뷰 등), 과도한 댓글/욕설 등 품질 이슈 발생

원인

댓글/리뷰 유효성 검사 로직이 미흡하여 서버에서 입력 검증이 제대로 되지 않음

해결

1) 리뷰 등록 전 구매 이력을 확인하는 미들웨어 추가
2) 댓글 길이 제한/욕설 필터링 등 유효성 검사 강화
3) 사용자당 상품별 댓글 개수 제한 조건 추가
[Frontend | F-E-001] 상태 변환 후 화면 데이터 미조회(useEffect)

증상

식단/운동 스케줄 상태 변환 후 화면(그래프/리스트)이 최신 데이터로 갱신되지 않음

원인

useEffect 의존성/동작 설정 이슈로 Redux 데이터 변경 시 각 UI 영역이 재조회되지 않음

해결

Redux 스케줄 데이터 변경 시 각 JSX(식단/상태/그래프)의 useEffect가 동작하도록 의존성 및 트리거 로직 조정
[Frontend | F-E-002] 게시글 저장 버튼 연타 시 중복 생성

증상

게시글 작성 후 저장 버튼을 여러 번 누르면 동일 게시글이 중복 생성됨

원인

요청이 끝나기 전에 추가 클릭이 가능해 POST 요청이 여러 번 전송됨

해결

게시글 생성 요청이 들어가면 완료(또는 오류)까지 추가 생성 요청을 차단(버튼 disable/로딩 락)
[Frontend | F-E-004] 게시글 제목 200자 초과 시 작성 불가

증상

제목이 길면 저장이 실패하거나 작성이 불가능

원인

DB(post 테이블)의 title 길이 제한을 프론트에서 고려하지 않음

해결

요청 전 제목 길이 유효성 검사를 추가하고, 초과 시 사용자에게 알림 제공
[Frontend | F-E-005] 회원가입 후 리다이렉트 오류

증상

회원가입 완료 후 의도한 페이지로 이동하지 않거나 잘못된 URL로 리다이렉트됨

원인

로컬 개발 환경과 배포 환경의 리다이렉트 주소가 달라 URL을 잘못 받아옴

해결

리다이렉트 주소를 “상대 경로”가 아닌 “전체 주소(absolute URL)”로 작성하여 해결
[Frontend | F-E-006] 마이페이지 모바일 UI 깨짐

증상

모바일에서 마이페이지 레이아웃이 깨지거나 요소가 잘리는 현상 발생

원인

고정 픽셀 기반 레이아웃으로 다양한 화면 폭을 대응하지 못함

해결

반응형 웹 디자인으로 수정(브레이크포인트/유동 너비 적용)
[Frontend | F-E-009] 지도 노출 시 모바일 반응형 미적용

증상

지도 화면에서 모바일 레이아웃이 깨지거나 지도 영역이 잘림

원인

지도 컨테이너의 반응형 처리(CSS)가 부족

해결

지도 CSS에 반응형 클래스/속성을 추가해 대응 (예: md:w-[90%], md:h-[80%], md:relative, overflow-hidden)
[Frontend | F-E-010] 배포 시 카카오맵 API 미적용(CI/CD)

증상

로컬에서는 지도가 뜨지만, 배포 환경에서는 카카오맵이 로드되지 않음

원인

CI/CD 배포 과정에서 API 키가 빌드 산출물에 포함되지 않아 런타임에서 키를 찾지 못함

해결

배포 환경의 환경변수 설정을 점검하고, 빌드 시점에 키가 주입되도록 CI/CD 설정을 수정

▲ GoogleDrive를 통한 기획, 문서화, 협업 및 트러블 슈팅 관리

Project Info

Category
AI/헬스케어 웹 서비스 (풀스택)
Role
AI 모델 적용, 프론트엔드 개발, DB 관리
Date
2025.04 – 2025.06 (3개월)
GitHub
Backend Frontend
Deployment
사이트 방문하기

Fit Harmony Project

Fit Harmony — AI 기반 실시간 자세 교정 및 운동 추천 서비스

1. 시스템 아키텍처 (System Architecture)

2. 주요 기능 및 화면 (UI/UX)

자동 칼로리 계산

OCR 인식

3. 인바디 결과지 자동 분석 Flow

4. 데이터베이스 설계 (ERD)

5. 기술 스택 (Tech Stack)

Frontend & AI

Backend & DB

Deployment

6. 트러블 슈팅

[Backend | B-E-002] 메인 서버 OCR 미작동

[Backend | B-E-003] 인바디 날짜별 조회 오류

[Backend | B-E-004] 인트로 이미지 파일 로딩 오류

[Backend | B-E-005] 댓글/리뷰 유효성 검사 부족

[Frontend | F-E-001] 상태 변환 후 화면 데이터 미조회(useEffect)

[Frontend | F-E-002] 게시글 저장 버튼 연타 시 중복 생성

[Frontend | F-E-004] 게시글 제목 200자 초과 시 작성 불가

[Frontend | F-E-005] 회원가입 후 리다이렉트 오류

[Frontend | F-E-006] 마이페이지 모바일 UI 깨짐

[Frontend | F-E-009] 지도 노출 시 모바일 반응형 미적용

[Frontend | F-E-010] 배포 시 카카오맵 API 미적용(CI/CD)

Project Info