모바일 UI 디자인 기본 요소 - 아이콘 1
UI에서 그림 문자
아이콘은 모바일 사용자 인터페이스(GUI)의 핵심 개념 중 하나이다.
아이콘은 명령(Action), 상태(State), 특정 기능과 정보를 상징적으로 단순하게 시각화하여 디자인된 그래픽 요소이다. 사용자는 아이콘을 보고 사전에 알지 못한 기능이나 명령을 직관적으로 이해하고 상호작용할 수 있다.
잘 디자인된 아이콘은 핵심적인 내용과 기능, 명령 Action의 의도를 사용자에게 직관적으로 전달(커뮤니케이션) 한다. 아이콘은 사용자가 의미를 생각하는데 시간이 걸리지 않도록 적절한 메타포를 사용하여 명확하고 직관적으로 디자인해야 한다. 또한 사용자의 인지 부하를 줄이기 위해 제품의 UI 전체에서 세심하게 사용해야 한다.
아이콘은 사용성 측면뿐만 아니라 시각적으로 모바일 웹/앱의 가장 일차적이고 우선되는 브랜드 아이덴티티 요소 중 하나이다. 아이콘은 기능적인 부분뿐만 아니라 시각적인 부분에서는 브랜드 아이덴티티를 표현하는 그래픽 요소 이기도하다. 아이콘은 브랜드를 반영하고 심미적인 만족감을 제공한다.
아이콘 사용의 역사
사용자 인터페이스에서 아이콘의 사용은 이전의 컴퓨터 OS 보다 쉽고 직관적인 조작 방식의 GUI의 핵심 개념의 하나로 적용됐다.
UI는 크게 두 가지로 나뉜다. 사용자가 명령을 키보드로 직접 입력하는 CLI(Command-line Interface) 또는 CUI(Character User Interface)와 입출력 등의 기능을 알기 쉽게 아이콘과 그래픽으로 디자인한 GUI(graphical user interface)가 있다. UNIX 콘솔이나 MS Dos 시리즈가 CLI의 대표적인 예이다. CLI는 사용자가 명령을 직접 키보드로 입력해야 하고 명령어도 사용자가 기억하고 있어야 한다. 따라서 학습하고 사용하기 어려웠다.
이에 비해 GUI는 추상적인 명령들을 메타포를 통해 그래픽으로 표현하고 명령어 입력 없이 마우스나 키보드로 직접 조작할 수 있다.
최초의 GUI는 제록스에서 개발했다. 1981년에 제록스 팰로앨토 연구소( Palo Alto Research Cente - PARC)에서 개발한 GUI 형태의 OS를 탑재한 최초의 컴퓨터인 제록스 스타(Xerox Star)가 등장하게 된다. 스타 워크스테이션으로 선보인 GUI 개념은 다음과 같다.
Copy & Paste
Drag & Drop
Icon
Undo
Window
WYSIWYG
마우스
여기서 마우스와 조작 Control 개념을 빼면 Icon은 GUI에서 그래픽 부분을 담당하는 가장 중요한 개념이다.
데이터를 삭제하는 명령을 종이문서를 휴지통에 버리는 실 세계의 행동 개념(메타포)을 가져와서 가상의 컴퓨터 환경에 아이콘으로 표현함으로써 사용자는 추상적인 명령을 이해할 수 있다.
최초의 아이콘은 제록스 스타(Xerox Star) 8010 개발 당시 데이비드 스미스 (David Smith)가 개념 정립과 기초적인 디자인을 하고 노엄 콕스 (Norm Cox)가 완성했다. 이 아이콘은 현재 Icon Design의 모든 토대를 유지하고 있다.
노엄 콕스 (Norm Cox)가 디자인한 제록스 스타(Xerox Star) 8010 아이콘(1981)
GUI는 이전의 CLI에 비해 학습이 용이하고 사용하기 쉽다. 컴퓨터를 처음 사용하는 사용자도 실생활에서 경험한 파일이나 윈도 개념을 통해 GUI를 CLI에 비하면 훨씬 쉽게 사용할 수 있었다.
수잔 케어(Susan Kare)가 1983년에 디자인한 애플의 맥 OS의 아이콘 디자인이후 애플 컴퓨터에서 GUI 기반의 맥 OS를 연구하였다. 1984년 매킨토시의 등장으로 애플은 GUI의 확립에 성공했다. 1995년 마이크로소프트사가 윈도 95를 출시하여 성공을 거둠으로써 본격적인 그래픽 사용자 인터페이스의 대중화를 이루었다. GUI가 대중화됨으로써 아이콘은 대부분의 디지털 기기에 사용되었다. 컴퓨터뿐만 아니라 스마트폰과 같은 많은 기기가 GUI를 도입했다. - 현재 사용자 인터페이스 UI는 곧 GUI이다. iOS, 안드로이드 등 모바일 OS도 모두 GUI이다.
아이콘의 장점 - 아이콘을 사용하는 이유
컴퓨터에서 일반적으로 키보드 명령어를 기억하는 것보다 아이콘을 인지하는 것이 훨씬 쉽다. 아이콘은 인터페이스에 있는 아이템에 직접 접근할 수 있도록 한다. 사람들은 폴더를 보고 연 다음, 그 내용물을 확인할 수 있다. 또는 많은 파일 이름들을 기억하고 파일을 찾기 위한 목록을 사용하기보다 아이콘들을 그룹화하여 간단히 조직화할 수 있다. 따라서 아이콘의 사용은 인터페이스의 명확함과 미학적 완전함에 크기 기여한다.
닐슨 노먼 그룹의 “[Icon Usability]” 글에 따르면 아이콘을 모바일 UI에 사용하면 다음과 같은 이점이 있다.
아이콘은 좋은 터치 타깃이 된다.
아이콘의 형태는 일단 텍스트에 비해 영역을 많이 차지하지 않아 적절한 크기로 디자인된다면 터치스크린에서 사용자가 쉽게 터치 가능한 영역을 제공할 수 있다.
화면의 공간 절약
아이콘은 동일한 개념을 묘사하는 텍스트보다 공간을 덜 차지한다. 모바일 화면은 다른 디바이스에 비해 화면의 크기 제약이 심하다. 아이콘은 내비게이션 바, 툴바 같은 작은 영역에 많은 명령 Action을 표시할 수 있다.
빠른 인식
아이콘은 잘 디자인될 경우 빠르게 인식할 수 있다. 검색 아이콘처럼 사람들이 이전에 보고 사용했던 표준 아이콘의 경우 특히 그렇다.
심미적인 만족
아이콘은 시각적으로 만족스러울 수 있으며 디자인의 미적 매력을 향상한다.
브랜드 반영
동일한 스타일의 아이콘이 일관되게 앱(Product) 전체에 사용되는 경우 브랜드 아이덴티티를 반영할 수 있다.
국제적인 언어
아이콘은 언어가 다르더라도 인식된다. 올림픽의 경기 픽토그램과 같이 텍스트로 그 종목의 이름을 명시하지 않아도 종목을 여러 나라 사람들이 이해할 수 있듯이 편지봉투 모양의 이메일 아이콘은 국제적으로 통용되는 아이콘이다.
정리하자면 아이콘은 공간을 효율적으로 사용할 수 있고 - 화면이 작은 모바일일 경우 더욱 그렇다. - 사용자가 빠르게 인지할 수 있으며 브랜드 아이덴티티를 반영한다. 아이콘의 적절하고 세심한 사용은 사용자 경험을 향상한다.
아이콘의 기능과 종류
UI에서 아이콘은 시스템에서 다양한 용도로 사용된다. 아이콘은 크게 앱을 나타내는 앱 아이콘, 대상을 표현하는 일러스트 아이콘, UI 요소로서의 시스템 아이콘으로 분류될 수 있다. 앞서 두 아이콘은 UI 보다는 그래픽과 브랜딩 부분이 더 중요하다. 이 글은 비주얼 디자인이나 그래픽 또는 브랜딩보다는 UI에 집중하므로 안드로이드와 iOS에서 시스템 아이콘 이러고 부르는 UI와 관련된 아이콘 만을 다룬다.
명령 action의 실행
사용자가 할 수 있는 가장 중요한 작업들을 표시하는 그래픽 컨트롤에 사용하는 아이콘이다. 각 아이콘은 사용자가 한눈에 알아볼 수 있는 기능의 의미를 담고 있으며 일반적으로 웹에서는 검색, 쓰기, 추가, 삭제 등에 사용되며 레이블과 같이 사용하는 경우가 많다. 동영상 플레이어의 play버튼, stop버튼 둥이 대표적이다. 카메라 앱 등 에서 툴바에 사용된다.
Tool Bar의 아이콘은 버튼과 같이 즉각적인 명령 Action의 실행에 사용된다.내비게이션
우리는 공항이나 지하철역에서 화살표 픽토그램을 보고 가고자 하는 장소를 향해 이동한다. 모바일에서도 페이지 이동과 관련된 내비게이션에 화살표와 같은 아이콘을 사용한다. 홈 아이콘이나 내비게이션 바 왼쪽에 이전 버튼(Back Button)같이 페이지 이동을 위한 내비게이션 기능을 표시하는 아이콘이다. iOS의 텝바(안드로이드의 bottom bar)에서 레이블과 함께 사용된다.
사용자는 화살표 형태의 아이콘을 보자마자 뒤로 가기를 떠올린다.
Tab Bar와 Bottom Navigation의 아이콘은 내비게이션 기능을 한다.상태, 콘텍스트
특정 항목의 또는 사용자의 작업 결과의 상태를 나타내기 위해 사용하는 아이콘이다. 애러 표시나 완료를 나타낼 때도 사용한다. 애러 메시지같이 사용자가 알아야 할 정보를 제공하는 목적으로 사용하는 아이콘이다. 이런 아이콘을 보고 사용자가 작업을 성공했는지 실패했는지 알 수 있다. 보통 상태 컬러와 함께 사용된다. 즉 오류 메시지의 경우 오류를 나타내는 붉은색과 함께 사용된다.
프로세스 진행
이 아이콘은 회원 가입, 결재, 배송 상태 같이 프로세스 진행 단계를 사용자에게 인지시킬 목적으로 사용되는 아이콘이다. 주로 32픽셀보다 크게 사용하며 링크나 액션 실행은 되지 않는다.
상징과 지시
특정 서비스나 혜택 등을 지시하거나 상품의 카테고리, 고객센터나 개인정보 같은 정보의 묶음을 표현하는 데 사용하는 아이콘이다. 클릭이 가능할 때도 있고 분류를 표현하기 위해 사용할 경우 분류 정보 레이블과 같이 사용된다.
아이콘에 관한 글을 쓰다가 분량이 너무 많아져서 나눠서 작성할 예정입니다 다양한 예제와 가이드를 준비해 2편으로 찾아뵙겠습니다
참고 자료
http://iconutopia.com/files/Icon-Design-Guide-by-IconUtopia.pdf
책
정보디자인 교과서. p204
