스티브잡스의 OS X 윈도우 버튼 아이디어

맥과 윈도우의 창은 닫고, 최소화 하고, 줌(맥은 확대이고, 윈도우는 최대화)하는 기능이 있다.

mac os x window

맥은 이 버튼들이 창의 왼쪽에 있다. 이 버튼들의 색깔은 OS 9 까지는 연한 회색이었는데 OS X에는 빨간색, 노란색, 초록색으로 바뀌었다.

왜 바뀌었는지 몰랐었는데, ‘잡스처럼 일한다는 것’ 이라는 책에서바뀐 그 이유룰 찾았다.

OS 9의 창닫기버튼은 연한회색

OS X 이전까지는 사용자의 집중을 빼앗지 않기 하기 위해서 창닫기 버튼들을 연한 회색으로 만들었다고 한다.  그림에서 창의 좌측상단에 있는 동그란 연한 회색 버튼3개가 바로 그 버튼들이다

mac os 9 finder

(맥 OS 9의 파인더)

OS X의 창닫기 버튼은 빨강,노랑,초록의 신호등 색깔

OS X 의 창닫기 버튼들은 그림에서 보는 것과 같이 빨간색, 노랑색, 초록색으로 바뀌었다.

mac os x finder

이 맥 OS X (10으로 읽는다)의 창의 닫기,최소화,확대 버튼의 색깔을 스티브잡스의 아이디어였다고 한다. 스티브잡스는 이 버튼에 각각 신호등 색깔을 입히자고 했다. 닫기 버튼은 빨간색, 축소버튼은 노란색, 확대 버튼은 초록색으로 말이다.

버튼의 결과에 대한 신호

그냥 동그란 버튼이 세개라서 신호등 색깔과 같게 하자는 것은 아니다. 아마도 초보 디자~이너라면 알록달록 예쁘게 보이도록 하자고 했을지도 모른다. 디자~인을 중요시 하는 애플은 OS 9 까지도 사용자의 주의를 빼앗지 않도록 연한 회색으로 했다.

mac os 9

(Mac OS 9, 댓글에 따라 이미지 수정함. 지적 감사합니다. 색깔뿐만 아니라 모양과 위치도 바꾸었네요, 사진출처)

Mac OS X (활성화된 창)

Mac OS 9 (비활성화된 창)

(Mac OS X)

버튼의 색깔을 신호등의 색깔로 하자고 한 것은 바로 버튼을 클릭했을때 그 결과를 색깔로 알려주기 위함이라고 한다. 창은 닫고, 축소하고 확대하는 기능을 가지고 있는데 이중 닫는 것은 가장 위험한 것에 해당한다. 빨간색 버튼은 창을 닫을 의도가 없는 상태에서 실수로 눌렀을 경우 위험을 암시할 수 있다는 것이다.

신호동

버튼이 눌렀을때의 그 여파에 대해서 색깔로 표시하고 있는 것 같다.  마우스휠과 확대축소에 대한 개념모형에 대한 얘기를 했었는데,창을 닫거나 축소하거나 줌을 할때에 머릿속으로 신호등의 색깔과 맵핑해 보는 것같다.

제품기획은 개념적으로 메타포나 멘탈모델을  쉽게 형성할 수 있도록 해줘야 한다.

스티브잡스는 HCI나 제품기획에 대한 정규적인 교육을 받지 않았지만 컴퓨터의 인터페이스라는게 우리가 살고 있는 세상에서 빌려오는 것임을 직관적으로 알고 있는 듯 하다.


Related Post




  • t

    문제는 대부분의 사용자는 그렇게 생각하지 않는다는거죠. 이게 신호등을 의미하는지는 처음 알았네요. 도비호님도 글 읽어보면 이번에 처음 아신 것 같구요. 의도는 좋지만, 직관적이지는 않는것 같습니다. 디자이너가 빠질 수 있는 가장 큰 트랩이 “의미는 매우 좋은데 생각을 해야 의미를 이해할 수 있는” 디자인인 것 같습니다.

  • t

    문제는 대부분의 사용자는 그렇게 생각하지 않는다는거죠. 이게 신호등을 의미하는지는 처음 알았네요. 도비호님도 글 읽어보면 이번에 처음 아신 것 같구요. 의도는 좋지만, 직관적이지는 않는것 같습니다. 디자이너가 빠질 수 있는 가장 큰 트랩이 “의미는 매우 좋은데 생각을 해야 의미를 이해할 수 있는” 디자인인 것 같습니다.

  • 색깔이 들어가서 시선이 분산되는 느낌을 지울수 없네요.
    윈도우의 그것처럼 아이콘을 보여주는 편이 좋을듯 싶군요.

  • 색깔이 들어가서 시선이 분산되는 느낌을 지울수 없네요.
    윈도우의 그것처럼 아이콘을 보여주는 편이 좋을듯 싶군요.

  • dance

    신호등 얘기는 처음 들었네요…

    내용중에 언급하신 OS 9 는 9가 아니라 X 입니다. 9까지는 동그라미가 아닌 사각박스에 아이콘이 달라 쉽게 구분이 가능합니다. http://www.sfsu.edu/~helpdesk/pics/mac_os9_finder_window.jpg

    보여주신 9는 실제 X 이며, Preference 에서 Graphite 또는 Color로 조정 가능하더군요..

  • dance

    신호등 얘기는 처음 들었네요…

    내용중에 언급하신 OS 9 는 9가 아니라 X 입니다. 9까지는 동그라미가 아닌 사각박스에 아이콘이 달라 쉽게 구분이 가능합니다. http://www.sfsu.edu/~helpdesk/pics/mac_os9_finder_window.jpg

    보여주신 9는 실제 X 이며, Preference 에서 Graphite 또는 Color로 조정 가능하더군요..

  • dance 님 댓글에 따라서 OS 9 이미지를 수정했습니다. 지적 감사합니다.

    저도 신호등 색깔로 칼라코딩한지는 처음 알았습니다. 제 경우 다른 버튼들은 잘 모르겠지만 빨간색 버튼은 좀 신경쓰는 편입니다.

    왜냐하면 이 빨간색 버튼은 close 버튼인데 아이튠즈나 ical, Adium 등은 숨겨지면서 독으로 들어가는데 비해 시스템 어플은 종료를 하고, 문서 개념의 사파리나 파이어폭스, 워드, OmniFocus 등은 안의 문서를 다 닫아 버려서 독으로 들어갈줄 알았는데 내용이 싹 없어질때가 있습니다. 이게 헷갈려서 클릭할때 마다 신경을 쓰고 있습니다. 윈도우즈의 닫기도 어떤 것은 프로그램을 종료하고, 어떤 것은 숨겨지면서 트레이로 들어가기도 하죠.

    OS 9보다 더 좋은지 나쁜지는 모르겠지만 close 버튼은 누를때 어플리케이션 마다 다르게 동작하는 것 같아서 저 한테는 빨간색입니다!

  • dance 님 댓글에 따라서 OS 9 이미지를 수정했습니다. 지적 감사합니다.

    저도 신호등 색깔로 칼라코딩한지는 처음 알았습니다. 제 경우 다른 버튼들은 잘 모르겠지만 빨간색 버튼은 좀 신경쓰는 편입니다.

    왜냐하면 이 빨간색 버튼은 close 버튼인데 아이튠즈나 ical, Adium 등은 숨겨지면서 독으로 들어가는데 비해 시스템 어플은 종료를 하고, 문서 개념의 사파리나 파이어폭스, 워드, OmniFocus 등은 안의 문서를 다 닫아 버려서 독으로 들어갈줄 알았는데 내용이 싹 없어질때가 있습니다. 이게 헷갈려서 클릭할때 마다 신경을 쓰고 있습니다. 윈도우즈의 닫기도 어떤 것은 프로그램을 종료하고, 어떤 것은 숨겨지면서 트레이로 들어가기도 하죠.

    OS 9보다 더 좋은지 나쁜지는 모르겠지만 close 버튼은 누를때 어플리케이션 마다 다르게 동작하는 것 같아서 저 한테는 빨간색입니다!

  • 우연히도(?) 거의 비슷한 시기에 Windows XP의 메인 테마인 luna에서 창의 닫기(x) 버튼이 빨간색으로 나왔죠.^^ 닭 달걀은 며느리도 모르지만, 흥미롭죠.ㅎㅎㅎ

  • 우연히도(?) 거의 비슷한 시기에 Windows XP의 메인 테마인 luna에서 창의 닫기(x) 버튼이 빨간색으로 나왔죠.^^ 닭 달걀은 며느리도 모르지만, 흥미롭죠.ㅎㅎㅎ




Scroll Up