사용 가이드로 건너뛰기
theSVG작성자 glincker

theSVG 스킬.

프로젝트에 필요한 형태로 기존 브랜드 마크나 서비스 아이콘을 가져옵니다.

  • 브랜드 에셋
  • SVG
  • 클라우드 다이어그램
소스 검토 · theSVGSKILL.md
작업 브랜드 에셋 결과물 • 요청한 브랜드에 대해 확인된 슬러그와 변형 선택. • 대상 환경에 맞는 바로 사용할 수 있는 SVG URL 또는 원본 마크업. • 필요할 경우 권리 유의사항과 브랜드가 없을 때의 대안. 시작하기 전에 레지스트리 또는 CDN에 접근할 수 있는 네트워크가 필요합니다. React, CLI, Figma, MCP 연동은 선택 사항이며, 단순한 URL 조회의 전제 조건은 아닙니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시가 아님

01 기능 소개

에셋 경로를 추측하지 않고 브랜드 SVG 찾기

예측 가능한 SVG 엔드포인트, 변형 선택, 연동 형식, 권리 유의사항을 갖춘 레지스트리 기반 브랜드 에셋 조회 워크플로입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

theSVG는 이름이 정해진 브랜드, 프레임워크, 클라우드 서비스를 조회하는 스킬입니다. 레지스트리를 사용해 브랜드 이름이나 별칭을 슬러그로 확인하고, 사용 가능한 변형을 점검한 뒤 CDN URL, 원본 SVG 또는 연동별 형식을 반환합니다. 새 로고를 디자인하거나 일반적인 메뉴 아이콘을 고르는 도구는 아닙니다.

소스는 자동화된 가져오기와 사용자에게 보이는 페이지에 URL을 삽입하는 경우를 구분하며, 에이전트 요청에는 jsDelivr 엔드포인트를 선호합니다. 또한 라이선스 경계도 분명히 합니다. 저장소의 MIT 라이선스가 개별 브랜드 마크의 상표 제한을 없애 주지는 않습니다. 소스가 내세우는 라이브러리 규모에 의존하지 말고, 요청한 각 에셋을 레지스트리에서 확인하세요.

예상 결과물

  • 요청한 브랜드에 대해 확인된 슬러그와 변형 선택.
  • 대상 환경에 맞는 바로 사용할 수 있는 SVG URL 또는 원본 마크업.
  • 필요할 경우 권리 유의사항과 브랜드가 없을 때의 대안.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    브랜드 확인

    파일 경로를 지어내지 않고, 제목과 별칭을 사용해 레지스트리에서 요청한 이름을 조회합니다.

  2. 02
    사용 가능한 변형 선택

    배경과 용도에 맞는 변형을 목록에서 고르고, 선호하는 버전이 없으면 기본값으로 대체합니다.

  3. 03
    알맞은 형식 반환

    Markdown 또는 HTML 삽입, SVG 마크업을 제공하거나, 프로젝트가 이미 해당 연동을 사용 중이라면 문서화된 React/CLI 형식을 제공합니다.

  4. 04
    사용 권리 검토

    상업적 사용에 관한 브랜드 가이드라인을 확인하고, 에셋별 제한 사항을 그대로 유지합니다.

02 활용 상황

사용 시점

레지스트리 또는 CDN에 접근할 수 있는 네트워크가 필요합니다. React, CLI, Figma, MCP 연동은 선택 사항이며, 단순한 URL 조회의 전제 조건은 아닙니다.

적합한 경우

  • 연동 페이지지원되는 연동에 쓸 실제 브랜드 마크를 모으는 데 유용합니다.
  • 클라우드 아키텍처 다이어그램AWS, Azure, GCP 서비스 아이콘 URL을 다이어그램에서의 역할별로 묶을 수 있습니다.
  • 문서 에셋README 파일이나 기술 가이드에 들어가는 프레임워크 및 회사 로고를 일관되게 가져올 수 있습니다.

확인할 한계

  • 일반 UI 아이콘 아님화살표, 쉐브론, 메뉴 글리프는 이 브랜드 레지스트리가 아니라 UI 아이콘 라이브러리에 속합니다.
  • 상표 사용 허가 아님브랜드 마크는 각 소유자의 자산입니다. 코드 라이선스는 이를 수정하거나 결합해 새로운 아이덴티티를 만들 권한을 의미하지 않습니다.

준비할 입력

  • 정확한 브랜드 또는 서비스제품, 프레임워크, 회사 또는 클라우드 서비스의 이름을 지정하세요.
  • 대상 형식HTML, Markdown, React, 원본 SVG 또는 아키텍처 다이어그램 중에서 지정하세요.
  • 배경과 변형밝은/어두운 배경 맥락과 심볼이 필요한지 워드마크가 필요한지 알려 주세요.

03 핵심 결정

중요한 결정

  1. 추측보다 레지스트리 먼저

    사용 가능한 변형을 확인하면 그럴듯해 보이지만 에셋이 없는 URL을 피할 수 있습니다.

  2. 사용처에 맞는 전달 방식

    마크업을 가져오는 에이전트와 이미지를 삽입하는 페이지는 기본 마크는 그대로 두고 서로 다른 엔드포인트를 쓸 수 있습니다.

  3. 에셋 권리는 별도로 유지

    소스는 소프트웨어 라이선스와 상표 및 클라우드 아이콘 조건을 명확히 구분합니다.

04 예시 브리프

구체적인 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

저장소의 스킬 설치 안내를 확인하세요. 문서화된 npx @thesvg/cli add 명령은 아이콘 에셋을 추가하는 것이며 스킬 설치 명령이 아닙니다.

원본 소스 파일
https://github.com/glincker/thesvg/blob/0ea4d44764ab73c8500382711736f97cba50afc8/skills/thesvg/SKILL.md

레지스트리 또는 CDN에 접근할 수 있는 네트워크가 필요합니다. React, CLI, Figma, MCP 연동은 선택 사항이며, 단순한 URL 조회의 전제 조건은 아닙니다.

하나의 결과물부터 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
thesvg를 사용해 밝은 배경의 연동 다이어그램에 쓸 GitHub, Stripe, AWS Lambda, AWS S3의 레지스트리 에셋을 가져오세요. 각 슬러그와 사용 가능한 변형을 확인하고, 묶음별 SVG URL과 설명형 대체 텍스트를 반환하며, 브랜드 사용 제한 사항을 표시하세요. 마크의 색을 바꾸거나 왜곡하지 마세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 요청한 모든 슬러그와 변형이 레지스트리에 존재한다.
  • 에셋이 요청한 배경에서 읽기 쉬운 상태로 유지된다.
  • 결과물이 MIT가 모든 상표에 대한 권리를 부여한다는 의미를 내포하지 않는다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록은 해당 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 변경될 수 있습니다.

소스 소유자
glincker
라이선스
MIT
검토한 스냅샷
2026-10-07 · 0ea4d44764ab
편집 소스 요약
예측 가능한 SVG 엔드포인트, 변형 선택, 연동 형식, 권리 유의사항을 갖춘 레지스트리 기반 브랜드 에셋 조회 워크플로입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표이며 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

맞춤 로고를 만들어 주나요?

아니요. 이미 존재하는 브랜드 및 클라우드 서비스 에셋을 가져옵니다. 로고 디자인 워크플로는 별개의 작업입니다.

어두운 배경용 흰색 로고를 반환할 수 있나요?

목록에 있는 적합한 변형을 선택할 수 있지만, 해당 변형이 없다면 솔직하게 대체안을 제시해야 합니다.

저장소가 MIT이므로 모든 SVG를 자유롭게 편집할 수 있나요?

아니요. 소스는 상표에는 각자의 사용 규칙이 유지된다고 경고하며, 특히 AWS 아키텍처 아이콘에는 별도의 변경 금지 조건이 있다고 설명합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 워크스페이스에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

원본 소스 파일
https://github.com/glincker/thesvg/blob/0ea4d44764ab73c8500382711736f97cba50afc8/skills/thesvg/SKILL.md