[보기 좋은 프로덕트의 비밀] 아이콘

• UI에서 아이콘의 중요성과 어떻게 만들어야 좋은지 배워봅시다.
• 개성을 부여하기 쉽고 다양한 실험이 가능한 시각 언어인 아이콘은 어떤 법칙으로 제작해야 하는지 배워봅시다.

---

아이콘

: 누구나 아이콘을 보면 무슨 뜻인지 알 수 있는 것이 장점이다.

 

• 아이콘 = 이미지의 일종으로 볼 수 있음 
• 이미지란 기호의 경계에 있는 요소인데 사진처럼 복잡한 어떤 이미지 전체를 전달하는 것이 아닌 구체적으로 무슨 내용을 압축해서 설명할 때 자주 쓴다. 
• ex) 올림픽 - 종목 설명 : 픽토그램
• 종목을 강렬하고, 간결하게 표현한다.
• 픽토그램도 아이콘의 일종이라고 볼 수 있다.
• 디지털 프로덕트 안에서는 아이콘으로 불리고 있음
• 스마트폰 안에서 앱 아이콘을 볼 수 있다. (브랜딩 아이콘이라 불림)
• 프로덕트 안에서 동작하는 것들도 아이콘으로 볼 수 있다. (시스템 아이콘이라 불림)

 

- 아이콘의 역사

• 최초 아이콘 : xerox-star
• 애플 Mac에서 아이콘을 대중적으로 사용하기 시작했고, 이때부터 아이콘이 좀 더 단순히 기능만 전달하는 것 뿐만 아니라 즐거운 표현이나 감정적인 표현을 담기 시작했다.
• 좀 더 구체적이면서도 너무 복잡하지 않게 아이콘만 보면 무슨 의미인지 알 수 있도록 고도로 발달된 아이콘을 만들기 시작했다.
• 그 이후, 윈도우(Window)에서 아이콘 많이 활용하기 시작
• 처음 아이콘은 pixel로 만듬 -> 기술의 발전에 따라 아이콘 만드는 방법 발달함
• 아이콘이 실제 세계에서 볼 수 있는 느낌으로 집중하게 되고 그때를 기점으로 이런 표현법에 대해서 "스큐어모피즘"이라는 용어를 쓰게 되었다.

 

 

 

• "플랫 UI"로 변화
• 더 단순화된 형태로 디자인된 아이콘

 

 

 

아이콘 스타일

• 선 / 면 / 색
• 보통 선으로 채워져있는 것을 많이 사용한다.
• 선 아이콘 -> 눌러야한다는 것을 인식

 

 

 

굵기 vs 둥글기

 

 

얇음 아이콘 특징

카카오톡_더보기

• 한 화면 안에 많은 양의 아이콘이 필요할 때 굵은 선으로는 여러가지 아이콘을 구분하기 굉장히 어렵기 때문에 얇은 선을 사용한다.
• 아이콘 추상적 설명이 필요할 때 얇은 선의 아이콘을 사용한다.

 

굵음 아이콘 특징

인스타그램 하단 탭바

• 글자가 없거나 내용을 강하게 전달하고 싶을 때 굵게 사용한다.
• 최근 서비스들은 사람들이 많이 학습을 한 상태라서 따로 글로 설명하지 않고, 아이콘만 사용하는 경우가 많다. -> 굵음 아이콘 많이 사용

 

 

둥글기

각짐 아이콘 서비스

• 전체 서비스의 보이스 앤 톤을 기준으로 결정하거나 텍스트에 녹아드는 경우가 많을 때 각짐 아이콘을 많이 쓴다.

 

둥금 아이콘 서비스

 

 

그리드 설정

• 구글의 대표적인 24*24 pixel 

 

무게

 

통일

 

 

디테일

• 아이콘 -> 아이콘이 뜻하는 것을 표현하기 위한 최소한의 요소로만 표현하는 것이 가장 좋다. 

 

시점

• 아이콘 디자인 -> 수평적인(평면) 요소로 표현

 

단순화

• 빠른 시간 내에 무슨 내용인지 스캔하기 때문에 복잡하게 표현할 필요 없다.

 

 

플랫폼 경험