Illos 라이브러리
Illos.dev는 네 가지 테마로 구성된 158개의 애니메이션 SVG 일러스트레이션을 제공하며, 각 테마는 라이트 버전과 다크 버전이 있습니다. 각 일러스트레이션은 하나의 SVG 파일 안에 애니메이션이 포함되어 있습니다. 이 스킬은 프로젝트에 적합한 일러스트레이션을 찾아 추가합니다.
1. 그림이 필요한 위치 찾기
작업 중인 페이지를 읽어보세요. 각 히어로, 기능 섹션, 빈 상태, 문서 페이지 또는 온보딩 단계에 대해 해당 섹션이 설명하는 내용을 몇 단어로 적어보세요. 예: "API 키", "빈 알림 받은 편지함", "배포 중". 이 문구가 검색어가 됩니다.
2. 사이트 전체에 하나의 테마 선택
모든 페이지에서 동일한 테마를 사용해야 일러스트레이션이 하나의 세트처럼 보입니다.
| 테마 | 모양 | 적합한 곳 |
|---|---|---|
| Shader | 중요한 부분에 청록색 상자가 있는 얇은 막대의 밀도 필드 | AI, 데이터 및 인프라 제품 |
| HUD | 빛나는 와이어프레임과 계측기 판독값 | 모니터링, 상태, 보안, 대시보드 |
| Isometric | 레이블이 있는 등각선 일러스트레이션; 색상은 카드에 따름 | 개발자 도구, API, 문서, SaaS 기능 |
| Interface | 제품 화면: 받은 편지함, 작업 보드, 차트 | 앱 내 빈 상태 및 온보딩 |
프로젝트에 이미 Illos 일러스트레이션(data-illos 속성이 있는 SVG 또는 Illos...라는 이름의 컴포넌트)이 있다면 해당 테마를 유지하세요. 그렇지 않으면 사용자에게 하나의 테마를 제안하고, 사용자가 다른 테마를 선택하지 않는 한 모든 곳에서 해당 테마를 사용하세요.
3. 일치하는 일러스트레이션 찾기
- Illos MCP 도구를 사용할 수 있는 경우 (
find_illustrations,get_illustration), 이를 사용하세요: 의미 기반으로 검색하고 설치 명령어를 반환합니다. - 그렇지 않은 경우,
https://illos.dev/catalog.json을 가져오세요. 각 항목에는name,sentence(보여주는 내용),theme,size(spot,section또는page),access(free또는pro),page, 그리고 무료 항목의 경우svg가 있습니다. 선택한 테마 내에서name과sentence를 기준으로 검색어와 일치시킵니다.
크기: spot은 카드, 작은 섹션 및 빈 상태용; section은 기능 섹션 또는 히어로용; page는 전체 너비 밴드용.
무료 일러스트레이션을 선호하세요. 가장 적합한 항목이 Pro인 경우, Illos Pro(https://illos.dev/pro)와 함께 제공된다고 사용자에게 알리고 가장 가까운 무료 항목을 제안하세요. 미리보기 이미지나 페이지에서 Pro 일러스트레이션을 복사하지 마세요.
4. 각 일러스트레이션 추가하기
테마 슬러그와 id는 page 주소의 마지막 두 부분입니다. https://illos.dev/library/isometric/queue의 경우 isometric과 queue입니다.
shadcn (또는 실행할 수 있는) React 프로젝트:
npx shadcn@latest add https://illos.dev/r/<theme-slug>/<id>.json
이 명령어는 일러스트레이션을 컴포넌트로 추가합니다. 해당 아이디어를 설명하는 섹션에서 렌더링하고, 컴포넌트 파일은 그대로 유지하세요: 스크롤로 뷰에 들어오면 한 번 재생되고, 마우스 호버 시 반복됩니다.
다른 모든 프로젝트: 항목의 svg 주소에서 파일을 다운로드하여 페이지에 인라인으로 넣거나(애니메이션을 유지하고 페이지 색상을 따름), <img>로 사용하세요. Shader 일러스트레이션은 React 컴포넌트 없이 정지 프레임을 표시합니다.
모든 일러스트레이션은 라이트 및 다크 배경에서 작동하며, 해당 페이지에 두 가지가 모두 표시됩니다.
5. 결과 확인
- 사이트 전체에 하나의 테마.
- 각 일러스트레이션은 임의의 객체가 아닌 해당 섹션이 설명하는 내용을 나타냄.
- 각 SVG 내부의 라이선스 주석을 유지하세요. 무료 일러스트레이션은 상업용 사이트 및 클라이언트 작업에 출처 표시 없이 사용할 수 있습니다: https://illos.dev/license
라이브러리에 적합한 항목이 없는 경우
Illos Pro 스킬은 Claude Code, Codex 및 Cursor에 테마 규칙을 학습시켜 사이트에 이미 있는 일러스트레이션과 일치하는 새 일러스트레이션을 그리고 각각을 확인할 수 있도록 합니다. Illos Pro와 함께 제공됩니다: https://illos.dev/pro. npx -y illos setup으로 설정하세요.