Figma
브라우저에서 함께 쓰는 대표 UI 디자인 도구.
디자인 도구
출처Design tools and generators (hand-picked) 62
Photopea
브라우저에서 쓰는 포토샵 비슷한 이미지 편집기.
Blender
오픈소스 3D 제작 프로그램(모델링·렌더·애니메이션).
Color Hunt
사람들이 고른 4색 팔레트를 모아 둔 곳.
Coolors
스페이스바를 누를 때마다 색 조합을 만들어 주는 팔레트 생성기.
Framer
디자인하듯 웹사이트를 만들고 바로 공개하는 도구.
Stitch (Google)
글로 설명하면 앱 화면 디자인과 코드를 만들어 주는 구글 AI 도구.
v0
글로 설명하면 React·shadcn/ui 화면 코드를 만들어 주는 Vercel AI 도구.
눈누 (noonnu)
상업용 무료 한글 글꼴을 모아 검색하는 곳. 글꼴마다 라이선스는 각 제작사 페이지에서 다시 확인한다.
Adobe Color
색상환 규칙(보색, 유사색)으로 팔레트를 만들고 대비를 확인하는 도구.
Excalidraw
손그림 느낌으로 화면 구상·도식을 그리는 오픈소스 화이트보드.
Squoosh
브라우저에서 이미지 용량을 줄이고 형식(WebP·AVIF)을 바꾸는 구글 도구.
TinyPNG
PNG·JPG·WebP 용량을 줄이는 도구.
favicon.io
글자·이모지·이미지로 파비콘을 만드는 도구.
Inkscape
오픈소스 벡터 그림 프로그램(SVG 편집).
Penpot
오픈소스 UI 디자인·프로토타입 도구. 직접 설치해 쓸 수도 있다.
shadcn/ui Themes
shadcn/ui 공식 테마 고르기와 CSS 변수 복사.
Spline
브라우저에서 3D 장면을 만들고 웹에 넣는 도구.
tldraw
무한 캔버스 화이트보드. 앱에 넣는 SDK도 있다.
CSS Gradient
CSS 그라디언트 생성기와 예시.
Huemint
머신러닝으로 브랜드·웹사이트 색 조합을 만들어 주는 도구.
Lorem Picsum
주소만으로 받는 무작위 사진 자리 표시 이미지(Unsplash 사진).
Radix Custom Palette
브랜드 색 하나로 Radix 방식 12단계 색표를 만들어 주는 도구.
RealFaviconGenerator
여러 기기용 파비콘과 HTML 태그를 한 번에 만드는 도구.
Shots
스크린샷을 기기 목업에 넣어 꾸미는 도구.
Velvetyne
실험적인 오픈소스(OFL) 서체를 내는 프랑스 글꼴 공방.
WebAIM Contrast Checker
글자색과 바탕색의 명도 대비가 WCAG 기준을 넘는지 확인하는 도구.
Animista
CSS 애니메이션을 골라 조절하고 코드로 복사하는 도구.
BGJar
무료 SVG 배경 생성기.
Blobmaker
둥글둥글한 블롭 도형 SVG를 만드는 도구.
Bunny Fonts
Google Fonts와 같은 글꼴을 방문자 정보를 남기지 않고 내려주는 대체 CDN. 주소만 바꿔 쓴다.
Canva
템플릿으로 썸네일·발표 자료·SNS 이미지를 만드는 디자인 도구.
Collletttivo
오픈소스 서체를 함께 만드는 이탈리아 글꼴 공방.
cubic-bezier.com
움직임 속도 곡선(cubic-bezier)을 눈으로 만들고 비교하는 도구.
Easings.net
자주 쓰는 움직임 속도 곡선(easing) 모음.
fffuel
노이즈·패턴·그라디언트 등 SVG 생성기 모음.
Fontjoy
어울리는 글꼴 조합(제목+본문)을 추천받는 도구.
Get Waves
구역 경계에 쓰는 물결 모양 SVG 생성기.
Glassmorphism CSS Generator
유리처럼 비치는 글래스모피즘 CSS 생성기.
Haikei
물결·얼룩·그라디언트 같은 배경 SVG를 만들어 주는 도구.
Leonardo
목표 대비값으로 접근성 맞춘 색 단계를 만드는 Adobe 오픈소스 도구.
Magic Pattern Tools
CSS 배경 패턴·그라디언트·블롭 생성기 모음.
Mesher (CSS Hero)
CSS 메시 그라디언트 생성기.
Neumorphism.io
뉴모피즘(볼록·오목한 그림자) CSS 생성기.
OKLCH Color Picker
OKLCH 색 공간으로 색을 고르고 변환하는 도구.
Open Foundry
오픈소스 서체를 큰 견본으로 보여 주는 곳.
Pattern Craft
Tailwind·CSS로 쓰는 배경 패턴·그라디언트 모음.
Placehold
크기·색·글자를 주소로 정하는 자리 표시 이미지.
Realtime Colors
고른 색을 실제 웹 화면에 바로 입혀 보고 CSS 변수로 내보내는 도구.
Rive
상호작용하는 벡터 애니메이션을 만들고 앱·웹에서 돌리는 도구.
Screely
스크린샷을 브라우저 창 틀에 넣어 예쁘게 꾸미는 도구.
Shadow Palette Generator
자연스러운 겹그림자(box-shadow)를 만들어 주는 도구.
Smooth Shadow
여러 겹의 부드러운 그림자 CSS 생성기.
SVGOMG
SVG 파일의 군더더기를 줄여 주는 도구(SVGO 화면판).
The League of Moveable Type
오래된 오픈소스 글꼴 공방. League Gothic 등을 냈다.
tints.dev
Tailwind용 색 단계표 생성기. API로도 쓸 수 있다.
tweakcn
shadcn/ui 테마(색·글꼴·둥글기)를 눈으로 고치고 코드로 내보내는 편집기.
Type Scale
비율을 정하면 제목·본문 글자 크기 단계를 계산해 주는 도구.
UI Colors
색 하나로 Tailwind 식 50~950 단계표를 만들어 주는 도구.
Uncut
무료로 쓰는 현대적인 서체를 골라 모은 목록. 서체마다 라이선스는 제작자 페이지에서 본다.