︎

Happy Mac :)

Susan Kare의 아이맥 아이콘을 p5.js로 웹에 구현한 과정

Soohyun Jeong, Sep 10, 2018 




수전 케어는 1980년대 초기 애플 매킨토시의 아이콘, 글꼴 등 사용자 인터페이스를 만들어낸 그래픽 디자이너이다. 아마 10년, 15년 전 매킨토시를 사용했던 사람이라면(혹은 사용하지 않았더라도) 위의 아이콘이 굉장히 익숙할 것이다. 매킨토시 하면 가장 먼저 떠오르는 아이콘인 'happy mac', 아직까지도 맥용 키보드에 항상 자리 잡고 있는 커맨드 command(⌘) 아이콘 역시 그녀의 작품이다. 현재도 활동하고 있는 수전 케어는 픽셀 아트와 그래픽 사용자 인터페이스(GUI) 디자인계의 살아있는 전설이라 할 수 있다.


수전 케어가 모눈 종이에 그린 화살표 아이콘



우리 모두 익숙한 윈도우의 카드놀이도 그녀의 작품이다.
©Susan kare



뉴욕타임스의 기사 <The Woman Who Gave the Macintosh a Smile>에서 Moma의 선임 큐레이터 Paola Antonelli는 수전 케어의 그래픽을 이렇게 말한다.


If the Mac turned out to be such a revolutionary object—a pet instead of a home appliance, a spark for the imagination instead of a mere work tool—it is thanks to Susan’s fonts and icons, which gave it voice, personality, style, and even a sense of humor.

맥이 혁명적인 물건이라면, 수잔이 디자인한 폰트와 아이콘 덕분이에요. 그 폰트와 아이콘 덕분에 맥은 목소리, 개성, 스타일, 심지어 유머 센스까지 갖게 됐죠.


그녀는 32x32, 총 1204개의 픽셀 안에 브랜드 아이덴티티를 담아낸 것이다. 이 기사를 접하고 난 뒤 그녀의 픽셀 아이콘을

  1. 아무나 쉽게 따라 그려보고
  2. 변형해 보면서
  3. 자기만의 픽셀 아이콘을 그릴 수 있으면 좋겠다

는 생각이 들었고, 이를 웹상에 p5.js(javascript 기반 processing)으로 구현해보았다.






이곳에서 Susan kare의 대표적인 픽셀 아이콘을 보고, 편집하고, 내 아이콘을 직접 그려서 저장할 수 있다.

수전 케어의 오리지널 픽셀 아이콘 7개(해피 맥, 플로피 디스켓, 휴지통, 폭탄, 로딩:시계, 커맨드, 이동:손)를 그리드 위에서 펼쳐볼 수 있으며 누구나 직접 지우고 다시 그리는 등 변형이 가능하다. 그리드 보기를 비활성화 할 수도, 컬러를 변경할 수도 있고, 완성된 아이콘을 png로 다운받을 수 있다.



︎구현 과정



  1. 캔버스를 가로 세로 32등분 그리드로 나눈다.
  2. 마우스가 그리드 안에서 어디에 위치하는지 확인하고, 클릭하면 해당 칸이 검은색(true)으로 변한다.
  3. 실행 취소가 가능하도록 클릭된 칸이 'true'(검은색)라면 다시 'false'(흰색)로 변환한다.
  4. 'true' 인덱스를 저장하고 불러오는 기능을 만든다. 모든 칸을 false 상태로 만들어준 뒤 가져온 인덱스만 true로 변환하는 방식으로 저장된 인덱스를 불러온다.
  5. 수전 케어의 오리지널 아이콘 그대로 그린 후 인덱스를 저장하고 원할 때 불러올 수 있도록 버튼을 만든다.
  6. 색깔 변경, 그리드 보기 선택, 저장 옵션을 만든다.



︎작업 과정 중 들었던 생각들


  1. 처음의 아이디어는 게임 형식으로 susan의 오리지널 아이콘과 비교해 픽셀이 일치하면 정답이 되는 걸 생각했다. 하지만 직접 하나하나 그려보니 완성된 아이콘으로 볼 때와는 달리 엄청나게 많은 칸을 채워야 했다! 결국 퀴즈 형식으로 그리라고 하다간 게임이 아니라 노동이 될 것 같아서(...) 따라 그리기 게임은 포기했다.

    엄청나게 많은 픽셀들...

  2. 픽셀 아이콘에서는 픽셀 하나가 있는지 없는지, 몇 번째 칸에 위치하는지에 따라서 전체적 이미지에 대한 인상이 급변한다. 구한 이미지가 가로세로 비율이 정확하지 않아 디테일하게 다시 맞추지 않으면 완전히 다른 아이콘이 그려졌다. 정확하게 그리기 위해 포토샵에서 그리드에 이미지를 맞추는 작업이 필요했다.

  3. 검색으로 구할 수 있는 susan의 아이콘은 모두 (고해상도) 이미지여서 이를 다시 픽셀로 변환하는 과정이 필요했다. 결국 픽셀 아이콘을 픽셀로 구현하기 위해 고해상 이미지를 단순화하는 과정이 필요했다.  쉽게 말하자면 (저해상)픽셀 → (고해상)이미지 → (저해상)픽셀 이라는 황당한 순환과정이 생긴다. 게다가 [저장] 기능을 만들었으니 이걸 png로 저장하면 다시 고해상 이미지로...(그만...)

  4. 어렸을 때부터 매킨토시에 둘러싸여 살았던 환경 덕에 리서치하면서부터, 작업하는 내내 굉장히 즐거운 마음으로 했다. 내 미감의 한 부분을 형성해 준 그래픽이 여성 디자이너의 작업물이었다는 것은 그 사실만으로도 어떤 힘이 된다.