디자인 영감 인덱스은(는) 무엇을 하나요?
검색 맵: "X에 대한 영감이 필요해, 그러니 Y 소스로 가." 공개 갤러리와 레지스트리의 인덱스이며, 디자인 권위자가 아닙니다. 참고 자료를 얻은 후에는 ui 스킬로 빌드하고 anti-slop으로 결과를 확인하세요. 사이트별 세부 정보(접근 방식, 형식, 필터, 검색 팁)는 references/galleries.md에 있습니다.
여기에 있는 어떤 것도 필수 사항이 아닙니다. 모든 소스는 공개 웹사이트이며, MCP 서버가 있는 두 곳(Mobbin, Refero)은 선택 사항으로 자주 사용하는 경우에만 연결할 가치가 있습니다.
X가 필요할 때는 Y로 가세요
| 필요할 때 | 이동할 곳 | 참고 사항 |
|---|---|---|
| 감상할 완전한 웹사이트 (폭넓은 취향 입력) | collected.li (셔플), siteofsites.co (필터 가능), unmatchedstyle.com (에디토리얼), recent.design (매일) | collected는 무작위 사이트 8개 표시; siteofsites는 플랫폼별 필터; unmatchedstyle은 트렌드 기사 포함 |
| 히어로 또는 전체 페이지 레이아웃 | landing.love (모션), craftwork.design/inspiration/websites (광범위) | landing.love는 전체 페이지 비디오 녹화 |
| 움직이는 랜딩 페이지 | landing.love | GSAP, WebGL 또는 ThreeJS 컬렉션으로 필터 |
| SaaS 마케팅 사이트 또는 한 가지 SaaS 페이지 유형 | saaspo.com | 페이지 유형(가격, 기능) 및 산업별 필터 |
| 가격 페이지 | saaspo.com (페이지 유형) 및 cta.gallery (CTA 블록) | |
| 내비게이션 바, 헤더 또는 메가 메뉴 | navbar.gallery | sticky, 메가 메뉴, 사이드바, 전체 화면별 필터 |
| 클릭 유도 문구, 가입 또는 뉴스레터 블록 | cta.gallery | 산업별, 버튼/양식/뉴스레터/모달별 필터 |
| 모션 또는 마이크로 인터랙션 아이디어 | 60fps.design (모션), designspells.com (아이디어와 이유) | designspells는 모바일 및 데스크톱에서 하나의 즐거운 디테일 설명 |
| 즐거운 디테일, 이스터 에그 또는 "매직" 터치 | designspells.com | 태그: 이스터 에그, 컨페티, 전환, 404 |
| 실제 제품 UI: 페이지 유형, 흐름, UX 패턴 (웹) | refero.design | 페이지 유형, 흐름, 패턴, 요소 또는 글꼴별 필터; 옵셔널 MCP 서버 있음 |
| OG 이미지, 앱 스토어 스크린샷, 앱 아이콘 | recent.design | 다른 곳에서는 거의 없는 전용 탭 |
| 로고, 브랜드 아이덴티티 또는 리브랜딩 | rebrand.gallery | 여기서 유일한 브랜딩 소스 |
| UI 컴포넌트 구축 또는 명명 방법 | component.gallery | 이름 별칭이 있는 교차 시스템 참조 (아코디언 = Collapse = Disclosure) |
| 즉시 사용 가능한 컴포넌트 코드 (React) | shadcn/ui, mapcn (매핑) | 프로젝트에서 이미 사용 중인 것부터 시작 |
| 미리 빌드된 앱 블록 (양식, 인증, 사이드바, 테이블) | blocks.so | 무료, 복사 및 붙여넣기 |
| 미리 빌드된 마케팅 및 랜딩 블록 | tailark.com (큐레이션), shadcnblocks.com (대규모, 프리미엄/무료 혼합), shadcnspace.com | 프리미엄/무료 혼합 |
| 복잡한 복합 위젯 (간트, 칸반, 에디터, 테이블) | kibo-ui.com | 무료, shadcn CLI 레지스트리 |
| 애니메이션 컴포넌트 또는 마이크로 인터랙션 코드 | smoothui.dev, ui-layouts.com | Motion 또는 GSAP 기반 |
| shadcn용 테마 생성 | shadcnstudio.com | 무료 커뮤니티 티어 |
| 레트로 또는 픽셀 아트 스타일 | 8bitcn.com | shadcn 리스타일, 의도적으로 틈새 시장 |
| React Aria 기반 접근성 컴포넌트 (Radix 아님) | intentui.com | Radix 기반 shadcn과 깔끔하게 혼합되지 않음 |
| 아이콘 또는 SVG | lucide.dev (기본값), react-icons, reicon.dev, hugeicons.com | Lucide는 shadcn 기본값, 스트로크 스타일; react-icons는 브랜드 로고를 포함한 많은 세트 번들; Reicon은 아웃라인과 채움 스타일; Hugeicons는 대규모 및 프리미엄/무료 혼합 |
| 모바일 앱 흐름 및 화면 | Mobbin | 로그인 필요; 있으면 MCP 서버 사용, 그렇지 않으면 사이트 사용 |
| 유명 브랜드의 디자인 시스템 문서 | the awesome-design-md 레포 (github.com/VoltAgent/awesome-design-md) | 디자인 언어 정의 전에 두세 개 읽어보기 |
| 리뷰 결과에 대한 명명된 UX 원칙 | lawsofux.com | 원칙 이름으로 인용: Fitts, Hick, Jakob, Peak-End |
| 컴포넌트 검색 또는 생성된 UI 변형 | 21st.dev | 새로운 UI를 직접 작성하기 전에 검색 |
자체 레지스트리를 제공하는 무료 컴포넌트 라이브러리는 블록을 수동으로 작성하기 전에 확인할 가치가 있습니다. 가져온 모든 것은 프로젝트의 토큰 및 접근성 규칙에 맞게 조정하세요.
연구할 디자인 엔지니어
영향력이 큰 사람들로, 그들의 사이트와 오픈 소스 작업은 연구하고 팔로우할 가치가 있습니다.
| 사람 | 사이트 | 알려진 분야 |
|---|---|---|
| Emil Kowalski | emilkowal.ski | Sonner, Vaul; 웹 애니메이션 기술 |
| shadcn | shadcn.com | shadcn/ui; 컴포넌트 복사 및 레지스트리 |
| Paco Coursey | paco.me | cmdk, next-themes; 키보드 우선 미니멀 UI |
| Rauno Freiberg | rauno.me | 인터페이스 불변성과 정교함의 이유 |
| Raphael Salaja | raphaelsalaja.com | 모션 풍부한 포트폴리오, 장난기 가득한 인터랙션 기술 |
| Gavin Nelson | nelson.co | 제품 및 아이콘 디자인 |
| floguo | floguo.com | 표현력 있는 마이크로 인터랙션, 개성 |
| Syed Subhan | syedsubhan.in | 마이크로 전환; Amicro (amicro.vercel.app) 제작, 재사용 가능한 마이크로 전환 패턴 모음 |
Mobbin 및 Refero: 옵셔널 MCP 서버
둘 다 로그인이 필요하며, 연결된 MCP 서버가 있으면 해당 서버를 통해 쿼리하는 것이 가장 좋습니다. Mobbin은 화면, 흐름 및 섹션 검색을 제공합니다. Refero의 서버는 https://api.refero.design/mcp에 있으며 (문서: https://doc.refero.design/mcp/getting-started) 실제 제품 화면을 반환합니다. 둘 다 없으면 사이트를 수동으로 탐색하세요. 스크래핑하지 마십시오.
접근성 치트 시트
의존하기 전에 확인하세요. 사이트는 변경될 수 있습니다.
- 공개 및 무료, 로그인 불필요: landing.love, navbar.gallery, cta.gallery, 60fps.design, collected.li, siteofsites.co, unmatchedstyle.com, recent.design, designspells.com, lucide.dev, reicon.dev, component.gallery, saaspo.com.
- 프리미엄/무료 혼합 (무료 탐색, 에셋 또는 전체 라이브러리 유료): craftwork.design, rebrand.gallery, hugeicons.com, refero.design.
- 로그인 또는 MCP 필요: Mobbin, refero.design.
이 중 여러 사이트(saaspo.com, component.gallery, landing.love, designspells.com)는 자동화된 가져오기를 403 또는 429로 차단하지만 일반 브라우저에서는 정상적으로 열립니다. godly.website는 이제 recent.design으로 리디렉션됩니다. 차단된 사이트에서 프로그래밍 방식으로 가져오려면 일반 HTTP 가져오기 대신 실제 브라우저(예: Playwright MCP가 설치된 경우)를 구동하세요.
이 인덱스 확장 방법
references/galleries.md에 새 갤러리를 동일한 필드(이름, URL, 카테고리, 최적 용도, 접근 방식, 형식, 검색 팁)로 추가한 다음 위 표에 라우팅 행을 추가하세요.