기술 스택 배지나 결제 수단 아이콘처럼 브랜드 로고가 필요할 때. Design의 theSVG와 정면으로 겹친다. 갈리는 지점은 규모와 형태 — theSVG는 7,400종에 npm·CLI·MCP 설치 경로를 제공하고, 이건 669종이지만 라이트·다크 변형과 분류가 정돈돼 있다. 수가 필요하면 저쪽, 손으로 골라 쓸 거면 이쪽. Tools의 open-slide가 로고 검색에 이 svgl을 쓴다. 생태계에서 기준처럼 쓰이는 편이다. 브랜드 로고는 상표다. 각 회사의 가이드라인을 따를 것 — 색 변경 금지, 최소 여백, 제휴 오인 금지 등. 라이선스가 명시돼 있지 않다. 라이브러리 자체와 개별 로고의 권리는 별개다.
에이전트에게 코드를 맡길 때 따를 디자인 기준을 물릴 것. 특정 제품의 색·타이포·여백 체계를 그대로 참조하게 한다. Design의 같은 갈래 셋과 규모·방식이 갈린다 — · getdesign.md: 550곳, DESIGN.md 파일을 직접 넘김 · Inspo: 832곳, DESIGN.md + 캡처 2,320장, MCP 연동 · Refero Styles: 2,000곳 이상, MCP 연동. 규모가 가장 크다 셋 다 "남의 디자인 시스템을 가져오는 것"이라는 한계가 같다. 자기 브랜드가 있으면 출발점으로만 쓰고 토큰은 바꿀 것. Design.dev와는 방향이 반대다. 저쪽은 내 기준을 파일로 만들어내고, 이건 남의 기준을 가져온다. 베타이고 가격이 명시돼 있지 않다. 무료 범위를 확인할 것.
간단한 편집을 설치 없이 끝낼 때. 브라우저에서 돌아가므로 맥이든 윈도든 상관없다. Design의 영상 편집기 둘과 갈린다 — Daydream은 로컬 데스크탑 앱에 트랜스크립트 편집, Palmier는 macOS 전용에 반복 작업 자동화. 이건 가장 가볍고 아무 데서나 열린다. 얼리 베타다. 중요한 작업을 맡기지 말고 원본을 따로 보관할 것. GitHub 70k 스타는 이 컬렉션에서 가장 큰 수치다. 다만 스타 수가 완성도를 뜻하지는 않는다 — 베타라는 점을 함께 볼 것. 브라우저 편집이라 긴 영상이나 고해상도에서는 메모리 한계에 부딪힐 수 있다.
입체감 있는 아이콘이 필요할 때. 마케팅 페이지나 온보딩 화면처럼 시선을 끌어야 하는 곳에 쓴다. Design의 다른 아이콘 항목과 용도가 다르다 — Central Icon System·Yesicon은 UI용 선 아이콘, AnimateIcons·lucide-animated는 움직이는 선 아이콘, 이건 장식용 3D 오브젝트다. 제품 UI에 3D 아이콘을 쓰면 무겁고 일관성을 잡기 어렵다. Iconly Pro에도 3D 계열이 있다. 그쪽과 비교해볼 것. 라이선스 구조를 확인할 것 — 개인 무료, 상업은 유료다. 클라이언트 작업이나 서비스에 쓰려면 라이선스를 사야 한다. AI 생성물이다. 세부가 어색한 것이 섞여 있을 수 있으니 확대해서 확인하고 고를 것.
색 조합이 막혔을 때 출발점을 얻는 용도. 포켓몬 디자인은 색 대비가 잘 잡혀 있어서 그대로 쓰기보다 방향을 잡는 데 쓴다. 실무용 도구는 아니다. 접근성 대비나 토큰 체계까지 봐주지 않으므로, 여기서 얻은 색은 대비율을 따로 검사한 뒤 쓸 것. 추출된 색은 포켓몬 캐릭터의 색이지 캐릭터 자체가 아니다. 색 조합에는 저작권이 붙지 않지만, 특정 포켓몬을 연상시키는 조합을 브랜드에 그대로 쓰는 것은 별개 문제다. 참고까지만. Design의 tool 역할 중 가장 가벼운 축이다. 재미로 열어보는 성격이 강하다. 무료이고 로그인이 필요 없다.
서체를 고를 때. 무료 폰트 사이트는 수천 종을 쌓아두는 곳이 많은데 여기는 214종으로 걸러져 있어 훑기 좋다. 가변 폰트 표시가 유용하다. 웹에서 굵기를 여러 단계 쓸 때 파일 하나로 해결되므로 로딩이 가벼워진다. Design의 다른 asset과 성격이 갈린다 — 아이콘·그라디언트·효과음이 있었고 서체는 이번이 처음이다. "무료"의 범위가 서체마다 다르다. 개인용만 무료인 것, 상업 사용까지 되는 것, 웹폰트 임베드가 별도인 것이 섞여 있을 수 있다. 사이트에 라이선스 설명이 없으니 쓰기 전 각 서체의 원 배포처에서 확인할 것. 한글 서체는 다루지 않는 것으로 보인다. 국문이 필요하면 눈누 같은 국내 서비스를 따로 볼 것.
히어로 배경이나 인터랙티브 비주얼을 셰이더 코드 없이 만들 때. 값을 눈으로 조절해 결과를 확인하는 방식이라 GLSL을 몰라도 된다. Design의 tool 역할이나 다른 셋과 다르다 — Photon·Daydream·Palmier는 이미지·영상 편집기이고, 이건 웹에 얹을 인터랙티브 그래픽을 만드는 쪽이다. UI Components의 ThreeUI·Ripple Shader와 목적이 겹치지만 접근이 반대다. 저들은 코드로 만드는 것이고, 이건 도구로 만들어 임베드하는 것. 코드를 직접 다룰 생각이 없으면 이쪽이 빠르다. 라이브 임베드는 외부 서비스에 의존한다는 뜻이다. 서비스가 멈추면 그 그래픽도 멈춘다. 중요한 화면이라면 이미지·영상 내보내기 쪽을 고려할 것. 셰이더 기반이라 GPU 부담이 있다. 모바일과 저사양 기기에서 확인할 것. AI 기능은 유료 플랜의 크레딧제다. 무료로 어디까지 되는지 먼저 확인할 것.
아이콘 하나가 필요한데 어느 세트에 있는지 모를 때. 세트를 돌아다니지 않고 한 번에 검색한다. 한국어 검색이 되는 게 이 컬렉션에서 특이한 점이다. "종합격투기" 같은 단어로 찾아도 결과가 나온다. 영어 단어를 떠올려야 하는 다른 아이콘 사이트와 다르다. Design의 다른 아이콘 항목과 성격이 다르다 — Iconly Pro·Central Icon System은 하나의 세트를 제공하고, AnimateIcons·lucide-animated는 움직임을 더한 것이며, 이건 여러 세트를 가로질러 찾는 검색 도구다. 세트마다 라이선스가 다르다. 오픈소스라고 해도 MIT, Apache, CC-BY 등 조건이 갈리므로 쓸 아이콘이 속한 세트의 조건을 확인할 것. 한 프로젝트에서 여러 세트를 섞으면 선 굵기와 모서리가 제각각이 된다. 찾는 용도로 쓰되 실제로는 한 세트로 통일할 것.
"이 섹션을 어떻게 만들지" 단계에서 사례를 찾을 때. 사이트 전체가 아니라 요소 단위로 검색되는 게 핵심이다. Design의 inspiration 넷과 대상이 갈린다 — Navbar Gallery는 네비게이션만, loadmo.re는 모바일 사이트, Inspo는 사이트 전체와 DESIGN.md, Component Gallery는 컴포넌트 명세와 접근성. 이건 살아 있는 사이트의 디테일과 인터랙션. MCP가 있어 에이전트에게 "이런 히어로 섹션 참고해서 만들어줘"를 맡길 수 있다. 다만 MCP는 유료 플랜에 포함된다. 인터랙션 분류(스크롤 애니메이션·페이지 전환·프리로더)가 특히 쓸모 있다. 정적인 갤러리에서는 못 보는 부분이다. 월 $9다. 무료로 얼마나 볼 수 있는지 먼저 확인할 것.
모바일 화면의 방향을 잡을 때. 데스크탑 레퍼런스는 흔한데 모바일만 모아둔 곳은 드물다. Design의 다른 inspiration과 대상이 갈린다 — Navbar Gallery는 네비게이션, Component Gallery는 컴포넌트 명세, Inspo는 사이트 전체(데스크탑 위주), 이건 모바일 경험. "남다른 사례" 위주라 실험적인 것이 많다. 그대로 따라 하기보다 아이디어를 얻는 용도로 볼 것. 커머스처럼 전환이 중요한 화면에는 과할 수 있다. 코드는 없다. 방향을 정한 뒤 구현은 UI Components에서.
히어로 섹션이나 카드 배경에 쓸 그라디언트가 필요할 때. CSS로 직접 만들면 밋밋해지기 쉬운 질감(그레인·메시·디더)이 이 에셋의 값어치다. Design의 다른 asset과 달리 유료다. 대부분의 무료 대안으로 커버되지 않는 지점(고해상도 질감, 애니메이션 배경)이 필요할 때만 검토할 것. 이미지 파일이다. UI Components의 ThreeUI·연출 계열은 코드로 그리므로 반응형과 수정이 자유롭지만, 이건 고정된 결과물이다. 대신 성능 부담이 없고 결과가 예측 가능하다. 4K~12K는 웹에 그대로 올리기엔 크다. 압축과 포맷 변환을 반드시 거칠 것. 상업 라이선스가 구독에 포함된다고 명시돼 있다. 라이선스가 불분명한 항목이 많은 이 컬렉션에서는 오히려 드문 경우다.
컴포넌트 라이브러리를 직접 만들거나 팀의 작성 규칙을 정할 때. props 이름, 상태 표현, data 속성 같은 것을 매번 즉흥적으로 정하는 대신 기준으로 삼는다. Design의 The Component Gallery와 짝이다 — 저쪽은 여러 디자인 시스템이 실제로 어떻게 했는지 사례를 보여주고, 이건 어떻게 해야 하는지 원칙을 말한다. 사례와 규범. 쓸 코드를 주지 않는다. 읽고 판단하는 문서다. shadcn 본인이 공동 작성했다. UI Components의 shadcn/ui가 어떤 원칙 위에 서 있는지 이해하는 데도 쓸 수 있다. Tools의 Ultracite와 같은 제작자(Hayden Bleasel)다. 에이전트에게 컴포넌트 작성을 맡길 때 이 문서를 기준으로 제시하면 결과가 일관된다.
에이전트에게 줄 설정 파일을 처음 만들 때. DESIGN.md나 AGENTS.md를 빈 화면에서 쓰는 대신 생성기로 초안을 뽑는다. Design의 getdesign.md·Inspo와 같은 갈래이나 방향이 반대다 — 저쪽은 남의 사이트에서 뽑아낸 기준을 가져오는 것이고, 이건 내 기준을 파일로 만들어내는 쪽이다. 프롬프트 라이브러리와 잡다한 도구(대비 검사, 이미지 최적화)가 섞여 있다. 성격이 하나로 모이지 않으므로 필요한 코너만 골라 쓸 것. 뉴스레터 유도가 붙어 있다. 아이콘 팩을 받으려면 구독해야 한다.
Lucide를 쓰는 프로젝트에서 아이콘 몇 개에 움직임을 더할 때. 모양이 그대로라 기존 아이콘과 섞어도 티가 나지 않는다. Design의 AnimateIcons와 거의 같은 물건이다 — 둘 다 Lucide 기반, Motion 사용, MIT. 실질적 차이는 개수(AnimateIcons 1,170, 이쪽 350+)와 설치 경로(이쪽은 npm과 shadcn 레지스트리 둘 다) 정도다. 하나만 고르면 되고 둘 다 넣을 이유는 없다. Its Hover와는 다르다. 저쪽은 독자 세트에 브랜드 로고·이모지까지 포함하고 라이선스가 불명확하다. MIT라 상업 사용에 부담이 없다. 애니메이션 아이콘이 셋이나 쌓였다. 실제로는 하나만 쓰게 되므로, 새 프로젝트에서 한 번 비교해 정한 뒤 나머지는 참고용으로 둘 것.
필요한 아이콘 몇 개만 골라 넣을 때. 패키지 전체를 설치하는 대신 아이콘 단위로 소스를 가져오므로 번들에 딱 그만큼만 들어간다. Design의 AnimateIcons와 정면으로 겹친다. 갈리는 지점은 — · 설치: 이건 아이콘별 shadcn 레지스트리, AnimateIcons는 npm 패키지 하나 · 세트: AnimateIcons는 Lucide 기반이라 기존 아이콘과 모양이 일치, 이건 독자 세트에 브랜드 로고·이모지풍까지 포함 · 라이선스: AnimateIcons는 MIT로 명확, 이건 미표기 이미 Lucide를 쓰고 있으면 AnimateIcons가 자연스럽고, 특정 아이콘 몇 개의 연출만 필요하면 이쪽. 브랜드 로고가 섞여 있다. Design의 theSVG와 마찬가지로 상표이므로 각 회사 가이드라인을 따를 것. 라이선스가 없다. 상업 사용 전 GitHub에서 확인할 것.
아이폰에서 받은 HEIC를 웹에 올릴 PNG·WebP로 바꿔야 할 때처럼 일회성 변환에 쓴다. 설치 없이 바로 된다. VectorDrawable 지원이 특이하다. 안드로이드 리소스를 다룰 일이 있으면 기억해둘 것. 처리가 브라우저 안에서 이뤄지는지 서버로 올라가는지 사이트에 적혀 있지 않다. 비공개 이미지라면 확인 전까지 올리지 말 것. 로컬에서 확실히 끝내야 하면 Design의 Photon Studio를 쓸 것. 반복 작업이라면 도구 대신 sharp나 ImageMagick으로 스크립트를 짜는 편이 낫다. 이건 어디까지나 일회성용이다.
이미 Lucide를 쓰고 있다면 그대로 갈아끼울 수 있다. 같은 아이콘 세트 위에 움직임만 얹은 형태라 모양이 바뀌지 않는다. 사이드바 메뉴나 툴바처럼 호버가 잦은 자리에 쓴다. 전체에 다 붙이면 산만해지니 주요 동선 몇 개만. Design의 다른 아이콘 자료와 형태가 다르다 — Iconly Pro와 Central Icon System은 내려받아 쓰는 자료이고, 이건 npm으로 들어오는 React 컴포넌트다. 움직임이 코드에 포함돼 있다. reduced-motion을 존중하고 트리 셰이킹이 되는 점이 실무에서 중요하다. 아이콘 542종을 넣어도 쓰는 것만 번들에 들어간다. MIT라 상업 사용에 걸림돌이 없다. Lucide 자체도 ISC로 열려 있다.
애니메이션이 어딘가 어색한데 원인을 모를 때. 대개 지속 시간이 아니라 이징이 문제다. 여기서 곡선을 눈으로 비교하면 어떤 느낌을 원하는지 빨리 정해진다. 이름만으로는 감이 안 오는 것들(Anticipate, Overshoot Out 등)을 그래프로 확인할 수 있는 게 핵심. ease-in-out만 반복해 쓰는 습관에서 벗어나는 데 도움이 된다. UI Components의 transitions.dev와 짝이다 — 저쪽은 완성된 트랜지션을 주고, 여기서는 그 안에 넣을 곡선을 고른다. Torph와 같은 제작자(Lochie)가 참여했다. 읽는 자료다. 구현은 CSS cubic-bezier나 쓰는 애니메이션 라이브러리의 값으로 옮겨 적는다.
컴포넌트를 처음부터 설계할 때. "이걸 뭐라고 부르지", "어떤 상태를 갖춰야 하지", "접근성은 뭘 지켜야 하지"에 실제 사례로 답이 나온다. 같은 것을 여러 시스템이 다르게 부르는 문제를 푸는 데 특히 좋다. 팀 안에서 용어를 정할 때 근거로 쓸 만하다. Design의 다른 inspiration과 층위가 다르다 — Navbar Gallery는 네비게이션 한 종류의 시각 사례, Inspo는 사이트 전체 캡처, 이건 컴포넌트 단위의 명세와 접근성 비교다. 보기 좋은 것이 아니라 올바른 것을 찾는 쪽. 복붙용 코드 창고가 아니다. 쓸 코드는 UI Components에서 가져오고, 여기서는 무엇을 만들지를 정한다.
버튼 클릭이나 알림에 소리를 넣고 싶을 때. 효과음을 직접 찾아 다니면 라이선스와 음색 통일에서 시간을 잡아먹는데 그걸 던다. Design의 다른 asset(아이콘·로고)과 같은 갈래이며 이건 소리다. 시각이 아니라 청각 자료라는 점만 다르다. 주의: 웹에서 소리는 기본이 꺼짐이어야 한다. 사용자가 켠 적 없는 소리가 나면 불쾌감으로 이어진다. 설정에서 끌 수 있게 하고 prefers-reduced-motion처럼 조용한 기본값을 둘 것. 소리는 의미를 실어야 한다. 성공·실패·알림 정도로 몇 개만 정해 일관되게 쓰고, 모든 클릭에 붙이지 말 것. 라이선스 종류가 명시돼 있지 않다. 상업 프로젝트라면 GitHub에서 확인할 것.
결제 수단 아이콘, 소셜 로그인 버튼, 기술 스택 배지처럼 남의 브랜드 로고가 필요할 때. 공식 프레스킷을 하나씩 찾아다니는 수고를 던다. Design의 다른 아이콘 자료와 용도가 다르다 — Iconly Pro와 Central Icon System은 내가 그리는 UI 아이콘이고, 이건 정해진 형태가 있는 남의 로고다. 셋은 경쟁이 아니라 용도가 갈린다. 중요: 라이브러리가 오픈소스라는 것과 로고를 마음대로 써도 된다는 것은 별개다. 브랜드 로고는 상표이므로 각 회사의 브랜드 가이드라인(색 변경 금지, 최소 여백, 제휴 오인 금지 등)을 따라야 한다. 특히 자사 서비스가 그 브랜드와 제휴한 것처럼 보이게 쓰면 문제가 된다. MCP 서버가 있어 에이전트에게 "결제사 로고 넣어줘"를 맡길 수 있다.
에이전트에게 "이런 느낌으로"를 말로 설명하기 어려울 때. MCP로 붙여두면 에이전트가 실제 사이트 캡처와 DESIGN.md를 직접 찾아 참조한다. Design의 getdesign.md와 같은 갈래이며 더 넓다 — 저쪽은 DESIGN.md 위주(550곳), 이쪽은 캡처 2,320장까지 포함(832곳)하고 MCP 연동이 붙는다. 에이전트에 상시 물려둘 용도라면 이쪽이 낫다. Navbar Gallery처럼 사람이 눈으로 훑는 용도로도 쓸 수 있다. 다만 그쪽은 네비게이션만 모은 전문 갤러리이고 이쪽은 사이트 전체다. 남의 사이트 캡처가 원본이다. 참고까지만 하고 그대로 베끼지 말 것. 라이선스도 명시돼 있지 않다.
같은 형식의 영상을 반복해서 편집할 때. 인트로·자막·컷 규칙을 Skill로 굳혀두면 다음 영상부터 그대로 적용된다. 회차물이나 정기 콘텐츠에서 값어치가 크다. Design의 Daydream과 직접 경쟁한다. 갈리는 지점은 두 가지 — (1) 처리 위치: Daydream은 로컬에서 끝나고, 이쪽은 클라우드 전사와 생성 모델을 쓴다. 외부에 나가면 안 되는 푸티지라면 Daydream. (2) 반복성: 매번 다른 영상이면 Daydream, 같은 포맷을 찍어낸다면 이쪽. macOS 26(Tahoe) 이상만 된다. 구형 맥이나 Windows면 선택지에서 빠진다. 편집기 자체는 무료고 생성 기능만 크레딧이다. 생성을 안 쓰면 비용이 들지 않는다.
영상을 직접 손으로 편집해야 하는데 컷 작업이 번거로울 때. 트랜스크립트에서 문장을 지우면 그 구간이 잘리는 방식이라 말 위주 영상에서 특히 빠르다. Design의 Photon Studio와 같은 부류다 — 사람이 조작하는 데스크탑 앱이고 처리가 로컬에서 끝난다. 이미지는 Photon, 영상은 이쪽. Tools의 Remocn·HyperFrames와 혼동하지 말 것. 저쪽은 코드나 프롬프트로 영상을 생성하는 프로젝트용 도구이고, 이건 실제 촬영분을 편집하는 편집기다. 편집 결과를 Final Cut·Premiere로 넘길 수 있어 기존 작업 흐름에 중간 단계로 끼워 넣을 수 있다. 무료 티어가 있으니 먼저 써보고 판단할 것. 유료는 월 $20부터다.
발표 자료나 문서에 넣을 도식을 AI로 뽑을 때. 프롬프트를 처음부터 쓰는 대신 원하는 스타일의 예시를 고르고 복사하는 방식이라 시행착오가 줄어든다. 결과물이 이미지다. 웹에 넣을 도식이라면 코드로 그리는 편이 수정과 반응형에 유리하니 용도를 구분할 것. 스타일을 하나 정해 문서 전체에 같은 계열로 밀면 통일감이 생긴다. 매번 다른 프롬프트를 쓰면 제각각이 된다. Design의 getdesign.md와 같은 결 — 둘 다 AI에 넘기는 재료다. 저쪽은 코드 생성용 디자인 기준, 이쪽은 이미지 생성용 프롬프트.
제품 전반에 일관된 선 아이콘이 필요할 때. 굵기와 모서리를 맞출 수 있어 기존 타이포·버튼과 톤을 맞추기 쉽다. Design의 Iconly Pro와 갈린다 — Iconly는 플랫·3D·애니메이션까지 여러 계열을 담은 팩이고, 이건 한 가지 선 스타일을 체계적으로 밀고 가는 쪽. 제품 UI의 기본 아이콘 세트로는 이쪽이 맞고, 마케팅 페이지에 3D 아이콘이 필요하면 Iconly. React 패키지가 있어 개발에서 바로 import해 쓸 수 있다. Figma·Framer 플러그인도 있어 디자인·구현 간 세트가 어긋나지 않는다. 라이선스가 명시돼 있지 않다. 상업 사용 전 Pro 조건을 확인할 것.
에이전트에게 코드를 맡길 때 결과물이 매번 제각각이면 이걸 물릴 것. 색·타이포·여백 기준이 고정돼 페이지마다 튀는 걸 막는다. 쓰는 법은 단순하다 — 카탈로그에서 마음에 드는 사이트의 DESIGN.md를 골라 에이전트에 참조로 넘긴다. 550곳을 훑어보는 것 자체가 레퍼런스가 된다. 어떤 방향으로 갈지 정하는 단계에서도 쓸 만하다. 남의 디자인 시스템을 그대로 가져오는 것이므로 자기 브랜드가 있으면 출발점으로만 쓰고 토큰은 바꿀 것.
아이콘 세트를 통째로 갈아야 할 때. 한두 개만 필요하면 Lucide 같은 무료 오픈소스가 빠르다. 스타일 계열이 갈려 있으니 프로젝트 하나에서는 한 계열로 통일할 것 — 섞으면 바로 티가 난다. 라이선스 주의: 무료분은 개인 프로젝트용이다. 상업 제품·클라이언트 작업에는 Lifetime 또는 유료 구독이 필요하고, 어느 쪽이든 아이콘 자체를 재판매하거나 템플릿에 넣어 파는 것은 금지된다. 유료는 출처 표기 불필요, 무료분은 표기 권장.