brunch

라이킷 597 댓글 20

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by maus x maus Apr 11. 2016

좋은 아이콘을 만드는 6단계

Better Icon Design in 6 Easy Steps

저자 Scott Lewis는 Iconfinder에서 프리미엄 아이콘의 퀄리티를 리뷰하는 과정에서 글을 쓰게 되었다고 합니다.

그런데 리뷰를 하면서 느낀 건 허접한 아이콘과 프리미엄(유료) 아이콘의 차이는 거의 한 끗 차이였습니다.

더 나은 아이콘 디자인에 여섯 단계에 내 디자인 가이드라인을 정리해보았습니다.

각 단계는 정말 기본적인 디자인 기본을 따른 가이드 형식이며 어떤 엄격한 규칙에 근거하지는 않았습니다.

센스 있는 디자이너라면 스스로 충분히 걸러 본인에 맞게 작업하면 좋을 거 같네요.

강아지 아이콘을 새롭게 작업하는 예를 들어해 보겠습니다.

실제로 iconfinder에 올라온 아이콘이며 프리미엄 아이콘 정도의 퀄리티는 아닙니다만 리디자인을 통해 프리미엄 아이콘 될 거 같습니다.

아이콘 디자인 시 고려할 3가지 항목

잘 만들어진 아이콘은 단일이던 세트이던 아래 3가지 항목에 근거합니다.

구조(structure)

구조는 모든 아이콘의 기본 형태(form)입니다.

만약 당신이 아이콘의 디테일을 무시하고 (아이콘 대상의) 주요 형태를 그릴 때 사각형, 원, 직사각형, 삼각형 등 혹은 유기적 형태를 구성하는지? 잘 만든 아이콘은 단순함, 인지 가능한 패턴 혹은 형태(form)에 근거합니다. 가장 대표적인 도형인 - 원, 사각형, 삼각형은 아이콘 디자인을 위한 시각적으로 안정적인 기반을 만들 수 있습니다.

기본 도형 조합으로 만들어라.

기호(Character)

아이콘의 기호는 단일 아이콘 혹은 아이콘 세트에서 공유되는 요소로 구성되며 라운드 모서리, 각진 모서리, 선의 굵기 그리고 스타일(플랫, 라인, 속이 채워진, 글리프)과 같은 요소들은 둥근 또는 사각형 모서리, 선 두께, 스타일 (평면, 선, 충전 라인, 또는 문자 모양), 컬러 팔레트 등과 같은 것들입니다.

아이덴티티(Identity)

아이콘의 아이덴티티는 아이콘 본질 자체이거나 아이콘을 고유하게 만드는 것에 있습니다.

아이덴티티는 좋은(work) 아이콘인지 아닌지를 가름 지어줍니다.

잘 만든 아이콘의 초석은 인식률 혹은 선명함에 있습니다: 사용자가 형태, 아이디어 혹은 동작을 인식하는 것.

기호와 아이덴티는 종종 오버래핑되기도 하는데 아이덴티티 요소들은 기호 세트의 일부분으로 이용되기도 합니다.

6단계 시작

1. 그리드로 시작하라

여기서 사용하는 그리드는 각각의 아이콘 디자인을 위해 기본 폼을 만들기 위한 기본 가이드가 포함되어 있습니다.

저는 그리드 외곽 2픽셀은 "No-go Zone"이라고 부릅니다. 절대 필요한 경우가 아니면 해당 영역을 침범하지 않습니다. 저 영역을 만든 이유는 아이콘 주위에 여유 공간을 두기 위함입니다.

아이콘의 구조의 일부는 일반적인 형태(동그라미, 삼각형 등) 및 방향입니다. 만약 당신이 아이콘 외곽에 선(line)을을 그리는 경우 도형의 형태는 보통 사각형, 원, 삼각형, 직사각형 혹은 대각선 방향의 사각형 등이 될 것입니다.

아래 [SQUARE LAYOUT] 이미지를 보면 3개의 사각형이 중앙에 하늘색, 오렌지색, 녹색으로 있습니다.

제작할 대부분의 아이콘은 중앙 오렌지색 영역에 정렬될 것입니다.

아이콘 자체가 가진 시각적인 무게에 의해 결정되는데 어떤 크기를 사용하는 게 맞는지 확인하고 싶은 경우 각 정사각형에 정렬을 시도해 보는 것도 좋을 거 같습니다.

아래 이미지를 보면 32픽셀 사각 형안에서 20x28픽셀의 사각형이 있습니다.

적당히(수치를 100% 맞출 필요 없이) 아이콘 비율에 맞게 가로 혹은 세로 비율로 아이콘을 20x28픽셀 혹은 28x20픽셀 형태를 준수합니다.

아래 그림과 같이 대각선 방향 아이콘은 원형 콘텐츠 영역의 가장자리에 정렬됩니다.

톱의 가장 바깥쪽 점은 원의 모서리에 정렬되는 것을 알 수 있는데 이런 것은 굳이 정확히 할 필요가 없습니다 영역입니다. 그냥 적당히 충분히 가깝게 해도 좋을 것입니다.

명심해야 할 것은 그리드나 가이드를 매번 정확하게 맞출 필요는 없습니다.

Dutch Icon으로 잘 알려진 Hemmo(아이콘 디자이너)가

"각각의 아이콘의 본질은 세트 구성의 중요성을 능가한다."

라고 말한 거처럼 그리드는 당신이 만드는 아이콘의 일관성을 유지하는데 도움을 주지만 만약 당신이 좋은 아이콘을 만드는 것과 규칙(rules, guide line)에 근거하여 만드는 선택 사이에 있다면 규칙에 너무 얽매이지 마세요.

2. 단순하고, 지오메트릭 형태로 시작하라

아이콘 디자인은 연필 스케치하는 것과 같은 방식으로 시작합니다:

만들고자 하는 대상의 중요 형태를 기본 도형인 삼각형, 사각형, 원을 이용하여 적당한 형태로 시작합니다.

만들려 하는 아이콘이 자연 속에 이는 유기적인 것이라도 (저는) Adobe Illustrator에서 시작합니다.

특히 화면에서 작은 크기로 아이콘을 만드는 경우 모서리(edge) 안에서의 미묘한 차이는 손으로 스케치한 아이콘을 덜 세련되게 보이는 결과를 줍니다.

기본 도형으로 아이콘 디자인을 시작하는 것은 모서리(edge)를 더욱 정교하게(특히 커브) 만들 수 있고

요소 간의 상대적 비율을 쉽고 빠르게 조절할 수 있고 그리드와 폼에 맞춰 작업되는지 가이드해줍니다.

3. 수치에 근거하라: 모서리, 라인, 코너, 커브, 각도

가능하면 구멍, 코너, 커브 그리고 각도는 수치적으로 정확해야 합니다. 눈대중으로 적당히 그리지 말고 수치를 믿고 따르세요. 요소들 간의 불일관성은 결국 아이콘의 퀄리티를 떨어뜨립니다.

Angles(각도)

대부분 45˚로 작업을 하거나 그 배수에 맞게 작업을 합니다.

45˚도의 각도에서 앤티 얼라이징은 한결같이 표현됩니다(액티브 픽셀이 끝에서 끝까지 정렬).

그래서 결과는 선명하고 완벽한 자연적인 대각선 각도로 육안으로 쉽게 패턴을 인식하기 쉽습니다.

이러한 인식 가능한 패턴은 하나의 아이콘에서 여러 아이콘 세트와의 일관성 있는 조합을 만들어 줍니다.

만약 45˚(배수)를 사용 못하는 경우 절반(22.5˚, 11.25˚) 또는 15˚의 배수를 이용합니다.

위의 경우의 수를 대입하는 경우는 매각각 다르기 때문에 먼저 어떤 각도로 할지 미리 정합니다.

45˚의 절반을 이용하는 경우에도 앤티 얼라이징이 충분히 깔끔하게 잘 표현됩니다.

Curves(커브)

프리미엄/프로페셔널과 어설픈 아마추어가 만든 아이콘 퀄리티의 큰 차이를 확연하게 드러나게 하는 것은 커브(형태, 사용)입니다.

사람의 눈은 작은 미세한 변화를 알아챌 수 있지만, 인간의 눈 손 협응(손과 눈의 동작을 일치시키는 능력: 눈으로 보는 것과 동시에 손이 행동하는 것이 불일치)은 항상 높은 수준의 정교함을 가져다주지 못합니다.

저는 커브를 만들 때 손대중으로 하기보단 가급적이면 도형 툴을 이용하거나 수치 값에 근거해 작업합니다.

매뉴얼 커브 작업을 위해 보통 Adobe Illustrator의 constraint modifier key(shift)를 쓰거나 bezier curves를 더욱 정교하게 사용하기 위해 Astute Graphics(어도비 일러스트레이터 플러그인)의 VectorScribe와 InkScribe를 사용합니다.

손으로 그린 비규칙적인 커브는 좋지 안타!

Corners(코너: 모서리)

저는 보통 둥근 모서리를 사용하지 않지만 그래도 모서리를 사용하는 경우 개인적으로 radius 값을 2픽셀의 로 합니다. Radius 값은 어떤 디자인을 하느냐에 따른 것이니 2픽셀을 하실 필요는 없습니다.

제가 radius 값을 2픽셀로 하는 이유는 코너가 깔끔하게 라운드 처리되고 그렇다고 둥글둥글하게 보이지 않기 때문입니다.

둥그런 코너를 사용하던 안 하던 간 전체적인 도형 형태의 일부로서 만들 수 있는 시각적 결정에 근거하게 되니 각자 알아서 판단하시면 좋을 거 같습니다.

Pixel-perfection(완벽한 픽셀)

완벽한 픽셀은 아이콘, UI 디자인 등 요즘 인기 있는 화두지만, 특히 작은 크기를 디자인할 때 중요합니다.

크기가 작은 아이콘의 모서리에 앤티 얼라이징으로 인해 아이콘이 흐릿하게 보일 수 있습니다(정말 흔히 보는 일이죠 ㅎㅎ). 픽셀 그리드에 정렬되지 않는 선 사이의 공간이 앤티 얼라이징이 뿌옇게 될 것입니다.

코너와 커브 역시 수치적으로 정확할수록 더욱 선명한 앤티 얼라이징이 될 것입니다.

그러나 앤티 얼라이징 문제만큼은 큰 사이즈 아이콘의 저변과 레티나 디스플레이와 같은 고해상도의 등장으로 pixel-perfection도 전보다는 중요도가 낮아졌습니다.

*Pixel-perfect: 앤티 얼라이징 없이 픽셀 하나하나 색이 선명하게 표현되는 것.

Line Weights(선 두께)

저는 선 두께를 이용해야 하는 경우 2개의 (선 두께) 값이 이상적이란 걸 알았습니다.

경우에 따라 3개일 수 도 있지만 만약 3개 이상의 선 두께를 사용하면 아이콘 간의 응집력을 잃을 수 있습니다. 2배수 크기의 아이콘을 계산하기 위해 2픽셀과 4픽셀 두께를 선호합니다.

종종 아이콘의 개별 세부 사항은 규칙을 깨는(두께를 2px을 3px로 하는 경우) 경우도 있습니다만 저는 최대한 맞추려고 합니다.

대부분의 경우 아주 얇은 선은 피해야 하는데 특히 글리프(glyph)나 플랫 아이콘은 더더욱 그래야 합니다.

만약 의도적으로 라인 스타일 아이콘을 만들려고 하지 않는 한 아이콘의 형태를 정의하는 데에 있어 라인에 의존해서는 안됩니다. 도형의 형태를 정의해 주는 빛과 그림자의 의존하세요.

4. 일관적인 디자인 요소를 사용하라

Dutch Icon(회사 이름)의 Hemmo가 Icon Salon 2015에서 아이콘 디자인의 요소에 대해 기발한 얘기를 오랜 시간 동안 했습니다.

네덜란드 정부와 2년 동안 진행하는 아이콘 시스템 프로젝트에서 Hemmo와 디자인 파트너는 "notch(V자 형태)"를 아이콘에 적용했습니다. 모든 아이콘이 "notch"를 가지지는 않지만 대부분은 notch가 적용되어 있습니다. 이런 류의 강조는 소극적으로 사용되었으나 아이콘 세트를 하나로 일괄되게 묶을 수 있게 큰 도움을 줍니다.