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.
- ChatGPT 설정과 Custom Instructions 베스트 프랙티스 보편적이고 객관적인 결과를 원한다면 ChatGPT는 Professional 또는 Default 톤을 바탕으로 정확성, 최신 정보 확인, 출력 구조를 명확히 지정하는 편이 좋다.
- Claude Code Auto-research 이해와 사용법 Claude Code에서 Auto-research는 목표와 검증 지표를 기준으로 가설 수립, 코드 수정, 테스트를 반복하는 자율 실험 루프다.
- GitHub SSH 인증키 연결하기 GitHub에 SSH 인증키를 연결하면 git push나 git pull을 실행할 때마다 아이디와 비밀번호를 입력하지 않아도 된다.
- 전략적 사고를 활용한 프롬프트 엔지니어링 복잡한 문제에서는 AI에게 무엇을 해야 하는지뿐 아니라 어떤 방식으로 생각해야 하는지까지 지시해야 더 깊은 결과를 얻을 수 있다.
- DESIGN.md란 무엇인가? AI 시대의 디자인 기준서를 정리하는 새로운 방식 AI 코딩 도구를 활용해 UI를 만들고 화면을 빠르게 실험하는 흐름이 보편화되면서, 이제는 단순히 “좋아 보이는 디자인”을 만드는 것보다 “일관된 기준에 맞는 디자인”을 유지하는 일이 더 중요해졌습니다. 문제는 이 기준이 사람끼리만 공유되는 문서에…