아이콘을 중심으로 프로젝트의 통일성을 주는 방법

오늘은 아이콘을 중심으로, 한 프로젝트 내부에 통일성을 주는 방법을 이야기하고자 합니다.

우리가 프로젝트를 처음 받게 되면 우선 하게 되는 일은, 회사의 아이덴티티를 확인하는 것인데요.
로고의 모양이나, 회사의 주 컬러를 확인하고 그것을 작업에 응용하는 것이 일반적입니다.

가장 유효한 방법이지요.

하지만, 점점 브랜딩에 관한 개념이 진보하면서,
점점 ‘주컬러, 주shape’에 대한 명확한 정의가 없어져 가고 있습니다.
(특히나 색상을 통한 브랜딩이 점점 약해지고 있습니다.)

다음은 요즈음의 브랜딩이 적용된 몇개의 로고 예시입니다.

PastedGraphic-128

PastedGraphic-108

 

PastedGraphic-89

 

PastedGraphic-612 PastedGraphic-320

PastedGraphic-319

자, 이것이 ‘트렌드’이건, 아니면 브랜딩에 관한 지평이 넓어진 ‘진보’인지는 논외로 하기로 하구요.
어찌되었건 분명한 것은, 앞으로 어떤 브랜드의 작업을 수주하건 간에 –
이전처럼 ‘그 회사의 주 컬러는 뭐지?’, ‘그들이 주로 쓰는 기법은 뭐지?’ 라는 질문의 중요성이
낮아진 것만은 사실이라고 생각합니다.

저희같은 디자인 분야에서는 조금 부담스러운 시대이긴 합니다.
위의 이야기는 – 역으로 이야기하면, 디자인을 할 때, 어느 정도의 ‘리브랜딩’이
디자이너에게 요구된다는 뜻이니까요. (할 일이 많아진 것이지요.)

그렇다면, 우리는 어떻게 해야, 본래의 (클라이언트의) 브랜딩을 해치지 않으면서도
내적인 통일성이 있는 리브랜딩을 할 수 있을까요

이것에 관해서는, 다양한 의견이 있을 수 있고,
또한 접근 방법도 여러가지가 있어서 – 이 글에 모두 담기에는 무리가 있겠다고 판단했습니다.

그래서, 범위를 좁혀서, 아이콘에 한정하여 이야기를 전개하려 합니다.

 

1. Axonometric, Isometric : 일정한 기울기를 통해

 

PastedGraphic-129

 

액소노메트릭, 아이소메트릭은 ‘각을 갖는’ 입체 좌표틀을 말합니다.

우리말로 하면 뭐 ‘등각투상법’라고도 하지요. ^^

3D 하셨던 분들이나 제도/건축하셨던 분들에겐 익숙한 내용이겠지요.

2D인 평면에서 3D를 효과적으로 보여줄 수 있도록 고안된 방법입니다.

하지만, 요즘은 다음과 같이 개성있는 형태를 그리는 데 사용됩니다. 당연히 – 입체가 필요한 아이콘을 그릴 때 많이 사용됩니다.

 

다음은 axonometric(Isometric보다 상위개념)을 이용한 그래픽입니다.

 

PastedGraphic-134

 

 

Nokia에서 새로 만든 아이콘 가이드에는 이런 내용도 있습니다.

PastedGraphic-144

간단히 이야기하면, 30도를 권장하되, 특수한 상황이 있을 경우는 ‘차선으로’ 45도를 사용할 수도 있다는 내용입니다.

T store 3.0을 할 때도 비슷한 컨셉을 차용했었습니다.

PastedGraphic-154

T store 로고로부터 특정 각도를 추출해서

PastedGraphic-164

 

다음과 같이 ‘흔하지 않은’ 기울기를 사용함으로써 내적인 통일성을 유도했었습니다.

이것은 3D/axonometric이 아니라 단순히 ‘기울기’이지요. ^^

2D angular grid라고 바꿔 부를 수도 있겠습니다.

PastedGraphic-282

 

 

몇가지 예를 더 보겠습니다. 각을 사용한 아이콘들입니다.

PastedGraphic-185 PastedGraphic-194 PastedGraphic-202 PastedGraphic-216 PastedGraphic-223

 

 

2. 일정한 스트로크, 모눈을 사용한 밀도 유지

PastedGraphic-234

 

아이콘이 어려운 이유 중 하나는,
각 표현식이 다른 경우에도 일정한 화면 밀도를 맞춰 주어야 한다는 점입니다.

위의 세 아이콘은 서로 밀도가 다른 형태를 통일한 좋은 예입니다.
일반적으로 그렸다면 밀도가 높은 순으로 열쇠>휴지통>말풍선이 되었겠지요.

하지만, 휴지통에서는 수직선을 생략하고, 말풍선에서는 예외적인 작은 라운딩을 사용하여
변화를 주었습니다.

아이콘을 그릴때, 위처럼 일정한 모눈의 크기를 정해놓고
그 안에서 해결하려고 시도하는 것은 밀도를 맞추는 데 아주 유용한 방법 중 하나입니다.

PastedGraphic-253

이 아이콘셋은 무려 4개의 선 굵기를 사용하고 있지만
통일성은 오히려 강화되었습니다. 이와 같이 선 굵기를 ‘규칙에 맞추어’ 사용하는 것도
아이콘 통일화에 효과적일 수 있습니다.

또한, 가장 중요한 요소중 하나인 ‘라운딩’의 통일성도 염두에 두시면 좋습니다.
라운딩은 특성상 ‘연령’을 설정하는데 도움이 되는데요.
라운딩이 크면 좀 어려지고, 작으면 시크해지고. ^^ 다들 아는 이야기이지요? ^^

아래의 그림과 같이, 라운딩도 위 스트로크와 같이
몇개를 설정해서 규칙성을 만드는 것이 좋습니다.

PastedGraphic-343

이 CISCO에 비해서 아래 아이콘들은 훨씬 더 성숙해보이죠?

PastedGraphic-353

 

3. Module의 활용

PastedGraphic-262

PastedGraphic-273

조금 어려운 방법으로, 기본 ‘모듈’을 응용하여 그리는 방법입니다.

조금 빡세지만 한 번 규칙을 잘 만들기만 하면,
누구도 넘볼 수 없는 완전한 ‘고유의’ 아이덴티티를 만들 수 있습니다.

PastedGraphic-301

우리나라에서는 카드 모서리를 형상화한 현대카드의 ‘YouAndI’체가 있습니다.

PastedGraphic-3110

한 때 유행했던 ‘선 끊기’도 이런 모듈링의 일환입니다.

아래는 유명한 Siruca Pictogram인데요. 여러모로 아주 좋은 귀감이 됩니다.

오픈소스이니 다운받아서 열어보시길 권합니다. ^^

http://www.fsd.it/sirucapictograms/

 

PastedGraphic-333

 

아이콘 관련하여, ‘세계의 비주얼 랭귀지를 구축하자’는 목표를 가진 비영리 조직 the Noun Project가 진행되고 있습니다.

http://thenounproject.com

PastedGraphic-383

오늘의 이야기는, 사실 다들 어느 정도는 알고, 공감하고 있던 내용이라 여겨집니다.
방법적인 부분에서 자신의 작업을 점검하는 계기가 되었으면 합니다.

정리하자면, 아이콘을 제작할 때 스스로 점검해야 하는 부분은

1. 아이콘간의 밀도 균형
2. 스트로크(선 굵기), 라운딩등의 통일
3. 개성을 가질 수 있는 부분을 모듈화하여 반복하기
4. 여타 일반 아이콘들과 차별점 만들기

정도가 될 듯 하네요.

 

감사합니다.

 

– BS Kim (가치디자인그룹)

Share this:

Leave a comment