5.4 아이콘-최적의 UI 설계 가이드


아이콘은 컴퓨터 시스템 내의 오브젝트, 즉, 파일, 폴더, 애플리케이션, 휴지통 등을 그래픽적으로 표시한 것이다. 이런 오브젝트들은 프로세스나 데이터일 수 있으며, 그 표현은 객체들의 특성, 그들간의 연합 상태를 나타내고 있다.
아이콘의 중요한 특징은 설사 사용자가 사용하려고 하는 아이콘에 익숙하지 않을지라도 사용자에게 이미 익숙한 도식적인 요소들을 이용하여 사용자가 쉽게 시스템에 접근하도록 하는 것이다.
 

아이콘을 사용하는 이유

사 람들은 동일한 사물을 말로 표현하는 것보다 그림으로 표현한 것을 더 빨리 알아보고 이해한다. 예를 들어, 심볼로 된 교통 표지판은 말로만 된 표지판보다 먼 거리에서 알아보기 쉽다. 또한 심볼은 말보다 문화적, 언어적 장벽들을 더 잘 극복할 수 있게 한다.
심볼은 동일한 개념을 묘사하는 말보다 공간을 덜 차지할 수 있다. 하나의 표시에 다양한 언어로 씌어진 단어들을 포함시키는 것보다 그래픽을 사용하는 것이 때로는 훨씬 더 쉽다.
컴퓨터에서 일반적으로 키보드 명령어를 기억하는 것보다 심볼을 인지하는 것이 휠씬 쉽다.
아이콘은 인터페이스에 있는 아이템에 직접 접근할 수 있도록 한다. 사람들은 폴더를 보고 연 다음, 그 내용물을 확인할 수 있다. 또는 많은 파일 이름들을 기억하고 파일을 찾기 위한 목록을 사용하기 보다 아이콘들을 그룹화하여 간단히 조직화할 수 있다. 따라서 아이콘의 사용은 인터페이스의 명확함과 미학적 완전함에 크기 기여한다.
 

아이콘의 분류

아이콘은 컴퓨터 시스템에서 객체(파일, 폴더 등)를 표현하기 위해 사용되는 그림 기호이다. 따라서 이 객체들은 데이터일 수도 있고 프로세스일 수도 있다.
또한 아이콘은 객체의 특징을 명백하게 나타내주거나 그 객체를 인식하는 키로 쓰인다.
일반적으로 아이콘의 분류는 다음과 같다.

모양 객체의 특징으로 형성
객체를 인식하는 키
형태 정적인 형태
동적인 형태
색깔 흑백
칼러

아이콘 인터페이스 설계시 고려사항

 

1) 적절한 메타포의 사용

아이콘은 컴퓨터 시스템의 객체나 프로세스를 표시하는 심볼이기 때문에 적절한 메타포(은유)를 사용해야 한다. 사용자 중심의 디자인 원칙의 메타포에서 설명했듯이 실제 세계에서 문서를 관리하기 위해 폴더를 사용한 것을 컴퓨터 시스템에서도 문서나 파일을 관리하기 위해 폴더를 은유하고, 아이콘 또한 실제 폴더의 이미지와 가깝게 해야 한다.
만약 폴더에 대한 메타포를 아이콘에 표현할 때, 개념은 폴더를 빌어 오고, 아이콘 표시는 문서를 담을 수 있다고 해서 폴더를 깡통 등의 이미지로 표시하면 사용자는 혼란스러워진다.
따라서 컴퓨터 시스템의 아이콘을 디자인할 때는 해당되는 적절한 메타포를 사용하고 이미지 또한 그에 맞는 것으로 표현하는 것이 좋다.
 

2) 일관적인 광원 사용

매킨토시나 윈도우의 광원은 항상 스크린의 좌측상단에서 온다. 데스크탑의 윈도우나 버튼 등의 인터페이스 요소들을 자세히 보면 오른쪽 아래에 그림자가 있는 것을 볼 수 있는데, 이는 모두 같은 광원에 대해 처리가 되어 있는 것이다.
따라서 아이콘을 디자인할 때도 이러한 광원을 고려해야 한다. 윈도우는 오른쪽 아래에 그림자가 있는데, 윈도우 안의 아이콘은 왼쪽 아래에 그림자가 있다면 광원에 있어 일관성이 떨어져 사용자는 부자연스러움을 느끼게 될 것이다.
소프트웨어 전시회나 웹사이트를 방문해 아이콘들을 볼 때, 광원에 어디에 있게 그렸는지를 보고 일관성있게 광원처리를 했는지 유심히 살펴 보라. 그림자가 다른 아이콘들을 많이 발견할 수 있을 것이다.
 

3) 범세계적 호환성의 고려

제품이 국내만 유통되다가 해외로 진출하면서 가장 크게 걸리는 부분이 바로 사용자 인터페이스 부분이다. 따라서 아이콘의 경우에도 지역화하거나 아니면 범세계적으로 사용될 것을 염두에 두고 디자인해야 한다. 범세계적인 아이콘이란 어떤 특정 문화나 지역에 국한된 것이 아니라 보편적으로 이해되는 아이콘을 뜻한다.
세계 각 지역에서 이해되는 아이콘의 한 예가 문서 아이콘이다. 전세계의 다양한 국민들이 비록 다른 크기의 용지와 다른 형태의 제지원료를 사용하더라고 문서 아이콘을 문서 표시로 이해할 것이다.
메일을 수, 발신하기 위한 우편함 아이콘을 디자인할 때, 아래와 같이 각국의 우체통이나 우편함 등을 고려해야 한다. 국내 사용자를 위한 메일 프로그램의 경우에도 미국의 우편함 아이콘이 사용되고 있는 것을 가끔 볼 수 있다.
편지가 있으면 깃발이 올라가는 미국식의 우편함을 알지 못하는 국내 사용자는 우편함 아이콘에 대해 낯설어 하고 우편함에 깃발이 있는 것을 이해하지 못할 것이다. 따라서 국내 사용자를 위해서는 우리 나라 식의 우편함이나 우체통을 사용해야 한다.
5.4 아이콘-최적의 UI 설계 가이드

그림 37. 우편함 아이콘 디자인 화면

4) 아이콘 안의 텍스트

사용자가 아이콘을 쉽게 인식할 수 있도록 아이콘에 레벨을 붙이는 것은 적절하다. 색깔에 있어 시각장애자는 아이콘의 라벨로 인식할 수 있을 것이다. 또한 아이콘의 텍스트는 그림이 의미를 충분히 전달해 주지 못할 때는 효과적이다. 그러나 지역, 국가간 또는 언어 문제에서 각 언어에 맞는 텍스트를 넣어야 하기 때문에 문제가 있을 수 있다.
넷스케이프나 IE의 경우, 아이콘에 직접 텍스트를 넣지 않고, 툴 바 버튼에 아이콘만 넣을 것인지 아니면 텍스트도 같이 넣을 것인지 사용자가 선택할 수 있도록 하는 것을 볼 수 있다. 버튼에 아이콘을 사용할 경우, 아이콘은 이미지만 갖고 있고, 버튼에 텍스트를 넣을 지 안 넣을지를 사용자에게 선택권을 주는 것도 한 방법일 것이다.
 
5.4 아이콘-최적의 UI 설계 가이드
5.4 아이콘-최적의 UI 설계 가이드

그림 38. 넷스케이프의 툴바 버튼

5) 동일한 아이콘 패밀리 내의 일관적인 모습 유지

동 일한 아이콘 패밀리에 속하는 모든 아이콘은 서로간에 시각적으로 일관성을 유지해야 한다. 같은 기능을 하는 아이콘이 크기가 달라짐에 따라 모양이나 색깔도 변하면 사용자는 혼란스러워할 것이다.
우선 큰 아이콘을 디자인한 다음, 작은 아이콘에 적용시키는 것이 작은 아이콘을 먼저 디자인하는 것보다 효과적이다.
5.4 아이콘-최적의 UI 설계 가이드 5.4 아이콘-최적의 UI 설계 가이드

그림 39. 윈도우 98 제어판의 큰 아이콘과 작은 아이콘

 

6) 아이콘 요소들의 일관적인 사용

디자인 전반에 걸쳐 아이콘 요소들은 일관적으로 사용해야 한다. 아이콘 요소에 대해 기존에 사용된 것이 있으면 이를 바꾸는 것은 문제를 일으킬 수 있다.
예를 들어, 폴더나 문서에 대해서 시스템 자체에서 제공하는 아이콘을 아주 다른 모양으로 만드는 것은 사용자에게 이미 표준으로 익숙한 아이콘들에 대해 혼란을 줄 수 있다. 즉, 탐색기에서 보이던 폴더 아이콘이 파일 찾기 프로그램에서 보이는 아이콘과 달라서는 안된다는 것이다.
사람들은 종종 모습이 달라지면 다른 의미를 가진다고 생각하여 디자이너가 의도하지 않은 의미를 파악하려고 애를 쓸 수도 있다.
또한 아이콘에 사용한 이미지 요소들도 각 아이콘에 사용될 때는 일관성이 있어야 한다. 예를 들어, 아이콘에 돋보기가 있을 경우, 돋보기를 ‘본다’ 라는 의미로 사용할 경우, 돋보기가 있는 아이콘은 본다 라는 의미를 포함해야지 다른 의미로 사용되면 사용자는 아이콘을 구별하는데 혼란스러울 수 있다.
마이크로소프트의 워드를 보면 보기와 관련된 아이콘에 돋보기를 일관성있게 사용하고, 찾기에는 쌍안경을 사용해 아이콘 안의 이미지들에 대해 명확히 하고 있음을 알 수 있다.
 
5.4 아이콘-최적의 UI 설계 가이드

그림 40. 아이콘 요소의 일관적인 사용

 







제휴 링크로 구매 시 제휴마케팅 활동의 일환으로 일정액의 수수료를 지급받아 콘텐츠를 제작하는데 큰 도움이 됩니다.



도움이 되셨다면, 댓글이나 소중한 커피 한 잔 부탁드려도 될까요?

커피 사주기
























당신이 좋아할 만한 글







플랭크스타: 플랭크 타이머

목표 시간, 세트 등 다양한 방식을 지원하는 플랭크 타이머, 음성 안내, 일별/월별/연도별 운동 기록 관리









Add a Comment

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다