천상의 이탈리아 웹 스튜디오 — 실무 핵심 가이드

작업: Crowny 웹스튜디오 + Padella(나폴리 피제리아) 몰입형 고도화 날짜: 2026-06-15 분류: 디자인 시스템, VR/AR 통합, 수학 표준

---

I. 천상의 이탈리아 미학 기초

1.1 르네상스 프레스코 색감 체계

원칙: 제한된 색수, 자연 안료, 건조에 따른 발색 둔화 특징

핵심 팔레트 (웹 구현용)

크림(에레오스 흙색):   #F5E6D3 (HSL: 33° 83% 91%)
황금(금박):           #D4AF37 (HSL: 49° 78% 67%)
하늘(울트라마린):     #005DA8 (HSL: 210° 100% 33%)
장밋빛(버밀리온):     #E97E65 (HSL: 9° 87% 65%)
이탈리아 녹색:        #2D5016 (HSL: 100° 41% 20%)
대리석 회백:          #E8E8E8 (HSL: 0° 0% 91%)

응용:

• 배경: 크림 + 대리석 회백 믹스 (80:20)
• 강조: 황금 + 장밋빛 보조 톤
• 접근성: 명도 대비 ≥4.5:1 (WCAG AA)

1.2 황금비율 구조 (Phi = 1.618)

르네상스 미켈란젤로, 마사초의 수학적 정밀성을 웹 레이아웃에 적용:

주 콘텐츠 폭: W
카드 높이: W ÷ 1.618
사이드바 폭: W ÷ 2.618
마진 비율: 1 : 1.618 : 1

CSS 구현:

css:root {
  --phi: 1.618;
  --main-width: 100vw;
  --card-height: calc(var(--main-width) / var(--phi));
  --sidebar-width: calc(var(--main-width) / 2.618);
  --spacing-unit: 1rem;
  --spacing-phi: calc(var(--spacing-unit) * var(--phi));
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--main-width) / 3), 1fr));
  gap: var(--spacing-phi);
}

---

II. 골든아워 라이팅 시스템

2.1 시간별 색온도 & 코드 매핑

골든아워 (17:00~18:30): 2000K ~ 3200K 색온도

시간	색온도	주 색상	보조색	CSS Hex
17:00	2800K	주황	황금	#FFB347
17:30	2600K	황금	장밋빛	#FFA500
18:00	2400K	살몬	홍	#FF7F50
18:30	2200K	장밋빛	자주	#FF6B9D

2.2 CSS 그라데이션 구현 (전체 페이지 라이팅)

css/* 골든아워 배경 그라데이션 (라디얼) */
body {
  background: radial-gradient(
    ellipse 150% 100% at 50% 0%,
    #FFD700 0%,      /* 상단 밝은 황금 */
    #FFA500 25%,     /* 중상 주황 */
    #FF7F50 50%,     /* 중간 살몬 */
    #FF6B9D 75%,     /* 중하 장밋빛 */
    #4B0082 100%     /* 하단 남보라(저녁 하늘) */
  );
  min-height: 100vh;
  position: fixed;
  z-index: -1;
}

/* 카드 위 부유 조명 효과 */
.card {
  background: rgba(245, 230, 211, 0.95);
  box-shadow: 
    0 10px 40px rgba(255, 165, 0, 0.3),     /* 황금 글로우 */
    0 20px 60px rgba(255, 107, 157, 0.2),   /* 장밋빛 그림자 */
    inset 0 1px 0 rgba(255, 255, 255, 0.5); /* 내부 하이라이트 */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* 텍스트 위 따뜻한 문광 효과 */
h1, h2 {
  color: #D4AF37;
  text-shadow: 
    0 2px 4px rgba(255, 165, 0, 0.4),
    0 4px 8px rgba(255, 107, 157, 0.2);
  letter-spacing: 0.05em;
}

2.3 애니메이션: 시각적 "시간 변화" 시뮬레이션

css/* 시간에 따른 골든아워 전환 (무한 루프) */
@keyframes golden-hour-cycle {
  0% {
    background: radial-gradient(
      ellipse 150% 100% at 50% 0%,
      #FFD700 0%, #FFA500 25%, #FF7F50 50%, #FF6B9D 75%, #4B0082 100%
    );
  }
  50% {
    background: radial-gradient(
      ellipse 150% 100% at 50% 0%,
      #FF8C00 0%, #FF6B9D 25%, #FF1493 50%, #8B008B 75%, #2F004F 100%
    );
  }
  100% {
    background: radial-gradient(
      ellipse 150% 100% at 50% 0%,
      #FFD700 0%, #FFA500 25%, #FF7F50 50%, #FF6B9D 75%, #4B0082 100%
    );
  }
}

body {
  animation: golden-hour-cycle 45s ease-in-out infinite;
}

/* 스크롤 기반 동적 조명 (사용자 상호작용) */
.scroll-light {
  position: fixed;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.3) 0%,
    rgba(255, 165, 0, 0.1) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  filter: blur(40px);
  transition: transform 0.1s ease-out;
}

---

III. 몰입형 게임 UX 웹 설계

3.1 구조적 원리: 피드백 루프

사용자 스크롤
    ↓
[타임라인 동기화]
    ↓
환경이 응답 (3D 회전, 애니메이션, 음향)
    ↓
시각 노출 → 다음 스토리 진행
    ↓
(반복)

핵심: "독자가 관찰자가 아닌 환경의 일부가 되도록"

3.2 레이어드 장면 구성 (3단계)

Layer 1: 정적 배경 (깊이)

html<div class="scene-layer background" style="z-index: 1;">
  <div class="nebula" style="opacity: 0.3; filter: blur(50px);"></div>
</div>

Layer 2: 인터랙티브 중간 객체 (상호작용)

html<div class="scene-layer interactive" style="z-index: 2;">
  <div class="marble-column" id="col-1"></div>
  <div class="gold-frame" id="frame-1"></div>
</div>

Layer 3: 전경 텍스트 + UI (사용자 초점)

html<div class="scene-layer foreground" style="z-index: 3;">
  <h2 class="story-text">천상의 이탈리아로의 초대</h2>
  <p class="description">돌로미티 산맥을 넘어...</p>
</div>

3.3 3D 카메라 제어 (포인터/스크롤 기반)

javascript// Three.js 기반 카메라 움직임
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let cameraRotation = { x: 0, y: 0 };

document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 2 - 1;
  const y = (e.clientY / window.innerHeight) * 2 - 1;
  
  cameraRotation.x = y * 0.3;
  cameraRotation.y = x * 0.3;
  
  camera.rotation.x = cameraRotation.x;
  camera.rotation.y = cameraRotation.y;
});

// 스크롤에 따른 장면 진행
window.addEventListener('scroll', (e) => {
  const progress = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  
  // 카메라 줌인/아웃
  camera.position.z = 10 * (1 - progress * 0.5);
  
  // 장면 밝기 변화 (밤 → 아침)
  const lightIntensity = 0.5 + progress * 0.5;
  ambientLight.intensity = lightIntensity;
});

3.4 시각적 깊이: 병렬 스크롤 + 블러 처리

css/* 배경은 천천히, 전경은 빠르게 (깊이감) */
.bg-slow {
  transform: translateY(var(--scroll-y) * 0.3px);
}

.fg-fast {
  transform: translateY(var(--scroll-y) * 0.8px);
}

/* 거리에 따른 블러 처리 */
.distant {
  filter: blur(3px);
  opacity: 0.8;
}

.medium {
  filter: blur(1px);
  opacity: 0.9;
}

.close {
  filter: blur(0px);
  opacity: 1;
}

---

IV. WebXR + AR/VR 피제리아 경험

4.1 프로그레시브 몰입 전략

단계별 접근성:

1단계 (데스크톱): 정적 웹사이트 (CIF 이미지, 기본 색감)
2단계 (모바일): WebGL 3D 뷰어 (터치 제어)
3단계 (AR): 현장에서 스마트폰 AR (테이블 위 피자 시각화)
4단계 (VR): 완전 몰입형 부스 경험 (Meta Quest/Apple Vision Pro)

4.2 WebXR 기본 구현: 3D 피제리아 공간

javascript// WebXR 세션 초기화
async function startXRExperience() {
  const session = await navigator.xr.requestSession('immersive-vr', {
    requiredFeatures: ['local-floor', 'dom-overlay'],
    domOverlay: { root: document.body }
  });
  
  const gl = canvas.getContext('webgl2', { xrCompatible: true });
  const renderer = new THREE.WebGLRenderer({ canvas: gl.canvas });
  
  // 피제리아 3D 환경 로드
  const loader = new THREE.GLTFLoader();
  let pizzeriaScene;
  
  loader.load('/models/padella-interior.glb', (gltf) => {
    pizzeriaScene = gltf.scene;
    scene.add(pizzeriaScene);
  });
  
  // 3D 오브젝트: 피자, 테이블, 조명
  const pizzaGroup = new THREE.Group();
  
  // 피자 (텍스처 + 광택)
  const pizzaGeometry = new THREE.ConeGeometry(0.3, 0.05, 32);
  const pizzaMaterial = new THREE.MeshStandardMaterial({
    map: textureLoader.load('/textures/pizza-margarita.jpg'),
    metalness: 0.1,
    roughness: 0.7
  });
  const pizza = new THREE.Mesh(pizzaGeometry, pizzaMaterial);
  pizzaGroup.add(pizza);
  
  // 피자 판 (도자기 질감)
  const plateGeometry = new THREE.CylinderGeometry(0.35, 0.35, 0.02, 32);
  const plateMaterial = new THREE.MeshStandardMaterial({
    color: 0xEAE8D7,  // 크림색
    metalness: 0.05,
    roughness: 0.8,
    map: textureLoader.load('/textures/ceramic-plate.jpg')
  });
  const plate = new THREE.Mesh(plateGeometry, plateMaterial);
  plate.position.z = -0.05;
  pizzaGroup.add(plate);
  
  scene.add(pizzaGroup);
}

4.3 AR 경험: 현장 테이블 위 피자 시각화

javascript// WebAR (8th Wall 또는 Three.js AR.js)
async function startARPizza() {
  const canvas = document.querySelector('canvas');
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  // 평면 감지 (테이블)
  const controller = renderer.xr.getController(0);
  controller.addEventListener('select', (event) => {
    // 탭한 위치에 피자 배치
    placeObjectOnSurface(pizzaGroup, event.inputSource);
  });
  
  // 손가락으로 피자 회전
  let touchStartX = 0;
  canvas.addEventListener('touchstart', (e) => {
    touchStartX = e.touches[0].clientX;
  });
  
  canvas.addEventListener('touchmove', (e) => {
    const deltaX = e.touches[0].clientX - touchStartX;
    pizzaGroup.rotation.z += deltaX * 0.01;
    touchStartX = e.touches[0].clientX;
  });
}

4.4 공간 컴퓨팅: 음성 + 제스처 상호작용

javascript// 음성 인식 (Web Speech API)
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'it-IT';

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript.toLowerCase();
  
  if (transcript.includes('pizza margherita')) {
    // 특정 피자 모델 로드
    loadPizzaVariant('margherita');
  } else if (transcript.includes('회전')) {
    pizzaGroup.rotation.y += Math.PI / 4;
  } else if (transcript.includes('음성 메뉴')) {
    showVoiceMenu();
  }
};

// 제스처 인식 (MediaPipe Hands 또는 XR 손 제어)
const hands = new Hands({locateFile: (file) => 
  `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/${file}`
});

hands.setOptions({
  maxNumHands: 2,
  modelComplexity: 1,
  minDetectionConfidence: 0.5
});

hands.onResults((results) => {
  if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
    const landmarks = results.multiHandLandmarks[0];
    
    // 엄지손가락과 검지손가락 거리 → 피자 줌
    const thumbTip = landmarks[4];
    const indexTip = landmarks[8];
    const distance = Math.hypot(thumbTip.x - indexTip.x, thumbTip.y - indexTip.y);
    
    pizzaGroup.scale.set(distance * 5, distance * 5, distance * 5);
  }
});

---

V. 재귀 수학 + 3진 구조 (Crowny 표준)

5.1 3진 레이아웃 규칙 (3^n 계층)

바탕: Crowny ISA729 = 3^6 명령어 공간 → 웹 설계에 적용

Level 0 (3^0 = 1)
  ├─ Level 1 (3^1 = 3): [좌/중/우] 섹션
  │   ├─ Level 2 (3^2 = 9): 각 섹션 × 3 카드
  │   │   ├─ Level 3 (3^3 = 27): 각 카드 × 3 요소
  │   │   │   ├─ 제목, 이미지, CTA 버튼
  │   │   │   ├─ 부제목, 설명, 아이콘
  │   │   │   └─ 메타, 작성자, 날짜

5.2 CSS Grid: 3진 분할

css/* Level 1: 전체 페이지 */
.page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: var(--spacing-phi);
  height: 100vh;
}

/* Level 2: 각 섹션 × 3 카드 */
.section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--spacing-phi) / 1.618);
}

/* Level 3: 각 카드 × 3 요소 */
.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: calc(var(--spacing-phi) / 2.618);
}

/* 반응형: 화면 크기에 따라 깊이 조정 */
@media (max-width: 1200px) {
  .page { grid-template-columns: 1fr 1fr; }
  .section { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .page { grid-template-columns: 1fr; }
  .section { grid-template-columns: 1fr; }
}

5.3 프랙탈 애니메이션: 재귀적 회전

css@keyframes fractal-rotate-l0 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fractal-rotate-l1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes fractal-rotate-l2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fractal-l0 { animation: fractal-rotate-l0 60s linear infinite; }
.fractal-l0 .fractal-l1 { animation: fractal-rotate-l1 40s linear infinite; }
.fractal-l0 .fractal-l1 .fractal-l2 { animation: fractal-rotate-l2 20s linear infinite; }

/* 시각적 깊이: 각 레벨의 불투명도 */
.fractal-l0 { opacity: 1; }
.fractal-l1 { opacity: 0.8; }
.fractal-l2 { opacity: 0.6; }

5.4 한선씨 구현: 동적 레이아웃 생성

hangseon가져오기 "JSON.한선"
가져오기 "배열.한선"

함수 삼진레이아웃생성(깊이, 너비) {
  만약 (깊이 == 0) {
    반환 { 타입: "카드", 식별자: "card_" + 무작위(100000) }
  }
  
  변수 하위요소들 = []
  변수 i = 0
  동안 (i < 3) {
    추가(하위요소들, 삼진레이아웃생성(깊이 - 1, 너비 / 3))
    i = i + 1
  }
  
  반환 {
    타입: "섹션",
    깊이: 깊이,
    자식들: 하위요소들,
    너비: 너비,
    높이: 너비 / 1.618
  }
}

변수 레이아웃 = 삼진레이아웃생성(3, 1200)
출력값(JSON.문자열화(레이아웃))

출력 예:

json{
  "type": "section",
  "depth": 3,
  "children": [
    {"type": "section", "depth": 2, "width": 400, "height": 247, "children": [...]},
    {"type": "section", "depth": 2, "width": 400, "height": 247, "children": [...]},
    {"type": "section", "depth": 2, "width": 400, "height": 247, "children": [...]}
  ],
  "width": 1200,
  "height": 742
}

---

VI. 통합 구현: Padella 웹사이트 아키텍처

6.1 페이지 흐름도

[홈]
 ├─ 헤더: 로고 + 명언 ("천상의 나폴리")
 │  배경: 골든아워 그라데이션 + 부유 조명
 │
 ├─ 영웅 섹션: 3D 피자 모델 (WebGL)
 │  상호작용: 마우스 회전, 터치 드래그
 │  배경: 프레스코 텍스처 + 안개
 │
 ├─ 스토리 스크롤: 레이어드 장면 (Three.js)
 │  [이탈리아 하늘] → [나폴리 항구] → [오래된 피제리아] → [현재 테이블]
 │  각 전환: 시각적 깊이 + 음향 효과
 │
 ├─ 메뉴: 3진 그리드 (3×3 카드, 각 3개 정보)
 │  카드: 피자 이미지(CIF), 이름(한글), 설명 + 가격
 │  상호작용: 호버 확대 + 3D 회전
 │
 ├─ AR/VR 영역: "나만의 피자 배치"
 │  WebAR: 현장 테이블에 피자 시각화
 │  VR: 풀 몰입형 피제리아 투어
 │
 └─ 예약/배송: 고급 폼 + 확인 애니메이션
    배경: 크림색 카드 + 황금 강조

6.2 CSS 통합 스타일시트

css:root {
  /* 색감 시스템 */
  --color-cream: #F5E6D3;
  --color-gold: #D4AF37;
  --color-sky: #005DA8;
  --color-rose: #E97E65;
  --color-green: #2D5016;
  --color-marble: #E8E8E8;
  
  /* 거리감 & 블러 */
  --blur-distant: 3px;
  --blur-medium: 1px;
  --blur-close: 0px;
  
  /* 라이팅 */
  --shadow-warm: 0 10px 40px rgba(255, 165, 0, 0.3);
  --shadow-rose: 0 20px 60px rgba(255, 107, 157, 0.2);
  --glow-gold: 0 2px 4px rgba(255, 165, 0, 0.4);
  
  /* 동작 */
  --duration-fast: 0.3s;
  --duration-normal: 0.6s;
  --duration-slow: 1.2s;
  --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 글로벌 배경 */
html {
  background: 
    radial-gradient(
      ellipse 150% 100% at 50% 0%,
      #FFD700 0%,
      #FFA500 25%,
      #FF7F50 50%,
      #FF6B9D 75%,
      #4B0082 100%
    );
  background-attachment: fixed;
  animation: golden-hour-cycle 45s ease-in-out infinite;
}

body {
  font-family: 'Pretendard', 'Segoe UI', sans-serif;
  color: #2D2D2D;
  line-height: 1.618;
}

/* 카드 기본 스타일 */
.card {
  background: rgba(245, 230, 211, 0.95);
  border-radius: 8px;
  padding: var(--spacing-phi);
  box-shadow: var(--shadow-warm), var(--shadow-rose);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  transition: all var(--duration-normal) var(--easing-smooth);
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-warm), 0 30px 80px rgba(255, 107, 157, 0.3);
}

/* 제목 스타일 */
h1, h2, h3 {
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow: var(--glow-gold), var(--shadow-rose);
}

/* 3진 그리드 */
.grid-3x3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(100vw / 3.5), 1fr));
  gap: var(--spacing-phi);
  padding: var(--spacing-phi);
}

/* 깊이감 레이어 */
.layer-bg { filter: blur(var(--blur-distant)); opacity: 0.8; }
.layer-mid { filter: blur(var(--blur-medium)); opacity: 0.9; }
.layer-fg { filter: blur(var(--blur-close)); opacity: 1; }

/* 병렬 스크롤 */
.parallax-slow { --parallax-speed: 0.3; }
.parallax-normal { --parallax-speed: 0.5; }
.parallax-fast { --parallax-speed: 0.8; }

6.3 JavaScript: 통합 컨트롤러

javascript// 1. 스크롤 기반 장면 진행
let scrollProgress = 0;

window.addEventListener('scroll', () => {
  scrollProgress = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  
  // 카메라 줌
  if (window.camera) {
    camera.position.z = 10 * (1 - scrollProgress * 0.5);
  }
  
  // 조명 변화
  if (window.ambientLight) {
    ambientLight.intensity = 0.5 + scrollProgress * 0.5;
  }
  
  // 라이팅 컬러 변화
  document.documentElement.style.setProperty(
    '--light-intensity',
    0.5 + scrollProgress * 0.5
  );
});

// 2. 포인터 기반 카메라 회전
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 2 - 1;
  const y = (e.clientY / window.innerHeight) * 2 - 1;
  
  if (window.camera) {
    camera.rotation.x = y * 0.3;
    camera.rotation.y = x * 0.3;
  }
});

// 3. WebXR 진입점
const xrButton = document.getElementById('vr-button');
if (xrButton && navigator.xr) {
  xrButton.addEventListener('click', startXRExperience);
} else if (xrButton) {
  xrButton.style.opacity = '0.5';
  xrButton.disabled = true;
}

// 4. AR 피제리아 플레이스먼트
const arButton = document.getElementById('ar-button');
if (arButton && navigator.xr) {
  arButton.addEventListener('click', startARPizza);
}

---

VII. 성능 최적화 & 접근성

7.1 이미지 최적화: CIF (Crowny Image Format)

html<!-- 기본 이미지 + CIF 변환본 제공 -->
<picture>
  <source srcset="/images/pizza-margarita.cif" type="image/cif">
  <img src="/images/pizza-margarita.jpg" alt="Margherita Pizza">
</picture>

<!-- 스크린 크기에 따른 적응형 로딩 -->
<img 
  srcset="
    /images/pizza-small.cif 480w,
    /images/pizza-medium.cif 800w,
    /images/pizza-large.cif 1200w"
  src="/images/pizza-medium.jpg"
  alt="Margherita Pizza"
  loading="lazy"
>

7.2 성능 메트릭

javascript// Core Web Vitals 모니터링
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`${entry.name}: ${entry.value}ms`);
  });
});

observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'cumulative-layout-shift'] });

// LCP 최적화: 영웅 이미지 미리 로드
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
link.href = '/images/pizza-hero.cif';
document.head.appendChild(link);

7.3 접근성: WCAG 2.1 AA

html<!-- ARIA 라벨 -->
<button aria-label="3D 피자 모델 회전" class="rotate-btn">회전</button>

<!-- 색상 대비: 4.5:1 이상 -->
<!-- h1.gold (#D4AF37) on cream bg (#F5E6D3) = 8.2:1 ✓ -->

<!-- 모션 감소 설정 -->
<style>
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
</style>

<!-- 키보드 네비게이션 -->
<div role="group" aria-label="카드 네비게이션">
  <button tabindex="0">이전</button>
  <div class="card-list" role="listbox">
    <!-- 카드 -->
  </div>
  <button tabindex="0">다음</button>
</div>

---

VIII. 실무 체크리스트

디자인 검증

• 색감 팔레트 테스트 (Coolors, Adobe Color)
• 골든아워 그라데이션 실시간 테스트 (시간대별)
• 프레스코 질감 오버레이 검증
• 명도 대비 WCAG AA 확인 (Contrast Checker)

기술 구현

• Three.js 3D 장면 렌더링
• WebGL 성능 프로파일링 (GPU 사용률 <70%)
• WebXR 세션 초기화 테스트 (Quest, Vision Pro)
• AR 평면 감지 정확도 (현장 테스트)
• 모바일 반응형 (375px, 1024px, 1920px 구간)

컨텐츠 최적화

• CIF 이미지 생성 (80% 크기 감소)
• 번들 크기 <300KB (js, css, fonts)
• 폰트 서브셋 (한글 + 이탈리아어)
• 캐싱 전략 (Service Worker)

검증 & 배포

• Lighthouse 스코어 90+ (Performance, Accessibility)
• 크로스 브라우저 테스트 (Chrome, Safari, Edge, Firefox)
• VR 헤드셋 테스트 (Meta Quest 3, Apple Vision Pro)
• 현장 AR 테스트 (Padella 피제리아)
• CDN 캐싱 + HTTPS 인증서

---

IX. 참고 자료 및 출처

웹 설계 & 라이팅

• Interactive Storytelling for the Web: Codrops 2026
• Golden Hour Gradient Palettes: SchemeColor
• CSS Gradient Collections: UIGradients

WebXR & 3D

• Atlas Obscura WebXR 2026 Virtual Lounge
• Alpha3D: AI 3D Model Generation
• WebGL & 3D on the Web: DEV Community

르네상스 미학 & 황금비율

• 이탈리아 르네상스 회화: Wikipedia
• 프레스코 기법: Wikipedia

재귀 & 프랙탈 설계

• Mathematical Modeling Recursive Fractals: MDPI 2024
• Runestone: Recursive Fractals in Programming

Crowny 표준

• /Users/ef/CrownyOS/crownyc/CLAUDE.md — 한선씨 언어 스펙
• /Users/ef/CrownyOS/docs/ISA729_QUICK_REF.md — 3진 구조 참고
• /Users/ef/Crowny/crowni-tvm/docs/CROWNY-CANON-v1.0.md — 정식 스펙

---

X. 다음 단계 (액션 아이템)

1. Figma/Sketch 목업 작성 (무드보드 + 프로토타입)

- 색감 팔레트 검증 - 레이아웃 그리드 (3진 분할) - 애니메이션 스토리보드

1. Three.js 프로토타입 (3D 피자 + 카메라)

- 기본 지오메트리 + 텍스처 - 포인터 제어 테스트 - 성능 벤치마크 (GPU 프로파일링)

1. WebXR 테스트 (Meta Quest 3 + Vision Pro)

- 공간 매핑 (평면 감지) - 핸드 트래킹 제스처 - 음성 인식 (이탈리아어)

1. 현장 AR 검증 (Padella 피제리아)

- 라이팅 조건 스캔 (시간대별) - 테이블 표면 거칠기 - 사용자 경험 피드백

1. 한선씨 동적 레이아웃 엔진 구현

- 3진 격자 자동 생성 - 스케일링 & 반응형 로직 - 의미 벡터 저장소 연계

---

문서 작성자: Claude Code 최종 갱신: 2026-06-15 상태: 실무 검증 중