brunch

매거진 UX와 UI 제대로 소화시키기

라이킷 194 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 헤이민 HEYMIN Apr 13. 2020

[번역] 아이콘 디자인을 위한 7가지 원칙

명확성, 가독성, 정렬성, 간결성, 일관성, 특이성, 용이성

정말 오랜만이죠? 마지막 번역 이후로 꽤 오랜 시간이 지났네요. 그동안 제 브런치에 다녀간 모든 분들에게 고마움을 전합니다.

이번 글의 주제는 '아이콘'입니다. 처음 아이콘 디자인을 배울 때 통일성이나 규칙성 등 중요한 몇 가지 속성에 대해 배웠는데, 막상 주변을 돌아보니 불규칙하고 난해한 아이콘들이 상당히 많았습니다. 그래서 여러분과 함께 그 중요성을 다시 한번 되새기고자 이 글을 고르게 되었습니다.

오늘도 저의 글이 여러분 일상의 소소하고 유익한 찰나이기를 바래봅니다. 그럼 즐독 하세요!

아이콘 디자인을 위한

7가지 원칙

[원문] 7 Principles of Icon Design

좋은 퀄리티의 아이콘 세트를 만드는 일은 신중한 고민과 훈련된 눈 그리고 수많은 반복과 연습이 따릅니다. 이제부터 7가지 원칙과 실제 사례들을 보면서 퀄리티를 결정짓는 요소들에 대해 이야기하고자 합니다. 여러분은 좋은 아이콘 디자인을 위한 주요 속성들을 얻어가면 됩니다.

1 Clarity 명확성

아이콘의 중요한 목적은 컨셉을 빠르게 표현하는 것입니다.

토요타 '프리우스 프라임' 계기판의 아이콘들 (출처 : 2020 매뉴얼)

이러한 심볼 그룹으로부터 명확하게 느껴지는 것은 무엇인가요? 운전자들은 금세 알아차리겠지만 몇 개의 아이콘은 당신이 의미를 파악할 수 있는 매뉴얼이 필요해 보입니다.

아래에는 이 심볼들이 어떻게 쌓이는지를 보여줍니다.

아이콘에 익숙하지 않은 메타포(은유)를 적용하면 알아보기가 어려워집니다. “안전벨트 알림표시등"(왼쪽에서 3번째)은 문자 그대로를 나타내고 있기 때문에 의미를 빠르게 캐치할 수 있지만 “파워 스티어링 시스템 경고등"(가장 오른쪽)은 알아보는 게 훨씬 어렵습니다.

지금까지 본 아이콘 중에 가장 명확하지 않았던 건 VSCO라는 사진 앱에 있습니다. 여러분은 이 아이콘들이 무엇을 의미하는지 짐작이 되나요?

VSCO 앱의 아이콘들

이 내비게이션 아이콘들은 왼쪽부터 오른쪽으로 '피드, 검색, 촬영, 프로필, 친구목록'을 나타냅니다. VSCO앱을 위한 혼돈비용은 아이콘을 조금만 탭하면 각자의 의미를 파악할 수 있어서 적은 편이지만, 운전을 위한 혼돈비용은 이보다 훨씬 어마어마합니다.

추상적인 것도 오랜 기간 반복된 사용을 거치면 익숙해질 수 있습니다. 자동차 기호들이 익숙해질 수 있었던 것도 이러한 이유 때문이며 목적은 모두가 공유하는 의미를 설정하는 것입니다. 1984년, 수잔 카레(Susan Kare)는 애플 키보드의 '기능(feature)' 키를 디자인하게 되었습니다. 그녀는 추상적인 기호를 디자인했는데, 그것은 북유럽의 흥미로운 장소에서도 찾을 수 있는 기호입니다.

'Command' 아이콘

이 커맨드 아이콘은 우리가 애플 키보드에서 커맨드키라고 부르는 기본적인 아이콘이 되었습니다. 수잔 카레가 들려주는 그녀의 놀라운 작업이야기를 들어보세요.(클릭하면 링크로 이동합니다.)

수잔 카레가 아이콘을 만들 수 있었던 건, 기존에 존재하는 어떠한 기준이 없었기 때문입니다. 아이콘을 디자인할 때는 설정아이콘을 위한 톱니바퀴 모양처럼 기존에 존재하는 메타포(은유)가 있는지를 고려하거나 바퀴를 사용하는 것이 적절한지도 고민해봐야 합니다.

아래에는 사랑/관심, 경고, 음악, 위/아래 방향을 나타내는 좀 더 익숙한 아이콘들이 있습니다.

'Phosphor Carbon 아이콘팩'의 친숙한 메타포

화살표는 단순하지만 길을 찾을 때만큼은 확실한 기호입니다.

NYC 지하철 표지판 ( 출처: NYC Transit Authority 그래픽 표준 매뉴얼 원본 캡쳐)

아이콘 디자인이 가장 효과적일 땐, 어느 한 그룹의 사람들만 이해하기 쉬울 뿐 아니라 문화, 연령, 환경을 넘어서까지 보편적이라고 느껴집니다. 보는 이들을 고려하여 그들이 이해할 수 있는 메타포와 컬러를 사용해야 합니다.

표현하려는 아이디어가 너무 추상적인 경우, 독립적으로 아이콘만 있는 것은 좋은 해결책이 아닐 수도 있습니다. 이런 경우에는 아이콘을 텍스트와 함께 사용하거나 다른 대안을 찾도록 합니다.

2 Readability 가독성

이제 당신이 기호에 대해 이해했다면, 그것을 읽기 가능하도록 만들어야 합니다.

모바일앱 ‘Amtrak’의 아이콘들

첫 줄에 있는 Amtrak 앱의 ‘역’ 아이콘은 알아보기가 너무 어렵습니다. 디테일이 너무 과하기 때문입니다.

대중교통 앱도 비슷한 이슈를 가지고 있습니다. 아래 클립 보드 아이콘을 보면 클립과 보드 사이의 공간이 너무 좁아서 얼룩처럼 느껴집니다.

모바일앱 Transit의 아이콘들

여기서 조금만 조정해도 크게 개선이 가능합니다.

조정된 클립보드 아이콘

여러 가지 모양을 작업할 때는 그 사이에 충분한 공간을 두어야 합니다. 선이 얇을수록 아이콘은 읽기가 더 어렵고 혼란스러워집니다.

구글맵은 아주 작은 사이즈에서도 잘 읽을 수 있도록 훌륭하게 변화시켰습니다.

구글맵의 아이콘들

3 Alignment 정렬성

각각의 아이콘이 균형을 이루는 것처럼 보이려면 '정렬'은 필수적인 요소입니다.

조정하기 전의 재생아이콘

이 플레이 아이콘을 보면 삼각형이 원의 정가운데에 있지만 우리 눈은 그렇지 않다고 느낍니다. 잘 보면 삼각형의 넓은 변 부분(왼)이 꼭짓점 부분(오) 보다 무거운 느낌이 들고 왼쪽으로 치우친 것처럼 보입니다.

타이포그래퍼는 서체에서 균형적으로 보이는 착시현상을 만들고자 미세한 조정을 합니다.(아래 이미지에서 "i"와 "j"의 중심에서 벗어난 점의 위치와 "O"의 넘어간 부분을 참고하세요.)

아이콘그래퍼들도 아이콘의 균형을 위해 이러한 조정과정을 거칩니다. 위의 예제를 수정하기 위해 요소들을 조금만 밀어보도록 하겠습니다.

조정한 후의 아이콘

이제 훨씬 보기 좋아졌습니다. (변 쪽의 여백보다 꼭짓점 쪽의 여백 너비가 더 좁아졌습니다. y>z )

여기서 배울 점은 숫자를 무조건 믿지 말자는 것입니다. 작업물을 체크하기 위해 눈으로 바라보도록 합니다.

4 Brevity 간결성

몇 마디로 잘 표현된 아이디어는 효과적이고 우아하게 느껴집니다. 아래 글을 읽어보세요.

당신이 아는 것을 가르치는 일은, 그 주제에 대한 당신의 이해도 강화시킨다.

이 말은 더 간결하게 말하면, (Robert Heinlei가 말하기를)

한 사람을 가르칠 때, 배우는 건 두 사람이다.

정말 멋진 표현이지 않나요?

머티리얼 디자인은 '시스템 아이콘'을 통해 그들의 간결성을 잘 보여주고 있습니다. 설명 대신 그림을 보면,

복작한 배 아이콘 (출처: 매터리얼 디자인)

이걸 간단하게 표현하면,

간결한 배 아이콘 (출처: 매터리얼 디자인)

우리는 작은 캔버스 위에 작업을 하기 때문에 간결한 아이콘 디자인이 필요합니다. 아이콘을 그릴 때 디테일은 적당히 주고 필요 이상으로 사용해서는 안됩니다.

제한된(간결한) 스타일은 사용자 인터페이스에서 요점만 보여주고 콘텐츠의 방향을 잡아줍니다. '텔레그램'의 아이콘이 좋은 예라고 할 수 있습니다.

텔레그램의 아이콘들

경우에 따라 어떤 UI 아이콘은 일러스트 스타일을 더 녹여내기도 합니다. 다양한 톤을 쓴 'Yelp'의 아이콘은 인기 있는 음식 검색을 나타내는 재치 있는 방법입니다. 태국음식 안에 있는 쉬림프는 정말 정교합니다.

Yelp 아이콘들 by Scott Tusk (출처 : https://www.instagram.com/p/BcaNQpNHNWe/)

모바일, 태블릿, 데스크탑 애플리케이션을 나타내는 앱 아이콘에서 디테일한 묘사가 들어가면 깊이와 컬러가 더해집니다. 사용자들은 모바일 홈 화면, 독, 앱스토어에서 자신의 환경을 이해하기 때문에 앱아이콘이 브랜드와 제품을 더 드러낼 수 있습니다.

5 Consistency 일관성

아이콘 세트가 조화를 이루기 위해서는 전체를 통하는 스타일 규칙이 있어야 합니다.

iOS 13이 나오기 전에 애플의 아이콘은 모두 굵은 선을 쓰고 속이 채워진 형태였습니다.

iOS 13 이전의 애플 홈화면 빠른실행 아이콘들

어떤 아이콘이든 시각적인 무게를 가지는데, 속이 채워졌는지, 선의 두께가 어느 정도인지, 사이즈와 모양은 어떤지에 따라 그 무게가 결정됩니다. 이러한 기준을 동일하게 적용해야 일관성을 유지할 수 있습니다.

Apple은 최근 San Francisco의 한 구성인 SF Symbols를 발표하면서 강의를 수정했습니다. SF Symbols는 그래픽 스타일이 더 가미된 아이콘으로 9단계의 두께와 3단계의 스케일로 구성되어 있습니다. (조금은 복잡하지만 충분히 고민한 듯합니다.) 아이콘과 아이콘 사이, 필과 아웃라인의 변형에서 훨씬 더 조화로워진 것이 느껴집니다.

애플의 SF Symbols 아이콘들

많은 양의 아이콘 패밀리 안에서 일관성을 유지하는 것은 쉽지 않습니다. 특히 여러 명의 디자이너가 함께하는 경우 더 어렵습니다. 따를 수 있거나 응용할 수 있는 명확한 원칙과 규칙을 갖는 것이 중요합니다.

Phosphor 아이콘 팩은 같은 기본 가이드라인을 준수하고 각 아이콘을 엄격하게 테스트하여 700개 이상의 아이콘을 일관되게 유지합니다. 각각의 모양은 다르지만 같은 무게감을 가지고 서로 잘 어울립니다.

'Phosphor Carbon' 아이콘 패밀리의 일부

6 Personality 특이성

모든 아이콘 세트에는 분위기가 있습니다. 어떤 점이 독특하게 느껴지나요? 브랜드에 대해 어떻게 전달하고 있나요? 그 분위기는 어떻습니까?

Waze 아이콘들

Waze의 사랑받는 인터페이스는 아이콘에 크게 의존합니다. 이 화려하고 둥글둥글한 아이콘은“우리는 남달라!”라고 말하고 있습니다.

Twitter의 아이콘은 부드럽고 가볍고 선명합니다.

Twitter 아이콘들

Sketch의 아이콘은 섬세하고 산뜻합니다.

Sketch 아이콘들 by Janik Banumgartner

Freemojis의 아이콘은 귀엽고 사랑스럽습니다.

Freemojis from Steamline

Android 아이콘 팩은 홈 화면 테마를 위한 다양한 분위기를 제공합니다. 아래에는 추상적인 스타일, 픽셀스타일, 버블스타일, 네온스타일이 있습니다.

위에서 아래로, 왼쪽에서 오른쪽으로 : iJUK, PixBit, Crayon, Linebit

7 Ease of Use 용이성

아이콘 세트는 완벽하게 그렸다고 해서 끝난 게 아닙니다. 새로운 아이콘을 추가로 제작하기 쉬운지, 디자이너들이 그들의 디자인(스크린, 인쇄물 등)에 사용하기에 쉬운지, 개발자들이 코드로 구현하기에 쉬운지를 알기 위해 더 많은 테스트가 필요합니다.

퀄리티 높은 아이콘 세트는 잘 정리되어 있고, 문서화되어 있고, 상황에 맞게 테스트되어 있습니다. 아이콘 매니저와 같은 커스텀툴을 통해 지원받는 것도 좋습니다.

Organized 정리

최종 파일을 깔끔하게 유지하고, 에셋들의 이름을 잘 정리하고, 찾기 쉽도록 배치합니다. 그리고 알파벳순이나 크기별, 유형별과 같이 분류하기에 가장 적당한 기준을 고려해봅니다.

여러페이지에 유형별로 잘 정리된 'Nucleo'의 스케치 파일

Well-Documented 문서화

아이콘 세트의 주요 원칙을 명확하게 적어두도록 합니다.

[예시] Phosphor 아이콘 세트의 원칙

• 명확성. 명확하게 표현하는 것이 가장 우선입니다.
아이콘을 쉽게 인지하고 읽을 수 있게 만드세요. 아이콘이 나타내야 하는 것을 놓치지 마세요.

• 간결성. 최소한의 디테일을 사용해야 합니다.
Phosphor 스타일은 함축적입니다. 표현하려는 내용의 본질을 전달하기 위해 모든 선을 간결하고 의미 있게 사용하세요.

• 특이성. 기발해야 합니다.
개성 있는 디테일을 더하면 적당한 익숙함을 줄 수 있지만, 그렇지 않으면 투박한 느낌이 들 수도 있습니다.

아래 내용은 기술 규칙에 관한 것입니다.

[예시] Phosphor 아이콘 세트의 기술 규칙

• 48 X 48px 캔버스를 사용하세요.
• 1.5px 두께의 중심선을 사용하세요.
• 형태의 끝을 둥글게 마무리하세요.
• 끊기는 것이 의미전달에 도움되지 않는 한, 연속된 획을 사용하세요.
• 가능한 직선과 원형, 15° 기준의 분할을 사용하세요.
• 설계 원칙을 유지하기 위해 필요한 경우에는 곡선을 사용하세요.
• 되도록 전체 형태, 짝수 중심으로 측정하세요. 필요한 경우 1px이나 0.5px 기준으로 조정하세요.
• 28*28px 원형, 25*25px 정사각형, 28*22px 직사각형, 22*28px 직사각형을 사용하세요.
• 트림영역을 6px 두께로 유지하세요.