UX Engineering
Learn through code.
Build real things.
Structured courses and hands-on tutorials covering GSAP animation, D3 data visualization, CSS techniques, Three.js, Canvas, and UX engineering.
Courses
Course6lessons
D3 Data Visualization
From bar charts to interactive 3D globes — 6 essential D3.js v7 patterns
Start learning→
Course9lessons
개발 환경 입문
터미널부터 Vercel 배포까지 — 코딩 경험 없이 시작하는 개발 환경 세팅
Start learning→
Course17lessons
GSAP Animation
Scroll effects, 3D transforms, SVG drawing, smooth scroll — 17 essential GSAP patterns
Start learning→
Course10lessons
Three.js for Interactive Content
Build scroll-driven 3D scenes, product viewers, particle systems, and shader effects — patterns you can ship on real projects
Start learning→
Course준비중
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.
UI Components 8 demos Design System 4 demos CSS 6 demos Canvas 2D 3 demos Three.js 4 demos Motion 4 demos Transitions 5 demos
Blog
UX design, tooling, and front-end craft — in Korean.
- 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 톤을 바탕으로 정확성, 최신 정보 확인, 출력 구조를 명확히 지정하는 편이 좋다.
- Claude Code Auto-research 이해와 사용법 Claude Code에서 Auto-research는 목표와 검증 지표를 기준으로 가설 수립, 코드 수정, 테스트를 반복하는 자율 실험 루프다.
- GitHub SSH 인증키 연결하기 GitHub에 SSH 인증키를 연결하면 git push나 git pull을 실행할 때마다 아이디와 비밀번호를 입력하지 않아도 된다.