Adobe의 일러스트 디자인 프로세스

목차

1. 서론
2. Adobe 제품 일러스트의 간략한 역사
3. 이제는 트렌드를 버릴 때
4. 원칙과 연구 방향 설정하기
5. 시각 언어 정의하기
6. 텍스처와 선
7. 쇼케이스 

2.Adobe 제품 일러스트의 간략한 역사

우리 제품의 컬러 일러스트를 둘러보기 전에, 아직도 우리 제품군에서 넓게 쓰이고 있는, 우리 아이콘 팀이 2016년에 벌써 만들어두었던 선 형태의 일러스트를 보자. 이 선 일러스트들은 전형적으로 빈 상태나 튜토리얼 같은 영역의 정보 콘텍스트에 쓰인다.

첫 번째 릴리즈 후, 우리는 비주얼 아이덴티티와 관련한 걱정들을 쏟아내며, 어도비 내 원칙적인 디자이너 Khoi Vinh와 이 스타일에 대한 내부 회의를 가졌다. 그것의 흥미로운 역사적 기원과는 관계없이, 이러한 접근은 이미 테크 업계에서 많이 쓰이고 있는 벡터 모양과 사람 형상의 조합으로 이루어져있다. 그래서 우리 팀은 이 프로젝트를 다시 논의하고 다른 방향을 찾아보기로 했다.

“하지만 우리 제품을 다시 검토하려고 돌아간 것과, 우리가 왜 이러한 접근을 했는지 이해하려고 시도한 것은 가치 있는 일이었어요.” <Two Very Different Kinds of Illustration>, Khoi Vinh

난 주목할 만한 일러스트레이터/아티스트 Kyle Webster와 함께 일하게 되어서 영광이었다. 그 당시에는, 우리는 일러스트 스타일에 있어 몇 가지 목표를 세워뒀다.: 우리는 창의력과 장난스러움을 통해, 어도비가 가진 세계적인 수준의 일러스트에 대한 헌신을 보여주고 싶다. 일러스트 언어는 다양한 스타일로 만들어질 수 있어야 하며, 그래서 제품과 메시지의 시스템, 시간을 넘어 확장할 수 있어야 한다. 또한 다른 일러스트레이터가 기여할 수도 있어야 한다. 우리는 어도비가 유니크하게 느껴져야지, 다른 회사에게 “소유된"것처럼 느껴지지 않았으면 한다.

먼저, Kyle은 우리가 기존 일러스트 스타일을 강화할 수 있는 시각적 요소를 더할 수 있는지를 보려고 햇따. 당신도 볼 수 있듯이, 그는 피부색을 포함하여 디테일한 옷 스타일, 캐릭터마다 깊이를 주는 그림자 등의 특징을 통해 개성을 더했다.

“내가 본래의 재료를 가지고 얼마나 다른 스타일로 표현해낼 수 있는지 보는 것도 재미있는 반면, 좀 더 전통적인 인간 형태의 드로잉을 유지하면 이 방향이 우리가 원하는만큼 유연할 수 없다는 것이 명백해집니다. 동시에 우리게에 정말로 재미있게 놀면서 실험해볼 수 있는 공간을 주기도 하죠. 저는 방향을 바꾸고, 엠마가 독보적이고 확장 가능한 시각적 언어를 개발하기 위한 올바른 길로 갈 수 있도록 작업을 잘해줘서 기쁩니다.” -Kyle Webster

Kyle이 말했듯, 초기 리서치는 여전히 이전 스타일에 갇혀 있었고, 몇 번의 브레인 스토밍 세션 후에 우리는 좀 더 추상적인 시각 언어를 탐험하기 위해, 일반적인 사람 형태에서 멀어지기로 결정했다.

3.이젠 트렌드를 버릴 때

우리는 일러스트가 유니폼 같고(더 적절한 단어를 찾지 못 했다) 무난무난한 소프트웨어 환경에 존재한다. 종종, 일러스트레이터들은 넓은 타깃군을 잡기 위해, 그들의 일러스트에 등장하는 사람들의 개인적이고, 창의적인 개성을 지워버리곤 한다. 그들은 형태에 집중하고 그들의 아이디어를 더 추상적으로 표현할 방법에 대해 탐구하지 않는다.

4.원칙과 연구 설정하기

일러스트는 다양한 플랫폼과 제품을 가로질러 적용되는 시스템적인 언어로 치환되기 어려운, 직감적이고 주관적인 형태의 예술 형태이다.

새로운 스타일을 정의하고 탐구하기 위해, 네 가지 요소로만 간추려봤다.

• 인간의 형태와 관점
• 텍스처
• 모양
• 컬러

인간의 형태를 포함하는 것은 유저와 즉각적으로 연결을 만들 수 있지만, 어떤 수준까지 그 형태들을 추상화하여 연결 상태를 유지할 수 있을까? 언제나 100% 구체적인 형태만을 취해야 할까? 그림자나 크기 같은 디테일한 관점을 꼭 포함해야 할까?

-텍스처

텍스처는 이 모양들을 실제 삶으로 끌어오고, 개성 및 구분되는 스타일을 더하는 인간적인 터치를 더하는 좋은 방법이다. Kyle은 일러스트 안에서 미묘하면서도 아주 흥미로운 텍스처를 만들어내는 브러쉬 시리즈들을 골랐다. 우리는 위 연구에 개괄적으로 표현된 구성과 텍스처 스타일을 갖고 놀았다. 궁극적으로, 우리는 열려있고 공기처럼 보이는 옵션 A를 택했으나, 옵션 E가 형태에 적용되었을 때의 브러쉬 효과도 마음에 들었다. 그래서, 우리는 두 스타일을 섞어서 연구를 진행하기로 했다.

-모양

-컬러

컬러는 일러스트와 제품의 연결을 강화할 수 있다. 그래서 우리는 제품의 브랜드 컬러를 기반으로 한 컬러 팔레트를 만들었고, 그 다음에 메인 컬러를 보충할 수 있는 보조 컬러를 포함시켰다. 우리는 컬러 조합이 좀 더 유연하기를 바랐고, 그래서 보조 컬러는 각각의 일러스트에 가장 잘 어울리는 색으로 디자이너가 고르고 선택할 수 있도록 열어두었다. 색에 있어서 우리가 제공했던 유일한 가이드라인은 어떻게 레이어드되는가였는데, ‘가장 어두운 컬러는 라인과 형태에만 쓸 것’이었다. 중간/밝은 컬러는 솔리드한 모양 혹은 배경에만 사용해야 한다.

5.시각 언어 정의하기

-스토리텔링과 추상성의 수준

스토리텔링을 하기 위한 적절한 시각 언어를 찾기 위해, 위에서 말한 요소들을 한데 모았다. 아래는 초기 연구 때 나왔던 예시들이다.

아이디어는 심플하다.: 최소한의 요소를 사용하여 최대한의 스토리를 표현하자.

6.텍스쳐와 선

이 단계에서, 나는 선, 텍스처, 모양의 조합이 각 일러스트에서 시각적으로 충분히 흥미로우며 동시에 눈으로 보기에도 밸런스 있는 스위트 스팟을 찾으려고 노력했다.

7.쇼케이스

다음은 이번에 새로운 시스템을 기반으로 만든 일러스트 몇 점이다. 최근 Document Cloud(Acrobat)과 이번 주 Creative Cloud 업데이트에서 볼 수 있을 것이다. 좋아하는 어도비 앱의 다음 릴리즈에서는 이러한 기능을 눈여겨 보시길!