Blog

  • 마음을 생각하는 디자인; 디지털 미디어 디자인의 기초 2

    마음을 생각하는 디자인; 디지털 미디어 디자인의 기초 2


    5. 우리의 색상 지각은 제한적이다

    • 절대적인 밝기보다 대비를 탐지하는 일에 능함
    • 색상 구분 능력은 색상이 어떻게 제시되는가에 따라 다르게 작동
    • 몇몇 사람들은 색맹
    • 사용자의 모니터나 주변 상황이 색상 지각에 영향을 줌

    색상 시는 어떻게 작동하는가

    간상세포: 빛의 강약 탐지
    원추세포: 색상 감지

    낮은 파장

    • 이 종류의 원추세포는 거의 모든 가시광선 영역에 대해 반응함. 특히 중간 파장(노란색)에서 낮은 파장(빨간색) 사이의 영역에 가장 민감하게 반응.

    중간 파장

    • 높은 파장의 파란 계열에서부터 약간 낮은 파장의 노란색 혹은 주황색 영역에 반응함. 낮은 파장에 반응하는 원추세포에 비해서는 전반적으로 덜 민감.

    높은 파장

    • 가시광선의 위쪽 끝(보라색과 파란색)에서 가장 강하게 반응. 녹색과 같은 중간 파장에도 약하게 반응. 이 세포들은 다른 두 종류에 비해 전반적으로 훨씬 덜 민감하며, 그 수도 적은 편임.

    시지각은 절대적 밝기보다 경계선의 대비를 더 잘 지각한다

    색상 구별 능력은 색상이 어떻게 제시되는가에 영향을 받는다

    희미함

    • 두 색상이 희미할수록(채도가 낮을수록)이 둘을 구분하기가 힘들어진다

    영역의 크기

    • 사물이 작거나 얇을수록 해당 사물의 색상을 판별하기가 힘들어 짐. 글자를 이루는 선은 대체로 매우 가늘기 때문에 글자의 정확한 색상을 식별하는 일이 어려움

    영역 간의 거리

    • 사물이 멀리 떨어져 있을수록 사물 간의 색상 차이를 구분하기가 어려워 짐. 특히 눈동자의 움직임이 필요한 만큼 멀리 떨어져 있으면 구분이 더욱 어려워짐

    색상 구분 능력에 영향을 주는 외적 요인들

    • 모니터 간의 차이점
    • 흑백 모니터
    • 모니터의 각도
    • 주변의 조명

    색상 가이드라인

    1. 색상뿐만 아니라 채도와 명도에서도 구분하여 사용할 것.
    • 미묘한 색상 차이는 피하는 것이 좋습니다
    • 색상 사이의 대비가 충분히 높은 것이 좋습니다
    • 이를 확인하기 위해서는 회색조로 변경해서 보는 것이 좋습니다. 구분하기가 힘들다면 이 두 색은 충분히 대비가 높은 것이 아님

    2. 쉽게 구분할 수 있는 색상을 사용할 것

    3. 색맹을 가진 사람이 구분하기 힘든 색상 조합을 피할 것

    4. 색상은 다른 힌트에 더하여 보조적으로 사용할 것

    5. 강한 대비 색 조합은 분리하여 사용할 것


    6. 우리의 주변시는 빈약하다

    • 흰 색상의 정적인 물체가 주변시에 있을 때, 왜 사람들은 이를 잘 인식하지 못할까
    • 반면 주변시에 움직임이 있을 경우에는 왜 이를 잘 알아챌 수 있는 것일까

    컴퓨터 사용자 인터페이스 사례

    DON’T

    매시지의 가시성을 높이기 위한 일반적인 방법들

    • 사용자가 보고 있는 곳에 메시지를 노출
    • 오류가 발생한 위치에 오류를 표시
    • 요류 기호를 사용
    • 빨간색은 오류를 나타낼 때만 사용

    사용자에게 메시지를 전달하는 강력한 방법들

    1. 오류를 나타내는 팝업 대화 상자
    2. 경고음 사용
    3. 깜빡임 혹은 흔들림
    4. 신중히 사용할 것

    7. 우리의 주의력은 제한적이고 기억력은 불완전하다

    단기 및 장기 기억

    1. 단기 기억
    • 단기 기억에 들어가는 항목들이란 어떤 것인가? 현재 지각되고 있는 것들과 기억으로부터 불려 온 걸들을 말합니다. 목표, 숫자, 단어, 이름, 소리, 이미지, 냄새 등 우리가 자각할 수 있는 것이라면 모두 포함됩니다.
    • 왜 서로 관련이 없는 항목이어야 하나? 왜냐하면 만약 두 항목이 서로 관련된 경우 이들은 하나의 커다란 뉴런 활성 패턴에 대응되어 두 개의 항목이 아니라 하나의 항목으로 취급되기 때문입니다
    • 왜 정확하지 않고 ±2인가? 사람들이 얼마나 많이 회상할 수 있는지 완벽하게 측정할 수 없기 때문이기도 하고, 사람들이 얼마나 많은 것을 기억할 수 있는지에 개인차도 존재하기 때문

    2. 모드

    • 자동차의 변속기 상태가 전진인지 후진인지 중립인지에 따라 가속 페달을 밟았을 때 자동차가 앞으로 가거나 ㄴ뒤로 가거나 혹은 움직이지 않을 수 있습니다. 변속기가 자동차의 모드를 설정하는 것입니다.
    • 드로잉 프로그램에서 마우스를 클릭하고 드래그하면 해동 영역에 있는 그래픽 객체를 선택하는 기능이 수행되지만, 소프트웨어가 ‘사각형 그리기’ 모드에 있다면 동일한 조작이 사각형 객체를 추가하고 크기를 조정하는 기능을 수행하게 됩니다

    3. 검색 결과

    4. 안내

    장기 기억

    1. 오류에 취약함
    2. 정서에 따른 차별성
    3. 추후에 왜곡될 수 있음
    4. 기억에 많은 부담을 덜게 끔 디자인할 것

    단축키 같은 경우 글로벌하게 적용할 수 있는 것을 사용하는 것이 사용자들에게 혼란을 덜 수 있음


    8. 사고와 행동에 영향을 주는 주의의 제한

    우리는 목표에 집중하며 도구에는 거의 주목하지 않는다

    우리는 하던 일은 잊지 않기 위해 도구에 의지한다

    우리는 정보의 냄새를 따라 목표에 다가간다

    우리는 익숙한 경로를 선호한다

    우리의 사고 과정: 목표, 실행, 평가

    • 목표 형성
    • 목표에 다가가기 위한 행동을 선택하고 실행하기
    • 행동의 결과를 평가하기
    • 목표가 달성될 때까지 반복

    목표

    소프트웨어가 지원하는 목표에 대하여 초기 단계에서부터 목표에 도달하기까지의 명백한 단계를 제공하세요

    실행

    소프트웨어에서 드러나는개념들은 소프트웨어 구현 방식 기준이 아니라 사용자 과업 기준이어야 합니다. 소프트웨어의 객체와 행위들이 현재의 과정에 어떻게 들어맞는지 사용자가 찾아내도록 강요해서는 안됩니다. 매 선택 지점마다 사용자를 목표로 유도할 수 있는 명백한 정보 냄새를 제공하세요. 목표로부터 멀어지는 것처럼 보이는 기능을 선택해야만 목표를 달성할 수 있도록 해서는 안 됩니다.

    평가

    사용자가 목표를 향해 다가가고 있다는 것을 알 수 있도록 적절한 피드백과 현재 상태 정보를 제공하세요. 그리고 사용자가 목표에서 벗어나는 길로 들어섰을 때 뒤로 돌아갈 수 있도록 허용해야 합니다.

    우리는 작업의 일차적 목표를 달성하고 나면 뒷정리는 잊어버린다

    • 목적지에 도달한 후에 자동차 헤드라이트 끄기
    • 복사나 스캔이 끝난 후 우너 본 문서 챙기기
    • 오븐 사용 후 끄기
    • 문장을 인용한 후 괄호나 따옴표 닫기
    • 좌회전을 끝낸 후에 좌회전 시호 끄기
    • 비행기에 탈 때 가지고 간 책을 내릴 때 가지고 내리기
    • 공공 PC 사용 후 로그아웃 하기
    • 기기나 소프트웨어를 ‘특수 모드’로 전환하여 사용한 후 ‘일반 모드’로 돌려놓기

    9. 인식은 쉽고 회상은 어렵다

    인식은 쉽다

    회상은 어렵다

    재인 대 회상: UI 디자인에 대한 함의

    • 보고 고르는 것이 회상하여 입력하는 것보다 쉽습니다.
    • 기능을 표현할 때 가능하면 그림을 사용하세요.

    썸네일 이미지를 사용하여 큰 이미지를 작은 화면에 담아내기

    많은 사용자들이 사용할 기능은 더 잘 드러내기

    사람들이 쉽게 찾을 수 있도록 시각적 힌트를 제공하기

    인증 정보를 쉽게 회상할 수 있도록 만들기


    10. 경험을 통한 학습 및 학습된 행동의 수행은 쉽고 문제 해결과 계산은 어렵다

    우리는 세 개의 뇌를 가지고 있다

    구뇌

    구뇌는 척수로부터 확장되어 나오는 뇌간을 의미합니다. 모든 대상을 먹을 것, 위험한 것, 섹시한 것 등 세 가지로 분류합니다. 또 소화, 호흡 반사 작용 등 뇌의 자율적 기능들을 제어하는 역할도 담당합니다. 파충류, 양서류, 대부분의 어류는 구뇌만을 가지고 있습니다.

    중뇌

    이 부분은 두 가지 의미에서 ‘중간’이라고 볼 수 있습니다. 물리적인 중간, 진화적으로 구뇌와 신뇌 사이에 나타남. 정서를 제어함. 대상에 대하여 즐거움, 슬픔, 두려움, 난폭함, 불안함, 화남 등으로 반응. 조류나 하등 포유류는 구뇌와 중뇌만을 가지고 있습니다.

    신뇌

    이 부분이 주로 대뇌 피질로 이루어집니다. 계획 세우기와 같이 의도적이고 목적성이 있으며 의식적인 호라동을 제어합니다. 대부분의 포유류는 구뇌 및 중뇌에 더하여 피질을 가지고 있기는 하지만, 코끼리, 돌고래, 고래, 원숭이, 영장류, 인간 등 소수의 고등 포유류만이 큰 피질을 가지고 있습니다.

    경험을 통한 학습은 쉽다

    1. 사람들은 학습을 하고 있다는 지각이 없이도 경험을 통해 끊임없이 학습을 하고 있습니다. 이 사실을 통해 우리는 인간의 뇌가 경험으로부터 쉽고 빠르게 배울 수 있는 능력을 진화시켰을 것으로 추측할 수 있습니다.
    2. 읽거나 들어서 아는 것에 비해 본인이나 본인의 친구 혹은 친척의 경험이 우리의 결론에 더 많은 영향을 줍니다.
    3. 사람들이 실수를 했을 때에도 이로부터 적절한 교훈을 얻지 못하는 경우가 있습니다.
    4. 사람들은 종종 지나친 일반화를 하기도 합니다.

    학습된 행동의 수행은 쉽다

    문제 해결 및 계산은 어렵다

    사용자 인터페이스 디자인에 대한 함의

    • 시스템의 상태 및 사용자가 목적에 얼마나 가까이 다가갔는지를 항상 잘 보여줘야 합니다
    • 사용자가 목적을 향해 가도록 유도해야 합니다
    • 사용자들이 무엇을 알아야 하는지 명시적으로 정확하게 알려주세요
    • 사용자가 시스템 문제를 진단하도록 만들지 마세요
    • 설정의 수나 복잡도를 최소화하세요
    • 계산을 하기보다는 그저 지각할 수 있게 해 주세요
    • 친숙하게 만들어 주세요

    11. 학습에 영향을 미치는 여러 요인들

    • 주어진 조작법이 과업 중심적이고 단순하며 일관적인 경우
    • 주어진 어휘가 과업 중심적이고 친숙하며 일관적인 경우
    • 위험성이 낮은 경우

    우리는 주어진 조작법이 과업 중심적이고 단순하며 일관적일 때 더 빠르게 배운다

    1. 과업 분석을 수행한다
    2. 과업 중심의 개념 모델을 만든다. 이는 주로 객체/행위 분석으로 구성된다.
    3. 과업 분석과 개념 모델에 기반하여 사용자 인터페이스를 디자인한다.

    과업 분석

    • 이 애플리케이션을 통해 사용자가 달성하고자 하는 목표가 무엇인가?
    • 이 애플리케이션에서 지원하고자 하는 과업들은 무엇인가?
    • 어떤 과업들이 빈번하게 수행되며, 또 어떤 과업들이 드물게 수행되는가?
    • 어떤 과업이 가장 중요하며, 또 어떤 과업들이 가장 중요하지 않은가?
    • 각 과업은 어떤 단계로 구성되는가?
    • 각 과업의 결과 및 산출물은 무엇인가?
    • 각 과업을 수행하기 위한 정보는 어디에서 오는가?
    • 각 과업의 결과로 얻어진 정보는 어디에 쓰이는가?
    • 어떤 사람들이 어떤 과업을 수행하는가?
    • 각 과업에 어떠한 도구들이 사용되어 왔는가?
    • 각 과업을 수행함에 있어서 사람들이 겪는 문제에는 어떤 것들이 있는가? 어떤 실수가 빈번하게 발생하는가? 그 원인은 무엇인가? 각 실수로 인해 발생되는 피해의 크기는 어느 정도인가?
    • 사람들이 과업을 수행할 때 어떤 용어들을 사용하는가?
    • 과업을 수행하기 위해 다른 사람들과 어떤 대화를 주고받아야 하는가?
    • 서로 다른 과업들이 어떻게 관련되어 있는가?

    객체/행위 분석

    가능하면 단순하게

    일관성

    객체/행위 표

    키 입력의 일관성

    우리는 주어진 어휘가 과업 중심적이고 친숙하며 일관적일 때 더 빠르게 배운다

    • 용어가 과업 중심적이어야 합니다
    • 용어가 친숙해야 합니다
    • 용어에 일관성이 있어야 합니다
    • 좋은 개념 모델이 있으면 과업 중심적이고 친숙하며 일관적인 용어를 만들기 편합니다

    우리는 위험이 적은 상황에서 더 빠르게 배운다

    요약

    • 시스템 조작이 사용자의 목표와 과업에 기반하고 있고, 개념적으로 단순하며 일관성이 있을 때
    • 시스템에서 사용하는 어휘들이 사용자들에게 친숙하고 과업 중심적이며, 개념과 용어가 1:1로 대응된다는 점에서 일관성이 있을 때
    • 시스템의 위험성이 낮을 때, 즉 오류를 범하기 어렵고, 오류를 범하더라도 그 비용이 낮고 정정하기가 쉬울 때

    12. 시간에 대한 요구사항

    반응성 정의

    • 사용자의 입력을 받으면 이 사실을 즉시 사용자에게 알립니다
    • 작업 수행에 얼마나 많은 시간이 걸릴지에 대해 알려줍니다
    • 기다리는 동안 사용자가 다른 일을 할 수 있도록 해줍니다
    • 쌇인 이벤트들을 지능적으로 관리합니다
    • 우선순위가 낮은 작업이나 사용자에게 알릴 필요가 없는 정리 작업들을 드러내지 않고 처리합니다
    • 사용자의 가장 빈번한 요청이 무엇인지 예측할 수 있습니다

    인간 두뇌에 내재된 시간 상수들

    인간에게 맞는 실시간성을 제공하기 위한 디자인

    • 사용자가 명령을 내리면 이에 대한 결과를 보여주기까지는 시간이 걸릴지라도 일단 명령이 수용되었다는 사실은 즉시 알려주어야 합니다. 그래야 인과관계가 적절하게 지각될 수 있습니다.
    • 소프트웨어가 무언가 수행하느라 바쁜 상황과 그렇지 않은 상황을 사용자에게 명확하게 알려주어야 합니다.
    • 사용자가 특정 기능이 끝나기를 기다리는 동안 다른 일을 수행할 수 있도록 허용해야 합니다
    • 화면에 움직임이 있는 경우 이는 부드럽고 명확히 표현해야 합니다
    • 긴 작업이 수행되는 경우 사용자가 중간에 이를 중간할 수 있도록 해야 합니다
    • 작업 수행에 걸리는 시간이 어느 정보인지 사용자가 알 수 있도록 해야 합니다
    • 사용자가 자신에 맞는 페이스로 작업할 수 있도록 최대한 지원해야 합니다
    • 소리 사이에서 인간이 분간해 낼 수 있는 가장 짧은 정적
      0.001초
    • 두뇌의 가장 빠른 뉴런인 청각 뉴런의 발화 사이의 최소 간격
      0.002초
    • 시각적 자극이 인식되고 우리에게 영향을 줄 수 있는 최소한의 시간
      0.005초
    • 스타일러스 펜을 사용하여 화면에 그림을 그릴 때, 잉크가 나타나는 시간의 지연을 느낄수 있는 최소의 시간
      0.01초
    • 연속되어 발생하는 소리를 음의 높낮이로 인식할 수 있는 최대 간격
      0.02초
    • 시각적 혼합이 일어나기 위한 최대 간격
      0.05초
    • 웅크림 반사의 속도
      0.08초
    • 시각적 사건을 완전히 지각하기 위해 소요되는 시간
      0.1초
    • 시카드 안구 운동에 걸리는 시간, 시지각이 억제되는 기간
      0.1초
    • 하나의 사건이 다른 사건의 원인으로 인식될 수 있는 최대 간격
      0.14초
    • 능숙한 독자가 인쇄된 한 단어를 이해하는데 걸리는 시간
      0.15초
    • 시야에 있는 네다섯 가지 사물을 직산할 때 걸리는 시간
      0.2초
    • 사건이 의식에 도달하기 전 ‘편집’과정에 걸리는 시간
      0.2초
    • 시각적으로 제시도니 사물을 식별하는데 걸리는 시간
      0.25초
    • 시야에 네 개 이상의 사물이 있을 때 각각을 마음 속으로 셈하기 위해 필요한 시간
      0.3초
    • 사물 인식 직후 주의 깜빡임
      0.5초
    • 사건-운동 반응 시간
      0.7초

    반응성 있는 인터랙티브 시스템을 위한 추가적인 가이드라인

    작업 중 표시 사용하기

    진행 상황 표시하기

    • 처리한 작업의 수가 아니라 남은 작업의 수를 보여주세요
    • 현재 단계의 진행 상황만 보여주지 말고 전체적인 진행 상황을 보여주세요
    • 완료율을 보여주세요. 단 0이 아니 1에서 시작하도록. 사용자들은 완료율이 0%인 상태에서 1~2초 정도만 멈춰 있어도 걱정을 하기 시작합니다.
    • 완 요율 100%는 작업이 완전히 끝났을 때 짧게만 보여주세요.
    • 진행 상태가 부드럽게 선형적으로 증가하도록 하세요
    • 사람이 쉽게 이해할 수 있는 단위를 사용하세요

    단위 과업 사이에 발생하는 지연이 단위 과업 중간에 발생하는 지연에 비해 낫습니다.

    허용할 수 있는 지연을 결정하는 핵심 요소는 마감 수준입니다…. 주요 작업 단위를 끝낸 후 발생하는 지연은 사용자를 거슬리게 하거나 과업 성과에 영향을 주지 않을 수 있습니다. 한편 큰 작업 단위의 일부를 이루는 작은 단계들에서 발생하는 지연은 사용자가 계획된 다음 단계를 잊게 만들 소지가 있습니다. 일반적으로, 완성된 문서를 파일로 저장하는 등 마감 수준이 높은 행동은 응답 시간 지연이 발생해도 문제가 될 소지가 적습니다. 하지만 키 입력을 하고 화면에 해당하는 글자가 찍히는 것을 보는 것과 같이 마감 수준이 낮은 행동은 응답 시간 지연에 대단히 민감합니다.

    중요한 정보를 먼저 보여주기

    손-눈동자 조율이 필요한 과업을 수행할 때 많은 계산이 수행되는 경우에 가짜 피드백 제공하기

    미리 수행하기

    사용자의 입력을 입력 순서 대신 중요도 순서로 처리하기

    반응성을 모니터링하여 작업의 품질을 적절히 낮추기

    웹에서도 적절한 피드백 제공하기

    반응성은 반드시 달성되어야 한다

    • 반응성은 사용자들에게 있어서 대단히 중요합니다.
    • 반응성과 성능은 다릅니다. 성능만 개선하거나 더 좋은 하드웨어를 도입한다고 반응성 문제를 해결할 수는 없습니다.
    • 반응성은 구현의 문제일 뿐만 아니라 기획의 문제이기도 합니다.

    출처: 마음을 생각하는 디자인, 제프 존슨 저 / 강규영 역


  • 마음을 생각하는 디자인; 디지털 미디어 디자인의 기초 1

    마음을 생각하는 디자인; 디지털 미디어 디자인의 기초 1

    사용자 인터페이스 디자인 규칙

    디자인 규칙은 어디에서 왔으며, 어떻게 해야 효과적으로 사용할 수 있는가

    체리톤(Cheriton, 1976)

    초창기 시분할 방식의 컴퓨터 시스템을 위한 사용자 인터페이스 디자인 가이드라인 제안

    노만(Norman, 1983a, 1983b)

    인간의 인지(인지적 오류 포함)에 기반한 소프트웨어 사용자 인터페이스 디자인 규칙을 제안

    스미스와 모저(Smith and Mosier, 1986)

    가장 포 관적인 사용자 인터페이스 가이드라인 모음집을 작성

    슈 나이터만(Shneiderman, 1987)

    그의 저서인 『사용자 인터페이스 디자인(Designing the User Interface)』의 초판 및 그 이후의 모든 판본에 “인터페이스 디자인의 여덟 가지 황금률”을 만듦

    브라운(Brown, 1988)

    『인간-컴퓨터 인터페이스 디자인 가이드라인(Human-Computer Interface Design Guidelines)』이라는 저적 할 제목의 책을 출판

    닐슨과 몰리 히(Nielsen and Molich, 1990)

    사용자 인터페이스 휴리스틱 평가에서 사용할 수 있는 디자인 규칙 모음

    마커스(Marcus, 1991)

    온라인 문서 및 사용자 인터페이스를 위한 그래픽 디자인 가이드라인을 제안


    사용자 경험의 디자인 및 평가는 이해와 경험을 필요로 한다

    • 화면도 더 밝고 배터리도 더 오래갈 것
    • 가볍고 튼튼할 것
    • 기능이 다양하고 배우기도 쉬울 것
    • 강력하면서 단순할 것
    • WYSIWIG(what you see is what you get)이고 시각장애인도 쓸 수 있는 것

    여러 사용자 인터페이스 가이드라인 비교

    슈나이더만(1987), 슈나이더만과 플레이센트(2009)

    • 일관성을 유지하기 위해 노력하라
    • 만인을 위한 사용성을 제공하라
    • 정보가 담긴 피드백을 제공하라
    • 작업 흐름이 완결성을 갖도록 하라
    • 오류를 방지하라
    • 수행된 동작을 쉽게 되돌릴 수 있도록 하라
    • 사용자들에게 스스로 통제권을 가지고 있다는 느낌을 주어라
    • 단기 기억 부담을 최소화하라

    닐슨과 몰리 히(1990)

    • 일관성과 표준
    • 시스템 상태의 가시성
    • 시스템과 실세계 사이의 일치성
    • 사용자의 통제와 자유도
    • 오류 방지
    • 회상보다는 재인
    • 유연성과 효율성
    • 미적이며 미니멀리즘 디자인
    • 사용자들이 오류를 인식하고 진단하고 복구할 수 있도록 도와줄 것
    • 온라인 문서와 도움말을 제공할 것

    1. 우리는 기대하는 대로 지각한다

    • 과거: 경험
    • 현재: 맥락
    • 미래: 목표

    지각은 경험에 따라 편향된다.

    지각은 맥락에 따라 편향된다

    • 우리가 무엇을 듣고 있는지가 우리가 무엇을 보게 될 것인지 영향을 줄 수 있고, 그 반대 또한 성립합니다.
    • 우리가 느끼고 있는 촉각이 우리가 무엇을 듣고, 보고, 냄새 맡게 될 것인지에 영향을 줄 수 있습니다.

    지각은 목표에 따라 편향된다

    • 목표는 우리가 어디를 볼지에 영향을 줍니다. 지각은 수동적인 과정이 아니라 능동적인 과정입니다. 우리는 환경으로부터 우리가 하고 있는 일 혹은 하고자 하는 일과 관련된 정보들만 추출해 낵 위해서 쉴 틈 없이 눈과 귀귀와 손을 움직입니다. 대학 지도를 찾고자 한다면 우리의 눈과 무우스를 쥐고 있는 손은 다른 것도 바 해당 목표와 관련성이 있을만한 것들에 더 이끌리며, 목표와 무관한 것들은 대체로 무시됩니다.
    • 목표는 우리가 특정한 자극에 더 민감하게 지각하도록 만들어 줍니다. 우리가 무언가를 찾고자 할 때 두뇌는 찾고자 하는 대상이 가지고 있는 특징들에 더 민감하게 반응하도록 지각을 점화할 수 있습니다. 예를 들어 넓은 주차장에서 빨간색 착를 찾고자 한다면 주차장을 훑는 동안 빨간색 차만 시각적으로 튀어 보이게 되며, 다른 색의 차들은 거의 의식에 들어서지도 않습니다. 이와 유사하게 어둡고 사람이 많은 방에서 자신의 배우자를 찾고자 하는 상와임ㄴ 우리의 두뇌는 청각 체계가 배우자의 목소리에 특별히 민감하게 반응하도록 프로그래밍됩니다.

    디자인에 함의

    • 모호함을 피하라
    • 일관성을 유지하라
    • 목표를 이해하라

    2. 우리의 시지각은 구조 인식에 최적화되어 있다

    게슈탈트 원리

    1. 근접성(Proximity)

    사물들 간의 상대적 거리가 사물들이 하위 그룹으로 묶여 있는지, 묶여 있다면 어떻게 묶여 있는지를 지각하는데 영향을 준다.

    DO

    DON’T

    2. 유사성(Similarity)

    유사성은 시각적 묶음에 영향을 줌. 다른 조건이 모두 동일하다면 서로 비슷해 보이는 사물들이 하나의 묶음으로 인식

    3. 연속성(Continuity)

    시지각이 끊어진 조각 대신 하나의 연속적인 형태를 인식하는 방향으로 편향되어 있음.

    4. 완결성(Closure)

    대상물이 분리된 조각이 아닌 하나의 완성된 사물로 보이도록 하기 위해 자동으로 개방된 부분을 닫아주게끔 작동

    5. 대칭성(Symmetry)

    복작한 풍경을 볼 때 복잡성을 줄이는 방향으로 풍경을 분해한다. 시야에 제시된 데이터는 보통 하나 이상의 해석이 가능한데, 우리의 시각은 자동으로 단순한 해석을 찾아내고 여기에 대칭성을 부여한다.

    6. 전경/배경(Figure/Gorund)

    전경은 일차적 주의를 끄는 대상들이며, 그 밖의 대상들은 배경으로 간주한다. 작은 대상물이 큰 대상물과 겹쳐있으면 작은 것을 전경으로, 큰 것을 배경으로 인식하는 경향이 있다.

    7. 공통 운명(Common Fate)

    함께 움직이는 대상체들이 하나의 묶음으로 지각된다.


    3. 우리는 시각적 구조를 찾아내고 활용한다

    긴 번호들을 훑어 읽는 능력을 향상해 주는 구조화

    의미단위에서 분리하거나, 4자 5자에서 끊어서 표현

    DO

    DON’T

    데이터에 특화된 컨트롤로 구조를 더 드러내기

    DO

    적절한 정보에 집중할 수 있도록 도와주는 시각적 계층 구조의 활용

    • 정보를 여러 구간으로 나누고, 각 구간을 또다시 하위 구간으로 나눕니다.
    • 각 구간 및 하위 구간에 시각적으로 두드러져 보이도록 레이블을 붙입니다. 또한 각 레이블이 어떤 구간에 대한 것인지도 명백히 드러나야 합니다.
    • 상위 구간이 하위 구간에 비해 더 두드러져 보이도록 각 구간에 계층을 부여합니다.

    DO

    DON’T


    4. 읽기는 부자연스러운 행동이다

    말하는 타고나지만 읽기는 타고나지 않는다

    • 선, 윤곽, 모양은 기본적인 시각적 특성이며 우리의 뇌는 이를 자동으로 인식하기 때문에 따로 배우지 않아도 된다.
    • 이러한 기본 특성이 모여서 글자, 숫자, 기타 표준적인 기호 등을 형성하는 패턴을 만든다. 각 글자를 판톡하려면 이 패턴을 익혀야 한다. 한자와 같은 상형문자에서는 하나의 기호가 전체 단어 혹은 개념을 담아낸다.
    • 음소 문자에서는 여러 글자가 모여서 형태소라고 불리는 패턴을 만듦
    • 각 형태소가 합쳐지면 우리가 단어라고 부르는 패턴이 형성됨
    • 단어들의 조합으로부터 우리가 구절, 숙어 문장 등으로 인식하는 패턴이 만들어짐
    • 그리고 문장의 조합은 단락을 이룸

    읽기에 더 많은 영향을 주는 요소는 글자의 시각적 특징인가, 글의 맥락인가?

    맥락도 중요하지만, 자동적인 맥락-자유 인식(Automatice Context-free Recognition)을 수행하지 못하는 사람들을 잘 도와주는 것이 훨씬 더 중요합니다.

    Boulton, 2009

    읽기에 숙련되지 않은 읽기는 서로 다른 뇌 부위를 사용한다

    비숙련자

    우선 베르니케 영역의 약간 위쪽 뒷부분에 위치한 영역이 활성화된다. 연구자들은 이 영역이 영어와 독어 같은 조음 문자 단어의 음절 단위 분리 및 조합(즉, 굴자들을 분석하고 이를 적절한 소리와 연결하는 것)을 담당한다고 보고 있다. 이 단어 분석 영역은 그다음으로 브로카 영역 및 전두엽(의미의 단위읜 형태소와 단어가 인식되고 전체적인 의미가 추출되는 곳)과 연결됩니다. 상형 문자의 경우 단어 전체가 하나의 기호로 이루어지고 형태가 의미에 대응되므로, 단어를 음절 단위로 분리하는 단꼐는 읽기에 포함되지 않는다.

    숙련자

    단어 분석 영역을 건너뛴다. 대신 후두-측두 영역(귀 뒷부분, 시각 피질 근처)이 활성화됨. 이 영역은 단어를 음절 단위로 분리하는 대신 통째로 인식하는 것으로 여겨진다. 이 영역을 지나 바로 단어의 의미 및 심상을 담당하는 뇌의 앞부분으로 전달되며, 이 과정에서 브로카 영역은 아주 조금만 활성화됨

    부적절한 정보 설계는 읽기를 방해한다

    일상적이지 않고 친숙하지 않은 어휘의 사용

    가독성이 떨어지는 글꼴

    작은 글꼴

    복잡한 배경 위에 쓰인 글자

    반복 속에 숨은 정보

    중앙 정렬

    읽기를 방해하지 말고 도와주기

    • 너무 작거나 읽기 어려운 글꼴, 패턴이 있는 배경, 중앙 정렬 등 앞서 설명한 방해 요소를 제거하여 사용자 인터페이스 상의 글자들이 특성 주도의 자동화 처리 방식으로 읽힐 수 있도록 함.
    • 제한된 어휘를 일관성 있게 사용. 업계에서는 이를 ‘평이한 언어’, ‘단순화된 언어’ 등으로 부르기도 함.
    • 글이 훑어 읽기 쉬운 시각적 계층을 이루도록 배치합니다. 중간 제목, 목록, 표, 시각적 강조 등을 적절히 활용.

    많은 소프트웨어가 불필요한 읽기를 강요하고 있다

    꼭 읽어야 하는 내용을 최소화하라


    출처: 마음을 생각하는 디자인, 제프 존슨 저 / 강규영 역


  • 웹 타이포그래피 기초

    웹 타이포그래피 기초


    읽기를 도와주는 방법

    읽기는 자연스러운 행위가 아니고, 고도의 훈련이 필요한 작업이다. 따라서 읽기를 도와주기 위해서 디자이너는 어떻게 해야하는가?

    1. 너무 작은 폰트 크기는 배제(최소 영문 8px 이상/국문 10px 이상)
    2. 가독성이 떨어지는 글꼴 사용 지양
    3. 산만한 배경 사용하지 말 것
    4. 중앙정렬은 최후의 수단으로 사용할 것
    5. 시각 계층을 사용하여 구성
    6. 평이한 언어로 설명할 것
    7. 단순한 언어로 서술할 것

    사용자에게 접근이 용이하지 않은 정보 제공들

    1. 낯선 어휘 사용을 지양합시다.

    전문적인 용어 사용은 최대한 자제하고 친숙한 언어를 사용합시다.


    2. 가독성이 떨어지는 글꼴을 사용하지 맙시다.

    Do 가독성이 높은 서체를 사용하자

    장식이 과하지 않은 서체를 사용하는 것이 좋다.

    Don’t 읽기 어려운 텍스트를 피한다.


    작은 폰트 크기는 지양합시다.

    Do 적절한 폰트 크기를 사용

    주와 종을 잘 설정하여 화면 내에서의 균형을 맞춘다.

    Don’t 작은 폰트 크기를 사용하지 않는다.

    너무 작은 폰트 크기를 사용하지 않는다.


    정보를 해치는 배경을 사용하지 맙시다.

    콘텐츠와 배경의 충돌을 줄이는 배경 사용

    지저분한 배경, 강렬한 배경은 사용하지 않는 것이 좋습니다.


    부적절한 반복은 인지에 효율적이지 않습니다.

    • 부적절한 반복
    • 적절한 개선안
    • 부적절한 반복
    • 적절한 개선안

    중앙정렬은 시작점으로 돌아가기 힘듭니다.

  • 눈으로 보고 느끼는 것들의 원리

    눈으로 보고 느끼는 것들의 원리

    우리의 시지각/지각은 제한적이다


    우리는 몸으로 세계와 연결되어 있다. 보이지는 않지만 공기로 숨을 쉬며, 공기의 진동을 통해 소통하고 더 나아가 빛의 진동, 그리고 개체를 움직이는 물리적인 힘 그리고 심리적인 힘이 모든 세계와 연결되어 있다. 그런 의사소통들 중 시각 디자인, 커뮤니케이션 디자인은 어디에 방점을 두고 있을까? 바로 시각이다. 눈에서 정보를 습득하는 물리적 한계가 무엇인지를 확인하면 우리의 인간적인 경계도 알게 될 것이다.

    • 우리의 시각은 절대적인 밝기보다 대비를 탐지하는 일에 능하다.
    • 우리의 색상 구분 능력은 색상이 어덯게 제시되는가에 따라 다르게 발휘된다.
    • 몇몇 사람들은 색맹이다.
    • 사용자의 모니터나 주변 상황이 색상 지각에 영향을 준다.

    색상 인지의 3요소

    희미함(Paleness)

    두 색상이 희미할수록(즉, 명도가 높고 채도가 낮을수록) 구분하기가 힘들어 짐

    영역의 크기(Color Patch Size)

    사물이 작거나 얇을수록 해당하는 사물의 색상을 판별하기가 힘들어짐. 글자는 대체로 매우 가늘기 때문에 글자의 정확한 색상을 식별하는 일은 어려울 때가 많음.

    영역 간의 거리(Seperation)

    사물이 멀리 떨어져 있을수록 사물간의 색상 차이를 구분하기가 어려움 눈동자의 움직임이 필요한 만큼 멀리 떨어져 있으면 구문이 더 어려워 짐.


    색맹

    적녹 색약 혹은 색맹

    외적 요인

    색상 구분 능력에 영향을 주는 외적 요인들

    조건 등색(Metamerism)

    빛의 스펙트럼 상태가 서로 다른 두 개의 색 자극이 특정한 조건에서 같은 색으로 보이는 경우. 조건 등색은 가상 색이기 때문에 조건이 다른 상황에서는 색이 서로 달라져 보인다.

    모니터

    모니터의 컬러 프로파일 상태, 화이트 밸런스, LCD 모니터의 시야각, 야간모드 등

    주변의 조명

    주위 조명의 색온도, 빛의 강도(강한 빛 아래의 LCD는 색을 알아보기 힘듦) 베니션 블라인드의 콘트라스트를 통한 시각적 간섭

    재료의 특성

    빛의 회절, 산란 등을 통해 각도에 따른 색이 보이는 재료


    색상에 대한 가이드라인

    1. 색상뿐만 아니라 채도와 명도에서도 구분하여 사용할 것
    2. 쉽게 구분할 수 있는 색상을 사용할 것
    3. 색맹을 가진 사람이 구분하기 힘든 색상 조합을 피할 것
    • 어두운 빨간색과 검은색
    • 어두운 빨간색과 어두운 녹색
    • 파란색과 보라색
    • 밝은 녹색과 흰색

    4. 색상은 생각 이외의 다른 요소에 더하여 보조적으로 사용할 것

    5. 강한 대비의 색상(Hue) 조합은 분리하여 사용할 것


    우리의 주변시는 빈약하다

    망막의 중심와와 주변시의 해상도 차이

  • 수사학, 문화, 사람 그리고 디자인

    수사학, 문화, 사람 그리고 디자인

    모든 예술은 통한다


    수사학

    수사학은 도자들에게 감동을 주기 위해 문장, 사상, 감정을 효과적으로 표현할 수 있는 언어수단들을 선택하고 그 이용 수법을 연구하는 학문이다. 다른 사람을 설득하고 그에게 영향을 끼치기 위한 언어기법을 연구하는 학문. 아리스토틀 이후 발달하기 시작하여 중세에는 문법, 논리학과 더불어 가장 중요한 학과였다. 수사란 언사의 수식이란 뜻으로 말과 글을 아름답게 꾸미는 데 그 의의가 있었다. 서양에서는 변설술로 간주되어 차차 궤변으로까지 발전하였고, 동양에서는 시문의 작법을 위해 연구되었다. 또한 이 수사학은 오랫동안 문장을 장식하는 수단으로 생각되었으나, 현대에 이르러서는 정확한 전달과 설득을 위한 모든 수단을 고찰하는 기능으로 인정되고 있다. 특히 리처즈를 중식으로 한 미국의 신 비평가들은 고전적 수사의 가치를 재발견하여, 이를 현대 언어와 문학의 본질적인 기능으로 보고 있다.


    수사법의 종류

    비유법

    • 은유법: ‘이것은 무엇이다’ 처럼 이어주는 말 없이 원관념과 보조관념을 간접적으로 연결시키는 방법
    • 대유법: 대상의 부분, 특징, 모양 등을 들어, 대상 전체를 나타내는 방법(제유법+환유법)
    • 활유법:생명이 없는 사물을 생명이 있는 것처럼 표현하는 방법
    • 의인법: 사람이 아닌 것을 사람처럼 표현하는 방법
    • 의태법: 사물의 모양과 움직임을 그대로 흉내 내어 표현하는 방법
    • 의성법: 자연이나 사람 또는 동물의 소리를 그대로 본떠 감각적으로 표현하는 방법
    • 중의법: 하나의 말에 둘 이상의 뜻을 담아 표현하는 방법
    • 상징법: 추상적인 개념을 구체적인 사물로 암시하여 표현하는 방법

    강조법

    • 과장법: 실제보다 훨씬 크거나 혹은 훨씬 작게 표현하는 방법
    • 반복법: 같거나 비슷한 말을 사용하여 의미를 강조하는 방법
    • 점층법: 대상의 성격을 점점 강하게 하여 내용을 강조하는 방법
    • 점강법: 뜻을 점차로 여리게, 작게, 얕게, 낮게 벌여 나가는 방법
    • 대조법: 성질이 서로 반대되는 대상을 맞세워 표현 효과를 높이는 방법
    • 미화법: 조금 과장하여 아름답게 표현하는 방법
    • 열거법: 비슷한 말귀 또는 내용적으로 연관있는 말귀를 늘어놓는 방법
    • 비교법: 두 가지 이상의 사물이나 개념의 비슷한 것들을 비교시켜 표현하는 방법
    • 연쇄법: 앞 말의 꼬리를 따서 그 다음 말의 첫머리에 놓아 표현하는 방법

    변화법

    • 도치법: 말의 순서를 바꾸어 놓아 변화를 주는 방법
    • 인용법: 남의 말이나 격언, 명언을 따서 인용하여 표현하는 방법
    • 간접인용: 따옴표 등이 없이 문장속에 숨어있게 표현하는 법
    • 대구법: 비슷한 어구를 나란히 배열하여 문장에 변화를 주는 방법
    • 반어법: 실제 나타내고자 하는 바와 반대로 표현하여 강한 인상을 주고 문장에 변화를 주는 방법
    • 생략법: 어떤 말이 없어도 뜻의 내용이 오히려 간결해져서 함축과 여운을 지니게 표현하는 방법

    문화적 차이

    Meme(밈)

    유전자처럼 개체의 기억에 저장되거나 다른 개체의 기억으로 복제될 수 있는 비유전적 문화요소 또는 문화의 전달단위로 영국의 생물학자 리처드 도킨스의 저서[이기적 유전자 The Selfish Gene, 1976]에서 소개된 용어이다. 문화의 전달에도 유전자처럼 복제역할을 하는 중간 매개물이 필요한데 이 역할을 하는 정보의 단위・양식・유형・요소가 밈이다. 모든 문화현상들이 밈의 범위 안에 들어가며 한 사람의 선행 혹은 악행이 여러명에게 전달되어 영향을 미치는 것도 밈의 한 예이다.

  • 디자인 사고; 디자인 씽킹 Design Thinking

    디자인 사고; 디자인 씽킹 Design Thinking

    발산과 수렴, 모호한 것에 대한 탐구


    Form follows Function

    20C의 디자인계의 거대한 담론 ‘형태는 기능을 따른다.’는 말이다. 이 생각을 기반으로 BAUHAUS가 생겼고, 어찌 보면 디자인의 가장 중요한 변곡적이 되는 말이다. 산업혁명 이전에는 수공예 시대에는 장식적인 제품과 디테일로 승부를 보는 것이었으며, 양은 극히 소수에게 편중되어 있었다. 하지만 산업혁명 이후 질 낮은 제품을 대량으로 만들 수 있었다. 수공업은 디테일하고 희소했으며, 공장제 공업은 쪼들렸고 흔했다. 이 간극을 메우기 위해 만들어진 것이 바우하우스 최초의 근대적 의미의 디자인이다. 그럼 이 말은 누가 했는가? 바로 건축가 루이스 설리반이다. 형태는 기능을 따른다는 말을 풀어보자.

    1. 장식이나 놀이와 같이 불필요하거나 과도한 것으로부터의 해방
    2. 물리적-경제적인 기술의 공학설계원칙 적용
    3. 목적에 따라 합리적으로 수단을 선택
    4. 최소의 경비로 최대의 효과
    5. 최소의 제작비와 경영비
    6. 감정에 끌리는 디자인 배제

    지금의 감각으로는 이해가 안되는 부분이 몇 군데 있지만, 시대의 흐름이 그랬다.


    21C 담론

    20C 담론 Form follows Function(형태는 기능을 따른다)는 것을 깨버리는 도전적인 디자인

    droog

    뜻: 건조한, 썰렁한 농담이라는 표현에서의 썰렁함이랑 같은 의미

    의미 부여가 담긴 디자인을 함

    85lamps(RodyGrausmans,1993) 출처: https://shop.gessato.com/chandelier-85-lamps/

    Milk Bottle(Tejo Remy) 출처: https://www.metropolitandecor.com/Milk-Bottle-Lamp-Droog_p_1713.html

    Joris Laarman

    아름다우면서 기능적으로 훌륭한 디자인을 선보임.

    우리나라의 온돌을 제외하면 대부분이 라디에이터 혹은 히터를 통해 난방하는 방식을 채택하고 있다. 그래서 외국을 나가면 흔히 라디에이터를 볼 수 있는데 보통 안 이뻐서 가리곤 한다. 하지만 요리스 라만이 한 디자인을 보면 이쁘며 모듈 형식으로 되어 있어 확장성까지 충족시키는 결과물을 만들었다.

    출처: https://collection.cooperhewitt.org/objects/975141899/


    디자인 사고(Design Thinking)

    직관적 사고나 분석적 사고의 한쪽이 아니라 이에 대해 통합적으로 접근하는 사고법. ‘통합적 사고’란 상반되는 두 아이디어 사이의 긴장을 건설적으로 이용하여 하나를 선택하느라 다른 하나를 버리는 양자택일 방식 대신, 두 아이디어의 요소를 모두 포함하면서도 각 아이디어보다 뛰어난 새로운 아이디어를 만들어 창의적으로 긴장을 해소하는 능력

    로져 마틴 Roger Martin, 『Design Thinking』, 2010

    통합적인 사고, 분산과 수렴, 직관과 분석, 비선형적 작업

    디자이너들이 무엇인가를 디자인하면 문제를 풀어가던 사고방식대로 사고하는 방법이다. 디자이너들은 기술적으로 구현할 수 있고, 현실적으로 이윤도 남기는 동시에 고객을 만족시킬 수 있는 방법을 창의적이고 혁신적으로 생각해낸다. 이를 위해서는 사용자와 깊이 공감할 수 있는 비즈니스적인 전략적 사고가 둘 다 필요하다.

    『창의융합 프로젝트 아이디어 북』, 2015

    디자이너는 어떻게 생각하는가?

    나이젤 크로스(Nigel Cross, 2013) 확산(Divergence))과 수렴(Convergence)을 지속적으로 반복한다.

    영감(Inspiration)

    • 관찰, 공감, 협력하여 영감을 얻는다.

    아이디어화(Ideation)

    • 통합적 사고 및 분산과 수렴 과정을 통해 구체적인 아이디어를 얻는다.

    구현(Implementation)

    • 프로토타입을 만들어 테스트하고, 실패하면 개선하는 일을 반복한다.팀 브라운, 디자인 사고 세 단계

    프로토콜 분석과 그룹 작업 관찰

    매우 기술적인 과정으로 인식되었던 공학기술 디자인(Engineering Design)조차 실제로는 각 참가자가 지닌 디자인 대상에 대한 특정 지식이나 인식의 ‘대상 체계’가 상호작용하고 타협하는 사회 과정이라는 것

    “디자인 과정은 관심사가 각기 다른 참가자들이 합의를 보는 것이며, 각기 다른 관심사는 ‘대상세계적 관점’에서는 서로 조화를 이루기 어렵다. 디자인과정은 사회적일 수밖에 없고 참가자들은 되도록 직접적으로 얼굴을 맞대고 의견을 교환하며 서로의 차이를 타협해서 의미를 형성해야 한다. 공업기술 디자인 과정에서 조차, 불확실성과 모호함이 불가피하다. 모호함은 디자인과정에서 꼭 필요하다!” 모호함을 통해

    1. 자유롭게 생각하고
    2. 서로 타협하며
    3. 의미를 재구성한다.

    디자인 사고 ≠ 논리적, 과학적 사고: 논리는 추상적인 형태에 관한 것이다. 과학은 현존하는 형태를 탐구한다. 디자인은 새로운 형태를 만들어 낸다. 과학에서의 가설은 디자인에서의 가설과 다르다. 논리적 제안과 디자인 제안은 다르다. 추측에 근거한 디자인은 사고의 방식이 귀추적이기 때문에 논리적으로 판단할 수 없다.

    출처: 라이어넬 마치

    • 연역법: 대상을 분명하게 있음을 증명
    • 귀납법: 대상이 실제로 작용함을 보여줌
    • 귀추법: 대상이 있을지도 모른다고 제안함 = 귀추적 방식이 디자인 행위의 중심

    과학적 사고와 디자인 사고의 차이점

    • 일반적인 논리와 달리, 디자인 해결책은 문제에서 직접 나오는 것이 아니라 문제와 연결될 뿐
    • 원칙을 입증하기 위해 여러 사례를 연구했다가 한 가지 사례로 원칙이 잘못되었음을 입증하기도 하는 과학자들과 달리, 디자이너는 적절한 결과를 내는 단 하나의 만족스러운 사례만 만들어 내도 기뻐한다.
    • 디자인은 답이 여러 개, 정답이 없음

    인지과학적 관점

    전통적 사고방식은 디자인에 적합하지 않음. 인지과학적 관점에서 인터렉션 디자인을 분석하면 인지과정이 순전히 이성적이로 정신적인(머릿속으로만 일어나는) 활동이 아니라, 실질적이고 인터렉티브 한 활동이다. 스스로 작용하는 의식은 전체 인식체계의 극히 일부에 지나지 않는다. — 헨릭 게텐리드

    전체 체계 = 의식 + 활동 + 세상(물질 환경에서의 생각 + 행동)

    • 추상적인 사고만으로는 복잡한 디자인 업무를 만족스럽게 수행할 수 없음

    따라서 개념적 논리 과정(철학)이나 실험적 과정(실험과학)만으로 디자인을 볼 수 없음

    • 사고와 실험과 제작과정(테스트 및 시제품)이 얽힌 복합적인 과정

    디자이너의 사고 특성

    애착은 매우 중요하다. 애착이 없이는 창의적인 작업이 나올 가능성이 없다.

    1. 디자이너는 자신이 좋아하는 특정 콘셉트에 애착을 느낄 정도로 집착한다.
    2. 다른 팀원에게 설득하려 한다.
    3. 디자인 콘셉트는 단순히 추상적인 아이디어가 아리나 디자이너의 노력을 통해 나오는 개인의 통찰력이기 때문이다. 결과물을 ‘자식’처럼 생각한다.

    몇몇 연구자들은 디자인 사고가 원래 비언어적인데 그것을 강제로 언어화하는 ‘프로토콜 연구’는 비언어적 사고 과정을 방해했을 것이라 지적한다. 따라서 디자이너가 혼자 일하면서 자신의 생각을 말로 표현하는 형태의 실험 과정 중에 일어나는 깊은 인지과정에 대해 너무 단정적으로 결론을 내리지 않도록 주의해야 한다.

    혼자 작업할 경우, 디자이너 한 명이 여러 역할을 동시에 수행하면서 드로잉 보드에 끄적이고 중얼거리며 다양하게 활동한다.

    디자이너들은 관심을 가지는 문제의 특성을 선택해(이름 붙이기) 탐구할 해결 영역을 파악한다.

    디자이너들은 처음부터 문제를 까다롭게 따지려 들지 않는 편이다.

    • 작업이 한창 진행된 뒤에 중요한 정보를 발견해 과정이 중단되거나 지연되는 경우도 있다.
    • 따라서, 이상적인 디자인 방법 연구

    비제이 쿠마 101가지 디자인 방법

    1. 목적을 탐지하라
    2. 맥락을 파악하라
    3. 사람을 이해하라
    4. 통찰을 구조화하라
    5. 콘셉트를 탐험하라
    6. 설루션을 구성하라
    7. 결과물을 실현하라
    8. 문제 파악(업무 정의)
    9. 콘셉트 도출(찾기)
    10. 콘셉트 정리(찾기)
    11. 콘셉트 선택(수정)
    12. 디자인
    13. 발표

    팀작업 VS 개인작업

    디자이너들은 하향식 접근방식일 경우 계획에서 일탈하는 경우가 많다. 문제 파악과 해결책 개발이 교차하는 것을 관찰할 수 있다. 부분적인 해결책을 개발하면서 이리저리 떠돌거나 갑자기 발견된 기회에 뛰어드는 모습을 관찰할 수 있었다. 이러한 일탈을 통해 ‘기회주의적 해결책 개발’이 이루어진다. 이런 기회주의는 디자이너의 약점이라기보다는 필연적인 것이다.

    디자이너들은 생각이 흐르는 대로 일시적으로 따라가다 인지적 비용을 적게 들이고도 부분적으로 해결책을 찾는 것을 유익하다고 본다.

    부분적이고 잠정적인 아이디어와 해결책이 나오면 계속 다듬어져 최종적인 형태가 나온다. 아이디어나 해결책은 한번 나오면 잊히거나 버려지는 경우가 매우 드물다. 이것은’점진적 개발 전략’이라고 볼 수 있다.

    디자인 업무 환경의 몇 가지 요소가 점전적 개발 전략을 가능하게 하는 것으로 보인다. 문제가 광범위하기 때문에 한 가지 해결 방식으로는 해결할 수 없다. 디자인 문제에는 몇 가지 논리적 제한이 있고 옳고 그름을 가릴 수 없기 때문에 부분적인 해결책을 포기하고 다시 새롭게 시작할 수 있는 근거가 부족하다. 차라리 이미 있는 것을 계속 개발하는 것이 더 낫다.

    디자인에서는 목표가 무엇인지 미리 알지 못한다. 해결 콘셉트를 전개하면서 목표를 만든다. 잊힌 도시나 묻혀 있는 보물(주어진 문제)을 찾는 게 아니라 현실에 없는 도시나 보물을 스스로 만들어 낸다.


    디자인 지능

    1. 제시 도니 문제, 해결책과의 집중적이면서도 분석적인 상호작용
    2. 구체적인 대상화 추상적 사고
    3. 행동하는 것과 생각하는 것 사이의 빠른 전환
    4. 개인뿐 아니라 팀 작업도 할 수 있는 사회적 활동

    두뇌 활동 연구에서 디자인 사고를 하는 동안 뇌 우반구의 특정 부위가 활성화되는 것을 파악할 수 있었다. 뇌 우반구와 좌반구는 각기 다른 인식 기능을 담당하는 것으로 보인다. 신경학 연구에 따르면 우반구는 공간 구조, 미적 감각, 감정과 관련이 있고 좌반구는 언어, 언어적 논리와 관련이 있다. 좌반구가 손상되면 말하는 기능이 손상될 수 있고 우반구가 손상되면 우리가 실험에서 봤듯이 디자인 능력 같은 다른 기능 등이 영향을 받는다.

    디자인 사고를 다른 형태의 지능으로 본다는 것이 어떤 사람은 가지고 있고 어떤 사람은 가지고 있지 않다는 의미는 아니다. 디자인 능력은 우리 뇌에 이미 있는 선천적인지 기능이기 때문에 누구나 어느 정도 갖추고 있다. 다른 형태의 지능이나 능력처럼 디자인 지능도 행동으로 나타나기도 하고 다른 사람들보다 이런 능력이 더 크게 발휘되는 사람도 있다. 또한 다른 형태의 지능이나 능력처럼 디자인 지능도 단순히 타고난 재능이 아니라 훈련해서 개발할 수 있는 능력이다.

  • 기획 – 스토리보드 만들기

    기획 – 스토리보드 만들기

    존 케네스 갤브레이스가 말한 불확실성의 시대를 우리는 살고 있다. 직업간의 경계가 모호해지고 있는 시대를 살고 있다. 기술의 발전으로 기획자, 디자이너, 개발자의 경계가 모호해지는 시대를 지나가고 있다. 다시 경계가 명확해질 것인가? 사실 잘 모르겠다. 하지만 경계가 모호해졌다고 해서 과정과 결과물이 사라지는 것은 아니다. 우리는 모든 것을 구분해야만 생활, 더 나아가 모든 일을 처리할 수 있기 때문이다.

    모호해지긴 했지만 기획자, 디자이너와 개발자 이들의 역할을 어디서부터 나뉠까? 그들이 하는 역할로 정의하는 것이 좋으나 모호해지고 있기 때문에, 그들이 산출하는 결과물로 이야기하는 것이 명확해 보인다. 기획자는 스토리보드 혹은 화면기획서(화면기획서로 통일해서 말하겠다)를 최종산출물로 생각하고, 디자이너는 화면이 디자인된 파일과 디자인 가이드를 결과물이라 생각한다. 개발자들은 당연히 소스코드가 결과물이다. 이렇게 정의하고 이 글을 읽으면 편하게 이해가 될 것이라는 생각이 든다.


    Information Architecture

    정보의 구조도라고 해석할 수 있는데, 줄여서 IA라고 한다. 모든 화면을 한눈에 볼 수 있는 계층도로 표현을 한 것인데, 앞선 포스트에서 정리한 Affinity Diagram을 틍해서 만들어진 결과물이다. Affinity Diagram에서 정의한 연관성이 있는 키워드들이 메뉴화면으로 녹여질지 기능으로 녹여질지의 여부를 판단 후에 메뉴 목록을 작성한다. 그리고 상위관계 그리고 하위관계를 설정하고 비어있는 부분이 있는지 없는지를 체크하는 것을 이 단계의 마무리라고 할 수 있다.

    화면을 최소로 추상화하면 ‘메뉴의 이름’ 혹은 ‘화면 ID’가 된다는 점 잊지 마시길 바랍니다.


    기능목록 정의서

    기능목록 정의서는 커뮤니케이션을 위한 문서이다. 고객과의 커뮤니케이션, 그리고 이후 나오는 산출물들을 알아보기 위한 설명서 같은 것이다. 이것은 대부분 엑셀 혹은 스프레드시트로 정리하는데, 그것은 담고있는 정보가 많아서이다. 이것이 해당 프로젝트 진행의 지도라고 볼 수 있다.

    정의하는 항목으로는

    • 메뉴 목록
    • 화면 ID

    가 있다.


    WBS

    작업 분할 구조도(WBS/Work Breakdown Structure)

    활동과 업무를 역할을 분담하고 분담한 내역을 적고 완료 일정을 확정한 내역서이다. 실무를 하게된다면 기능목록 정의서 위에 완료 일정을 파트별로 나눈다. 예를 들어 기획팀, 디자인팀, 개발팀으로 나누어 업무일정을 짠다. 파드별로 나뉘어져 있는 부분도 담당자를 배정하고 해당 프로젝트가 잘 이루어지도록 시간 계획을 짜는 것을 주요 목표로 한다.


    화면기획서/스토리보드/와이어프레임

    많은 이름으로 불리기하는 오늘의 가장 중요한 것 뒤로는 계속해서 화면기획서라고 명명하겠다. 화면기획서는 말 그대로 화면의 구성요소를 러프하게 그린다. 기초도형과 텍스트 그리고 이미지로 표현까지 설계하는 것이다. 그리고 해당 요소의 기능, 출력되는 데이터 그리고 이동하는 페이지를 표기한다.

    필수적인 요소는

    • 화면 ID
    • 화면 이름
    • 화면의 와이어프레임
    • 버튼 및 영역의 기능 설명

    이다.

  • A.I., Design and Designer

    A.I., Design and Designer

    인공지능과 디자인의 미래

    특이점이 온다

    Ray Kurzweil이 쓴 책이다. 이 책의 내용을 요약하면

    ‘가속적으로 발전하던 과학이 폭발적 성장의 단계로 도약함으로써 완전히 새로운 문명을 낳는 시점’인 특이점이 가까운 미래에 온다

    특이점이란 무엇인가? 그것은 미래에 기술 변화의 속도가 매우 빨라지고 그 영향이 매우 깊어서 인간의 생활이 되돌릴 수 없도록 변화되는 시기를 말한다. 진화의 역사를 여섯 시기로 개념화 해봤다.

    제 1기: 물리현상과 화학 반응

    원자들이 모여서 분자라고 불리는 비교적 안정된 구조가 만들어지자 비로소 화학이 탄생했다. 모든 원소들 중 가장 쓰임새가 풍부한 것은 탄소였다. 다른 원소들은 대부분 한 방향에서 세 방향까지 결합할 수 있는 반면 탄소는 네 방향으로 결합할 수 있어서 복잡하고 정보가 풍부한 삼차원 구조를 만들어낼 수 있었다. … 현재 우리 우주의 물리 법칙들을 질서와 복잡성을 늘려가는 진화 과정에 안성맞춤인 놀라운 상태임에 분명하다.

    제 2기: 생물과 DNA

    탄소 기반 화합물이 점점 더 복잡해져서 자기 복제 기제를 갖춘 분자들의 복합체로 발전하였고, 드디어 생명이 탄생했다.

    제 3기: 뇌

    감각기관을 이용해 정보를 인지하고 그 정보를 뇌와 신경계에서 처리하고 저장할 줄 하는 유기체가 만들어졌다. 궁극적으로 인류는 자신이 경험하는 세계에 대한 추성적 정신 모델들을 창조하고 이 모델들의 의미를 이성적으로 사고하는 능력을 발전시켰다. 우리는 마음속으로 세계를 재설계하고 그것을 실행에 옮길 수 있는 능력을 갖게 되었다.

    제 4기: 기술

    인간은 기술의 진화를 이끌어냈다. 기술은 정교한 연산 및 통신 장비를 이용해 정보의 정밀한 패턴을 감지하고, 저장하고, 평가할 수 있게 되었다.

    제 5기: 기술과 인간 지능의 융합

    몇 십년 안에 특이점과 함께 다섯 번째 시기가 도래할 것이다. 우리 뇌에 축적된 광대한 지식이 더 크고 빠른 역량과 속도, 지식 공유 능력을 갖춘 기술과 융합하면서 시작될 것이다.

    인간ㆍ기계 문명은 연결이 100조 개에 불과해서 처리 속도가 몹시 느린 인간 뇌의 한계를 초월할 것이다. 특이점과 더불어 우리는 인간의 오랜 문제들을 극복하고 창조성을 한없이 확대하게 될 것이다.

    제 6기: 우주가 깨어난다.

    특이점 이후 생물학적으로 인간의 뇌에서 유래하고 기술적으로는 인간의 창의력에서 유래한 지능이 온 물질과 에너지에 속속들이 스며들 것이다. 지능은 물질과 에너지를 재편하여 최적의 연산 수준을 달성해가면서 지구로부터 먼 우주까지 뻗어갈 것이다.문명의 지능 대분은 결국에는 비생물학적인 형태가 될 테고, 이번 세기 말쯤에는 비생물학적 지능이 인간의 지능보다 수조 배의 수조 배만큼 강력해질 것이다.진화는 질서를 증가시킨다. 그러나 복잡성은 증가되기도 하고 증가되지 않기도 한다. 생명체든 기술이든 진화의 속도가 빨라지는 주된 이유는 점점 증가하는 질서 위에 쌓여가기 때문이다. 정보를 기록하고 조작하는 기법들이 점점 세련되어지기 때문이다. 진화가 만들어낸 혁신은 더 빠른 진화를 촉진하고 가능케 한다.40년간 인공지능 분야에 몸 담으면 느낀 문제라면, 일단 현실화된 AI기술은 더 이상 AI로 여겨지지 않고 각 분야로 흡수된다는 점이다.내가 볼 때 삶의 목적은 끝없이 지식을 창조하고 감상하는 것이다. 더욱 훌륭한 ‘질서’를 만들어가는 것이다. 2장에서 말했듯 질서를 증진시키면 일반적으로 복잡성도 높아지기 마련이다. 하지만 가끔은 복잡성을 오히려 낮추면서 질서를 늘리는 심원한 통찰이 등잘할 수도 있다.우주의 목적은 우리 삶의 존재 목적과 같다. 좀더 뛰어난 지능과 지식으로 나아가는 것이다.철학자 막스 모어가 말하는 인류의 목표는 “인간이 추구하는 가치들에 맞는 방향으로 과학기술을 창조하여 초월을 이루는 것이다.”


    인공지능이란

    지능은 학자에 따라 다르게 정의되고 있다. L.M. 터먼은 지능을 ‘추상적 사상을 다루는 능력’이라고 정의하였고, D.웩슬러는 ‘유목적적으로 행동하고, 합리적으로 사고하고, 환경을 효과적으로 다루는 개인의 종합적 능력’이라고 정의하고 있다.

    어느 수준부터 인공지능인가?

    • IBM 왓슨 혹은 알파고는?
    • 자율주행자동차는?
    • LKAS(차선이탈유지장치, Lane Keeping Assistant System는?
    • 그림인식 검색
    • 문자 인식 알고리즘
    • 구글 번역기
    • TTS(Text-To-Speech)는 인공지능인가?
    • 온습도 측정기는?
    • 방범경보기는?
    • 인버터에어컨은? 현재는 단 한 종류의 왓슨만이 존재하는 것이 아니고 종양학 전문 왓슨, 방사선학 전문 왓슨, 내분비학, 법학, 세금 규정, 소비자 서비스 등 전문 왓슨이 다 따로 있으며 그렇게해야 각 시스템에 맞는 데이터를 입력해 정확하게 훈련시킬 수 있기 때문이다.

    환경을 인지해서 액션을 취하는 행위

    Stuart Russell andPeter Norvig, 2009 인공지능은 세서(감각기관)를 활용해서 사용자에게 어떤 정보를 교환하는 행위. 그렇다면, 주변의 디지털 또는 아날로그 기기는 대부분 인공지능이라고 볼 수 있다. 인공지능은 작은 것에서부터 시작되었고, 인공지능의 개념은 변하고 있다.


    스탠포드 인공지능 보고서

    ‘스탠포드 백년대계 연구’는 그 이름처럼 100년 넘게 지속될 것을 목적으로 매 5년마다 새로운 연구팀을 구성해 인공지능의 현주소를 분석하는 연구입니다. 이들은 지난 2016년 9월 첫 보고서를 발표했습니다. 이번 보고서는 지금으로부터 14년 뒤인 2030년, 북미의 한 가상의 도시에서 사람들이 경험하게될 인공지능 기술들을 분야별로 다루고 있습니다. 그러나 미래의 이야기만이 전부는 아닙니다.(스탠포드 인공지능 리포트) 본 보고서는 적어도 백 년은 지속될 장기 연구 계획의 첫걸음에 해당하는 결과물이다.

    목차

    • 1장: 인공지능이란 무엇인가?
    • 2장: 분야별 인공지능(교통, 서비스 로봇, 의료, 교육, 빈곤 계층 지원, 치안, 일자리, 엔터테인먼트 산업)
    • 3장: 인공지능 공공 정책의 전망과 제언(인공지능 정책의 현재와 미래)
    • 부록: 인공지능의 역사 개괄

    인공지능이란 인간이 신경꼐와 몸으로 주변 사물을 감지하고 학습, 추론하며 이를 바탕으로 한 행동 및 그 방식에서 영감을 얻은(물론 실제 구현은 전혀 다르게 이루어지지만)다양한 컴퓨터 기술과 이와 관련된 과학의 한 분야를 말한다.


    현재 일상생활의 AI

    1. 비서: Siri, Bixby, Google Assistant, Alexa
    2. 챗봇/로봇기자
    3. 실시간 노래 검색 어플리케이션
    4. 포토샵 콘텐츠 어웨어
    5. 주식거래 알고리즘
    6. MS Excel
    7. 자동차 번호판 인식
    8. 기상 예측 알고리즘
    9. 자율주행 시스템, 차량 안전 시스템(Level 2 이하)
    10. 네이버 스마트 렌즈
    11. 구글 번역기, 파파고
    12. 각종 쇼핑사이트의 구매추천

    인공지능의 역사

    1. 앨런 튜링은 『컴퓨팅 기기와 지능』이라는 기고문에서 지능을 흉내낼 수 있는 기계의 가능성을 상상했고, 오늘날 인공지능의 중요한 요소들인, 어떻게 지능을 테스트하며, 또한 기계가 스스로 학습할 수 있을지를 논함
    2. 인공지능이란 내겸이 태동하고 연구가 시작된 건 1956년. 당시 다트머스 프로젝트에 참여한 석학들은 기계가 지능적인 면모를 갖추고 일한느 것처럼 조작하는 방법을 찾고자 함. 이는 향후 인공지능 분야를 이끈 대원칙과도 같음.
    3. 1960년대 후반에 이르면 자연언어처리에 관한 연구도 시작
      퍼셉트론 학습방법: 우리가 수학 문제를 잘못 풀었을 때 선생님이 다시 풀어오라고 하면 정답에 맞게 풀기 위해서 다시 풀고 다시 풀고 하다가 정답을 맞추는 것과 비슷하다. 그래서 이것을 우리는 ‘학습’이라고 부른다.
    4. 1980년대 중반에 오면서 인공지능 분야 전반에 관한 관심이 시들해지고 투자가 감소하면서 재원도 부족해지기 시작했다.
      닐슨은 이 기시를 ‘인공지능의 겨율’이라고 부름
    5. 1990년대 들어 인공지능 연구는 ‘고전적 인공지능’을 모토로 부활을 꾀하지만, 이내 지능적인 체계를 구현하기 위한 완벽한 접근법으로는 부족하다는 결론
    6. 역전파 접목

    계단 함수 VS 시그모이드 함수


    CNN Playground(비선형 분류)

    4차 산업 + 디자인

    인공지능(AI) + 초연결(hyper connectivity)

    • Amazon 물류창고 로봇 키바(Kiva)
    • MercedesBenzA-class공정
    • Boston Dynamics
    • New Bionic Prosthetics
    • Amazon GO
    • 이마트24 셀프 편의점
    • 자율주행
    • Deep Learning Car

    사회현상, 문제점, 변화

    1. 모바일 단말기의 보금, 웨어러블 컴퓨터 기기
      – 물리적 소통 → 온라인 소통 → 개인주의, 커뮤니티의 붕괴
      – 물리적 커뮤니티의 붕괴 → 비혼, 혼밥, 혼술 등(온라인 커뮤니티의 증가)
    2. 정보의 홍수, 정보의 파편화
      – 한가지 정보를 맥락으로 오랫동안 습득하는 능력이 저하됨
      – 실질 문맹률 저하 — 독해능력 저하
      – 뇌의 휴식시간 박탈 — 문자중독, 정보중독, 빛 공해

    미래에는 인공지능이 UI이다.

    대화형 유저 인터페이스, 자연언어의 활용, 맞춤형 정보 전달

    대부분의 사람들은 디자인에 대해 생각할 때 종종 실수를 저지른다. 우리는 디자인이란, 보이는 어떤 것, 혹은 느껴지는 어떤 것이라고 생각한다. 그러나 사실 디자인 어떤식으로 동작하는 것이다.
    스티브 잡스

    쇠퇴 영역

    • 북디자인
    • 사진보정/편집
    • 기타 인쇄물
    • 자료수집 및 정리

    유지 영역

    • 웹디자인
    • 서체디자인
    • 템플린 디자인
    • 브랜드 디자인
    • 일러스트레이션
    • 게임

    부흥 영역

    • UX/UI디자인
    • 영화/영상/VFX
    • 생성 디자인
    • 3D 그래픽스
    • 플랫폼 디자인
    • 그린 디자인
    • 서비스 디자인
    • 창작 알고리즘
    • 워크플로우 디자인

    인공 신경망

    CNN(컨볼루셔널 신경망)의 컴퓨터 시각인식 (CV) 예시오토로 스튜디오의 FakeKanji 작업

    인공지능의 창작

    이미지를 인식하고 추상화된 글자로 바꾸는 것이 가능하면 반대의 작업 글자를 이미지로 변환하는 과정이 가능하다. 이것이 인공지능의 창작이다.제너레티드 포토구글 (프랑스,2014)- AutoCaptioningGoogle DeepDream

    Generatvie Design

    조건에 맞추어 생성하는 디자인 Autodesk® Generative Design

    Airbus A320 Bionic Partition생성적 디자인(GenerativeDesign)의 예시_01생성적 디자인(GenerativeDesign)의 예시_02

  • Persona, Customer Journey Map, Scenario

    Persona, Customer Journey Map, Scenario

    Persona

    앞의 리서치 이후 Keyfinding 한 결과를 기반으로 대표하는 사람을 만듭니다. 이것이 페르소나입니다. 사람을 만들 때 특징을 녹여야 하는데, 한 사람의 취향부터 생활습관 등을 녹여내야 합니다. 이런 상황에서 본인의 프로젝트에 가장 적합한 성향을 사람의 특징을 집어내는 것이 중요합니다. 가령 금융 관련 모바일 애플리케이션 서비스를 준비하는데, 타깃 유저가 20대이다. 20대가 금융서비스의 메인은 무엇일까? 소비생활일 것이다. 그리고 그들의 문화는 더치페이이고, 커피를 자주 마시며, 쿠폰 적립 등을 자주 활용한다. 그렇다면 페르소나에 이것을 녹여내야 하는 것이다. 금융서비스라고 하면 이체, 금융상품 가입, 대출 이렇게 접근하는 것이 아니라. 타깃의 생활 패턴과 특징을 파악해 적용해야 한다. 여기서 생뚱맞게 20대인데 직업이 갑자기 보편적인 학생이 아닌 20대 가장이라고 하면 보편성을 잃은 페르소나가 설정이 되는 것이다. 반대로 20대 대학생 중에서 소비를 가장 많이 하는 마케팅을 여학생으로 설정하는 것이 더 보편적이고 파급력 있는 페르소나라고 할 수 있다. 이것을 참고해 페르소나를 설정하길 바란다.

    • 디지털 라이프
    • 모바일 친화적
    • 유동자산

    Situation

    우리에게 친근한 드라마를 구조적으로 접근해보자. 드라마에는 항상 주인공과 주변인물들이 등장한다. 인물들은 각자의 개성을 가지고 있다. 개성은 말로 설명하는 것이 아닌 특별한 상황에 대한 반응으로 인물을 묘사한다. 그렇다면 우리도 마찬가지고 위에서 설정한 페르소나를 가지고 상황에 놓아보는 것이다. 20대 마케팅을 전공하는 여학생의 보편적인 일과와 특별한 날 등 여러 가지 상황을 나누어 설정하는 것이다. 아침에 일어나서 학교를 가서 수업을 듣고 점심을 먹고 수업을 듣고 집에 들어간다. 이것은 일반적인 루트인 것이고, 아침에 일어나서 등굣길에 교통카드에 잔액이 부족해 버스를 타는데 힘들었다. 이런 상황에서 후불 교통카드였다면 문제가 없었을 것이다.라는 생각이 들것이다. 그렇다면 금융 앱에서는 귀하의 교통카드 잔액을 알려주는 기능을 심는다 이런 아이디어를 도출할 수 있는 것이다. 상황을 구성할 때는 반드시 일반적인 것을 먼저 만든 다음 문제 상황을 설정해 다양한 레이어로 접근하는 것이 좋다. 그래야 다양한 상황에서 우리의 접근 방법이 구체화되고, 숨겨진 니즈를 파악할 수 있기 때문이다. 그전에 사람의 행동에 대한 관찰을 필요로 한다. 이 사람은 어떤 상황에서 어떤 목적으로 움직이는가? 이 생각을 가지고 주변을 관찰하면 상황을 설정하기 쉬워진다.


    Customer Journey Map

    Customer Journey Map(사용자 여정지도)은 사용자가 서비스를 시작하면서 겪는 과정을 순차적으로 나타내 사용자의 경험을 추적해 보는 방법론이다. 다른 말로 프로세스 맵(Process Map), 스토리보드(Story Board)라고도 한다. 즉, 사용자가 서비스를 이용하면서 겪는 과정을 단계적으로 시각화한 것으로 볼 수 있는데, 이 방법을 통하여 무형의 서비스를 정밀하게 분석할 수 있습니다.

    페르소나와 상황이 마주치면 감정이 발생한다.

    원자들의 우발적인 마주침이 우주를 만들었다.

    크레티우스

    사람은 외부의 상황과 끊임없이 상호작용한다. 그에 따라서 사람은 익숙하지 않은 상황에서 타자를 인식하는데, 그때 사람에게는 감정이 발생합니다. 스피노자의 에티카를 심하게 요약하면 타자를 만났을 때 좋은 감정과 싫은 감정이 발생한다는 것이다. 좋은 것은 유지하고 싫은 것은 제거해나가는 것이 스피노자의 주장이다. 이 점으로 Customer Journey Map을 보면 된다. 좋은 것은 유지하고 싫은 것은 제거하고, 그렇게 이후 시스템을 설계하면 된다.


    Scenario

    위에서 설정한 CJM에서 각 상황에서의 느끼는 감정을 분석하는 것입니다. 이 단계에서 반드시 해야할 것이 Insight를 도출하는 것입니다. Insight는 Needs, Wants, Painpoint로 분화되어 묘사할 수 있습니다.

    Scenario/Context

    • 상황에 놓인 페르소나를 서술한다.

    Point

    • 상황에 놓인 페르소나는 이런 감정을 느낄 것이다. 그것을 서술한다.

    Needs

    • 감정 혹은 분석에 기반해 페르소나의 니즈를 도출해 내는 단계이다.

    Feature/Function/Menu

    • 특징/기능/메뉴를 구분해서 도출하지 말고 니즈를 충족할 수 있는 방법을 많은 양으로 서술한 다음 특징/기능/메뉴로 나누는 것이 용이하다.

    What to Use it

    • 서비스와 인터렉션 리디자인을 위한 뼈대로서 활용
    • 서비스의 전체적인 사용자 경험에 대한 정확한 파악과 터치포인트(Touch Point)를 파악
    • 적절한 상황에 따르는 사람, 자원, 조직을 좀더 효과적인 인터페이스로 디자인
    • 서비스 생산의 한 부분으로서 계획과 트레이닝의 해결책으로 작용

    Touch Point

    터치포인트(touchpoint)는 고객이 기업과 서비스를 만나는 과정에서 거치는 물리적인 것, 인적 상호작용, 커뮤니케이션 등의 모든 것을 말한다. 터치포인트를 파악하는 것은 서비스를 제공하면서 사용할 수 있는 자원이나 만들어야 할 자원들을 이해할 수 있게 한다. 물리적 위치, 장소의 특정 구역, 광고판, 오브젝트, 웹사이트, 메일링(이메일과 우편), 대면 커뮤니케이션, 인쇄, 커뮤니케이션(영수증, 지도, 티켓 등) 애플리케이션 등이 대표적인 터치포인트라 할 수 있다.


    과정 참고

    1. 시나리오 기반 Needs, Want, Painpoint, Insight도출
    2. Persona기반의 고객 여정 맵을 통하여 Needs, Want, Painpoint, Insight도출
    3. Features -List up (Excel)
    4. Mind map을 이용하여 Features 확산
  • Bussiness Model – 9 Building Block

    Bussiness Model – 9 Building Block

    마케팅에서 사용하는 개념인데, 사실 UX 프로젝트도 사용자와 지속적인 서비스관계를 맺기 위하서는 이익이 필요하다. 보통 큰 그림을 볼 때 사용하는 모델인데, UX 프로젝트를 진행하기전에 구체화된 것으로 개념화하면 좋으니, 해도 되고 안해도 되나 하면 좋다.

    9 Building Block

    1. Customer Segment(목표 고객)

    제품 혹은 서비스로 가치를 제공하려는 대상 고객

    2. Value Proposition(핵심 지원: 목표 고객에게 전달할 가치)

    세분화된 고객에게 고유한 서비스 혹은 제품을 어떻게 평가하고 경쟁사와 차별화 지점 설명

    3. Channels(가치 전달 방법)

    고객에게 제품 혹은 서비스가 전달되는 방법(Media 개념)

    • 마음속의 평가
    • 배달, 전달
    • 판매 이후 관리

    4. Customer Relationships(고객 관계: 고객과의 관계 구축 방법 정의/모호하고 주관적이어도 괜찮음)

    세분화된 고객과 견고한 관계를 유지하기 위한 계획

    • 주된 사용자층
    • 사용자의 기억
    • 더 높은 가치의 서비스 혹은 제품을 사는 사람들/원하는 사람들

    5. Revenue Streams(수익원/1~4 번 활동을 통해 찰출되는 수익원 정의)

    고객에게서 어떻게 수익을 창출하는지에 대한 설명

    • 영업이익
    • 캐쉬카우

    6. Key Resources(핵심 자원: 핵심적인 내부자원/가치창출의 결정적인 역할을 하는 자원)

    • 비즈니스에서 사용할 수 있는 핵심 자원

    7. Key Activities(핵심자원을 바탕으로 가치 생성을 위한 활동)

    비즈니스가 성공하기 위한 필수적인 일

    • 생산
    • 문제해결
    • 플랫폼, 연합

    8. Key Partners(가치 생성과 핵심활동을 위한 외부 제휴)

    비즈니스 성공에 도움을 줄 수 있는 사람들과의 관계

    • 전략적 동맹 + 경쟁자가 아님
    • 전략적 파트너쉽 + 경쟁자
    • 새로운 시장 진출을 위한 연합
    • 구매 공급 관계

    9. Cost Structure(핵심자원, 파트너쉽 및 활동에 따른 비용 정의)

    비즈니스와 관련된 모든 비용

    • 비용 중심
    • 가치 중심

    이미지 출처

    https://en.wikipedia.org/wiki/Business_Model_Canvas#/media/File:Business_Model_Canvas.png