🛠 아이콘! 어떻게 시작할까?

‘아차!’하면 놓치기 쉬운 아이콘 제작 가이드✏️

💁‍♀️ Renewal 계기

한 달 전 필자는 ‘여신티켓’의 UX/UI 디자이너로 이직을 하게 되었습니다.😉

여신티켓은 피부 시술을 합리적인 금액으로 제공하는 서비스입니다. 때문에 신체 부위와 기존 앱에서 일반적으로 사용하는 아이콘들이 배합되어 사용되는데요~

기존 아이콘은 일정한 가이드가 없던 탓에 곡선과 직선, 점선이 혼합되어 디자이너의 마음을 아프게 하는 부분 중 하나였습니다.🥲

마침🙏 !!! 다음 분기 디자인팀의 궁극적 목표는 “Component를 제작하자!”였고, 서비스의 기본적으로 사용되는 아이콘부터 정립하는 작업을 진행하였습니다. 오늘은 어떤 서비스에서든 이질감 없이 녹아드는 제작기를 공유하고, 다음 분기 BI가 확정된 후에는 [여신티켓]만의 아이덴티티를 녹인 글을 써보려 합니다.

아이콘 제작 1부!! 이제 시작합니다.🤩

1. 넓이를 통일하자

아이콘의 기본적인 형태는 4개로 나눌 수 있습니다. 원형 / 정사각형 / 가로로 긴 직사각형 / 세로로 긴 직사각형입니다.

하나의 서비스에서 각각의 다른 형태를 가진 아이콘은 동일된 넓이를 가져야 합니다. 아이콘마다 소유한 넓이가 다르다면 중요도가 다르게 느껴지겠죠?🤔 때문에!! 4개의 형태로 통일하여 한 가지 형태에 집중되지 않도록 하는 것입니다.

👏 그렇다면 4개의 형태를 모두 담아낼 수 있는 가이드를 제작해 보겠습니다.

정사각형의 ‘24dp*24pd’로 아이콘 가이드를 제작을 한다면 1~4의 모든 형태를 포괄할 수 있는 동일한 넓이의 아이콘을 제작할 수 있습니다.😉

더 자세한 내용은 하단의 Material Guide(머티리얼 가이드)를 참고해 주세요!

Material Design

2. 크기를 규정하자

필자는 Figma로 component를 작업하며, 사용할 아이콘 크기의 정확한 통일이 필요하였습니다. 굳이 Figma를 사용하지 않더라도 Skech, Framer 등 다양한 툴에서도 규격의 통일은 필요하겠죠? 😤

서비스의 UI Frame에 통상적으로 적용하기에 용이한 사이즈를 4개 선정하였습니다.

💁‍♀️ ‘36dp, 24dp, 20dp, 10dp’인 짝수 사이즈로 규정하여 Frame 작업 시 레이아웃 변화에 용이하게 대응할 수 있도록 하였습니다.

아이콘 작업 시에 10dp로 제작하는 아이콘의 경우에는 인지가 쉬워 형태만으로도 설명이 가능한 기호만을 사용해야 합니다. 비 직관적인 아이콘을 10dp로 제작할 경우, 시각적으로 형태가 뭉쳐 가독성이 떨어질 수 있습니다.😱 작업 시 벡터 방식으로 작업하기 때문에 획이 2개 이상인 아이콘을 그릴 수 있지만, 직관적인 아이콘과 비 직관적인 아이콘을 비교하여 UI에 적용한다면 지양해야 하는 이유를 쉽게 알 수 있습니다.

또한 직관적인 아이콘은 형태만으로도 설명이 가능하지만, 비 직관적인 아이콘은 별도의 설명이 필요함과 동시에 한눈에 형태를 인지하기도 어렵습니다.🥲 사용자가 디자이너의 의도를 읽으며 서비스를 사용하지 않는 이상 별도의 설명을 필요로 할 수 있기 때문에 혼동을 야기하는 형태는 지양하는 것이 UX 적으로도 적합하다고 볼 수 있습니다.

3. 원칙을 세우자

형태와 크기의 규정이 마무리되었다면 원칙을 세워보아야겠죠?🧚‍♀️ 원칙에는 ‘서비스 아이덴티티를 얼마나 담아낼 수 있는지’, ‘BI와의 조화가 맞는지’, ‘UI 적용 시 톤앤 매너가 적절한지’등 다양한 가이드라인이 존재할 수 있습니다.

아이콘을 서비스의 BX 요소로 담아내기 위해서는 우선적으로 BI가 확정되어야 하지만!!!! 현재 [여신티켓]은 BI의 리뉴얼이 계획되어 있지 않기 때문에 어떤 서비스에나 자연스럽게 녹아들 수 있는 방향으로 진행하였습니다.👩‍💻

(1) Strock 끝의 형태를 결정하자!

필자는 앞서 말했듯, 아이덴티티를 최소화하는 기본 형태를 유지하기 위하여 ‘Butt Cap’의 형태를 활용하였습니다.

Stroke Cap의 경우, 다음과 같은 형태로 아이콘에 사용합니다. 4개의 예시 아이콘을 보면 끝부분이 90도의 직각으로 마감된 것을 확인할 수 있습니다.

(2) Corner의 곡률을 결정하자

곡률이란 Radius 즉, 모서리의 굴림을 말합니다! 아이콘의 형태가 복잡해질수록 곡률에 대한 중요도가 올라가는데요, 만약 곡률의 규정이 없다면 사용자에 따라 다른 아이콘으로 인식될 수 있습니다.🤭

간단한 예시를 들어보겠습니다!!

Radius(=곡률)을 0, 60, 다양하게 사용한 경우의 예를 들어보았습니다. 첫 번째 아이콘의 경우 직각을 사용하여 견고하고 단단한 느낌을 주지만 2, 3의 아이콘의 경우 부드럽고 여성적인 느낌을 줄 수 있습니다. 이처럼 곡률에 따라 사용자가 인지하기에 충분히 다른 서비스처럼 인지할 수 있습니다.😉

💁‍♀️ 곡률은 크게 3개의 카테고리로 구분할 수 있습니다.

필자의 경우, 모던하고 견고한 느낌을 주기 위하여 ‘Miter Join’을 사용하였습니다. 🚨 앞에서 언급했듯이 ‘Round Join’을 사용할 경우, 곡률을 통일해야 하며 3개 이상의 곡률을 하나의 아이콘에 적용했을 시 난잡해 보일 수 있으므로 각별히 주의해야 합니다.

(3) Stroke의 위치

획의 정렬이 어떤 부분을 중심으로 있냐에 따라서 아이콘의 작업 방법이 달라질 수 있습니다. 같은 사이즈의 작업물이라도 Center인지 Inside 인지 Outside 인지에 작업 방법에 따라서 최종적인 아이콘의 사이즈가 변경될 수 있겠죠? 그 예시를 살펴보겠습니다!!🤓

원본 사이즈는 동일하지만 추출물의 사이즈가 다른 것을 확인할 수 있습니다. illustrator로 아이콘 작업 시 inside와 outside를 혼용해서 사용한다면 처음에 의도했던 결과물을 얻지 못하겠죠?🤷‍♀️ 때문에 어떤 Align Stroke를 사용할지 통일해야 합니다.

(4) 그 외의 원칙

앞의 3개의 원칙을 모두 지켰다면 한 세트로 보이는 Icon Bowl을 가져갈 수 있을 거예요! 그 외에 더욱 디테일을 잡고 싶다면 몇 가지 원칙을 더 세울 수 있습니다.

1. 각도
2. 획의 최소~최대 개수
3. 다각형의 경우, 꼭짓점의 개수 제한

단!!!☝️ 원칙을 상세히 정할수록 디자인 시스템이 탄탄해지지만, 제약 범위가 늘어나기 때문에 어느 정도의 자율성을 허용하며 제작하는 것이 적절합니다!

4. 네이밍 규칙을 만들자

내가 만든 아이콘!!!😎 Component 작업하기도 편리해야겠죠?? 필자는 아이콘의 명칭을 일정한 규칙을 통하여 규정하였습니다.

'카테고리(사이즈)/명칭' 으로 통일하였습니다.

Figma에서는 ‘/’를 통해서 Copoment를 구분을 하기 때문에 Atomic Design 구조를 만들기 위해서는 ‘카테고리(사이즈)/명칭’의 구조가 필요합니다.

👩‍💻 필자가 작업한 파일을 예시로 들어보겠습니다!

오른쪽에 보이는 것처럼 ‘카테고리(사이즈)’의 명칭이 동일하다면 Swap Instance에서 변경이 가능합니다.

5. 마치며..💙

오늘은 아이콘 작업 방법에 대한 기초에 대해 작성해 보았습니다. 처음 아이콘을 작업하는 분들이 이 글을 읽고 많은 도움이 되었으면 좋겠습니다.😇

아이콘 제작에 숙련도가 붙는 가장 빠른 Tip을 드리자면!!! 많은 작업을 권유 드리고 싶어요. 가장 확실하고 빠른 실력 향상 방법은 많은 작업 경험이라는 거~📖 곧 더 좋은 내용으로 찾아오겠습니다🙏