Feature: 렌티큘러 키링

[giljihun]

렌티큘러 키링

실물 렌티큘러 카드를 디지털로 재현한 키링 템플릿.
실물은 시야각에 따라 이미지가 달라지는데,
앱에서는 자이로센서를 활용하여 디바이스를 기울이면 두 이미지가 자연스럽게 전환되는 키링.

• 전환 경계에서 고스팅 + 쉬머(빛 반사) 효과
• 끝점 도달 시 햅틱 피드백

검증 완료: LenticularSampleApp 에서 프로토타이핑 완료

핵심 기술

SpriteKit GLSL Fragment Shader

GPU에서 픽셀 단위로 실행되는 셰이더 프로그램.
600×390 아틀라스(이미지 A + B를 가로로 이어붙인 텍스처)를 입력받아,
u_tilt 값(0.0~1.0)에 따라 좌측 절반(A) 또는 우측 절반(B)을 샘플링하여 화면에 출력한다.
렌즈 줄무늬, 스냅 전환, 고스팅, 쉬머 효과를 모두 셰이더 내부에서 처리하므로 60fps 실시간 렌더링이 가능.

렌티큘러 효과는 모든 픽셀마다 매 프레임 계산이 필요한 작업이라 셰이더 없이는 실시간 구현이 안됨.

Metal을 직접 쓰려면 SpriteKit 바깥에서 렌더링 파이프라인을 처음부터 구성해야 하는데, SpriteKit의
SKSpriteNode에는 .shader 속성이 있어서 .fsh 파일 하나만 꽂으면 바로 동작함.

단순히 이미지 2장을 교차하는 게 아니라, 렌티큘러 특유의 줄무늬 렌즈 · 빛 반사 · 잔상까지
재현해야 해서 CPU로는 매 프레임 처리가 불가능하다.
GPU는 수백만 픽셀을 동시에 병렬 처리하기 때문에 이런 무거운 연산도 60fps를 유지할 수 있다.

정리해보면,

1. 셰이더 효과를 GPU로 돌리려면 Apple 환경에선 Metal을 써야 함
2. 근데 Metal 직접 쓰면 보일러플레이트가 많고, 기존 SpriteKit 구조를 뜯어야 함
3. SpriteKit이 GLSL(.fsh) → Metal 자동 변환을 지원함
4. 우리 키링이 이미 SpriteKit 기반이니까
   node.shader = SKShader(fileNamed:) 한 줄이면 끝
5. 그래서 GLSL로 작성하는 게 가장 합리적인 선택

CMMotionManager 자이로센서

디바이스의 물리적 기울기(roll)를 실시간으로 읽어
0.0~1.0 범위의 tilt 값으로 정규화한 뒤, 매 프레임 셰이더의 u_tilt uniform에 전달한다.
싱글톤 + 참조 카운팅 구조로 여러 Scene에서 안전하게 공유.

실물 렌티큘러 카드는 보는 각도를 바꾸면 이미지가 전환된다.
터치나 드래그가 아닌 자이로센서를 쓰는 이유는 "기울여서 본다"는
실물의 경험을 그대로 옮기기 위해서다.

제작 플로우

공방 → 렌티큘러 카드 탭
       → Preview (가이드 화면)
       → ImageSelect (이미지 2장 선택 + 실시간 미리보기)
       → [다음] 탭 → FusionView (이미지 융합 연출 ~3초)
       → Customizing (이펙트 선택)
       → InfoInput (이름, 메모, 태그)
       → Complete (완성 + 저장/공유)

구현 순서

Phase	작업
1	코어 인프라 (셰이더, 합성, 자이로, 햅틱)
2	라우팅 / 스케일 등록
3	셰이더 적용 (Body, Scene, Detail, Cell)
4	ViewModel
5	View (프리뷰, 이미지선택, 융합연출, 가이드)
6	라우팅 통합
7	비디오
8	위젯 애니메이션
9	Firebase 설정