스크린핏 (ScreenFit) 제작기

서버 전송 없이 브라우저 내에서 안전하게 구동되는 AI 신체 랜드마크 분석 및 의류 피팅 가늠 시스템

1. 문제 정의 및 기획 배경

인터넷 쇼핑몰에서 의류를 구매할 때, 상품 설명에 표기된 옷의 실측 수치(총장, 소매, 가슴 단면 등)만 보고는 본인의 몸에 잘 맞을지 직관적으로 가늠하기 어렵습니다. 최근 모바일을 활용한 실측 측정 앱들이 등장했으나, 사용자의 민감한 신체 사진을 외부 서버로 전송해야 하므로 심각한 개인정보(프라이버시) 유출 위험이 존재했습니다. 저는 사용자가 보안 걱정 없이 안전하게 자신의 치수를 측정하고 가상 피팅을 진행할 수 있는 방법을 고민했습니다. 그 결과, 사진 데이터를 절대 서버로 전송하지 않고 오직 사용자의 브라우저 내에서 인공지능 자세 추정 라이브러리를 독립 실행함으로써 개인정보 보호(보안성)와 서버 비용 제로(경제성)를 동시에 달성하는 가상 피팅 플랫폼을 제작하게 되었습니다. 저의 첫 번째 프로젝트이기도 합니다.

2. 핵심 사양 및 구현 목표

온디바이스 신체 트래킹: 외부 통신 없이 HTML5 Canvas 내부에서 @mediapipe/pose를 완벽 구동하여 사용자의 랜드마크 분석.
절댓값 기반 치수 추정: 사용자의 실제 키(cm)라는 단 하나의 기준값만 주어지면, 픽셀 거리와 인체 비율 상수를 연립하여 실제 신체 실측 치수를 역추정.
예외 왜곡 보정 장치 설계: 촬영 각도에 따른 원근 왜곡 및 루즈핏 의류 착용으로 인한 AI의 좌표 검출 오차를 수동 조정할 수 있는 마우스 드래그 기반 보정 인터랙션 구현.
핵심 기술 스택:
- Frontend: React (v18), JavaScript, Tailwind CSS
- AI / Computer Vision: @mediapipe/pose, @tensorflow/tfjs-core
- UI & Interaction: HTML5 Canvas (드래그 앤 드롭 및 랜드마크 수정 인터랙션)
- Utilities: html2canvas (피팅 스크린샷 저장)

3. 기술 검증 및 트러블슈팅

[1단계] 브라우저 내 TFJS 및 포즈 랜드마크 통합

사용자 이미지가 로드되면 TensorFlow.js 백엔드를 거쳐 MediaPipe Pose 가중치 파일을 메모리에 로드해 관절 랜드마크 33개를 검출하는 비동기 인스턴스를 수립했습니다.

[2단계] 픽셀-cm 단위 스케일 팩터 공식 수립

이미지 상 정수리부터 복사뼈까지의 픽셀 거리를 검출한 뒤, 사용자의 실제 신장(cm) 대비 픽셀값의 스케일 비율(cmPerPixel)을 도출했습니다.

[3단계] 인체공학적 비례 보정 수식 이식

어깨, 팔꿈치, 손목, 골반 등의 픽셀 좌표 거리에 인체공학적 비례 상수(어깨 솔기 처짐 등) 및 Z축 원근(Depth) 삼각비 왜곡 연산을 적용해 최종 실측 인치/cm 값을 추출했습니다.

R&D 및 트러블슈팅

1. 루즈핏(오버사이즈) 의류 착용 및 촬영 각도로 인한 관절 위치 검출 왜곡

문제: 사용자가 통이 넓은 티셔츠나 긴 바지를 입고 있을 경우, AI가 어깨나 골반 뼈의 실제 위치 대신 옷 끝자락 외곽선을 관절 위치로 오인하여 실측 치수가 엉뚱하게 길게 나오는 오류가 발생했습니다.
해결:
1. 3D 원근 보정 조절바: 회전 행렬을 설계하여 원근 기울기 왜곡을 미세 보정하는 슬라이더 인터페이스를 구성했습니다.
2. 수동 관절 드래그 앤 드롭 (Manual Correction): Canvas 위에 표시된 관절 핀 포인트를 사용자가 직접 실제 관절 위치로 드래그하여 옮길 수 있도록 마우스 트래킹 리스너를 결합한 드래그 핀 인터랙션 시스템을 적용해 오차를 원천 해결했습니다.

4. 핵심 기능 및 구현 코드

인체공학적 치수 보정 알고리즘: 픽셀당 실측 비율 기반 소매, 어깨 너비, 다리 총장을 높은 정확도로 산출.
정면/측면 자동 판별: 좌/우 관절 겹침 유무를 탐지하고 측면일 확률(Side-profile Probability)을 실시간 추정하여 계산 공식을 스위칭.
수동 랜드마크 핀 드래그 조정: Canvas 상 마우스 드래그를 이용한 미세 교정 래퍼.
피팅 스냅샷 저장: 분석 및 가상 매핑 완료본을 html2canvas로 캡처하여 디스크 다운로드 제공.

핵심 코드 (Height-based Dimension Estimation & Correction)

// skeletonCalc.ts - 신장 기반 랜드마크 픽셀 간 실측 치수 변환 및 3D 왜곡 보정
export function estimateBodyDimensions(landmarks: any, userHeightCm: number, isSideView: boolean) {
  // 머리끝(정수리)부터 발끝(복사뼈 근처)까지의 픽셀 거리 계산
  const pixelHeight = calculatePixelDistance(landmarks.nose, landmarks.leftAnkle);

  // 픽셀당 실측 cm 스케일 팩터 계산
  const cmPerPixel = userHeightCm / pixelHeight;

  // 1. 팔 소매 치수 계산 (어깨 -> 팔꿈치 -> 손목)
  const shoulderToElbow = calculatePixelDistance(landmarks.leftShoulder, landmarks.leftElbow);
  const elbowToWrist = calculatePixelDistance(landmarks.leftElbow, landmarks.leftWrist);
  const rawArmLengthCm = (shoulderToElbow + elbowToWrist) * cmPerPixel;

  // 인체공학적 보정 계수 적용 (어깨 솔기 위치 보정 등)
  const estimatedSleeveLength = rawArmLengthCm * 0.92;

  // 2. 3D 원근 왜곡을 위한 각도 팩터 보정
  const shoulderWidthPixel = calculatePixelDistance(
    landmarks.leftShoulder,
    landmarks.rightShoulder
  );
  // 어깨 축이 기울어진 각도 추정 (왜곡 보완을 위한 삼각비 연산)
  const zDepthDifference = Math.abs(landmarks.leftShoulder.z - landmarks.rightShoulder.z);
  const correctedShoulderCm = Math.sqrt(
    Math.pow(shoulderWidthPixel * cmPerPixel, 2) + Math.pow(zDepthDifference * 100, 2)
  );

  return {
    sleeve: estimatedSleeveLength.toFixed(1),
    shoulder: correctedShoulderCm.toFixed(1),
    isSideProfileDetected: isSideView,
  };
}

5. 미래 확장성 및 고도화 계획

WebGL 가속을 통한 3D 의류 렌더링 피팅 모듈 결합
정합 성능 측정을 위한 실제 옷 치수 대비 평균 오차율 통계 수집

ScreenFit 제작기