어도비 일러스트 스타일 디자인하기
어도비의 브랜드 일러스트 스타일
원문 바로가기
https://blog.usejournal.com/designing-adobes-brand-illustration-style-3c982ded31f6
아티클을 번역하며, 몇 가지 정보와 링크를 덧붙였습니다.
어도비 일러스트 스타일 디자인하기
어도비 제품군에서 굉장히 중요한 ‘일러스트 스타일’을 만드는 과정
들어가며
일러스트레이션은 사용자 경험의 핵심적인 부분을 통합하며, 제품을 통해 브랜드를 직접적으로 표현하는 데 큰 역할을 한다. 어도비에서는 브랜드 일러스트 스타일을 통합하는 것에 대한 필요성을 수차례 중요하게 논의해왔다. 제품을 향상시키는 데 있어, 우리는 사용자에 대한 브랜드 인지를 개선하고, 사용자와 제품 간 연결성을 더 깊게 형성하길 원했다.
우리 팀원의 지난 아티클(Sonja Hernandez의 브랜드 시스템 아티클, Anny Chen의 파일 종류 아이콘 케이스 스터디)에서 추측하겠지만, 우리 제품군만큼이나 거대한 제품 환경에서 많은 것들을 고려해야 한다. 어도비는 100개가 넘는 제품, 서비스, 그리고 커뮤니티 등을 제공하는데, 이는 크리에이티브 툴부터 커뮤니케이션과 마케팅 툴까지 포함한다. 어도비 같은 규모의 회사와 제품 라인업을 창조적이고, 즐거운 일러스트 스타일로 제공하려면 어떻게 해야 할까?
과거 어도비 제품군의 일러스트레이션 요약정리
우리 제품의 컬러 일러스트레이션을 알아보기 전에, 아이콘팀이 2016년에 이미 구축한 선형(liner) 일러스트 스타일이 우리 제품군에 두루 사용되었다. 선형 일러스트는 대개 텅 빈 (프로그램) 화면이나 온보딩 플로우 같은 정보 제공의 맥락에서 사용되다.
*어도비에는 아이콘만 담당하는 팀이 있다. (디자인 테이블 - 어도비가 일하는 방식(최유진))
CC 버전에 오신 걸 환영합니다 by Marco Mueller처음에 우리는 아이콘 디자이너 Marco Mueller가 만든 선형 스타일을 우리 새로운 브랜드 일러스트 시스템을 통합하여 이 두 스타일 사이의 과도기를 원만하게 넘기고자 했다. 나는 선형 요소들에 어울리도록 다른 그림을 더하며 스토리를 만들려고 시도했었다. 이러한 본래 이미지 스타일은 사실 2001년의 아크로뱃 5.0 패키지에서 사용된 일러스트에서 영감 받은 것이었다.
초기 일러스트 스타일 실험(왼), 어도비 아크로뱃 5.0 패키지 일러스트(오)
어도비 캡처의 온보딩 일러스트*온보딩(on-boarding) : 신입사원이 직장에 잘 적응하도록 돕는다는 의미의 HR(인사) 분야 용어에서 비롯됨. 프로덕트 분야에서는 유저들이 제품을 매력적으로, 원활하게 사용하도록 유도하는 장치를 통칭하며, 이 글에서는 어도비 제품 실행 시 나타나는 로딩창을 비롯한 것들을 말한다.
앱 프로덕트 온보딩에 대해 더 알아보기
CC 라이브러리 일러스트우리는 이 스타일의 최초 공개를 위해 수많은 내부 회의를 거쳤다—어도비 수석 디자이너 Khoi Vinh은 비주얼 아이덴티티에 관련한 몇 가지 고려사항을 제기했다. 이것의 흥미로운 기원과 상관없이, 이런 접근은 벡터(로 제작한 듯한) 형태와 인간 모습 표현에 주로 적용되었는데, 이는 기술 산업 분야 전반에서 사용되었다.
나는 이번 프로젝트에서 어도비의 뛰어난 일러스트레이터이자 아티스트인 Kyle Webster와 협업한 게 자랑스럽다. 이번에는 일러스트 스타일에 대한 몇 가지 목표를 마련했다: 창조성과 즐거움을 통해 어도비의 월드 클래스급 일러스트에 대한 의지를 보여주고 싶었다. 일러스트적 언어는 스타일의 다양성이 필요한데, 이는 제품과 메시지 전달의 시스템, 더 넓은 시간적 범위를 아울러야 하며, 추가적인 일러스트레이터의 기여도 고려해야 한다. 우리는 또한 어도비가 다른 회사에 ‘소속된’ 것이 아니라, 유니크하다고 느껴지길 바랐다.
우선, Kyle은 부가적인 시각 요소가 더해진다면 기존 일러스트 스타일이 더 향상될 수 있을지 고민했다. 보시는 것과 같이, 그는 피부색, 옷의 디테일한 부분, 캐릭터에 깊이를 더해줄 명암을 추가하는 식으로 개성을 담았다.
“원래의 이미지 소스와 얼마나 다른 스타일로 가는지 보는 것은 재밌지만, 그림에서 더욱 전통적인 사람 형태로 개선해나갈 때, 이 방향은 우리가 원하는 만큼 유연하게 느껴지지 않는 게 분명해보였습니다. 그렇다고 재미나 경험의 여지를 주는 것도 아니고요. 우리가 방향을 바꿔서 Emma가 아주 훌륭하고 철저한 조사를 거쳐 올바른 방향, 즉 유니크하고 유연한 시각적 어휘를 개발한 것을 기쁘게 생각합니다.” — Kyle Webster
Kyle에 따르면, 이 초기 개발은 원래 스타일에 여전히 아주 밀접했는데, 그 후 몇 번의 브레인스토밍을 거쳐 일반적인 사람 형태에서 더 나아가 추상적인 시각적 어휘를 시도해보는 방향을 결정하게 되었다고 한다.
이런 트렌드는 버릴 때야
어도비 스펙트럼 통합 디자인 모바일 배너우리는 일러스트가 더욱 정형화되고 —더 좋은 표현이 없네요— 포괄적으로 작용되는 소프트웨어 환경 속에 존재한다. 종종 일러스트레이터는 더 다양한 사람들(소비자 내지 고객)을 사로잡기 위해 그들의 일러스트 스타일이 지닌 개인적, 창조적 개성을 지워버리곤 한다. 그들은 형태에 집중하고, 그들의 아이디어를 더욱 추상적으로 표현하려는 실험에는 적극적이지 않다.
Meg Robichaud의 고무적인 글 <당신은 보라색 사람만 주야장천 그려놓고 이걸 다양성이라 말하면 안 된다You Can’t Just Draw Purple People and Call it Diversity>에서 저자는 제품 내 일러스트에 관한 포괄적인 이슈들에 대해 논한다. 나는 각기 다른 일러스트에서 인간의 다양성을 표현하려 하는 것으로부터 논점을 옮겨, 추상적인 형태를 대신 사용함으로써 같은 사용자 컨셉을 표현하는 데 있어 다른 가능성을 열고자 한다.
원칙을 수립하고 탐구하기
일러스트레이션은 직관적이고 주관적인 예술 형태여서 여러 플랫폼과 제품에 걸쳐 작동하는 시스템적 언어로 번역하기 어려울 수도 있다.
새로운 스타일을 실험하고 정의하기 위해, 다음 네 가지 분야로 한정하여 설명한다:
사람 형태와 원근법
텍스처(질감)
형태
컬러
몇 가지 사례를 들어 앞서 제시한 네 가지를 각각 설명해보겠다.
사람 형태와 원근법
사람 형태를 포함하는 것은 사용자와 즉각적인 연결을 구축할 수 있다지만, 그 형태가 어느 정도로 추상적이어야 이 연결을 유지할 수 있을까? 항상 완전히 현실적인 형태로 표현해야 할까? 명암이나 차원(3차원) 같은 원근법 디테일을 적용해야 할까?
The Weighing of the Heart이미지 출처: http://brewminate.com/beyond-hieroglyphs-the-art-and-architecture-of-ancient-egypt/
옆모습 프로필 실험머리가 옆모습으로 표현되며 전혀 명암이 적용되지 않은 고대 이집트 미술 스타일에서 영감을 받아, 옆모습 프로필 시리즈를 만들어보았는데, 팔과 손 조합은 스토리 전달을 위해 다른 방식으로 표현될 수도 있다.
텍스처(질감)
Kyle의 텍스처 시도텍스처는 그려진 형태에 생기를 주고, 개성을 더해 인간미를 표현하며, 스타일을 구분시켜주는 또 다른 좋은 방법이다. Kyle은 일러스트에 미묘하지만 아주 흥미로운 텍스처를 만들어내는 브러쉬 시리즈를 큐레이팅했다. 우리는 위에 요약하여 제시된 연구와 같이 다양한 텍스처 스타일과 구성을 시도했다. 궁극적으로 우리는 막혀있지 않고, 공기가 통하는 것처럼 보이는 옵션 A의 구성을 선호했지만, 옵션 E의 브러쉬 효과와 형태를 통합하는 방식도 마음에 들었다. 여기에서 우리는 두 가지 스타일을 통합하면서 계속 다른 시도를 해보기로 했다.
형태
Alexander Rodchenko and Varvara Stepanova’s famous Books! poster (1924)이미지 출처: https://www.creativebloq.com/graphic-design/easy-guide-design-movements-constructivism-10134843
형태는 우리의 디자인 원리에서 큰 역할을 하며, 새로운 스타일과 이전에 개발된 정보 전달적 일러스트 스타일을 연결하는 데 도움을 준다. 그래픽 디자인에서 비롯되어, 나는 우리 스타일에 기하학적 요소가 섞여 미니멀하고 현대적인 방향으로 나아가길 바랐다.
일러스트에서 내가 사용했던 형태들컬러
컬러는 일러스트와 제품의 연결을 강하게 하므로, 우리는 제품의 브랜드 주요 컬러 및 이를 돋보이게 해줄 부가적인 컬러를 기반으로 컬러 팔레트를 생성했다. 컬러 조합을 더욱 융통성(flexibility) 있게 하기 위해 각 일러스트에서 디자이너가 가장 원하는 색상을 고를 수 있도록 추가적인 컬러를 제공했다. 컬러 사용에 있어 우리가 제공한 또 다른 가이드라인은 그들이 겹쳐지는 방식인데, 어두운 컬러는 테두리 작업에만 사용할 수 있다. 중간 또는 밝은 컬러는 다른 색깔이 섞이지 않은 부분과 배경에 사용한다.
시각적 언어 정의하기
스토리텔링과 추상화 단계
스토리텔링에 적절한 시각적 언어를 찾을 때, 나는 위에서 말한 요소들을 조합해본다. 아래는 이전에 시도해본 몇 가지 샘플들이다.
아이디어는 간단하다: 가장 적은 양의 요소를 사용하여, 가장 많은 이야기를 하라.
하나의 일러스트에서 표현되는 요소의 수를 줄여보려 했다. 아이디어는 간단하다: 가장 적은 양의 요소를 사용하여, 가장 많은 이야기를 하라. 주어진 두 일러스트는 형태를 필수 요소로 나누며 이 개념을 명확히 전달한다.
텍스처와 선
이번 파트에서 나는 각 일러스트에서 시각적으로 흥미로우면서도, 보기에 균형 잡혀있다고 여겨지는 선, 텍스처, 그리고 형태 조합의 최적점을 찾으려 했다.
전경과 배경, 층위와 차원을 명확히 구분하고, 우연적 효과를 창조하며, 선과 형태 사이에 흥미롭게 나타나는 상호작용으로 메시지를 더욱 강화하는 게 목표이다.
선형 일러스트 시도공개(릴리즈)
아래는 새로운 시스템(스타일)으로 작업한 몇 가지 일러스트들이다. 당신은 최근 릴리즈한 도큐먼트 클라우드(아크로벳)와 이번 주 크레이티브 클라우드에서 이들을 봤다는 걸 알아챘을 것이다. 당신이 즐겨 사용하는 어도비 앱에서 앞으로의 더 많은 릴리즈를 살펴보라!
아크로뱃 DC 온보딩 카드
크리에이티브 클라우드 모바일 온보딩 카드
크리에이티브 클라우도 모바일 온보딩 카드
어도비 I/O 콘솔 XD 플러그인 웹페이지
어도비 일러스트레이터 CC 2019 온보딩 배너번역 후기
연초 연말에 인터넷에 뿌려지는 "올해의 일러스트 트렌드"와 상관없이 그만의 독창적인 일러스트 스타일을 만들어낸 어도비의 사례를 살펴보았다.
이 글은 어도비 디자이너 Emma Zhang의 2018년 10월 포스팅이다. 어도비에 대한 아티클이라 많은 디자이너와 블로거가 이 아티클 시리즈를 공유하거나, 포스팅했다. 난 이걸 늦게 발견한 편. (내용을 재구성하여 명료하게 정리한 브런치 작가님 글이 있어 추천드립니다.) 거의 매일 어도비 프로그램을 쓰며 (pdf를 열람하는 아크로뱃마저 어도비 제품이다) 어도비가 일하는 방식에 대해 특히 관심을 갖게 되었다.
제품 판매를 구독 서비스 형태로 바꾼 어도비. 덕분에 매달 부담 없는 금액을 지불하며 최신 버전을 사용할 수 있게 되었다. 어도비는 업데이트 때마다 새로운 온보딩 일러스트를 선보이는데, 갈수록 스타일이 조금씩 변화한다. 그러나 여전히 어도비답다!
번역하며 유의했던 어휘와 표현
overarching (많은 것에 관련되므로) 대단히 중요한
context 이 글에서는 소제목으로 사용되어, '들어가며'로 의역
this time around (반복되는 것에 대해서) 이번에(는)
perspective 원근법
I restrained my explorations with four tenants (직역하면 "나는 네 명의 세입자들과의 탐험을 자제했다" 따위가 되는데...) 일러스트 스타일을 찾아가는 과정의 모든 내용을 언급하기는 무리이므로, 다음 네 가지 영역에서만 언급하겠다고 범위를 한정시킨다는 뜻
concrete 현실적인
solid (색깔이) 다른 색깔이 섞이지 않은[완전한]
sweet spot 가장 좋은 점, 최고의 상황. 이 글에서는 '최적점'으로 표현
keep an eye out 지켜보다, 살펴보다
