프론트엔드 개발자가 북마크해야 할 리소스 모음 (2/3) - UI & 인터랙션편

프론트엔드 개발을 하면서 어떤 CSS 프레임워크, 애니메이션 라이브러리 쓸까 라는 고민해 보신 적 있으신가요?

UI 구현과 시각적 표현에 필요한 도구들을 정리해 봤습니다. 필요할 때마다 찾아보세요!

---

🛠️ 디자인 & 프로토타이핑 도구

디자인 도구

• Figma - 협업 디자인 도구
• Sketch - macOS 전용 디자인 도구

프로토타이핑 도구

• Framer - 인터랙티브 프로토타이핑
• ProtoPie - 코드 없는 프로토타이핑

디자인 to 코드

• Figma Dev Mode - Figma 디자인을 코드로
• Anima - 디자인을 React/Vue 코드로 변환

온라인 디자인 도구

• Canva - 온라인 디자인 도구

🎬 애니메이션 & 모션

JavaScript 애니메이션 라이브러리

• GSAP - 고성능 JavaScript 애니메이션
• Motion - React 모던 모션 라이브러리 (구 Framer Motion)
• React Spring - React 기반 물리 애니메이션
• Anime.js - 경량 JavaScript 애니메이션

CSS 애니메이션

• Animate.css - 즉시 사용 가능한 CSS 애니메이션
• Animista - CSS 애니메이션 생성기

로티 & 벡터 애니메이션

• Lottie Files - 로티 애니메이션 라이브러리
• Lottie React - React용 Lottie

🎯 마이크로 인터렉션 & UI 효과

Pre-made 컴포넌트

• Aceternity UI - 고급 인터렉션 컴포넌트
• Magic UI - React 애니메이션 컴포넌트
• shadcn/ui - 복사 가능한 컴포넌트 라이브러리

CSS 효과 라이브러리

• Hover.css - 호버 효과 모음

로딩 & 인디케이터

• UI Ball - 로딩 애니메이션 컴포넌트
• SpinKit - CSS 스피너 모음
• CSS Loaders - 순수 CSS 로더

예제 & 영감

• CodePen Micro Interactions - 실전 예제
• Dribbble Micro Interactions - 디자인 영감
• UI Movement - UI 애니메이션 갤러리

🌐 3D 프로그래밍

Three.js 학습 리소스

• Three.js Documentation - 공식 Three.js 문서
• Three.js Manual - Three.js 매뉴얼 가이드
• Three.js Journey - Bruno Simon의 Three.js 완전 강의

React Three Fiber

• React Three Fiber - React용 Three.js
• Drei - React Three Fiber 헬퍼 라이브러리
• Leva - React GUI 컨트롤

WebGL & 3D 라이브러리

• Babylon.js - 웹 3D 게임 엔진
• A-Frame - WebVR 프레임워크

🛠️ CSS & UI 도구

CSS 프레임워크

• Tailwind CSS - 유틸리티 퍼스트 CSS
• Bootstrap - UI 컴포넌트 프레임워크
• Bulma - 모던 CSS 프레임워크

CSS-in-JS

• Styled Components - React CSS-in-JS
• Emotion - CSS-in-JS 라이브러리

CSS 생성기

• CSS Grid Generator - CSS Grid 레이아웃 생성기
• Neumorphism - 뉴모피즘 CSS 생성기
• Fancy Border Radius - border-radius 생성기
• Glassmorphism - 글래스모피즘 생성기

그림자 & 효과

• Shadow Palette Generator - 그림자 팔레트 생성기
• Box Shadows - box-shadow 예제 모음
• CSS Clip-path Maker - clip-path 생성기

레이아웃 학습 도구

• Grid.layoutit - CSS Grid 시각화 도구
• Flexbox Froggy - Flexbox 학습 게임
• Grid Garden - CSS Grid 학습 게임
• CSS Battle - CSS 챌린지 게임

🎨 UI 컴포넌트 라이브러리

React UI 라이브러리

• MUI (Material-UI) - Material Design 컴포넌트
• Ant Design - 엔터프라이즈급 UI 라이브러리
• Chakra UI - 접근성 우선 컴포넌트
• Mantine - 풀스택 React 컴포넌트

Headless UI 라이브러리

• Radix UI - 무헤드 UI 컴포넌트
• Headless UI - Tailwind 팀이 만든 컴포넌트
• React Aria - Adobe의 접근성 후크

📐 SVG & 벡터 도구

SVG 편집 & 최적화

• SVGOMG - SVG 최적화 도구
• Boxy SVG - 온라인 SVG 편집기
• SVG Path Editor - SVG 패스 편집기

SVG 애니메이션

• SVGArtista - SVG 애니메이션 도구
• Vivus - SVG 선 그리기 애니메이션

---

💬 도움이 되셨나요? 유용한 리소스가 있다면 댓글로 공유해 주세요!