Vibe coding still needs
UX development.
The faster ideas become code, the more it matters that people can understand and enjoy what you build. Learn the principles and practice of UX development through courses, tutorials, and articles.
UX Development 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
Hands-on Tutorials
Start with the finished result, then compare it with the source to quickly understand the implementation and core patterns. Apply what you need directly to your work.
Blog
Insights on UX, interaction, and front-end implementation in the age of vibe coding.
-
젤다는 왜 여행으로 기억될까: 야숨·왕눈과 스카이림의 UX 야숨과 왕눈에서 오래 남는 것은 퀘스트의 결말만이 아니다. 비 때문에 돌아간 절벽과 직접 찾아간 장소도 기억이 된다. 풍경을 읽고 경로를 선택하는 UX가 여행감을 만드는 과정을 스카이림과 비교하며, 그래픽과 기억에 대한 단정도 다시 살펴본다. -
Hermes Agent vs OpenClaw: 2026년 현재 더 앞선 AI 에이전트는? 대화만 나누는 AI를 넘어, 파일을 읽고 터미널과 브라우저를 조작하며 예약 작업까지 수행하는 개인용 AI 에이전트 런타임이 빠르게 성장하고 있습니다. 오픈소스 진영에서는 Hermes Agent와 OpenClaw가 대표적인 비교 대상입니다. -
Aside vs Claude Desktop vs Playwright: 브라우저 제어 방식은 어떻게 다를까? 브라우저 자체가 에이전트인 Aside, 브라우저를 도구로 쓰는 Claude Desktop, 코드 중심 자동화 프레임워크 Playwright를 구조·로그인·판단·반복 안정성 관점에서 비교합니다. -
Mac Finder에서 HEIC를 JPG·PNG로 한 번에 변환하는 방법 아이폰에서 옮긴 여러 HEIC 사진을 Mac Finder의 빠른 동작으로 JPEG 또는 PNG로 일괄 변환하는 절차와 포맷 선택 기준, AI 업로드 호환성과 로컬 변환의 장점을 단계별로 정리합니다. -
Aside Browser란? AI 브라우저 에이전트의 특징과 바이브 코딩 활용법 Aside Browser가 로그인된 웹과 개발 도구를 어떻게 연결하는지 살펴봅니다. Browser Agent의 구조, CLI·MCP 활용법, 바이브 코딩 워크플로, 개인정보와 권한 설정의 주의점을 공식 자료 기준으로 정리했습니다.