Real Design

아이콘 디자인 원칙 본문

UI&UX/Icon

아이콘 디자인 원칙

GS Real Design 2013. 2. 25. 12:06

 

 

아이콘

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

 

 

아이콘을 사용하는 이유

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

 

 

아이콘의 분류

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

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

 

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

1) 적절한 메타포의 사용
아 이콘은 컴퓨터 시스템의 객체나 프로세스를 표시하는 심볼이기 때문에 적
절한 메타포(은유)를 사용해야 한다. 사용자 중심의 디자인 원칙의 메타포에
서 설명했듯이 실제 세계에서 문서를 관리하기 위해 폴더를 사용한 것을 컴
퓨터 시스템에서도 문서나 파일을 관리하기 위해 폴더를 은유하고, 아이콘
또한 실제 폴더의 이미지와 가깝게 해야 한다. 만약 폴더에 대한 메타포를
아이콘에 표현할 때, 개념은 폴더를 빌어 오고, 아이콘 표시는 문서를 담을
수 있다고 해서 폴더를 깡통 등의 이미지로 표시하면 사용자는 혼란스러워진
다. 따라서 컴퓨터 시스템의 아이콘을 디자인할 때는 해당되는 적절한 메타
포를 사용하고 이미지 또한 그에 맞는 것으로 표현하는 것이 좋다.
2) 일관적인 광원 사용
매킨토시나 윈도우의 광원은 항상 스크린의 좌측상단에서 온다. 데스크탑의
윈도우나 버튼 등의 인터페이스 요소들을 자세히 보면 오른쪽 아래에 그림자
가 있는 것을 볼 수 있는데, 이는 모두 같은 광원에 대해 처리가 되어 있는것이다.
따라서 아이콘을 디자인할 때도 이러한 광원을 고려해야 한다. 윈도
우는 오른쪽 아래에 그림자가 있는데, 윈도우 안의 아이콘은 왼쪽 아래에 그
림자가 있다면 광원에 있어 일관성이 떨어져 사용자는 부자연스러움을 느끼
게 될 것이다. 소프트웨어 전시회나 웹사이트를 방문해 아이콘들을 볼 때,
광원에 어디에 있게 그렸는지를 보고 일관성있게 광원처리를 했는지 유심히
살펴 보라. 그림자가 다른 아이콘들을 많이 발견할 수 있을 것이다.

 

 

'UI&UX > Icon' 카테고리의 다른 글

Naver 새로운 서비스 아이콘  (0) 2014.04.01
안드로이드 아이콘과 iOS 아이콘 규격  (0) 2013.07.05
아이콘 디자인 원칙  (0) 2013.02.25
삼성카드의 서비스의 시각화  (0) 2012.06.29
canon 환경 캠페인 아이콘  (0) 2012.01.02
아이콘 모음 3  (0) 2011.12.14
0 Comments
댓글쓰기 폼