Learn through code.
Build real things.
Structured courses, hands-on tutorials, and in-depth articles covering GSAP animation, D3 data visualization, CSS techniques, Three.js, Canvas, and UX engineering.
Courses
D3 Data Visualization
From bar charts to interactive 3D globes — 6 essential D3.js v7 patterns
개발 환경 입문
터미널부터 Vercel 배포까지 — 코딩 경험 없이 시작하는 개발 환경 세팅
GSAP Animation
Scroll effects, 3D transforms, SVG drawing, smooth scroll — 17 essential GSAP patterns
Three.js for Interactive Content
Build scroll-driven 3D scenes, product viewers, particle systems, and shader effects — patterns you can ship on real projects
Vibe Coding for UX Engineering
Build production-ready UI with Claude Code — prompting, iteration, CSS, GSAP animations, JS interactions, and real project delivery
Tutorials
Standalone demos with live code. Pick any topic, open the demo, inspect the source.
Blog
UX design, tooling, and front-end craft — in Korean.
-
바이브코딩은 프롬프트가 아니라 루프로 한다: 실제 사용 방법 정리 바이브코딩에서 중요한 것은 좋은 프롬프트 하나보다 반복 가능한 작업 루프다. 계획, 구현, 검증, 수정, 재검증을 구조화해야 한다. -
Git Worktree 없이 AI 코딩 세션을 병행해서 사용하는 방법 Git worktree 없이도 여러 AI 코딩 세션을 병행할 수 있다. 핵심은 모든 세션을 수정자로 쓰지 않고 분석, 구현, 리뷰 역할로 나누는 것이다. -
바이브코딩에서 여러 AI 코딩 세션을 동시에 사용할 때 안전하게 작업하는 방법 여러 Claude Code 세션을 같은 폴더에서 동시에 실행하면 파일 수정과 Git 상태가 섞일 수 있다. Git worktree로 작업 공간과 브랜치를 분리하는 안전한 병렬 워크플로우를 정리한다. -
Claude Code vs Claude Cowork: Which Anthropic Tool Should You Use? Claude Code is built for software projects, while Claude Cowork is built for multi-step knowledge work across files and documents. -
티빙 개인정보 유출, CI까지 유출됐다면 어떻게 대응해야 할까? 티빙 개인정보 유출 사고에서 CI, DI, 휴대폰번호, 환불계좌, 비밀번호가 포함됐을 때 확인해야 할 대응 순서를 정리한다.