10년 만의 디자인 언어 쇄신에 나서는 Adobe 담당자에게 듣는 「Spectrum 2」탄생의 경위와 목적

Adobe 가 자사 제품에 채용하는 디자인 언어 「Spectrum 2」를 발표했다. 이것은 2013년에 구현된 「Spectrum」을 10년 만에 업데이트하는 것으로, 동사의 UI/UX 디자인의 바탕을 이루는 것이다.

【이미지】 어도비가 쇄신한 디자인 언어 「Spectrum 2」

　디자인 언어는 디자인의 공통 지표이며 디자인의 원칙입니다. 예전에는 애플이 애플 II를 위해 설계·제창한 '휴먼 인터페이스 가이드라인'이 있다. 

사용하기 쉽고보기 쉬운 소프트웨어를 설계하기 위해서는 이러한 디자인 언어에 의해 인터페이스의 통일성을 정비하는 것이 빠뜨릴 수 없다. 이번은 Adobe의 수석 디렉터이자 「Spectrum」의 담당을 맡고 있는 Shawn Cheris(숀 켈리스)씨에게 인터뷰를 실시해, 「Spectrum 2」탄생의 경위에 대해 물어볼 수 있었다. 

 

Adobe가 디자인 언어, 즉 "Spectrum"을 어떻게 중시하는지, 무엇을 달성하기 위해 디자인 언어를 활용하는지 알려주십시오. 

Shawn: 그럼, 'Spectrum'이란? 라고 하는, 정말로 기본적인 곳으로부터 설명하려고 생각합니다. 디자인은 원자와 같은 아주 작은 물건, 추상적인 물건으로 시작하여 웹사이트나 앱과 같은 복잡하고 구체적인 물건으로 구축되어 갑니다. 

사람들이 디자인에 대해 이야기 할 때 종종 이러한 은유가 사용되지만, 이것은 정확히 "Spectrum"을 만들 때 "색", "타이포그래피", "버튼"등의 검토로 시작하여 모달・윈도우에 실장해 가는 형태로 만들어 갔습니다. 레고의 피스를 조립해 가는 것 같은 이미지입니다. 심플한 조형은 물론, 많은 조각이 있으면 복잡한 형태를 만들 수 있습니다. 

예를 들어, 집을 세우면 조금 더 복잡해집니다. 

그것은 어떤 과제를 해결하려고 세워지는 집인지, 어떤 건축 자재를 사용하여 어디에 입지할 것인가라는 조건이 더해집니다. 그리고 당연히 그것을 만들기 위해서는 설계자도 필요하며 건축 전문가나 엔지니어 같은 사람이 필요합니다.

 

소프트웨어를 구축하는 것과 똑같은 이야기입니다. 「Spectrum」의 팀은 설계할 뿐만 아니라, 툴도 만들고 있습니다. 그 도구를 만들어 Adobe 팀이 일을 해 나가는 것입니다. 이러한 툴과 사양을 만들어 문서화하고 CSS나 웹 컴포넌트의 구현에 연결해 나갈 것입니다. 

Adobe에게 "Spectrum"은 단순한 구성 요소에 머무르지 않습니다. 이것은 Adobe 전체의 정체성에도 관여하는 것입니다. 예를 들어 'Adobe Photoshop'은 2, 000개 가까운 아이콘을 사용하고 있으며, 문장을 다루는 콘텐츠 전략가도 있으면 디자인 프로토타입을 제작하는 팀으로 해도 수십명의 인간이 관여하고 있습니다. 아이콘, 로고, 스플래시 스크린 또는 Adobe 제품 전반에 걸쳐 "통일된 경험"을 얻을 수 있는지 여부에도 "Spectrum"은 크게 영향을 미칩니다. 그러므로 'Spectrum'과 같은 대형 디자인 시스템을 운용하기 위해서는 명확한 규범과 거버넌스가 중요해지는 것입니다. 

 

그럼, 계속해서 「Spectrum 2」가 어떤 것인지 설명합시다. 원래 「Spectrum 1」이 탄생한 것은 2013년의 샌프란시스코입니다. 세계가 아직 흑백에 싸여 있었을 무렵…… 스펙트럼(빛의 파장=색)이 없었던 시대군요. 지금이야말로 디자인성이 뛰어난 것으로 알려진 기업에서도, 당시의 WEB 사이트는 우리 Adobe를 포함한 비참한 것을 채용하고 있었습니다. 그런 가운데, 장래적인 제품 화면의 이미지를 만드는 등, 「미래의 어도비」를 마음껏 그리면서 디자인을 책정해 왔습니다. 우리는 당시에는 꿈 이야기에 불과하다고 생각했습니다. 하지만, 뚜껑을 열어 보면 지난 10년에 당시 내걸었던 디자인의 비전에 도착해 버렸습니다. 그동안, Adobe에게 있어서도 여러가지가 크게 바뀌었습니다. 

우선 처음에는 사용자 중에 프로페셔널이 아닌 사용자가 늘어난 적이 있습니다. 그리고 10년전에 비하면 시장의 경쟁사도 늘고 있습니다. 디지털 경험 자체가 매우 큰 진보를 보였습니다. 이미지의 왼쪽에 나오는 것이 "Spectrum 1" 아이콘입니다. 매우 날카로운 것인지 깔끔하고 전문적인 것을 알 수 있습니다. 

한편, 오른쪽에 나와 있는 것이 「Adobe Express」의 아이콘입니다. 조금 이것은 너무 친절하다는 식으로 생각했기 때문에, 사이를 잡고 조정을했습니다. 몇 년 전, 자사 조직을 재편했을 때에 Adobe의 이념에 대해 사원 전체로 논의해, 회사가 내거는 테마로서 합의를 얻은 것이 있습니다. 하나는 인클루시브(포괄적)이라고 하는 것. 그리고 접근성(편의성)이 있어, 에퀴티(공평·공정)이 아니면 안된다는 비전입니다. 

우리는 Adobe의 미션으로 "Creativity for all : 모든 사람에게 '만드는 힘'을 내걸고 있습니다. 모든 사람에게 힘들기 때문에 제품을 사용하는 모든 사람들이 똑같이 사용할 수 있도록 해야 한다. 그리고 어떤 플랫폼을 사용해도 익숙한 것이라고 느끼게 하는 것도 중요하고, 모바일에서도 데스크탑에서도 Web에서도 그러한 체험을 얻을 수 있는 것이 중요합니다. 제공하는 경험이 연마되고, 사용하고 즐거운 기쁨을 느끼는 것, 경량으로 열려 있고, 더 친숙하게 만드는 것도 중요한 주제가되었습니다. 브랜드 칼라도 「Spectrum 2」의 칼라로서 통합하고 있습니다. 

 

「Spectrum 1」이 실장된 2013년~2014년경이라는 것은 인터페이스 디자인의 쇄신이 활발하게 논의된 시기라고 생각합니다. 이른바 플랫 디자인의 유행도 있었고, Google이 머티리얼 디자인을 제창한 것도 이 시기였습니다. 이러한 시대의 유행, 그 중에는 스큐 모피즘으로부터의 탈각이라는 어프로치도 포함됩니다만, 이러한 시대 배경이 「Spectrum 1」혹은 2, 모두에 영향을 미치는 것은 있었습니까?

 

Shawn：이 유행의 와중에 있던 사람들이라고 하는 것은, 대개 모두 “같은 구멍의 무지나”라고 할까, “같은 곳의 물을 마시는 사이”였다고 말할 수 있다고 생각합니다. 그러니까 인터페이스 디자인에는 패션(시류)의 요소가 있는 것은 확실하다고 생각합니다. 스큐 모피즘은 철학과 종교의 중간과 같았고, 오래 전 스티브 잡스의 아이디어였습니다. 철저하게하는 것에 대해서는 동의 할 수 없었습니다. 솔직히 나는 개인적으로 저기까지 할 필요가 있을까? 라고 생각하고 있었습니다. 그럼에도 불구하고 'Spectrum 1'은 조금 최소한의 것일 수 있습니다. 그 반성을 바탕으로 새로운 디바이스를 위한 체험을 만들기 시작하고 있는 지금, 디바이스의 피지컬리티(물리성)과 3D를 활용하는 것은 현대의 디자인, 현대적인 디자인에 어울린다고 느끼고 있습니다.

 

관련한 질문입니다만, 디스플레이의 콘트라스트레인지 향상이나 칼라의 표시 능력의 진화라고 하는 것은, 「Spectrum 1」이 「Spectrum 2」에 이르는 데에 영향을 미치고 있습니까.

 

Shawn: 좀 보여 드리고 싶은 것입니다. 이것은 사내에서 개발한 "Leonard (https://leonardocolor.io/# )」라는 기술 데모입니다. 이것은 매우 정교한 알고리즘이며, 배경색을 제공하면 대비비를 기반으로 액세스 가능한 전경색을 생성 할 수 있습니다. 이것은, 장래의 「Spectrum」에 탑재하고 싶은 것입니다. 사람들은 태양 아래 있을 때도 있고, 어두운 방에 있을 때도 있다. 대부분의 디자인 시스템은 컬러 팔레트가 정적이지만, 우리가 원하는 것은 사용자의 취향에 따라 동적으로 팔레트를 생성하는 것입니다. 이렇게 하면, 하이콘트라스트 모드 등 OS의 설정에도 대응할 수 있게 되고, 색각 이상 이나 시각 장애 등, 인간의 모든 시각 장애를 고려할 수도 있습니다. 우리가 데스크탑 제품의 재구성에 착수할 때, 밝기와 대비뿐만 아니라 폰트 크기, 스케일, 농도에 대해서도 사용자의 취향을 반영하고 싶습니다. 작업 중 일부는 여전히 실험실에 있으며 아마도 특허를 받게 될 것입니다. ■프로페셔널의 것이라면, 모두가 샤프하고 합리적이지 않아도 좋다

 

"Spectrum"과 같은 인터페이스 가이드라인을 만들 때는 플랫폼이 되는 OS의 가이드라인, 즉 iPad라면 iPad의 “작법”을 고려할 필요 있을까 생각합니다만, 그러한 기존의 가이드라인과 「Spectrum」이 충돌(컨플릭트)하는 문제도 있었습니까. 

 

Shawn: 했다. 지금까지 우리를 포함한 많은 기업들이 해왔던 것은 다른 곳에서 본 제품을 “그대로” iPad에 밀어넣으려고 하는 것이었습니다. 그러나 향후 모바일 앱을 만드는 중 iOS와 Android의 내거는 규정이나 규칙을 더욱 중시하면서 구축해 나가게 된다고 생각합니다. 예를 들어 Android 용 앱을 만들 때 머티리얼을 사용하면서 필요한 것을 추가하는 방법입니다. 아마도 사용자에게 가장 적합하고 자연스럽기 때문입니다. 

 

「Adobe Illustrator」나 「Adobe Photoshop」등의 인터페이스 디자인의 근저에는 한때 빌 어트킨슨이 개발해 수잔 케어가 디자인을 노력한 「MacPaint」의 디자인이 있을까 생각합니다만, 「Spectrum 2 '을 구현할 때 이러한 과거의 인터페이스 디자인을 되돌아 보면 되겠습니까?

 

Shawn: 아주 초기의 「Adobe Illustrator」나 「Adobe Photoshop」이 설계된 시대에는, 참고가 되는 큰 어플리케이션군은 없었고, 강력한 룰도 없었습니다. 당시 스큐 모피즘은 컴퓨터를 사용한 적이 없는 사람들을 돕기 위한 것이었지만, 현대에는 그러한 사람들은 거의 남아 있지 않다고 생각합니다. 유저 인터페이스라고 하는 것은 언어이며, 2, 30년전에는 없었던 명사나 동사, 문화에 대한 문맥이 있으므로, 그것에 대응한 설계가 요구됩니다.

 

젊은 사람들은 플로피 디스크를 본 적이 없지만 저장 아이콘이라는 것을 알고있는 것 같습니다. 

 

Shawn：실은, 그것에 관해서는 우리도 몇 년인가 테스트를 하고 있습니다만, 「플로피 디스크」를 실세계에서 본 적이 없는 사람조차, 그 아이콘의 의미를 알고 있어, 게다가 유감스럽게도 거기에 대신하는 아이콘(의장)이 아직 나오지 않았죠. 내 친구의 아이는 책상 위의 플로피 디스크를보고 "왜 "저장 아이콘"의 3D 프린트를 가지고 있습니까?"라고 물었다고합니다. 다시 말하지만, 이것은 언어이며, 우리는 사람들이 이해할 수있는 단어와 개념으로 의사 소통하기 위해 가능한 한 "발명"을하지 않도록 노력하고 있습니다. 

 

즉 보수적인 부분, 기존의 개념을 유지·지키면서도, 과거에는 없었던 것 같은 유저, 즉 지난 10년간으로 훨씬 늘어난 아마추어 유저씨에게도 열린 언어인 것을 양립할 필요 이었다는 것입니다.

 

Shawn: 그건 바로입니다. 「Spectrum 2」의 구현은 소비자용의 어플리케이션으로부터 다루고 있습니다만, 향후는 「Adobe Illustrator」나 「Adobe Photoshop」, 「Adobe Premiere」라고 하는 제품에의 실장에도 도전해 나가고 싶습니다. 그렇다고 하는 것도, 이 구현을 통해 알았던 적이 있습니다. 그것은 Photoshop의 유저가 갖추어 「좋은 것에는 하고 싶지만, 가능하면 아무것도 바꾸지 말고 싶다」라고 생각하고 있다고 하는 것입니다. "900만명을 대상으로 했을 때 저녁 식사에 무엇을 부탁하는가"라는 도전과 비슷합니다. 그러나 지금까지 우리가 한 디자인과 프로토 타입 중 일부를 기반으로 생각하면, 우리가 데스크탑 제품에 가져 오는 것에 사용자들에게 매우 흥분을 줄 수 있다고 생각합니다. 우리 자신도 이것으로 좋다고 자신감이 있는 상태로, 또한 테스트도 실시한 후에 내고 가고 싶습니다.

 

디자인이라는 말은, 일본에서는 상당히 「색이나 형태를 바꾸는 것」이라고 하는 의미로 사용되는 것이 많습니다만, 본래는 “설계(Architect)”라고 하는 뉘앙스를 아마 포함한 말이라고 생각합니다 . 기업이나 크리에이터는 디자인에 의해 제품을 강하게 소구할 수 있다. 이러한 디자인의 전략에 대해 Adobe가 생각하고 있는 것, 자사의 제품을 어떻게 봐 주었으면 하는가? 어디에 매력이 있고 어떻게 전달하려고 하는가? 즉, “Adobe의 디자인”에 대해서, 다시 가르쳐 주었으면 합니다.

 

Shawn : 우선 먼저 말씀드린 대로, Adobe에서는 디자인을 문제 해결을 위해 사용하는 "도구"라고 생각하고 있습니다. 도구는 사용자가 직관적으로 사용할 수 있어야 하고 사람들이 하고자 하는 일을 달성할 수 있는 도구이어야 합니다. 그리고 그 도구는 현대적이고 사용하고 즐거움을 느낄 수있는 것이어야합니다. 이것은 미적 문제입니다. 「Spectrum 2」에서는 이러한 문제에 근거한 조정을 실시했습니다. 전문가의 사용에 충분하면서도 친숙하고, 그리고 사용하여 즐거운 것을 만들려고 노력하고 있습니다. 전문적인 것이라면 모든 것이 날카롭고 차가운 느낌의 합리적인 엄격한 것일 필요는 없습니다. 즐겁고 아름답고 전문적인 사용을 실현하기 위해 "Spectrum 2"는 하나의 대답입니다. 저는 요리를 하는 것을 좋아합니다만, 거기서 사용하는 칼은 소프트웨어 툴과 비슷한 것이라고 생각합니다. 좋은 툴은 아름다움과 기능성을 겸비하고 있는 것으로, 요리를 하고 있을 때 손이 늘어나는 칼이라고 하는 것은, 그것을 높은 레벨로 양립하고 있는 칼입니다. 카메라도 그러한 도구군요.

 

조금 다른 관점의 질문을. 현재 Adobe의 수많은 제품에 생성 AI가 구현되고 있습니다. 그 구현 방법도 매우 독특하다고 느꼈습니다. 생성 AI를 인터페이스와 통합한 이유를 알려주세요.

 

Shawn: 생성 AI의 통합에 대해서는 디자인 이야기보다는 비즈니스 이야기라고 생각하고 있습니다만, AI는 정말 훌륭한 기술이므로 이것을 구현하지 않는 손은 없다고 생각합니다. 많은 제품에서 확실히 이것은 사람의 도움이 될 것입니다. 한편 디자이너로서는 완전히 새로운 관례가 도입되기 때문에 매력적인 도전이라고 느끼고 있습니다. 그 중에는, “채팅”과 같이 종래부터 매우 친숙한 디자인도 있는 한편, 완전히 새로운 인터페이스의 가능성도 보입니다. 예를 들어 무언가 태스크를 실행할 때 필요한 인터페이스가 실시간으로 생성되는 것과 같은 것. 그래서 기존과 같이 패널이 있어 버튼이 있어 전부 고정되고 있다, 라고 하는 것이 아니고, 보다 동적인 인터페이스를 만들 수 있다고 생각합니다. 이것은 "Whole new world"입니다. 지금은 완전히 새로운 세계의 입구에 섰을 뿐, 앞으로 여러가지 생각해야 할 곳이군요.

 

“Whole earth catalog "에 생성 AI는 실려 있지 않았을 것입니다.

 

Shawn : 그대로입니다. 스큐 모피즘의 예와 같이, 사람들이 알고 있는 아이디어를 사용하는 것과, 가능성을 해방하는 새로운 아이디어를 낳는 것의 밸런스가 필요합니다.AI를 위한 이상적인 인터페이스라고 하는 것은 아직 발명할 수 없다고 생각하고, 만일 이미 발명되고 있다면, 사람이 아직 그것에 대해 갈 수 없는 상태가 아닐까 생각 이해를 양성해, 그리고 공통 언어라고 하는 것을 만들어 가는데는 시간이 걸리니까요. 라는 문장을 내걸고 기술에 대한 접근성을 높이면서 그 실현을 목표로 하고 있는 기업이라고 생각합니다. 왜 이 진술을 내걸고 있는가? 그리고 이 진술이 성취된 세계는 어떤 모습을 하고 있는가? Shawn : 이것은 분명히 목표에 대한 "Journey (여행)"이며, 과연 이것이 언제 달성 될 수 있는지, 원래 달성 될 수 있는지에 대해서도 모릅니다. 그러나 Adobe에서 15년 이상 일한 경험에서 Adobe에서 일하는 사람들은 엄청난 공감을 가지고 있으며, 이 문장을 사명으로 받아들이고 있다고 느낍니다. Adobe가 앞으로 목표로 하는 방향에 대해 한 가지 말할 수 있다면, 우리의 소프트웨어는 더욱 단순해질 필요가 있습니다. 이제 "Adobe Photoshop"과 "After Effects"를 사용하려고하면 큰 디스플레이가 필요하며, 거기에 패널이 있고 버튼도 여기저기 있습니다. 이러한 스타일에 압도당해 버리는 유저도 있을 것입니다. 정말 폭넓은 사람들에게 공헌하기 위해서는 파워풀하면서도 미니멀하게 하는, 그 때문에 어떻게 하면 좋은가를 생각해야 한다고 생각합니다. 이것은 수년이 걸리는 과제이지만, 지금까지 학습해 온 것으로부터 하나 말할 수 있는 것은, 매우 구체적이고 핀 포인트인 요구를 안고 있는 사람을 향해 만든 소프트웨어라고 하는 것은, 그 이외의 넓게 많은 사람들에게 더 나은 소프트웨어가 될 것입니다.