first commit

docs/qa-reference-comparison/review.md

@@ -0,0 +1,43 @@
+# 거리와 선명도 점검 / 레퍼런스 비교 도구
+
+2026-09-14. 사용자 요청: 레퍼런스의 거리감에 따른 해상도 저하를 점검하고 디버그 테스트 위에 레퍼런스 2장을 놓고 비교할 수 있게 한다. Astra 분석·검토, Luna UI 구현. 이번 광학 셰이더는 변경하지 않는다.
+
+## 점검 결과
+
+현재 거리 연동 선명도 저하 모델은 없다. Mosaic의 퍼짐은 strength × cellSize × hash(.006~.012)이며 카메라 거리나 사진 부위별 Depth를 입력받지 않는다. 사진 확대는 XY scale이므로 거리 조절이 아니다. 카메라는 Z3에서 XY 이동하며 유리는 Z.6에 있다. 굴절 계산의 교점은 Z0 평면을 사용한다.
+
+RenderTarget은 화면 크기와 DPR(상한1.5)에 따라 해상도가 정해진다. depthBuffer:true는 가림 처리에 쓰이지만 Glass가 샘플하는 depthTexture는 생성하지 않는다. 기존 sample의 수작업 Depth는 정점 Z와 parallax에 반영되지만 부위별 퍼짐에는 연결되지 않는다. 추가4장은 Depth 없는 평면이다.
+
+‘픽셀 수가 줄어드는 해상도 저하’, ‘유리/렌즈가 넓은 영역을 섞는 선명도 저하’, ‘셀의 확대에 따라 원본 정보가 크게 늘어나는 현상’을 분리해 평가해야 한다.
+
+레퍼런스1은 창틀 세부와 평탄한 동물 셀이 공존하고 레퍼런스2는 눈·코 윤곽과 큰 저정보량 면이 공존한다. 레퍼런스2의 창틀도 부드러워 원본 화질·촬영 초점·압축의 영향을 배제할 수 없다. 이미지 두 장만으로 유리/카메라/피사체의 실제 거리와 촬영 조건을 역산하거나 흐림 원인을 확정하지 않는다.
+
+## 다음 광학 실험 (아직 구현/실행하지 않음)
+
+1. 같은 사진·구도·Grid·.12변위제한·광택0·viewport/DPR에서 기존 퍼짐과 반경2배를 비교한다. 셀 중심과 배율은 유지해 순수 선명도 변화만 확인한다.
+2. 유망하면 카메라·구도·렌더해상도를 고정하고 ‘유리-사진 평균 간격’에 퍼짐을 연동하는 평면 근사를 실험한다. 미세한 각도 분산에 의해 소스 영역이 넓어진다는 모델링 가정이며 실제 측정거리나 AI 추정으로 표시하지 않는다.
+3. 기존샘플의 부위별 효과는 정렬된 Depth 또는 RT depthTexture에서 선형 거리를 복원한 뒤 검토한다. 추가4장은 단일평면 간격을 적용한다.
+
+전체 RenderTarget 해상도를 낮추거나 5탭 반경을 무작정 크게 늘리면 창틀까지 흐리거나 복제 윤곽/십자형 잔상이 생길 수 있으므로 첫 해법으로 채택하지 않는다. 통과 기준은 눈·코 식별, 주변 셀 정보량 감소, 기존 얼굴 단절 재발 없음, 광택0·드래그·모바일에서도 유지되는지다.
+
+촬영 초점 흐림은 단순 카메라 거리 증가와 같지 않다. 설정한 초점면과의 차이 및 조리개 등의 영향을 받는다. 1차 자료: https://www.edmundoptics.com/knowledge-center/application-notes/imaging/depth-of-field-and-depth-of-focus/
+Patterned glass의 패턴·확산 설명: https://www.pilkington.com/en/gbl/architectural-and-technical-glass/product-categories/decoration/pilkington-texture-glass (특정한 거리 법칙이나 본 레퍼런스의 조건을 입증하는 자료는 아님).
+
+## 비교 UI 검증
+
+구현 및 실제 브라우저 확인 결과는 아래에 추가한다. 레퍼런스는 로컬 비교용이며 게시하지 않는다.
+
+- 수정 파일: index.html, src/main.ts, src/style.css. 광학 셰이더는 이번 변경에서 유지했다.
+- 개발 모드 테스트 사진 선택 위에 두 썸네일 표시. 썸네일/선택기로 레퍼런스 선택, 0~100% 불투명도 조절, 끄기 지원. 화면 고정 contain 오버레이이며 사진/Depth 입력은 바꾸지 않는다.
+- 실제 브라우저: 두 이미지 원본 폭 1160/1387 로딩 확인. 0% 이미지 opacity 0, 100% 레퍼런스 표시, 끄기 display:none 및 슬라이더 disabled 확인. 레퍼런스2 50% 표시 및 오버레이 위 드래그 확인. pointer-events:none.
+- dog2→dog3 사진 전환에도 선택한 레퍼런스와 오버레이 유지. dog2, Grid8, Distortion1, 굴곡.55, 광택.15, 확대1/위치0으로 복원하고 시점 초기화.
+- 데스크톱 및 390×844 브라우저 뷰포트 확인. 모바일 썸네일 각각154.5px, 문서 가로 넘침 없음. 테스트 후 뷰포트 재설정.
+- 브라우저 error 로그 0건. Luna 최종 npm run build 통과. dist에 reference1/reference2 및 docs/qa-five-photos 참조 없음 확인. hidden 강제 CSS로 production 패널 비표시 보장. production 브라우저 별도 실행 및 실제 휴대폰 검증은 하지 않음.
+- 증거: desktop-reference2.png, mobile-reference2.png. 캡처는 레퍼런스2 불투명도50%와 테스트 사진을 겹친 상태다.
+- 제한: 화면 전체에 고정한 시각 비교 도구이며 서로 다른 사진의 얼굴 정렬/정량 차분 기능은 아니다. 거리 연동 퍼짐은 분석만 했고 새로 구현하지 않았다.
+
+## 사용자 배치 정정
+
+사용자의 ‘위에’는 레이어 중첩이 아니라 공간 배치였다. 최종 요구는 레퍼런스1 | 레퍼런스2를 한 행에 두고 그 아래 테스트 캔버스를 표시하는 것이다. 앞선 오버레이 UI 설명과 캡처는 이전 구현 기록이며 최종 배치 기준이 아니다. 오버레이 선택/불투명도 기능을 제거하고 개발 전용 참조 행으로 교체한다. 거리 분석 결과는 유지한다.
+- 정정 구현 검증 완료: 데스크톱과 390×844에서 두 레퍼런스 한 행/그 아래 캔버스 확인. 모바일 reference 하단과 stage 상단 모두 y200, 가로 넘침 없음, overlay DOM 없음. stacked-desktop.png / stacked-mobile.png 캡처.
+- 최종 build 통과 및 dist 레퍼런스 제외 확인(Luna). HTML/TS 교체 중 HMR null 오류 1건 기록되었으나 최종 파일로 새로 로드 후 새 오류 없음. 사용자 dog2와 Grid8/Distortion1/굴곡.55/광택.15 복원. 뷰포트 원복.