behind_glass/docs/qa-reference-comparison/review.md

거리와 선명도 점검 / 레퍼런스 비교 도구

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 복원. 뷰포트 원복.