모바일 UI 디자인 - 아이콘 디자인 참고 자료 모음
모바일 앱 아이콘 세트 디자인 시 참고할 자료와 가이드 모음
모바일 앱의 아이콘 세트를 디자인하기 전 아이콘의 구조와 형태를 알아야 합니다.
다음은 제가 앱과 웹 아이콘 디자인을 하면서 참고하고 많은 도움을 받았던 아이콘 라이브러리와 디자인 가이드들을 소개합니다.
애플과 구글 등 주요 플랫폼의 아이콘 라이브러리에 대해 다룹니다. 주요 디자인 시스템의 디자인의 아이콘 가이드와 피그마 리소스에 대해서도 정리합니다. 또한 아이콘을 유료나 무료로 판매하는 주요 서비스들도 다룹니다. 주요 플랫폼과 앱의 최신 아이콘 다자인 트렌드도 정리했습니다.
Apple SF Symbols 4
출처 - https://developer.apple.com/sf-symbolsSF Symbols 은 무려 4,000개가 넘는 수를 자랑하는 애플의 아이콘 라이브러리입니다.
애플은 사용자 인터페이스와 전반적인 경험을 개선을 위해 시스템 폰트인 San Francisco와 원활하게 통합된 아이콘 라이브러리인 SF Symbol을 만들었다고 합니다.
아이콘은 주로 레이블과 함께 사용되는데요. 이때 아이콘과 폰트의 높이값이나 시각적인 무게가 유사해야 하는데 애플은 시스템 폰트와 시스템 아이콘의 형태가 시각적인 조화를 이루게 디자인했습니다. SF Symbols는 타이포그래피를 염두에 두고 디자인되었다고 보시면 됩니다.
애플은 이렇게 디자인된 아이콘들을 외부 디자이너와 개발자가 사용할 수 있게 SF Symbols 4 App을 제공합니다. San Francisco 서체와 함께 애플 플랫폼(iOS, Mac OS 등) 전체의 시스템 아이콘으로 사용되는 만큼 초기 버전에서 많은 업그레이드가 있었습니다. - SF Symbols 1 에서는 아이콘을 분류조차 하지 않았습니다.
우선 SF Symbols 4 App을 다운로드하여서 설치한 후 실행시켜 아이콘을 선택하고 복사해서 피그마 같은 디자인 프로그램에서 San Francisco로 텍스트를 입력한 후 붙이기 하면 아이콘을 사용할 수 있습니다.
San Francisco 서체가 지원하는 일반(Regular) 외에 볼드와 라이트같이 다양한 무게(Weight)를 지원합니다.
출처 - https://developer.apple.com/sf-symbols총 9가지의 무게를 지원하고 Small, Medium, Large 3가지 크기가 있습니다.
SF Symbol은 24픽셀 그리드에 Stroke 두께를 1.5나 2 픽셀 중 하나만 지정하여 디자인하는 일반적인 방식으로 아이콘을 디자인했다기보다는 폰트 디자인 방식을 적용했다고 보시면 될듯합니다. 따라서 애플 방식으로 아이콘을 디자인하기 위해서는 많은 시간과 노력이 필요하고 폰트 디자인에 대한 지식까지 있어야 해서 처음 아이콘 디자인을 접근하는 디자이너에게는 고급 과정으로 보입니다. (솔직히 저도 이렇게 다양한 두께로 아이콘을 디자인할 엄두가 나지 않습니다.)
그런 만큼 애플은 그래픽(비주얼) 디자인에 많은 투자를 하고 디자인에 대해서는 트렌드를 주도하려고 하는 느낌이 강합니다.
SF Symbols 앱 다운로드는 여기서 가능합니다. Mac OS 서만 실행됩니다.
https://developer.apple.com/sf-symbols/
SF Symbols에 대한 설명은 아래에서 확인 가능합니다.
https://developer.apple.com/design/human-interface-guidelines/foundations/sf-symbols
Google Material Symbols
Material Symbols은 구글의 안드로이드 플랫폼에 사용하기 위해 다자인 된 아이콘 라이브러리입니다. 구글의 모바일 OS인 안드로이드의 시스템 아이콘입니다. OS에서 뿐만 아니라 Gmail, Drive, 지도 등 Google의 주요 제품군에 사용됩니다. Material Design 2에서 Material Design 3으로 업그레이드되면서 아이콘을 폰트화 했습니다. Google Font 사이트에 아이콘 폰트 형태로 공개하여 아래 주소에서 사용할 수 있습니다.
https://fonts.google.com/icons?icon.platform=web&icon.set=Material+SymbolsMatrrial Symbols는 2,500개 이상의 아이콘(glyphs)이 하나의 폰트 파일로 통합되었습니다. Outlined, Rounded, Sharp 3가지 스타일과 Fill 타입을 선택할 수 있습니다. 20, 24, 40, 48px 4가지 크기와 7가지 두께를 지원합니다.
초기 Filled(solid)만 디자인되었다가 Outlined 스타일이 추가되었고 이제는 폰트화 하면서 3가지 스타일과 무게 등이 추가되어 업그레이드되었습니다.
스타일과 컬러를 지정하고 아이콘을 선택한 후 다양한 플랫폼에 코드를 복사해서 사용할 수 있습니다.
디자이너를 위해 피그마 플러그인도 제공합니다.
명칭은 Material System Icon에서 업그레이드하면서 Material Symbols로 변경했는데 구글이 애플을 열심히 팔로우하고 있는지 알 수 있습니다. Material Design은 아이콘 다자인 가이드를 문서화하고 공유해서 모바일 시스템 아이콘 디자인의 방식을 일반화시켰습니다. 24픽셀 크기의 그리드를 기준으로 Keyline 등 머터리얼 아이콘의 디자인 방식을 많은 앱에서 적용하고 있습니다. 저도 초창기 아이콘 디자인할 때 가이드 문사와 아이콘 라이브러리를 보면서 많은 도움을 받았습니다.
Material Design의 24픽셀 아이콘 그리드머터리얼 아이콘은 조형적으로 미려하고 아름답다고 보기 어렵습니다. 조형적인 완성도가 많이 떨어집니다. 거기다가 가이드를 경직되게 적용해 디자인되었습니다. 애플의 아이콘은 사람의 눈을 기반으로 조형성을 우선으로 가이드를 유연하게 반영해서 다자인 되었다면 머터리얼 디자인은 가이드와 기하학적인 형태에 집중하여 디자인되었습니다.
오픈소스로 바로 가져다 쓸 수 있음에도 디자이너 없이 개발자가 진행하는 앱 정도에서만 사용됩니다.
뒤에 언급할 Font Awesome이란 아이콘 서비스가 더 많이 사용됩니다. 부분 무료이긴 하지만 아이콘의 조형적인 측면에서 머터리얼 아이콘보다는 나아 보인다고 생각하는 겁니다.
애플은 플랫폼 시스템 폰트와 아이콘을 통합했지만 구글은 안드로이드 시스템 폰트인 Roboto와 아이콘을 통합하지는 못했습니다. 그래서인지 구글의 주요 앱인 유튜브에서도 이 아이콘을 사용하지 않습니다. 개인적으로 구글은 큰 마음먹고 아이콘 전체를 새롭게 디자인해야 한다고 봅니다.
아이콘 피그마 플러그 인은 여기서 확인 가능합니다.
https://www.figma.com/community/plugin/1088610476491668236
Material 아이콘 디자인 가이드입니다.
https://material.io/design/iconography/system-icons.html
https://m3.material.io/styles/icons/overview
Microsoft Fluent system iconography
Fluent system icon은 마이크로 소프트의 오픈소스 크로스 플랫폼 Fluent Design System의 아이콘 라이브러리입니다.
Fluent Design System은 마이크로소프트가 2017년에 개발한 디자인 언어입니다. Web, Windows, iOS, Android, Mac OS 등에 적용 가능한 크로스 플랫폼 디자인 시스템입니다.
주로 마이크로소프트의 MS 오피스와 Teams 등의 모바일 앱에 사용됩니다. 구글과 마찬가지로 아이콘의 디자인 리소스를 오픈소스로 공개해 Github와 피그마 아이콘 라이브러리를 다운로드할 수 있습니다.
Fluent 아이콘은 둥근 모서리, 단순화된 형태와 친숙한 느낌을 줍니다. 크기를 12,16,20,24,28.32,48 총 7가지를 지원하는 게 특이합니다.
Outlined(regular) , Filled 2가지 테마를 제공합니다. 애플과 구글에 비하면 시스템 아이콘의 숫자와 스타일이 빈약합니다. 자체 모바일 OS가 없어서 그런 듯합니다.
애플과 구글 그리고 마이크로소프트의 시스템 아이콘은 모두 Outlined와 filled 두 가지 이상을 기본으로 하는 추세입니다. 과거 한 가지의 테마에만 집중하던 아이콘이 다양한 테마를 추가하고 있습니다. 플랫디자인이 주요 흐름으로 잡히고 UI 컨트롤과 내비게이션 요소보다는 콘텐츠가 더 중요해지는 Content First 흐름에서 아이콘의 중요도는 모바일 플랫폼에서 더 강화되는 추세입니다.
시스템 아이콘 디자인만 놓고 보면 마이크로소프트는 애플과 구글에 비하면 많이 부족해 보입니다. 두 플랫폼에 비교하기 민망한 수준으로 빈약합니다. 하지만 조형적인 측면에서는 구글의 머터리얼 아이콘보다는 완성도가 높습니다.(개인적인 의견입니다.) 앞으로 점점 더 진화하는 Fluent system icon을 가대해 봅니다.
피그마 파일은 여기에서 다운로드 가능합니다
https://www.figma.com/community/file/836835755999342788
Fluent System Icon의 기본 그리드도 24픽셀입니다.디자인 가이드는 피그마 파일에 같이 있습니다.
IBM Carbon design system Icon
Carbon design system Icon은 IBM의 오픈 소스 디자인 시스템인 Carbon design System의 아이콘 라이브러리입니다. IBM 디자인 언어를 기반으로 IBM의 클라우드 서비스 등의 기업용 디지털 제품에 사용된 디자인 시스템을 오픈소스로 제공합니다. 아이콘도 github와 피그마, sketch 파일로 제공합니다.
IBM Plex와 아이콘의 형태적인 특징 설명 동영상애플과 마찬가지로 IBM의 전용서체인 IBM Plex와 형태의 유사성과 시각적인 균형을 이루도록 디자인되었습니다. 타이포그래피를 염두에 두고 아이콘을 디자인했다고 보시면 됩니다. 16px 및 20px 아이콘은 14pt 및 16pt IBM Plex와 함께 사용할 때 균형을 느끼도록 최적화되어 있습니다.
IBM Plex Sans아이콘 가이드도 자세하게 제공해서 가이드를 보면서 아이콘에 아이덴티티를 반영하는 데에 많은 영감을 받았습니다.
IBM의 주력 디지털 제품이 데스크톱 기반의 Sass 계열이기 때문인지 32픽셀 그리드를 기본으로 합니다.
다른 아이콘 라이브러리에 없는 대시보드와 데이터 관련 아이콘이 있어 많은 참고자료가 되었습니다.
Data 카테고리의 아이콘들Carbon 아이콘은 이전의 플랫폼 아이콘에 비해 형태와 조형적으로 개성이 강합니다. IBM의 디자인 언어를 차별화된 형태로 반영했다고 볼 수 있습니다. 앱의 브랜드 아이덴티티를 반영한 아이콘을 디자인할 때 많은 참고 자료가 될 것 같습니다.
아이콘 라이브러리는 아래에서 확인할 수 있습니다.
https://carbondesignsystem.com/guidelines/icons/library/
아이콘 디자인 가이드입니다.
https://www.ibm.com/design/language/iconography/ui-icons/design
피그마 파일도 있습니다.
https://www.figma.com/community/file/1089055340263947620
Shopify Polaris Icon
https://polaris.shopify.com/iconsPolaris는 카페 24 같은 전자상거래 플랫폼 Shoppify의 디자인 시스템입니다. 플랫폼을 사용하는 쇼핑몰의 운영자를 위해 디자인되었습니다. Polaris Icon은 이러한 운영 서비스의 UI에 사용되는 아이콘 라이브러리입니다.
티켓 사용자가 쇼핑몰 운영자라는 점이 일반 유저를 대상으로 한 다른 플랫폼과는 다릅니다. 따라서 일반적인 모바일 앱의 아이콘에서 사용하지 않는 아이콘들도 있습니다.
아이콘의 수도 약 440개 정도로 그렇게 많진 않습니다. 하지만 큰 규모의 아이콘 라이브러리가 아닌 만큼 이 정도 규모에서 꼭 필요한 아이콘의 종류를 알 수 있는데 도움이 됩니다.
Major icons—20 × 20와 Minor icons—16 ×16두 가지 크기로 디자인하여 용도를 구분하여 사용합니다. 20 픽셀 크기의 Major icons은 일반적인 24픽셀 그리드를 사용하지 않고 20픽셀 그리드를 사용해서 디자인되었습니다.
아이콘은 여기에서 확인 가능합니다.
https://polaris.shopify.com/icons
아이콘 가이드는 여기에서 보실 수 있습니다.
https://polaris.shopify.com/foundations/design/icons
아이콘 피그마 파일입니다.
https://www.figma.com/community/file/1110993965108325096
Atlassian Design System Icon
아틀라시안은 호주의 개발 관련 프로젝트 관리 설루션 Jira의 개발사입니다. Jira는 아셔도 아틀라시안이라는 회사명은 잘 모르실 텐데요. 시가총액이 335억 달러(약 41조)입니다. - 네이버보다 큰 회사네요
아틀라시안은 아이콘을 3가지 타입으로 분류합니다.
Standard icons은 액션과 명령에 사용하는 아이콘으로 시스템 아이콘이라고 보시면 됩니다.
Object icons은 지라에서 제공하는 서비스의 아이콘인 거 같습니다.
File type icons은 일반적인 파일 형식(txt, mp3, mov 등)과 다른 앱의 파일 형식(docx, ai, 스케치 등)을 표현하는 아이콘입니다.
아이콘 가이드는 여기서 확인하실 수 있습니다.
https://atlassian.design/components/icon/usage
Icon explorer입니다.
https://atlassian.design/components/icon/icon-explorer
피그마 파일도 있습니다. 특이하게 아이콘만 따로 만든 게 아니라 Foundation에 포함시켰네요
https://www.figma.com/file/857042449394640587
지금까지 리소스를 공유하는 주요 플랫폼의 아이콘 라이브러리에 대해서 살펴봤습니다. 다음은 아이콘 디자인에 도움이 되는 서비스와 유틸리티 들에 대해서 알아봅니다.
Font Awesome
Font Awesome은 수백만 명의 디자이너, 개발자 및 콘텐츠 제작자가 사용하는 아이콘 라이브러리 및 툴킷이라고 자신들을 소개합니다.. Font Awesome은 아이콘 라이브러리를 사용할 수 있는 유료 아이콘 플랫폼입니다. 구독 형태로 결제를 하면 16,000개의 아이콘을 사용할 수 있습니다. 제가 알고 있는 아이콘 라이브러리 중 가장 많은 수를 가지고 있습니다.
무료로도 사용할 수 있습니다. 다만 아이콘의 수는 약 1,700개까지 만 제한됩니다.
수많은 아이콘이 있는 만큼 68개의 카테고리로 분류되어 있습니다. 캠핑 아이콘, 동물 아이콘 등 다양한 카테고리의 아이콘이 있습니다.
캠핑 아이콘, 동물 아이콘 등 다양한 카테고리의 아이콘이 있습니다.아이콘 디자인 시에 어떤 메타포를 사용해야 할지 아이콘의 명칭은 어떻게 해야 할지 등 많은 부분에서 도움을 받은 아이콘 라이브러리입니다.
하지만 전반적으로 아이콘의 형태가 애플과 구글의 아이콘처럼 중립적이기보다는 귀여운 느낌입니다. 엔터프라이즈 서비스나 타깃 고객에 따라 사용하기 어려운 측면이 있습니다.
Basic icons
이틀 전에 알게 된 사이트입니다. 16, 24, 32픽셀의 3가지 아이콘과 1, 1.5, 2픽셀의 3가지 Stroke 두께를 지원합니다. 가장 기본적인 아이콘이 어떤 건지 판단하는 용도와 최근 아이콘이 최소 3가지의 두께로 디자인된다는 걸 파악하시면 되겠습니다.
이번엔 주요 앱이나 회사에서 아이콘 디자인 개선 도는 제작기입니다.
Spotify Icon System
Spotify는 2022년에 아이콘 디자인을 개선했습니다. 기존 아이콘이 너무 가늘어서 가독성이 많이 떨어졌고 Spotify가 성장하면서 다양한 추가 아이콘이 생겼지만 파편화됐습니다.
이런 문제를 해결하기 위해 Icon System을 2016년에 개선한 아이콘을 다시 개선했습니다.
24픽셀 그리드에 2픽셀 stroke으로 디자인되었습니다.
크기는 16픽셀, 24픽셀 두 가지로 디자인되었습니다.
디자인 개선 글입니다.
https://spotify.design/article/refreshing-our-icon-system-the-why-and-how-behind-the-changes
아이콘을 디자인한 Rob Bartlett의 포트폴리오 사이트입니다. 2016년에도 Spotify 아이콘을 디자인하고 2022년에도 디자인했습니다.
https://www.robbartlett.design/index.html
참고 자료를 통해 본 아이콘 트렌드
이 글을 쓰기 위해 주요 플랫폼과 앱의 아이콘 라이브러리를 다시 둘러보게 됐습니다. 그러면서 아이콘 디자인의 큰 트렌드가 나타났는데요.
아이콘의 다양한 크기와 스타일
아이콘의 가독성과 명확성을 위해 다양한 크기를 지원하기 시작했습니다.
애플, 구글, 마이크로소프트의 Fluent System Icons 등 이 24픽셀 다양한 크기를 지원하기 시작했습니다.
애플이 3가지 크기를 마이크로소프트가 최대 4가지 크기를 지원합니다.
16픽셀 크기에서는 너무 작아 아이콘의 의미 전달이 어려워 24 픽셀보다 더 단순화된 아이콘을 디자인해서 사용하기도 했습니다. 아이콘을 사용하는 위치에 최적화된 크기에 맞춰 디자인되고 있습니다.
다양한 무게(Weight) 지원
애플을 시작으로 스트로크의 두께가 다양해지면서 헬베티카 같은 패밀리 폰트의 다양한 무게 지원과 같이 다양한 두께를 지원하는 아이콘이 많아졌습니다.
우버는 전용 서체 동일하게 3가지 무게의 아이콘 세트를 디자인했습니다.타이포그래피와 통합
브랜드의 전용 폰트가 있는 회사는 전용서체와 디자인을 통합하여 아이콘의 브랜드 요소의 범위가 넓어졌습니다. 애플, IBM, Uber 등은 전용 폰트의 형태적인 개성을 아이콘의 형태에 반영하여 디자인하고 있습니다.
우버의 전용 서체의 형태를 모티브로 아이콘을 디자인아이콘의 수가 많아짐
예전보다 아이콘의 수가 많아졌습니다. 애플이 4,000개 안드로이드가 2,500개 등 아이콘의 수가 이전보다 많아졌습니다. 그만큼 인터페이스에 사용하는 영역이 많아지고 있는 거 같습니다.
GSSHOP도 약 400개의 아이콘을 디자인했고 지금도 추가 중입니다.Outline 아이콘이 기본(Regular) 스타일 되는 추세
처음 아이콘을 디자인할 때 라인 형태의 Outline이나 면 형태의 솔리드(Fillfed) 중 하나의 스타일을 정해서 디자인했지만 현재는 아우트라인을 기본으로 디자인하고 솔리드(Filled)를 같이 디자인하는 흐름입니다.
처음은 Solid 스타일로 디자인했다가 Outline을 기본으로 정한 Material Icon
Fluent icon 가이드에서 Outline 아이콘을 Regular theme로 지정 Fluent icon 가이드에서 Outline 아이콘을 Regular theme로 지정했고 솔리드(Solid)는 Filled로 명칭을 정했습니다.
오픈소스 아이콘 라이브러리
Iconsax
Vuesax framework의 아이콘 라이브러리입니다. 1,000개의 아이콘을 6개 스타일로 제공합니다. 피그마, XD, Sketch, CSS, Flutter, SVG, AI, Icon Jar 8가지 종류의 포맷을 다운로드할 수 있습니다.
Feathericons
Remix Icon
Magicoon
1,200개의 아이콘을 4가지 스타일로 제공합니다. 무료는 360개까지 제공하고 그 이상은 유료입니다.
25개의 카테고리로 분류했는데 아이콘 분류기준을 파악할 때 참고가 되겠네요.
360개 아이콘 라이브러리는 피그마 파일로 받을 수 있습니다.
https://www.figma.com/community/file/1017217801378797988
Heroicons
24픽셀 그리드의 Outline과 Solid 두 가지 스타일에 20픽셀 그리드 타입도 제공합니다. 아이콘 수는 292개입니다. 피그마 파일도 제공합니다.
https://www.figma.com/community/file/1143911270904274171
Coolicons
410개의 아이콘을 제공합니다. 피그마 파일도 공유됐습니다.
https://www.figma.com/file/b4hqVEI6rPLC73QPdL3IxI/coolicons?node-id=17102%3A2265
Majesticons
720개의 아이콘을 제공합니다.
피그마 파일도 있습니다
https://www.figma.com/community/file/937658831428627854
Iconly 2.5
725개의 아이콘과 5가지 스타일(Light, Bold, Bulk, Two-tone, Broken)을 제공합니다. 현제 피그마 파일로 공유됩니다.
https://www.figma.com/community/file/876509330914541878
——————
내용을 계속 추가할 예정입니다.
다음글은 실무에서 사용가는한 아이콘 디자인에 대해 다룹니다.
참고
https://www.instagram.com/p/CiP3MPcjftB/
