Lab — 2026년 3월 23일
0 files+0-0
# Lab 프로젝트: 인터랙티브 모션 그래픽스 실험실 구축
이번 주에는 **Lab**이라는 새로운 프로젝트를 시작했습니다. 이는 다양한 인터랙티브 시각화와 모션 그래픽스를 실험해볼 수 있는 공간으로, Writing Map이라는 첫 번째 실험을 포함하고 있습니다. 핵심 기능은 태그 기반의 궤도 시스템(orbit system)으로, 노드들이 중력처럼 작동하는 스프링 상수에 따라 움직이며 상호작용합니다. 초기에는 93개의 태그가 있었지만, 유사한 카테고리들을 병합하여 75개로 정리함으로써 더 깔끔한 정보 구조를 만들었습니다.
UI/UX 측면에서는 사용자 경험을 다듬기 위해 여러 반복 작업을 거쳤습니다. 패널이 의도하지 않게 닫히는 문제를 수정했고, 호버 모션의 강도를 절반으로 줄여 과도한 움직임을 방지했습니다. 또한 캔버스 외부를 클릭하면 패널이 닫히도록 하는 직관적인 상호작용을 추가했으며, 스프링 상수를 조정하여 노드의 자석력 유지도를 최적화했습니다. 뷰포트의 가로/세로 비율에 따라 궤도의 반지름을 자동으로 조정하는 반응형 설계도 적용했습니다.
기술적으로는 Vite 빌드 시스템과 호환성 문제를 해결하고, 문법 오류를 제거하며 네비게이션 버튼을 복구하는 과정을 거쳤습니다. AI와의 협업을 통해 복잡한 물리 시뮬레이션 로직을 다듬고 사용자 인터랙션 플로우를 설계했습니다. 이 프로젝트는 단순한 시각화를 넘어 사용자가 정보를 탐색하는 방식 자체를 재정의하는 실험이 될 것으로 기대합니다.
커밋 기록
fix: don't close panel when clicking a tag node
13:59feat: halve hover motion intensity
13:58feat: close panel on canvas click (click outside)
13:57fix: halve magnet retention by doubling K_HOME spring constant
13:56feat: consolidate tags 93→75 by merging similar categories
13:53feat: viewport-adaptive orbits (W/H independent radii)
13:50fix: fix SyntaxError from duplicate const baseR + add back button
13:47fix: move writing-map.html to public/ for Vite build inclusion
13:44feat: add Writing Map to experiment list
13:41init: motion graphics lab + writing map
13:39