모바일 UI 디자인 기본 요소 - Icon 2
이전 글에서 아이콘의 역사와 아이콘을 디자인하기 전에 알면 좋은 레퍼런스에 대해 다뤘다.
https://brunch.co.kr/@chulhochoiucj0/24
https://brunch.co.kr/@chulhochoiucj0/27
이번 글은 모바일 아이콘 디자인의 일반적이고 기본적인 가이드이다. 모바일 앱에 사용될 30개 이상의 시스템 아이콘세트 디자인을 이제 막 시작한 디자이너를 위한 가이드이다.
처음 아이콘을 디자인할 때 모바일 앱이나 웹을 위한 아이콘 디자인은 교과서라고 할 만한 일반화된 방법론이 없었다. 아이콘 디자인을 다양한 방식으로 디자인하기도 해서 기준을 정해서 디자인하기 어렵다. 아이콘의 기본 크기부터 규격이 다양하다. 디자인하는 툴은 포토샵으로 할지, 일러스트레이터로 해야 할지 아니면 스케치나 피그마로 해야 할지도 명확하지 않았다.
틀과 크기를 어떻게 결정했는데 일반적인 검색을 의미하는 돋보기 아이콘이나 홈 아이콘 외에 모바일 앱에 필수적인 아이콘은 어떤 아이콘들이 있는지도 정확하게 알 수 없었다.
몇몇 아이콘들은 어떤 기능에 사용해야 할지 몰라서 많은 검색과 자료 수집이 필요했다. 아이콘을 디자인해서 개발자에게 전달할 때도 어떤 파일 포맷으로 전달해야 할지도 모호했다.
이 글을 읽고 처음 시스템 아이콘 세트(UI 아이콘 세트)를 디자인할 때 겪었던 시행착오를 겪지 않았으면 한다.
아이콘 디자인 툴
가장 많이 사용하는 아이콘 디자인 툴은 어도비 일러스트레이터 (Adobe Illustrator)이다. 아이콘은 인터페이스에서 다양한 크기로 적용된다. 시스템 아이콘은 크기를 확대해도 선명도가 유지되는 벡터로 디자인되어야 한다. 꼭 어도비 일러스트레이터가 아니더라도 백터 그래픽 틀로 디자인해야 한다.- 포토샵의 패스로 디자인하는 경우도 있는데 이는 추천하지 않는다.
최근에는 XD나 figma로 그리는 경우도 있지만 아직까지는 벡터 그래픽 툴은 어도비 일러스트레이터가 대세로 보인다.
아이콘의 규격
아이콘을 디자인할 때 먼저 기본 크기를 결정하고 그리드를 정해야 한다.
아이콘 디자인 시 많은 궁금증 중 하나는 ‘아이콘의 기본크기는 몇 픽셀로 디자인해야 하는가?’이다. 처음 아이콘을 디자인할 때 24픽셀로 해야 할지 32픽셀로 디자인해야 할지 네이버같이 36픽셀로 해야 할지 고민했다. 여러 레퍼런스를 살펴본 결과 가장 많이 쓰는 시스템 아이콘의 규격은 24픽셀 그리드이다. 모바일 앱/웹의 시스템 아이콘은 가장 일반적인 검색 아이콘을 포함해서 최소 10개 이상의 아이콘이 필요하다. 시스템 아이콘은 모바일 앱 내에 전반적으로 사용되기 때문에 일관성 있는 형태와 크기를 가져야 한다.
구글의 머터리얼 아이콘은 24픽셀 그리드로 기반으로 디자인되었고 네이버 스퀘어 아이콘은 36픽셀. IBM의 카본 디자인 시스템 아이콘은 32픽셀이다.
여러 레퍼런스를 참고한 결과 24픽셀이 가장 일반적이다. 라인. 우버. 스포티파이 등 주요 앱이 24픽셀 그리드를 기본으로 한다.
모바일 앱에서 일반적으로 사용되는 아이콘의 크기는 16픽셀, 20픽셀, 24픽셀, 32픽셀, 40픽셀이다. 그중에 가장 많이 사용되는 기본이 되는 크기는 24픽셀이다.
Vitaliy Kapustyanov의 글 “Icon size” 인용24px 아이콘은 16px 글꼴크기의 레이블에 최적화되고 20px, 16px 아이콘은 각가 14px과 12px 글꼴에 최적화되게 디자인한다. 12px 아이콘은 많이 사용하지 않지만 11px나 10px의 레이블에 사용할 수 있다.
아이콘의 기본 구조
아이콘의 기본 구조는 폰트 디자인처럼 명확하게 정의되지는 않았다. 이 구조는 기존의 몇몇 디자인시스템에서 정의한 구조와 폰트 디자인 자료를 참고했다.
1. Stroke
2. Corners
3. Stroke terminal(end caps)
4. Counter stroke (gaps/separation).
5. Counter area (exclusions/negative spaces).
6. Bounding area
Strokes
아우트라인 아이콘을 디자인한다면 Strokes가 아이콘의 기본 형태를 잡는 기반이 된다. Strokes의 두께는 아이콘 세트 전반적으로 동일한 크기를 사용해야 한다. 또한 하나의 아이콘 내의 Strokes 두께가 요소별로 달라서는 안된다.
아이콘 내에서나 아이콘 세트 전체적으로 모든 아이콘에 대해 같은 두께를 사용하여 동일한 시각적 무게를 유지해야 한다. 보통 2픽셀을 많이 사용하지만 아이콘의 스타일에 따라 두께를 정하고 일관성 있게 적용해야 한다.
아이콘이 복잡하거나 일정한 선 밀도가 있는 경우 예외적으로 두께를 조정할 수 있수도 있다. 더 좋은 방법은 아이콘의 형태를 더 단순화해서 Strokes의 두께를 일치시키는 방법이니다. IOS초기 버전에서 아이콘의 스트로크 두께를 1픽셀로 했는데 가독성 문제가 생겼고 최근 SF symbol부터는 조금 두꺼워졌지만 2픽셀은 넘지 않습니다.(SF symbol Regular 기준) 스트로크 두께를 결정하는 기준은 16픽셀로 축소했을 때 1픽셀 이상이 되는가이다.(16픽셀 그리드의 아이콘을 따로 제작하기도 한다.)
16픽셀이 1픽셀 두께라면 두 배 크기인 32픽셀에서는 2픽셀이 되고, 24픽셀은 1.5픽셀이 된다. 이를 기준점 삼아 24픽셀 아이콘의 스트로크 두께를 정할 수 있다.
Corners
아이콘의 형태에서 모서리 부분을 어떻게 처리하느냐에 따라 스타일이 크게 달라 보인다. 모서리의 라운드 또한 일관성 있는 규칙에 따라 디자인해야 한다. 모서리 라운드의 수치는 짝수로 정의 내리고, 오브젝트의 형태에 따라 2의 배수로 적용할 수 있다.
같은 아이콘이더라도 Corners의 라운드 수치에 따라 달라 보인다. 라운드가 없을 경우 딱딱해 보이고 라운드가 많으면 친근하게 보인다.
정의 내린 모서리의 라운드는 형태에 따라 변형가능하다. 예를 들어 기본 라운드를 4픽셀로 정의했을 때 형태적인 유사성을 위해 4 이외의 수를 위와 같은 규칙을 적용해 사용할 수 있다. 물론 변형하지 않고 의도적으로 모든 형태에 동일 라운드 수치를 적용할 수도 있다.
Stroke terminal (End caps)
Strokes의 끝부분을 말한다. Stroke terminal (End caps) 또한 아이콘에 개성을 주고 스타일에 영향을 미칠 수 있다. 디스플레이의 해상도가 높아지면서 형태의 디테일을 줄 수 있게 됐다.
Stroke terminal의 형태에 오른쪽과 같이 라운드 형태를 적용해서 친근한 느낌을 줄 수 있다.
아이콘의 Corners에 라운드를 주고 Stroke terminal에는 직사각형으로 디자인해서 스타일을 다르게 할 수도 있다.
Counter strokes
아이콘 안에 나타나는 작은 빈 공간을 카운터라고 한다. Gaps, Separation이라고도 한다. 단순하고 형태를 알아보기 쉬운 아이콘을 얻기 위해 Counter strokes(카운터 스트로크)를 사용한다.
카운터 스트로크 크기는 스트로크 두께보다는 크거나 같게 한다. 개별 아이콘에 가장 적합하도록 조정할 수 있다. 카운터 스트로크를 사용하여 아이콘의 일부를 자르고 분리한다.
오른쪽의 아이콘이 카운터 스트로크를 사용하여 왼쪽보다 형태를 더 빠르게 인식하는데 도움을 준다. 카운터 스트로크(Counter strokes)를 사용하면 아이콘 전반적으로 형태를 단순화할 수 있다.
Counter strokes를 꼭 적용할 필요는 없다. 디자인 콘셉트에 따라 적용할 수 있다. 다만 아이콘 시스템 내에서 일관성 있게 Counter strokes를 반영해야 한다.
Counter area
아이콘의 속 공간을 말한다. Negative spaces라고도 한다. Strokes로 그려진 형태를 제외한 빈 공간이다. Counter area는 단순히 빈 공간이 아니라, 아이콘의 Strokes로 그려진 형태(포지티브 스페이스)의 가시성을 높이는 요소이다. 아이콘의 형태적인 특징을 쉽게 인식할 수 있도록 돕는다.
작은 화면에서 사용자가 더 빠르게 스캔하여 아이콘을 인식할 수 있도록 적절한 공간을 유지해야 한다. 충분한 Counter area가 없으면 아이콘 내의 요소가 합쳐져 보여 전체적인 의미가 손상될 수 있다.
왼쪽 아이콘은 작게 했을 때 소문자 [i]가 오른쪽 아이콘 보다 빠르게 인식되지 않는다.
이러한 적절한 공간은 아이콘의 빠른 인식뿐만 아니라 시각적인 형태의 완성도에도 영향을 미친다
Bounding area
아이콘의 형태적인 영역이 아니라 아이콘이 차지하는 최대 영역을 의미한다. 아이콘 세트 전체적으로 동일한 공간을 차지하고 그리드의 기반이 된다. 아이콘은 Bounding area 내에서 디자인되어야 하고 넘어서면 안 된다.
아이콘의 그리드
아이콘의 기본 구조를 알았다면 이제 본격적인 아이콘 디자인을 하기 위한 기반마련을 해야 한다. 아이콘의 크기를 정했으면 시스템 아이콘의 전반적인 형태와 공간의 통일성을 위한 기반을 설정하고 거기에 맞춰 디자인해야 한다.
아이콘 그리드에는 아이콘 디자인의 Live area(안전영역) 설정을 위한 Padding, 아이콘 세트 전체의 기본 형태와 비율의 일관성을 위한 Keyline shapes, 아이콘의 각도를 가이드해줄 Orthogonals가 있다. 각 영역은 아이콘을 디자인하는 기준점을 제공한다.
Pixel Grid
시스템 아이콘은 픽셀 기반 그리드 (24px x 24px)에 그려지며 기본 크기가 다른 크기로 확대되고 축소된다. 그리드는 아이콘을 디자인할 때 전체 아이콘 세트의 시각적인 무게와 스타일을 통일시키는데 필수적이다. 픽셀 기반 그리드에 맞춰 아이콘을 디자인해야 한다.
Padding
아이콘 그리드에는 24픽셀 기반일 경우 보통 2px 또는 1px 패딩이 포함된다
패딩은 다양한 아이콘을 디자인해야 하는 아이콘 세트에서 SVG, PDF, PNG로 파일을 내보낼 때 아이콘 간에 원하는 크기와 공백을 유지하기 위해 필요하다. 예외적으로 아이콘 간의 시각적 무게나 의미 전달에 꼭 필요한 요소를 포함해야 할 경우 패딩 공간을 넘어서 디자인할 수 있다.
구글 머터리얼 디자인과 마이크로소프트의 경우 2px을 권장하지만 인스타그램이나 우버의 경우처럼 1px를 주는 경우도 많다. 모바일 앱에 사용하는 UI아이콘은 전반적으로 1px 패딩이 많아지는 추세이다.
2픽셀 패딩과 1픽셀 패딩 비교2px 패딩의 경우 Live area(안전영역)가 20픽셀이고 1px 패딩은 22픽셀이다. Strokes의 두께를 2픽셀 이상 줄 경우는 1px 패딩이 디자인하기에 제약이 적어진다.
패딩은 아이콘의 형태적인 일관성을 위해 Live area(안전영역)를 설정하지만 필요한 경우 패딩 공간을 넘어서 디자인할 수 있다.
Keyline shapes
그리드와 패딩을 정했으면 Keyline shapes를 규정해야 한다. Keyline shapes는 아이콘 세트 전체의 기본 형태와 비율의 일관성을 위해 꼭 필요하다. 그리드 내에 아이콘의 크기와 형태를 정하는 기준이라고 보면 된다.
위 예시는 패딩을 2px로 정했을 때의 규격이다. 아이콘의 기본 형태는 정사각형과 원형, 직사각형으로 환원될 수 있다. 이러한 기본 형태는 수치상으로 같을지라도 사람의 눈으로는 다르게 보일 수 있다. 시각적 보정을 위해 각 기본 도형별 Keyline shapes를 정해 전체적인 시각적 무게를 다룬다. 시각적 보정 관련은 뒤에서 다룬다.
Keyline은 아이콘 간의 크기와 비율 그리고 시각적인 무게를 유지시켜 아이콘 세트의 디자인 완성도를 높이기 위한 기준이 된다.
