00-Syrup-Character_Titlegw

신입 디자이너들이 알아두면 좋은 아이콘 디자인 프로세스 & 팁(Tip)

입사하고 얼마 지나지 않아 팀장님으로부터 아이콘 그리기 미션을 받았을 때, 열심히 브러시를 문질러가며 아이콘을 그리던 기억이 납니다. 지금 생각해보면, 팀 선배들이 저를 보면서 “쟤를 어디서부터 어떻게 가르쳐야 하나…” 얼마나 막막하셨을지 웃음이 나네요.

그랬던 제가 그래도 이제  “나는 필요한 아이콘을 잘 표현할 수 있어”라고 생각하게 되기까지, 선배들로부터 그리고 저 스스로 터득한 일련의 아이콘 디자인 프로세스들과 팁들을 정리해 보려고 합니다.

일정상 여유가 있는 프로젝트라면 모르지만, 대부분의 프로젝트에는 짧은 일정이 주어지기 때문에 바쁜 선배들이나 동기들에게 그 요령들을 일일이 물어가며 배우기는 사실 무리가 있습니다.
이제 갓 입사준비를 하는 신입 디자이너라면, 미리 숙지하면 도움이 되리라 생각합니다. ^^

아이콘 디자인 프로세스

디자인 프로젝트를 진행하면서 아이콘이 필요한 경우는 아래와 같습니다.
– 요소를 직관적으로 알아보기 쉽게 하기 위해
– 이유 있는 장식 요소가 필요해서
– 좁은 영역을 효율적으로 이용하기 위해 등

수많은 아이콘의 형식 중 어떤 것을 선택할지는 그 아이콘을 필요로 하는 프로젝트와 페이지의 전반적인 디자인 또는 고객사의 브랜드 아이덴티이 등에 따라 달라집니다.

1. 아이콘 형식 결정하기 

속이 차있는 면(Solid) 아이콘이 될지, 속이 비어있는 선(Line) 아이콘이 될지, 그렇다면 그 두께는 얼마나 될지, 단색 아이콘이 될지, 다색 아이콘이 될지, 각지고 단단한 아이콘이 될지, 동글동글 귀여운 아이콘이 될지 등의 수없이 많은 개성을 드러낼 수 있는 요소들을 복합적으로 고려하여 그 아이콘의 성격을 결정합니다.

01

브랜드 아이덴티티 컬러가 포인트로 사용된, 라인과 면을 혼용한 아이콘
(출처. Syrup Wallet Character Design Project)

 

02

프로젝트 전반의 컨셉에 맞추어, 한쪽 귀퉁이를 비운 라인아이콘
(출처. HDC 현대산업개발 웹사이트)

 

03

브랜드 폰트를 아이덴티티로 사용한 두꺼운 라인아이콘
(출처. YG Family App Design Project)

 

2. 쓰이는 용도에 따른 고민 

쓰이는 용도에 따라서도 명확하게 계획을 해야 합니다.
정보 이해를 돕기 위한 목적으로 텍스트와 함께 쓰이기도 하지만, 단일하게 아이콘 혼자 정보를 전달해야 하는 경우도 있고(이런 경우에는 더더욱 명확하게 사용자들에게 인지를 줄 수 있는 형태가 되어야 하니 비교적 더 많은 고민이 필요합니다), 특정 메뉴 카테고리나 기능을 대표하게 되는 경우가 많기 때문에 함축적인 의미가 잘 부여되도록 표현해야 합니다.

04

아이콘을 눌러보지 않아도 모두 어떤 기능을 하고 있을지 짐작할 수 있습니다.

(출처: Soundcloud App)

 

때문에 아이콘의 형태가 그 내용을 대표할 만한지, 보편적으로 일관된 이해가 가능한지 생각하고 또 생각해야 합니다.
고민하는 그 중에서 가장 일반적인 것, 보편적인 것, 누구나 이해할 수 있는 것, 그 오브젝트가 대부분 정답입니다.

3. 유사 아이콘 찾아 미리보기  

그렇게 프로젝트에 맞는 아이콘의 스타일과 용도를 정하고 나면 아이콘을 직접 그리는 작업에 들어가기 전에, 내가 그리려고 하는 아이콘의 개성이나 특징을 가진 유사한 아이콘이 이미 있는지 찾아봅니다.
유사한 아이콘을 찾고 나면 그 아이콘을 실제 작업될 페이지 디자인에 얹혀보고 대략적으로 어떤 크기로 들어가면 좋을지, 예상하는 느낌과 잘 맞아 떨어질지 ‘미리 보기’같은 느낌으로 고민해봅니다.
이 과정을 거쳐야 뒤늦게 “어? 예상했던 것보다 디자인에 안 어울리잖아!” 라거나 “뭐야 크기가 왜 이렇게 크지?” 하는 점들은 미리 발견할 수 있어, 여러 번 작업하게 되는 눈물겨운 수고로움을 덜 수 있습니다.

아이콘 디자인하기

아이콘을 디자인 할 때에 지켜야 할 규칙(?)이나 작업과 수정을 조금 더 수월하게 할 수 있는 방법들이 몇 가지 있습니다.

1. Pixel 배율 맞추기

실제 작업에 들어가기 전에 아이콘 패밀리의 사이즈를 명확히 정의해야 합니다.
웹에서는 자유롭지만, 모바일에 적용되어야 하는 경우에는 다양한 디바이스 해상도에 따라 이미지가 리사이징되기 때문에 아이콘의 전체 크기를 재보았을 때, 절반이나 1/4크기로 줄어들어도 아이콘의 픽셀이 어긋나지 않고 또렷이 잘 보이도록 특정 배수로 디자인하는 것이 좋습니다.
일반적으로는 4의 배수인 16, 20, 24, 28, 32, 48 … 등으로 작업하는 것이 가장 대응하기 편리합니다.

05

(출처: https://dribbble.com/shots/1160428-Lush-Icons-Sizes)

06

디바이스별 픽셀값, 밀도 및 dp값 등등을 상세히 확인할 수 있는 친절한 구글! https://design.google.com/devices/

 

2. Pixel 영역 맞추기

07

 

08

 

아이콘을 그릴 때에는 도큐먼트 안에 정해진 아이콘 영역만큼을 표시해두고, 아이콘 룩이나 크기가 서로 비슷하게 잘 그려지고 있는지, 그리드도 켰다가 껐다가, 가이드박스를 그려둔 레이어도 켰다가 껐다가 하면서 위와 같은 영역을 기준으로 그리곤 합니다. (새 도큐먼트에 아이콘만 나란히 모아놓고 그리기도 하고요) (Syrup Wallet Character Design Project)

아이콘 전체 영역을 배수로 맞추었더라도 아이콘 이미지가 리사이징(Re-sizing)될 때, 면(Solid) 아이콘의 경우에는 아이콘에 속한 각각의 Shape들도 짝수로 떨어져야 픽셀이 깨지지 않습니다.
선(Line) 아이콘의 경우에도 선의 두께를 짝수로 맞추어 주는 것이 바람직하지만, 선의 두께가 아이콘의 전반적인 분위기를 크게 좌우하기 때문에 짝수를 맞추지 않는 경우도 많습니다.

3. 시각적 크기 통일하기

한 패밀리에 속한 아이콘 각각의 사이즈를 통일하긴 하지만, 같은 영역 안에서의 Shape이라면, 사각형은 원보다 면적이 넓기 때문에 더 커 보이게 되지요.
그런 경우에는 임의로 원의 크기를 더 키운다거나 사각형을 조금 줄인다거나 하는 조정을 해야 합니다.

09

10

160px 그리드 안에서 사각형과 원을 그리는 예시를 들어보겠습니다.
상단의 원의 크기는 같은 그리드 안에서 그려졌지만 상대적으로 우측의 사각형보다 시각적으로 작아 보입니다.

사각형의 넓이는 동일하게 160x160px이므로 25,600제곱픽셀을 기준으로 보겠습니다.
같은 영역 안에서의 정사각형이 정원과 같은 면적이 되려면 원의 지름이 사각형 한 변의 약 1.13배가 되어야 합니다.

반대로 원의 크기에 약 0.88배를 하면 같은 너비의 사각형이 나오게 되지요.
때문에 160px에 1.13을 곱한 값인 약 180px로 원의 지름을 계산해야 25,434제곱픽셀로 원과 사각형이 서로 비슷한 면적을 갖게 됩니다.

사실 실제론 정확한 배수를 맞추기도 어렵고, 작업 중에 계산할 정신도 없는데다, 디자이너가 자신의 눈을 믿고 작업해도 충분하기 때문에, 대략적으로 이정도 크기면 둘이 같은 면적을 갖고 있다~ 라는 정도만 참고로 알고 있으면 될 것 같습니다.

4. 모듈화하기

아이콘 패밀리가 하나의 세트로 보이기 위해서는 각각의 아이콘의 형태와 특성에 맞게 모듈화 시키는 작업이 필요합니다.
한쪽 구석이 끊어져 있다거나, 한쪽 끝이 삐쭉 튀어나와 있다거나, 패턴이 들어 있다거나 하는 눈에 띄는 독특한 개성을 부여해 줄 수도 있지만 아이콘 자체에 그렇게 튀는 개성을 부여하지 않는 경우에도 아이콘을 모듈화 시켜서 통일감을 부여할 수 있습니다.

- 원/사각형 형태가 반복적으로 들어가는 아이콘 패밀리에는 같은 크기와 형태 넣기

11

(Syrup Wallet Character Design Project)

원이나 사각형이 반복적으로 들어가는 경우에는 같은 크기를 반복적으로 넣어주는 것이 좋습니다.
위 아이콘 패밀리로 예를 들자면, 각각의 아이콘들이 가지고 있는 밀도를 비슷하게 맞추기 위해, 장식요소들을 추가하고 빼는 과정에서 의도적으로 통일된 요소들이 있습니다.
Tea의 작은 사각형과, Store 아이콘의 작은 사각형, Card의 작은 사각형이 동일하게 반복적으로 들어있고, Mobile의 원과 Shopping의 원, Coupon의 원이 또 동일하게 반복적으로 들어 있습니다.
때로는 패밀리의 통일감과 밀도감을 위해 요소뿐만 아니라 아이콘 오브젝트 자체를 선별하고 변경하기도 합니다.

- 각진 형태가 들어가는 패밀리에는 모서리에 동일한 곡률(Radius, R값) 적용하기
각진 형태나, Stroke가 들어가는 아이콘에 R값을 적용할 경우 동일한 값을 적용해주는 것이 좋습니다.
R값이 커질수록 아이콘에서 풍겨지는 동글동글한 귀여움도 커지게 되지요.

12
(출처: https://dribbble.com/shots/1187976-Iconset-PSD)

모서리의 각도가 다른 경우에는 눈대중으로 그리기도 하지만, 정석대로는 원형 Shape을 이용해서 Round값을 적용하는 것이 맞습니다.

13
(출처: https://dribbble.com/shots/1447071-Golden-Ratio-Grow-Your-Ideas-Logo-Design)

- 대각선 표현이 필요한 Line icon의 경우 동일한 각도로 그리기
개인적으로는 단순히 수직 수평만으로 그려지는 아이콘을 좋아하고 그리기에도 더 편리하지만, 아이콘을 표현하기 위해서는 사선, 대각선 표현이 필수적으로 들어가게 되지요.
그런 경우에도 역시 같은 각도의 대각선을 규칙적으로 사용하는 것이 좋습니다.

아이콘을 그리다 보면 수직 수평뿐만 아니라 대각선을 그릴 때에도 이미 그려둔 Shape를 그대로 가져와 회전해서 쓰게 되는데요.
대각선의 경우 1 Pixel grid를 부분적으로 쓰기 때문에 같은 크기(두께)의 아이콘이어도 더 얇아 보인다거나, 작아 보이게 됩니다. 때문에 사선이 들어가는 경우에는 시각적으로 더 얇거나 작아 보이지 않도록 세밀하게 위치와 색상을 조절해주어야 합니다.

14

맨 좌측 아이콘을 회전하였을 때, 원본보다 뿌옇게 보이고 선이 옅어지는 것을 볼 수 있습니다.
이럴 때 맨 오른쪽 아이콘처럼 Stroke 색상을 조금 더 짙게 변경하여 이를 잡아주면 동일한 색상으로 보이게 됩니다.

(출처: https://dribbble.comshots1463373-Pixel-Trick)

 

5. Pixel 정리하기

아이콘을 그리면서 꼭 지켜야 할 것 중에 하나는 픽셀이 어긋나지 않도록 그리는 것입니다.
포토샵에서는 픽셀을 그릴 때 자동으로 1px 단위로 깨지지 않도록 찍을 수 있지만 실제로 작업을 하면서 Transform이라던지 Rotation을 하다 보면 픽셀이 1px grid에서 벗어나기도 합니다.

이를 방지할 수 있는 방법으로는

- 픽셀 미세조정 하기(Snap Vector Tools and Transforms to Pixel Grid)

15

픽셀 조정을 하다 보면 1px 이하 단위로 픽셀의 위치를 미세조정하고 싶을 때가 있습니다.
그럴 때 ‘Edit > Preferences > General’(Ctrl+K)의 맨 아래 항목 ‘Snap Vector Tools and Transforms to Pixel Grid’의 체크박스를 해제해주면 1px보다 더 작은 단위로 패스이동과 추가가 가능해집니다. (Path나 Shape 추가는 0.1px단위로, 패스 이동은 1/32px단위로 됩니다.)
따라서 필요에 따라 이 체크박스를 껐다 켰다 하면서 Shape툴을 이용하면 됩니다.

- ‘Align Edges’를 사용해 Shape의 크기를 조정할 때에도 픽셀 깨짐을 방지하기

16

CS5에서 CS6로 업그레이드 되면서 새로 추가된 기능, Path툴을 선택했을 때 상단에 나타나는 ‘Align Edges’라는 체크박스가 있습니다.
이 체크박스를 체크하게 되면 Path를 찍을 때나 Transform하는 과정에서 픽셀이 그리드 밖으로 나가지 않도록 방지해주는 역할을 해줍니다.
이것 역시 ‘Snap Vector Tools and Transforms to Pixel Grid’와 마찬가지로 필요에 따라 선택해서 사용하면 편리합니다.

17

픽셀 그리드에 맞게 깨끗하게 작업된 아이콘과 그렇지 않은 것
(출처: https://dribbble.comshots472498-Keep-to-your-pixel-grid)

아이콘을 그릴 때에는 추후에 수정작업 할 것을 고려하면서 만들어야 나중에 직접 작업하거나 혹은 다른 사람이 작업을 이어받아 하게 될 경우에도 어려움이 없습니다.
따라서 작업한 Shape를 합치지(Shape Merge) 않고 개별적인 Shape으로 남아있도록 작업해야 하며, 또 가능한 그 각각의 Shape들이 각각의 다른 Layer에 있지 않고 하나의 Layer에서 수정할 수 있도록 Layer Merge를 해주어야 합니다. (=Layer는 합치되, Shape는 합치지 않기)

18

 

19

(위는 O, 아래는 X)

20

- 라인아이콘은 Stroke가 아닌 Fill로 그리기
작업을 이어받아 하다 보면 선 아이콘(Line Icon)이 Stroke로 그려져 있어 불편함을 호소하시는 분들을 많이 보았습니다.

선 아이콘의 경우 선을 Stroke로 표현하지 않고, Fill으로 그려야 합니다.
즉, Line Color를 None으로 설정하고, 면으로 라인을 그리는 것이지요.
그래야 단축키(Alt/Ctrl+Delete)를 통해 색상 변경이 용이하고, 단일 레이어로 Shape를 합칠 수 있습니다.

Stroke로 아이콘이 그려지게 되면 모든 선 하나하나마다 Layer가 생기는데다 Layer Merge가 불가능해지기 때문에 공동작업에 불편함이 생길 수 있습니다.

지금까지 제가 라이트브레인 입사 후부터 지금까지 배우고 터득한 아이콘 디자인 프로세스와 팁을 정리해 보았습니다.
이렇게 정리하고 보니, 이 포스팅이 아직까지 자주 헤매는 저에게도 유용한 작업지침이 될 수 있을 것 같습니다. ^^

설명 드린 대부분의 프로세스와 팁들은 작업을 미려하게 하기 위해 편리하고 일반적인 방법들이고, 어차피 결론은 ‘예쁘고 보기 좋은 것이 최고’이기 때문에 그것에 초점을 두고 작업하는 것이 1순위라 할 수 있겠지요.

아이콘 미션만 주어지면 앞이 하얘지던 예전 제 모습을 다시 한번 떠올리며, 이 글을 마무리합니다.
부디 자그마한 도움이 되길 바라며..

– 가치디자인그룹 최보미

* 메인이미지 – 라이트브레인 포트폴리오, 시럽 캐릭터 디자인 (http://www.rightbrain.co.kr/CMS/?p=5389)

Share this:

5 comments, add your’s.

choi

정말 최고예요! 이렇게 자세히 친절하게 잘 알려주시다니 ㅠㅜ 감사합니다 ㅎㅎ 자주 와서 참고할게요 :)

1gramode

진짜 좋은글 잘 봤습니다. 다른분들은 아이콘디자인을 어떻게 하는지 궁금했었고, 작업이 막연하기만했는데 이렇게 잘 정리해주시다니 감사합니다ㅠㅠ!! 혹시 실례가 안된다면 이런 작업방식에 대해 나누는 스터디같은걸 해보시거나 추천할만한 교육이 있을까요?

blogadmin

Author

도움이 되셨다니 다행입니다. 앞으로 더 좋은 글과 정보로 찾아 뵙겠습니다 :-)

yeon

도움이 많이 되는 글이네요!! 잘보고갑니다 감사합니다>.<

정말 도움많이 되는 글이네요 ㅠㅠ 그런데 라인아이콘을 그릴때는 라인 굵기는 어떻게 맞추는지 알 수 있을까요 ?

Leave a comment