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.
-
Demystifying Local Dev Servers: How to Run in the Background and Master Port Management Learn how to keep local dev servers out of your active terminal, manage background processes, audit ports, and resolve EADDRINUSE conflicts. -
Beyond the Blue Links: The Definitive Guide to GEO (Generative Engine Optimization) GEO helps content become the source AI engines retrieve, understand, and cite when they generate conversational answers, extending SEO for AI-driven search. -
Master the Pull Request: A Developer's Guide to Git CLI and GitHub Learn the professional pull request workflow: create a branch with Git, commit and push the work, open a PR on GitHub, respond to review, and clean up after merge. -
Self-Hosting Hermes AI Agent on a Mac Mini Use a Mac Mini as an always-on local AI server for Hermes Agent with Ollama models, a WebUI dashboard, macOS automation permissions, and safer Tailscale access. -
Claude Code로 편집 가능한 PowerPoint 덱 만드는 가장 효율적인 워크플로우 기존 콘텐츠로 전문적인 PowerPoint 덱을 만들 때는 PptxGenJS로 편집 가능한 PPTX를 생성하고, 디자인 시스템과 콘텐츠 구조를 코드로 분리하는 방식이 가장 효율적이다.