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.
-
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를 생성하고, 디자인 시스템과 콘텐츠 구조를 코드로 분리하는 방식이 가장 효율적이다. -
ChatGPT 설정과 Custom Instructions 베스트 프랙티스 보편적이고 객관적인 결과를 원한다면 ChatGPT는 Professional 또는 Default 톤을 바탕으로 정확성, 최신 정보 확인, 출력 구조를 명확히 지정하는 편이 좋다.