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
GSAP Animation
Scroll effects, 3D transforms, SVG drawing, smooth scroll — 17 essential GSAP patterns
개발 환경 입문
터미널부터 Vercel 배포까지 — 코딩 경험 없이 시작하는 개발 환경 세팅
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.
-
Mac Finder에서 HEIC를 JPG·PNG로 한 번에 변환하는 방법 아이폰에서 옮긴 여러 HEIC 사진을 Mac Finder의 빠른 동작으로 JPEG 또는 PNG로 일괄 변환하는 절차와 포맷 선택 기준, AI 업로드 호환성과 로컬 변환의 장점을 단계별로 정리합니다. -
Aside Browser란? AI 브라우저 에이전트의 특징과 바이브 코딩 활용법 Aside Browser가 로그인된 웹과 개발 도구를 어떻게 연결하는지 살펴봅니다. Browser Agent의 구조, CLI·MCP 활용법, 바이브 코딩 워크플로, 개인정보와 권한 설정의 주의점을 공식 자료 기준으로 정리했습니다. -
Threads API 활용 가이드: 앱 설정부터 OAuth, 게시 자동화까지 Threads API는 단일 API Key가 아니라 Threads App ID·Secret과 OAuth 사용자 토큰으로 동작합니다. 앱 생성부터 권한, 장기 토큰, Next.js 게시 자동화, 디버깅과 사용량 확인까지 공식 문서 기준으로 정리합니다. -
Open Design AI란? 오픈소스 AI 디자인 도구 설치·활용법과 주요 특징 Open Design AI는 코딩 에이전트를 디자인 엔진으로 연결하는 오픈소스·Local-first 워크스페이스입니다. 설치법과 Claude Design과의 차이, DESIGN.md·MCP 활용법을 정리합니다. -
Recraft.ai 사용법 총정리: 디자이너를 위한 AI 이미지·벡터 생성 도구 Recraft.ai는 사진과 일러스트 생성부터 SVG 벡터 제작, 배경 제거, 업스케일링, 목업, 이미지 편집까지 한 캔버스에서 처리하는 디자이너 중심 AI 도구입니다. 최신 모델 선택법과 실무 워크플로를 함께 정리합니다.