SVG 디자인

SVG 디자인은(는) 무엇을 하나요?

리프 스킬 (Design 영역 내); 해당 도메인 또는 이름을 통해 접근할 수 있습니다.

브랜드나 인터페이스 내에서 그래픽의 역할을 고려하여 시작합니다. 해당 설정에 맞게 구도, 실루엣, 비율, 타이포그래피, 색상을 선택하고, 기존 시각적 방향이 있는 경우 이를 유지합니다. 그런 다음 디자인을 깨끗하고 미니멀한 SVG 마크업으로 표현합니다. 모든 요소와 속성은 그 자리를 정당화해야 합니다.

이 스킬은 로고, 아이콘 세트, 브랜드 자산, 장식적이거나 표현적인 웹 그래픽을 담당합니다. 목적에 따라 선택하세요: 랜딩 페이지의 로고와 장식 영웅 아트워크는 여기에 속하며, 제품 작동 방식을 설명하는 다이어그램은 editorial-svg-diagrams에 속합니다. 페이지 구성과 인터페이스 레이아웃은 frontend-design에 속합니다.

작은 로고 결정

예시 브리프: 웹사이트 헤더와 컴팩트한 앱 아이콘에서도 알아볼 수 있는 산 마크를 만드세요. 외부 실루엣과 하나의 독특한 능선 컷아웃으로 시작하고, 축소 시 사라지는 미세한 눈 선은 생략하세요. 색상이나 세부 사항을 추가하기 전에 실제 크기와 의도된 각 표면에서 마크를 확인하세요. 용도에 따라 다른 세부 수준이 필요한 경우, 읽을 수 없는 마크를 축소하는 대신 명시적으로 작은 크기 변형을 만드세요.

본격적인 구성이나 시각적 검토 전에, 모델의 시각적 능력과 렌더링된 사용 크기 및 표면에 대한 접근 권한을 평가하세요. Puppeteer를 사용할 수 있는 경우, 현재 단계/모델 라우팅을 사용하여 더 적합한 작성자나 독립 검토자에게 의뢰 내용, 설정된 방향 및 목표 크기를 전달하세요. 활성 위임 소유자를 재사용하고, 작고 적절한 편집은 직접 유지할 수 있습니다. 디자이너 자신의 확인은 독립적인 승인이 아닙니다. 기능 부족이나 렌더링 접근 불가는 해당 확인을 열린 상태로 둡니다. 유효한 SVG만으로는 좋은 디자인이 확립되지 않습니다.

주제 라우팅

작업	참조 로드
호 깃발 조합, 공통 패스 모양	references/path-patterns.md
로고 디자인, 타이포그래피, 네거티브 스페이스	references/logo-techniques.md
아이콘 디자인, 그리드 시스템, 픽셀 정렬	references/icon-design.md
그라디언트, 마스크, 클립, 필터, 변형 (디자인 결정)	references/advanced-techniques.md
애니메이션 (CSS 키프레임, 스태거, GPU, 이징, SVG 특화)	references/animation.md
최적화, 스프라이트, SVGO 설정	references/optimization.md
접근성, 브라우저 함정	references/accessibility-and-pitfalls.md
편집 워크플로우, 불리언 연산, SVG 결합	references/editing-workflow.md

SVG 스켈레톤

획이 있는 UI 아이콘의 경우, 다음 구조로 시작하세요:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <!-- content -->
</svg>

viewBox를 디자인 캔버스에 맞게 조정하세요. width/height 속성을 생략하면 SVG가 컨테이너에 맞게 크기가 조정됩니다 (고정 크기가 필요한 경우에만 추가하세요).

로고 및 웹 아트워크의 경우, 아이콘 기본값을 상속받지 말고 구성에 따라 캔버스, 채우기 및 획을 선택하세요.

캔버스 크기 규칙

크기	사용 사례	참고
0 0 16 16	마이크로 아이콘, 파비콘	Heroicons 마이크로, GitHub Octicons
0 0 20 20	작은 UI 아이콘, 폼 요소	Heroicons 미니
0 0 24 24	표준 아이콘 (가장 일반적)	Lucide, Heroicons 아웃라인, Material
0 0 32 32	중간 아이콘, 내비게이션	Phosphor는 내부적으로 256x256 사용
0 0 48 48	큰 디스플레이 아이콘	앱 아이콘, 일러스트레이션
사용자 정의	로고, 일러스트레이션	자연스러운 종횡비에 맞춤

표준 UI 아이콘의 경우, 주변 아이콘 시스템이 다른 그리드를 사용하지 않는 한 기본적으로 24x24를 사용하세요. 로고 및 웹 그래픽은 구성에 맞는 캔버스를 사용합니다.

도형 vs 패스 결정

도형 프리미티브를 사용하는 경우...	<path>를 사용하는 경우...
모양이 기본 기하학적 형태인 경우	모양에 곡선, 복잡한 외곽선이 있는 경우
가독성이 중요한 경우 (원은 <circle>처럼 보여야 함)	요소 수를 최소화해야 하는 경우
개별 속성(r, cx, cy)을 애니메이션해야 하는 경우	여러 모양을 하나의 요소로 결합하는 경우
모양이 프로그래밍 방식으로 수정될 경우	디자인 도구에서 내보낼 때 (패스가 보편적임)

스타일 기본값

자식 요소에 반복을 피하기 위해 루트 <svg> 요소에 설정하세요:

속성	아이콘 기본값	로고 기본값	이유
fill	none	다양함	아이콘은 일반적으로 획으로, 로고는 채움으로 표시됨
stroke	currentColor	none 또는 currentColor	상위 요소의 텍스트 색상을 상속받음
stroke-width	2 (24x24 기준)	다양함	아이콘 전체에 일관된 두께
stroke-linecap	round	round 또는 butt	둥근 끝이 작은 크기에서 더 깔끔하게 보임
stroke-linejoin	round	round 또는 miter	연결부에서 날카로운 스파이크 방지

currentColor는 당신의 친구입니다. SVG가 상위 요소의 색상을 상속받게 하여 추가 CSS 없이도 아이콘에 테마를 적용할 수 있습니다.

뷰박스 대비 선 두께

stroke-width는 픽셀이 아닌 viewBox 단위입니다. 항상 캔버스 크기에 상대적으로 설정하세요:

viewBox	일반적인 stroke-width	시각적 결과
16x16	1.5	캔버스의 ~9.4%
24x24	2	캔버스의 ~8.3%
32x32	2-2.5	캔버스의 ~6.3-7.8%
48x48	3	캔버스의 ~6.3%
256x256	16	캔버스의 ~6.3%

도형을 패스로 변환해야 하는 경우

변환해야 하는 경우:

• 여러 도형을 단일 복합 패스로 결합하는 경우 (불리언 연산)
• 더 큰 패스 구성의 일부로 도형이 필요한 경우
• <path>만 지원하는 환경에 배포하는 경우
• 최소 DOM 요소로 최적화하는 경우

도형으로 유지해야 하는 경우:

• 코드 가독성이 중요한 경우 (<circle>은 자체 문서화됨)
• 특정 속성을 애니메이션해야 하는 경우 (원에서 r 애니메이션이 패스 데이터 애니메이션보다 깔끔함)
• SVG가 프로그래밍 방식으로 수정될 경우

둥근 사각형-패스 변환 템플릿

여기서 아크 매개변수는 파생하기 오류가 발생하기 쉽습니다. 참조로 사용하세요:

<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> 은 다음으로 변환: -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule: evenodd vs nonzero

구멍이 있는 복합 도형의 경우 evenodd를 사용하세요. 감기 방향에 대해 걱정할 필요가 없어 더 간단합니다:

<!-- evenodd를 사용한 도넛 (방향은 중요하지 않음) -->
<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

nonzero(기본값)를 사용하면 내부 원이 구멍을 만들기 위해 반대 방향으로 감겨야 합니다.

로고 디자인 프로세스

로고(아이콘이 아닌)를 만들 때는 다음 프로세스를 따르세요:

0. 브리프의 물질적 격차만 해결하세요. 제공된 브랜드 방향, 이름, 대상, 사용 사례 및 참조를 재사용하세요. 하나의 누락된 선택이 디자인을 실질적으로 변경하는 경우, 현재 호스트가 지원하는 상호 작용을 사용하여 짧은 질문을 하세요. 보조 선택에는 합리적인 되돌릴 수 있는 기본값을 사용하세요. 특정 질문 도구를 가정하거나 무드 보드 인터뷰를 요구하지 마세요.

1. 하나의 은유에 대한 여러 레이아웃이 아니라 여러 은유를 탐색하세요. 개념적 다양성이 레이아웃 변형보다 더 중요합니다. references/logo-techniques.md의 전체 아이디에이션 프로세스를 따르세요. 여기에는 도메인별 브레인스토밍, 카테고리 다양성 요구 사항, 클리셰 회피가 포함됩니다.

2. 구조적 다양성을 보장하세요. 모든 로고 세트는 동일한 스타일 내의 여러 은유뿐만 아니라 여러 접근 방식 카테고리를 포괄해야 합니다. 5개 이상의 옵션을 제시할 때 각 열에서 최소 하나를 포함하세요: 타이포그래픽/워드마크 접근법, 상징적 아이콘, 추상 기하학적 마크, 레터폼-메타포 하이브리드. references/logo-techniques.md의 카테고리 다양성 표를 참조하세요.

3. 사용 가능한 호스트를 통해 미리보기하세요. 점진적 비교가 도움이 될 때, 이 스킬의 assets/preview.html과 references/editing-workflow.md의 구조를 사용하세요. 현재 호스트가 지원하는 뷰어를 통해 미리보기를 표시하거나 검사하세요. 브라우저, 셸 명령 또는 포그라운드 창을 사용할 수 있다고 가정하지 마세요. 미리보기를 렌더링할 수 있는 뷰어가 없으면 경계를 명시하고 SVG 파일과 지원되는 경우 렌더링된 미리보기를 제공하세요. 관찰되지 않은 미리보기가 시각적으로 확인되었다고 주장하지 마세요.

4. 색상 로고의 경우 항상 -dark.svg 변형을 만드세요. 흰색 배경에서 멋져 보이는 진한 네이비 테두리(#1E3A5F)는 어두운 배경에서 사라집니다. 어두운 변형에는 더 밝은 테두리(#4B8BBE), 더 밝은 링(#3B6B8A), 오프화이트 중심(#E2E8F0)이 필요합니다.

5. 그리기 전에 수직 예산을 계획하세요. 32x32 캔버스에 3개의 쌓인 요소가 있는 경우, 사용 가능한 단위는 약 30개입니다. 먼저 수직 분포를 스케치하세요(예: 상자=12, 간격=2, 레이어=5, 간격=2, 레이어=5). viewBox 가장자리에서 잘리는 것을 방지합니다.

안티패턴

하지 말아야 할 것	대신 이렇게 하세요
viewBox 없이 width="24" height="24"를 하드코딩	항상 viewBox 사용; 필요한 경우에만 width/height 추가
<g> 그룹에 fill="none" 설정	개별 요소나 루트 <svg>에 fill 설정
SVG 내부에 px 단위 사용	SVG 좌표는 단위가 없음; viewBox에 매핑됨
편집기 메타데이터 포함 (<sodipodi:*>, <inkscape:*>)	모든 편집기 잡동사니 제거
배포된 SVG에서 로고 워드마크에 <text> 사용	이식성을 위해 텍스트를 패스로 변환
변형을 3단계 중첩	변형을 패스 좌표로 평탄화
xlink:href 사용	href 사용 (xlink는 더 이상 사용되지 않음)
독립 실행형 SVG 파일에서 xmlns 누락	항상 xmlns="http://www.w3.org/2000/svg" 포함
아이콘에 대해 소수점 2-3자리 이상의 정밀도 사용	아이콘은 소수점 2자리, 복잡한 아트는 최대 3자리로 반올림

상호 참조

• 주변 웹사이트나 인터페이스 디자인은 이 스킬의 작업이 아닙니다. 그래픽의 역할과 크기 제약 조건과 함께 요청자에게 다시 전달하고, 그 동안 프로젝트의 기존 디자인 시스템 또는 설정된 타이포그래피, 색상 및 시각적 계층 구조를 따르세요.
• editorial-svg-diagrams를 사용할 수 있는 경우, 개념, 관계, 프로세스 또는 시스템을 설명하는 그림에 사용하세요. 그렇지 않으면 이 스킬의 출력을 브랜드 및 인터페이스 그래픽에 집중하고, 요청된 결과가 이에 의존하는 경우 사용할 수 없는 다이어그램 기능을 설명하세요.