프로젝트 배경
1) 문제점 안경을 온라인에서 고르면 "내 얼굴에 맞는지"를 확인할 방법이 없습니다. 앱을 따로 깔게 하면 거기서 이탈이 나고, 동공간 거리(PD)는 매장에 가야 알 수 있습니다. 그리고 가상 피팅은 "다양한 조명·각도에서 안정적으로 렌더링합니다" 같은 문장으로는 품질을 판단할 수 없습니다. 켜 보면 1초 만에 갈립니다. 그래서 스펙 문서 대신 URL 하나로 확인되는 엔진 콘솔을 만들었습니다. 2) 프
프로젝트 성과
두 스케일 기준이 0.1mm 안에서 만났다
홍채 Ø11.7mm 기준 PD 63.3mm, 신용카드 85.60mm 기준 63.4mm. 같은 세션에서 기준만 바꿔 얻은 값입니다.
공용 모듈 단위 테스트 53건 통과
랜드마크·스케일 환산·PD 산출·포즈 분해·안정화 5개 스위트. DOM과 three.js에 의존하지 않는 계층만 검증합니다.
API 3종 실호출 200/200/201 · 에러 404/422
제품 마스터 조회·단건 조회·측정 세션 전송을 실제로 구현했습니다. 문서 화면의 버튼이 배포본을 그대로 호출합니다.
외부 CDN 없이 전 계산을 브라우저에서
추적 모델 3.7MB·wasm 11.7MB·폰트 2.0MB를 전부 자체 호스팅했습니다. 얼굴 영상은 브라우저 안에서만 처리됩니다.
구현 중 발견해 고친 버그 6건과 모바일 차단 1건
탭 복귀 시 PD가 63.3에서 76.8mm로 튀던 것 등 6건을 증상·원인·조치로 기록했습니다. 390px에서 잘리던 화면도 고쳤습니다.
핵심 기능
진행 단계
공고 해석과 화면 설계
2026.09.
수행 범위 6개를 화면 단위로 옮기고, 만들 것과 만들지 않을 것의 경계를 먼저 정했습니다.
프로젝트 상세
1) 소개 설치도 로그인도 없이 브라우저에서 얼굴을 추적해 안경을 얹고, 홍채나 신용카드를 자 삼아 동공간 거리(PD)를 mm로 산출하는 웹 AR 피팅 엔진입니다. 쇼핑몰 화면이 아니라 그 위에 얹히는 엔진을 다루는 계측 콘솔 형태로 만들었습니다. 라이브 피팅 · 계측 리포트 · API 규격 세 개 탭으로 되어 있습니다. 2) 작업 범위 - 스케일 앵커 오버레이: 홍채 지름에서 만든 환산계수가 두 동







