01
Archive of Making
완성 결과가 아니라 제작 과정과 판단 흔적을 먼저 보여준다.
004. LAB
실험의 아카이브
웹 렌더링, 모션, 인터랙션 프로토타입. 완성 전 단계의 날것 실험들.
Lab Concept / Structured Rawness
02
Monotone Precision
색은 절제하고 간격과 수평선으로 리듬을 만든다.
03
Fast Scan UI
카드 메타를 위로 끌어올려 10초 내 탐색이 가능하게 한다.
004. LAB
실험의 아카이브
웹 렌더링, 모션, 인터랙션 프로토타입. 완성 전 단계의 날것 실험들.
Lab Concept / Structured Rawness
01
Archive of Making
완성 결과가 아니라 제작 과정과 판단 흔적을 먼저 보여준다.
02
Monotone Precision
색은 절제하고 간격과 수평선으로 리듬을 만든다.
03
Fast Scan UI
카드 메타를 위로 끌어올려 10초 내 탐색이 가능하게 한다.
Exp.001
Bob Silhouette
헤어 실루엣 다이어그램. Three.js r128 + OrbitControls. 두상 뼈대와 무게중심선 시각화.
Exp.002
Symbol Orbit
97LAYER 심볼 주변 궤도 파티클. WebGL 포인트 클라우드 실험. — 아카이브 중
Exp.003
Grain Layer
필름 그레인 오버레이 합성. Canvas 2D + SVG feTurbulence. — 아카이브 중
Exp.004
Type Motion
타이포그래피 모션. Intersection Observer + CSS clip-path reveal. — 아카이브 중
Exp.005
Symbol Particle
symbol.png 픽셀 샘플링 → Three.js 파티클 클라우드. 밝기 임계값 기반 포인트 분포.
Exp.006
SVG Draw-in
순수 SVG path draw-in 애니메이션. strokeDashoffset 시퀀스 + 완료 후 느린 자전. 마우스 3D 틸트.
Exp.007
Film Grain
필름 그레인 + 스캔라인 + 비네트 레이어드. Canvas 2D 실시간 노이즈 + toggle UI.
Exp.008
Keyframe Composer
Canvas 2D 키프레임 엔진. 8초 루프, easing 7종. 링/나선/ECG 레이어 타임라인 스크럽.
Exp.009
3D Keyframe
Exp.008 Three.js 포팅. TorusGeometry 링 4개 + TubeGeometry 나선/ECG. 마우스 패럴랙스 + 타임라인 UI.
Exp.010
Cut Diagram
단발(Bob) 커트 도해도. 두상 섹션 라인, 가이드라인, 분배선, 무게선 3D 시각화.
Exp.011
Ambient BGM
Web Audio API를 활용한 제너레이티브 앰비언트 사운드스케이프 실험. 오실레이터와 LFO 배위.
Exp.012
Ritual of Scissor
가위 절단의 행위를 캔버스 분할로 치환한 공감각 실험. 잘림을 통한 여백의 생성 과정.
Exp.013 [PRO]
Sectioning Architect 3D
B2B SaaS 프로토타입. 암호화된 프라이빗 라운지로 미용 교육용 3D 도해도 툴 및 PDF 추출 시스템 모의 실험.
Exp.014 [PRO]
Salon Blueprint
아이패드 대응 실무형 디지털 시술 처방전. 직접 커트 각도를 드로잉하고 카카오톡용 VIP 리포트로 추출합니다.
Exp.015
V4 Home Blueprint
홈페이지 랜딩 페이지(V4) 개편 과정을 투명하게 기록하는 시뮬레이터 뷰어 및 개발 산출물 아카이브.
Exp.016 [PRO]
Offering Prototype (Editorial)
네 가지 Offering에 대한 극단적 여백 및 활자 기반 재설계. Glassmorphism을 덜어내고 묵직한 속도감을 구현한 프로토타입.
Exp.017
Cinematic Video Intro
시네마틱 인트로 영상 시퀀스 실험. 스켈레톤 로딩 → 영상 페이드 인 → 타이포그래피 등장 연출.
Exp.018
3D Abstract Art Core
실시간 WebGL 렌더링 아트워크. 물리 기반 재질(PBR)과 시네마틱 조명을 활용한 고사양 3D 렌더링 실험.
Exp.019
AI Cinematic Opener
AI 비디오 에이전트(Luma, Runway 등) 생성 영상 기반 인트로 시스템. 고화질 MP4 렌더링 및 타이포그래피 시퀀스 통합.
Exp.020 [SPRINT]
Concept Sprint V2 Interior
브랜드 코어를 유지한 상태에서 방향/인테리어(동선, 재료, 조명)를 실시간 전환 검증하는 풀 데모 콘솔.
Exp.021 [MASTER]
The Orchestrator's Cut
WOOHWAHAE의 미학적 권위를 복구하기 위한 마스터 프로토타입. 탈-글래스모피즘, 비대칭 수직 리스트, 감각적 지연을 적용한 집도.
Exp.022 [ULTIMATE v7.0]
Ultimate Brand Prototype
Three.js 하이엔드 렌더링과 IBM Plex/Pretendard GUI의 결합. 외부 서버 배포를 위해 최적화된 WOOHWAHAE의 최종적 기술 미학 결정체.
Exp.023 [EQUILIBRIUM]
The Master Equilibrium
파격과 절제 사이의 균형점을 찾기 위한 마스터 템플릿. 정밀한 수직축 시스템과 탈-글래스모피즘을 통해 WOOHWAHAE의 본질적 우아함을 복구합니다.
Exp.024 [RENEWAL]
Full Renewal Showcase
웹페이지 전체 리뉴얼 형태를 한 화면에서 검토하는 통합 시안. 전 페이지 문법, 배치 순서, 검증 게이트를 동시 시뮬레이션.
Exp.025 [RENDER]
Live Render Switcher
홈·어바웃·아카이브·프랙티스·상품·결제·법무·404 실제 페이지를 탭으로 전환해 바로 보는 렌더링 데모.
Exp.026 [BOARD]
Renewal Decision Board
정체성·정보구조·운영 동선을 탭으로 전환하며 리뉴얼 우선순위를 점검하는 실행형 의사결정 데모.
004. LAB
실험의 아카이브
웹 렌더링, 모션, 인터랙션 프로토타입. 완성 전 단계의 날것 실험들.
Lab Concept / Structured Rawness
01
Archive of Making
완성 결과가 아니라 제작 과정과 판단 흔적을 먼저 보여준다.
02
Monotone Precision
색은 절제하고 간격과 수평선으로 리듬을 만든다.
03
Fast Scan UI
카드 메타를 위로 끌어올려 10초 내 탐색이 가능하게 한다.