안녕하세요. 이번 영상에서는 아이콘이라는 부분에 대해서 자세하게 한번 다뤄보도록 하겠습니다.

앞에 있는 이 하트 모양은 사랑, 좋아요, 관심 뭐 이런 다양한 표현들을 함축적으로 의미를 담고 있는 그래픽이죠.

이 아이콘을 가지고 화났다, 슬픔이다 이렇게 사용하는 분들은 지구상에 없을 겁니다.

이것들은 일종의 약속이죠. 그리고 텍스트 대신해서 정보를 담고 있습니다.

그리고 각각 그래픽에 맞는 정보를 담고 있죠.

다음은 비상 탈출구인데요. 이것도 많이 봤죠. 위급 상황 시에 저 표시만 보고 따라나가면 되게끔 우리는 학습이 되어 있습니다.

다음은 화장실인데요. 해외 어디를 가든 여러분들은 화장실 모양 저 아이콘만 보면 굳이 화장실이라고 안 써 있어도 찾아갈 수가 있습니다.

저기에 사용되는 저런 아이콘의 그래픽 스타일만 다를 뿐이죠.

이처럼 우리가 앱을 디자인하려고 하고 있지만 사실상 이미 우리의 일상은 이러한 기호에 대해서 익숙한 상황입니다.

세계적인 디자인 평론가 중에 한 명인 스티븐 헬러가 이렇게 말씀하셨습니다.

'아이콘은 언어다.' 우리가 배워 볼 이 아이콘은 UI에 적용되는 환경이 다를 뿐이지 크게 다르진 않습니다.

UI 디자인에 사용되는 이 아이콘 디자인할 때 고려해야 되는 이 핵심 4가지를 한번 살펴볼게요.

1번은 직관적인 아이콘이고요. 이게 전 개인적으로 제일 중요하게 생각하는데 뒤에서 한번 다뤄보도록 할게요.

2번은 통일된 스타일 아이콘, 3번은 단순한 아이콘, 그다음은 아이콘 규격과 시각 보정이 4가지의 아이콘 핵심을 빠르게 배워보도록 하겠습니다.

혹시 여러분 중에 이 아이콘 3개를 보고 어떤 아이콘인지 어떤 기능인지 이해가 안 가는 아이콘이 있으신가요?

하트, 잠금 혹은 비밀번호, 삭제 뭐 이런 의미를 가지고 있는 아이콘이죠.

누가 봐도 이건 검색 아이콘이구나, 저건 알림이구나, 저건 장바구니겠구나 싶은 거 있죠?

이런 것들을 무조건 알아야 하는데 디자인 입문하시는 분들이 가끔 간과하는 부분이 너무 지나치게 단순하거나 본인만 아는 아이콘을 사용하면 절대 안 됩니다.

안드로이드와 iOS 이 두 OS 가이드라인에서 아이콘 부분을 요약해 보면 간단하고 친근해야 하고 본질 특성에 집중해야 한다라고 요약을 할 수가 있습니다.

이것들을 이제 기호학으로 더 깊게 들어가면 머리가 아프니까 최대한 익숙하고 공통화된 아이콘을 사용한다.

이게 핵심이라는 것만 기억하시면 좋을 것 같습니다.

그리고 통일된 스타일 아이콘이라는 게 있죠.

여기도 마찬가지로 Don't와 Do로 나눠 놨는데, 대충 이곳저곳에서 다운로드한 그런 무료 아이콘들을 가지고 본인만의 스타일이나 규격 없이 막 만든 디자인이죠.

이런 것들이 이제 최악의 디자인이라고 보여지고요.

이제 이 강의 예제로 극단적으로 만들긴 했지만 좀 이해가 가실 겁니다.

실제로 이런 앱들을 예전에는 종종 봤기 때문에 넣어 놨고요.

오른쪽처럼 뭐 두께나 라운딩 크기 스타일 이런 부분들을 최대한 통일한 이런 디자인이 좋은 디자인이라고 저는 생각을 합니다.

그리고 아이콘에는 여러 가지 스타일이 있어요.

이게 5가지 아이콘 스타일이 있습니다. 아웃라인, 솔리드, 필드라인, 플랫, 글래스, 모피즘 이렇게 있습니다.

여러분들이 의도에 맞는 아이콘 스타일을 활용하시는 게 가장 중요하겠죠.

근데 뭐가 더 좋다 나쁘다는 없습니다만 정보를 습득하는 데 방해하지 않는 선에서 작업하는 것을 지향해야 합니다.

아이콘은 콘텍스트 적으로 정보를 제공하는 요소이지 절대 아이콘이 주인공이 되면 안 되겠죠.

단순 그래픽으로 활용되는 게 아니라 UI 적으로 사용되는 UI 아이콘인 경우는 아웃라인이나 솔리드 이 두 가지 타입 외에는 잘 사용되지 않는 편입니다.

같은 스타일의 아이콘이라도 두께에 따라서 느낌이 다를 수가 있습니다.

현재 보이는 아이콘은 24바 24라는 그 기준에서 3배 확대한 사이즈인데요.

두께가 1픽셀일 때와 1.5일 때와 1일 때 이 느낌이 다 다르죠.

1픽셀은 완전히 얇은 느낌을 주고요.

2픽셀은 조금 두꺼운 느낌을 줍니다.

요즘엔 해상도도 좋아지고 기술도 좋아져서 실제 1.5픽셀로 해도 과거처럼 픽셀이 안 맞았다고 해서 막 좀 찌그러져 보이거나 이런 경우는 거의 없습니다.

그래서 실무에서 라인 같은 경우는 1.5로 하는 디자이너들도 꽤 많이 봤습니다.

이런 두께도 여러분의 의도에 맞게 참고하시면 좋을 것 같고요.

그리고 아이콘을 단순화하는 것도 저는 매우 중요하게 생각을 하는데요.

디자인을 배운 지 얼마 안 된 분들이라면 혹은 처음 배울 때를 떠올려보면 오른쪽이 더 완성도가 높아 보일 수도 있습니다.

더 디테일해 보이니까요. 그런데 이 아이콘이 어디에 어떻게 사용되는지를 여러분들이 고민하실 필요가 있습니다.

실제 사이즈를 보여드리면 아마 깜짝 놀라실 거예요. 24바이 24인데, 실제 사이즈로 보면 완전 코딱지만.

24 사이즈로 저 복잡한 아이콘을 줄이면 이렇게 뭐가 뭔지 모르는 지저분한 아이콘이 탄생하게 됩니다.

크게 봤을 때 좋은 게 있고 작게 봤을 때 좋은 게 있지만 앱에서는 작았을 때 아이콘이 대부분이기 때문에 형태를 파악할 수 있는 선에서 최소한의 요소로 작업이 돼야 됩니다.

그리고 아이콘 사이즈에 대해서도 이제 알아봐야 되겠죠.

여러분들이 실제 작업을 할 때는 기본적으로 24바이 24라는 규격 안에서 작업을 해야 합니다.

24바 24라고 해서 그걸 꽉꽉 채워서 디자인하는 게 아니라 안전한 영역이라고 있습니다.

안전한 영역은 20바이 20의 사이즈인데요. 저 안에 들어가도록 작업을 해야지 혹여나 PNG를 사용한 환경에서 저장했을 때 어색하게 아이콘이 짤리는 현상을 방지할 수가 있습니다.

그리고 아이콘 크기에 대한 시각 보정에 대해서도 고민을 같이 해야 되는데요 시각적으로 부피의 면적이 균일한지도 확인해야 합니다.

여기 예시처럼 왼쪽이나 오른쪽 둘 다 100%로 이렇게 만들었지만 왼쪽이 더 커 보이는 착시가 일어나죠.

컴퓨터와 다르게 인간의 눈은 조금 더 예민한데요.

이러한 가로 세로에 대한 사이즈로 보는 게 아니라 이 여백과 물체의 면적에 대한 부피감으로 바라보게 됩니다.

시각 디자인을 배우시면 기본적으로 시각 보정에 대해서 배우게 되는데요.

둘 다 똑같은 높이의 100이라는 높이의 도형이라도 면적으로 비슷하게 보기 위해서는 112%를 맞춰줘야 됩니다.

원의 넓이를 구하는 공식은 파이 곱하기 반지름의 제곱이죠.

파이가 대략 뭐 3.14 뭐 뭐라고 했을 때 대략적인 값을 맞추려면 112%를 해줘야 된다.

그런데 이러한 정확한 공식을 여러분이 외울 필요가 없습니다.

이런 시각 보정을 위한 가이드라인인 키라인이라는 것을 제공합니다.

아이콘의 생김새가 정육면체, 원형, 직육면체 이렇게 생긴 아이콘들이 꽤 많죠.

그 아이콘 스타일에 따라서 균형감을 주기 위해서 이런 면적을 가이드를 제공하고 있습니다.

정확한 수치로 설명을 드리면 실제 24x24 안에 들어가는 아이콘의 규격을 보시면 정육면체는 18x18이고요, 원형은 20x 20 그리고 직육면체는 20x16이나 16x20으로 제공하고 있습니다.

실제 디자인을 할 때는 이 가이드라인에 맞춰서 여러분이 아이콘을 제작을 하게 되면, 뭐 2~30개 정도 되는 UI 아이콘을 쭉 모아놨을 때 전체적으로 균형감 있는 좋은 아이콘을 사용하실 수가 있을 겁니다.

다시 한번 요약하고 넘어가 볼게요.

어느 누가 봐도 직관적인 아이콘을 사용하셔야 되고요.

그리고 24라는 작은 사이즈에서도 잘 읽히는 형태인가, 이것들을 체크하셔야 됩니다.

아이콘을 수십 개를 사용하실 텐데 그 전체적인 아이콘들이 스타일이 통일되어 보이는지 이것들을 체크해야 되고요.

마지막은 OS 가이드라인에 맞는 이 규격에 맞게 잘 제작이 되었는지 이런 것들을 체크하시면 좋을 것 같습니다.

다음 영상에서는 타이포그래피에 대해서 자세하게 배워보도록 할게요.

앱 UI 디자인 기본 : 아이콘 디자인시 알아야 할 개념 및 가이드라인 - UXUI 디자인 강좌 2-4

디자인 첫걸음은 디자인베이스와 함께
새로운 분야에 첫발을 내디딜 때 누구나 막연하게 두렵죠.
디자인베이스를 디딤돌 삼아 디자인을 시작해보세요.


디자인베이스

아이콘 디자인 시 직관성, 통일된 스타일, 단순함, 그리고 규격과 시각 보정을 고려해야 한다.

직관적인 아이콘은 사용자가 쉽게 이해할 수 있어야 하며, 통일된 스타일은 전체 디자인의 일관성을 유지하는 데 중요하다.

단순한 형태는 작은 크기에서도 명확하게 인지될 수 있도록 하며, 규격과 시각 보정은 아이콘 간의 균형감을 제공한다.

아이콘은 단순한 그래픽이 아닌 **텍스트를 대체하는 일종의 약속**이며, 정보를 함축적으로 전달하는 중요한 역할을 합니다. 일상생활에서 흔히 볼 수 있는 비상 탈출구, 화장실 아이콘처럼, **아이콘은 언어와 같은 기능**을 수행합니다.

스티븐 헬러는 "아이콘은 언어다"라고 말하며, UI 디자인에 적용되는 아이콘 역시 같은 원리가 적용됩니다. 따라서 **아이콘 디자인 시, 핵심적인 요소들을 고려**해야 합니다.

UI 아이콘 디자인 시 고려해야 할 핵심 4가지는 **직관성, 통일된 스타일, 단순함, 아이콘 규격 및 시각 보정**입니다. 이 중에서도 직관적인 아이콘이 가장 중요하며, 디자인 초보자들이 흔히 간과하는 부분은 지나치게 단순하거나 본인만 이해할 수 있는 아이콘을 사용하는 것입니다.

안드로이드와 iOS 가이드라인에서는 **아이콘이 간단하고 친근해야 하며, 본질적인 특성에 집중해야 한다**고 강조합니다. 따라서 최대한 익숙하고 공통화된 아이콘을 사용하는 것이 중요합니다.

서로 다른 스타일과 규격의 아이콘들을 혼용하는 것은 최악의 디자인입니다. **두께, 라운딩 크기, 스타일 등을 최대한 통일**하여 디자인해야 합니다.

아이콘에는 아웃라인, 솔리드, 필드라인, 플랫, 글래스, 모피즘 등 다양한 스타일이 있으며, **정보 습득에 방해되지 않는 선에서 의도에 맞는 스타일을 활용**하는 것이 중요합니다. UI 아이콘의 경우, 아웃라인이나 솔리드 스타일이 주로 사용됩니다.

같은 스타일이라도 **두께에 따라 느낌이 달라질 수 있습니다**. 1픽셀, 1.5픽셀, 2픽셀 등 두께 변화를 통해 다양한 느낌을 연출할 수 있으며, 최근에는 1.5픽셀을 사용하는 디자이너들도 많습니다.

아이콘은 **형태를 파악할 수 있는 선에서 최소한의 요소로 디자인**되어야 합니다. 디테일이 높을수록 완성도가 높아 보일 수 있지만, 실제 사용되는 작은 사이즈에서는 오히려 지저분해 보일 수 있습니다.

**24x24 사이즈**에서 복잡한 아이콘을 사용하면 식별하기 어려워집니다. 앱에서는 작은 아이콘이 주로 사용되기 때문에, 작게 보았을 때 형태를 파악할 수 있도록 단순화하는 것이 중요합니다.

기본적으로 **24x24 규격 안에서 디자인**해야 하며, 안전 영역인 20x20 사이즈 안에 아이콘이 들어가도록 작업해야 PNG 사용 시 잘리는 현상을 방지할 수 있습니다.

시각적으로 부피의 면적이 균일한지 확인하는 **시각 보정**도 중요합니다. 인간의 눈은 가로 세로 사이즈가 아닌 여백과 물체의 면적에 대한 부피감으로 인식하기 때문에, 동일한 높이라도 면적에 따라 다르게 보일 수 있습니다.

키라인 가이드라인은 아이콘의 생김새(정육면체, 원형, 직육면체)에 따라 균형감을 주기 위한 면적 가이드를 제공합니다. **가이드라인에 맞춰 아이콘을 제작하면 전체적으로 균형감 있는 UI를 구성**할 수 있습니다.

아이콘 디자인 시, **직관적인 아이콘 사용, 작은 사이즈에서의 가독성 확보, 스타일 통일, OS 가이드라인 준수** 등을 반드시 체크해야 합니다.

아이콘은 사랑, 좋아요 등 다양한 의미를 함축적으로 담고 있으며, 텍스트를 대신하여 정보를 전달하는 약속이다.

비상 탈출구, 화장실 아이콘처럼 전 세계적으로 통용되는 기호에 익숙해져 있다.

스티븐 헬러는 '아이콘은 언어'라고 정의하며, UI에 적용되는 환경이 다를 뿐 크게 다르지 않다.

UI 아이콘 디자인 핵심 고려사항 4가지

직관적인 아이콘 사용이 가장 중요하며, 통일된 스타일, 단순한 형태, 규격 및 시각 보정이 필요하다.

지나치게 단순하거나 본인만 아는 아이콘은 피해야 하며, 안드로이드와 iOS 가이드라인은 간단하고 친근하며 본질에 집중해야 함을 강조한다.

여기저기서 다운로드한 무료 아이콘들을 스타일이나 규격 없이 사용하는 것은 최악의 디자인이다.

두께, 라운딩 크기, 스타일 등을 최대한 통일하는 것이 좋은 디자인이다.

아웃라인, 솔리드, 필드라인, 플랫, 글래스, 모피즘 등 다양한 스타일이 있으며, 의도에 맞는 스타일 활용이 중요하다.

정보 습득에 방해되지 않는 선에서 작업해야 하며, 아이콘이 주인공이 되어서는 안 된다.

UI 아이콘은 아웃라인이나 솔리드 타입이 주로 사용된다.

아이콘 두께에 따라서 느낌이 달라질 수 있으며, 1픽셀과 2픽셀의 느낌이 다르다.

디테일한 아이콘이 완성도가 높아 보일 수 있지만, 실제 사용되는 크기를 고려해야 한다.

작은 사이즈에서는 형태를 파악할 수 있는 최소한의 요소로 작업해야 한다.

기본적으로 24x24 규격 안에서 작업하되, 안전 영역인 20x20 안에 들어가도록 디자인해야 한다.

시각적으로 부피의 면적이 균일한지 확인해야 하며, 면적에 대한 부피감으로 바라봐야 한다.

면적으로 비슷하게 보이기 위해서는 112%를 맞춰줘야 한다.

시각 보정을 위한 가이드라인인 키라인을 제공하며, 아이콘 형태에 따라 면적 가이드를 제공한다.

정육면체, 원형, 직육면체 아이콘에 대한 규격을 제공하여 균형감을 준다.

직관적인 아이콘 사용, 작은 사이즈에서도 잘 읽히는 형태, 통일된 스타일, OS 가이드라인에 맞는 규격 준수가 중요하다.

다음 영상에서는 타이포그래피에 대해 다룰 예정이다.

앱 UI 디자인 기본 : 아이콘 디자인시 알아야 할 개념 및 가이드라인 - UXUI 디자인 강좌 2-4

앱 UI 디자인 기본 : 아이콘 디자인시 알아야 할 개념 및 가이드라인 - UXUI 디자인 강좌 2-4

스크립트