The Magical Tech Behind Paper For iPad’s Color-Mixing Perfection

BY CHRIS DANNEN | NOVEMBER 8, 2012
In the new version of Paper released last week, you mix colors with your fingers, like it’s paint–only somehow more beautiful. This one magical feature burned a year of development time, resurrected the work of two dead German scientists, and got Apple’s attention.

색상은 분위기를 북돋고 사람들 마음 속에 행위를 전달하거나 즉각적인 관계를 만들어준다. 게다가 브랜딩을 위한 강력한 툴이기도 하다. 하지만 아이패드용 페이퍼를 만든 팀인 FiftyThree는 컬러를 중대한 사업적 문제로 간주했다. 색상을 다루는 전통적인 소프트웨어는 색상을 표시하는 기기의 방식에 충실하지만, 사용자에게는 완전히 비-직관적이기 때문이었다. 이 팀은 인간-중심적인 툴만 있다면 훨씬 더 나은 디지털 예술을 만들어낼 수 있다고 봤다. 페이퍼의 컬러 버전인 1.2.1에서 그들은 한 가지 발명을 시도했다.

아름다운 그래픽을 만들 때의 학습곡선은 얼나나 가파를까? 그래픽 디자인 프로그램을 무엇이라도 한 번 돌려서 답을 생각해 보시라. 컬러피커(color picker)를 열어서 노란색과 파란색의 중간 색을 고르면 알 수 있다. 그 결과는 녹색이다. 그러나 사용하는 기기나 소프트웨어가 무엇이든지 간에 칙칙한 쟃빛을 얻게 된다. 이미 여러분의 작품은 썩고 있다.

FiftyThree의 디자이너이자 공동창업자인 앤드루 앨런(Andrew Allen)의 말이다. “나쁜 컬러라는 것은 없습니다. 나쁜 컬러 팔레트가 있을 뿐이죠. 포토샵이나 일러스트레이터에 있는 전통적인 컬러 피커는 전혀 도움이 안 됩니다. 이렇게 말합니다. 1,600만 가지 선택이 있습니다. 골라 보시죠.”

Down the Rainbow Rabbit-Hole

이 문제를 해결하기 위해 FiftyThree는 컬러피커를 뒤엎고 1년동안 작업에 들어갔다. 직관적이고 터치에 기반하면서 간단한 대안을 만들기 위해서였다. 애플 아이패드 미니를 선보일 때 필 실러가 직접 그 결과를 시연하였다. 그렇지만 그토록 기본적인 것을 재발명한다고 해서 어떻게 디자인 상까지 받을 수 있단 말인가?

첫째, 컴퓨팅에 있어서 컬러피커는 1973년부터 존재해 왔다. 새로운 인터페이스의 재발명은 어도비에서 Zoho에 이르기까지, 거의 모든 디자인툴이 지니고 있는 패러다임에 도전한다는 의미이다. 즉, 컬러피커가 아무리 형편 없다고 해도 우리에게 익숙한 존재이다.

우선 팀은 제일 자명한 문제, 상호운영성(interaction)에 집중했다. 그들은 컬러피커를 대체하기 위한 믹서(mixer)를 하나 만들었다. iOS 엔지니어이자 페이퍼의 Mixer 개발을 이끈 예술가이기도 한 매튜 첸(Matthew Chen)의 말이다. “앤드루는 믹서가 피커보다 더 친숙한 툴이 될 수 있다고 봤어요. 적절하게 운용하기만 하면 더 융통성 있을 겁니다.”

하지만 아름답고 직관적인 방식으로 색상을 섞을 수 있지 않는 한, 믹서가 좋은 경험을 전달해 줄 수 없음이 곧 드러났다. 색공간(color-spaces)라 알려진 컴퓨터 색상 구축 과정이 일반적으로 색상 섞기용으로 최적화됐다 할 수 없기 때문이었다. 첸의 설명이다.

“좋은 혼합 알고리듬을 찾으면서 처음에는 여러가지 색공간를 덧붙여 봤습니다. RGB와 HSV, HSL, 그리고는 CieLAB과 CieLUV를 붙였지만 결과는 실망스러웠어요. 빨간색과 노란색을 섞으면 오렌지 색이 나오고, 빨간색과 파란색을 섞으면 보라색이 나와야 하는데, 사용하는 색공간가 무엇이든지 간에 그런 결과를 낼 방법이 없었어요. 엔지니어링의 격언을 하나 빌자면, 제대로 작동할 제일 간단한 것부터 해라가 기억나더군요. 예. 그래서 제일 쉬운 접근을 시도해 봤습니다. 하지만 그것마저도 별로라는 느낌이었어요.”

If Everyone Else Is Wrong, Why Bother Innovating?

그렇다면 어째서 컬러 믹서의 문제를 해결하기 위한 개발과 고민을 1년씩이나 해야 한단 말인가? FiftyThree 팀은 중요하기 때문이라 말한다. 그들의 말에 따르면 수채화 붓과 마커, 연필을 개선시키고 성장시키기 위해서였다. 색상의 딜레마를 해결하지 않으면 앱의 나머지도 개선시킬 수 없었다. 앨런의 말이다.

“우리는 실제 제품의 프레임을 짜기 위해 엄청나게 노력했어요. 상호 영향을 없애기 위해서였죠. 그렇다면 제품 디자인과 엔지니어링을 조화롭게 해야 합니다. 둘 간의 위계를 정하면 안 되어요.” 팀은 중급의 사용자가 전문가 수준의 작업물을 기대하던 바보다 훨씬 빠르게 만들어낼 수 있는 상황이 바로 목표 달성이라 여겼다.

A Conceptual Breakthrough From the Past

FiftyThree 팀이 난관을 극복한 계기가 있었다. 작고한 독일의 두 과학자, 파울 쿠벨카(Paul Kubelka)와 프란츠 문크(Franz Munk)으로부터 얻은 통찰이었다. 그들은 1931년 “페인트 광학에 대한 기여(Ein Beitrag zur Optik der Farbanstriche)”라는 논문을 냈다. 이 논문은 색공간의 질문이 컴퓨팅의 개념이 나타나기 이전에서도 문젯거리였으을 보여준다. 논문은 “반사율(reflectance) 이론”과 함께 맨눈으로 알 수 있는 물리적인 경험상으로 색상 혼합을 이루는 방정식을 알려준다. 다시 말해서, 여러가지 색상이 빛을 빨아들이거나 반사시키는 방법을 의미한다.

오늘날 컴퓨터는 빨간색과 녹색, 파란색(RGB 채널)이라는 세 가지 색가(value)로 색상을 저장한다. 하지만 쿠벨라-문크 모델은 각 색상마다 적어도 여섯 가지 색가를 제시한다. RGB 색상 각각에 대한 반사율(reflectance)과 흡수율(absorption)이다. FiftyThree의 공동창업자이자 CEO인 조지 펫슈닉(Georg Petschnigg)의 설명이다. “화면상의 색상을 세 가지 치수로 묘사할 수 있습니다만, 색상의 혼합은 사실 여섯 가지 치수를 통해 나타납니다.” 쿠벨카-문크의 논문 덕분에 팀은 미학적인 문제를 수학적인 프레임웍으로 전환할 수 있었다.

3차원의 색공간에서6차원의 색공간로의 이주는 오래된 칙칙한 색상 혼합에서 절대적인 리얼리즘의 차이만큼이나 크다. 펫슈닉은 이렇게 말한다. “페인트가 섞여서 만들어내는 다양한 색상은 반사율과 흡수율 간의 상호작용입니다. 빨간색으로 매니큐어와 빨간색 잉크를 비교해 보세요. 둘 다 빨간색입니다만, 빨간색 매니큐어는 검정색 종이에서도 잘 보일 겁니다. 빛을 반사시키니까요. 잉크의 경우는 빛을 흡수하기 때문에 안 보이겠죠.

Can iPad Apps Be Too Real?

6차원 색공간를 흉내내면 실제와 너무 비슷해진다는 결과를 낳기도 한다. 첸의 설명이다. “실제-세상에서 일어나는 색상 혼합의 별난 점까지 모두 다 재생산하고 있었습니다. 사실 색상 혼합이란 화가들이 연습을 통해서 마스터할 수 있는 어려운 과정이죠. 즉 우리는 너무 비현실적인 색상 혼합에서 너무 현실적인 색상 혼합으로 옮긴 셈입니다.”

그러나 직관적인 방식으로 이러한 물리적인 속성을 제현할 수 있는 단일 알고리듬은 정말 거대한 다변수(多變數) 연산을 요구했다. 첸이나 펫슈닉 모두 해결책이 있을지 몰랐다. 즉, 다시 돌아가서 원래의 사업적인 문제를 해결할 길이 안 보였던 것이다. 독특한 팔레트가 브랜딩을 위해서 중요하기는 하지만 새로운 툴 갖고는 찾기가 여전히 어려웠다. 그래서 팀은 차라리 사용자가 색상을 혼합하는 방식을 스스로 학습하도록 알고리듬을 짜 보기 시작했다.

Using Common Sense Over Piles of Math

펫슈닉과 그의 팀은 손수 주요 색상 100 쌍을 고른 후, 어떤 혼합색이 나은지 직접 눈으로 테스트했다. 첸은 여러가지 색상을 섞었을 때 결과가 어떻게 나오는지 보여주는 아이패드 앱을 별도로 만들었다. 실험을 하면서 팀은 결국 수학적으로 100가지 집합을 만들었다. 개념적으로는 색상 트랜지션(transition)이었다. 팀은 이 100가지 특정점(datapoint)을 이용하여 스스로 학습을 하는 프레임웍을 만들었다. 100가지 손수 조정한 집합에 속하지 않는 배합일 경우 학습에 따른 추정을 할 수 있는 프레임웍이었다.

아래 그림은 컬러 툴의 실제로 돌아가는 프로토타입 두 가지이다. 검정 배경색인 것과 하얀 배경색인 것이 있다. 두 색상과 연결되는 저 일그러지고 굽은 선들이 보이시는가? 전통적인 컬러피커에서는 파란색과 노란색 중간 단계에 녹색이 아닌 흰색을 거쳐 가는 직선이 있을 것이다. 첸이 결국 선택한 색상 사이의 굽은 선은 아이패드의 알고리듬 두뇌에 따라 랜덤으로 보일 수 있지만, 사람이 실제로 사용한다고 하면, 그 경험은 완벽하게 합리적으로 보일 것이다. (그 자체의 상호작용은 프로토타입 네 개 이상이 필요하지만 다음에 더 자세한 것이 나온다.)

첸의 설명을 들어 보자. “우리는 우리는 유사한 색상이 유사한 방식으로 혼합되도록 했습니다. 실제로는 그렇지가 않죠. 안료는 여러 가지 화학적 조합으로 이뤄지기 때문에 유사해 보이기는 해도 서로 대단히 다른 혼합작용을 보이거든요. 우리는 정확하게 통제하고 싶었습니다. 색상을 혼합할 때 혼합하는 색상의 어떤 음영이 지나가는지 알면 혼합 과정에서 음영이 다른 색상에게 서둘러 전가되지 않게 할 수 있죠.” 아래 프로토타입의 피드백을 보면, 실험자는 여섯 번째 버전이 제일 자연스런 트랜지션이라고 생각했다.

100쌍의 색상으로 혼합을 어떻게 할지 알아낸 이후, 첸은 색조와 채도, 명도의 혼합도 보장하도록 사후-처리 과정도 추가시켰다. 첸의 말이다. “마지막으로 믹서 안에서의 색상 혼합이 간단하고 자연스러워야 한다는 점이 남았어요. 이상적으로는 우리가 색상을 섞는 과정에 있다는 것조차 못 느껴야 합니다.”

The Mathematical Conundrum, Illustrated

그렇다면 어째서 컴퓨터는 인간과 색상을 달리 볼까? 펫슈닉의 설명에 따르면 아래 도식과 같다. 아래의 도식은 RGB 공간에서의 간단한 색상 혼합을 설명하고 있으며, 전면부 색상 Ca와 배경색인 Cb, 혼합요소 알파(0에서 1 사이), 그리고 결과로 나오는 색상 Co 간의 선형 혼합을 묘사한다.

“컴퓨터에서는 색상 대부분을 RGB 세 가지로 표현합니다. 노란색과 파란색을 섞으면 녹색이 나온다는 사실을 우리 모두 초등학교에서 배우죠. 하지만 이 방정식에 집어 넣어 계산해 보면 다른 결과, 그러니까 회색이 나옵니다! 수학적으로 말씀드려서 노란색(1,1,0)과 파란색(0,0,1)의 혼합은 (0.5, 0.5, 0.5)로서 회색이죠. RGB가 색상 배열(color spectrum)의 한 점을 묘사하기 때문이지, 혼합시켰을 때의 색상 행위를 나타내지 못하기 때문입니다.”

Making the Mixer Touch-Native

혼합의 해결책을 찾은 다음, 반복해서 완벽하게 하려면 더 많은 수고를 들여야 했다. 앨런의 말이다. “이전에는 우리 믹서와 같은 일을 한 사람이 아무도 없었습니다. 그래서 우리는 디자인을 점검하고 반복해서 개선시키기 위해 이전의 어떠한 툴보다 프로토타입을 더 많이 만들어야 했습니다.”

목표는 개념적인 일관성이었다. 앨런의 말이다. “두 색상이 보색인지 이웃색인지에 상관 없이, 한 바퀴 회전은 동일한 정도의 변화를 만들어 냅니다. 믹서에서 정말 천재적인 부분은 따로 있어요. 올바른 색상을 만들 수 있도록 해 준다는 겁니다. 파란색과 빨간색을 섞어서 보라색을 만드는 팔레트가 있다면, 이 보라색은 파란색과 빨간색에서 나왔기 때문에 주변색과 조화로운 보라색으로 나올 겁니다.”

앨런은 HTML로 만든 프로토타입 네 가지를 계속 보여주면서 설명했다. 아래 보이는 바와 같이 브라우저 안에서 돌릴 수 있으며, 앨런이 만든 프로토타입이 iOS 개발자인 첸을 도와서 프로그래밍 접근을 개선시킬 수 있었다.

첫 번째 프로토타입에서 팀은 핵심 혼합 제스쳐를 하나의 상호작용(interaction)으로 돌아가는지 알고 싶어했다. 앨런의 말이다. “훌륭하게 돌아갔습니다만, 전통적인 색조-채도-명도값을 통한 색상 통제는 영 아니었습니다. 그래서 우리는 색상 두 가지의 혼합으로 실험을 시작해 보았다.

두 번째 프로토타입에서 팀은 색상 간의 혼합을 탐구했다. 팀은 RGB와 같은 색공간과, 색조와 채도, 명도 변화가 지각적으로 고른 색공간 사이의 차이를 고려했다. 앨런의 말이다. “분명 지각적인 색상이 올바른 접근이지만, 우리의 혼합 모델을 엔지니어링으로 만들고 쇄신시키고자 해서 더 깊이 들어갔습니다.”

세 번째 프로토타입은 사용자 피드백에 관한 것이었다. 이 모션 프로토타입은 혼합 행위를 어떤 방식으로 표현할지를 탐구한다.

네 번째 프로토타입에는 부수적인 기능을 추가했다. 마지막 버전에서 팀은 이전까지 배웠던 것을 모두 다 합치고 색상의 저장과 이동용 팔렛트와 연동시키는지 알아보기 시작했다.

그들의 색상 솔루션이 완성되자 팀은 애플에게 새로운 페이퍼의 빌드를 보내고 태풍 샌디호를 대비했다. 지난 주 FiftyThree가 있는 TriBeCa의 정전소동이 있었던 때에 앱이 앱스토어에 등록됐다. 아이러니컬하게도 완전히 깜깜한 어둠 속에서 색상에 대한 승리를 자축해야 했었다. 그들은 다락의 사무실에서 촛불을 켜서 파티를 벌였다. FiftyThree의 페이퍼는 이곳에서 다운로드받을 수 있다.

The Magical Tech Behind Paper For iPad's Color-Mixing Perfection | Fast Company