Dotty Studio

기업가정신 & 스타트업, 그리고 기술과 디자인에 대한 곳.

오늘은 조금 개념적인 것을 살펴볼까요.

디자인에서 가장 중요한 원칙 중 하나가 일관성(consistency)입니다. (뭐, 제 멋대로 생각이긴 합니다만)

너무. 너무. 너무. 너무 중요합니다. 그래서 한 번 더 말하겠습니다.

디자인에서 가장 중요한 원칙 중 하나가 일관성(consistency)입니다.

자, 그럼 바로 실사례로 ㄲㅆ.

전 세계의 스타벅스(Starbucks) 커피 매장은 (인사동이나, 일부 오래된 매장을 제외하고는) 동일한 인테리어와 외관을 유지하고 있습니다. 물론 주문 절차나 주 메뉴도 동일합니다. 바로 아래 사진는 외국 매장의 사진인데, 흡사 강남역 7번출구 스타벅스 매장이 인테리어를 바꾸기 전의 모습과 판박이라는 느낌마저 듭니다.

네, 강남역 매장이 아닙니다.


사용자 삽입 이미지

사용자 삽입 이미지

이는 물론 "스타벅스 경험"이라는 것을 만들어내기 위하여 철저하게 의도적으로 기획된 것입니다. 내부의 테이블과 의자에서부터, 조명과 천장에 부착된 나무빛 패널, 벽을 둘러 싸고있는 마감에 이르기까지 일관성있게 되어있습니다.

이러한 일관성을 1) 내적 일관성이라고 하는데, 특정한 시스템 내에서 나타나는 일관성을 의미합니다. 이렇게 하면 사람들에게 신뢰감과 함께, 내용물이 주먹구구식으로 이루어진 것이 아니라 열라 스마트한 설계를 통하여 구성되었다는 것을 인지시킬 수 있습니다. 뭔가 "저기는 디자인을 아는 기업"이라는 느낌을 줄 수 있죠.

이렇기 때문에 우리는 낯선 곳에 가더라도, 그 동네의 스타벅스에 들어가면 낯도 안 설고, 당황하지 않을 수 있습니다. 새로운 장소에 있는 친숙한 스타벅스라는 신선함만이 느껴지죠. 자신감을 가지고 카라멜 프라푸치노 주문을 넣어도 된다는 겁니다.

일관성의 원칙에 의하면, 하나의 시스템, 혹은 여러 시스템에 걸쳐 유사한 부분을 실제로 유사하게 만들경우 사람들이 그에 대한 친밀감, 학습능력 및 사용성이 올라가게 됩니다. 이렇게 되면 경계적 대상(liminal object; 인터페이스에 해당)을 자연스럽게 인지하지 않을 수 있게 되어, 원래 목표로 하는 바에 편하게 집중할 수 있게 됩니다.

하지만 앞서 살펴 본 내적 일관성은 지키기가 여헐~라 어렵습니다. 실제로 제품이나 서비스가 진화할 때나, 앞의 경우에, 오프라인 매장이 확장함에 따라 생기는 다양한 상황에 대하여 미리미리 충분히 고려해두지 않으면 이미 앞에서 만들어온 '레거시(legacy)'에 의하여 발전을 더이상 하지 못하고 발목이 잡히는 문제가 생길 수 있습니다. 그래서 소프트웨어 개발의 아키텍트에 해당할만한 뛰어난 안목을 가진 디자이너나 건축가가 있어야 하겠죠.

이와 약간 다른 것이 2) 외적 일관성인데, 이는 여러 체계에 걸쳐서 나타나는 일관성입니다. 간단히 말해, 어디에나 있는 비상구 출구 표시가 이에 해당합니다. 대부분의 공공 목적을 위한 기호/싸인/경고문/표지판 등이 이를 따르고 있습니다.
사용자 삽입 이미지

하지만 그러다보니 자연스럽게 오는 또 하나의 부작용: 디자인이 촌티나면 매우 난감합니다. 그리고 주변의 환경과 어울리지 않는 경우에도 매우 곤란하죠. 하지만 그렇다고 사용자들이 당연히 일관성있기를 기대하는 것을 자기 멋대로 바꾸어버리면, 사용성과 학습능력이 급격히 저하되어, 아니한 만 못하게 되는 상황이 발생하기도 합니다. 또 그렇다고 해서 어차피 다 지키지도 않기 때문에, 외적 일관성은 법률적 제재를 받지 않는 이상 실행하기가 매우 어렵습니다. (어쩌라고)

크게 내적 일관성과 외적 일관성을 보았는데, 조금 더 일상적인 일관성이 두 가지 있습니다.

3) 미적 일관성은 우리가 말하는 스타일이나 외형, 색상, 폰트, 그래픽 등을 의미하는데, 사실 주로 일관성이 있어야 한다고 하면 이것을 가리키는 경우가 많습니다. 스타벅스의 내적 일관성은 상당 부분이 이러한 미적 일관성에 의존을 하고 있습니다. 대부분이 기업이 여기 저기에 기업 CI/BI에 사용되는 색상을 사용하고, 구석구석에 로고를 밖는 것도 이래서겠죠.

좀 구석이 아닌 곳에 넣기도 합니다


미적 일관성의 대가가 바로 우리가 사랑해 마지 않는 애플입니다.

Apple Evolution


애플은 오랜 기간에 걸쳐 크게 애플만의 디자인 언어(design language)라고 부를 만한 변화가 몇 차례 있었는데, 첫 Mac에서 등장한 beige 색상 시리즈부터, (중간에 잡스가 떠난 기간의 산만함을 제외하면) 그 후로 조나단 아이브(Jonathan Ive)의 승진부터 등장한 반투명 시리즈(iMac, iBook 초기 시리즈 등에서 파워코드 까지 반투명이였죠)와 고급 플라스틱 스타일, 그 후의 티타늄/메탈 풍, 그리고 나서 twin-shot 기법으로 얼마전까지 밀고 있던 플라스틱과 메탈의 결합, 최근 밀고 있는 유리+알루미늄 결합 등.. 각 시기에 맞추어 전 제품 라인업에 걸쳐서 미적 일관성을 강하게 통일하고 있습니다.

특히 하드웨어 뿐만 아니라, 소프트웨어의 인터페이스에 있어서도 이러한 스타일의 느낌을 살려서 일관성을 고집하고 있습니다. 무시무시무시무시무시무시한 집착이자 편집증입니다. (애플의 휴먼 인터페이스 가이드라인을 보셨나요?) 이렇게 미적 일관성을 강하게 지켜오는 기업들은 대부분 장기간에 걸쳐 브랜드 가치가 지속적으로 올라가고, 소비자들의 빠돌라이제이션존경을 받기도 합니다.

매 공식 발표때마다 검정 목티와 리바이스 청바지를 입고 등장하는 스티브잡스


그에 반하여 슬프게도 철저하게 하청 생태계로 중무장한 국내 대기업들에서는 이러한 미적 일관성을 지키기가 매우 매우 매우 매우 매우 매우 매우 어렵습니다. 하드웨어는 요즘 약간씩 지키려고 분발하고 있는 듯 하지만, 소프트웨어는 불가능 아직 많이 걸릴 것 같습니다. 아쉬운 부분이죠.

마지막 일관성은 4) 기능적 일관성입니다. 이는 사람들의 행동의 일관성이나 기존에 학습하고 있던 지식을 이용하여 일관성을 만들어내는 것입니다. 사람들은 이제 꽤 컴퓨터에 익숙해져서 윈도우 우측 상단 (맥유저라면 좌측 상단)에 위치한, X 표시가 있는 빨강 버튼을 누르면 창이 닫힌다는 것을 알고 있습니다.

사용자 삽입 이미지

따라서 대부분의 새로운 프로그램들도 이러한 관행을 지키고 있습니다. 간혹가다 이러한 관행을 지키지 않고 스킨이 화려한 것들은 왠지 쓰기에 불편하게 느껴지는 것도 이러한 일관성으로부터 벗어났기 때문입니다.

사용자 삽입 이미지

제발 이런거 만들지 마세요. 불편합니다. (10년 정도 저 스킨을 이용하는 killer app을 수 없이 찍어낸다면 모를까)

이러한 기능의 일관성은 사람의 사전 학습이나 극도로 직관적인 단서를 요하기 때문에, 단기간에 퍼뜨리기가 어렵습니다. 폭넓게 다양한 곳에서, 혹은 매우 긴 시간 동안 반복적으로 노출되어야 사람들이 학습할 수 있기 때문입니다.

흔히 우리가 동영상을 볼 때 누르는 재생, 정지 버튼도 플레이어 뿐만 아니라 비디오, DVD 기계에 걸쳐서 일관성있게 사용되죠. 이미 그 특정 아이콘이 갖는 의미를 우리가 알고 있기 때문입니다. 반면, 이러한 학습의 과정을 거치지 못했던 일부 고령자분들은 이러한 기기를 쉽게 조작하지 못하는 경우를 보면, 기능적 일관성의 전제는 학습에 많은 부분을 의존하고 있다는 것을 알 수 있습니다.

옆에서 이를 거꾸로 악용하는 사례들도 있죠. 국내의 똘똘한(?) 기업들은 배너에 이러한 일관성을 이용한 버튼을 집어 넣어, 배너 클릭을 유도하기도 합니다. (아래는 조작된 이미지)
 
사용자 삽입 이미지

결국 일관성을 지키면, 시각적 신뢰감과 친숙함 외에도, 유저 인터페이스 상의 중요한 과제이자 목표인 Affordance(행위 유발)을 높일 수 있습니다. 이를 간단히 이야기하자면,  '왠지 이렇게 해야 할 것 같다'나 '이렇게 하면 될 것 같다'라는 느낌이자 인식이라고 할 수 있습니다.

자, 오늘의 교훈은 간단합니다.

Key: 디자인 일관성을 지키자.

심미적, 기능성, 내적 일관성을 (오랫동안, 그리고 폭 넓게) 잘 지키면 섹시한 기업이라는 소리를 들을 수 있습니다. (물론, 좀 잘 만든것을 가지고 일관성을 지켜야겠죠)
댓글을 달아주세요
  1. BlogIcon 이정웅 2008.08.08 01:49 댓글주소 수정/삭제 댓글쓰기

    도티님은 진정한 개발자이너~

  2. BlogIcon 이장 2008.08.08 07:52 댓글주소 수정/삭제 댓글쓰기

    가끔은 일관성에 덫에 사로잡히는 경우도 있습니다.
    (많은 경우는 일관성을 지키지 못하는경우가 더 많지만요..)
    일관성이 자칫 개성을 흐리게 하는 경우도 있기에,
    무조건적인 일관성보다는 문맥에 맞는 유연함이 필요할때도 있는것 같습니다.

    • BlogIcon 김동신(dotty) 2008.08.09 00:25 신고 댓글주소 수정/삭제

      좋은 지적이십니다.
      연재 시작에서 밝혔던 것처럼, 현대물리를 배우기에 앞서 뉴턴의 고전역학부터 제대로 전해야겠다는 생각에, 이해를 저해할 소지가 있는 정확성은 생략하였습니다.

  3. BlogIcon miriya 2008.08.08 09:15 댓글주소 수정/삭제 댓글쓰기

    도티님 요즘 섹시컬한 글들 아주 잘 보고있습니다.
    오늘 글도 멋지군요 ㅎㅎ

  4. BlogIcon CK 2008.08.08 18:27 댓글주소 수정/삭제 댓글쓰기

    스포츠서울의 광고들, 매우 힘들죠.

  5. BlogIcon 정진호 2008.08.10 14:11 댓글주소 수정/삭제 댓글쓰기

    글 잘보았습니다. 요는 "디자인 일관성을 지키자." 라는 부분인것 같은데, 사례를 통해 볼 수 있어 알기 쉬웠습니다. 혹시 요즘 GUI 진영에서 "아이팟 터치" 사례에 따른 "유기적 GUI"에 대한 이야기를 들어보셨는지요.

    약간 본 칼럼과는 다소 걸리가 있는 논재이긴 한데, Del버튼이었다가 Close버튼이었다가.. 사용하면서 항상 그 버튼이 일정치 않게 배치가 되어 있지만.. 전혀 그것이 사용자에게 어려움을 주지 않는 GUI의 사례가 있습니다.

    요즘 약간 트랜디화 되는 느낌이라. 주절거려 봅니다.

    • BlogIcon 김동신(dotty) 2008.08.10 22:32 신고 댓글주소 수정/삭제

      organic UI에 대한 부분은 최근에 나온 개념이어서 아직 이렇다할 사례가 많지는 않은 것으로 알고 있습니다.

      말씀을 듣고 문득 드는 생각은 문맥(context)의 변화를 사용자가 충분히 인지하기 쉽도록 되어있고, 인터페이스의 변화가 주목성이 뛰어나며, 기능적 일관성이 잘 고려되어있다면, 물리적 배치나 명시적인 표현들은 변화가 있다하더라도 괜찮지 않을까 하는 생각도 듭니다.

      좋은 댓글 감사합니다.

  6. dirac 2008.08.10 15:48 댓글주소 수정/삭제 댓글쓰기

    정진호// 흥미롭군요. 관련 자료 주소 가르쳐주실수 있나요?

분류 전체보기 (822)
Entrepreneur (140)
Technology (265)
Design (93)
Science (22)
Thoughts (63)
소소한 하루 (184)
About (6)
me2day (40)
Paprika Lab (9)