언제: 랜딩·온보딩·빈 상태·마케팅 이미지에 입체감 있는 일러스트형 아이콘이 필요할 때. CC0라 라이선스 고민이 없고 PNG 렌더를 바로 쓰면 돼서 3D 툴 없이도 된다. 비교: AI로 만든 3D 아이콘 수량은 Thiings(10,000+, 유료)가 훨씬 많고, UI용 선 아이콘은 Lucide·Phosphor 등 기존 항목이 맞다. 여기는 사람이 직접 모델링해 톤이 통일된 소량 세트라는 게 장점. 주의: 종 수가 200종으로 적고 범용 메타포 위주라 특정 업종 전용 아이콘은 없을 가능성이 높다. CC0는 V1 기준이므로 Pro 세트나 이후 추가분은 라이선스를 따로 확인할 것. 래스터(PNG/WebP) 렌더라 크게 쓸 땐 해상도를 확인.
언제: 컴포넌트 하나의 "움직임"이나 디테일 아이디어가 필요할 때 — 토글·스텝퍼·티켓·위젯·드로어 같은 단위 인터랙션을 영상으로 훑기 좋다. 완성 화면보다 마이크로 인터랙션·모션 비중이 커서 구현 전 레퍼런스 수집에 맞는다. 비교: 실서비스 앱의 특이한 인터랙션은 Design Spells, React Native로 구현된 화면은 Native Bloom(영상+원본 코드 링크), 모바일·대시보드 정적 화면은 Uiinspoo. 여기는 개인 디자이너의 컨셉·탐구 작업 위주라 실제 제품에 그대로 있는 UI는 아니다. 주의: 출처가 X 게시물이라 원문이 삭제되면 링크가 깨진다. 작품은 각 작가 소유이므로 참고·영감용으로만 쓰고 그대로 베끼지 말 것. 갱신 주기는 수동 큐레이션이라 느린 편(번호상 약 3년간 590여 건).
언제: 랜딩의 "Trusted by"/기술 스택 로고 섹션을 shadcn 프로젝트에 컴포넌트로 바로 넣고 싶을 때. 다크모드·모노 변형을 직접 손대기 싫을 때. 비교: 종 수가 더 필요하면 theSVG(7,400+)·logos by lndev(15,017), 라이트/다크 SVG만 필요하면 SVGL, 국내 브랜드는 로고착착. Logoforge의 차별점은 shadcn 레지스트리 설치 + 로고 클라우드 섹션 생성. 주의: 2026-10 공개된 신생 레포(커밋 6, 스타 20). 코드는 MIT, 아트워크는 Simple Icons·gilbarbara/logos(CC0) 기반이나 일부는 브랜드 자체 아트워크라 상표권은 각 브랜드에 있음. 사이트 내 유료 스폰서 영역 있음.
언제: SaaS·인디 툴의 OG/소셜 카드 레퍼런스를 빠르게 훑거나, 내 사이트 OG 이미지 크기·메타 태그를 점검할 때(Analyzer). 비교: 브랜드 전반을 손으로 고른 레퍼런스는 OGimage.gallery(844장·카테고리 분류), OG 이미지를 직접 만들 땐 ogimagecn(UI Components). 툴 자체를 찾을 땐 Toolfolio(Tools). 주의: Toolfolio 등재 툴 중심이라 SaaS/인디 쪽으로 치우침(홍보 성격). 이미지는 각 브랜드 자산이므로 레퍼런스로만 사용.
포트폴리오·에이전시·브랜드 사이트처럼 "여백 많고 타이포 중심"의 톤을 잡을 때. 10년 넘게 한 가지 취향(미니멀)으로 큐레이션을 이어 와서 3,000곳이 넘는데도 결이 일정하다는 게 장점이고, 유형 태그(에이전시 758·이커머스 142·건축 119 등)로 같은 업종만 모아 보기 좋다.
저장된 웹 갤러리들과 역할을 나누면 — SEESAW는 폰트로 검색, Curated는 산업별 실사이트, dark.design은 다크 테마, Supahero·Navbar Gallery·CTA Gallery·Details.so는 특정 섹션·디테일만 모은다. 이건 페이지 전체 인상을 미니멀 쪽으로 넓게 훑을 때 쓰는 출발점이다.
템플릿 메뉴는 Framer·Webflow 등 유료 템플릿 판매 링크가 대부분이라 영감용으로 보고, 코드로 가져올 거면 저장된 UI Components 쪽 블록 모음을 쓰는 게 맞다. 도구 메뉴는 106개로 작아서 이 저장소의 Tools 컬렉션을 대체하진 않는다.
2026년에 운영자가 바뀌었다(About 기준). 스폰서 카드가 목록에 섞여 나오니 구분해서 볼 것.
랜딩 히어로·광고 배너·SNS 카드에 쓸 이미지를 AI로 뽑아야 하는데 "어떻게 써야 저런 톤이 나오는지"부터 막힐 때. 결과 이미지를 먼저 보고 마음에 드는 걸 고른 뒤 프롬프트를 가져오는 순서라, 빈 입력창에서 시작하는 것보다 훨씬 빠르다.
쓸모의 핵심은 구조다. 묘사 단락은 그대로 두고 대괄호 칸(색 조합·요소·여백·화면비)만 내 브랜드 색과 소재로 바꾸면 같은 톤의 이미지를 여러 장 만들 수 있다. 연작 단위로 묶여 있어서 한 페이지 안에서 일관된 비주얼 세트(히어로 + 섹션 배경 + 카드 썸네일)를 맞출 때 특히 좋다. "여백" 칸이 따로 있어 텍스트를 얹을 자리를 남긴 이미지를 요청하기 쉬운 점도 웹 용도에 맞다.
저장된 BananaX가 한국어 인포그래픽 프롬프트, Kage·VibePrompts가 UI 화면·레이아웃 프롬프트라면 여기는 UI가 아니라 일러스트·사진풍 비주얼 쪽이다. 섹션 배경이 필요할 때 코드형 배경(Aura Gradients, designali 패턴)으로 갈지 이미지 생성으로 갈지 고르는 갈림길에서 함께 보면 된다.
주의: 예시 이미지가 어떤 모델로 만들어졌는지 표시가 없어 같은 프롬프트라도 모델에 따라 결과가 꽤 다를 수 있다. 사이트에 이용 조건 문서가 보이지 않으므로 예시 이미지를 그대로 가져다 쓰지 말고 프롬프트로 직접 생성해 쓸 것. "Golden Gate Bridge", "Kyoto Pagoda" 같은 실제 장소 프롬프트는 상업 광고에 쓸 때 초상·상표 문제를 따로 확인해야 한다.
새 제품이나 랜딩 페이지를 공개하기 전에 공유 미리보기 카드를 어떻게 꾸밀지 감을 잡을 때. OG 이미지는 링크를 붙여넣는 모든 곳(메신저·X·슬랙·카톡)에서 첫인상이 되는데, 일반 디자인 레퍼런스 사이트에서는 거의 다루지 않는 영역이라 이렇게 한곳에 모아 둔 곳이 드물다.
저장된 Recent에도 OG 이미지 범주가 있지만 여러 분야 중 하나일 뿐이고, 여기는 OG만 800장 넘게 범주별로 나눠 둬서 SaaS·앱·스토어 등 내 제품과 같은 업종끼리 비교하기 좋다. Animated·Dynamic 범주는 움직이는 OG(GIF 등)나 페이지마다 내용이 바뀌는 동적 OG 사례라 따로 볼 가치가 있다.
보고 정했으면 만드는 건 저장된 ogimagecn(shadcn 방식 OG 이미지 컴포넌트)이나 Next.js의 ImageResponse로 넘어가면 된다. 동적 OG를 만들 계획이면 Dynamic 범주 사례부터 확인할 것.
이미지는 각 회사의 브랜드 자산이므로 다운로드는 참고용으로만 쓰고 그대로 가져다 쓰지 말 것. 브라우저 확장 프로그램 링크(ogimg.gallery)는 2026-10-06 확인 시 열리지 않았다.
무엇을 만드는 도구인가
게임 캐릭터·아이템·타일맵용 픽셀 이미지와 프레임 애니메이션을 그리는 독립 편집기. 완성된 스프라이트를 제작하는 도구이므로 Kidow / Tools에 분류한다. 핵심 기능은 실시간 애니메이션 미리보기, 어니언 스킨, 여러 스프라이트 동시 편집, 기본·사용자 팔레트, 레이어와 프레임, 반복되는 패턴·텍스처를 위한 타일 그리기, 채워진 윤곽·다각형·음영 등 픽셀 정밀 도구다.
설치·배포와 확인한 버전
확인일 2026-10-04 기준 GitHub 최신 안정 릴리스는 v1.3, 발행일 2026-10-02. 실제 첨부 파일:
- Windows x86_64: installer.exe와 휴대용 zip.
- Linux x86_64: AppImage.
- macOS: arm64 및 x86_64 DMG를 각각 제공.
- 서브모듈을 포함한 소스 tar.gz·zip도 제공. 사용자는 운영체제와 CPU에 맞는 파일을 고르면 된다. 이 세션에서는 앱을 다운로드·설치하지 않았다. 공식 다운로드 페이지의 일반 최소 요구사항 표기와 실제 최신 첨부 파일의 아키텍처는 구분한다. README는 Android도 지원 대상으로 안내하지만 v1.3 안정판의 첨부 파일에는 Android APK가 없었다. 이전 v1.2 prerelease에는 Android 개발 APK가 있어 현재 안정 데스크톱 배포와 같은 것으로 기록하지 않는다.
공식 브라우저판
https://libresprite.github.io/online/ Emscripten 기반 온라인판이 제공된다. 실제 브라우저에서 로딩 후 File·Edit·Sprite·Layer·Frame·View·Scripts 메뉴와 New File / Open File 시작 화면을 확인했다. 초기 HTML 제목은 1.1-dev였으나 실행 후 제목과 앱 하단은 LibreSprite 1.2-dev였다. 실제 실행 표시를 기준으로 기록한다. 데스크톱 v1.3과 버전이 같다고 가정하지 않는다. 시작 화면까지 확인했으며 그림 제작·파일 저장·모든 브라우저 기능과 태블릿 입력을 시험한 것은 아니다.
파일 형식·확장
공식 소스의 png_format.cpp, gif_format.cpp, ase_format.cpp에서 각각 onLoad·onSave 구현을 확인했다. PNG 정지 이미지, GIF 애니메이션, ASE 작업 파일을 다룰 수 있는 편집기다. 현행 Aseprite의 모든 새 기능·파일을 완전히 호환한다고 검증한 것은 아니다. SCRIPTING.md에는 Sprite의 팔레트·레이어 접근, crop·resize·save·saveAs 등 자동화 API가 문서화돼 있다. 테마 변경도 공식 README에서 안내한다.
Aseprite와의 관계·라이선스
Aseprite가 2016-08-26 라이선스를 변경하기 전 마지막 GPLv2 커밋을 기반으로 포크됐으며, 이후 LibreSprite가 독립 개발된다. 최신 Aseprite 소스를 그대로 배포하는 프로젝트로 해석하지 않는다. 공식 LICENSE.txt는 GNU General Public License Version 2이고 GitHub 메타데이터도 GPL-2.0이다. MIT 라이선스 도구로 표시하지 않는다.
기존 북마크와 비교
- Drawesome: React 앱에 넣는 펜·지우개·SVG/PNG 내보내기 드로잉 툴바. LibreSprite는 레이어·프레임·팔레트를 가진 독립 픽셀 애니메이션 편집기다.
- 8bit/cnlibs: 웹 UI 컴포넌트 58종을 8비트 스타일로 표현하는 shadcn 라이브러리. LibreSprite는 버튼·폼 구현보다 실제 픽셀 이미지와 스프라이트를 제작하는 도구다.
- Theatre.js: 코드로 만든 애니메이션을 시퀀스·그래프 에디터로 다듬는 웹 모션 툴킷. LibreSprite는 이미지 프레임을 직접 그리는 래스터 작업에 집중한다.
확인 근거
공식 사이트: https://libresprite.github.io/ 기능: https://libresprite.github.io/#!/features 다운로드: https://libresprite.github.io/#!/downloads 브라우저판: https://libresprite.github.io/online/ 저장소·역사·기능: https://github.com/LibreSprite/LibreSprite 최신 안정판: https://github.com/LibreSprite/LibreSprite/releases/tag/v1.3 라이선스: https://github.com/LibreSprite/LibreSprite/blob/master/LICENSE.txt 스크립팅: https://github.com/LibreSprite/LibreSprite/blob/master/SCRIPTING.md 파일 형식 소스: https://github.com/LibreSprite/LibreSprite/tree/master/src/app/file
IP as Logo — 2026-10-05 갱신
기성 마스코트 로고를 무료로 찾는 사이트와, 같은 스타일의 캐릭터를 생성하도록 에이전트에 지시하는 IP as Logo 스킬을 함께 제공한다. 운영 연결 저장소 s1dashu/ip-as-logo-skill. 기존 Design 북마크를 갱신하며 초기 메모는 아래에 보존한다.
라이브러리에서 확인한 기능
로그인 없이 열린 화면에 '무료 로고 3,448개'와 '무료 다운로드 및 상업적 이용이 가능합니다'가 표시됐다. 3,448은 확인 시점의 사이트 표시 수량이며 이름이 중복된 변형이 있어 고유 캐릭터 종 수로 해석하지 않는다. 검색, 큰 미리보기, 내 즐겨찾기, 로고 섞기, 언어 선택과 다운로드 아이콘을 제공한다. 실제 'shiba' 검색 결과는 6개로 Shiba·Shiba Inu·Shiba Inu Puppy·Shiba Inu Dog 등의 변형이 표시됐다. Moon Jelly와 Shiba 미리보기를 열어 확인했다. Moon Jelly의 실제 이미지 주소는 https://cdn.ipaslogo.com/logos/f22865c8dd29d49d-moon-jelly.png 였다. 공개 갤러리는 PNG 이미지 링크를 사용하며 이 작업에서 파일 다운로드나 SVG·벡터 내보내기를 검증하지 않았다. 동물뿐 아니라 Croissant·Paint Roller·Microscope·Rocket·Cactus·Moss Golem 등 사물·식물·판타지 주제도 표시한다. 원본 그림은 단색 배경과 크게 잘린 둥근 캐릭터 구도를 사용한다.
사용 조건 보완
공식 README는 'Every logo is free for commercial use'라고 명시하고 사이트도 무료 다운로드·상업 이용을 안내한다. 이전 메모의 '라이선스가 명시돼 있지 않아 상업 사용 가능 여부를 확인해야 한다'는 판단은 현재 안내로 보완됐다. 스킬 저장소 LICENSE는 MIT, Copyright 2026 s1dashu다. 스킬 문서의 MIT 라이선스와 갤러리 로고의 상업 이용 안내는 각각의 근거로 기록한다. 갤러리를 CC0라고 표기하거나 독점 사용권·상표 등록 보장을 주장하지 않는다.
제작 스킬의 스타일과 절차
ip-as-logo는 오픈 Agent Skills 형식의 단일 SKILL.md이며 저장소에는 README·LICENSE·쇼케이스 이미지가 있다. 자체 생성 스크립트나 모델을 포함한 패키지는 아니다. 스타일 지침:
- 32×32에서도 읽히는 단순하고 귀여운 캐릭터.
- 약 4–7개의 큰 기본 형태와 두꺼운 둥근 실루엣.
- 기본 캐릭터 2색과 배경 1색의 의미 있는 색 구분.
- 정사각형 단색 배경, 약한 네오 스큐어모피즘의 깊이.
- 아래 왼쪽/오른쪽에서 크게 등장하는 구도, 불필요한 선·세부 묘사 제거. 제품 맥락이 있으면 이를 조사해 방향 3개를 제안하고, 사용자 승인 후 독립 후보 6개를 한 번의 배치로 생성하는 절차를 안내한다. 기본 배분은 왼쪽 3개·오른쪽 3개다. 생성 결과를 모두 전달하고 자동 필터링·재시도하지 않는다고 명시하므로 원하는 색·배경·구도·품질이 항상 보장되는 것은 아니다. 사용자가 결과를 보고 재생성·수정을 요청하는 방식이다.
설치·실행 범위
npx skills@latest add s1dashu/ip-as-logo-skill README는 Codex·Coze·Doubao·YouMind·Manus·Gemini Apps·Replit Agent 등 호환 에이전트를 안내한다. 이미지 모델을 별도로 필요로 하며 README에 GPT Image 2 등 모델 경로를 권장한다. 이러한 명칭은 저장소 안내이고 이 작업에서 현재 세션의 모델 제공 여부·생성 결과를 검증하지 않았다. 스킬은 SVG로 대체하지 않는다고 명시한다. 기성 로고 다운로드와 새 이미지 생성의 모델 접근·사용료는 구분한다. 이번 북마크 작업에서는 스킬 설치·이미지 생성·즐겨찾기 추가를 실행하지 않았다.
기존 북마크와 관계
logos by lndev·SVGL은 기존 기업/제품의 SVG 브랜드 표식을 찾는 자료다. IP as Logo는 단순한 캐릭터형 마스코트 이미지를 고르거나 유사 스타일로 새 후보를 생성하는 자료이므로 기존 Kidow / Design 분류를 유지한다. Kitbitz는 다양한 장면에 넣는 손그림 일러스트 자산 라이브러리이며, 이 사이트는 정사각형 마스코트의 단일 실루엣·색·표정에 집중한다.
공식 자료
갤러리: https://ipaslogo.com/ 제작 스킬·README: https://github.com/s1dashu/ip-as-logo-skill 생성 지침: https://github.com/s1dashu/ip-as-logo-skill/blob/main/SKILL.md 스킬 라이선스: https://github.com/s1dashu/ip-as-logo-skill/blob/main/LICENSE 커버는 공식 README 쇼케이스 assets/ip-as-logo-wall.webp를 사용한다.
초기 메모 보존 — 2026-09-17
아래는 당시 메모다. 상업 이용 안내에 관한 부분은 위의 2026-10-05 확인 내용으로 갱신한다. 개인 프로젝트나 사이드 프로젝트에 캐릭터형 로고가 필요할 때 훑어볼 곳. 마스코트는 브랜드 인지에 유리하지만 직접 의뢰하면 비용이 큰 영역이라 무료 선택지는 의미가 있다. 다만 확인이 필요한 부분이 두 가지다 — (1) 라이선스가 명시돼 있지 않아 상업 사용 가능 여부를 반드시 확인해야 하고, (2) 공개 배포되는 로고는 다른 서비스와 겹칠 수 있어 상표로서의 식별력이 약하다. 정식 제품의 대표 로고보다는 임시 사용이나 내부 도구 쪽이 적합하다.
무엇을 참고할 수 있나
Mariana Castilho(@mrncst)의 "Small laboratory of fine UI". 화려한 배경 효과보다 제품 안에서 상태·정보·행동을 연결하는 작은 인터랙션 실험이 중심이다. 기존 컴포넌트를 재사용·확장·변형해 새로운 문맥을 만드는 방식이 특징이다. 페이지 최상위 데모 12개와 실제 브라우저 하단의 "12 Components"를 대조했다. Animated Cards 내부의 "56 Components"는 예시 데이터이므로 라이브러리 수량으로 세지 않는다.
공개 실험 12종
- Two-Step Popover: 단계가 바뀌는 팝오버와 전환 감각 실험. 실제 브라우저에서 첫 팝오버를 열어 Approve Changes / Add Comment 선택 상태를 확인했다.
- Action Toolbar: 작업·알림·정보에 따라 상태가 바뀌는 툴바. Commit, Analytics, Upgrade와 실패 상태 예시.
- Dynamic Settings: 설정 영역을 부드럽게 확장·축소하고 blur를 적용하는 전환.
- Contextual Toolbar: 현재 페이지에 맞는 행동을 제안하며 다른 문맥으로 이동하지 않고 실행하는 툴바.
- Beta Feedback: 별도 모달을 추가하기보다 기존 컴포넌트를 피드백 입력에 재사용하는 실험.
- Calendar Widget: 일정과 참여자·시간대 차이 정보를 펼쳐 보는 캘린더 위젯.
- Flexbile Tags Container: 태그 조작에 따라 컨테이너가 늘고 줄어든다. 작성자가 요소 위치가 갑자기 바뀌므로 프로덕션에 그대로 쓰지 않겠다고 명시한다.
- Elastic Card: 카드 안의 행동을 통해 안내·인증 등의 상태를 변형하는 탄성 인터랙션.
- Animated Cards: 분류·콘텐츠를 장난스럽게 소개하는 작은 카드 세트.
- Parameters iOS Slider: 웹에서 iOS 슬라이더 조작 감각을 재현. Motion·Blur 파라미터 예시.
- Dynamic Header Dropdown: 호버한 선택지에 맞춰 추가 문맥을 표시하는 헤더. 작성자는 실제 Vercel 프로젝트에 적용됐다고 설명한다.
- Dynamic Footer Widget: 지표에 호버할 때 해당 문맥을 위젯 상태에 반영. Vercel 2023 Hackathon 협업 프로젝트에서 영감을 얻었다고 설명한다.
기술·제공 방식
각 실험에 React·Tailwind CSS·Framer Motion 태그가 표시되고, Beta Feedback 및 Parameters iOS Slider에는 Radix UI도 표시된다. 모든 실험이 같은 의존성을 쓰는 것은 아니다. 사이트 자체는 Next.js로 제작됐다고 하단에 표시한다. 공개 페이지는 설명과 조작 가능한 데모 중심이다. 코드 복사 버튼, 컴포넌트 소스 링크, npm·shadcn 설치 명령, 레지스트리·MCP·공개 코드 라이선스 안내는 확인되지 않았다. 제작자 GitHub 계정에서 uilabs 이름의 공개 저장소 검색도 결과가 없었다. 이는 다른 이름의 소스가 전혀 없다는 뜻은 아니다. 따라서 Design 컬렉션에 인터랙션 레퍼런스로 분류한다. 사이트의 React·Tailwind 태그를 곧바로 복사 가능한 코드 제공으로 해석하지 않는다. Animations.dev 강의 연결은 애니메이션 학습 자료 안내이며 UI Labs 설치 경로가 아니다. 실험 전체의 접근성·모션 감소·브라우저 호환성을 검증한 것은 아니다.
기존 북마크와 비교
- UICapsule: 실제 제품 인터랙션 React 컴포넌트 52종을 공개 소스·shadcn·MIT로 제공한다. UI Labs는 더 작은 실험 모음이며 상태 전환과 문맥 유지에 집중하지만 공개 페이지에서 코드 제공 경로가 확인되지 않았다.
- Arlan Vault: 상세 UI 실험 18개와 프롬프트 53개, 파일별 코드·Markdown 복사 및 MIT 표시가 있다. UI Labs는 제품형 툴바·위젯의 동작을 관찰하는 참고 자료다.
- UI Beats: React UI 52종 + 블록 3종, shadcn·MCP·props 플레이그라운드·MIT 제공. UI Labs는 설치 가능한 레지스트리보다 디자인 실험 갤러리에 가깝다.
확인 근거
확인일: 2026-10-04. 공식 페이지와 브라우저의 12 Components 표시, 팝오버 열림 상태 확인. 모든 데모의 전체 흐름을 실행 시험하지는 않았다. 공식 사이트: https://www.uilabs.dev/ 제작자: https://twitter.com/mrncst 사이트에 표시된 제작자 GitHub 계정: https://github.com/mrnbpt 별도 코드 라이선스: 공개 페이지에서 확인되지 않음.
어떤 자료인가
- jaimin(@jaimintf)·Appllama가 만든 브라우저 기반 인터페이스 모션 실험. 페이지의 25개 버튼과 등록 모듈 25개가 일치한다.
- 단독 스피너 모양보다 작은 로더 + 버튼 외형 + 작업 상태 문구의 조합을 참고하기 좋다. 버튼을 선택하면 해당 애니메이션을 다시 재생한다.
- WebGL2 13종, SVG 6종, Canvas 4종, CSS/DOM 2종. React·SwiftUI·React Native 전용 라이브러리로 안내하지 않는다.
눈여겨볼 예시
- Fibonacci Breather: 피보나치 배열 미세 구슬 / Gathering.
- Glass Tide Lens: 액체 렌즈와 지연 굴절 / Focusing.
- Binary Metaball Mitosis: 두 덩어리의 분리·합체 / Merging.
- Topology Courier: 420개 점의 지연된 대응 변화 / Mapping.
- Voxel Assembly Line: 64개 큐브의 조립 / Building.
- Orbital Calligraphy: SVG Bézier 대시 / Writing.
- Mechanical Iris: 여섯 날개의 조리개 / Opening.
- Braille Flipwave: 3D 점 행렬의 순차 뒤집기 / Flipping.
기존 북마크와 비교
- Shadcn Loaders는 실제 설치하는 순수 CSS 컴포넌트 하나에 변형 42종을 담는다. 이 사이트는 버튼 안의 로더·문구·표면을 함께 관찰하는 모션 레퍼런스에 적합하다.
- HyperUI는 복사해 쓰는 Tailwind HTML과 로더 예제를 제공한다. 이 사이트에서는 복사 버튼·패키지 설치 안내·저장소 링크가 확인되지 않았다.
- Cuvii Labs는 GSAP 모션·WebGL 효과의 React TSX를 복사할 수 있다. Appllama의 공개 브라우저 JS 모듈은 구현 방식 조사에는 도움이 되지만, 재사용용 배포나 라이선스 허용 범위는 별도 확인이 필요하다.
- 따라서 Kidow / Design에 분류한다.
구현 참고
- 전체 Pause motion / Play motion 제어와 prefers-reduced-motion 대응이 있다.
- 기본 렌더링 목표는 30fps. URL의 fps 옵션은 15~60fps로 제한한다. 화면 밖 항목은 렌더링을 건너뛰고 WebGL 인스턴스는 일정 지연 뒤 해제한다.
- 각 WebGL 디자인은 공통 core/webgl.js에 의존하며 Canvas 디자인은 core/canvas.js에 의존한다. 디자인 파일 하나만 독립 배포용 컴포넌트로 취급하지 않는다.
- 데모의 반복 모션·상태 문구를 실제 진행률이나 성공·실패 처리로 해석하지 않는다. 제품 적용 시 비동기 작업 상태와 접근성 안내를 연결해야 한다.
- 무료로 갤러리를 볼 수 있으나 페이지·확인한 모듈에서 MIT 등 코드 재사용 라이선스는 찾지 못했다.
확인: 공식 페이지 https://loader-buttons.appllama.io/ 및 공개 src/main.js, src/designs/index.js와 등록 모듈 25개. 2026-10-04.
React Native 앱의 모션이나 특정 상호작용을 구현하기 전에 실제로 움직이는 사례를 보고, 사용 패키지와 원본 구현을 찾는 첫 검색 창으로 둘 곳이다. 숫자 전환·스프링·시트·제스처·셰이더처럼 정지 이미지로 판단하기 어려운 패턴을 영상으로 비교하는 점이 값이다. 이름을 모르는 상태에서도 필요한 모습과 움직임으로 찾고, 블록 하나를 고른 뒤 프로젝트에 어떻게 붙일지를 조사하는 흐름에 맞는다.
기존 Kage가 제품 화면을 분해해 에이전트 프롬프트로 넘기는 디자인 레퍼런스, UUI가 UI 영감을 찾아 모으는 갤러리였다면 이쪽은 React Native의 실제 모션·작성자·패키지·원본 링크에 초점이 있다. 그래서 같은 Design 컬렉션에 분류한다. BNA UI와 tetra ui는 소스를 설치해 앱의 기반 부품을 가져오는 후보이고, Native Bloom은 그 밖의 제작자와 사례까지 넓게 찾아주는 카탈로그다. 마음에 든 영상이 특정 라이브러리나 Expo 모듈을 쓰면 설치 판단은 해당 원본 문서에서 이어서 한다.
공개 Step counter number flow를 열면 Antonín Wingender 작성자, Number·Progress ring·Transition 분류, GitHub의 docs/content/docs/recipes/step-counter.mdx와 원 프로젝트 문서가 연결된다. 영상에 재생 속도와 확대 컨트롤이 있고, 블록 링크를 복사하거나 Use prompt로 에이전트에 넘기는 버튼을 제공한다. 프롬프트 영역은 Expo 또는 bare React Native 프로젝트의 기존 아키텍처를 보존하고 기본적으로 레퍼런스 영상에 맞추는 용도라고 설명한다. 이번에는 공개 페이지의 링크·UI를 확인했으며 프롬프트 본문이나 유료 문맥을 읽어 검증한 것은 아니다.
MCP는 URL을 등록하고 Native Bloom 계정으로 브라우저 인증하는 방식이라고 문서화했다. 별도 API 키는 요구하지 않는다. 자연어 search_blocks와 화면/흐름의 여러 부분을 한 번에 찾는 search_blocks_batch, 개별 블록 문맥 get_block, 분류의 용어·블록 수를 조회하는 list_catalog_terms가 있다. 무료는 하루 25회 검색(00:00 UTC 초기화)과 제목·영상·링크 중심 결과, spotlight 블록의 전체 문맥을 체험할 수 있다. Pro는 검색 무제한과 모든 오픈소스 블록의 전체 문맥을 제공한다. 이 세션에 MCP를 추가하거나 계정에 로그인한 것은 아니다.
Pro 결제는 원본 코드를 모두 구매하는 의미가 아니다. 서비스 약관은 구독을 큐레이션·정리·검색·제품 기능에 대한 접근으로 정의하고, 제3자 소프트웨어·소스·상업 디자인 자산의 라이선스를 주지 않는다고 명시한다. 외부 유료 키트는 모든 플랜에서 소스와 프롬프트가 제공되지 않는다. 무료/오픈소스 항목도 실제 적용 전에 각 GitHub/패키지의 라이선스와 의존성을 확인한다. MIT·open-source를 이 카탈로그 전체의 태그로 붙이지 않았다.
2026-10-04 확인. 무료 저장 12개를 넘어 취소하면 최신 12개만 보이고 나머지 저장은 삭제되지 않은 채 숨겨지며, 재구독하면 복원된다고 FAQ에 안내한다. 가격은 홈의 Yearly 선택 기준 Pro 월 환산 $8, Team 인당 월 환산 $12이고 실제 연간 결제다. 월간/분기 가격을 확인한 값으로 오인하지 않는다. 1,269개는 당시 카탈로그의 표시 수라 계속 달라질 수 있다.
근거: https://nativebloom.dev/ · https://nativebloom.dev/blocks?slug=step-counter-number-flow · https://nativebloom.dev/mcp · https://nativebloom.dev/terms
shadcn 기본 회색 테마에서 벗어나고 싶은데 컴포넌트는 바꾸고 싶지 않을 때. 저장된 skin 항목들(Glass UI, BoldKit, 8bitcn 등)은 컴포넌트 자체를 다른 스타일로 갈아끼우는 것이고, 이건 컴포넌트는 그대로 두고 CSS 변수만 바꾼다. 그래서 이미 shadcn으로 만든 화면에 나중에 적용해도 깨질 일이 거의 없다.
가장 빠른 사용법은 프리셋을 고른 뒤 "레지스트리 명령"으로 내보내 기존 프로젝트에 npx 한 줄로 넣는 것. 직접 만들 때는 색만 고르고 끝내지 말고 내장 대비 검사기를 꼭 돌릴 것. 프리셋이라고 대비가 보장되지는 않는다.
AI 생성·이미지 추출은 무료 5회 제한이라 브랜드 색 하나로 테마를 뽑는 정도면 수동 편집이 더 낫다. 저장소가 Apache-2.0이라 직접 띄워 쓸 수도 있다.
Figma 페이지는 tweakcn 기능이 아니라 Shadcncraft(유료 Figma 키트)에 테마를 적용하는 안내다. 설치하는 컴포넌트가 아니라 브라우저에서 쓰는 생성기라 Backgrounds Supply의 Gradient Lab과 같은 자리로 보면 된다.
Lucide를 쓰는 프로젝트에서 아이콘에 호버 모션을 얹고 싶을 때 후보로 볼 수는 있지만, 지금 상태로는 저장된 다른 선택지를 먼저 보는 쪽이 낫다.
설치하면 바로 깨질 가능성이 높다. registry.json의 각 항목은 dependencies로 motion을 선언하는데 실제 컴포넌트 코드는 from "framer-motion"으로 import한다. 네 개를 표본으로 확인했는데 전부 같았다. motion과 framer-motion은 별개 npm 패키지라, CLI가 motion만 설치하고 프로젝트에 framer-motion이 없으면 모듈을 찾지 못한다. 쓰려면 framer-motion을 직접 설치하거나 import 경로를 고쳐야 한다.
라이선스가 없다. 사이트는 "Open Source"를 전면에 내세우지만 저장소에 LICENSE 파일이 없고 README에도 언급이 없다. 그리고 아이콘 형태가 Lucide(ISC)에서 온 것으로 보이는데 출처 표기도 없다. 상업 프로젝트에 넣기 전에 제작자에게 확인이 필요하고, 그게 번거로우면 라이선스가 분명한 쪽을 쓰는 게 맞다.
관리도 멈춰 있다. 2026-02 개설에 마지막 푸시가 2026-03-05로 확인 시점 기준 약 7개월째 변화가 없고 별은 5개다.
아이콘 모션 계열 안에서의 자리: 규모만 보면 AnimateIcons 1,170종 > Anicon 508종 > lucide-animated 467여 종 > Hugeicons Animated 165종 > Grainly 23종 순이지만, 이 셋 중 Hugeicons Animated는 MIT가 분명하고 별 100개로 관리되고 있으며 lucide-animated는 Lucide 이름 체계를 그대로 따르는 실용적 대체재다. 아이콘을 서로 변형시키는 게 목적이면 morphicons(MIT, Lucide·Tabler·Heroicons 등 지원, 런타임 의존성 0)가 접근 자체가 다르다.
그래도 건질 점은 있다 — useReducedMotion이 들어 있어 모션을 끈 사용자를 고려했고, 항목당 파일 하나에 소스를 복사해 소유하는 구조라 필요한 아이콘 한두 개만 꺼내 import만 고쳐 쓰는 용도로는 쓸 만하다. 세트 전체를 채택할 대상은 아니다.
아이콘 하나를 Outline과 Duotone 두 결로 번갈아 쓰고 싶을 때, 혹은 스트로크 굵기를 사이트에서 맞춰 보고 그대로 복사하고 싶을 때. 다만 저장된 아이콘 세트들과 견주면 선택 순위가 높지 않으니 먼저 비교하고 들어갈 것 — 고유 287종은 Lucide 1,856종(ISC), Iconoir 1,671종(MIT), Reicon 2,700종에 한참 못 미친다. 스타일 수로 승부하는 것도 애매한데, 이미 저장된 Solar Icons가 6스타일 1,380종을 전부 MIT 무료로 주기 때문이다. 즉 "무료로 여러 스타일"이 목적이면 Solar가 낫고, 이쪽 Pro를 살 이유를 찾기 어렵다.
그래도 볼 만한 구석은 카테고리 배분이다. 19개 분류에 15~16개씩 거의 균등하게 채워 놨고 Weather, Education, Maps & Travel, Finance처럼 범용 세트가 얇게 다루는 영역도 같은 밀도로 들어 있다. 대시보드나 문서 도표처럼 특정 영역만 필요한 경우 빠짐없이 찾아지는 편이다.
가격 구조가 아이콘 세트로는 드물게 구독이다. 좌석당 월 5달러이고 "구독 중에만 사용"이라고 명시돼 있어, 결제를 멈추면 Pro 스타일을 계속 쓸 수 없다는 뜻으로 읽힌다. 프로젝트에 박아 넣는 에셋으로는 부담스러운 조건이니 무료 2스타일 범위 안에서만 쓰는 게 안전하다. 무료분 MIT는 별개로 영구 보장을 명시한다.
주의: 저장소가 2026-09-25에 만들어졌고 별이 1개다. 확인 시점 기준 나온 지 이틀 된 프로젝트라 아이콘 추가·수정 속도와 지속 여부를 판단할 근거가 없다. 프로덕션에 넣기 전에 몇 달 지켜보거나, npm 패키지를 고정 버전으로 물고 가는 편이 낫다.
"이런 느낌의 랜딩을 만들어 줘"를 에이전트에게 시킬 때, 말로 설명하는 대신 실제 화면을 골라 프롬프트로 넘기고 싶을 때. 저장된 DESIGN.md 계열과 층이 다르니 구분해 둔다 — getdesign.md(550곳), Inspo(832곳), Refero Styles(2,000곳+)는 남의 제품에서 색·타이포·여백 토큰을 뽑아 디자인 시스템으로 물리는 쪽이고, Kage는 토큰이 아니라 화면의 구조와 리듬을 섹션 단위로 물린다. 전체 톤을 잡을 거면 저쪽, 히어로 하나 가격표 하나를 특정해서 시킬 거면 이쪽이다. 둘을 같이 써도 충돌하지 않는다.
실무에서 값을 하는 건 필터다. 기술 스택으로 거를 수 있는 게 특히 드물다 — Next.js + Tailwind로 실제 구현된 사이트만 추려 보면 내 스택으로 재현 가능한 것만 남는다. 시각 스타일과 주조색 필터도 있어서 "다크 + 편집형 + Next.js 히어로"처럼 좁혀 들어간다. 컴포넌트마다 복사 수가 공개돼 있어 에이전트들이 실제로 무엇을 집어 가는지도 보인다.
IP 처리가 저장된 UUI보다 낫다. 푸터에 "스크린샷은 각 제품의 것이며 영감과 비평 목적으로 보여 준다"고 명시하고, MCP 문서에도 "프롬프트는 에이전트가 브랜딩이나 카피를 재현하지 않고 구조만 빌리도록 작성했다"고 밝혀 뒀다. UUI는 제품명을 그대로 단 채 코드 복사를 제공해 그대로 옮길 위험이 컸는데, 이쪽은 설계부터 그 선을 긋고 있다. 그래도 최종 책임은 쓰는 쪽이니 문구·로고·색까지 따라가지 않는지는 직접 확인할 것.
OG 이미지가 151장으로 전체 디자인 335개 중 절반 가까이를 차지한다. 랜딩 페이지는 174개이므로 "화면 335개"를 전부 페이지로 기대하면 어긋난다.
덤으로 Skills 페이지에 에이전트용 디자인 스킬 17종이 설치 명령과 설치 수까지 정리돼 있어, 이 분야 스킬을 한 번에 훑기에도 쓸 만하다.
삽화가 필요한 랜딩·문서·슬라이드에서 출처 표기 부담 없이 쓸 그림을 찾을 때. 라이선스가 이 모음의 핵심이고 경계가 분명하다 — 일러스트 파일 자체는 CC0 1.0이라 복제·수정·배포를 상업적으로 해도 되고 출처 표기도 필요 없다(크레딧은 감사하다는 수준). 반면 웹사이트 코드, Figma 플러그인 소스, MCP 서버 소스, 카탈로그 파이프라인과 메타데이터는 전부 독점이고 복제·재배포가 금지다. 즉 그림은 마음대로, 플랫폼은 건드리지 말 것.
저장된 Koboyo Icons(손그림 SVG 26만종)와 결이 비슷해 보이지만 단위가 다르다. Koboyo는 아이콘이고 이쪽은 장면을 이루는 오브젝트 일러스트다 — 나무·수레·상인·제어판처럼 여러 개를 모아 하나의 그림을 만드는 쪽이다. 그래서 MCP에 curate_scene과 prepare_asset_pack 같은 도구가 붙어 있다. 에이전트에게 장면을 통째로 맡기려면 이쪽, 아이콘 한두 개면 Koboyo.
실무 주의 하나: 확인 시점(2026-09-26) 기준 홈페이지의 "Illustrated asset library" 갤러리가 "Loading illustrations / The library is getting ready"에서 넘어가지 않는다. 두 번 방문해 각각 9초 이상 기다려도 같았다. 반면 Figma 커뮤니티 키트 링크와 MCP 상태 표시("All systems operational")는 정상이므로 사이트 전체가 죽은 게 아니라 웹 갤러리 위젯만 고장인 것으로 보인다. 지금 브라우징하려면 Figma 커뮤니티 파일이나 플러그인, 또는 MCP로 접근하는 게 확실하다.
브랜드 주의: 키트 중 Barbieland는 이름과 소재가 특정 완구 브랜드를 연상시킨다. CC0라도 상표는 별개 문제이므로 제품에 그대로 쓰기 전에 구성 요소를 살펴볼 것.
Pablo Stanley가 참여 일러스트레이터로 이름을 올리고 있는데, Humaaans·Open Peeps·Blush를 만든 사람이라 그 계열의 무료 일러스트를 찾아본 적이 있다면 결이 익숙할 것이다.
기술 스택 배지, 연동 목록, 결제 수단 표시처럼 브랜드 로고가 무더기로 필요할 때. 저장된 로고 계열의 서열이 이걸로 바뀐다 — 규모 순으로 logos by lndev 15,017종 > theSVG 7,400종 > SVGL 669종이다. 다만 수가 곧 실력은 아니다. SVGL은 라이트·다크 두 변형을 갖춰 어두운 배경에서 바로 쓸 수 있고 생태계에서 기준처럼 쓰이며(저장된 open-slide가 로고 검색에 SVGL을 쓴다), theSVG는 npm·CLI·MCP 설치 경로를 제공해 코드에서 끌어 쓴다. 이쪽은 설치 경로 없이 웹에서 복사·다운로드만 되는 대신 폭이 압도적이다. 그러니 유명 브랜드 몇 개면 SVGL, 코드에서 자동으로 끌어 쓸 거면 theSVG, 무명 서비스까지 찾아야 하면 여기를 본다.
분포를 먼저 보고 기대치를 맞추는 게 좋다. Companies & Services 5,641과 Productivity 2,943, Payments 2,428 셋이 전체의 3분의 2를 차지하고, 정작 개발자가 자주 찾는 Frameworks & UI Libraries는 498, Languages & Runtimes는 161, AI & ML은 144뿐이다. 즉 "15,000종"의 두께는 일반 기업·SaaS 쪽에 쏠려 있다. 국기가 필요하면 별도 국기 라이브러리를 찾을 것 없이 여기 248종이 있다는 것도 알아 둘 만하다.
라이선스를 분리해서 볼 것. 저장소의 MIT는 이 프로젝트의 코드와 수집물 구성에 적용되는 것이고, 개별 로고는 각 회사의 상표다. 색을 바꾸거나 변형하지 말고, 제휴·보증으로 오인될 배치를 피하고, 필요하면 각사 브랜드 가이드라인을 확인해야 한다. 이 구분은 SVGL·theSVG에도 똑같이 적용된다.
사소한 불일치: 상단 표기는 15,017종(아이콘 13,072 + 워드마크 1,945)인데 필터 합계는 15,015로 뜬다. 카테고리 20개의 실측 합은 15,017과 맞는다.
광고 크리에이티브나 랜딩 히어로의 카피·레이아웃을 잡아야 할 때, 남들이 돈 써서 검증한 것을 먼저 보고 싶을 때. 저장된 레퍼런스 갤러리 24종 중 유료 광고 크리에이티브를 다루는 건 이것뿐이다 — posts.design은 기업이 올린 소셜 게시물(오가닉)이고, CTA Gallery는 웹사이트의 CTA 문구, UXSnaps는 제품 UI 분해라서 영역이 겹치지 않는다. 해설 방식은 UXSnaps와 가장 비슷하다(주석 오버레이).
디자인보다 카피와 앵글을 얻는 쪽에 값이 있다. 광고마다 업종·플랫폼·오퍼·앵글로 걸러지기 때문에 "HR SaaS가 계산기를 미끼로 쓴 LinkedIn 광고" 같은 식으로 좁혀 볼 수 있고, 랜딩 페이지 원본 링크가 붙어 있어 광고에서 랜딩까지 메시지가 어떻게 이어지는지 한 벌로 확인된다. 같은 브랜드의 다른 광고가 묶여 있어 한 회사가 앵글을 어떻게 바꿔 가며 테스트하는지도 보인다.
실측해 보니 "explained"라는 간판만큼 해설이 채워져 있지는 않다. breakdowns 244건 중 20건을 표본으로 열어 보니 9건만 주석이 있고 11건은 "Ad breakdown coming soon"이라 광고 이미지와 브랜드 설명만 나온다. 절반 가까이는 해설 없는 스크랩이라고 보고 들어가는 게 맞다.
주의: 여기 실린 것은 전부 남의 브랜드 광고다. 사이트도 푸터에 "공개된 광고를 모았을 뿐이며 권리는 각 소유자에게 있다"고 밝힌다. 카피 구조나 레이아웃 원리를 가져오는 건 괜찮지만 이미지·문구를 그대로 쓰면 안 된다. 그리고 이 갤러리는 Diligent Studios의 유료 광고 디자인 서비스로 유입시키는 창구라서(상단 고정 배너와 AD DESIGN SERVICE 버튼) 해설의 결론이 "잘 만든 광고가 필요하다"로 기우는 경향을 감안해 읽을 것. 첫 방문 시 쿠키 배너가 뜨는데 DECLINE 선택지가 있다.
움직이는 그라디언트 배경을 코드가 아니라 파일(PNG·MP4·WebM)로 뽑아야 할 때. 저장된 배경 계열과는 층이 다르니 헷갈리지 말 것 — bg.ibelick·Aura Gradients는 CSS, UVCanvas는 WebGL 컴포넌트로 전부 앱에 심는 코드다. 이쪽은 결과물이 미디어 파일이라 프레젠테이션, 소셜 이미지, 영상 편집 타임라인, 화상회의 배경처럼 코드를 넣을 수 없는 곳에 쓴다.
실제로 값을 하는 쪽은 유료 팩이 아니라 무료 Gradient Lab이다. 로그인도 이메일도 설치도 없이 브라우저에서 바로 돌고, 4K 30초 MP4까지 워터마크 없이 내보내며, 만든 결과물은 상업적으로 써도 되고 출처 표기도 필요 없다고 FAQ에 명시돼 있다. 배경 팩을 살 이유가 없어도 이 도구만 북마크할 값이 있어서 역할을 asset이 아니라 tool로 뒀다 — 결제 없이 쓸 수 있는 부분이 생성기 하나뿐이기 때문이다. 바로 여는 주소는 /gradient-lab 이다.
라이선스가 두 갈래로 다르다. Gradient Lab으로 만든 것은 내 것이고 제약이 없다. 반면 구매한 배경 파일은 클라이언트 작업·웹·앱·광고·소셜·프레젠테이션·모션에 쓸 수 있지만 독립 상품으로 재판매·재배포하는 것은 금지다. 그리고 디지털 상품이라 환불이 안 된다고 못 박아 뒀으니 $49는 되돌릴 수 없다고 보고 결정할 것.
주의: 사이트 안에서 숫자가 서로 맞지 않는다 — 홈 히어로·가격표는 29컬렉션 1,273종, 홈 FAQ는 24컬렉션 1,167종, Freebies 페이지는 31컬렉션 1,359종이라고 쓴다. Freebies 쪽이 가장 최신으로 보이지만 어느 숫자도 확정으로 읽지 말 것. 또 Gradient Lab은 BETA 표기이고 셰이더를 실시간으로 돌리므로 사양이 낮은 기기에서는 프리뷰가 버벅인다(화면에 fps가 표시된다). 컬렉션 상당수가 AI 생성물이라는 것도 사이트가 밝히고 있으니, AI 이미지 사용을 제한하는 클라이언트라면 확인이 필요하다.