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

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

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

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

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

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

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

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

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

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

'아이콘은 언어다.' 우리가 배워 볼 이 아이콘은 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 디자인 기본 : 아이콘 디자인시 알아야 할 개념 및 가이드라인 - UXUI 디자인 강좌 2-4

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

Scripts