[5편] 하나씩 말고 한 번에, 그리고 마무리까지: 아이콘 세트를 완성하는 실무 흐름

2026년 10월 13일

한 줄 요약

필요한 아이콘 목록을 한꺼번에 같은 설정으로 만들고, 크기·배경·파일 형식까지 맞춰 내보내야 진짜 ‘세트’가 됩니다.

비유로 이해하기

붕어빵 틀을 떠올려 보세요. 같은 틀, 같은 반죽, 같은 불 세기로 한 번에 구우면 모양이 똑같이 나옵니다. 하나씩 다른 날 구우면 조금씩 달라지죠.

아이콘도 스타일을 고정한 채 목록을 한꺼번에 만드는 것이 가장 안정적입니다. Recraft 같은 도구는 스타일 템플릿을 정해 두고 “달력, 지도 핀, 돋보기”처럼 목록을 넣으면 같은 모양새로 여러 개를 만들어 줍니다. 그리고 마지막에 크기와 형식을 맞춰 내보내는 마무리까지 해야 홈페이지에 넣었을 때 들쭉날쭉하지 않습니다.

비교해 보기

  • 하나씩 따로: 날마다 조건이 달라져 세트 느낌이 약해집니다.
  • 목록으로 한 번에: 같은 조건에서 나와 한 가족처럼 보입니다.
  • 마무리 통일: 같은 캔버스 크기, 같은 여백, 같은 배경(투명), 같은 파일 형식(SVG 또는 PNG)으로 내보냅니다.

따라 해 보기

  • 홈페이지에 필요한 아이콘 목록을 먼저 적습니다. (예: 수업, 상담, 일정, 위치, 문의)
  • 2편의 스타일 가이드나 3편의 스타일 레퍼런스를 고정한 채, 목록을 한 번에 생성합니다.
  • 아래 마무리 점검표로 크기, 여백, 배경, 형식을 맞춰 내보냅니다.
  • 워드프레스 미디어에 올리고, GenerateBlocks에서 같은 너비로 배치합니다.
따라 쓰는 프롬프트 · 세트 생성 + 마무리 점검표
[세트 생성 프롬프트]
(2편에서 만든 재사용 스타일 단락을 여기에 붙여 넣기)
Create a matching icon set with the same style for:
classes; consultation; schedule; location; contact
Each icon: single object, centered, same canvas size, same padding, transparent background, no text.

[마무리 점검표]
□ 캔버스 크기 통일 (예: 512 x 512)
□ 아이콘 주변 여백 통일 (예: 사방 10%)
□ 배경 통일 (투명 또는 같은 단색)
□ 파일 형식 통일 (선 아이콘은 SVG, 질감 있는 3D는 PNG/WebP)
□ 파일 이름 규칙 (예: icon-classes.svg, icon-contact.svg)
□ 홈페이지에서는 같은 너비로 배치 (예: 48px)

홈페이지에 적용하기

이 사이트에는 SVG 파일을 안전하게 올릴 수 있는 Safe SVG 플러그인이 이미 설치되어 있습니다. 선 아이콘은 SVG로 올리고, GenerateBlocks의 미디어 블록에서 모든 아이콘의 너비를 같은 값으로 지정하면 세트가 깔끔하게 맞춰집니다.

참고 영상

참고 영상: Zhoosh Designs: The Best AI Icon Maker for Custom Branded Icons (Recraft Tutorial) · The Non-Profit Toolkit: Create Matching Icons from Your Logo Using ChatGPT

함께 읽으면 좋은 글