W4 Slide Bridge - Cognitive Display Engineering

Visual Search  |  Visual Attention  |  Auditory  |  주교재 3장: 인지적 디스플레이 설계 | 주방 정리사 스토리

용어 요약 그래프 포인팅 브릿지 멘트 교수 토스
00 오늘의 이야기

주방 정리 전문가가 처음 고객의 주방에 들어섭니다. 서랍을 열면 칼, 포크, 숟가락이 색깔과 크기별로 자동으로 눈에 묶여 보입니다. 하지만 향신료 선반은 혼란 — 비슷한 병이 20개 나란히 있어서 매번 하나씩 읽어야 합니다.

그런데 이상한 점이 있습니다. 재료를 가까이 놓으면 요리할 때는 편한데, 하나만 꺼내려 할 때는 옆 재료를 자꾸 집게 됩니다. 가까이 둘까, 멀리 둘까 — 정답은 왜 상황마다 다를까요?

지금부터 주방 정리사의 고민을 따라가며, 눈이 정보를 어떻게 묶고 분리하는지, 그리고 디스플레이를 어떻게 설계해야 하는지 알아보겠습니다.

발표 멘트

"여러분 주방 서랍을 열어본 적 있죠? 잘 정리된 서랍은 뭐가 어딨는지 바로 보이는데, 엉망인 서랍은 하나씩 뒤져야 합니다. 오늘 다룰 디스플레이 설계가 딱 이겁니다 — 정보를 어떻게 배치해야 사람 눈이 빠르고 정확하게 찾느냐의 과학입니다."

Bridge → Act 1

"먼저, 우리 눈이 주방을 열었을 때 왜 어떤 것은 바로 보이고 어떤 것은 찾아야 하는지부터 알아보겠습니다."

Act 1
눈이 주방을 읽는 법 — 전주의적 처리부터 간섭까지
게슈탈트 원리, 창발적 특징, 공간 주의, HUD 역설, 플랭커
01 전주의적 처리와 게슈탈트 원리
교재 원본 FIGURE 3.3 — 구조화 vs 비구조화 디스플레이
용어 사전
  • 전주의적 처리 (Preattentive) = 의식적 노력 없이 자동으로 일어나는 시각 처리. 서랍을 여는 순간 색·크기·형태가 자동 그루핑됨.
  • Phase 1 (특징 등록) = 개별 특징(색, 방향, 크기)을 병렬로 자동 감지. 빨간 칼이 눈에 '팝'하고 들어오는 단계.
  • Phase 2 (특징 결합) = 여러 특징을 하나로 묶어 '이것은 칼이다'라고 인식. 초점적 주의가 필요해서 느림.
  • 게슈탈트 원리 = 뇌가 자동으로 요소를 그룹핑하는 법칙. 근접성(가까운 것끼리), 유사성(비슷한 것끼리), 연결성(이어진 것끼리).
정리된 서랍 = 게슈탈트 원리 활용 → 한눈에 그루핑 | 뒤죽박죽 서랍 = 하나씩 확인 (Phase 2)
그래프 읽기

슬라이드 좌측: Phase 1(자동 감지) → 특징 등록. 우측: Phase 2(의식적 결합) → 초점적 주의 필요. 교재 Fig 3.3: (a) 구조화 배치 — 같은 종류끼리 모여있어서 한눈에 파악. (b) 비구조화 배치 — 같은 게이지인데 흩어져 있어서 하나씩 읽어야 함.

포인팅 가이드

왼쪽 Phase 1 아이콘(색상, 크기, 방향) 가리키며 → "이 세 가지는 노력 없이 자동으로 처리됩니다." 오른쪽 Phase 2 → "여기부터는 주의가 필요합니다." 아래 게슈탈트 원리 → "뇌가 자동으로 묶는 법칙이 이것입니다."

발표 멘트

"주방 서랍을 열면, 빨간 칼은 바로 눈에 들어오고 비슷한 수저끼리 묶여 보입니다. 이게 Phase 1 — 전주의적 처리입니다. 의식적 노력 없이 자동으로 일어나요. 하지만 '이 칼이 과도인지 식칼인지'를 판단하려면 초점적 주의가 필요합니다 — Phase 2. 게슈탈트 원리란, 뇌가 자동으로 가까운 것, 비슷한 것, 이어진 것끼리 묶는 본능입니다. 잘 정리된 서랍이 편한 이유가 바로 이 원리를 활용하기 때문입니다."

Bridge → 02

게슈탈트로 그루핑하면, 개별 요소 말고 '전체 형태'가 새로운 정보를 줄 수 있지 않을까?

02 창발적 특징
교재 원본 FIGURE 3.4 — 항공기 엔진 다이얼의 정렬
용어 사전
  • 창발적 특징 (Emergent Feature) = 개별 요소에는 없던 새로운 특성이 '전체 배치'에서 튀어나옴. 칼꽂이에 칼이 가지런하면 = 정상, 하나 삐뚤면 = 이상. '삐뚤어짐' 자체가 창발적 특징.
  • Check Reading = 여러 게이지를 한 번에 '정상/비정상' 판단. 12시 정렬하면 오류가 4배 감소.
칼꽂이에 칼이 다 가지런하면 "정상" — 하나 삐뚤면 바로 눈에 띔. 이게 창발적 특징
그래프 읽기

교재 Fig 3.4: (a) 포인터가 제각각 → 하나씩 읽어야 정상 판단 가능. (b) 12시 정렬 → 수직선의 '일직선 패턴'이 창발적 특징. 하나라도 벗어나면 한눈에 감지. 아래 화살표: 각 다이얼이 항공기 엔진과 매핑됨.

포인팅 가이드

슬라이드 왼쪽 시계 다이얼(12시 정렬) → "이렇게 정렬하면 '일직선'이라는 새로운 패턴이 보입니다." 오른쪽 비교 수치 → "오류가 4배 감소합니다."

발표 멘트

"주방 칼꽂이를 생각해보세요. 칼이 다 같은 각도로 꽂혀있으면, 하나가 삐뚤어졌을 때 바로 느낌이 옵니다. 칼을 하나하나 살펴보지 않아도 '뭔가 이상하다'는 걸 알 수 있어요. 이게 창발적 특징입니다 — 개별 요소에는 없던 정보가 전체 배치에서 튀어나오는 것. 항공기 엔진 다이얼도 12시 방향으로 정렬하면, 수직선이라는 새 패턴이 생기고, 오류가 4배 줄어듭니다."

Bridge → 03

이 정보를 화면 하나에 모아두면 편할텐데, 현실 세계 위에 겹쳐 보여줄 수 있지 않을까? — HUD가 그 시도.

03 공간 기반 주의와 HUD
용어 사전
  • HUD (Head-Up Display) = 고개를 숙이지 않고 전방을 보면서 정보를 보는 투명 디스플레이. 투명 유리 수납장처럼 안과 밖을 동시에 봄.
  • Spotlight (주의 스포트라이트) = 초점적 주의가 비추는 범위. 스포트라이트 안에 있으면 빠르게 처리, 밖이면 느림.
  • FFOV (Functional FOV) = 유효 시야. 과제 난이도가 올라가면 좁아짐.
투명 유리 수납장 = HUD. 밖 풍경(현실)을 보면서 안 물건(정보)도 동시에 보는 원리
포인팅 가이드

왼쪽 HUD 다이어그램 → "스포트라이트가 전방에 머물면서 계기 정보도 같이 봅니다." 오른쪽 FFOV 설명 → "과제가 어려워지면 이 스포트라이트가 좁아집니다."

발표 멘트

"주방의 투명 유리 수납장을 생각해보세요. 유리를 통해 안에 뭐가 있는지 보면서, 동시에 유리에 비친 주방 전체도 볼 수 있습니다. HUD가 바로 이 원리예요 — 조종사가 고개를 숙이지 않고 전방을 보면서 계기 정보도 같이 보는 것. 하지만 주의 스포트라이트가 좁아지면 전방과 정보를 동시에 처리하기 어려워집니다."

Bridge → 04

그런데 이 투명 유리에 너무 많은 것을 붙이면 어떻게 될까? 오히려 밖이 안 보이지 않을까?

04 근접성의 역설
용어 사전
  • Inattentional Blindness (무주의 맹시) = HUD 정보에 집중하느라 바깥 세계의 중요한 것을 못 봄. 유리 수납장 속 물건에 집중하다 뒤의 불을 못 보는 것.
  • Readout Clutter (계기 혼잡) = HUD에 정보가 너무 많으면 배경이 안 보임. 투명 유리에 메모지를 잔뜩 붙이면 밖이 안 보이는 것.
  • 기대 편향 (Expectancy) = HUD 정보가 예상과 다를 때 반응이 늦어짐. 수납장에 항상 있던 물건이 없으면 혼란.
유리 수납장에 메모지를 잔뜩 붙이면 안도 밖도 안 보임 — HUD의 근접성 역설
포인팅 가이드

중앙 3개 문제(무주의 맹시, 계기 혼잡, 기대 편향) 각각 가리키며 → "HUD가 '가까이 두기'의 장점을 활용하지만, 바로 이 세 가지 역설이 생깁니다."

발표 멘트

"투명 유리 수납장이 좋다고 해서 유리에 메모지를 잔뜩 붙이면 어떻게 될까요? 안에 뭐가 있는지도 안 보이고, 밖 풍경도 안 보입니다. HUD도 똑같아요. 정보를 눈앞에 띄워주니까 시선 이동이 줄지만, 정보가 많아지면 오히려 뒤의 활주로가 안 보이고, HUD 정보에만 빠져서 비행기가 다가오는 걸 놓칩니다. 이게 근접성의 역설입니다."

Bridge → 05

그러면 가까이 있는 정보끼리 구체적으로 어떻게 간섭하는 걸까? — 플랭커 패러다임이 이걸 실험적으로 보여줌.

05 플랭커 패러다임
용어 사전
  • Flanker (플랭커) = 타겟 옆에 놓인 방해 자극. 향신료 선반에서 꺼내려는 병 옆에 비슷한 병.
  • NRS (반응 충돌) = 타겟과 플랭커가 다른 반응을 유도할 때 생기는 지연. "후추" 옆에 "고춧가루"가 있으면 잘못 집음.
  • RRR (중복 이득) = 타겟과 플랭커가 같은 반응을 유도할 때 오히려 빨라짐. 같은 향신료가 여러 개면 빨리 찾음.
비슷한 향신료 나란히 → 잘못 집는 간섭(NRS) vs 같은 종류 여러개 → 빨리 찾는 이득(RRR)
그래프 읽기

슬라이드 중앙 그래프: X축 = 정보 간 거리(가까움↔멀음). NRS(빨강) 하향 — 가까울수록 간섭 크고, 멀어지면 해소. RRR(파랑) 상향 — 가까울수록 이득 크고, 멀어지면 이득 감소. 두 선이 교차하는 지점이 트레이드오프의 핵심.

포인팅 가이드

왼쪽 NRS 예시(다른 글자가 간섭) → "후추 옆에 고춧가루 — 간섭." 오른쪽 RRR 예시(같은 글자) → "같은 향신료가 여러 개 — 이득." 중앙 그래프 교차점 → "여기가 설계자의 딜레마입니다."

발표 멘트

"향신료 선반에서 후추를 꺼내려는데, 바로 옆에 비슷하게 생긴 고춧가루가 있으면 손이 멈칫합니다 — 이게 반응 충돌, NRS. 반면 후추가 2개 나란히 있으면 아무거나 집으면 되니까 오히려 빨라요 — 이게 중복 이득, RRR. 이 두 가지는 동전의 양면이에요. 가까이 두면 간섭도 늘고 이득도 늘어요. 설계자는 이 트레이드오프를 어떻게 잡느냐가 관건입니다."

교수 토스

NRS/RRR 수학적 모델과 Eriksen의 원 실험 설계에 대해 교수님께서 보충해주실 수 있습니다.

Bridge → Act 2

가까이/멀리의 2D 배치에는 한계가 있다. 만약 '깊이' 차원을 추가하면 — 선반을 위아래 층으로 나누면?

Act 2
물건을 묶는 기술 — 객체 형성과 통합 디스플레이
3D 분리, 스트룹, 객체 파일, 등각 심볼, 폴리곤, 형태-의미 결합
06 입체 깊이(3D Stereopsis)를 통한 주의 분리
용어 사전
  • Stereopsis (입체시) = 양쪽 눈의 시차로 깊이를 인식. 3D 영화가 이 원리 활용.
  • Z축 확장 = 2D 평면(X-Y)에 깊이(Z)를 추가. 선반의 위층/아래층처럼 물리적으로 떨어뜨려 간섭 차단.
  • Filtering (필터링) = 초점을 맞춘 깊이 레이어만 선명하게 보고 나머지는 흐리게 처리.
선반 위층 = 자주 쓰는 것(공중 타겟), 아래층 = 가끔 쓰는 것(지상 물체). 층이 다르면 간섭 없음
그래프 읽기

왼쪽: X-Y 평면에 점들이 겹침(초점적 주의 간섭 발생). 가운데: Z축으로 투영해서 분리. 오른쪽: 항공 관제 레이더 — 공중 타겟과 지상 물체가 깊이별 층에 배치. 핵심: 2D에서 겹치던 점들이 3D에서는 물리적으로 분리.

포인팅 가이드

왼쪽 X-Y 겹침 → "2D에서는 이렇게 뒤섞입니다." 가운데 Z축 확장 → "층을 나누면 분리됩니다." 오른쪽 항공 관제 예시 → "실제로 이렇게 씁니다."

발표 멘트

"주방 선반을 상상해보세요. 모든 식기와 양념을 한 선반에 놓으면 뒤섞이죠. 위층은 매일 쓰는 것, 아래층은 가끔 쓰는 것으로 나누면, 눈이 필요한 층에만 초점을 맞추면 됩니다. 항공 관제 레이더도 같은 원리예요 — 공중 비행기와 지상 물체를 다른 깊이 층에 배치해서 간섭을 없앱니다. 이게 Z축 확장입니다."

Bridge → 07

깊이와 공간으로 분리하는 건 알겠다. 그런데 같은 위치에 있는 것들끼리도 '하나의 물건'으로 묶이면 다르게 처리될까?

07 객체 기반 주의와 스트룹(Stroop) 효과
용어 사전
  • 스트룹 효과 (Stroop Effect) = 글자의 의미와 잉크 색이 충돌할 때 생기는 간섭. '빨간 잉크로 쓴 BLUE' → 색 말하기가 느려짐.
  • 객체 기반 주의 = 공간이 아닌 '사물 단위'로 주의가 작동. 같은 물건에 속한 속성들은 동시에 처리됨.
  • Same Object (동일 객체) = 글자와 잉크 색이 하나의 단어에 속함 → 주의가 분리 못 함 → 간섭 극대화.
"소금" 라벨 붙은 설탕통 = 스트룹 효과. 라벨(의미)과 내용물(실제)이 한 용기(같은 객체)에 있으면 무시 불가
포인팅 가이드

왼쪽 통제 조건(XXXX) → "이건 충돌 없음." 오른쪽 갈등 조건(빨간 BLUE) → "의미와 색이 같은 객체 안에서 충돌." 아래 핵심 통찰 3줄 → "같은 객체에 속하면 주의적 분리가 불가능합니다."

발표 멘트

"주방에서 용기에 '소금'이라고 적어놨는데 안에 설탕이 들어있다고 상상해보세요. '소금'이라는 글자를 무시하고 내용물만 보려 해도 자동으로 '소금'을 읽어버립니다. 이게 스트룹 효과예요. 핵심은 — 글자와 색이 '같은 물건'에 속해 있으면, 뇌가 하나만 처리하고 다른 하나를 무시하는 게 불가능하다는 겁니다. 공간이 아니라 '객체' 단위로 주의가 작동하기 때문입니다."

Bridge → 08

같은 객체면 동시 처리(간섭도 동시) — 그러면 반대로, 같은 객체면 '좋은 정보'도 동시 처리 가능한 거 아닌가?

08 객체 파일 이론(Object File Theory)의 이점
교재 원본 FIGURE 3.6 — Duncan(1984) 실험 자극
용어 사전
  • Object File (객체 파일) = 뇌가 '하나의 사물'에 대해 여는 임시 정보 폴더. 세트 식기 한 벌 = 하나의 객체 파일.
  • 병렬 처리 (Parallel) = 같은 객체 안의 속성들은 동시에 처리 가능. 한 접시의 크기+색+모양을 한 번에 파악.
  • 순차 처리 (Serial) = 다른 객체 간의 속성 비교는 하나씩. 다른 접시와 비교하려면 시선 이동 필요.
세트 식기(한 객체) = 한 번에 파악(병렬) | 따로따로 식기(다른 객체) = 하나씩 확인(순차)
그래프 읽기

슬라이드: Duncan의 자극 — 상자 크기+틈 위치 = 같은 객체(하나의 형태 안) → 병렬 처리 성공. 상자 크기+선 기울기 = 다른 객체(두 형태 간) → 순차 처리 한계. 교재 Fig 3.6: 실제 실험 자극. 큰/작은 상자 안에 실선/점선이 있는 두 객체.

포인팅 가이드

오른쪽 위 '동일 객체 속성 판단(파랑)' → "하나의 접시에서 크기와 모양을 동시에 봅니다." 아래 '다른 객체 속성 판단(빨강)' → "다른 접시와 비교하려면 시선을 옮겨야 합니다."

발표 멘트

"세트 식기 — 같은 디자인의 접시, 컵, 그릇 한 벌을 생각해보세요. 이 한 벌을 보면 크기, 색, 모양을 한눈에 파악합니다. 뇌가 '하나의 세트'로 묶었기 때문이에요. 하지만 다른 세트의 접시와 비교하려면? 시선을 옮겨서 하나씩 확인해야 합니다. Duncan의 1984년 실험이 이걸 증명했어요 — 같은 객체 안의 속성은 병렬로, 다른 객체 간 속성은 순차적으로 처리합니다."

교수 토스

Kahneman & Treisman의 객체 파일 이론의 신경과학적 기반에 대해 교수님께서 보충해주실 수 있습니다.

Bridge → 09

그러면 정보를 '하나의 객체'로 만들어주면 항상 유리한 거네? 어떻게 만들까?

09 등각 심볼(Conformal Symbology)과 증강 현실
용어 사전
  • Conformal Symbology (등각 심볼) = 가상 그래픽이 현실 세계 위에 정확히 겹쳐져 '하나의 객체'가 됨. 벽 페그보드의 도구 윤곽선처럼, 도구가 딱 맞으면 하나로 보임.
  • Connectedness (윤곽선 연결성) = 객체 형성의 핵심. 선이 이어지면 하나.
  • Rigidity (강직성) = 함께 움직이면 하나의 객체로 인식.
  • Common Fate (공동 운명) = 같이 움직이는 것끼리 묶임. AR 그래픽이 실제 도로와 함께 움직이면 하나로 인식.
벽 페그보드에 도구 윤곽선 = 등각 심볼. 도구가 윤곽에 딱 맞으면 하나의 객체로 처리
포인팅 가이드

왼쪽 객체 형성 3요소(연결성, 강직성, 친숙함) → "이 세 가지가 충족되면 뇌가 '하나'로 봅니다." 오른쪽 AR 활주로 이미지 → "실제 도로와 가상 선이 함께 움직이면 공동 운명 → 하나의 객체."

발표 멘트

"공구 정리용 벽 페그보드를 본 적 있으세요? 벽에 각 도구의 윤곽선이 그려져 있어서, 도구를 걸면 윤곽과 딱 맞고 빈 자리가 바로 보입니다. 이게 등각 심볼의 원리예요 — 가상의 그래픽(윤곽선)이 실제 사물(도구)과 완벽히 겹치면 뇌가 하나의 객체로 처리합니다. AR 내비게이션이 실제 도로 위에 화살표를 그리는 것도 같은 원리예요. 함께 움직이니까 하나로 묶이는 겁니다."

Bridge → 10

객체 하나에 여러 정보를 담을 수 있다면, 아예 여러 변수를 하나의 도형에 통합한 디스플레이를 만들면?

10 다차원 객체 디스플레이 1: 원자로 폴리곤
용어 사전
  • 폴리곤 디스플레이 (Polygon Display) = 여러 변수를 하나의 다각형 꼭짓점으로 매핑. 스마트 냉장고 패널에 온도·습도·전력을 하나의 도형으로 보여주는 것.
  • 창발적 특징 활용 = 대칭 정팔각형 = 정상, 비대칭 왜곡 = 이상. 도형의 '모양 자체'가 상태를 알려줌.
스마트 냉장고 패널: 도형이 정팔각형이면 모든 센서 정상, 찌그러지면 어딘가 이상
그래프 읽기

왼쪽(파란): 대칭 정팔각형 = 8개 변수 모두 정상. 오른쪽(빨간): 비대칭 왜곡 = 특정 변수 이상. 핵심: 숫자를 하나씩 읽을 필요 없이 도형의 전체 '형태'만 보면 이상 감지 가능.

포인팅 가이드

왼쪽 대칭 정팔각형(파랑) → "이 모양이 정상입니다." 오른쪽 왜곡(빨강) → "찌그러지면 뭔가 이상. 숫자를 읽기도 전에 '느낌'으로 알 수 있어요."

발표 멘트

"스마트 냉장고를 상상해보세요. 온도, 습도, 전력 소모, 필터 상태를 각각 숫자로 보여주면 하나씩 읽어야 합니다. 하지만 이걸 하나의 다각형으로 만들면? 모양이 정팔각형이면 '다 정상', 한쪽이 찌그러져 있으면 '그쪽이 이상'. 숫자를 하나도 안 읽고도 전체 상태를 파악할 수 있어요. 이게 폴리곤 디스플레이입니다."

Bridge → 11

폴리곤은 '형태로 상태를 보여준다'는 아이디어. 더 나아가서, 도형의 형태 자체에 물리적 의미를 담을 수 있을까?

11 다차원 객체 디스플레이 2: 형태와 의미의 결합
용어 사전
  • Oxygen Rectangle (호흡 사각형) = 산소 총량(속도×깊이)을 사각형 면적(가로×세로)으로 매핑. 투명 용기의 물 높이×너비 = 남은 양.
  • Cardiovascular Graphic = 심장 모양 자체가 심박출량을 나타냄. 찌그러진 심장 = 문제 있음.
  • Text Integration Map = 도로 위치에 이름을 직접 쓴 지도. 공간적 근접성의 극한.
투명 용기에 물이 차 있는 높이 = 남은 양, 용기 크기 = 전체 용량. 형태가 곧 의미.
포인팅 가이드

왼쪽 호흡 사각형 → "가로=속도, 세로=깊이, 면적=총량. 수학 공식이 시각적 면적이 됩니다." 가운데 심장 그래픽 → "형태 자체가 의미를 담고 있어요." 오른쪽 텍스트 지도 → "도로 위에 직접 이름을 써서 시선 이동 제로."

발표 멘트

"투명 용기에 담긴 물을 상상해보세요. 물이 반쯤 차 있으면 '반 남았구나'를 숫자 없이도 압니다. 넓은 용기면 전체 용량이 많다는 것도 '크기'로 압니다. 이게 형태와 의미의 결합이에요. 산소 사각형은 가로가 호흡 속도, 세로가 깊이 — 면적이 곧 총 산소량입니다. 숫자를 곱하는 대신 사각형의 넓이를 직관적으로 봅니다. 심장 그래픽은 심장의 '찌그러짐' 자체가 문제를 알려줍니다."

Bridge → Act 3

여기까지 '묶는 기술'을 배웠다. 근데 항상 묶는 게 좋을까? 가끔은 분리해야 하지 않나?

Act 3
작업에 맞는 배치법 — 근접성 호환성 원리(PCP)
PCP 대통합 이론, 감각/색상 근접성, 연결선/맞닿음, 이질적 vs 동질적
12 근접성 호환성 원리 (PCP)
교재 원본 FIGURE 3.10 — PCP 도해
용어 사전
  • PCP (Proximity Compatibility Principle) = 디스플레이 근접성과 작업 근접성이 일치해야 한다는 대통합 원리. 요리할 때(통합 작업) = 재료를 한곳에. 정리할 때(초점 작업) = 종류별 분산.
  • 정보 통합 과제 = 여러 정보를 합쳐서 판단. 디스플레이가 가까울수록 좋음.
  • 초점적 주의 과제 = 하나만 골라서 판단. 디스플레이가 가까우면 간섭.
요리할 때 = 재료 한곳에(통합) | 정리할 때 = 종류별 분산(초점). 작업이 답을 정한다
그래프 읽기

X축 = 디스플레이 근접성(멀리↔가까이). Y축 = 성과. 파란 점선(정보 통합) = 가까울수록 우상향 — 통합 과제에는 가까운 게 유리. 빨간 실선(초점적 주의) = 가까울수록 우하향 — 초점 과제에는 가까우면 간섭. 두 선이 교차하는 X자가 PCP의 핵심.

포인팅 가이드

그래프 X자 교차점 가리키며 → "여기가 핵심입니다. 통합 과제(파랑)와 초점 과제(빨강)의 최적 근접성이 정반대!" 오른쪽 설계 지침 3개 → "듀얼 태스크에는 적용 안 됩니다."

발표 멘트

"주방 정리의 핵심 딜레마를 이제 해결합니다. 요리할 때는 재료가 한곳에 모여있어야 편해요 — 이게 정보 통합 과제. 하지만 정리할 때는 소금만 꺼내야 하니까, 옆에 설탕이 있으면 간섭돼요 — 이게 초점적 주의 과제. PCP가 말하는 건, '가까이 둘지 말지'의 정답은 없다는 겁니다. 작업이 뭐냐에 따라 답이 달라져요. 이 그래프의 X자가 디스플레이 설계의 대통합 원리입니다."

교수 토스

PCP와 듀얼 태스크(이중 과제 처리)의 관계, 그리고 Wickens의 다중 자원 이론과의 연결에 대해 교수님께서 보충해주실 수 있습니다.

Bridge → 13

PCP 원리는 알겠다. 그러면 디스플레이를 '가깝게' 만드는 구체적 기법은?

13 PCP 구현 기법 1: 감각 및 지각적 근접성 조작
용어 사전
  • Spatial Contiguity (공간적 인접성) = 관련 정보를 물리적으로 가까이 배치. 레시피 카드를 재료 옆에 놓기.
  • Proximity in Color (색상 근접성) = 같은 색을 쓰면 뇌가 자동으로 그룹으로 인식. 같은 색 용기끼리 묶어 보임.
  • Co-location (공동 배치) = 텍스트와 그림을 같은 위치에. 시선 이동 최소화.
레시피 카드를 재료 옆에(공간 인접) + 같은 색 용기로 그룹핑(색상 근접) = 뇌가 자동 통합
그래프 읽기

왼쪽(공간적 인접성): 매뉴얼에서 텍스트와 그림이 가까이 → 시선 이동 감소 → 경고 준수율 상승. 오른쪽(색상 근접성): 항공 레이더에서 같은 빨강 = 잠재적 충돌 항적. 색만으로 위험 그룹을 즉각 인식.

포인팅 가이드

왼쪽 교재 그림(Co-location, Minimal Eye Movement) → "글과 그림이 가까우면 눈이 덜 움직입니다." 오른쪽 레이더 화면(빨간 충돌 경로) → "색이 같으면 뇌가 자동으로 묶습니다."

발표 멘트

"요리할 때 레시피 카드를 냉장고 문에 붙여놓고 재료는 조리대에 놓으면, 계속 고개를 돌려야 하죠? 레시피를 재료 바로 옆에 놓으면 시선 이동이 줄어듭니다 — 이게 공간적 인접성. 또 하나, 같은 색 용기끼리는 뇌가 자동으로 '한 그룹'으로 봅니다. 항공 레이더에서 충돌 위험 항적을 빨간색으로 표시하면, 수십 개 점 중에서도 빨간색만 바로 묶여 보여요. 이게 색상 근접성입니다."

Bridge → 14

공간과 색상은 '이미 가까이 있는 것'을 묶는 기법이다. 물리적으로 떨어진 것을 강제로 묶는 방법은?

14 PCP 구현 기법 2: 공통 객체 결합(선과 맞닿음)
용어 사전
  • Connections (연결선) = 선으로 두 객체를 이어서 뇌가 하나로 인식하게 함. 자석 칼걸이 — 개별 칼들이 하나의 바에 연결.
  • Abutment (맞닿음) = 객체 윤곽선이 밀착해서 개별 인식과 통합을 동시에 달성. 서랍 칸막이.
  • Vernier Acuity (부니어 시력) = 두 선이 일직선인지 미세하게 어긋났는지 감지하는 능력. 막대 상단이 일직선에서 벗어나면 즉시 발견.
  • Co-linearity (동일선상성) = 막대 상단이 일직선을 이루면 '정상', 어긋나면 '이상'.
자석 칼걸이(연결) = 떨어진 칼들을 하나로 묶기 | 서랍 칸막이(맞닿음) = 개별 인식 + 통합 동시
그래프 읽기

위쪽: 연결선 — 점선/파선으로 두 화면의 정보를 이어서 '하나의 흐름'으로 인지. 아래쪽: 맞닿음 — 막대그래프 상단이 일직선이면 정상. 한 막대가 낮으면(단절) 부니어 시력이 즉시 감지. 수직선 예시(!) = 경고 신호.

포인팅 가이드

위쪽 연결선(두 화면 사이 점선) → "이 점선 하나로 뇌가 두 화면을 하나로 봅니다." 아래쪽 막대그래프(상단 일직선) → "상단이 일직선이면 정상. 하나가 낮으면 바로 눈에 띕니다."

발표 멘트

"자석 칼걸이를 떠올려보세요. 칼 5개가 각각 따로 있지만, 자석 바에 붙어있으니 '한 세트'로 보입니다. 연결선이 이 역할을 합니다 — 물리적으로 떨어진 정보를 선 하나로 묶어서 뇌가 하나로 인식하게 만드는 거예요. 맞닿음은 서랍 칸막이입니다. 칼, 포크, 숟가락이 칸막이로 분리되어 있지만, 윤곽이 딱 붙어있어서 전체 서랍도 한눈에 봅니다. 이 막대그래프에서 상단이 일직선이면 '정상', 하나가 내려앉으면 인간의 부니어 시력이 즉시 감지합니다."

Bridge → 15

지금까지 다양한 기법으로 정보를 묶는 법을 배웠다. 마지막 선택 — 묶을 때 같은 종류로 묶을까, 다른 종류로 묶을까?

15 최종 설계 결정: 이질적 특징 vs 동질적 특징
용어 사전
  • 이질적 특징 (Heterogeneous) = 색상·형태·크기 등 다른 종류의 시각 채널 사용. 정지 표지판 = 빨강(색) + 팔각형(형태) + STOP(텍스트). 개별 분석기가 병렬로 처리 → 불리언 판단에 최적.
  • 동질적 특징 (Homogeneous) = 같은 시각 채널(예: 길이) 사용. 사각형 면적 = 가로 길이 × 세로 길이. 단일 분석기가 처리 → 산술 연산에 최적.
  • Redundancy Gain (중복 이득) = 이질적 특징을 사용하면, 색으로도 형태로도 감지 가능 → 이중 보험.
다양한 모양 용기(한눈에 구분 = 불리언) vs 같은 크기 용기(비교 용이 = 산술). 작업 유형이 답을 정한다
그래프 읽기

왼쪽(이질적): 정지 표지판 — 빨강+팔각형+STOP. 3개의 다른 채널로 "A이고 B인가?" 판단. 오른쪽(동질적): 사각형 — 가로·세로가 같은 시각 화폐(길이). "A×B는?" 연산에 최적. 핵심: 작업이 불리언(있다/없다)이면 이질적, 산술(비교/곱셈)이면 동질적.

포인팅 가이드

왼쪽 STOP 표지판(빨강, 팔각형, 텍스트) → "3개 채널이 동시에 '멈춰!'를 외칩니다." 오른쪽 사각형(가로×세로) → "같은 단위(길이)라서 곱셈을 면적으로 볼 수 있어요."

발표 멘트

"마지막 설계 선택입니다. 주방 용기를 전부 다른 모양으로 만들면 — 빨간 네모는 양념, 파란 원통은 곡물 — 한눈에 '이건 뭐지?'를 판단합니다. 불리언 판단이죠. 반면 전부 같은 투명 네모 용기로 만들면 — 높이의 차이로 '어디가 더 많은지'를 비교합니다. 산술 연산이죠. 디스플레이도 마찬가지예요. 작업이 '있다/없다' 판단이면 색·형태·크기를 다르게(이질적), '얼마나 더/덜' 비교면 같은 단위로(동질적) 설계합니다."

교수 토스

Carswell & Wickens(1996)의 실험 결과와 Treisman의 특징 통합 이론과의 관계에 대해 교수님께서 보충해주실 수 있습니다.

END What I Learned

처음에 주방 정리사가 '가까이 둘까, 멀리 둘까'의 딜레마에 빠졌었습니다. 요리할 때는 가까이, 정리할 때는 멀리 — 왜 상황마다 답이 다를까? 이제 답할 수 있습니다.

  • Act 1: 눈은 색·크기·형태를 자동으로 그루핑합니다(게슈탈트). 전체 배치에서 새 정보가 튀어나오고(창발적 특징), 가까이 두면 간섭도 늘지만 이득도 늘어납니다(플랭커 트레이드오프).
  • Act 2: 정보를 '하나의 객체'로 묶으면 병렬 처리가 가능합니다. 깊이 분리(3D), 등각 심볼(AR), 폴리곤 디스플레이, 형태-의미 결합이 모두 이 원리를 활용합니다.
  • Act 3: 하지만 항상 묶는 게 정답은 아닙니다. PCP가 답을 줍니다 — 통합 과제에는 가까이, 초점 과제에는 멀리. 공간, 색상, 연결선, 특징 유형으로 근접성을 조절합니다.

결국 좋은 주방(디스플레이)은 '정답 배치'가 아니라 '작업에 맞는 배치'입니다.

발표 멘트

"처음에 주방 정리의 딜레마 — 가까이 둘까, 멀리 둘까 — 를 물었습니다. Act 1에서는 눈이 자동으로 정보를 그루핑하지만 가까우면 간섭도 생긴다는 것, Act 2에서는 '하나의 객체'로 묶으면 강력한 병렬 처리가 가능하다는 것, Act 3에서는 정답은 '작업이 뭐냐'에 달려있다는 PCP 원리를 배웠습니다. 완벽한 배치는 없습니다. 요리할 때의 주방과 정리할 때의 주방이 다르듯이, 통합 과제와 초점 과제의 최적 디스플레이가 다릅니다."