UI와 디바이스 역사
오늘날 당연하게 여겨지는 UI 요소와 디바이스들은 저마다 최초의 순간을 가지고 있다. 이 역사를 돌아보는 것은 UX 디자이너에게 "왜 이 형태가 되었는가"를 되짚어볼 수 있는 관점을 제공한다.
최초의 마우스 (1968). 스탠포드의 더글러스 엥겔바트(Douglas Engelbart)가 1968년 12월 9일 "디스플레이 시스템을 위한 x-y 위치 표시기"를 공개했다. 작은 나무 상자에 휠이 달린 형태였고, 손에 쥐는 장치는 '마우스', 스크린의 커서는 '버그(bug)'라 불렀다. 1970년대 제록스 파크(Xerox PARC)에서 더 개발되다가 애플에 이르러 최초로 대량생산되었다. 1980년 애플은 IDEO에 Lisa 컴퓨터용 마우스를 의뢰했고, IDEO는 포토트랜지스터 기반 볼마우스로 제작 비용을 낮추면서도 신뢰성을 확보했다.
최초의 애플 컴퓨터 (1976). Apple-I은 1976년 7월 $666.66에 출시됐다. 첫 모델은 케이스·키보드 없이 마더보드만 팔았다(당시엔 그것이 personal computer로 간주됐다). 폴 테렐의 주문(대당 $500, 50대)에서 출발해 잡스와 워즈니악이 한 달 내에 제작·납품했다. 이후 150대를 추가 생산, 50대는 친구들에게, 100대는 판매업자에게 팔았다. 2012년 소더비 경매에서 정상 작동 상태의 Apple-I 한 대가 약 4억 3천만 원에 낙찰됐다. 1977년 Apple II가 키보드와 주변기기를 갖춰 소개되며 본격적인 개인용 컴퓨터 시대가 열렸다.
최초의 네비게이션 (1920년대). 영국에서 제작된 세계 최초의 내비게이션은 손목에 차고 운전하면서 지도가 말려있는 나무 롤러를 돌려 방향을 확인하는 기계식 장치였다.
최초의 타자기와 QWERTY (1868). 1868년 크리스토퍼 쇼울즈(Christopher Sholes) 등이 상업적으로 성공한 최초의 타자기를 'Type-Writer'라는 이름으로 레밍턴에 특허 양도했다. 초기 프로토타입에 이미 QWERTY 키보드가 장착되어 있었다.
최초의 스프레드시트 — VisiCalc (1979). 1979년 Apple-II, 1981년 IBM-PC에 출시된 VisiCalc은 개인용 컴퓨터를 '장난감'이 아닌 '쓸모 있는 물건'으로 각인시킨 IT 역사상 최초의 '킬러 앱(Killer App)'이다. 앱 자체가 매력적이어서 그 앱이 동작하는 기계를 사고 싶게 만들 정도의 앱이라는 뜻이다.
최초의 리모컨 — 플래시-매틱 (1955). 1955년 제니스 일렉트로닉스의 유진 폴리가 개발한 '플래시-매틱'은 빛을 이용해 음량과 채널을 조정하는 최초의 리모컨이었다. 햇빛이 강한 날에 오작동했지만 폭발적으로 팔렸고, 이 시기 'Couch Potato'와 'Channel Surfer'라는 신조어가 생겼다. 광고 시청자들이 소리를 줄이는 바람에 광고주들로부터 항의를 받기도 했다. 폴리는 이후 초음파(1956), 적외선(1980) 모델도 개발했다.
최초의 금전등록기 (1879). 술집 운영자 제임스 리티가 종업원의 현금 유용 문제를 해결하기 위해 만든 '청렴한 출납원(incorruptible cashier)'이 최초의 금전등록기다. 특히 '99센트 같은 단수 가격(odd pricing)'은 거슬러줘야 해서 등록기를 열게 만들고, 소비자에게는 한 자리 낮은 가격으로 기억되는 효과가 있어 현대 가격 심리학의 원형이 되었다.
역사 속 '웨어러블'과 '전화기'. 청나라 시기 제작된 1.2cm의 초소형 주판 반지는 최초의 '웨어러블 계산기'라 할 만하다. 북부 페루 치무 제국의 1200년 전 면 줄 전화기(약 23미터 면 줄)는 권위자와 소수 엘리트 간의 원거리 의사소통 도구로 쓰였을 것으로 추정된다.
핵심 내용
- 마우스(1968): Engelbart, SRI → Xerox PARC → IDEO 볼마우스
- Apple-I(1976): 케이스 없이 $666.66, 마더보드만 판매
- QWERTY 키보드(1868): Sholes의 타자기 프로토타입에 등장
- VisiCalc(1979): IT 역사상 최초의 킬러 앱
- 플래시-매틱(1955): 빛 기반 최초 리모컨, 'Couch Potato' 신조어의 기원
- 금전등록기(1879): 단수 가격(odd pricing) 심리학의 원형
- 역사적 사례는 왜 이 형태가 되었는가를 묻는 UX 디자이너의 관점을 길러줌
- 브랜드 이름의 유래: 애플·블랙베리·오렌지 등 과일·사물 이름을 딴 브랜딩 사례와 pxd의 '귤 미디어' 검토 비하인드
관련 개념
- 한글 입력 설계 — QWERTY와 대비되는 한글 자판의 설계 원리
- 어포던스 — 초기 UI가 '이해 가능한 형태'를 찾아온 역사
- 스큐어모피즘 — 이전 매체의 형태가 새 매체에서 유지되는 원리
- 모델 휴먼 프로세서 — UI의 인간 인지 이론적 기반
- 단순함의 법칙 — 브라우저 툴바가 수렴해간 미니멀리즘의 이론적 배경
- 창의적 모방과 디자인 성장 — 경쟁사의 좋은 아이디어를 선택적으로 흡수하는 디자인 성장 원리
브라우저 툴바의 미니멀리즘 경쟁 — 사파리·IE·크롬
2010년 크로미움 빌드의 UI 변화를 계기로 정리한 브라우저 툴바 진화사는, 어느 한 기업의 독자적 성과가 아니라 경쟁사끼리 서로 베끼는 과정을 통해 미니멀리즘이 완성되어 가는 모습을 보여준다. 사파리 1은 IE6가 툴바에 여러 기능을 욱여넣던 관행에서 벗어나 네비게이션에 필요한 버튼만 남기고, 배타적으로 쓰이던 리플레쉬·중지를 하나의 버튼으로 통합했으며 주소창에 검색창과 파비콘을 처음 도입했다. IE7도 사파리의 아이디어를 가져왔지만 미니멀한 디자인 철학까지는 따라잡지 못했다.
크롬 1은 사파리와 동일한 툴바 버튼 구성에서 출발해, 주소창과 검색창을 통합한 옴니박스로 검색 사용성을 크게 높였다(이 아이디어 자체는 IE 확장 유틸리티에서 유래했다). 또한 탭을 창 상단으로 올려 주소창과 탭의 중복을 없앴다. 사파리 3의 윈도우 버전은 창 제목바에 메뉴가 들어가며 복잡해지는 것을 막기 위해 메뉴바를 없애고 메뉴 버튼을 오른쪽에 배치했으며, 사파리 4는 리플레쉬 버튼을 주소창 안으로 옮기고, 베타 버전에서는 크롬의 영향으로 탭을 타이틀바 위로 올렸다가 사용성 문제(창 이동 시 다른 탭이 선택되는 문제)로 정식 버전에서 되돌렸다. 아이패드는 화면이 작고 대부분의 URL이 `http://`이니 중요한 정보가 아니라는 판단 아래 이를 생략했는데, 이는 "필요한 정보가 아니면 뺀다"는 원칙을 주소창에 적용한 정보 디자인의 사례로 꼽힌다. 크롬 6은 다시 아이패드·아이폰의 툴바 스타일과 `http://` 생략을 따라가며, 옴니박스에 돋보기 아이콘을 추가해 "주소 입력보다 검색이 기본"이라는 의도를 명확히 했다.
이처럼 경쟁사들이 서로의 좋은 아이디어만 선택적으로 흡수하고 군더더기를 덜어내는 반복적 모방과 도태의 과정을 거쳐, 브라우저 툴바는 하나의 수렴점인 미니멀리즘으로 향해갔다.
구글 두들 — 브랜드 로고 변형의 역사
구글 두들(Google Doodle)은 브랜드 로고를 특정한 날의 의미에 맞게 변형하는 관행의 기원이다. 1998년 8월 30일, 구글 창업자 두 명이 Burning Man Festival에 참석하면서 회사 부재를 알리기 위해 처음으로 로고를 변형한 것이 시작이다. 이 최초의 두들은 기업 브랜드를 훼손한다는 우려에도 불구하고, 재미있는 기업 이미지를 만드는 방법으로 자리 잡았다.
이후 구글은 두들을 정기적으로 제작했으며, 한국인으로는 데니스 황이 2000년 인턴 시절부터 두들 디자인을 담당했다. 구글은 사용자 제안을 받는 채널과 어린이·학생 대상의 Doodle 4 Google 경진대회도 운영한다(2008년 스웨덴을 시작으로 인도·미국 등으로 확산, 2012년 미국 대회에 11만 명 응모).
국내에서는 네이버가 2008년 12월 25일 처음으로 '스페셜 로고'를 도입했다. 이러한 로고 변형은 기업 브랜드를 딱딱한 자산이 아니라 맥락과 감성에 반응하는 살아있는 아이덴티티로 바라보는 관점의 전환을 상징한다.
브랜드 이름의 유래 — Apple, Blackberry, Orange
기기·서비스의 형태만큼이나 브랜드 이름의 유래 역시 왜 지금의 UI·제품 문화가 되었는지를 보여주는 흥미로운 단서다. 애플(Apple Inc.)의 이름은 스티브 잡스가 사과 농장에서 일한 경험이나 비틀즈의 음반사 애플 레코드에서 영감을 받았다는 설이 함께 전해지는데, 회사 이름을 정할 기한까지 더 나은 안이 없으면 그대로 쓰기로 했다는 뒷이야기가 있다. 로고 역시 처음엔 뉴턴과 사과나무였다가 복잡해서 사과로, 오렌지와 헷갈려 결국 한 입 베어 문 모양으로 정착했다. 이 이름 때문에 애플은 비틀즈의 애플 레코드와 오랜 상표 분쟁을 겪었고, 이는 iTunes에 비틀즈 음원이 뒤늦게 들어온 배경이기도 하다.
블랙베리(Blackberry)는 원래 이메일 관련 이름을 고려했지만 업무 연상으로 혈압을 높인다는 조언에 따라 포기하고, 검은색 키보드가 옹기종기 모인 모양에서 착안해 마음의 평화를 주는 과일 이름으로 지어졌다. 오렌지(Orange)는 프랑스에 본부를 둔 세계 5위 이동통신사로, 브랜드 컨설팅사 Wolff Olins가 로고와 브랜드 가치를 설계했으며 사각형 로고는 과일이 아닌 아메리칸 익스프레스·허츠처럼 강한 비즈니스 이미지를 주기 위한 선택이었다. 이런 과일 이름 브랜딩의 연장선에서, pxd도 창립 초기 '귤 미디어'라는 사명을 검토했으나 동료들의 반대와 동명의 디자인 회사 존재로 무산된 바 있다.
출처
- 최초의 마우스, 최초의 네비게이션, 최초의 애플 컴퓨터 — 이재용, UX 가벼운 이야기
- 두들(Doodle, 구글 로고 변형)의 역사 — 이재용, GUI 가벼운 이야기
- Apple, Blackberry, Orange 이름의 유래 — 2010-03-30, 이재용
- 구글과 애플의 미니멀리즘 베끼기 경쟁 — 2010-07-05, 無異