K-VRC · 제안서 웹사이트

UNIST 주관 K-VRC (Korean Vertical 3D for Real-world Clinical & industrial Applications) IITP R&D 제안서의 공식 랜딩 페이지.

---

1. 실행 방법

정적 파일로만 구성된 단일 페이지. index.html을 브라우저로 직접 열기만 해도 동작한다 (인터넷 연결 필요 — Tailwind·GSAP·Lenis·d3·Three.js CDN 로드).

# 가장 간단
open index.html           # macOS
start index.html          # Windows
xdg-open index.html       # Linux

로컬 서버로 서빙해도 됨 (file:// 에서 module import가 차단되는 구형 브라우저·일부 보안 설정 환경 대비).

python3 -m http.server 8080
# 또는: npx serve .  |  npx http-server -p 8080

접속. http://localhost:8080/

영문 병기 페이지 http://localhost:8080/en/ (현재 shell만, MVP에서 한국어 primary로 redirect).

단일 파일 동작 원리

GLSL shader 2개(noise.vert.glsl · noise.frag.glsl) 와 Consortium 그래프 JSON은 index.html 의 <script id="shader-vert"> · <script id="shader-frag"> · <script id="consortium-data"> 블록에 인라인 포함되어 있어 로컬 fetch() 없이 textContent로 읽어 사용한다. /shaders/ · /assets/data/ 폴더의 동일 파일은 참조·감사용 백업(동기화 유지 권장).

필수 외부 리소스 (인터넷 연결 필요).

• Pretendard Variable · Inter · JetBrains Mono (CDN)
• Tailwind Play CDN
• GSAP + ScrollTrigger
• Lenis
• Three.js (ESM importmap)
• d3-force · d3-selection · d3-drag

---

2. 주요 디자인 결정

2.0 섹션 ID · Bridge ID 표기 체계

• 섹션 anchor id — #hero · #why · #gap · #tracks · #roadmap · #consortium · #kpi · #team · #cta 의 9개. #why가 "Why Now" 섹션의 anchor다(#whynow 아님).
• Bridge data-id — hero-whynow · whynow-gap · gap-tracks · tracks-roadmap · roadmap-consortium · consortium-kpi · kpi-team · team-cta 의 8개. assets/data/bridges.json의 id 필드이며, 섹션 id가 아닌 compound key다.
• 섹션과 bridge는 <section> → <div class="bridge"> → <section> 순서로 섹션 사이에 삽입된다. 9 섹션 사이의 8 틈에 1:1 대응.

2.1 단일 파일 구성

• index.html · style.css · script.js 세 파일이 전체 인터랙션을 담는다. script.js는 설계 문서 §10의 다파일 분리 대신 **단일 파일 + 14개 IIFE 섹션 (S0-S14)**으로 통합했다. 재빌드 시 파일 간 import 관리 비용을 제거하고, 각 IIFE 상단 주석이 모듈 경계를 한다.
• shaders/noise.{frag,vert}.glsl 2종만 별도. Three.js가 fetch로 읽는다.

2.2 팔레트·타이포 — Depth Tech Dark-first

• base #0B0D12, surface #141821, ink #F5F7FA, accent cyan #6EE7FF · coral #FF6B6B · amber #FFD166.
• 트랙 accent — O1 #E64966+#F5EEE6, O2 #4ADEDE+#2B2D36, O3 #B16CEA+#FF5CAA. 페르소나 D Talent 전용 #7BEF9C.
• Pretendard Variable + Inter + JetBrains Mono + word-break: keep-all.
• Display clamp clamp(2.5rem, 8vw, 7rem). Counter는 tabular-nums로 CLS 방지.

2.3 배경 애니메이션 — WebGL shader + 400 pt particle

• <canvas id="bg"> 한 장이 전역 배경. simplex noise 3색 mix fragment shader. uniforms — u_time · u_mouse · u_color_{a,b,c} · u_accent_strength · u_beat_pulse · u_noise_scale · u_grain.
• Three.Points 400개가 fluid float → hero scroll 진행도(0-0.33 tooth → 0.33-0.66 arm → 0.66-1.0 game)에 따라 lerp morph. u_morph_factor가 자유 유영과 target 위치의 혼합 비중을 담는다.
• Hero 3-beat GSAP master timeline이 kinetic typography(clip-path mask reveal · underline sweep)와 shader uniform(u_beat_pulse, u_noise_scale, u_accent_strength)을 한 번에 지휘한다. script.js S6 참조.
• Why Now 섹션 진입 시 u_color_b가 cyan → amber → dim coral로 scrub 보간.
• Tracks 섹션 각 panel은 IntersectionObserver로 data-active-track 갱신 + shader hue GSAP tween.
• 모바일·reduced-motion 폴백. matchMedia 체크 후 canvas 제거, body.bg-fallback 클래스로 conic-gradient + blur 정적 배경. prefers-reduced-motion: reduce일 때 gsap.globalTimeline.timeScale(0.01).

2.4 인터랙션 카탈로그 15개

S1 Lenis · S2 nav spy + TOC · S3 cursor follower + magnetic · S4 reveal + number counter + RQ typing + card tilt · S5 Bridge reveal (opacity max 0.85, scrub bind) · S6 Hero 3-beat · S7 shader + particle · S8 horizontal pin timeline + warm shift + live D-day · S9 Venn morph + priority bubbles · S10 Track hue morph + layer stack · S11 Gantt fill + TRL polyline · S12 d3-force graph + filter · S13 KPI tabs + radial gauge + ROI area · S14 CTA particle burst.

2.5 접근성 · SEO

• lang="ko" · skip link · focus-visible ring · kinetic typography는 <h1 class="sr-only">로 평문 노출.
• hreflang ko/en/x-default · Open Graph · Twitter Card · JSON-LD ResearchProject schema · site.webmanifest · sitemap.xml · robots.txt 모두 포함.
• 모바일 대체 — Consortium force graph → <table class="rr-table"> fallback, Roadmap Gantt → 수직 단일 bar, Why Now horizontal pin → 수직 리스트.

---

3. 트러블슈팅

3.1 Hero particle이 뭉치지 않는다

heroProgress가 ScrollTrigger로 갱신되는데, #hero 섹션이 한 화면보다 작으면 start: 'top top' / end: 'bottom top'이 거의 즉시 끝난다. 해결.

• .section-hero 의 min-height: 100vh 확인.
• HERO_UNIFORMS.u_morph_factor가 hero timeline 말미에 0.5로 올라가는지 확인 (S6). 0이면 particles가 자유 유영만 한다.

3.2 shader가 검게만 보인다

1. index.html 의 <script id="shader-vert"> · <script id="shader-frag"> 블록이 존재·비어있지 않은지 확인 (S7이 document.getElementById('shader-frag').textContent로 읽는다).
2. SHOULD_DISABLE_WEBGL이 true → bg-fallback 경로로 빠졌을 수 있다. window.innerWidth > 768인지, prefers-reduced-motion 설정을 OS 레벨에서 해제했는지 확인.
3. Three.js CDN 로드 실패 — 콘솔의 importmap·module 해석 에러 확인.

3.3 ScrollTrigger가 Lenis와 어긋난다

gsap.ticker.add(time => lenis.raf(time * 1000)) + lenis.on('scroll', ScrollTrigger.update)가 S1에 있어야 한다. Lenis 미로드 시 native scroll로 fallback — 이때는 horizontal pin이 거친 stutter를 낼 수 있다. CDN 블록 여부 확인.

3.4 Consortium 그래프가 비어 있다

d3 분할 번들(d3-force + d3-selection + d3-drag)이 같은 전역 d3 네임스페이스에 올라온다. 하나라도 빠지면 d3.forceSimulation 또는 d3.select가 undefined. 네트워크 탭에서 CDN 3개 모두 200인지 확인. 실패 시 자동으로 .rr-table fallback이 모바일 이하에서만 나타나는데, 강제로 #network 숨기고 table 표시하려면 .network-wrap { display: none; } + .rr-table { display: table; }를 CSS에서 토글.

3.5 live D-day가 음수로 찍힌다

S8의 startDate = 2026-09-01 기준이다. 로컬 시스템 시간이 2026-09-01 이후면 0으로 clamp된다. 데모 시점에는 상관없으나 배포 후 실제 착수일 경과하면 badge를 제거하거나 문구를 "진행 중"으로 교체할 것.

3.6 알려진 제한

• OG 이미지 PNG는 D11에서 별도 렌더 필요. 현재 <meta og:image>는 URL만 선언돼 있다.
• Team PI 프로필은 monogram placeholder(주·백·심·성·김·백·Eunbyung·kuai). 실제 사진은 D12에 교체.
• Talent CTA 링크는 UNIST AIGS admission 추정 URL 사용. 공식 채용 URL 확정 시 교체.
• 영문 페이지(en/index.html)는 현재 redirect shell이다. 번역은 v2.

---

© 2026 K-VRC Consortium · 주관 UNIST · 2026.09 – 2029.08