비교적 간단한 아이콘이 필요할 경우, 별도의 툴 없이 Figma 내에서 바로 작업할 수 있습니다.
이 글은 '아이콘 디자인(그리기)'과정에 초점을 맞추어 작성한 글로,
레퍼런스 찾기부터 추후 라이브러리 퍼블리싱 시 오류가 없도록 디자인을 완료하는 법까지를 간략하게 설명합니다.
1. 아이콘 디자인 전 : 레퍼런스 찾기
검색, 홈, 좋아요 등의 커먼한 아이콘은 바로 떠오르는 보편적인 메타포가 있어 바로 그릴 수 있습니다.
하지만 생소한 도메인인 프로덕트의 아이콘을 제작하거나 특정 메타포가 사용자에게 직관적으로 이해될지 확신이 없다면, 참고할 만한 레퍼런스들을 함께 보면서 디자인하는 것이 좋습니다.
💡참고로, 이 단계에서 아이콘을 직접 그릴 필요가 있는 상황인지 검토해 보면 좋습니다. MVP 단계에서는 무료 배포 아이콘을 사용하는 것도 좋은 방법입니다.
1-1. 피그마 커뮤니티 배포 파일 참고하기
- ✅ 추천 : 9 Icon Packs - 9000+ icons - 270 flag icons https://www.figma.com/community/file/1278701018601788543/9-icon-packs-9000-icons-270-flag-icons
9개의 무료 라이선스 아이콘 팩이 포함되어 있어, 여러 개의 파일을 따로 열 필요 없이 다양한 아이콘을 한 번에 확인할 수 있습니다. 이 외에도 Figma 커뮤니티에서 다양한 브랜드가 배포한 아이콘 라이브러리를 참고하면 좋습니다.
2. 무료/프리미엄 아이콘 다운로드 사이트 리서치
- ✅ 추천 : iconScout (https://iconscout.com/icons)
무료/프리미엄 아이콘들을 다운로드 할 수 있는 사이트에서 키워드를 검색해 확인할 수 있습니다.
해당하는 키워드에 어떤 메타포가 일반적으로 사용되는지 참고합니다.
3. 타 경쟁사(Competitors)의 아이콘 리서치하기
- ✅ 특수한 상황이나 생소한 도메인에서 사용하는 아이콘을 어떻게 디자인해야 할지 망설여진다면, 경쟁사의 아이콘을 리서치해보면 좋습니다. 이미 사용자가 익숙한 메타포라면 UX 측면에서도 유리하기 때문입니다.
2. 아이콘 디자인 시작하기
아이콘 디자인 시 되도록 일관성을 유지하는 것이 중요합니다.
지켜야 할 가이드라인은 따르되, 의미 전달과 시각 보정을 고려해서 유연하게 디자인해야 좋은 아이콘 디자인이 나옵니다.
2-1. Keyline을 기준으로 그립니다.
- Keyline은 아이콘들이 일관적인 볼륨감을 갖도록 도움을 줍니다. 아이콘의 의미 전달과 시각 보정을 고려하여 일부 그리드와 키라인은 벗어나도 좋습니다.
- 또한 소수점이 나와도 괜찮습니다. 과거에는 웹/앱 스펙을 고려해 소수점이 나오는 것을 지양했지만, 현재는 스펙이 발달하면서 정수로 꼭 값이 떨어지지 않아도 괜찮아졌습니다.
- 다만, 상하좌우의 마진 1~2의 Safe Area는 침범하지 않도록 합니다. (1까지는 허용 가능합니다...)
2-2. 동일한 스펙(Spec)을 적용해 디자인합니다.
Stroke 굵기 (1, 1.5, 2...), Stroke Alignment (Center, Indside, Outside...), Join 등 피그마의 우측 Stroke 패널에서 원하는대로 조정해 일관적으로 적용합니다. 때때로 시각보정을 위해 일부는 예외로 섞어 쓰기도 할 수 있습니다.
3. 아이콘 디자인 작업하고 완료하기
3-1. Outline Icon을 완성하는 순서
- Stroke으로 아이콘을 그립니다.
- Outline Stroke (Option ⌥ + Command ⌘ + O)로 벡터화합니다.
- Union으로 도형을 합칩니다.
- Flatten (Command ⌘ + E)하여 하나의 Vector 파일로 정리하고, 레이어명을 정리합니다.
*깨고 나면 수정할 수 없으므로 추후 수정하기 위해 Stroke들이 살아 있는 백업을 남겨둡니다.
3-2. Filled Icon을 완성하는 순서
- Rectangle, Ellipse, Stroke 등을 활용해 도형을 만듭니다.
- Union/Subtract 등 도형 편집 툴을 활용해 원하는 형태를 완성합니다.
- Flatten (⌘ + E)하여 하나의 Vector 파일로 정리합니다.
*마찬가지로 Union / Substract까지 완료한 상태는 수정을 위해 백업으로 남겨둡니다.
⚠️ 꼭 Union/Subtract를 적용한 후에 Flatten을 해야 합니다.
도형을 곧바로 Flatten 하면 도형 내 불필요한 선들이 남아 SVG 추출 시 코드가 지저분해질 수 있습니다.
꼭 먼저 Union/Subtract로 도형을 정리한 후 Flatten 합니다.
4. 퍼블리싱 시 주의할 점
4-1. 레이어 구조 정리하기
✅ 마지막 단계에서는 반드시 Flatten(⌘ + E)하여 레이어를 1개로 합치고 레이어명을 같은 이름으로 맞춰야 합니다.
- Union/Subtract 방식은 하위 레이어를 유지하면서 수정할 수 있다는 장점이 있습니다.
- 그러나 라이브러리 퍼블리싱 후 컴포넌트 인스턴스를 교체할 때, 레이어가 여러 개로 남아 있으면 스타일(Color 등)이 정상적으로 적용되지 않을 수 있습니다.
- 마찬가지로 레이어명이 다르면 제대로 컴포넌트에서 인스턴스가 교체되거나 스타일이 적용되지 않습니다.
4-2. Constraints 설정 및 동일한 컬러 적용하기
✅ 아이콘을 크기에 따라 늘였다 줄였다가 가능하도록 Scale로 맞춥니다.
이 부분을 가끔 까먹어서 나중에 컴포넌트에 아이콘을 넣어서 인스턴스를 교체했을 때 크기가 적용이 안 되는 현상이 발생한 적이 꽤 있는데요, 까먹지 말고 꼭 Vector를 Scale로 맞춰주세요!
✅ 동일한 컬러 스타일로 맞춰줘야 합니다.
다른 스타일이 적용된 컬러가 섞여 있으면, 인스턴스를 교체할 때 컬러가 정상적으로 반영되지 않을 수 있습니다.
마치며
UI 라이브러리 구축 프로젝트에서 아이콘 작업 반장을 맡으며 배운 내용을 정리해 보았습니다.
Figma로 아이콘을 디자인하는 분들께 도움이 되길 바랍니다. :)
'Skills' 카테고리의 다른 글
| [Figma] [Lottie] 피그마에서 '좋아요' 애니메이션 만들고 Lottie 파일로 변환하기 (2) | 2024.11.21 |
|---|---|
| [Notion] 웹페이지를 클릭 한번으로 노션에 스크랩 할 수 있는 노션 웹 클리퍼 (Notion Web Clipper) (3) | 2024.10.18 |
