brunch

라이킷 15 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김예린 Sep 13. 2023

아이콘그래피의 기초

정의, 목적 및 이점

*다음 아티클을 번역한 내용입니다.

아이콘은 개별 개체, 동작 또는 아이디어를 나타내는 간결한 기호입니다. 아이콘은 한눈에 읽을 수 있도록 고안되었으며 일반적으로 정사각형(1:1) 캔버스에 생성됩니다.

목적: 은유를 통한 의미 전달

아이콘은 우리가 이미 이해하고 있는 것의 '속성'을 전달함으로써 이해 속도를 높이기 위해 시각적 은유를 사용합니다.

어떤 경우에는 은유가 문자 그대로입니다. 머티리얼의 알람 아이콘은 벨이 있는 고전적인 기계식 알람 시계를 표시하며, 우리가 기대하는 기능을 그대로를 수행합니다. 즉, 우리를 제시간에 깨우기 위해 벨이 울립니다.

Unsplash 및 Material Design Icons 의 알람 시계

때로는 은유가 약간 구식이지만 반복 사용을 통해 이해할 수 있습니다. 개인용 컴퓨팅 초기에는 플로피 디스크가 파일을 얇은 정사각형 모양의 디스크에 저장했습니다. 전체 용량은 1.44MB였습니다! 이 디스크를 더 이상 사용하지 않지만 여전히 플로피 디스크 아이콘을 사용하여 저장 작업을 나타냅니다.

Unsplash 및 Material Design Icons 의 플로피 디스크

다른 경우에는 은유가 좀 더 추상적입니다. 셔플 아이콘과 새로고침 아이콘은 화살표의 움직임을 통해 그 의미를 전달합니다. 의미는 순서를 바꾸거나, 작업을 다시 수행하는 것입니다.

원래의 지시 대상이 손실된 경우도 있습니다. Command 아이콘을 사용하면 Mac 키보드에서 단축키에 접근할 수 있습니다. 은유는 순조롭게 명확하지는 않습니다. 무엇을 참조할 수 있는 걸까요?

이 기호는 다른 많은 이름(프레첼, 세인트 존스 암즈, 보웬 매듭, 진정한 연인 매듭)으로 알려져 있으며 북유럽 국가에서는 관심 장소를 표시하는 데 사용됩니다. 추측컨대 기원은 성의 포탑일 수 있습니다.

Borgholm Castle (출처: Castle Ruins, Borgholm, Oland, 스웨덴 )

이점: 강력한 도구

아이콘은 대중교통, 대시보드, 가전제품, 디지털 애플리케이션 등 어디에서나 찾을 수 있습니다. 아이콘은:

탐색을 도와줍니다.

경고 신호를 표시합니다.

행동을 유도하는 액션을 합니다.

상태를 표시합니다.

아이콘은 특정 언어에 의존하지 않는다는 점에서 보편적입니다.

1. 길 찾기

아이콘은 물리적 및 디지털 공간에서 길을 찾는 데 도움이 됩니다.

출처: Makebardo의 퀸스타운 공항

아이콘은 우리를 출발 게이트나 화장실로 안내합니다. 메뉴 항목을 빠르게 스캔하는 데 도움이 됩니다. 내용을 강조하고 명확하게 하며, 인터페이스로 돌아올 때 요소를 기억하는 데 도움이 됩니다.

출처: Start menu vs. Start screen

아이콘이 없는 Windows 95 시작 메뉴는 훨씬 더 많은 내용을 읽어야 합니다.

2. 경고 신호

도로에서는 아이콘이 보행자, 사슴, 건설, 비포장 구간 등 전방의 위험을 알려주고 경고합니다.

출처: Fabien Bazanegue의 네바다 도로 표지판

3. 행동을 유도하는 액션

버튼으로 사용될 때 아이콘은 작업을 수행합니다. 소프트웨어의 일반적인 아이콘 버튼에는 검색용 돋보기나 녹음용 마이크가 포함됩니다.

Dropbox Android 앱의 아이콘 버튼

4. 상태 표시

베리언츠를 사용하면 아이콘은 두 가지 상태(예: 켜짐/꺼짐) 또는 범위 상태(예: 볼륨 레벨 혹은 배터리 충전)를 표시하는 데 효과적입니다. 이 아이콘 쌍은 가시성 켜짐 및 꺼짐을 표시합니다. 비밀번호 필드와 레이어 목록에서 자주 볼 수 있습니다.

Material Design Icons 의 가시성 아이콘

아이콘은 복합적인 상태를 나타낼 수도 있습니다. 이러한 배터리 아이콘 상태는 기기가 충전 중인지 여부와 배터리가 얼마나 충전되었는지를 보여줍니다.

운영 체제(OS)는 시스템 수준 상태 표시기를 수용하기 위해 상태 표시줄을 전용으로 사용하는 경우가 많습니다.

안드로이드 상태 표시줄

5. 목소리 톤 표현

아이콘은 기능적인 목적 외에도 감성적인 목적, 톤을 전달하고 브랜드를 표현하는 역할도 합니다. 2019년 리브랜딩 된 Firefox의 아이콘은 대담하고 생생하며 낙관적입니다.

출처: Firefox Brand Evolution(Ramotion 사례 연구)

Google Material의 단순하고 장식이 없는 스타일은 브랜드의 실용적인 특성을 전달합니다.

출처: Material Icons

주의할 점: 맥락이 핵심입니다.

아이콘은 맥락을 통해 명확성과 의미를 얻습니다. 아이콘이 배치되는 방법과 위치는 아이콘의 효과에 영향을 미칩니다.

명확성에 영향을 주는 레이아웃

인터페이스 내에서 아이콘 배열은 인터페이스를 더 명확하게 만들 수도 있고 더 혼란스럽게 만들 수도 있습니다. 다른 요소는 무엇을 고려하고 있나요? 아이콘이 중요한 콘텐츠에 대한 시선을 적절하게 유도합니까, 아니면 다른 시각적 요소와 경쟁합니까?

삼성 세탁기 인터페이스 (출처: Samsung WF0500NXW 사용 설명서 )

아이콘이 너무 많으면 보는 사람을 압도할 수 있습니다. 몇 년 전 저는 이 세탁기 인터페이스를 접했는데, 그 비유에 익숙하지 않고 그 비유가 너무 많아서 기능을 이해하는 데 정말로 어려움을 겪었습니다. 텍스트 라벨은 엄청난 도움이 되었을 것입니다. 번역기를 통해 실행해야 하더라도 말이죠.

정렬만큼 간단한 것도 아이콘 작동 방식에 영향을 미칠 수 있습니다. 에어비앤비의 프로필 탭에서 아이콘은 오른쪽에 정렬되어 있고 아이콘이 나타내는 텍스트 라벨은 왼쪽에 정렬되어 있습니다. 이렇게 분리된 배치는 보는 사람이 두 요소를 연결하기 위해 앞뒤로 스캔해야 하는 작업을 더 많이 만듭니다.

과거 에어비앤비 프로필 탭

의미에 영향을 주는 문화

문화적 맥락은 아이콘의 의미를 변화시킵니다. 북유럽 도로 표지판의 프레첼은 관심 장소를 의미합니다. 애플 키보드의 동일한 아이콘은 명령 키를 의미합니다.

출처: 5 Iceland Road Signs to Know Before You Go and Apple keyboard

눈 아이콘은 다양한 의미와 함축을 담고 있습니다. 비밀번호 필드의 맥락에서 "가시성 켜기 및 끄기 전환"이라고 표시됩니다. 손바닥 안에 자리 잡으면 중동과 북아프리카에서 인기 있는 보호 부적인 함사(hamsa)가 생성됩니다. 목록은 계속됩니다: 원으로 둘러싸인 눈은 CBS 마크를 만들고, IBM은 rebus에서 눈을 장난스럽게 사용하며 호루스의 눈은 또 다른 보호 상징입니다. 이 모든 것이 아이콘으로 분류되는 것은 아니지만 상징의 깊이를 보여줍니다. 본능적으로 눈은 단순히 소름 끼치는 느낌을 받거나 누군가가 지켜보고 있다는 느낌을 줄 수 있습니다.