아이콘을 보다 완벽하게
아이콘 키 가이드에 대한 이해와 제작 방법
아이콘은 개체의 의미와 기능을 효과적으로 표현하고 전달할 수 있는 시각적 언어입니다. 아이콘을 시각적 언어라고 하는 이유는 글자와 이미지만으로 개체의 의미를 전달하기 어려운 추상적인 개념을 표현해야 할 때 시각적 요소인 아이콘을 통해 의미를 전달하기 때문입니다.
또한 시대의 흐름이 데스크톱에서 모바일로 변화하면서 작은 화면 안에서 텍스트와 이미지는 화면의 너무 큰 영역을 차지하게 되어 자연스럽게 보다 적은 면적으로 의미를 전달할 수 있는 아이콘의 사용 비중이 높아졌습니다.
이처럼 오늘날의 아이콘은 UI 디자인에서 매우 중요한 요소 중 하나가 되었습니다. 그래서 보다 좋은 아이콘을 만들기 위해 필요한 요소들에 대해서 이야기해보려 합니다.
아이콘 키 가이드
키 가이드는 여러 명이 동시에 작업하는 팀 프로젝트에서 아이콘들에 일관성을 부여하고 작업 속도를 높여줄 수 있는 장치입니다. 여러 사람이 제작하더라도 키 가이드를 통해 동일한 시각적 가중치를 줄 수 있는 동시에 빠르게 아이콘을 제작할 수 있기 때문입니다.
하지만 가이드는 가이드일 뿐 절대적인 것은 아니기 때문에 규칙을 어겨야 할 때와 따라야 할 때를 스스로 인지하는 것이 매우 중요합니다. 그런 상황판단을 하기 위해서는 어떤 요소들로 구성되어있는지 알고 구조를 제대로 파악하고 있어야한다고 생각해 아이콘 키 가이드의 구성요소들에 대해서 이야기해보려 합니다.
Pixel Grid
최근에는 SVG 아이콘이 많이 사용되는 추세이지만 그래도 PNG 이미지를 사용하는 경우도 많이 있습니다. PNG라는 비트맵 그래픽 처리방식의 이미지를 사용하게 되면 저해상도 화면에서 테두리 부분에 안티앨리어싱이라는 계단현상이 발생하게 되는데 이러한 현상을 최소화시키기 위해서는 Pixel Grid에 맞춰서 제작하는 것이 매우 중요합니다.
위의 이미지처럼 24px 사이즈에서 휴대폰 아이콘을 픽셀 그리드에 맞춰서 그린다면 비교적 깔끔하게 렌더링 된 아이콘을 볼 수 있을 것입니다. 하지만 시각적 밸런스를 맞추기 위해 정확히 픽셀을 맞추는 것이 힘들 때가 있는데 그런 상황에서는 0.5 단위의 소수점에 맞추어서 제작하는 것을 추천드립니다.
Keyshapes
Pixel Grid가 선명한 이미지 처리를 위한 요소라면 Keyshapes는 아이콘의 유연성과 규칙성을 부여하는 요소입니다. 유연성과 규칙성을 제시하되 모든 아이콘이 기본 모양과 완벽히 일치해야하는 것은 아니며 단순히 각 아이콘들이 차지하는 공간 사이의 비율이 일치하는지를 비교하는 역할을 가지고 있습니다.
Keyshapes는 위의 이미지처럼 정사각형, 세로 직사각형, 가로 직사각형, 원형으로 구성되는 것이 기본 형식입니다. 각 도형들이 비슷한 점유 공간과 사용 가능한 공간을 가지도록 제작하는 것이 중요합니다.
그렇게 구성된 keyshapes를 활용하는 방법은 위의 이미지처럼 왼쪽의 세로로 긴 카드 아이콘을 제작할 때는 세로 직사각형을 기준으로 제작하고 오른쪽의 가로로 긴 페이지 아이콘은 가로 직사각형을 기준으로 제작하여 동일한 시각적 밸런스를 가지도록 도와주는 것이 바로 Keyshapes의 역할입니다.
Orthogonals
아이콘을 그리다 보면 상태의 표현이나 프레임의 공간 제약 때문에 사선으로된 도형을 표현해야 경우가 존재합니다. 보통 전화기나 연필들이 사선으로 제작되는데 이러한 기울어진 아이콘들을 제작할 때 기준을 잡아주는 것이 Orthogonals의 역할입니다.
일반적으로 Keyshapes와 Orthogonals를 합쳐서 keyline이라고 명칭하고 있는데 위의 이미지처럼 아까 만들었던 keyshapes위에 프레임을 9 등분한 라인을 만들어주고 가운데 라인이 교차하는 지점들을 이어 작은 원 두 개를 생성해주면 Keyline이 완성됩니다.
활용되는 예시로는 위의 이미지처럼 나침반 아이콘의 자침을 45도 각도로 표현하고자 할 때 활용할 수 있습니다. 만약에 45도 보다 더 각도를 주고 싶다면 각도를 15도씩 증분 하여 기울여서 제작하는 것이 좋습니다.
Safe Area
Safe Area는 아이콘의 상하좌우에 안전영역을 의미합니다. 아이콘을 이미지로 추출할 때 안전영역을 지정하지 않고 프레임 영역에 꽉 채워서 아이콘을 제작하면 아이콘이 잘리는 현상이 일어날 수도 있기 때문입니다.
안전영역은 피해 주는 것이 좋지만 가이드보다 중요한 것은 전체적인 밸런스이기 때문에 안전영역을 침범해야 하는 불가피한 상황이라면 디자이너의 판단 아래 과감하게 안전영역을 침범하는 것도 괜찮습니다. 아이콘 세트에서 가장 중요한 것은 전체적인 밸런스이기 때문입니다.
아이콘 제작 규칙
잘 만들어진 아이콘은 아이콘이 가지고 있는 의미와 기능을 사용자에게 직관적으로 전달해 원활한 서비스 경험을 할 수 있도록 도와줍니다. 그런 좋은 아이콘을 만들기 위해 알려진 여러 규칙 사항들이 있지만 그중에서 명확성, 간결함, 밸런스가 가장 중요하다고 생각하여 이 세 가지 규칙들에 대해 이야기해보도록 하겠습니다.
명확성
아이콘은 사용자가 아이콘을 보고 그 의미를 정확하게 이해할 수 있도록 해야 합니다. 사용자가 아이콘이 무슨 의미인지 생각하게 된다면 사용자의 원활한 서비스 경험을 도와주는 요소가 아닌 방해하는 요소로 변형되기 때문입니다.
명확성이 왜 중요한지는 위 이미지의 버거킹과 맥도날드에 하단 탭 바의 쿠폰 아이콘을 보면 알 수 있습니다. 버거킹의 쿠폰 아이콘은 보는 즉시 쿠폰이라는 것을 인지할 수 있지만 맥도날드의 쿠폰 아이콘은 아이콘만으로 이해할 수 없고 하단의 쿠폰이라는 텍스트를 읽어야만 쿠폰 아이콘이라는 것을 인지할 수 있습니다.
물론 맥도날드가 아이콘을 통해 자사의 로고를 강조하고 싶었던 점은 이해하지만 이는 사용자를 두 번 생각하게 만드는 아이콘 디자인이며 쿠폰같이 명확한 의미가 있는 아이콘은 쿠폰이라는 것을 헷갈리지 않도록 명확하게 제작하는 것이 중요합니다.
간결함
아이콘이 명확하더라도 복잡하게 디자인되어있다면 아이콘을 보고 이해하는데 시간이 오래 걸릴 수 있습니다. 복잡한 요소들을 덜어내고 최소한의 형태로 아이콘을 제작한다면 사용자에게 아이콘의 의미를 빠르게 전달할 수 있을 것입니다.
예시로 머티리얼 가이드에서는 위 이미지의 오른쪽의 아이콘처럼 너무 많은 요소를 추가하는 것보다는 단순하게 아이콘을 디자인하는 것이 시각적 복잡성을 덜어주기 때문에 사용자가 빠르게 의미를 파악하기 용의 하다고 안내하고 있습니다.
밸런스
앞에 말한 명확성과 간결함이 사용자의 경험에 대한 이야기였다면 밸런스는 시각적 아름다움에 대한 규칙입니다. 아이콘의 정렬을 맞추기 위해 때로는 수치보다는 눈을 믿고 시각적으로 맞추라고 말하고 있지만 저는 눈대중으로 맞추는 것보다는 공간적 여백으로 접근하는 것이 더 좋은 방법이라 생각합니다.
보통 재생 아이콘을 말할 때 삼각형을 센터가 아닌 좌우 여백을 조절하여 디자인하라고 말하지만 위의 이미지같이 좌우 수치가 아닌 삼각형을 각 빗변과 원형의 여백 값을 동일하게 가져간다면 눈대중으로 가운데 정렬을 하는 것보다 더 정확하게 가운데 정렬처럼 보이게 만들 수 있습니다.
여백이 동일해야 비슷한 시각적 밸런스를 가질 수 있다는 것을 증명하자면 여백은 곧 넓이를 의미하기 때문에 같은 수치의 사각형과 원형의 넓이를 계산해보면 쉽게 이해할 수 있습니다. 위의 이미지를 보면 같은 사이즈이지만 원형이 사각형보다 작게 느껴지는 것을 느낄 수 있습니다.
이를 동일한 크기로 보이게 하기 위해 원형의 크기만 23px로 키우면 두 도형의 넓이가 비슷해지고 눈으로 보기에 비슷해지는 것을 볼 수 있습니다. 그렇기 때문에 우리가 같은 아이콘을 그리더라도 원형의 아이콘을 조금 더 크게 그리는 이유입니다.
좋은 아이콘 디자인이란
아이콘을 디자인할 때 올바른 가이드와 규칙성을 토대로 만든다면 디자인의 퀄리티를 더욱 높이게 되지만 가이드의 의미와 규칙들을 이해하지 못한다면 마음대로 디자인한다면 오히려 아이콘이 디자인의 퀄리티를 낮추고 사용자에게 혼동을 주는 요소가 될 수 있습니다.
머티리얼이나 휴먼 인터페이스를 참고하여 가이드나 규칙성을 배울 수는 있지만 단순히 남들이 그렇게 하니깐 따라 하는 것이 아닌 가이드를 구성하는 요소들이 왜 있고 규칙들은 왜 정립이 되었는지를 이해하고 디자인을 한다면 더 좋은 아이콘을 디자인할 수 있는 계기가 될 거라고 생각합니다.
