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.
-
ChatGPT vs. Codex: 일반 업무와 개발 에이전트 비교 2027년 7월 20일 기준 ChatGPT Work는 ChatGPT로, ChatGPT Codex는 Codex로 변경되었습니다. 일반 업무용 ChatGPT와 개발 에이전트 Codex를 비교합니다. -
Cerebras Explained: How a Wafer-Sized Chip Is Rethinking AI Computing AI performance depends on more than model quality. Cerebras uses a wafer-scale processor to reduce data movement and make training and inference faster. -
크롬 프로필 전환 단축키 총정리: Windows·Mac 빠른 전환 방법 Chrome 프로필 메뉴를 여는 기본 단축키부터 Windows와 macOS의 창 전환, 프로필별 바로가기와 전용 단축키 설정 방법까지 정리합니다. -
윈도우 10 스크린샷 단축키 총정리: Print Screen으로 영역 캡처 설정하기 윈도우 10의 전체 화면, 활성 창, 선택 영역 캡처 단축키를 정리하고, Print Screen 키 하나로 캡처 도구를 여는 설정과 문제 해결 방법을 안내합니다. -
macOS에서 Claude Code 다중 계정 완벽 정복하기: 인증 번거로움 해결부터 자동화까지 회사와 개인 Claude 계정을 분리하거나 사용 한도를 관리할 때 생기는 인증 마찰을 줄이고, macOS에서 여러 Claude Code 계정을 안정적으로 운용하는 방법을 정리합니다.