Kidow

542 bookmarks
Newest
Solar Icons — 6가지 스타일을 갖춘 아이콘 1,380종
Solar Icons — 6가지 스타일을 갖춘 아이콘 1,380종
같은 아이콘의 스타일 변형으로 위계를 만드는 계열(저장해둔 Phosphor, Keyline Icons)과 같은 자리. Solar의 특징은 변형 축이 굵기가 아니라 표현 방식이라는 점이다 — Duotone 두 종과 Broken(선이 끊긴 스타일)이 있어 같은 아이콘으로 더 뚜렷하게 다른 인상을 만들 수 있다. 특히 Broken은 다른 세트에 거의 없는 스타일이라 개성이 필요할 때 카드가 된다. 프레임워크 패키지 폭이 넓어 Vue·Svelte·Angular 프로젝트에서도 같은 세트를 쓸 수 있다. 중요: 아이콘 라이선스가 CC BY 4.0이라 상업적으로 써도 되지만 출처 표기 의무가 있다 — 저장해둔 MIT 세트(Lucide, Phosphor, Iconoir, Keyline)와 달리 표기 위치를 정해야 하므로 프로젝트 성격에 따라 부담이 될 수 있다. 여섯 스타일을 섞으면 산만하니 한둘로 고정할 것.
Design#icons#svg#react#vue#svelte#angular#duotone#cc-by#mit#asset
·solar-icons.vercel.app·
Solar Icons — 6가지 스타일을 갖춘 아이콘 1,380종
Blobatar — 4.4KB 결정론적 기하 아바타
Blobatar — 4.4KB 결정론적 기하 아바타
저장해둔 아바타 항목 셋 중 가장 가벼운 선택지. 구분은 이렇다 — Facehash는 얼굴형 고정, DiceBear는 61종 스타일로 폭이 넓지만 스타일별 라이선스 확인이 필요하고 HTTP API 의존이 생길 수 있으며, Blobatar는 추상 기하 도형에 4.4KB·의존성 0이다. "사용자를 구분할 색과 모양만 있으면 되고 번들을 늘리고 싶지 않다"면 여기가 맞다. 4.5:1 명암비를 보장한다고 명시한 점이 실무적으로 유용한데, 자동 생성 아바타는 배경색과 겹쳐 안 보이는 경우가 흔하기 때문이다. 결정론적이라 이미지를 서버에 저장할 필요가 없는 것은 셋 공통. 추상 도형이라 개성은 약하니 사람 얼굴 느낌이 필요하면 Facehash·DiceBear 쪽으로.
UI Components#react#avatar#identicon#lightweight#accessibility#mit#micro
·blobatar.dev·
Blobatar — 4.4KB 결정론적 기하 아바타
Cube Motion — 선택지를 없앤 UI 모션 라이브러리
Cube Motion — 선택지를 없앤 UI 모션 라이브러리
"값을 고를 수 없게 만든 것"이 이 라이브러리의 설계 의도다. 애니메이션 값을 매번 정하다 보면 화면마다 지속 시간과 이징이 제각각이 되어 제품이 산만해지는데, 네 가지 역할로 강제하면 일관성이 자동으로 따라온다. 그래서 여러 사람이 작업하는 제품이나 모션에 시간을 쓰고 싶지 않은 프로젝트에 맞다. 반대로 연출이 제품의 차별점인 사이트(저장해둔 Atelier UI·GetLayers 계열)에는 맞지 않는다 — 고칠 수 있는 게 없기 때문이다. 저장된 모션 항목과의 구분: Motion Primitives·Kinetics는 값을 직접 맞추는 재료, DialKit은 그 값을 조절하는 도구, Cube Motion은 값을 아예 정해주는 규율이다. Web Animations API 기반이라 프레임워크 비종속이고 번들이 가볍다는 점도 장점.
UI Components#javascript#animation#web-animations-api#react#vue#svelte#mit#micro
·cube-motion.dev·
Cube Motion — 선택지를 없앤 UI 모션 라이브러리
Atelier UI — 손으로 다듬은 스크롤·셰이더 애니메이션 컴포넌트
Atelier UI — 손으로 다듬은 스크롤·셰이더 애니메이션 컴포넌트
스크롤 연출과 WebGL 셰이더가 한 라이브러리에 있고 React Three Fiber를 정식으로 쓴다는 점이 저장된 연출 계열 대부분과 다르다 — 보통은 CSS·Motion 수준에서 끝나거나 3D는 별도 항목이다. 포트폴리오·에이전시·제품 소개처럼 스크롤을 타고 장면이 전개되는 사이트에 맞고, 대시보드나 도구형 제품에는 과하다. 무료 25종이 MIT로 열려 있으니 유료 판단 전에 그쪽으로 코드 품질과 애니메이션 감각을 확인할 것 — 이 계열은 "손으로 맞춘 타이밍"이 값어치의 핵심이라 실제로 만져봐야 판단이 선다. Pro는 구독이 아닌 1회 결제라 조건은 나쁘지 않다. React Three Fiber·Drei·postprocessing이 따라오므로 번들과 모바일 성능은 반드시 확인할 것.
UI Components#react#typescript#tailwind#react-three-fiber#webgl#scroll#paid#motion#fx#paid-license
·atelier-ui.com·
Atelier UI — 손으로 다듬은 스크롤·셰이더 애니메이션 컴포넌트
YuE2 — 가사·스타일로 악보와 완곡을 생성하는 음악 AI
YuE2 — 가사·스타일로 악보와 완곡을 생성하는 음악 AI
음악 생성 AI를 직접 돌려보거나 파이프라인에 넣을 때 검토할 오픈 모델. 상용 서비스(Suno 등)와 달리 가중치가 공개돼 있어 로컬 실행과 커스터마이징이 가능하고, "가사 → 악보 → 오디오" 중간에 편집 가능한 악보 단계가 있다는 점이 구조적 차별점이다 — 결과가 마음에 안 들 때 프롬프트를 다시 굴리는 대신 악보를 고칠 수 있다. 학습 데이터를 CC0와 라이선스된 합성 데이터로 한정했다고 밝힌 점은 저작권 리스크 측면에서 의미가 있으나, 생성물의 상업적 사용 조건은 모델 라이선스를 직접 확인해야 한다. 벤치마크 우위 주장은 자체 평가이므로 실제 결과물로 판단할 것. 35.9억 파라미터라 로컬 실행에는 상당한 GPU 메모리가 필요하다. 이 북마크함에서는 성격이 조금 이질적이라 Tools의 research로 넣어두었으니, 다른 자리가 낫다면 알려주세요.
Tools#music#generation#open-model#huggingface#research
·map-yue2.github.io·
YuE2 — 가사·스타일로 악보와 완곡을 생성하는 음악 AI
i-have-adhd — AI 어시스턴트 답변을 짧고 실행 위주로 바꾸는 스킬
i-have-adhd — AI 어시스턴트 답변을 짧고 실행 위주로 바꾸는 스킬
AI 어시스턴트의 장황한 답변이 거슬릴 때 적용할 설정. 규칙 자체가 SKILL.md 한 장에 정리돼 있어 그대로 쓰기보다 읽어보고 내 취향에 맞는 항목만 골라 프로젝트 지침이나 개인 설정에 옮기는 쪽이 실용적이다 — 특히 "결론부터, 번호 매기기, 목록 5개 제한"은 대부분의 작업에 무난히 적용된다. 반대로 "구체적 소요 시간 제시" 같은 규칙은 모델이 근거 없이 숫자를 지어낼 수 있어 그대로 쓰기엔 주의가 필요하다. 저장해둔 AutoSkills·Impeccable처럼 에이전트 동작을 규칙으로 통제하는 계열과 함께 볼 것.
Tools#ai-agent#skill#prompt#claude#mit#build
·github.com·
i-have-adhd — AI 어시스턴트 답변을 짧고 실행 위주로 바꾸는 스킬
Auto-Editor — 무음·정지 구간을 자동으로 잘라내는 영상 편집기
Auto-Editor — 무음·정지 구간을 자동으로 잘라내는 영상 편집기
화면 녹화 기반 영상의 1차 정리를 자동화하는 도구. 데모 영상, 튜토리얼, 라이브 코딩 녹화처럼 말을 고르거나 타이핑하느라 생기는 빈 구간이 많은 소재에서 효과가 크다 — 손으로 컷을 잡는 대신 명령 한 줄로 무음 구간을 날리고, 남은 부분만 편집기에서 다듬는 흐름이 된다. CLI라 여러 파일을 일괄 처리하거나 스크립트에 넣기 쉽고, 웹 앱이 있어 설치 없이 한 번 시험해볼 수도 있다. 판정 기준을 음량·모션·자막 중에서 고를 수 있으니 소재에 맞춰 선택할 것(말이 없는 화면 녹화는 모션 기준이 맞다). 주의: 자동 컷은 문장 끝의 짧은 호흡까지 잘라내 부자연스러워질 수 있으므로 여유 프레임(마진) 옵션을 조정해 쓸 것. 저장해둔 OpenCut(웹 기반 영상 편집)이 편집 자체라면 여기는 편집 전 자동 정리 단계다.
Tools#video#editing#cli#automation#open-source#build
·auto-editor.com·
Auto-Editor — 무음·정지 구간을 자동으로 잘라내는 영상 편집기
Supahero — 웹사이트 히어로 섹션 900종+ 레퍼런스
Supahero — 웹사이트 히어로 섹션 900종+ 레퍼런스
랜딩 페이지의 첫 화면을 설계할 때 보는 전문 레퍼런스. 히어로는 페이지에서 가장 시간이 오래 걸리고 제품 인상을 좌우하는 구간인데, 다른 갤러리는 페이지 전체 스크린샷을 보여줘 히어로만 비교하기 어렵다 — 여기는 그 구간만 900건 이상 나란히 놓고 볼 수 있다. 실제 서비스(Stripe·Figma 등)라 콘셉트 작업이 아니라 프로덕션에서 검증된 구성이라는 점도 장점이다. 헤드라인 길이, 서브 카피, CTA 개수와 위치, 시각 요소(스크린샷·일러스트·3D) 비율을 비교해볼 것. 저장해둔 cta.gallery(전환 문구)와 짝으로 보면 히어로의 구조와 카피를 함께 잡을 수 있고, 구현체는 저장된 블록 계열(Tailark, blocks.so, ONONC)에서 찾으면 된다.
Design#hero#landing#web-design#gallery#inspiration
·supahero.io·
Supahero — 웹사이트 히어로 섹션 900종+ 레퍼런스
Logosystem — 로고 1,300종 필터 검색 갤러리
Logosystem — 로고 1,300종 필터 검색 갤러리
로고를 새로 만들거나 디자이너에게 방향을 전달할 때. 가장 실용적인 부분은 필터다 — "핀테크 + 기하학 + 모던" 식으로 조건을 좁혀 볼 수 있어서 막연히 스크롤하는 갤러리보다 시간이 훨씬 덜 든다. 디자이너에게 레퍼런스를 넘길 때 무드보드 형태로 정리하기도 쉽고, 애니메이션 로고 컬렉션은 로고 모션을 발주하거나 직접 만들 때 참고가 된다. 저장해둔 항목과 역할 구분: 로고착착은 한국 브랜드의 공식 로고 자산(실제 사용), svgl·Developer Icons는 기존 브랜드·기술 로고 파일, icon.museum은 앱 아이콘, 그리고 여기는 새로 만들 로고의 디자인 레퍼런스다. 주의: 레퍼런스는 방향 참고용이며 기존 로고와 유사하게 만들면 상표 문제가 생길 수 있다.
Design#logo#branding#gallery#wordmark#free#inspiration
·logosystem.co·
Logosystem — 로고 1,300종 필터 검색 갤러리
Inspora — 분야별 디자인 레퍼런스 (시간 단위 갱신)
Inspora — 분야별 디자인 레퍼런스 (시간 단위 갱신)
저장된 레퍼런스 갤러리가 이미 여럿이므로 역할로 구분해 쓸 것 — CollectUI는 웹 UI 밀도, Recent는 분야 확장과 OG 이미지·앱 스크린샷, Uiinspoo는 모바일·대시보드, dark.design은 다크 테마, cta.gallery는 전환 문구, navbar.gallery는 내비게이션, details.so는 인터랙션 디테일, 그리고 Inspora는 갱신 빈도(매시간)와 7개 분야 균형이다. 트렌드를 자주 확인하는 용도라면 여기가 맞고, 특정 화면 유형을 파려면 위의 전문 갤러리가 낫다. 주의: 갱신이 잦다는 건 큐레이션 밀도가 낮을 수 있다는 뜻이기도 하니 훑는 시간을 정해두고 볼 것.
Design#design#gallery#branding#motion#inspiration
·inspora.design·
Inspora — 분야별 디자인 레퍼런스 (시간 단위 갱신)
@shadcn/lint — 디자인 시스템 규칙을 강제하는 린터
@shadcn/lint — 디자인 시스템 규칙을 강제하는 린터
AI 코딩 에이전트가 디자인 시스템을 어기는 문제를 정면으로 겨냥한 도구. 에이전트에게 "토큰만 써라, 임의 값 쓰지 마라"라고 프롬프트로 부탁하는 대신 린터로 강제하고, 오류 메시지에 올바른 대안을 담아 에이전트가 스스로 고치게 하는 접근이다 — 프롬프트보다 확실하고 반복 수정 횟수를 줄인다. Claude Code로 UI 작업을 많이 한다면 저장해둔 Ultracite·Oxc·Impeccable과 함께 검토할 축이며, 특히 임의 값(p-[13px] 같은)이 코드베이스에 쌓이는 문제를 겪고 있다면 효과가 즉각적이다. Oxlint를 쓰면 Oxc 기반이라 속도 이점도 따라온다.
Tools#lint#tailwind#design-system#shadcn#ai-agent#mit#audit
·github.com·
@shadcn/lint — 디자인 시스템 규칙을 강제하는 린터
What Ships — 스타트업 런치 영상 2,000편 디렉터리
What Ships — 스타트업 런치 영상 2,000편 디렉터리
제품을 어떻게 알릴지 준비할 때 보는 자료. 런치 영상은 30초에서 2분 사이에 제품을 설명해야 하는 특수한 형식인데(무엇을 먼저 보여주는지, 화면 녹화와 내레이션 비율, 자막 처리) 잘 만든 사례를 모아 보기가 어렵다. 저장해둔 swiped.design이 글 형태 콘텐츠라면 여기는 영상이다. 개발자 도구 카테고리를 보면 비슷한 성격의 제품이 어떻게 데모를 구성하는지 바로 비교된다. llms.txt와 API를 제공하므로 AI 도구로 분석하기도 쉽다.
Tools#launch#video#marketing#startup#free#directory
·whatships.com·
What Ships — 스타트업 런치 영상 2,000편 디렉터리
SPY UI — 컴포넌트 333종·차트 280종 유료 라이브러리
SPY UI — 컴포넌트 333종·차트 280종 유료 라이브러리
규모로 승부하는 유료 라이브러리. 차트 280종은 저장된 어떤 차트 항목보다 많지만, 실무에서 차트는 종류 수보다 축·툴팁·반응형 제어가 중요하므로 숫자만 보고 판단하지 말 것(그 관점에서는 저장해둔 chartcn의 조합형 설계나 Bklit이 나을 수 있다). 저장된 무료 연출·블록 계열이 이미 두터우므로 유료 결제 근거는 "여기에만 있는 컴포넌트"이거나 "한 곳에서 전부 해결하는 시간 절약"일 때다. 연 구독보다 라이프타임 249달러가 조건상 낫고, 무료 티어로 코드 품질을 먼저 확인할 것.
UI Components#react#nextjs#tailwind#framer-motion#chart#paid#fx#paid-license
·spyui.online·
SPY UI — 컴포넌트 333종·차트 280종 유료 라이브러리
Solaris Sky — 지상에서 본 태양을 재현하는 WebGL 셰이더
Solaris Sky — 지상에서 본 태양을 재현하는 WebGL 셰이더
히어로 배경에 하늘·태양 연출이 필요할 때의 특화 컴포넌트. 저장해둔 Vanta.js가 프리셋 배경 여러 종을 얕게 제공한다면 여기는 한 가지 장면을 깊게 파고든 쪽이라 결과물의 밀도가 다르다. 시간대 프리셋(새벽·정오·석양)이 있어 서비스 톤이나 시간대에 맞춰 바꿀 수 있는 점도 재미있다. 주의사항은 셰이더 공통 — GPU 부담과 모바일 성능, prefers-reduced-motion 처리, 그리고 텍스트를 위에 얹을 경우 대비 확보다. 용도가 매우 특정하므로 하늘 연출이 콘셉트에 맞을 때만.
UI Components#webgl#shader#react#sky#open-source#background#license-unknown
·solaris.cuvii.dev·
Solaris Sky — 지상에서 본 태양을 재현하는 WebGL 셰이더
Space UI — Base UI 기반 표현형 컴포넌트·창작 도구
Space UI — Base UI 기반 표현형 컴포넌트·창작 도구
Base UI를 기반으로 하는 드문 항목 중 하나(저장된 UI TripleD, Sora UI와 같은 이유로 가치가 있다). 특이한 건 한 라이브러리 안에 프리미티브부터 생성형 아바타·국기·공간 오디오까지 들어 있다는 점인데, 이는 곧 성격이 분산돼 있다는 뜻이기도 하다 — 저장해둔 전문 항목들(DiceBear 아바타, flagcn 국기, UI SFX 사운드)이 각 영역에서는 더 깊다. 따라서 전부를 여기로 통일하기보다 Base UI 기반 프로젝트에서 필요한 조각을 가져오는 용도로 볼 것. MIT.
UI Components#react#base-ui#tailwind#nextjs#shadcn#mit#kit
·spaceui.one·
Space UI — Base UI 기반 표현형 컴포넌트·창작 도구
DialKit — 모션·색·레이아웃을 실시간으로 조절하는 개발 패널
DialKit — 모션·색·레이아웃을 실시간으로 조절하는 개발 패널
애니메이션 값을 맞추는 작업의 반복(코드 수정 → 저장 → 새로고침 → 확인)을 없애는 도구. 스프링 stiffness·damping이나 이징 곡선은 숫자만 보고 정할 수 없고 눈으로 맞춰야 하는데, 브라우저에서 슬라이더로 돌려보고 확정된 값을 코드에 옮기는 흐름이 훨씬 빠르다. 저장해둔 Kinetics·Motion Primitives에서 값을 조정할 때도 같은 문제를 겪게 되니 짝으로 두면 좋다. 개발 전용 도구이므로 프로덕션 번들에서는 제외되도록 설정할 것. 라이선스는 저장소에서 확인.
Tools#react#vue#svelte#devtools#motion#tuning#build
·dialkit.dev·
DialKit — 모션·색·레이아웃을 실시간으로 조절하는 개발 패널
Bencho — 실제로 동작하는 인터랙티브 UI 블록
Bencho — 실제로 동작하는 인터랙티브 UI 블록
"라이브, 목업 아님"이라는 지향이 요점 — 스크린샷이나 정적 데모가 아니라 실제 상태와 상호작용이 있는 블록이라 도입 전에 동작을 확인할 수 있다. 파형이나 컬러 피커처럼 상태 관리가 까다로운 것들이 포함돼 있어 발췌 가치가 있다. 다만 라이선스가 확인되지 않으므로 코드를 가져다 쓰기 전에 조건을 확인할 것.
UI Components#react#ui-blocks#interactive#copy-paste#section#license-unknown
·bencho.dev·
Bencho — 실제로 동작하는 인터랙티브 UI 블록
Rare UI — 흔치 않은 애니메이션 컴포넌트 19종+
Rare UI — 흔치 않은 애니메이션 컴포넌트 19종+
규모가 작은 대신 다른 곳에 잘 없는 항목을 노린 모음. Duration Picker(기간 입력)와 Folder Component처럼 실제로 구현하려면 번거로운데 기성 라이브러리에는 없는 것들이 있어 발췌 가치가 있다. 컴포넌트당 단일 파일이라 가져다 수정하기 쉬운 구조. 저장된 연출 계열이 이미 많으므로 전면 도입이 아니라 필요한 항목만 집어올 것.
UI Components#react#tailwind#shadcn#animation#open-source#motion#fx#license-unknown
·rareui.com·
Rare UI — 흔치 않은 애니메이션 컴포넌트 19종+
Uiinspoo — 모바일·대시보드·랜딩 UI 레퍼런스
Uiinspoo — 모바일·대시보드·랜딩 UI 레퍼런스
저장된 레퍼런스 갤러리 중 모바일 앱과 대시보드 비중이 높은 쪽. CollectUI가 전반적 비주얼, Recent가 분야 확장(브랜딩·패키지), dark.design이 다크 테마, 여기는 화면 유형(모바일·대시보드)이다. 대시보드는 실제로 만들 일이 많은데 잘 된 사례를 모아 보기 어려운 영역이라 그 축이 유용하다. 주의: 다른 갤러리와 마찬가지로 콘셉트 작업이 섞여 있어 실제 데이터 양·에러 상태가 반영되지 않은 경우가 많다.
Design#ui-design#mobile#dashboard#gallery#inspiration
·uiinspoo.com·
Uiinspoo — 모바일·대시보드·랜딩 UI 레퍼런스
Blume — 마크다운으로 만드는 문서 사이트 생성기
Blume — 마크다운으로 만드는 문서 사이트 생성기
저장해둔 Fumadocs와 직접 비교할 항목. 갈리는 지점은 명확하다 — Fumadocs는 React 프레임워크라 기존 Next.js 앱에 /docs로 얹고 레이아웃·인증·토큰을 공유하는 데 강하고, Blume은 Astro 기반의 독립 생성기라 문서 사이트만 따로 세울 때 설정이 거의 없다. 즉 "앱 안에 문서" 대 "문서 전용 사이트"의 선택이다. Blume 쪽이 특히 앞서는 것은 OpenAPI 인터랙티브 레퍼런스, 36개 로케일, 체인지로그, llms.txt·MCP·페이지 내 어시스턴트가 기본이라는 점 — API를 공개하는 제품 문서라면 이쪽이 손이 훨씬 덜 간다. MIT이고 영구 무료를 표방한다.
UI Components#docs#astro#markdown#openapi#i18n#mcp#mit#content
·useblume.dev·
Blume — 마크다운으로 만드는 문서 사이트 생성기
MicroKit UI — 마이크로 인터랙션 48종 (React·CSS)
MicroKit UI — 마이크로 인터랙션 48종 (React·CSS)
의존성을 늘리지 않고 버튼·입력에 움직임을 주고 싶을 때. 저장해둔 Kinetics(153종, 스프링 물리, AI 프롬프트 제공)와 목적이 같으므로 둘 중 하나면 충분하고, 규모와 물리 기반 품질은 Kinetics가 앞선다. MicroKit의 장점은 shadcn 공식 레지스트리 등록과 Tailwind v3·v4 양쪽 코드 제공이라 v3 프로젝트에서도 바로 쓸 수 있다는 점이다(저장된 최신 항목 다수가 v4 전제라 이 점은 실용적이다).
UI Components#react#css#tailwind#micro-interaction#shadcn#mit#micro
·microkit.co·
MicroKit UI — 마이크로 인터랙션 48종 (React·CSS)
IP as Logo — 무료 상업용 마스코트 로고 3,448개 + 제작 스킬 (PNG, 스킬 MIT)
IP as Logo — 무료 상업용 마스코트 로고 3,448개 + 제작 스킬 (PNG, 스킬 MIT)

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) 공개 배포되는 로고는 다른 서비스와 겹칠 수 있어 상표로서의 식별력이 약하다. 정식 제품의 대표 로고보다는 임시 사용이나 내부 도구 쪽이 적합하다.

Design#logo#mascot#branding#free#asset#commercial-use#png#ai-image#agent-skill#rounded#neo-skeuomorphic#gallery
·ipaslogo.com·
IP as Logo — 무료 상업용 마스코트 로고 3,448개 + 제작 스킬 (PNG, 스킬 MIT)
Opensource UI — MIT 복붙 컴포넌트 200종+와 기기 목업
Opensource UI — MIT 복붙 컴포넌트 200종+와 기기 목업
주목할 부분은 기기 목업 컴포넌트다 — 랜딩에서 제품 스크린샷을 아이폰이나 맥북 프레임 안에 넣어 보여주는 연출은 자주 필요한데, 보통 이미지 목업을 쓰면 반응형과 다크모드에서 깨진다. 코드 컴포넌트면 실제 화면을 그대로 넣을 수 있어 유지보수가 낫다. 일반 컴포넌트 200여 종은 저장된 다른 모음과 겹치므로 목업 때문에 기억해둘 항목으로 두면 된다. MIT에 출처 표기 불필요라 조건이 깔끔하다.
UI Components#react#nextjs#tailwind#mockup#copy-paste#mit#kit
·opensourceui.in·
Opensource UI — MIT 복붙 컴포넌트 200종+와 기기 목업
BoardUI — 에이전트 제품·대시보드용 React Aria 디자인 시스템
BoardUI — 에이전트 제품·대시보드용 React Aria 디자인 시스템
저장해둔 React Aria 기반 항목(Intent UI, dotui)과 같은 계열이면서 용도가 뚜렷하게 다르다 — 범용 UI가 아니라 "에이전트 제품 + 데이터 대시보드" 조합에 맞춰져 있고 차트 카드가 17종으로 두툼하다. 에이전트 전용 블록(컴포저 로더, 진행 표시)과 데이터 테이블·생키가 한 시스템 안에 있는 구성은 저장된 항목 중 드물다. React Aria 기반이라 접근성·날짜 처리의 이점도 따라온다. 판단 기준: 무료 Starter로 범위를 확인한 뒤 Pro 템플릿이 필요한지 보고, 연 구독보다 라이프타임(199유로)이 조건이 낫다. MCP를 제공하므로 Claude Code에서 바로 설치 가능.
UI Components#react#react-aria#tailwind#dashboard#ai-agent#chart#mcp#paid#foundation#paid-license
·boardui.com·
BoardUI — 에이전트 제품·대시보드용 React Aria 디자인 시스템
React Vibe — 모션 중심 완성형 섹션·대시보드
React Vibe — 모션 중심 완성형 섹션·대시보드
컴포넌트 단위보다 섹션·대시보드 덩어리가 중심이라 화면 한 장을 빠르게 세울 때 후보. 다만 저장된 블록·대시보드 계열(Watermelon UI, Tailark, blocks.so, UI TripleD, Spectrum UI)과 크게 겹치므로 새로 도입하기보다 특정 대시보드 레이아웃이 마음에 들 때 발췌할 것. 라이선스 미표기이니 상업 사용 전 저장소 확인.
UI Components#react#dashboard#copy-paste#license-unclear#motion#blocks#appkit
·reactvibe.com·
React Vibe — 모션 중심 완성형 섹션·대시보드
swiped. — 디자인 업계 인기 게시물 주간 스와이프 파일
swiped. — 디자인 업계 인기 게시물 주간 스와이프 파일
UI 레퍼런스가 아니라 콘텐츠 레퍼런스다 — 디자이너·개발자가 자기 작업을 알리는 글을 쓸 때 어떤 구조와 톤이 먹히는지 보는 자료. 사이드 프로젝트나 오픈소스를 공개하고 알려야 할 때, 또는 기술 블로그·릴리스 노트의 톤을 잡을 때 참고할 수 있다. 각 항목에 프롬프트가 붙어 있어 AI로 초안을 뽑는 흐름에 바로 얹힌다. 주의: 인기 게시물의 형식(과장된 훅, 리스트 나열)을 그대로 따라 하면 오히려 신뢰를 깎을 수 있으니 구조만 참고할 것.
Tools#writing#marketing#design#curated#research
·swiped.design·
swiped. — 디자인 업계 인기 게시물 주간 스와이프 파일
brainless — AI 코딩 에이전트 화면을 React 컴포넌트로
brainless — AI 코딩 에이전트 화면을 React 컴포넌트로
에이전트 실행 과정을 웹 화면에 보여줘야 할 때 — 툴 호출 로그, 사고 과정, 코드 diff, 세션 히스토리가 이미 컴포넌트로 있다. 저장해둔 AI UI 계열과 초점이 갈린다: prompt-kit·AI Elements는 대화형 채팅, Beautiful UI는 사람의 승인, AICSS는 대화 중 표시 요소, 그리고 brainless는 터미널 에이전트의 실행 로그 재현이다. Claude Code 스타일 화면을 웹으로 옮길 때 사실상 유일한 기성품. 접근성을 시맨틱 요소로 챙긴 점도 드물다. 라이선스는 저장소에서 확인할 것.
UI Components#ai-agent#terminal#react#shadcn#accessibility#ai#license-unknown
·brainless.swerdlow.dev·
brainless — AI 코딩 에이전트 화면을 React 컴포넌트로
Keyline Icons — shadcn 호환 3중 굵기 아이콘 851종
Keyline Icons — shadcn 호환 3중 굵기 아이콘 851종
저장해둔 Phosphor와 같은 강점(같은 아이콘의 웨이트 변형으로 위계 만들기)을 가지면서 shadcn 호환을 명시한 세트. rounded·sharp 코너를 함께 제공하는 점이 차별적인데, 제품의 border-radius 톤에 아이콘 코너를 맞출 수 있어 디테일에서 이질감이 줄어든다(각진 디자인에 둥근 아이콘을 쓰면 미묘하게 어긋난다). MIT라 상업 사용에 걸림돌이 없다. 851종은 Lucide(약 1,700)보다 적으므로 자주 쓸 아이콘이 있는지 먼저 확인할 것.
Design#icons#svg#shadcn#react#iconify#figma#mit#asset
·keylineicons.com·
Keyline Icons — shadcn 호환 3중 굵기 아이콘 851종
before — 앱스토어 스크린샷·온보딩·페이월 레퍼런스
before — 앱스토어 스크린샷·온보딩·페이월 레퍼런스
앱을 스토어에 올릴 때 반드시 만들어야 하지만 참고 자료를 찾기 번거로운 세 가지(스크린샷, 온보딩, 페이월)를 한곳에서 볼 수 있다. 특히 페이월은 전환에 직결되는데 실제 유료 앱의 화면을 모아 보기가 어려운 영역이라 가치가 크다. 저장해둔 Recent의 앱 스크린샷 카테고리와 겹치지만 이쪽이 ASO 목적에 특화돼 있다. 주의: 잘 팔리는 앱의 페이월 패턴 중에는 다크 패턴에 가까운 것도 섞여 있으므로 구조만 참고하고 사용자를 속이는 요소는 걸러낼 것.
Design#aso#app-store#screenshot#paywall#onboarding#ios#inspiration
·before.click·
before — 앱스토어 스크린샷·온보딩·페이월 레퍼런스
Icon Museum — iOS·macOS 앱 아이콘 갤러리
Icon Museum — iOS·macOS 앱 아이콘 갤러리
앱 아이콘을 만들어야 할 때 참고할 레퍼런스. 앱 아이콘은 작은 정사각형 안에서 원거리 식별성, 배경 대비, 라이트·다크 모드, 여러 크기 축소를 모두 만족해야 하는 특수한 디자인 문제라 일반 로고 레퍼런스로는 감이 안 잡히는데 그 구간을 정확히 채운다. 데스크톱 앱이나 PWA 아이콘 작업 시 먼저 볼 것. 저장해둔 Macapp Supply가 앱 자체(UI 완성도)를 본다면 여기는 아이콘만 본다.
Design#icons#app-icon#ios#macos#gallery#inspiration
·icon.museum·
Icon Museum — iOS·macOS 앱 아이콘 갤러리