사용 가이드로 건너뛰기
Icon System작성자 Owl-Listener

Icon System 스킬.

관련 없는 심볼을 모으는 대신, 일관된 제작 방식과 네이밍 체계를 아이콘에 부여합니다.

  • 디자인 시스템
  • 명세
소스 검토 · Icon SystemSKILL.md
작업 디자인 시스템 산출물 • 아이콘 제작 및 크기 명세 • 네이밍 카테고리와 제공 요건 • 접근성 및 기여 규칙 시작하기 전에 대표 아이콘, 의도한 크기, 필요한 디자인 및 코드 형식을 확인할 수 있는 에이전트가 필요합니다.
편집 요약 · 검토한 소스 2026-10-07 · 생성된 예시 아님

01 기능 소개

Icon System: 제품 아이콘 체계 표준화

제품 전반에서 아이콘을 어떻게 그리고, 이름 붙이고, 제공하고, 접근성 있게 사용할지 정의합니다.

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

작업 방식

Icon System은 제품 아이콘 라이브러리를 둘러싼 규칙, 즉 그리드, 키라인, 선 두께, 모서리 처리, 크기 변형, 네이밍, 제공 방식을 정의합니다. 모든 아이콘 스타일을 서로 바꿔 쓸 수 있는 것으로 보지 않고, 스트로크, 채움, 듀오톤 사용을 구분합니다.

소스는 레이블, 장식용 요소 숨김, 대비, 상호작용 대상 크기도 다룹니다. 제안된 픽셀 크기는 제품에 맞게 조정할 참고값입니다. 아이콘 시스템 명세가 있다고 해서 완전한 SVG 라이브러리가 이미 그려졌거나 테스트되었다는 뜻은 아닙니다.

예상 산출물

  • 아이콘 제작 및 크기 명세
  • 네이밍 카테고리와 제공 요건
  • 접근성 및 기여 규칙
예시 브리프 보기

브리프에서 검토까지

  1. 01
    제작 규칙 설정

    그리드, 키라인, 선 두께, 모서리, 지원할 스타일을 정의합니다.

  2. 02
    라이브러리 구성

    카테고리, 이름, 변형, 필요한 소스 또는 컴포넌트 형식을 정합니다.

  3. 03
    맥락 속 사용 확인

    지원 크기, 레이블, 핵심 작업의 텍스트, 상호작용 대상을 점검합니다.

02 활용 상황

사용 시점

뒤섞인 아이콘 세트를 하나의 시스템으로 통합하거나, 디자인과 개발이 함께 쓰는 공유 라이브러리를 문서화할 때 사용하세요.

적합한 경우

  • 뒤섞인 아이콘 라이브러리일관성 없는 심볼 계열을 하나의 제작 표준 아래로 통합합니다.
  • 공유 제품 컴포넌트디자인과 개발이 일관되게 사용할 수 있는 이름과 래퍼를 정의합니다.

확인할 한계

  • 전체 일러스트레이션 가이드가 아님스토리텔링 중심의 폭넓은 아트워크는 illustration-style에서 다룹니다.
  • 자동 에셋 생성 아님소스는 시스템을 명세할 뿐이며, 실제 아이콘과 래퍼는 별도로 제작해야 합니다.

준비할 입력

  • 현재 아이콘대표 심볼과 충돌 사례를 제공하세요.
  • 사용 크기의도한 표시 크기와 상호작용 맥락을 나열하세요.
  • 제공 스택SVG, 스프라이트, 컴포넌트 래퍼 또는 디자인 라이브러리 요구 사항을 명시하세요.

03 핵심 결정

중요한 결정

  1. 제작 일관성

    공통된 기하 규칙은 주제가 달라도 심볼들이 서로 관련 있어 보이게 합니다.

  2. 의미 있는 이름

    카테고리와 변형 이름은 검색성과 유지보수성을 높입니다.

04 예시 브리프

집중 브리프로 시도하기

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

설정 검토

designer-skills 저장소의 이 작업용 SKILL.md를 에이전트가 지원하는 스킬 위치에 불러오세요. 진입 파일에는 범용 설치 명령이 명시되어 있지 않습니다.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md

대표 아이콘과 사용 맥락을 제공하세요. 이 스킬은 규칙을 정의하며, 실제 아이콘 에셋의 제작과 테스트는 별개입니다.

하나의 산출물로 시작

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

예시 브리프
icon-system을 사용해 혼재된 내비게이션 아이콘을 표준화하세요. 그리드, 선 두께, 모서리, 크기, 네이밍 규칙을 정의한 다음 SVG 및 컴포넌트 제공 방식을 명세하세요. 장식용 아이콘과 레이블이 있는 동작을 구분하고, 보이는 텍스트가 필요한 곳을 표시하세요.

결과 확인

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

  • 아이콘이 문서화된 제작 규칙을 공유합니다.
  • 이름이 카테고리와 변형을 구분합니다.
  • 접근성 처리가 각 사용 상황에 맞습니다.

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

05 출처 및 라이선스

소스 및 라이선스

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

소스 소유자
Owl-Listener
라이선스
MIT
검토한 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
제품 전반에서 아이콘을 어떻게 그리고, 이름 붙이고, 제공하고, 접근성 있게 사용할지 정의합니다.

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

06 시작 전 질문

시작 전 질문

아이콘의 시각적 크기가 곧 터치 대상 크기인가요?

아닙니다. 소스는 표시 크기와 상호작용 대상 가이드를 별개의 문제로 다룹니다.

모든 아이콘에 접근 가능한 이름이 있어야 하나요?

의미 있는 아이콘에는 적절한 레이블이 필요하며, 장식용 아이콘은 보조 기술에서 숨길 수 있습니다.

히어로 일러스트레이션도 다루나요?

아닙니다. 소스는 더 넓은 범위의 일러스트레이션 작업을 별도의 스킬로 안내합니다.

OpenDesign

다음 디자인 반복을 위한 여유를 만드세요.

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

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md