크기 조절과 접근성을 고려한 SVG 아이콘 만들기.
아이콘은 단순하고 크기 조절이 가능하며 불필요한 스크립트나 외부 참조가 없어야 합니다. 장식인지 의미가 있는지 정하고 사용 위치에서 적절한 접근성 이름을 붙이세요.
작업에 맞게 절차를 조정하세요.
아이콘의 의미, viewBox, 선 또는 채우기 스타일, 사용할 크기를 정합니다. 불필요한 외부 참조 없는 최소 SVG를 만들고 실제 크기에서 확인합니다. 주변 버튼의 이름을 포함해 사용 위치에서 접근성 처리를 결정합니다.
- 제공할 내용
- 간단한 아이콘 개념과 스타일 제약.
- 받을 결과
- viewBox와 접근성 라벨을 갖춘 편집 가능 SVG.
입력과 결과를 확인하세요.
설명용 입력과 출력 · 실제 WebAct 실행이 아닌 학습용 예시
입력 항목 예시개
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
완성된 예시
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Give the surrounding button an accessible name such as Add item.
이 입력을 프롬프트에 넣고 WebAct에 복사해 작업을 실행해 보세요. 결과는 설명용 예시와 다를 수 있습니다.
판단 기준과 문제 해결.
이름이 있는 버튼 안의 장식 SVG를 별도로 읽어야 하나요?
보통 장식 아이콘은 보조 기술에서 숨기고 버튼의 접근성 이름이 행동을 전달하게 합니다.
경로 좌표는 맞는데 아이콘이 잘리는 이유는 무엇인가요?
선이 경로 밖으로 뻗습니다. 의도한 선 두께에서 viewBox, 여백, 렌더링 경계를 확인하세요.
직접 준비한 자료로 시도하세요.
작업 프롬프트의 예시를 내 자료로 바꾸세요. 필요한 요구 사항은 유지하고 작업을 WebAct에 복사하세요.
작업 맞춤 설정 및 복사 ↑