AI로 만드는 일관된 아이콘 세트: 마스터 아이콘 하나, 형제 열한 개, 스타일 하나
한 가족처럼 보이는 앱 아이콘 열두 개. 규칙을 쓰고, 마스터 아이콘을 만들고, 거기서 형제를 파생시키고, 작게 테스트한 뒤 세트를 벡터로 다시 그립니다.
이미지 모델에 종 아이콘을 요청하면 멋진 종이 나옵니다. 이어서 자물쇠를 요청하면 멋진 자물쇠가 나오지만, 마치 다른 사람이 그린 것처럼 보입니다. 선은 더 굵고, 모서리는 더 날카롭고, 살짝 기울어져 있고, 종에는 없던 음영까지 조금 들어가 있습니다. 탭 바에 나란히 놓으면 앱이 무료 아이콘 팩 세 개를 짜깁기한 것처럼 보입니다. 아이콘 세트는 세트로 평가받고, 보는 사람은 잘 만든 아이콘보다 혼자 튀는 아이콘을 훨씬 먼저 알아챕니다.
이 가이드에서는 Quillbox라는 가상의 메모 앱을 위해 아이콘 열두 개를 만듭니다. 홈, 검색, 알림, 캘린더, 메시지, 카메라, 즐겨찾기, 필터, 잠금, 메일, 폴더, 삭제입니다. 어떤 목록이든 방법은 같습니다. 규칙을 정하고, 그 규칙을 따르는 마스터 아이콘을 하나 만들고, 다른 모든 아이콘은 그 마스터에서 파생시키고, 사람들이 실제로 보게 될 크기에서 확인한 뒤, 마지막으로 벡터로 다시 그립니다.
첫 프롬프트를 쓰기 전에 규칙부터 쓰세요
일관성이란 모든 아이콘이 공유하는 몇 개의 숫자입니다. 카드 한 장에 적어 두고 작업 내내 열어 두세요.
- 그리드. 정사각형 캔버스, 예를 들어 24 x 24 단위에, 의도한 경우가 아니면 아무것도 넘지 않는 2단위 여백을 둡니다. 모든 아이콘을 이 그리드 위에서 디자인하고, 크기 조절은 마지막에만 합니다.
- 선. 굵기는 하나, 예를 들어 2단위로, 선 끝과 꺾이는 부분은 둥글게 합니다. 선 아이콘과 채움 아이콘을 한 세트에 섞지 마세요. 하나를 고르세요.
- 모서리 반경. 모든 사각형에 같은 반경을 씁니다. 바깥 모서리 3단위처럼요. 둥근 모서리 캘린더 옆에 각진 메일 아이콘이 있는 것이 가장 흔한 티 나는 실수입니다.
- 키라인 도형. 거의 같은 면적을 차지하는 원, 정사각형, 넓은 직사각형을 두어, 둥근 아이콘과 네모난 아이콘이 눈에 같은 크기로 보이게 합니다.
- 팔레트. 세트 전체에 선 색은 하나, 활성 상태용 강조색은 많아야 하나. 그라데이션도, 그림자도, 장식용 두 번째 선 색도 없습니다.
- 시점. 평면이고 정면입니다. 3/4 시점도, 아이소메트릭 기울기도 없습니다.
마스터 아이콘은 딱 하나만 만드세요
마스터는 신중하게 고르세요. 규칙 대부분을 한 번에 쓰는 단순한 아이콘이 좋습니다. 집이 잘 맞습니다. 곧은 선, 모서리, 이음새, 작은 안쪽 도형이 모두 있기 때문입니다. 카드의 내용을 쉬운 말로 프롬프트에 쓰고, 단색 배경에 아이콘 하나만, 그 밖에는 아무것도 없이 요청하세요.
A single flat line icon of a house, outline only, uniform medium stroke with rounded line ends and rounded corners, centred on a plain white square background with generous empty space around it, one colour only, dark charcoal lines, no fill, no shading, no gradient, no shadow, no text, no mock-up카탈로그에는 이 작업에 맞는 모델이 두 종류 있습니다. Recraft 20B SVG는 크기를 조절할 수 있는 그래픽과 아이콘용 SVG 벡터 이미지를 만드는 모델로, Recraft V4.1 Text to Vector는 프롬프트로 편집 가능한 벡터 스타일 이미지를 만드는 모델로 소개되어 있습니다. 깔끔하게 누끼를 딴 래스터 그림에서 시작하고 싶다면 Ideogram V3 Generate Transparent가 투명 배경 이미지를 돌려줍니다. 프롬프트를 여러 번 실행하고, 취향이 아니라 카드에 비추어 결과를 판단하세요. 남길 마스터는 다른 초안이 더 예쁘더라도 규칙을 가장 잘 지킨 것입니다.
마스터에서 형제를 파생시키세요
대부분의 세트가 여기서 무너집니다. 새 프롬프트 열한 개는 새로운 해석 열한 가지를 낳습니다. 대신 마스터를 이후 모든 작업의 참조로 삼으세요. 카탈로그에는 이를 위한 직접적인 경로가 있습니다. Recraft V4 Create Style은 참조 이미지를 재사용 가능한 스타일 ID로 바꾸고, Recraft V4 Style Text to Vector는 프롬프트와 그 스타일 ID, 또는 참조 이미지를 직접 받아 벡터 그래픽을 그립니다. 마스터를 넣고, 좋은 형제가 두세 개 생기면 그것도 참조로 추가하세요. 그러면 스타일을 그림 한 장이 아니라 작은 가족에게서 배우게 됩니다.
형제 프롬프트는 일부러 지루하게 쓰세요. 마스터와 같은 문장에 대상만 바꿉니다. 종, 돋보기, 자물쇠. 귀여운, 정교한, 사실적인처럼 스타일을 다른 쪽으로 끌고 가는 형용사는 참으세요. 대상은 가장 단순한 도형으로 설명합니다. 자물쇠는 반원 고리 아래의 둥근 직사각형이고, 열쇠 구멍은 짧은 선 하나입니다.
- 어려운 대상부터. 카메라, 필터, 캘린더는 부품이 가장 많고 가장 많이 어긋납니다. 이것들이 버티면 나머지도 버팁니다.
- 은유는 평범하게. 알림은 종, 즐겨찾기는 하트, 삭제는 휴지통입니다. 기발한 은유는 별도의 디자인 결정이지 프롬프트 실험이 아닙니다.
- 아이콘 하나에 대상 하나. 별이 붙은 폴더는 아이콘 두 개입니다. 배지는 나중에 벡터로, 필요한 모든 아이콘에 같은 방식으로 추가하세요.
- 새로 그리지 말고 작게 고치기. 좋은 형제에 틀린 부분이 하나만 있다면, 예를 들어 전체적으로 맞는 카메라에 날카로운 모서리 하나가 있다면, Ideogram V4.5 Edit이 마스크를 받으므로 그 부분만 바꿀 수 있습니다.
스타일 고정은 편차를 줄여 줄 뿐 없애 주지는 않습니다. 열두 개가 모두 어우러질 때까지 몇 번은 다시 돌려야 한다고 생각하고, 나머지는 다음 단계에서 손으로 고칠 각오를 하세요.
나란히 놓고 작게 확인하세요
열두 개를 모두 시트 한 장에 4 x 3 그리드로, 같은 배경, 같은 크기로 놓으세요. 그런 다음 각 아이콘이 앱에서 보일 크기가 될 때까지 시트를 줄입니다. 툴바는 24픽셀, 메뉴나 촘촘한 목록은 16픽셀입니다. 큰 모니터에서만 보지 말고 실제 휴대폰에서 보세요. 목록을 차례로 확인합니다.
- 눈 가늘게 뜨기 테스트. 눈을 흐리게 떠 보세요. 열두 개 모두 같은 회색 무게로 보여야 합니다. 하나만 더 진해 보인다면 선이 더 굵거나 선이 너무 많은 것입니다.
- 크기 테스트. 둥근 아이콘과 네모난 아이콘이 같은 크기로 보여야 합니다. 검색 아이콘이 메일 아이콘보다 작아 보이면 원 키라인까지 키우세요.
- 디테일 테스트. 16픽셀에서는 선 굵기보다 좁은 틈은 메워집니다. 자물쇠의 열쇠 구멍과 카메라의 렌즈 링이 흔한 희생양입니다. 빼거나 틈을 넓히세요.
- 맞히기 테스트. 시트를 본 적 없는 사람에게 작은 시트를 보여 주고 각 아이콘이 무슨 뜻인지 물어보세요. 망설이는 아이콘은 더 단순한 도형이 필요하거나, 앱에서 옆에 라벨을 붙여야 합니다.
- 상태 테스트. 각 아이콘을 활성 탭의 강조색으로 시험해 보세요. 채움 버전이 시스템의 일부라면 열두 개 모두 같은 방식으로 채워야 합니다.
벡터로 정리하세요
모델이 SVG를 돌려주더라도 믿기 전에 열어 보세요. 생성된 패스는 울퉁불퉁한 경우가 많습니다. 세 개면 될 곳에 노드가 수십 개 있고, 선이 너비가 조금씩 다른 채움 윤곽선으로 저장되어 있고, 모서리 반경이 거의 같지만 완전히 같지는 않습니다. 세트라면 가장 깔끔한 방법은 생성된 파일을 밑그림 가이드로만 깔아 두고, 각 아이콘을 내 그리드 위에서 진짜 선으로 다시 그리는 것입니다. AI 로고 시안을 벡터로 만드는 가이드에서 손으로 따라 그리기와 도형 단순화를 다루는데, 같은 습관이 여기에도 적용됩니다.
아이콘만의 특징은 공통된 구성입니다. 선 굵기와 모서리 반경을 편집기에서 스타일로 한 번만 설정해 열두 개 모두에 적용하면, 나중에 선을 바꿀 때 세트 전체가 바뀝니다. 점을 그리드에 맞춰 주요 크기에서 선이 정수 픽셀에 떨어지게 하세요. 마스터 파일에서는 각 아이콘을 별도의 아트보드에 두고, magnifier가 아니라 icon-search처럼 의미로 이름을 붙인 뒤, 거기서 개발자가 요청하는 형식으로 내보냅니다.
아이콘이 더 넓은 아이덴티티와 함께 쓰여야 한다면, 팔레트와 스타일 ID는 브랜드의 나머지와 같은 곳에서 가져올 수 있습니다. 가상의 로스터리를 위한 브랜드 아이덴티티 보드처럼요. 마스터 하나를 고정하고 나머지를 모두 그 주위에 쌓는 발상은 문구 세트를 하나로 묶는 것과 같은 발상입니다.
여전히 당신의 몫인 것
모델이 주는 것은 초안과 방향입니다. 최종 세트는 다시 그린 결과물입니다. 일관된 선, 진짜 그리드, 실제 크기에서의 테스트. 어떤 아이콘도 다른 회사의 잘 알려진 심볼을 거의 베낀 것이 아닌지 확인하고, 스토어나 운영체제가 앱 아이콘에 관한 자체 규칙을 두고 있다면 플랫폼 가이드라인을 따르세요. 열두 개가 자리를 잡으면 열세 번째를 추가하는 일은 쉽습니다. 카드, 마스터, 스타일 ID가 이미 있으니까요. /models에서 벡터와 디자인 모델을 둘러보고 스튜디오에서 마스터를 시작하세요.
질문
AI가 아이콘 세트 전체를 한 번에 만들 수 있나요?
아이콘을 그릴 수는 있지만, 일관성은 먼저 정한 규칙과 모든 아이콘을 하나의 마스터에서 파생시키는 데서 나옵니다. 그 마스터로 만든 스타일을 쓰고, 선과 모서리가 정말로 맞도록 세트를 벡터로 다시 그리세요.
벡터 모델이 완성된 SVG 아이콘을 주나요?
벡터 출발점을 줍니다. 파일을 열어 패스와 선 굵기를 확인하고, 그리드 위에서 다시 그릴 생각을 하세요. 생성된 패스가 손으로 만든 아이콘만큼 깔끔하고 균일한 경우는 드뭅니다.
아이콘은 얼마나 작게 테스트해야 하나요?
사람들이 보게 될 크기로, 보통 툴바에서 24픽셀, 촘촘한 목록에서 16픽셀로 실제 화면에서 테스트하세요. 사용자가 받는 것은 벡터로 다시 그린 버전이므로, 다시 그린 뒤에도 테스트를 반복하세요.