디자인 도구 인덱스
용도별로 분류된 디자인 도구 내비게이션: 각 항목은 외부 링크 + 한 줄 설명으로 구성되어 빠른 도구 선정이 가능합니다. 아래 12개의 주요 카테고리에는 각각 2~3개의 가장 대표적인 도구를 나열하고, references/ 디렉토리에 있는 더 완전한 목록을 참조하도록 안내합니다. 나머지 24개 카테고리는 문서 하단의 '더 많은 카테고리' 섹션을 참조하여 필요 시 해당 레퍼런스 파일을 열면 됩니다. 항목은 Awesome-Design-Tools에서 가져왔습니다.
애니메이션 도구
인터페이스/제품을 위한 모션 및 상호작용 애니메이션(마이크로인터랙션, 전환, 모션) 제작.
- Lottie — AE 애니메이션을 JSON으로 내보내 모바일과 웹에서 네이티브로 렌더링합니다.
- GSAP — 모든 주요 브라우저에서 스크립트 기반의 고성능 HTML5 애니메이션을 위한 도구 모음입니다.
- After Effects — Adobe의 모션 그래픽, 시각 효과 및 합성 앱입니다.
→ 전체 목록(Haiku, Flare, Kite, Keyshape 등)은
references/prototyping-and-animation.md를 참조하세요.
색상
색상 구성표 및 팔레트 생성 또는 선택.
- Coolors — 초고속 색상 구성표 생성기입니다.
- Adobe Color — 색상환을 사용해 구성표를 만들거나 커뮤니티 조합을 탐색합니다.
- Color Hunt — 영감을 위한 수천 개의 수작업으로 선별된 트렌디한 색상 팔레트입니다.
→ 전체 목록(Khroma, Paletton, Sip, Pigment 등)은
references/color.md를 참조하세요.
그라데이션
CSS/배경 그라데이션 생성.
- UI Gradients — 아름다운 색상 그라데이션의 수작업 선별 컬렉션입니다.
- CSS Gradient — 화려한 배경을 위한 무료 CSS 그라데이션 생성기입니다.
- Web Gradients — 콘텐츠 배경으로 사용 가능한 180개의 무료 선형 그라데이션입니다.
→ 전체 목록(Grabient, CoolHue, Gradienta 등)은
references/color.md를 참조하세요.
프로토타입
상호작용 가능한 고충실도 프로토타입 제작.
- Framer — 사실적인 인터랙티브 프로토타입을 시각적으로 디자인합니다.
- InVision — 프로토타이핑, 협업 및 워크플로 플랫폼입니다.
- ProtoPie — 고충실도 인터랙션과 센서 지원 프로토타입을 몇 분 안에 조립합니다.
→ 전체 목록(Marvel, Origami, Principle, Axure, UXPin 등)은
references/prototyping-and-animation.md를 참조하세요.
디자인 핸드오프 (Design Handoff)
개발자에게 디자인 스펙, 명세, 이미지 잘라내기 및 코드 조각 전달.
- Zeplin — 정확한 스펙, 에셋 및 코드 스니펫으로 디자인과 스타일 가이드를 전달합니다.
- Avocode — 디자인 도구 없이 디자인을 열고, 레이어를 클릭하여 코드를 확인합니다.
- InVision Inspect — 개발을 위해 디자인을 준비합니다.
→ 전체 목록(Sympli, Sketch Measure, Flawless App, Specctr 등)은
references/handoff-and-code.md를 참조하세요.
디자인 투 코드 (Design to Code)
디자인 파일을 실행 가능한 코드나 웹사이트로 변환.
- Webflow — 브라우저에서 반응형 사이트를 구축하고 호스팅하거나 코드를 내보냅니다.
- Anima — Sketch 플러그인/웹 앱으로 Sketch 디자인을 HTML로 변환합니다.
- Supernova Studio — Sketch 디자인을 Android, iOS 또는 React Native 코드로 변환합니다.
→ 전체 목록(PaintCode, Pinegrow, Tilda, Draftbit 등)은
references/handoff-and-code.md를 참조하세요.
아이콘
아이콘 라이브러리 및 도구.
- Feather Icons — 단순함, 일관성 및 가독성을 강조한 24x24 그리드의 아이콘입니다.
- Font Awesome — 웹에서 가장 인기 있는 오픈소스 아이콘 세트이자 툴킷입니다.
- Material Design Icons — 오픈소스 기여를 통한 무료 Material Design 아이콘입니다.
→ 전체 목록(Flaticon, Icons8, Simple Icons, SVGRepo 등)은
references/graphic-assets.md를 참조하세요.
폰트
폰트 리소스, 관리 및 페어링.
- Google Fonts — 뛰어난 타이포그래피로 웹을 더 아름답고 개방적으로 만듭니다.
- Adobe Fonts — Adobe의 수천 가지 아름다운 폰트입니다.
- FontPair — Google Fonts를 함께 페어링하는 데 도움을 줍니다.
→ 전체 목록(DaFont, FontBase, Font Squirrel, RightFont 등)은
references/graphic-assets.md를 참조하세요.
일러스트레이션
일러스트레이션 에셋 라이브러리 및 생성기.
- unDraw — 아름다운 SVG 이미지 컬렉션입니다.
- Blush — 전 세계 아티스트의 일러스트레이션을 만들고, 혼합하고, 커스터마이즈합니다.
- Humaaans — 사람 일러스트레이션을 믹스 앤 매치하는 무료 라이브러리입니다.
→ 전체 목록(ManyPixels, Open Doodles, Blobmaker, IRA Design 등)은
references/graphic-assets.md를 참조하세요.
목업 (Mockup)
제품/기기 시제품 전시.
- Smartmockups — 몇 번의 클릭으로 제품 목업을 만듭니다.
- Artboard Studio — 제품 목업에 특화된 온라인 그래픽 디자인 앱입니다.
- Rotato — 앱 디자인을 위한 애니메이션 3D 목업입니다.
→ 전체 목록(Device Shots, Mockup World, Mockuuups, Threed 등)은
references/mockup.md를 참조하세요.
UI 디자인
인터페이스 및 시각 디자인 도구.
- Figma — 실시간 협업이 가능한 브라우저 기반 디자인 및 프로토타이핑 도구입니다.
- Sketch — Mac 전용 디자인 툴킷입니다.
- Adobe XD — 웹, 모바일 및 음성을 위한 UX를 디자인, 프로토타이핑 및 공유합니다.
→ 전체 목록(Photoshop, Illustrator, Affinity, Inkscape, Photopea 등)은
references/ui-and-wireframe.md를 참조하세요.
와이어프레임
저충실도 와이어프레임 및 구조 스케치.
- Balsamiq Cloud — 협업이 가능한 손쉬운 UI 스케치 도구입니다.
- Wireframe.cc — 방해받지 않는 간단한 와이어프레임 도구입니다.
- Whimsical Wireframes — 풍부한 요소 라이브러리로 즉시 와이어프레임을 만듭니다.
→ 전체 목록(Pidoco, Gliffy, Layoutit, BLOKK 등)은
references/ui-and-wireframe.md를 참조하세요.
더 많은 카테고리 (필요 시 레퍼런스 읽기)
다음 카테고리는 메인 페이지의 주요 선정 항목에 포함되지 않았습니다. 해당 요구 사항이 발생하면 해당 레퍼런스 파일을 직접 열면 됩니다. 각 파일의 상단은 분류별로 정리되어 있습니다.
- 접근성 도구 (WCAG 검사, 명도 대비, 색맹 시뮬레이션) →
references/accessibility.md - 사용자 조사 / 정보 구조 / 사용자 흐름 / 경험 모니터링 (리쿠르팅 인터뷰, 카드 소팅, 사이트맵, 사용자 흐름도, 히트맵, 이벤트 분석) →
references/user-research-and-ia.md - 협업 / 디자인 피드백 / 디자인 버전 관리 (팀 협업, 주석 검토, 디자인 파일 Git) →
references/collaboration-feedback-vcs.md - 디자인 시스템 / 개발 도구 / 시각적 디버깅 / 노코드 (컴포넌트 라이브러리 문서, 개발 브라우저, 웹 검사기, 노코드 빌더) →
references/design-systems-and-dev.md - 미디어 에셋 (무료 이미지/비디오/사운드/스크린샷 소프트웨어) →
references/media-assets.md - 창작 / 영감 / 학습 (영감 사이트, 디자인 강좌, 로고, 소셜 미디어 디자인, 손 그림 스케치, 픽셀 아트) →
references/creation-and-inspiration.md - 3D 모델링 / 증강 현실 →
references/3d-and-ar.md
더 많은 awesome 디자인 관련 전체 목록은 https://github.com/sindresorhus/awesome 를 참조하세요.