💌 최근 유행하는 ✨ 아이콘, 사용자는 모른다?! 😮

2024. 11. 25.

2024/11/26 화요일

구독하기 | 이전 뉴스레터

📌오늘의 파쓰레터 Summary

✅ 오늘의 파쓰 지식 : 오늘은 파쓰와 함께 '좋은’ 아이콘란 어떤 것인지 알아보아요!

✅ 파쓰가 전하는 테크 샤라웃 : 쏘카, 뷰저블, Google의 테크 블로그 소식을 소개합니다!

🔎 오늘의 파쓰 지식

최근 유행하는 ✨ 아이콘, 사용자는 모른다?! 😮

#아이콘 #UI/UX

요즘 AI 관련 앱이나 SNS에서 반짝이는 아이콘(✨)을 쉽게 볼 수 있는데요. ChatGPT나 Midjourney 같은 AI 도구에서는 AI 기능을, 일부 SNS에서는 프리미엄 서비스나 특별한 기능을 나타내는 데 사용하고 있죠. 그런데 이 아이콘이 앱마다 의미가 달라서 사용자들이 직관적으로 이해하기 어렵다고 해요.

이렇게 명확하지 않은 아이콘은 오히려 사용자 경험을 방해할 수 있어요. 단순하고 직관적으로 보이지만, 각기 다른 의미로 사용되다 보니 혼란을 주기 쉽죠. 그렇다면 ‘좋은’ 아이콘은 어떤 특징을 가져야 할까요? 오늘은 파쓰와 함께 ‘좋은’ 아이콘이란 무엇인지, 사용자에게 친화적인 아이콘이 갖춰야 할 요소들에 대해 알아보아요!

<출처: https://medium.com/algorhythms/sparkles-iconography-and-ai-84eb97baa4b5>

아이콘이란❓

아이콘은 특정 개념, 기능, 의미를 전달하는 기호를 뜻해요. 디자인 평론가 스티븐 헬러는 “아이콘은 언어다”라고 표현했는데요. 이는 아이콘이 직관적이고 언어적 특성을 지녀, 아이콘만으로도 대화가 가능해야 한다는 의미로 해석할 수 있어요. 즉, 아이콘은 언어의 장벽을 넘어 의미와 기능을 빠르고 보편적으로 전달하는 역할을 해야 한다는 거죠.

또한 아이콘은 시각적 이미지로서, 형태와 색상 등 그래픽 요소를 통해 해당 앱의 분위기와 브랜드 정체성을 나타내기도 해요. 예를 들어, 중고거래 플랫폼 당근마켓은 주황색을, 카카오톡은 노란색을 주요 색상으로 사용해 모든 아이콘을 일관되게 표현하고 있어요. 이처럼 좋은 아이콘들은 직관적인 의미 전달뿐 아니라 앱의 개성을 담아내며, 몇 가지 공통된 특징을 가지고 있답니다.

아이콘만 봐도 알겠어! - 좋은 아이콘의 비밀👍

아이콘의 첫 번째 역할은 사용자가 원하는 곳으로 안내하는 것입니다. 좋은 아이콘은 제품이나 기능의 의도를 정확히 전달하고, 화면 공간을 절약하며 심미적 매력을 높여 사용자 인터페이스에 많은 이점을 제공하는데요. 아래에 좋은 아이콘에 갖추어야 할 조건 3가지를 가져와봤어요.

1️⃣ 명확성 - 사용자를 두 번 생각하게 하지 않기🤔

아이콘은 사용자가 한눈에 그 의미를 정확히 파악할 수 있어야 해요. 만약 사용자가 아이콘의 의미를 고민하게 된다면, 이는 서비스 경험을 돕기보다는 오히려 방해 요소가 될 수 있죠. 아이콘의 역할은 단순히 정보를 제공하는 것만이 아니라, 사용자에게 직관적이고 빠르게 이해되는 경험을 주는 데 있어요.

아래 맥도날드와 버거킹의 쿠폰 아이콘이 보시이나요? 맥도날드와 버거킹의 쿠폰 아이콘을 비교해 보면, 버거킹의 아이콘은 즉시 쿠폰임을 인지할 수 있지만, 맥도날드의 아이콘은 텍스트 라벨을 읽어야만 이해할 수 있어요.

<좌: 맥도날드/우: 버거킹,출처: 맥도날드,버거킹 앱 화면 캡처본>

물론 맥도날드가 아이콘을 통해 자사의 로고를 강조하고 싶었던 의도는 이해가 가요. 하지만 이런 아이콘 디자인은 사용자에게 추가적인 해석을 요구하기 때문에 직관적이지 않다는 문제가 있죠. 쿠폰처럼 명확한 의미를 가진 아이콘이라면, 사용자가 혼동하지 않도록 쉽게 이해되게끔 디자인하는 것이 중요해요.

즉, 명확한 아이콘이란 사용자가 한눈에 보고 무엇을 할 수 있는지 즉각적으로 이해할 수 있어야 하며, 이를 통해 사용자가 원하는 작업을 자연스럽게 수행하도록 유도할 수 있어야 해요.

2️⃣ 간결성 - 덜어냄의 미학✂️

간단하고 잘 표현된 아이디어는 효과적이고 세련되게 느껴지는데요. 아이콘이 명확하더라도 디자인이 복잡하면 이해하는 데 시간이 걸릴 수 있어요. 오히려 불필요한 요소를 덜어내고 최소한의 형태로 단순하게 제작된 아이콘이 사용자에게 의미를 더 빠르고 직관적으로 전달할 수 있죠. 단순한 아이콘은 시각적 복잡성을 줄여, 사용자가 아이콘의 의미를 바로 파악하기에 용이하거든요. 아래 텔레그램의 아이콘이 간결하고 직관적인 디자인의 좋은 사례라 할 수 있어요.

새로운 아이콘을 디자인할 때는 텔레그램의 아이콘 디자인처럼, 대상의 기본적 특성에 집중하고 시각적 디테일은 최소화하는 것이 좋아요. 너무 현실적인 이미지는 피하고, 그래픽 요소가 단순할수록 사용자가 인식하기 더 쉬워지기 때문이에요.

<출처: 텔레그램 PC 앱 화면 캡처본>

3️⃣ 가독성 - 읽기 쉽게 만들기📖

가독성은 아이콘이 사용자가 의도한 의미를 쉽게 읽어낼 수 있도록 만드는 요소예요. 일반적으로 기하학적인 도형을 활용한 디자인이 가독성을 높이는 데 효과적이라고 볼 수 있어요. 예를 들어, 안드로이드의 하단 내비게이션 바는 간단한 도형으로 구성되어 있어 사용자가 이 아이콘들이 버튼임을 직관적으로 인식할 수 있죠. 도형 자체가 가독성을 높이는 데 도움이 되지만, 반대로 지나치게 디테일하게 표현된 아이콘은 오히려 가독성을 떨어뜨릴 수 있어요.

<안드로이드 하단 내비게이션 바: >

아래 Amtrak 앱에서 첫 번째 아이콘인 정거장(Station)의 경우, 지나치게 디테일해서 알아보기 어려운데요. 여러 형태의 결합으로 아이콘을 작업할 때는 그 사이에 충분한 공간을 두는 것이 좋다고 해요. 얇은 테두리와 수많은 획은 아이콘을 더 복잡하게 만들 수 있어요. 똑같은 정거장(Station)을 Google Maps에서는 더 간단하게 표현했는데요. 아주 작은 크기의 아이콘이더라도 사용자가 바로 알아볼 수 있어 Amtrak의 아이콘보다는 가독성이 좀 더 높은 편이에요.

<(좌) AMTRAK의 Station 아이콘/ (우) Google Maps의 Station 아이콘 >

이처럼 좋은 아이콘은 사용자에게 명확하고 직관적인 경험을 제공하지만, 반대로 나쁜 아이콘은 혼란을 초래하고 사용자 경험을 저해할 수 있는데요. 그렇다면 나쁜 아이콘을 구분하는 특징에는 어떤 것들이 있을까요?

무슨 아이콘인지 모르겠어 - 나쁜 아이콘의 특징👎

나쁜 아이콘은 좋은 아이콘의 특징과 반대되는 경우라고 생각하면 쉬운데요. 과도한 디테일이나 추상적 표현, 디자인에만 신경 쓴 불명확한 아이콘이나, 트렌드를 맹목적으로 따라가기 위해 맥락을 무시한 아이콘 사용 등이 이에 해당하죠. 몇 가지 예를 들어볼까요?

아이콘은 시각적으로 아름답더라도 그 의미가 불명확하다면 사용자 경험을 저해할 수 있어요. 대표적인 예시로 애플의 GameCenter 앱 아이콘을 들 수 있는데요. 컬러풀한 원들로 구성된 이 아이콘은 시각적으로는 매력적일 수 있지만, 아래 텍스트 라벨이 없었다면 게임과의 연관성을 직관적으로 이해하기는 어려워요.

<Apple의 Game Center 아이콘, 출처: https://hexadrive.jp/hexablog/program/2634/ >

최근 들어 자주 보이는 반짝임(✨) 아이콘도 비슷한 문제를 가지고 있는데요. Google Meet 등 여러 앱에서 이 아이콘이 사용되고 있지만, 각 앱마다 의미하는 바가 달라 사용자들의 혼란을 야기하고 있죠.

아래 Google Meet의 반짝임(✨) 아이콘은 사용자 영상에 효과를 주는 것, Figma 반짝임(✨) 아이콘은 AI 툴을 의미하는데요. 동일한 아이콘이라도 앱마다 다른 의미를 갖고 있어, 사용해 보기 전까지는 아이콘이 어떤 기능을 나타내는 것인지 바로 알 수 없어요. 이외에도 다양한 플랫폼에서 프리미엄 서비스, 특별 기능, AI 연관 기능 등 해당 아이콘이 다양한 의미로 사용되면서 아이콘의 보편적 의미가 모호해지고 있죠.

<(좌) Google Meet의 반짝임(✨) 아이콘, (우) Figma의 반짝임(✨) 아이콘>

이처럼 현재의 트렌드만을 쫓아 아이콘을 사용하게 되면 이는 장기적으로 사용자의 이해도를 떨어뜨리고 인터페이스의 일관성을 해칠 수 있어요. 이렇게 불명확한 아이콘들은 결국 사용자가 인터페이스를 이해하고 사용하는 데 추가적인 시간과 노력을 들이게 만들죠.

나쁜 아이콘이 되지 않으려면😉

물론, 모든 아이콘이 처음부터 보편적인 의미로 해석될 수는 없어요. 하나의 아이콘에 대해 사회의 공통적인 합의가 생기고, 모든 앱에서 동일한 의미를 가지는 표준이 되기까지에는 시간이 걸릴 수 있어요. 하지만 그렇다고 익숙하지 않은 아이콘에 대해 사용자가 그 의미를 알아내는데 부가적인 시간이 너무 많이 들이는 불편함을 제공하면 안 되겠죠?

사용자가 정말로 원하는 것은 익숙하지 않은 앱에서 액션을 취하기 전에 어떤 일이 일어날지 명확한 이해를 하는 것이에요. 이를 위해서 아이콘 밑에 텍스트 라벨을 두거나, 아님 Tooltip을 사용하여 어떤 기능을 나타내는지 표시하여 아이콘의 의미를 분명하게 전달할 수도 있어요.

그런데 그전에! 가장 중요한 것은 사용자가 이 아이콘을 어떻게 생각하고 있는지 알아보는 것이 에요. 프로덕트 제작 후 사용성 테스트를 진행하는 것처럼, 실제 사용자가 UI를 어떻게 이용하는지를 관찰하고 아이콘이 의도한 동작을 수행하는지, 그리고 아이콘의 의미가 사용자에게 명확한지를 판단하는 데 도움이 되기 때문이죠.

이처럼 오늘날의 아이콘은 UI 디자인에서 매우 중요한 요소 중 하나가 되었는데요. 아이콘은 인터페이스의 사용성을 더할 수도 있지만, 해칠 수도 있어요. 그래서 보다 좋은 아이콘을 만드는 것이 필요하죠. 아이콘의 역할을 제대로 하려면 사용자가 추가적인 노력을 요구하지 않고 사용자가 해야 할 일을 하도록 도와줘야 한다는 것! 잊지 마세요!😉

어떤 아이콘이 좋은 아이콘인지 아직 감이 잘 잡히지 않는다면 머터리얼 디자인(Material Design)이나 Apple의 iOS Human Interface Guidelines를 참고해 보세요. 아이콘을 구성하는 요소들이 왜 있고, 이 규칙들은 어떻게 정립되었는지를 이해하고 디자인을 한다면 더 좋은 아이콘을 만들 수 있을 거예요!

Material Design - System icon : https://m2.material.io/design/iconography/system-icons.html
iOS Human Interface Guidelines - ICONS : https://developer.apple.com/design/human-interface-guidelines/icons

파쓰의 꿀팁🍯

아이콘 사용성 테스를 어떻게 해야 할지 막막하다면 닐슨 노먼 그룹에서는 아이콘 사용성 디자인 및 테스트에 몇 가지 가이드라인을 제시하고 있어요. 한 번 참고해 보세요!

1️⃣ 아이콘 직관성 테스트 (Icon intuitiveness test)

소수의 사용자(일반적으로 5명)에게 아이콘을 라벨 없이 보여줍니다. 이들은 아이콘이 무엇을 나타내는지 가장 잘 추측하도록 요청받습니다. 이 테스트는 아이콘이 의도한 개념을 얼마나 잘 표현하고 있는지를 평가하는 테스트에요.

2️⃣ 표준 사용성 테스트 (Standard usability test)

아이콘이 전체 사용자 인터페이스의 일부로 표시되고, 사용자가 시스템을 사용해 정해진 작업을 수행하는 동안 ‘소리 내어 생각’하도록 요청합니다. 이 테스트의 목적은 아이콘이 전체 인터페이스의 맥락에서 잘 작동하는지를 파악하기 위해서예요. 이와 더불어 아이콘의 인식 가능성(recognizability)과 기억 가능성(memorability)을 테스트하는 것도 중요합니다.

인식 가능성(recognizability): 사용자가 아이콘이 무엇을 표현하는지 물어보는 것입니다. 사용자는 아이콘을 보면서 어떤 기능인지 고민할 필요가 없어야 합니다.
기억 가능성(memorability): 사용자가 몇 주 후에 아이콘의 의미를 기억하는지를 테스트합니다. 기억하기 어려운 아이콘은 일반적으로 비효율적이라고 볼 수 있습니다.

📚참고한 자료

📝오늘의 파쓰 퀴즈

💫퀴즈 풀고 상품 받기

📨 파쓰가 전하는 테크 소식

파쓰가 소개하는 주간 테크 소식

이번 주 파쓰가 엄선한 주요 테크 블로그 소식을 알아볼까요?

1️⃣ [쏘카] 누가 내 쿠키를 먹었을까?

iOS 웹뷰에서만 세션쿠키가 갑자기 소실되는 현상을 마주한 적이 있나요? 프론트엔드 개발을 담당하고 계신 리우 님께서 해당 본문을 통해 문제가 무엇이고, 왜 발생하고, 어떻게 해결했는지 쏘카가 실제로 겪은 사례를 통해 설명해 주신다고 해요. 프론트엔드 혹은 웹뷰 환경에서 개발을 하시거나 iOS 웹뷰에서 쿠키 관련 이슈를 겪고 계시는 분들께서 읽으면 도움이 될 것 같아요!

본문 확인하기

2️⃣ [뷰저블] UX Heatmap으로 버튼 활용도 분석하고 고객의 니즈 발견하기

뷰저블에서는 UX Heatmap으로 키즈마일의 '버튼 UI 활용도를 분석하고 개선안을 도출'한 사례를 소개한다고 합니다. 사용자가 구매 과정에서 어떤 불편함을 겪고 있는지 알고 있다면, 쉽게 페이지를 개편하고 이탈률을 개선할 수 있다고 해요. 뷰저블에서는 구매 전환이 일어나는 장바구니 페이지에서 어떤 불편함이 발생하고 있는지 UX Heatmap을 통해 알아냈다고 하는데요. 사용자의 불편함을 확인하는 방법이 고민이신 분들이라면 본문을 확인해 보세요!

본문 확인하기

3️⃣[Google] 로레알 CDMO 아스미타 두베이, 기술과 창의성을 결합하는 것이 아름다운 이유

해당 본문에서는 Asita Dubey가 기술이 어떻게 뷰티 산업에 혁신을 가져왔는지, 그리고 창의성을 어떻게 결합하여 새로운 마케팅 전략과 소비자 경험을 창출하는지에 대해 설명하고 있어요. 또한, 디지털 도구와 데이터 분석이 뷰티 브랜드의 성공에 어떻게 기여하는지에 대한 통찰을 제공했는데요. 자세한 내용이 궁금하다면 본문을 통해 확인해 보세요!

본문 확인하기