기사 공유하기

1. 관성 스크롤 

아이폰의 성공 요인이라면 여러 가지, 정말 여러 가지가 있지만, 그중 단 하나만 고르라면 나는 자신 있게 관성 스크롤을 뽑는다(아래 동영상 10초 이후. 2007년 1월 맥월드에서 스티브 잡스가 아이폰을 세상을 소개하던 날, 잡스가 ‘터치’하며 상하로 스크롤 하자 청중이 감탄 어린 탄성을 지른다. 마치 마이클 잭슨의 문워크를 처음 본 1983년의 관객처럼).

https://youtu.be/ulmG2i2XLYk

스크롤하던 손가락을 떼면 물리적 관성과 가상의 마찰력에 맞춰서 속도가 줄어드는 그것. 팍팍팍 여러번 밀면 스크롤에 가상의 운동량이 추가되고 화면 끝에 가상의 고무줄이 달린 것도 중요하지만, 어디까지나 첫째 개념의 부속일 뿐이다.

2007년 1월 맥월드에서 아이폰의 인터페이스를 설명하는 스티브 잡스
2007년 1월 맥월드에서 아이폰의 ‘혁신적인’ UI를 설명하는 스티브 잡스.

사실 관성 스크롤은 정전식 터치스크린과 iOS 엔지니어들의 그래픽 최적화 설계의 결합물이기 때문에 하나라기엔 큰 하나이지만, 터치스크린과 그래픽 최적화를 빼고도 내 선택은 변하지 않는다. 관성 스크롤, 이게 없으면 다른 모든 것이 좋아도 스마트폰을 쓸 수가 없기 때문이고, 또 그런 중요한 것이 이때 갑자기 디자인된 것은 시대적으로 우연성이 크기 때문이다. 이 작은 UI(사용자 인터페이스) 디자인 하나 때문에 지금 우리가 아는 스마트폰 시대가 열렸다고 보아도 과언이 아니다.

아이폰 이전의 스마트폰 상황을 보자. 윈도우모바일이 스마트폰의 주류였고(팜이나 심비안 등 그 외에도 많았다), 모두 감압식 터치스크린의 오른쪽 끝엔 아주 폭이 좁은 스크롤바가 있었으며 이것을 스타일러스펜으로 끌어당겨서 스크롤을 해야만 했다. 이 자체도 짜증이 나지만 스타일러스를 잃어버리면 스크롤은 포기하는 게 나았다.

작은 화면에서 더 작디 작은 스크롤바를 조작하는 일은 불편하기 짝이 없는 일이었다.
휴대폰의 작은 화면에서 더 작디 작은 스크롤바를 조작하는 일은 불편하기 짝이 없는 일이었다.

그렇다고 스크롤바 폭을 늘리면 안 그래도 좁은 2.5인치 정사각형 화면(하단엔 HW 키보드가 있었기 때문에)이 더 좁아지고. 이 상황을 해결하려고 당시 고급 스마트폰들에 붙어 있던 것들이 HW 측면의 스크롤 다이얼인데, 이게 없는 것보다는 낫지만 그렇게 좋을 것도 없다는 것은 애플 워치의 디지털 크라운을 써본 사람이라면 알 것이다.

관성 스크롤이 없으면 뭘 어떻게 하더라도 불가능한 것은 바로 ‘문서 읽기’다. 휴대폰에서 워드, PDF야 안 봐도 그만이라고 생각할 수 있다. 그러나 ‘문서’의 범위는 아주 방대해서, 모든 웹 페이지, SNS, 이메일, 카톡, 그 모든 것이 문서이다. 스크롤이 속 터지면 이런 것 모두 쓸 수가 없다. 그러니 윈도우모바일이 PMP와 네비게이션으로만 쓰였던 것이다.

2. 잡스의 주문 

그러던 어느 날 스티브 잡스가 애플의 한 UI 디자이너에게 정전식 터치스크린을 보여주었다. 그리고 이렇게 주문했다 .

“휴대폰에서 전화번호부를 스크롤 할 수 있는 좋은 방법을 좀 만들어 봐.”

‘매크로미디어 디렉터’로 UI 프로그래밍하는 데에 능했던 그 디자이너는 얼마 뒤 관성 스크롤의 워킹 프로토타입을 가져왔다. 바운스백, 즉 화면 끝에 달린 가상의 고무줄까지 포함해서.

그 결과로 일어난 일은 HCI(Human Computer Interaction: 사람과 컴퓨터 사이의 인터페이스를 통틀어 이르는 말) 역사의 어떤 부분에서도 유례를 볼 수 없는 거대한 일이었다. 아이패드(iPad)가 컴퓨터의 미래라는 믿음을 가지고 출시를 계획하고 있던 스티브 잡스가, 생각을 바꾸어, 아이폰(iPhone)을 먼저 출시하기로 한 것이다. 이 작은 UI디자인 하나가, 잡스로 하여금 ‘이런 UI라면 전화기도 컴퓨터가 될 수 있겠어’라고 생각하게 만든 것이다. 이 일화는 아이작슨의 스티브 잡스 전기에 잘 옮겨져 있다.

스티브 잡스는 왜 그렇게 생각했을까? 아마 가장 큰 킬러 앱인 웹브라우징이 폰에서 가능하겠다는 판단이 중요했을 거로 짐작한다. 이걸 뜯어서 생각해보면 다음과 같다. 스크롤이 잘 되면 가상적으로 더 큰 화면을 가진 것과 같은 효과가 있다. 현재 화면이 뇌의 워킹 메모리에서 지워지기 전에 스크롤 후 화면이 눈에 들어오기 때문이다. 그러니 다른 스마트폰이 2.5인치였을 때 아이폰1은 3.5인치에도 그치지 않고 가상적으로 세로로 길쭉한 7인치 정도는 되는 효과를 줄 수 있었던 것이다.

[box type=”info”]

YouTube 동영상

아이패드를 ‘컴퓨터의 미래’로 생각했던 스티브 잡스의 원래 계획은 아이패드를 먼저 공개하는 것이었다. 하지만 관성 스크롤을 접한 뒤에 아이패드 대신 아이폰을 먼저 공개하기로 결정을 바꾼다. 위 화면은 잡스의 아이패드에 영감을 준 것으로 알려진 영화 [2001년 스페이스 오디세이]에서 아이패드와 비슷한 컴퓨터 패드 소품이 등장하는 장면.

[/box]

3. 필요충분조건 

그런데 생각해보자.

과연 세상에서 몇 명의 디자이너가 이런 주문을 받았을 때 관성 스크롤을 생각할 수 있을까? 대부분 어떻게 하면 스크롤바 조작을 쉽게 할지를 궁리하지 않을까?

사실 관성 스크롤은 그 이전에도 PC의 화려한 플래시 웹페이지 등에 존재하기는 했다. 놀랍게도 1992년 SUN의 STAR7 PDA 데모에도 관성 스크롤이 등장한다(더 놀랍게도 시연자는 JAVA를 만든 제임스 고슬링이다).

YouTube 동영상

그러나 이런 사례는 어디까지나 슬롯머신을 물리적 모티브로 한 유희적인 인터페이스였을 뿐, 이걸 OS의 메인 UI로 탑재하여 ‘문서’를 스크롤하려는 시도는, 내가 알기로는, 아이폰 이전에는 없었다. 구글스칼라에서 Igarashi, Baudisch, Hinckley 같은 스크롤 구루들을 기준점(pivot)으로 삼아 많은 HCI 논문을 검색해도 나오지 않는다.

왜 그럴까? 따져보면 그럴만한 이유가 생각난다.

  1. PC 중심 사고관에서 1 핑거 드래그(One finger drag)는 영역 선택에 할당되어야 한다. 이 생각을 버리는데 용기도 필요하지만, 그 이전에 버릴 생각 자체가 잘 안난다.
  2. PC 중심 사고관에서 스크롤하면 마우스휠이다. PDA에서 스크롤이 정 중요하다면 측면에 휠을 다는게 누가 봐도 정답이다.
  3. 문서를 관성 스크롤하는 건 실세계 모티브가 존재하지 않는다. 의사 물리 작용을 잘 만족시키니 지금에야 정말 자연스러워 보이지만, 사실 실세계에서는 길쭉한 문서를 집어던지듯 밀어 올리면서 읽는 일은 결코 없고 종이문서가 그렇게 미끄러지지도 않는다.

그러니까 이것은, UI 디자인의 또 다른 위대한 발명품인 비지칼크(VisiCalc)의 무한 테이블에 비견할 만한 것이다. 써보면 당연한 것 같지만 피지컬 월드에는 대응되는 사물이 없는 것.

그러면 그 디자이너가 이런 발상에 닿기 위해서는 무엇이 필요했을 지 생각해보자.

  1. 하드웨어 휠은 안 된다는 생각이 있어야 한다. 많은 버튼을 싫어하는 잡스가 그걸 애당초 금지했을 것이다.
  2. 평범한 스크롤바는 안될 거라는 생각이 있어야 한다. 잡스가 따로 임무를 주었다는 것만으로도 이 옵션은 머리에서 지웠을 것이다.
  3. ‘마법같은 인터랙션’에 대한 강한 욕구가 있어야 한다. 이 디자이너는, 뒤에 더 말하겠지만, 누구보다도 이것이 강한 사람이었다.
  4. 탭이 미끄러진 것과 진짜 드래그를 구분하고 간단한 물리 시뮬레이션 프로그래밍 정도는 할 줄 알아야 한다. 이런 종류의 것은 만들줄 모르면 최초 발상도 잘 안된다. 안드로이드 진영에서는 이 간단한 물리 시뮬레이션 프로그래밍을 그 이후로도 몇년 동안이나 보고 따라하는 것도 못했다.
  5. 닭과 달걀 중 뭐가 먼저인지는 몰라도 최초의 아이폰은 ‘복붙'(copy/paste)이 없었기 때문에 1 핑거 드래그로 영역 선택할 일이 없었다.

여기서 끝이 아니다. 2007년 비디오에 나온 저 스크롤 속도와 프레임 수준. 이걸 위해서 OS의 많은 설계를 바꿔도 되는 가치가 있다는 경영자의 결단이 필요하다. 어차피 제품의 출시 순서를 바꿀 정도였으니 이 결단은 스티브 잡스에게는 쉬웠을 것이다. 그러나 99%의 다른 경영자에게 이 정도까지는 어렵다. 이런 식의 결정 스타일을 어설프게 따라하다 망하는 수도 많고.

악수 협력 협동 손 퍼즐

여기서 끝이 아니다. 이 디자이너는 완벽주의자였기 때문에, 관성 스크롤은 처음부터 완성된 채로 세상에 나왔다. 반복 입력으로 운동량 추가하기, 페이지 끝에서의 가상 고무줄, 그걸로 모자라 지도와 커버플로우에까지 적용된 상태로 아이폰1이 출시된 것이다.

이런 점들을 종합해볼 때, 이때의 그 디자이너와 스티브 잡스라는 두 사람이 없었다면 제대로 된 관성 스크롤은 10년 뒤에 나왔을 수도 있다고 생각한다. 나는 모든 발명은 창조되는 것이 아니라 ‘발견’되는 것이라고 믿기에 관성 스크롤 역시 언젠가 누군가 만들었을 거라 생각한다.

하지만 정전식 터치스크린이 1965년에 발명되고, 최초의 PDA가 1992년에 출시되었는데, 2007년까지 아무도 관성 스크롤을 시도조차 하지 않았고, 그 후에도 안드로이드에서 쾌적한 스크롤이 가능해진 것이 불과 2~3년 전이라는 것을 생각해보면, 이 10년 뒤라는 가설이 무리하지 않아 보인다.

만약에 스티브 잡스는 있었고, 이 디자이너는 없었다면 한 5년쯤? 아이패드가 먼저 출시한 뒤에 무슨 다른 디자이너들 ‘쪼아서’ 5년 정도 뒤에는 비슷한 게 나왔겠지. 스마트폰 시대가 5년 늦게 왔을 거라는 말이다.

4. 바스 오딩

이 디자이너는 바스 오딩(Bas Ording)이라는 네덜란드 사람이다. 나는 아직 우리나라에서 누가 이 사람을 언급하는 것을 한 번도 본 적이 없다. 그래서 언젠가 이 사람에 대해 제대로 알려야겠다는 생각을 몇 년 동안 하고 있었고 오늘이 바로 그 날이다.

바스 오딩(Bas Ording, @링크드인) https://www.linkedin.com/in/basording/
바스 오딩(Bas Ording, 재인용 출처: @링크드인)

2007년 아이폰 출시 키노트 때, 나는 이 관성 스크롤 장면을 보고 엄청난 전율을 느꼈다. 터치휠이 없어진 대신 더 좋은 게 나왔구나. 그 때부터 쭉 아이폰이 성공한다면 이것 때문이다라고 생각했었다.

대학원에서 ‘프로그래밍하는 디자이너’로서 HCI를 공부하고 있던 때였다. 그래서 나도 언젠가는 저런 UI를 만들어 세상에 남겨야겠다고 생각했었다. 사실 이런 생각이 있어서 나는 내가 UX(사용자 경험) 디자이너로 불리기보다는 UI디자이너로 불리기를 더 선호했었다. 단 하나의 UI가 세상을 바꾸는 위력. 물론 지금의 나는 UX디자인 내지는 서비스 디자인이 더 중요한 사업가이지만.

그러고 나서 아이폰이 세계적으로 성공하고, 2009년 말에 우리나라에서도 출시하여 성공했다. 그때 참 많은 사람이 ‘아이폰의 성공 요인은 이것이다’라고 한마디씩들 해댔는데, ‘손안에서 영화, 음악, 메일, 웹서핑까지’, ‘제품 디자인이 좋아서’ 같은 평이한 말이 많았다. ‘손안에서 ~’ 는 사실 틀린 말인데, 팜과 윈도우모바일도 그런 건 다 할 수 있었지만, 이런 성공은 못했지 않은가. ‘앱스토어 수수료가 30% 밖에 안되서’라고 성공 이유를 말하는 경우도 있었는데, 이때 피처폰에서 WIPI 앱을 팔면 이통사가 가져가는 수수료는 20%에 불과했다. 아무튼 이 때 주목할만한 흐름은 ‘UX가 좋아서’라는 말을 사람들이 본격적으로 하기 시작했다는 것이다.

그러나 UX를 강조하는 사람들 중에서도 관성 스크롤을 비중 있게 언급하는 사람은 이상하리만치 적었다. 성공 요인 탑 3 안에 관성 스크롤을 꼽는 사람도 못 봤다. 그래서 ‘아직 UI에 대한 사람들의 생각이 부족하구나’ 라고 생각하는 한편으로 ‘내가 너무 과하게 생각하는 건가’ 하고 자기 의심도 해보았다. 그러던 중 2011년에 잡스가 타계하고 전기가 출간되었는데, 그 전기에 위의 일화가 소개되어 있는 게 아닌가. 관성 스크롤 때문에 아이폰과 아이패드의 출시 순서가 바뀌었다고. 관성 스크롤이 세상을 바꾼 게 맞다는 확신을 하게 된 순간이었다.

5. 수많은 발명

재밌는 것은 그 일화 속에 그 디자이너가 그 유명한 맥 OS의 dock 애니메이션도 만들었다고 나왔던 것이다. 만든 걸 갖고 애플에 찾아갔더니 잡스가 맘에 들어 해서 애플에 채용했다고 한다. 이걸 읽고 그 사람 개인에 대해 큰 관심이 생기기 시작했다. 그런데 자기를 드러내는 걸 어지간히 싫어하는 사람인지, 이렇게 큰 공을 세운 사람인데 스티브 잡스 전기에 “한 디자이너(a designer)”라고만 등장하는 바람에 그 이름을 알 수가 없었다.

그런데 그의 이름을 알 방법이 생각이 났었다. 마침 삼성과 애플 사이에 바운스백 특허 소송이 났을 때라, 구글 페이턴트에서 그 특허 원문을 찾으면 거기에 발명자로 이름이 있을 것 아닌가. 그래서 찾아보았더니 과연! 정말 있었다.

그 이름도 당당한 단독 발명자, 바스 오딩(Bas Ording).

US7469381B2 https://patents.google.com/patent/US7469381B2
US7469381B2
https://patents.google.com/patent/US7469381B2

이렇게 되면 ‘발명자의 다른 특허 보기’ 링크를 눌러보는 게 인지상정 아니겠는가. 그래서 링크를 눌러보았고 나는 충격에 빠졌다. 내가 맥과 아이폰에 대해서 쿨하다고 생각했던 거의 모든 UI에 이 사람이 발명자로 들어가 있었던 것이다. 그 중에 절반 정도는 제1 발명자로. 다음은 그가 발명&디자인한 것들 중 일부이다.

맥 OS(Mac OS) 

  • Dock 애니메이션
  • 익스포제
  • 지니 효과 (창 최소화하면 독으로 빨려들어가는 것)
  • 다이얼로그 팝업 (창 상단에서 빨려나오는 것)
  • 작동하는 파일 아이콘 (마우스오버 시 나오는 플레이버튼 누르면 아이콘 상태로 영상 재생)
  • 파인더의 파일 프리뷰

아이폰(iPhone) 

  • 관성 스크롤
  • 키보드의 많은 부분 (키 팝업, 커서 이동, 돋보기 등)
  • 테이블뷰의 섹션 헤더 애니메이션과 인덱스 동작 방법
  • 미디어 타임라인 조작법 (터치 후 밑으로 내려서 드래그하면 정밀 탐색)
  • 선택/카피/페이스트 UI
  • 사파리에서 더블탭하면 자동으로 센터 맞춰주는 확대축소 (3GS시절 PC버전 웹페이지 볼 때 유용하게 사용)
  • 가까운 아이콘이 눌러지도록 터치 보정
  • 밀어서잠금해제(제2발명자)

사실상 바스 오딩은 스마트폰 UI를 창조했다고 해도 과언이 아니다. 그리고 이 UI들이 집합으로 모여서 우리가 흔히 말하는 ‘아이폰의 감성 UX’가 된 것이다.

6. 살아 있는 UI의 신 

그 이후 나는 바스 오딩을 내 제1의 롤모델이자 살아 있는 UI의 신으로 모시게 되었다. HCI 역사에서 가장 위대한 사람을 꼽으라면 더글러스 엥겔바트(Douglas Engelbart)도 있고, 앨런 케이(Alan Kay)도 있겠지만, 최소 세 번째 자리에는 바스 오딩이 들어가야 한다고 생각한다.

마우스를 발명한 더글러스 엔젤바트(왼쪽, 2008년 모습, 2013년 타계)와 GUI(그래픽 유저 인터페이스)를 발명한 앨런 케이(2008년 모습).
마우스를 발명한 더글러스 엥겔바트(왼쪽, 2008년 모습, 2013년 타계)와 GUI(그래픽 유저 인터페이스)를 발명한 앨런 케이(2008년 모습).

컴퓨터의 역사라면 스티브 잡스가 바스 오딩보다 윗자리겠지만, UX의 역사라면 잡스보다 바스 오딩을 상석에 놓는 게 옳다고 생각한다. 그것이 디자이너이자, 엔지니어이자, 발명가이자, 말이 아닌 작품으로 미래를 만들어낸 진정한 장인에 대한 온당한 대우라고 생각한다.

너무나 존경한 나머지, 2013년에는 링크드인(Linkedin)에서 인메일(inMail) 크레딧을 유료구매해서 바스 오딩에게 메일까지 보냈다. 내가 얼마 전에 졸업한 한국의 HCI 박사고, 내 대표작은 이건데, 세상의 UI 디자이너 중 당신을 제일 존경한다고. 답장은 안 주더라. 뭐 팬심으로 보낸거라 서운하지는 않았지만, 혹시 애플에 불러주지 않을까 하는 생각이 솔직히 0.1%는 있었다.

S전자에 입사할 때의 포부도 그곳에서 관성 스크롤 같은 걸 제품에 실어보고 싶다는 것이었는데, 면접에서는 좀 순화해서 “마우스-관성 스크롤-S펜. 이런 걸 만들고 싶습니다”라고 말했다. 비록 여러 이유로 1년반 동안 전혀 그 비슷한 일 시작도 못 해보고 퇴사해서 스타트업계로 돌아왔지만. (2005년에 대학원에 간 이후 9년만의 복귀였다. 돌아오니 몸에 맞는 옷 같아 마음은 편하다.)

딱 하나 마음에 걸리는 건 있다. 관성 스크롤이 너무 중독적이라는 것이다. 단순한 액션-피드백이 반복되면 중독이 강화된다는 게, 아직 근거 없는, 내 가설인데, 스크롤을 하도 편하고 자연스럽게 만든 나머지 페이스북 볼 때 스크롤 동작이 너무 많이 반복된다. 뭐 이것까지 발명자 탓을 할 수 있겠냐만.

추신. 

이 글을 쓰려고 다시 검색해 보면서 알게 된 새로운 사실.

바스 오딩은 2015년에 테슬사(Tesla)로 옮겼다. 그런데 애플에서 퇴사한 이유가 인간미 있다. 특허 소송 때문에 재판에 나갈 일이 너무 많아(자기가 핵심 특허를 많이 내서 그런 걸…) 스트레스받고, 디자인할 시간도 없었다고. 그리고 2주일마다 같이 토론을 했던 잡스가 그리웠다고(참조 링크).

바스 오딩의 업적에 비하면 그의 사회 활동은 거의 은둔자에 가깝다. 검색해보면 영어 기사도 그리 많지 않다. 독일어 기사는 좀 더 많이 나온다. 그래도 그의 고향 네덜란드에서는 자랑스러운 네덜란드인으로 좀 알려진 모양이다(자랑스러운 게 당연하다). 반면 그의 작품은 하나같이 화려한 시각적·발상적 표현력과 냉철한 실용성을 함께 뽐내고 있으니 인간적으로도 그 대비가 풍기는 매력이 크다.

이렇게 훌륭한 업적과 매력을 지닌 사람을, 그리고 무엇이 그의 작품인지를, 많은 사람이 알았으면 하는 마음에서, 특히 UX 업계와 HCI 학계에서 아직 이 분을 모르는 사람이 있다면 꼭 알아두기를 바라는 마음에서 이 긴 글을 남긴다.

 

냉철하고 혁신적인 UI 디자이너 바스 오딩이 없었다면, 아이폰의 탄생은 훨씬 더 늦어졌을 것이다. (2007년 아이폰 광고 이미지 합성)
혁신적인 UI 디자이너 바스 오딩. 그가 없었다면, 아이폰의 탄생은 훨씬 더 늦어졌을 것이다. (2007년 아이폰 광고 이미지 합성)

관련 글