스마트폰이나 컴퓨터를 사용하다 보면 돋보기, 휴지통, 집 모양처럼 그림 하나만으로 기능을 알려주는 표시를 자주 만나게 됩니다.
이런 그림을 보통 아이콘이라고 부릅니다. 비슷하게 생긴 이모지와는 어떤 차이가 있고, 아이콘은 왜 이렇게 많이 사용되는지 알아보겠습니다.
아이콘은 기능이나 정보를 빠르게 알려주는 그림입니다
아이콘은 특정 기능이나 의미를 그림으로 나타낸 것입니다.
스마트폰에서 돋보기 모양을 누르면 검색 화면이 나오고, 휴지통 모양을 누르면 파일을 삭제할 수 있습니다. 집 모양은 홈 화면이나 첫 화면을 의미하는 경우가 많습니다.
이런 아이콘의 가장 큰 특징은 그림 자체가 어떤 기능이나 정보를 알려준다는 점입니다.
글자로 "검색"이라고 적어도 같은 기능을 설명할 수 있지만, 돋보기 모양을 함께 사용하면 화면을 보는 순간 어떤 기능인지 알아차리기 쉽습니다.
특히 스마트폰처럼 화면 크기가 작은 기기에서는 모든 기능을 긴 문장으로 설명하기 어렵습니다. 버튼마다 긴 설명을 넣으면 화면이 복잡해지기 때문입니다.
그래서 널리 알려진 기능은 아이콘으로 간단하게 표현하고 필요한 경우 글자를 함께 표시합니다.
웹 접근성을 다루는 W3C에서도 익숙하고 명확한 아이콘이나 기호를 중요한 기능과 함께 사용하면 사용자가 페이지의 기능이나 정보를 파악하는 데 도움이 될 수 있다고 설명합니다. 다만 아이콘은 의미가 분명해야 하며 너무 많은 아이콘을 사용하면 오히려 화면이 복잡해질 수 있습니다.
예를 들어 검색 기능을 나타내는 돋보기는 많은 사람이 익숙하게 알고 있습니다. 반면 처음 보는 모양을 만들어 놓고 아무런 설명도 붙이지 않는다면 사용자는 그 그림이 무엇을 의미하는지 추측해야 합니다.
아이콘은 작게 표현할 수 있다는 장점이 있지만, 작다고 해서 아무 그림이나 사용해도 되는 것은 아닙니다.
이모지는 감정이나 상황을 표현하는 데 더 가깝습니다
아이콘과 이모지는 둘 다 작은 그림처럼 보이기 때문에 헷갈릴 수 있습니다.
하지만 사용하는 목적이 다릅니다.
이모지는 문자나 메시지에서 감정이나 상황을 표현할 때 주로 사용합니다. 웃는 얼굴을 넣으면 기분이 좋다는 뜻을 전달할 수 있고, 하트 모양을 사용하면 좋아한다는 느낌을 더할 수 있습니다.
반면 아이콘은 기능이나 정보를 알려주는 데 사용되는 경우가 많습니다.
예를 들어 메시지에 웃는 얼굴을 넣는 것은 대화의 분위기를 전달하기 위한 것이지만, 앱에서 휴지통 모양을 누르는 것은 실제로 파일을 삭제하기 위한 행동입니다.
물론 두 개를 항상 완벽하게 구분할 수 있는 것은 아닙니다. 같은 그림이라도 사용되는 장소와 목적에 따라 의미가 달라질 수 있기 때문입니다.
예를 들어 하트 모양은 메시지에서는 좋아한다는 의미로 쓰일 수 있지만, 쇼핑 앱에서는 관심 상품이나 즐겨찾기를 나타내는 버튼으로 사용될 수도 있습니다.
그래서 그림의 모양만 보고 아이콘인지 이모지인지 판단하기보다 어디에서 어떤 목적으로 사용되는지를 함께 보는 것이 정확합니다.
아이콘을 사용할 때는 일관성도 중요합니다.
같은 기능을 하는 버튼인데 화면마다 서로 다른 그림을 사용하면 사용자가 다시 의미를 익혀야 할 수 있습니다. W3C 역시 같은 기능을 하는 구성 요소는 여러 페이지에서 일관되게 식별할 수 있도록 하는 것이 중요하다고 설명합니다.
예를 들어 한 화면에서는 돋보기로 검색을 표시하고 다른 화면에서는 전혀 다른 그림을 사용한다면 사용자는 두 버튼이 같은 기능인지 잠시 고민할 수 있습니다.
익숙한 아이콘을 일정하게 사용하는 이유가 여기에 있습니다.
아이콘은 보기 좋은 것보다 의미가 분명한지가 중요합니다
블로그나 문서를 만들 때도 아이콘을 활용할 수 있습니다.
소제목 앞에 작은 그림을 넣거나 중요한 내용을 구분할 때 사용할 수 있습니다. 글이 길어 보이는 것을 줄이고 내용의 성격을 빠르게 파악하는 데 도움이 될 수 있습니다.
하지만 아이콘을 많이 넣는다고 글이 무조건 보기 좋아지는 것은 아닙니다.
예를 들어 모든 문장 앞에 서로 다른 아이콘을 넣으면 처음에는 화려해 보여도 무엇이 중요한 내용인지 구분하기 어려워질 수 있습니다. 아이콘이 너무 많으면 오히려 글을 읽는 데 방해가 될 수도 있습니다.
아이콘을 고를 때는 먼저 의미가 분명한지 확인하는 편이 좋습니다.
검색을 나타내는 버튼이라면 검색 기능을 쉽게 떠올릴 수 있는 그림을 사용하는 것이 좋습니다. 도움말 버튼이라면 사용자가 도움말이라는 것을 알아보기 쉬워야 합니다.
또 아이콘만 사용하는 경우에는 접근성도 생각할 필요가 있습니다.
화면을 직접 보지 못하는 사용자는 그림의 모양을 볼 수 없기 때문에 아이콘의 의미를 다른 방식으로 전달해야 합니다. W3C는 기능을 수행하는 이미지나 아이콘에는 단순히 그림의 모양을 설명하는 것보다 그 기능이 무엇인지 알 수 있는 대체 텍스트를 제공하는 방법을 안내하고 있습니다. 예를 들어 돋보기 그림의 대체 텍스트라면 "돋보기"보다 "검색"처럼 실제 기능을 알려주는 표현이 적절합니다.
이런 원칙은 웹사이트뿐만 아니라 문서나 블로그를 만들 때도 참고할 만합니다.
아이콘은 글자를 완전히 대신하는 그림이라기보다 기능이나 내용을 빠르게 이해하도록 도와주는 시각적인 표시라고 생각하면 쉽습니다.
이모지는 감정이나 분위기를 표현하는 데 자연스럽고, 아이콘은 기능이나 정보를 알려주는 데 적합합니다. 물론 실제 사용 환경에서는 두 가지가 비슷하게 보일 수 있기 때문에 모양보다 사용 목적을 살펴보는 것이 중요합니다.
화면이나 문서에 아이콘을 넣을 때도 많이 사용하는 것보다 필요한 곳에 알아보기 쉬운 아이콘을 사용하는 편이 좋습니다. 그림 하나를 추가하더라도 보는 사람이 별도의 설명 없이 의미를 이해할 수 있는지 먼저 생각해 보면 됩니다.