[세션] 데설시 2회차 - 시각적 언어 이해하기: 색상, 형태, 공간의 힘

데이터로 설득하는 시각화 기술 2회차

---

같은 데이터라도 '시각적 언어'가 다르면 의미도 달라진다.

 

같은 옷이라도 '입고 있는 사람/시간/장소/상황'이 다르면 의미가 달라진다.

같은 데이터라도 '시각적 언어'가 다르면 의미가 달라진다.

 

게슈탈트의 원리

1. 근접성의 원칙(Proximity) : 근접한 개체들은 동일한 개체로 인식된다.

 

2. 공통 영역의 원칙(common region)

 

3. 유사성의 원칙(Similarity) : 유사하게 생긴 요소들은 같은 요소로 보인다.

 

4. 관념 속 원형 원식(Closure) : 끊어지거나 불완전한 원형을 발견한 경우 관념 속의 원형을 보려 한다.

 

5. 대칭의 원칙(Symmetry) : 대칭적 요소들은 서로 통일성을 가진다.

 

6. 연속성의 원칙(Continuation) : 연속되는 요소는 하나의 흐름으로 인식된다.

 

7. 동시 이동의 원칙(Common fate) : 동시에 이동하는 요소들은 서로 동일한 패턴으로 인식된다.

---

시선의 흐름(Z / F) 만들기

- F-패턴 : 정보의 양이 많을 때

• 긴 스크롤 페이지
• 블로그
• 뉴스기사

- Z-패턴 : 이미지 정보가 많을 때

• 홈페이지
• 포트폴리오

---

시각적 위계(Visual Hierarchy) 개념

크기, 굵기, 색 대비, 위치로 읽는 순서를 설계하는 것

---

색상(COLOR): 감정과 의미의 언어

 

컬러조합

유사대비

보색대비

• 시각적으로 피로해줄 수는 있음

명도대비

• 같은 색상, 명도
• 지나치게 명도 차이가 나면 X - 흐름/시선 분산

특정 주제 색상

색상 계획

---

읽는 리듬을 만드는 폰트(FONT)

네모틀에 따라 서체를 구분

• 네모틀 O -> 바탕체, 돋움체
• 탈네모틀 X -> 가독성 떨어짐 

---

공간 배치의 원리 (Alignmnt & layout)

정렬, 균형, 리듬으로 인지적 마찰 최소화

• 열 그리드 고정, 요소 간 일관된 간격
• 컨테이너/카드로 정보를 모듈화
• 넓은 테이블은 행 강조, 고정 헤더, 정렬 아이콘으로 탐색성 확보