여러 사람이 만든 아이콘 SVG를 모아 보면 크기, 색, 파일 이름이 제각각이에요. 클로드 코드(Claude Code)에 아이콘 폴더를 맡기면 크기를 24로 맞추고, 색을 currentColor(쓰는 곳의 글자색을 따라가는 값)로 바꾸고, 파일 이름을 정리한 뒤 한눈에 보는 미리보기 페이지까지 만들어 줘요. 원본은 그대로 두고 새 폴더에 저장해요.
이런 분께
- 디자인 시스템 아이콘을 개발팀에 넘기기 전에 "Home Icon.svg", "search_FINAL.svg" 같은 이름부터 손보는 디자이너
- 아이콘 색을 바꿀 때마다 파일을 하나씩 열어 고치는 분
끝나면 이렇게 됩니다
예시 아이콘 4개로 같은 작업을 이 실행에서 실제로 돌린 결과예요. 바뀐 내용은 rename-log.csv에 남아요.
| 원래 이름 | 새 이름 | 바뀐 것 |
|---|---|---|
| Bell.svg | bell.svg | viewBox 추가, stroke #222를 currentColor로 |
| Home Icon.svg | home.svg | stroke #333333을 currentColor로 |
| search_FINAL.svg | search.svg | stroke #000을 currentColor로 |
| user (1).svg | user.svg | fill #1a1a1a를 currentColor로 |
preview.html을 열면 정리된 아이콘이 청록색으로 한 줄에 나란히 보여요. 색이 바뀌어 보이면 currentColor가 제대로 들어간 거예요.
준비물
- 클로드 코드: Claude Pro·Max·Team·Enterprise 구독 또는 Claude Console(API 선불) 계정이 필요해요(2026년 11월 기준, 무료 요금제로는 안 돼요).
- 터미널(컴퓨터에 글자로 명령하는 창). 윈도우는 시작 메뉴에서 "PowerShell" 검색, 맥은 Spotlight에서 "터미널" 검색.
- 파이썬(Python). 없으면 클로드 코드가 설치 방법을 안내해 줘요.
- 아이콘 SVG를 모은 폴더 하나. 꼭 복사본으로 작업해요.
따라 하기
- 터미널을 열고 공식 설치 명령을 붙여 넣어요. 윈도우 PowerShell은
irm https://claude.ai/install.ps1 | iex, 맥은curl -fsSL https://claude.ai/install.sh | bash예요. - 새 터미널 창에서
claude --version을 쳐서 버전 숫자가 나오는지 확인해요. cd명령으로 아이콘 폴더가 들어 있는 상위 폴더로 이동한 뒤claude를 쳐요. 처음이면 브라우저가 열리고 로그인해요.- 아래 "복사해서 쓰는 프롬프트"를 붙여 넣어요. 클로드 코드가 스크립트를 만들고 실행해도 되는지 물으면 내용을 읽고 「Yes」를 골라요.
- 끝나면 새로 생긴 icons-clean 폴더와 rename-log.csv, preview.html을 열어 봐요.
- 고칠 게 있으면 같은 창에서 "home 아이콘은 이름을 house로 바꿔줘"처럼 이어서 말해요.
복사해서 쓰는 프롬프트
[아이콘 폴더] 안의 SVG 아이콘을 정리해줘. 원본은 건드리지 말고 icons-clean 폴더에 새로 저장해.
1. width와 height를 [크기]로 맞추고, viewBox가 없으면 원래 width·height로 viewBox를 넣어줘.
2. fill과 stroke 색 중 none이 아닌 값은 모두 currentColor로 바꿔줘.
3. 파일 이름은 영어 소문자와 하이픈만 쓰고, final·(1)·icon 같은 말은 빼줘.
4. 원래 이름, 새 이름, 바뀐 것을 rename-log.csv로 남겨줘(엑셀에서 한글이 안 깨지게).
5. 정리한 아이콘을 [미리보기 색]으로 한 줄에 보여 주는 preview.html을 만들어줘. SVG는 img 태그 말고 HTML 안에 직접 넣어줘.
작업 전에 무엇을 할지 먼저 짧게 말해줘.
