brunch

매거진 골라먹는 디자인 공부

라이킷 58 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Geulism Jun 03. 2019

Adobe illust style system

디자인 시스템

3번째 이야기이다. 꾸준히 해나가야 할 일이라고 마음먹었건만 - 그게 무엇이든 잘하고 싶어서, 그리고 잘하지 못하는 것 같다는 마음에 차일피일 미루게 되기도 한다. 그래도 꾸역꾸역 느리지만 하는 것 자체에 의의를 두자는 마음으로 시작한다.

이번에 다룰 이야기는 Adobe의 "Illustration"에 대한 이야기다. Adobe가 illustration style 구축을 위해 어떤 고민을 하였는지 고민의 과정을 중심으로 본다면 흥미롭게 다가올 것 같다.

이 글은 Adobe designer, Emma Zhang의 Article을 번역 및 편집하여 기고한 글이다. 더 자세하게 혹은 참고한 원본을 보고 싶다면 아래의 링크로 들어가서 읽어보면 좋을 듯하다.

[출처 : https://blog.usejournal.com/designing-adobes-brand-illustration-style-3c982ded31f6]

Context

제품과 사용자를 긴밀하게 연결해 주는 illustration style 구축

Illustration은 브랜드를 제품에 직접 표현하는 사용자 경험에 중요한 요소이다. 그렇기 때문에 Adobe에서도 "통일된 Illustration style의 필요성"에 대해 계속해서 중요하게 논의되어왔다. Adobe의 제품들은 점점 진화되어가고 있다. 그들은 사용자와 제품 사이를 깊게 연결해주는 illustration style 구축을 함으로써, 사용자들이 더 나은 브랜드 인식을 가지길 원한다.

Adobe는 100개 이상의 제품, 서비스 및 커뮤니티들을 가지고 있다. 이렇게 많은 제품 라인업 속에서 어떻게 독창적이고 재미있는 Illustration style을 만들 수 있을까?

Adobe's illustration history (as-is)

선형(linar) Illustration

시스템을 구축하기 전에 사용하던 Adobe Illustration style은 2016년 아이콘팀이 만든 "선으로 이루어진 Illustration"이다. 이미 많은 범위에서 사용되고 있었으며, 특히 빈상태와 사용자 온 보딩 플로우와 같은 영역에서 일반적으로 정보를 위한 맥락에서 사용되었다.

Welcome to CC assets by Marco Mueller

process 1.

기존 선형(linar) Illustration과 새로운 브랜드 Illustration의 통합 테스트

초반 illustration 구축을 시작하고자 했을 때, "기존 선형 스타일"과 새로운 브랜드 illustration 시스템을 함께 통합하여 두 영역을 최대한 원활하게 전환하고자 하였다. 하여 스토리 만들 때 선형 요소와 상호작용하는 그림을 추가하려고 시도하였다. 인물 스타일은 실제로 2001 년에 Acrobat 5.0 패키징 방식으로 사용된 일러스트레이션에서 영감을 얻었다고 한다.

Early illustration style experiment (L) Adobe Acrobat 5.0 Package Illustration (R)

Adobe Capture on-boarding illustration

CC library illustration

process 2.

첫 번째 스타일(process 1.)에 대한 내부 토론 후, 프로젝트 재검토 및 새로운 목표 설정, 방향성 모색

벡터 모양과 인간 그림의 조합의 스타일은 실제 너무 많은 곳에서 사용하고 있다. 이것은 시각적 정체성에 대한 우려로 이어졌고, 내부적인 토론이 계속되었다. 먼저 제품이 illustration을 사용하는 방식을 조사하고, 특정 접근법에 대해 고민하였다. 그리고 목표 설정과 시각적 요소 테스트가 이루어졌다.

*목표 설정

새로운 방향을 모색하기 전 디자이너들은 illustration style구축을 위한 목표들을 설정했다.

1) 창의적(creativitity)이고 재미있는(playful)적인 세계적인 일러스트레이션을 구현하길 원했고,

2) 스타일의 다양성을 허용할 수 있게 확장 가능형이어야 하며,

3) 다른 일러스트레이터들도 만들 수 있어야 한다. (이 의미는 곧, 일러스트를 그리는 일종의 가이드가 존재해야 한다는 것으로 나는 이해했다.)

4) 마지막으로 오직 Adobe만의 고유한 스타일이어야 한다는 것이었다.

*시각적 요소 테스트

시각적 요소들을(피부색, 옷 스타일의 세부 사항 및 그림자 등) 기준으로 인 물에게 더 많은 개성을 부여하고자 하는 테스트가 진행되었다. 그 결과 단순히 시각적 요소를 변경하는 것은 오히려 유연성과 확장성을 떨어뜨렸기에, Adobe는 표준 인간의 모습에서 조금 거리를 둔 추상적인 시각 어휘를 탐구하는 과정을 거치게 되었다.

process 3.

인간의 다양성 표현에 대한 생각의 전환

Adobe Spectrum Inclusive Design Mobile Banner

현재 소프트 환경은 획일화된 illustration을 가지고 있다. 종종 일러스트레이터들은 사람들의 다양한 모습을 포착하기 위해 illustration에서 사람들의 개인적, 창조적 특성을 제거하고 있다. 인물에만 초점을 맞추기만 하고, 그들의 생각을 좀 더 추상적으로 표현할 수 있을까에 대한 접근에는 미약하다. Adobe는 추상적인 모양을 통해 동일한 개념을 표현하고자 생각을 전환하였다.

process 4.

수립 원리와 탐구 : 새로운 스타일 정립을 위한 4가지 요소 테스트

새로운 스타일을 실험하고 정의하기 위해 4가지 요소를 중점적으로 다루었다.

1) 인간의 형태와 관점

2) 텍스쳐

3) 형태

4) 색깔

1) 인간의 형태와 관점

illustration에 인간 형태를 넣으면 사용자와 즉각적인 관계를 형성할 수 있다. 하지만 어느 정도까지 가능할까? 항상 인간의 구체적인 형태를 포함시켜야 할까? 그림자, 원근과 같은 세부적인 디테일 또한 포함시켜야 할까? 이러한 질문들이 던져졌고, Adobe는 고대 이집트 미술 스타일에서 영감을 받게 되었다. 음영이 거의 없는 고대 이집트 미술 스타일을 다양한 방법으로 조립해보고, 일련의 측면 프로필과 팔/ 손의 조합을 시도되었다.

고대 이집트 미술 The Weighing of the Heart

이집트 미술의 영향을 받아 테스팅한 측면 프로필

2) 텍스쳐

텍스쳐는 형태에 생명을 불어넣어 성격과 뚜렷한 스타일을 더해 인간적인 느낌을 주는 또 다른 좋은 방법이다. 미묘하지만 흥미로운 질감을 만들어 낼 수 있는 일련의 브러시를 선별하고, 테스트하는 과정이 있었다. (Adobe 디자이너들은 구성면에서 Option A의 개방성과 통풍성을 선호했지만 브러시 획 효과와 양식과의 통합 방법은 Option E의 을 좋아했고, 두 가지 스타일을 결합하여 탐구하기로 결정했다고 한다.)

Kyle’s explorations of textures

3) 형태

형태는 디자인 원리에서 중요한 역할을 하며, 새로운 스타일과 이전 illustration을 연결하는데도 도움이 된다. 절대주의와 구성주의는 모두 기본적인 기하학적 형태의 사용과 영향력 있는 시각적 디자인을 만들기 위한 구성의 중요성에 중점을 두는 예술운동이다. 이 두 예술 운동에 영감을 받아 두 가지 스타일을 모두 결합해보는 테스트가 진행되었다.

Alexander Rodchenko and Varvara Stepanova’s famous Books! poster (1924)

4) 색상

색상은 illustration과 제품 간의 연결을 강화시키는 역할을 한다. Adobe는 확장 가능하고 융통성 있는 색상 조합을 만들고자 했다. 제품의 브랜드 "기본 테마 색상"을 선정하고, 그 색상을 보완하는 "추가 색상"을 포함하는 색상 팔레트가 만들어졌다. 이를 통해 디자이너는 각 그림에 가장 적합한 것을 선택하여 사용할 수 있다. 색상을 사용하는 유일한 가이드라인은 단 2가지다. 첫째, 어두운 색상은 선작업에만 사용할 수 있게 하고 둘째, 밝은 색상은 솔리드 모양과 배경에 나타낸다. 이러한 가이드라인은 레이어가 어떻게 구성되어있는지 보여주는 역할을 하게 된다.

process 5.

시각적 언어 정리하기

1) 스토리텔링과 추상적 단계

이야기를 하기 위한 올바른 시각적 언어를 찾으려면 위에 다룬 이야기들을 조합해야 한다. 하고자 하는 이야기는 간단하다. 많은 이야기를 포함하기 위해서는 illustration안에 있는 요소를 최소화하여야 한다는 것이다. 하단의 두 그림은 요소들을 최소화시키면서 개념을 명확하게 전달하고 있다.