튜토리얼
Claude Opus 5.5로 SVG 아이콘의 잘린 선과 불균일한 굵기 고치기
Claude Opus 5.5에 경로 수정을 요청하기 전에 좌표계, 실제 그려지는 경계, 최종 적용된 선 굵기를 검사하게 하세요.
Claude Opus 5.5에 경로 수정을 요청하기 전에 좌표계, 실제 그려지는 경계, 최종 적용된 선 굵기를 검사하게 하세요. 큰 상자 안의 작은 그림, 잘린 윤곽선, 일관되지 않은 선 굵기는 서로 다른 문제입니다. 모두 “더 크게”로 해결하면 원인이 가려집니다.
이 글은 기하 계산을 포함한 검토 절차이며 Opus 벤치마크가 아닙니다. SVG 크기와 정렬에 관한 개발자 토론은 외부 요소와 내부 그림의 혼동을 보여 줍니다. 개인 경험만으로 브라우저 결함을 확정할 수는 없습니다.
어느 경계가 잘못되었는지 확인하기
| 증상 | 수집할 근거 | 먼저 고려할 수정 |
|---|---|---|
| 상자 안에서 그림이 작음 | viewBox와 실제 경로 경계 | 좌표 공간의 과한 여백 확인 |
| 가장자리 선이 사라짐 | 페인트 경계, 끝, 연결, 넘침 | 선이 들어갈 공간 확보 |
| 크기마다 굵기가 달라짐 | 렌더링 크기와 변환 | 확대·축소가 의도인지 판단 |
| 한 인스턴스만 다름 | 계산된 CSS와 참조 symbol | 경로보다 스타일 덮어쓰기 확인 |
SVG viewBox 명세는 내부 사각형을 뷰포트에 매핑하는 방식을 설명합니다. CSS 너비를 키워도 내부 사각형의 빈 공간은 사라지지 않습니다. 두 치수를 모두 기록하고 비율을 보존하세요.
간단한 선 굵기 계산
정사각형 `viewBox="0 0 24 24"`, 선 굵기 2, 다른 변환 없이 일반적인 균일 확대·축소를 적용하면 다음과 같습니다.
| 렌더링 한 변 | 배율 | 예상 선 굵기 |
|---|---|---|
| 18 CSS px | 18 / 24 | 1.5 CSS px |
| 24 CSS px | 24 / 24 | 2 CSS px |
| 48 CSS px | 48 / 24 | 4 CSS px |
이는 기하학적 너비이며 모든 화면에서 안티앨리어싱이 같아 보인다는 보장은 아닙니다. MDN의 `vector-effect="non-scaling-stroke"` 설명은 관련 변환과 독립적으로 선 굵기를 유지하는 방법을 다룹니다. 일정한 굵기가 아이콘 모음의 규칙에 맞을 때만 사용하세요. 큰 아이콘에는 더 굵은 선이 필요할 수도 있습니다. 여백, 정렬, 잘림, 브라우저 확대 동작까지 자동으로 고치지는 않습니다.
의도적으로 단순화한 모양을 살펴보세요.
```html
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none"
stroke="currentColor" stroke-width="2" />
</svg>
중심 12, 반지름 9, 선의 절반 1이므로 두 축의 페인트 경계는 2부터 22입니다. 반지름을 12로 바꾸면 −1부터 25가 되어 viewBox를 벗어나며 뷰포트가 넘침을 자를 때 선이 잘릴 수 있습니다. 원을 사용한 예제이므로 각진 연결, 선 끝, 필터, 변환은 별도로 경계를 확인해야 합니다. 장식용 예제라 보조 기술에서 숨겼지만 아이콘만 있는 버튼에는 컨트롤의 접근 가능한 이름이 필요합니다.
## 완성된 검토 프롬프트
[Opus 5.5 공식 가이드](https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompting-claude-opus-5-5)와 함께 사용할 수 있습니다.
```text
이 SVG 아이콘과 포함 컴포넌트를 검토하세요. 입력은 전체 SVG 또는 참조 symbol, 계산된 CSS, 목표 크기, 각 크기의 스크린샷, 아이콘 모음의 선 굵기 정책입니다.
뷰포트 크기, viewBox 좌표, 도형 경계, 페인트 경계, 레이아웃 정렬을 구분하세요. 실제 변환을 기준으로 각 크기의 선 굵기를 계산하세요. 선 굵기, vector-effect, 선 끝, 연결, overflow, 필터, CSS 덮어쓰기를 검사하세요. 정보가 없으면 기본 동작을 추측하지 말고 누락 내용을 밝히세요.
입증된 문제를 해결하는 최소 변경을 제안하고 모양의 의미와 종횡비를 유지하세요. 모든 아이콘에 non-scaling-stroke를 자동 추가하지 마세요. 다른 symbol 인스턴스에 미치는 영향을 설명하세요. 진단 표, 패치, 밝고 어두운 배경에서 18·24·48 CSS 픽셀을 확인하는 테스트 표를 반환하세요. 계산과 브라우저 관찰을 구분하고 결과 없이 시각 검사를 수행했다고 말하지 마세요. 상호작용 컨트롤의 접근 가능한 이름을 보존하세요.실제 컴포넌트에서 확인하기
기존 아이콘과 변경한 아이콘을 세 크기로 나란히 표시하세요. 네 가장자리를 확인하고 같은 모음의 이웃 아이콘과 비교합니다. 호버, 포커스, 비활성 상태가 스타일을 바꾸면 각각 확인하세요. 계산된 선 굵기와 CSS 규칙을 스크린샷과 함께 저장합니다.
공유 symbol은 둘 이상의 컴포넌트에서 검사하세요. 한 툴바를 고친 변경이 다른 곳을 망칠 수 있습니다. 대비에 따라 굵기 인상이 달라지므로 밝고 어두운 배경을 모두 확인합니다. 계산과 화면이 다르면 기하를 다시 편집하기 전에 추가 변환과 CSS를 확인하세요.
자주 하는 판단
**모든 아이콘의 선 굵기를 고정하나요?** 아닙니다. 모음 전체의 의도적인 규칙을 정하고 각 목표 크기를 검증하세요.
**viewBox 변경으로 잘림을 고칠 수 있나요?** 때로 가능합니다. 배율과 정렬도 바뀌므로 관련 모음을 다시 확인해야 합니다.
**스크린샷만 있으면 되나요?** 증상은 찾을 수 있지만 원인 설명에는 SVG, 계산된 스타일, 렌더링 치수가 필요합니다.
검토 후 Panelly Studio에서 일관된 시각 브리프로 완성 프로모션 이미지를 만들 수 있습니다. SVG 도표의 텍스트는 별도의 도표 라벨 검토에서 위치와 가독성을 다룹니다. 두 절차 모두 Panelly와 Opus의 통합을 주장하지 않습니다.
