수잔 케어의 스케치북

The Sketchbook of Susan Kare, the Artist Who Gave Computing a Human Face

By Steve Silberman
Posted: November 22, 2011



Graphical interface pioneer Susan Kare, photo by R.J. Muna

Point, click.
디지탈에 있어서 다른 방법으로 컴퓨터를 운영하던 시기가 있었나 싶었을 정도로 현재 우리는 아이콘-위주 컴퓨팅의 제스쳐와 메타포(metaphor)를 너무나 자연스럽게 받아들이고 있다. 애플이 1984년 매킨토시를 선보이기 이전, 컴퓨터와 우리들 간의 상호작용은 대부분이 아래와 같았다.



어떻게 해서 위와 같은 인터페이스가 아래로 변하게 됐을까?


iPad photo by Ben Atkin, under Creative Commons license
깜빡이는 커서와 명령어 라인 대신에 파일과 폴더로 이뤄진 가상의 데스크톱을 선보인 컴퓨터가 맥이 처음은 아니었다. 아마츄어 긱 역사가들은 모두 알듯, 1968년, Stanford Research Institute의 더그 엥겔바트(Doug Engelbart)의 시연(모든 데모의 대모(mother of all demos)로 알려져 있다)에 그래픽 사용자 인터페이스, 즉 GUI(아이콘과 마우스, 비트맵 그래픽을 포함)의 핵심 개념이 처음 등장했다.

엥겔바트의 시연에 나온 혁명적인 아이디어를 개발한 곳은 제록스 PARC였고, 24세의 스티브 잡스는 1979년, 전설적인 제록스 방문을 하여 GUI 시연을 보게 된다. 그리고 잡스는 GUI야말로 컴퓨팅의 민주주의적인 미래라 확신했다. (나중에 잡스가 한 말이다. "제 인생에서 본 것 중 최고였습니다. 앞으로 언젠가 모든 컴퓨터가 이렇게 되리라는 확신이 10분 안에 생기더군요.") 그는 곧바로 제록스 알토(Alto)라 불린 비-판매 제품에서 본 제록스의 GUI를 라이센스하였다. 그 대가로 그는 애플 주식을 어느정도 줬고 나머지는 실리콘밸리의 역사가 됐다.


Steve Jobs, 1983, by Susan Kare
얼마 안 있어서 제록스는 기업시장을 겨냥한 제품, 제록스 스타(Star)에 너무나 많은 자원을 쏟아넣음으로써 아이콘 위주의 미래를 거머쥘 기회를 놓치고만다. 그루버(John Gruber)가 지적했듯 스타는 외장형 파일서버 네트워크로 $75,000, 추가적인 웍스테이션으로 $16,000의 값이었다. (그 당시 새 자동차 값의 두 배였다.) 전혀 일반인을 위한 디지탈 혁명이 아니었던 셈이다.

스티브 잡스와 제프 라스킨(Jef Raskin), 그리고 나머지 맥 팀의 천재성은 거대한 미개척지였던 예술가와 음악가, 작가, 그 외 불가사의한 커맨드라인 UI때문에 컴퓨터를 접할 기회가 없었던 시장이 존재함을 깨달았다. 거대한 디지탈 웍스테이션의 시장을 꽃피우게 한 것이다.

"우리들 나머지(the rest of us)"를 위한 개인용 컴퓨터는 어떻게 만들어야 했을까? 구매 뿐만이 아니라 맥을 분명 사용할 사람들이 사랑에 빠질 수 있어야 했다. 그런데 정말 알맞게도, 맥 팀에서 제일 상서로운 젊은 직원이 있었으니 그 이름은 수잔 케어(Susan Kare)였다.


Susan Kare joins the Mac team
그림 교육을 받아 뉴욕대학 미술학 박사를 받은 케어는 베이에이리어(Bay Area)로 이주하여 샌프란시스코 Fine Arts Museums에서 큐레이터로 일했다. 하지만 자신이 미술 영역에서 뭔가 잘못된 곳에 있다는 느낌이 들었다. "전시회를 위해 자기 작업실을 가진 예술가들하고 얘기를 해 봤어요. 저도 정말 저의 작업실에서 작업하고 싶었거든요."

결국 케어는 아칸소의 한 미술관에서 날카로운 금속조각을 해보라는 허락을 받아냈다. 일단 그녀는 팔로알토의 자기 집 주차장에서 프로젝트를 시작했고, 그 때 고등학교 동창인 앤디 허츠펠드(Andy Hertzfeld)로부터 전화를 받았다. 허츠펠드는 매킨토시 운영체제의 수석 소프트웨어 설계자였고, 그녀에게 일자리를 제안했었다.

케어의 첫 임무는 맥오에스용 서체 제작이었다. 당시 디지탈 활자체는 좁은 폭의 I와 넓은 폭의 M을 고정폭(monospaced)으로, 그러니까 동일한 넓이 안에 서체를 박아 인쇄됐다. 타자기 롤러가 스페이스 한 번으로 이동하던 방식에 맞춰 개발됐기 때문이다. 잡스는 매킨토시를 위해 뭔가 더 나은 활자체를 원했다. 잡스는 리드(Reed) 대학교에서 트라피스트 수도회의 수도사인 로버트 팔라디노(Robert Palladino)가 가르쳤던 서예학 수업의 섬세한 문자체(letter fonts)에 감명을 받았었다. 팔라디노는 당시 대학에서 서예의 대가, 로이드 레이놀즈(Lloyd Reynolds)의 원칙을 가르쳤었다. (독창적인 시인, 개리 스나이더(Gary Snyder)와 필립 웨일른(Philip Whalen)의 장난기스러운 필기체를 보면, 레이놀즈와 팔라디노를 데스크톱 출판과 작가 잭 케루악(Jack Kerouac)의 다르마의 구걸(Dharma Bums)을 연결시킬 고리로 만들었다. 여기에서 레이놀즈의 영향력을 볼 수 있다.)

맥의 하얀 화면 상에서 마치 책처럼 텍스트가 자연스럽게 쉼쉬듯 흐르게 만들기 위해, 케어는 최초의 가변폭(proportionally spaced) 디지탈 서체를 맥용으로 만들었다. 케어의 이 가변폭 서체는 원래 로즈몬트(Rosemont)와 아드모어(Ardmore)처럼 원래 필라델피아 근처 기차역의 이름을 땄지만, 잡스는 이들 서체의 이름을 제네바와 시카고, 뉴욕과 같은 세계유명도시의 우아한 이름으로 업그레이드시켰다.



동료 소프트웨어 디자이너들과의 지적인 협력에 자극받은 케어는 애플에 남기로 하고, 맥 GUI용 요소의 디자인을 시작한다. 화면상의 아이콘 디자인용 애플리케이션 자체가 아직 없던 때였으므로, 케어는 팔로알토에 있는 University Art 점포에 가서 $2.50 짜리 스케치북을 하나 사들고 왔다. 여기에다가 자신의 아이디어와 디자인을 시작할 요량이었다. 이 스케치북을 보면 케어가 화면의 픽셀을 표현할 모눈종이의 각 각형에 맞도록, 급진적으로 사용자-친화적인 컴퓨팅의 모습을 만들어냈다는 사실을 알 수 있다.



처음에 케어는 핑크색 매직펜을 이용하여 "붙이기(paste)" 명령용 집게 손가락을 스케치했다.

그리고 나서 그녀는 페인트가 좀 남아있는 페인트솔을 그렸다.

"자르기(cut)"용으로 그녀는 가위도 그렸다.



그리고 그녀는 비트맵으로 손을 그렸다. 어도비 포토샵과 일러스트레이터와 같은 프로그램의 보이지 않는 종이 장을 넘기는 손(pan hands)의 효시이다.



"정지(stop)" 아이콘 스케치이다.



"위험(danger)"의 심볼이다. ("해군에 입대하느니 해적이 되는 편이 낫다"면서 잡스가 내세운 맥 팀의 악명높은 해적 깃발에 영감을 줬다.) 사실 그 깃발도 케어의 디자인이었다. 케어의 해적기는 맥팀 빌딩 위에 나부꼈다.



케어는 애플 자체의 비트맵 그래픽도 스케치했다.



그녀는 "자동차 사고"와 같은 바보같은 아이콘도 그렸다. 말 그대로 자동차 사고였다.



"점프(jump)"라 불린 프로그래밍 명령을 위한 기발한 아이콘도 두 가지 있다.



그녀는 또한 잡스가 프로그래머들에게 버그를 잡으라(debug) 재촉할 때 들은 말 가지고 아이디어를 내기도 했다.



"부트(boot)"용으로 그녀는 낸시 시나트라(Nancy Sinatra)나 신을만한 아이콘을 그렸다.



자유로이 디지탈로 생각할 수 있도록 해주는 소프트웨어가 개발되자, 그녀는 아시아 예술사, 동료들 책상을 장식한 별스러운 전자기기와 장난감, 대공황 시절 떠돌이 일꾼(hobo)이 동정적인 집으로 향하는 길을 가리키기 위해 벽에다 그린 글리프(glyph) 등 모든 것으로부터 아이디어를 끌어 모았다. 그래서 태어난 것이 오늘날까지 남아 있는 애플의 커맨드(command) 키 아이콘이다. 위에서 보면 성채처럼 보이는데, 스웨덴의 야영지에서는 흥미로운 경관을 나타내기 위해 일반적으로 이 표식을 사용한다고 한다.



케어의 작품 덕에 맥은 유혹적이고 직관적인 시각적 요소를 갖추게 됐다. 실제 사물의 소형화된 이미지를 생각하는 대신, 그녀는 도로 표지판처럼 바로 파악할 수 있는 아이콘을 디자인하려 했다.



그녀의 디자인을 보면, 말할 수 없으리만큼 마음이 부드러워지고 안정적인 품질을 느낄 수 있다. 자신을 표면에 드러내지 않고서(수잔 케어는 지금도 아침에 태평양을 서핑하곤 한다), 은은한 가치를 내뿜기 때문이다. 스스로를 컴퓨터광으로 여기지 않았던 80년대의 혁신가들에게 케어의 아이콘은 기술 때문에 골치 썩이지 말고, 당장 빠져들어라!고 외치고 있다.

실제로 우리는 빠져들었다. 그것도 대규모로. Where Good Ideas Come From 등 여러 영리한 책의 저자인 스티븐 존슨(Steven Johnson)은 최근 월스트리트저널에 자기가 처음으로 컴퓨터 구입을 고려할 때 느꼈던 스릴감을 얘기한 바 있다. "맥을 보자 뭔가 다르다는 점을 알 수 있었다. 온통 검정 배경의 화면에 녹색 텍스트만 보다가, 하얀 화면이 있다는 것만으로도 혁명적이기 때문이었다. 게다가 서체가 있었다! 대학원 때부터 난 서체에 탐닉했었다. 그런데 이 컴퓨터는 서체를 그저 픽셀 덩어리가 아닌 예술로 다루고 있었다. 화면상의 그래픽 인터페이스는 화면을 살고 싶은, 그리고 갖고 싶은 우주같은 느낌을 줬다... 맥은 들어가 살고 싶은 머신이었다."

많은 이들이 여전히 그 안에 살고 있다. 오늘날의 데스크톱과 노트북, 태블릿, 휴대폰 안에서 케어의 후손들을 무수히 많이 볼 수 있다.



하드웨어가 더 빨라지고 저렴해지면서 강력해지자 인터페이스 디자이너 또한 압축적이고 여유로운 도로 표지판 스타일의 아이콘보다 멋지고 정교하며 3D 가상물체로 채워진 아이콘을 더 선호하게 됐다. 우리의 휴대폰과 태블릿에서 그들은 모조 그림자와 반짝거림으로 서로간에 경쟁을 벌이고 있다.

케어 스스로도 애플에서 빛나는 첫 업적을 세운 이후로, 윈도와 IBM OS/2용 아이콘은 물론, 솔리테어의 윈도용 버전의 가상 카드판, 여러 신생기업 로고, 뉴욕의 Museum of Modern Art용 제품, 그 외 Bomb이나 Watson, Paint Can과 같은 아이콘의 미술 프린트, 모호한 분류의 Dogcow를 디자인했다.

케어가 디자인한 생일 케이크와 약혼반지, 장미, 디스코볼을 교환하는 페이스북 사용자만 하루에 수 천 명이다. 신세계의 새로운 세대를 맞이한 해피맥(Happy Mac) 이미지를 만든 아티스트가 만들었는지는 모르는 채로 말이다.



휴가 기간동안 케어는 그녀의 첫 번째 책인 Susan Kare Icons을 자가출판했으며, 그녀의 웹사이트에서는 서명본도 팔고 있다. 서문에 본 글의 수정된 부분이 들어있기는 하지만, 수잔 케어가 손수 그린 아이콘 스케치는 책에 포함돼 있지 않다.

그녀에게 혹시 30년 전 애플에서 한 작업이 이렇게까지 영향을 끼칠지 그 때부터 느낌이 있었는지 물어봤다. "그림을 그리는 것이지, 위대한 작품을 착수할 수는 없어요. 비어 있는 캔버스를 보고 '이제 걸작을 만들 거야'라고 하면 무모할 뿐입니다. 할 수 있는 한 최선을 다해서 그리고, 운이 좋으면 사람들이 메시지를 알아차리겠죠."


"Susan Kare Icons," available at kareprints.com

[*Some of these icons were included in my presentation for Pop-Up Magazine #5 at Davies Symphony Hall in San Francisco on November 9, 2011. Thanks to the Pop-Up editors and contributors for a marvelous evening. All icons used with the permission of Susan Kare.]

The Sketchbook of Susan Kare, the Artist Who Gave Computing a Human Face | NeuroTribes

잡스나 케어나 서체로 시작한 일인데, 21세기 한국의 맥, 아니 컴 현실에서 일반 대중을 위한 서체 환경은 아직 멀었다 생각이 드는군요...

잡스가 유명 도시 이름을 따라 서체 이름을 지었다는 얘기를 보니 그나마 옛날 서울체, 한강체가 그립습니다. 볼드체도 없는 한글 기본 서체... 아아...

앗! 제가 즐겨보는(?) PLoS에서 이런 글도 쓰는군요. ㅋ

Fonts를 보면 좀더 어렵습니다. 알파벳은 Digit해서 매우 간단한데 한글은 첫소리, 가운뎃소리, 끝소리가 모여서 하나의 음을 이루는 글자가 되면서 보다 복잡한 글자가 되었습니다. 배우기는 쉬우나 그것을 디지털로 표현하기엔 매우 많은 가짓수가 존재한다는게 문제죠. 그렇기때문에 영문글꼴과 한글글꼴을 개발하는것 자체를 같은 표면상에 두고 비교해서는 안될겁니다.

Mac OS X의 자체의 Fonts발전을 보면 그 이전보다 더욱더 한단계 나아갔습니다. 문제는 이게 보다 실존하는 폰트가 있어야 가능하다는게 문제인데. 이를위해선 한글폰트도 개발이 되어야 한다는 전재가 있는것이죠. 근데 이게 비용적인 문제가 발생하는 복잡하게 되는것이죠. 아아아 어렵습니다. ㅠ.ㅠ

애플 정도의 덩어리라면 한 국가, 그것도 (아무리 일본, 중국보다 못 하다해도) 떠오르는 아시아 시장 중에서 괜찮아 보이는 국가, 한국 시장에 잘 맞는 폰트 한 벌, 아니 한 개 정도는 넣어줘야 하는 거 아닌가, 넣을 수 있는 거 아닌가 하는 생각입니다. --;;

128k 메모리에 OS와 애플리케이션을 넣고 비트맵기반 데스크탑 은유의 GUI 컴퓨팅 경험을 만들어내야했던 오리지널 맥, 16x16 그리드와 백/흑 두가지 색으로 이미지를 표현해야하는 아이콘 디자인 모두 되돌아보면 대단히 기술적이자 예술적입니다. (뒤늦게 뭐든 우겨넣으면 그만이긴 하지만 기술과 인문의 교차점 또 이런거랄까요 ^^) 수잔 케어의 우아하고 심플한 아이콘들을 보니 요즘의 디테일 과포화의 아이콘들은 뭔가 놓치고 있다는 생각도 드네요.

그나마 OS X 오리지널 아쿠아의 캔디룩이 라이온에서 상당히 순화된것이나 브러시드메탈 룩등이 사라진것은 다행이랄까요. 맥과 넥스트의 아이콘을 비교해보거나 브러시드 메탈/아쿠아등을 보면 잡스의 미니멀리즘 취향이 적어도 스크린상의 요소들에는 반대방향으로 작용했던듯 합니다. 하드웨어는 단순하고 우아하게, 스크린은 화려하게. 물론 스크린의 이미지는 모두 은유적인 기호들이니 유저들에게 무엇을 의미하는지 확실히 각인시켜야하긴 하지만 그렇다고 버튼이 핥아먹고 싶어질 정도로 맛있어 보일필요는 없다는걸 뒤늦게라도 알게 된것일까요?

저는 라이온에서 작아진 버튼들이 핥아먹고 싶어지는뎁쇼...^^;;

수잔이 만든 아이콘들은 정말 신세계였군요....^^bb

생각난김에 여기에 글을 달아서 올립니다.

수잔 케어의 아이콘들을 심심할때마다 하나씩 베껴서 만들어 둡니다. (다른 아이콘들도 만듭니다.ㅎㅎ)
만들때마다 느끼지만, 정말 잘 만들었다는 말 밖에는 생각이 나질 않습니다.
그런데, 수잔케어의 홈페이지에 있는 아이콘들의 사이즈가 조금씩 차이가 납니다.
정확히는 (모눈 하나를 1픽셀로 계산했을때)1/2픽셀정도의 크기 차이가 있습니다.
저는 25*32 사이즈를 기준으로 만듭니다만, 항상 찜찜합니다.
암튼 수잔 케어의 홈페이지에 올라온 아이콘들의 크기가 다르다는 점과 모양도 조금씩 다릅니다. (간략화된 아이콘도 있습니다. 예)bomb 아이콘의 심지 불꽃의 픽셀 갯수가 다름니다.)
아이콘을 (장식용으로)확대했을때와 (모니터에서)실제 사용했을때의 느낌이 다르기 때문일겁니다.

중요한 얘기는 아닙니다만, 평소 그녀의 작품에 대해서 좋은 느낌을 가지고 있었기에 글을 써 봅니다.

PS. 아래는 비교해본 스크린 샷입니다. 깊이 파고들면 상당히 재미있습니다.

원래 빨간색으로 표시한 부분을 저는 "당시 디지탈 활자체는 I는 좁고, M은 넓은 고정폭(monospaced) 활자체로서, 똑같은 비트맵 면적 안에 박혀 인쇄됐다"로 번역했었습니다. 뜻을 명확히 하기 위해 아래 빨간색 부분으로 수정했고요.

도와주신 김상훈 기자님께 감사드립니다! :)

책 판매 링크를 걸려고 했더니, 그림을 클릭하면 책 판매 사이트로 바로 가는 군요.

꼼꼼하신 까조봉님을 당할 수 없습니다.

흐흐흐 꼼꼼하심이 가카와 같죠...

"Whenever a friend succeeds,
a little something in me dies."
"친구가 성공할 때마다
내 속에 무언가 죽고 있다."
- Gore Vidal

"MB가 조금씩 앞으로 나갈 때마다
내 속에 무언가 죽고 있다"
- 나꼼수 김어준

"Me, too"
- 나꼼수팬 김정일&김정은

"나의 정치인으로서의 자각은 MB덕분이다"
- 나꼼수 출연자 박원순

"MB하는 짓 보니 나도 하겠다"
- 나꼼수 출연내정자 안철수

개인적으로 Stack Cursor인 손목시계 커서와 손가락셈 커서를 좋아하는데요.
특히 손가락을 하나씩 접었다 펴는 손가락셈 커서는 정말 충격적이기까지 했습니다.


돌아다니다가 이런 브로치를 발견 ㅠ.ㅠ 때아닌 뽐뿌만 왔습니다.

대학시절 타이포그래픽 과목을 수강할때 과제로 서체를 만들어본적이 있었습니다.
한글서체 개발은 정부에서 전적으로 지원해줘야 하는 국책사업이라고 생각합니다~
이런 기본적인것부터 지원해주는것이 진정한 문민정부가 아닐까 합니다만

해피맥을 만들어보고 싶었는데 같은색 블럭들이 모자라더군요.
추수감사절날 밤 이러고 놀았습니다. ^^;

흐흐흐 전 갑자기 빨간펜 도움말까지 보고싶어서 Lion을 위해서 SheepShaver를 컴파일하고
Mac OS 9를 설치한뒤 녹화했습니다. ㅠ.ㅠ 점점 더 산으로 가고있습니다. 흑흑

Apple은 빨간펜 도움말을 부활시켜달라!!!

라이언에서 Mac OS 9을 시동해 보려면 sheepshaver라는 것을 깔아야 하는 건가요?

음 거의 그렇죠.

와~오에스9 이 설치가 되는군요~
창고방 구석에 있을 오에스9 시디를 찾아봐야겠습니다~

갑자기 os9 설치 무척 해보고 싶습니다. os9을 가장 빨리 돌리던 마지막 하드웨어 보다도 더 빠르게 사용 가능하겠죠?