■ 8월 12일 - 1일차
■ 8월 18일 - 4일차
■ 웹디자인 시각적 요소
● 웹디자인 이란?
◎ 웹디자인
웹디자인은 웹사이트의 구조와 시각적 언어를 만들어 사용자 경험을 최적화하는 창의적인 작업
이 과정에서 디자이너는 시각적 요소뿐만 아니라 정보의 구조와 인터랙션 디자인까지
고려하여 사용자가 웹사이트를 효율적으로 탐색하고 원하는 정보를 쉽게 찾을 수 있도록 설계하는 과정
◎ 웹디자인 핵심요소
- 레이아웃(Layout): 페이지의 구조를 결정하며,
사용자의 눈길을 가장 중요한 정보에 끌어들이도록 도와줌.
적절한 레이아웃은 정보의 흐름을 자연스럽게 만들고,
사용자가 원하는 내용을 빠르게 찾을 수 있게 한다.
- 컬러(Color): 색상은 브랜드 이미지를 전달하고, 감정을 자극하는 중요한 수단
색상의 선택은 웹사이트의 톤과 분위기를 설정하며,
정보의 중요도를 구분 짓는 데에도 사용됩니다.
- 타이포그래피(Typography): 글꼴의 선택과 배치는
읽기 쉽고 이해하기 쉬운 텍스트를 만드는 데 중요
좋은 타이포그래피는 텍스트의 가독성을 높이고,
전체적인 페이지의 조화를 이루는 데 기여합니다.
- 이미지 및 아이콘(Image & Icons): 시각적 표현을 통해 커뮤니케이션을 강화하고,
복잡한 정보를 간단하게 전달할 수 있습니다.
이미지와 아이콘은 웹사이트에 생동감을 불어넣고, 사용자의 관심을 끌어들입니다
- 인터랙티비티(Interactivity): 사용자가 웹사이트와 상호작용하는 방식을 설계
버튼, 링크, 폼 필드 등이 사용자의 행동을 유도하고,
웹사이트와의 상호작용을 원활하게 만듭니다.
◎ 웹디자인의 목적
- 접근성(Accessibility): 모든 사용자가 정보를 쉽게 접근하고
이해할 수 있도록 만드는 것이 중요합니다.
이는 장애가 있는 사용자를 포함한 모든 사람이
웹사이트를 효과적으로 사용할 수 있도록 보장합니다.
- 일관성(Consistency): 디자인의 일관성은
사용자가 새로운 페이지나 섹션으로 이동할 때마다 느끼는 혼란을 줄이고,
브랜드의 신뢰성을 구축하는 데 도움을 줍니다.
- 반응성(Responsiveness): 웹사이트는 다양한 디바이스와 화면 크기에서 효과적으로 작동해야함.
이를 위해 반응형 디자인을 적용하여 모든 사용자가 어떤 환경에서도
동일한 사용 경험을 할 수 있도록 해야 합니다.
● UI UX 차이
◎ UI (User Interface) 디자인
UI, 즉 사용자 인터페이스 디자인은 사용자와 직접적으로 상호작용하는 요소들의
시각적 디자인에 중점을 둡니다.
이는 버튼, 아이콘, 스페이싱, 타이포그래피, 색상 구성 등
웹사이트나 애플리케이션의 '외관'을 구성하는 모든 요소를 포함합니다.
UI 디자인의 주요 목표는 사용자가 제품을 쉽게 조작하고, 이해할 수 있도록 만드는 것입니다.
- 원칙 예
명확한 정보 전달 → 텍스트, 버튼, 아이콘을 직관적으로 배치
시각적 일관성 유지 → 컬러 팔레트, 폰트 스타일, 아이콘 디자인 통일
가독성 높은 폰트 & 대비 높은 색상 조합
사용자가 원하는 행동을 쉽게 수행할 수 있도록 UI 구성
◎ UX(User Experience) 디자인
UX, 즉 사용자 경험 디자인은 사용자가 제품이나 서비스를 사용하는 과정 전체에 걸쳐
경험하는 체험의 질에 초점을 맞춥니다.
이는 사용자의 요구를 파악하고, 그에 맞는 해결책을 제공하는 과정을 포함하며,
사용자의 만족도를 최대화하는 것을 목표로 합니다.
UX 디자인은 사용자 조사, 프로토타이핑, 사용성 테스트, 사용자 행동 분석 등을 포함하여
사용자의 요구와 문제를 이해하고 이에 대응합니다.
- 원칙 예
사용자의 행동 패턴을 고려한 내비게이션 설계
페이지 로딩 속도를 최적화하여 빠른 반응 제공
모든 기기에서 반응형 디자인(Responsive Design) 적용
CTA(Call To Action) 버튼을 눈에 잘 띄는 위치에 배치
◎ UI와 UX의 상호관계
UI와 UX는 밀접하게 연관되어 있으며, 서로 보완적인 관계에 있습니다.
훌륭한 UI는 사용자가 보다 직관적으로 제품을 사용할 수 있도록 돕지만,
우수한 UX는 사용자가 제품을 사용하면서 겪는 전반적인 경험을 향상시킵니다.
사용자 인터페이스가 아무리 매력적이라도, 사용자 경험이 좋지 않다면 사용자의 만족도는 낮을 것입니다.
반대로, 사용자 경험이 우수하다면, 사소한 UI의 결함도 덜 눈에 띄게 됩니다.
결국, UI는 '제품의 얼굴'로서 사용자와의 첫 인상을 결정하고,
UX는 '제품과의 관계'를 형성하여 사용자가 장기간에 걸쳐 제품을 계속 사용하게 만드는 결정적인 요소입니다.
● 좋은 디자인과 나쁜 디자인
웹디자인이 단순한 미적 요소가 아니라 사용자 경험(UX)에 영향을 미치는 요소라는 점을 이해해야 함.
좋은 웹디자인은 사용자가 웹사이트를 쉽게 탐색하고 정보를 빠르게 찾을 수 있도록 도와줌.
반면, 나쁜 웹디자인은 사용자를 혼란스럽게 하거나 웹사이트에서 이탈하게 만듦.
◎ 좋은 웹디자인의 특징
직관적인 내비게이션(Navigation) → 메뉴가 논리적이며 쉽게 접근 가능
빠른 로딩 속도(Speed) → 3초 이내에 로딩되는 웹사이트
가독성 높은 텍스트(Typography) → 폰트 크기와 줄 간격이 적절
색상과 대비(Color & Contrast) 조화 → 눈이 편안하며 강조할 부분이 명확
반응형 디자인(Responsive Design) → 모바일, 태블릿에서도 최적화
CTA(Call To Action) 버튼의 명확성 → 사용자가 원하는 행동을 쉽게 수행
◎ 나쁜 웹디자인의 특징
복잡한 메뉴 & 혼란스러운 구조 → 사용자가 원하는 정보를 찾기 어려움
느린 페이지 로딩 속도 → 사용자가 기다리다가 이탈
가독성이 낮은 폰트 스타일 → 너무 작은 글씨, 배경과 비슷한 색상
색상이 너무 많거나 대비가 부족 → 눈이 피로하고 혼란스러움
반응형 디자인 미적용 → 모바일에서 깨지는 레이아웃
CTA (Call To Action) 버튼이 불분명 → 클릭해야 하는 요소가 눈에 띄지 않음
◎ 좋은 웹디자인의 예
심플한 인터페이스 → 검색창이 중앙에 위치하여 사용자가 즉시 검색 가능
빠른 로딩 속도 → 검색 결과가 1초 이내에 표시됨
큰 이미지와 간결한 텍스트 → 사용자가 원하는 숙소를 쉽게 찾을 수 있음
검색 필터가 직관적 → 필요한 정보를 빠르게 검색 가능
버튼이 명확 → "예약하기" 버튼이 눈에 띄며 클릭 유도
깔끔한 미니멀 디자인 → 제품이 강조되고 여백이 충분함
고해상도 이미지와 간결한 설명 → 제품 정보를 한눈에 파악 가능
◎ 나쁜 웹디자인의 예
메뉴가 많고 정리가 되어 있지 않음 → 사용자가 원하는 정보를 찾기 어려움
광고 배너가 많아 가독성을 해침 → 사용자 경험이 나빠지고 이탈율 증가
모바일 최적화 부족 → 작은 화면에서 버튼이 작거나 겹쳐져 클릭이 어려움
너무 많은 제품 정보 → 사용자가 원하는 제품을 찾기 어려움
작은 이미지와 긴 텍스트 → 시각적으로 부담스러움
◎ 좋은 사이트와 나쁜 사이트 분석
● 웹디자인의 핵심 원칙 (가독성, 명료성, 균형감)
◎ 가독성
사용자가 텍스트를 쉽고 빠르게 읽고 이해할 수 있는 정도로
사용자가 웹사이트의 정보를 효과적으로 수집하고 원활하게 소통할 수 있도록 하는 핵심 요소
○ 글꼴 선택
- 글꼴 종류: 산세리프 글꼴은 디지털 화면에서 읽기 쉽고 현대적인 느낌을 줌.
예를 들어, Arial, Helvetica, 또는 Roboto와 같은 글꼴이 널리 사용됩니다.
- 글꼴 스타일: 굵은 글꼴이나 기울임꼴은 강조를 위해 사용할 수 있지만,
전체 텍스트에 과도하게 사용되면 가독성을 저하시킬 수 있습니다.
○ 텍스트 크기 및 줄 간격
- 적절한 텍스트 크기: 사용자가 텍스트를 쉽게 읽을 수 있도록
충분히 큰 크기를 사용해야 합니다. 일반적으로 본문 텍스트는 최소 16px를 권장합니다.
- 줄 간격 조절: 줄 간격은 텍스트의 가독성을 크게 향상시킬 수 있습니다.
일반적으로 글꼴 크기의 1.5배 정도가 이상적인 줄 간격으로 여겨집니다.
○ 색상 대비
- 텍스트와 배경의 대비: 높은 대비는 텍스트를 눈에 띄게 하여
읽기를 용이하게 합니다. 예를 들어, 짙은 글자에 밝은 배경 또는 그 반대 경우가 이상적입니다.
- 색상 블라인드 고려: 색상을 구별하기 어려운 사용자를 위해
색상만이 아닌 텍스트 스타일 또는 아이콘을 사용하여 정보를 전달하는 것이 중요합니다.
○ 행 길이와 블록 정렬
- 적절한 행 길이: 너무 긴 행은 읽기 피로를 유발할 수 있습니다.
일반적으로 한 행에 50~75자가 이상적입니다.
- 정렬: 좌우 정렬된 텍스트가 가독성이 높으며, 특히 정렬된 텍스트는
눈이 다음 줄로 쉽게 이동할 수 있도록 도와줍니다.
○ 마진과 패딩
- 여백 활용: 적절한 마진과 패딩은 텍스트 주변에 공간을 만들어
눈의 피로를 줄이고, 텍스트 블록을 더욱 명확하게 구분지어 줍니다.
◎ 명료성
웹사이트나 애플리케이션에서 제공하는 정보가 명확하고 이해하기 쉬워야 한다는 디자인 원칙을 의미
사용자가 웹사이트를 방문했을 때, 필요한 정보를 쉽게 찾고 이해할 수 있도록 하는 것이 중요
○ 명확한 헤더와 타이틀
- 헤더의 구분: 각 페이지와 섹션의 목적이 명확하게 표시되어야 합니다.
사용자가 어느 위치에 있으며, 무엇을 할 수 있는지 쉽게 알 수 있어야 합니다.
- 타이틀의 명확성: 각 페이지의 타이틀은 그 페이지의 내용을 정확하게 반영
이는 사용자가 원하는 정보를 빠르게 파악하는 데 도움을 줍니다.
○ 직관적인 네비게이션
- 네비게이션의 단순화: 메뉴와 하위 메뉴는 직관적이고 이해하기 쉬워야 합니다.
사용자가 몇 번의 클릭으로 원하는 정보에 도달할 수 있도록 구성해야 합니다.
- 일관된 네비게이션 스타일: 전체 웹사이트에 걸쳐 네비게이션 스타일이 일관되어야
사용자가 혼란을 느끼지 않고 원활하게 정보를 탐색할 수 있습니다.
○ 간결한 콘텐츠
- 중요 정보의 강조: 중요한 정보는 강조 표시를 통해 쉽게 인식할 수 있도록 해야 합니다.
이는 볼드체, 색상 변경, 아이콘 사용 등 다양한 방법으로 구현할 수 있습니다.
- 불필요한 정보 제거: 페이지에서 불필요한 요소는 제거하여 사용자의 주의를 분산시키는 것을 최소화
정보는 필요한 최소한만 제공하여 사용자의 이해를 돕습니다.
○ 명확한 시각적 계층
- 시각적 계층 구조: 정보는 중요도에 따라 시각적으로 구분되어야 합니다.
이는 크기, 색상, 위치 조정을 통해 이루어질 수 있습니다.
중요한 정보는 더 크고 눈에 띄는 위치에 배치합니다.
- 공간 활용: 적절한 공간 분할은 정보를 체계적으로 배열하여 사용자의 이해를 도움.
각 요소는 충분한 공간을 가지고 서로 구분되어야 합니다.
○ 피드백과 지시사항 제공
- 사용자 피드백: 사용자의 행동에 따른 즉각적인 피드백(예: 폼 제출 후의 확인 메시지)을 제공하여
사용자가 자신의 행동이 성공적으로 이루어졌는지 알 수 있도록 합니다.
- 명확한 지시사항: 사용자가 다음에 무엇을 해야 할지 명확한 지시를 제공합니다.
예를 들어, '클릭하여 더 보기', '여기를 눌러 등록하기'와 같은 직접적인 액션 가이드가 포함되어야 합니다.
◎ 균형감
균형감은 웹디자인에서 시각적 조화와 안정감을 창출하는 원칙
균형은 디자인의 요소들이 공간에 어떻게 분배되고,
서로 어떻게 상호작용하는지에 대한 인상을 결정합니다.
디자인의 균형감은 사용자가 웹사이트를 보다 즐겁게 탐색하도록 유도하며,
전체적인 디자인의 효과성을 높이는 데 기여
○ 시각적 균형 (Visual Balance)
시각적 균형은 디자인 요소들이 화면상에서 균등하게 분포되어 있을 때 창출됩니다.
- 대칭 균형 (Symmetrical Balance): 요소들이 중심축을 기준으로 거울 이미지처럼
동일하게 배치되는 것입니다. 이는 전통적이고 공식적인 느낌을 줍니다.
- 비대칭 균형 (Asymmetrical Balance): 서로 다른 크기나 색상의 요소들이 다른 방식으로 배치되지만,
시각적인 무게가 전체적으로 균등하게 느껴지는 것입니다. 이는 보다 동적이고 현대적인 인상을 줍니다.
○ 색상과 대비
-색상의 균형: 색상은 강한 시각적 영향을 줍니다.
밝고 어두운 색상의 적절한 조합은 디자인에 균형을 제공하며,
특정 부분에 시선을 유도할 수 있습니다.
-대비 사용: 대비는 주목도를 높이고, 요소 간의 구분을 명확히 하며,
시각적 인터레스트를 생성합니다. 적절한 대비는 디자인을 더욱 명확하고 읽기 쉽게 만듭니다.
○ 레이아웃과 공간 활용
- 공간의 분배: 좋은 레이아웃은 요소들 사이에 적절한 공간을 두어 균형을 이룹니다.
여백(공백)은 요소들이 숨 쉴 공간을 제공하고, 중요한 정보를 강조하는 데 사용됩니다.
- 그리드 시스템: 그리드 시스템을 사용하여 요소들을 정렬하면
깔끔하고 일관된 레이아웃을 생성할 수 있으며,
시각적 균형을 유지하는 데 도움이 됩니다.
○ 요소의 크기와 배치
- 요소의 크기 조정: 큰 요소는 더 많은 시각적 무게를 가지며,
작은 요소보다 눈에 띄게 됩니다. 크기와 배치를 조절하여 디자인 내에서 균형을 맞출 수 있습니다.
- 시각적 중심점: 디자인의 중심점을 설정하여 사용자의 시선을 유도할 수 있습니다.
이 중심점은 디자인의 핵심 메시지나 가장 중요한 요소를 강조하는 데 사용됩니다.
○ 시각적 리듬과 흐름
- 시각적 리듬: 반복되는 패턴이나 요소를 통해 시각적 리듬을 생성하면
사용자의 눈이 자연스럽게 디자인을 따라 이동하도록 유도할 수 있습니다.
- 연결된 요소: 관련 요소들을 시각적으로 연결하여 균형을 이루고,
정보의 흐름을 자연스럽게 만듭니다.
■ 8월 19일 - 5일차
● 디자인 시스템(Design System)
◎ 디자인 시스템이란?
조직 내에서 디자인과 관련된 일관성과 효율성을 증대시키기 위해
구축된 포괄적인 가이드라인과 표준의 집합
이 시스템은 디자인 요소와 패턴, 그리고 이를 적용하는 방법에 대한 상세한 지침을 포함하며,
제품 개발의 모든 단계에서 일관된 브랜드 메시지와 사용자 경험을 제공하는 데 중점
◎ 디자인 시스템의 중요성
일관성 유지: 디자인 시스템은 제품과 서비스 전반에 걸쳐 일관된 브랜드 경험을 제공합니다.
이로 인해 사용자는 브랜드를 쉽게 인식하고 신뢰할 수 있습니다.
효율성 증대: 디자인 시스템은 디자이너와 개발자가 반복적인 작업을 줄이고,
더 빠르고 일관된 방법으로 제품을 개발할 수 있게 돕습니다.
협업 강화: 공유된 디자인 언어와 리소스를 사용함으로써
다양한 팀과 직무의 사람들이 더욱 효과적으로 협업할 수 있습니다.
확장성: 디자인 시스템은 조직이 성장하고 제품 라인이 확장됨에 따라 쉽게 확장하고
관리할 수 있도록 설계되었습니다.
◎ 디자인 시스템의 주요 구성 요소
디자인 원칙: 조직의 미션과 비전에 부합하는 핵심 디자인 가치와 원칙을 명시합니다.
UI 컴포넌트: 버튼, 입력 필드, 드롭다운 메뉴 등과 같은 재사용 가능한 디자인 요소입니다.
이들은 일관된 스타일과 동작을 가지고 있어, 다양한 제품에서 동일하게 사용됩니다.
디자인 패턴: 사용자 인터페이스 내에서 반복적으로 사용되는 특정 디자인 문제를 해결하는
검증된 솔루션의 모음입니다.
스타일 가이드: 타이포그래피, 색상 팔레트, 아이콘 등과 같은
시각적 스타일을 정의하는 상세 지침입니다.
용어집 및 라이브러리: 디자인 요소와 패턴을 쉽게 찾고 사용할 수 있도록
조직화된 리소스입니다.
◎ 디자인 시스템 구성 요소별 예시
- 스타일 가이드(Style Guide)
색상(Color Palette): 브랜드 컬러, 배경색, 버튼 색상 등
타이포그래피(Typography): 폰트 유형, 크기, 줄 간격 설정
간격 및 정렬(Spacing & Grid): UI 요소 간 거리와 정렬 방식 정의
- UI 컴포넌트 라이브러리(UI Components Library)
버튼(Button) → 크기, 색상, 호버 효과, 비활성화 상태 정의
입력 필드(Forms & Inputs) → 로그인, 회원가입, 검색창 스타일 표준화
카드(Card Component) → 제품 목록, 뉴스 기사 등 정렬 방식
- 아이콘 & 이미지 가이드(Iconography & Imagery)
아이콘 스타일: 단색/컬러 아이콘 가이드
이미지 활용법: 해상도, 파일 형식(JPG, PNG, SVG, WEBP) 정의
- 내비게이션 & 인터랙션 가이드(Navigation & Interaction Guide)
메뉴 스타일: 상단 바, 사이드바, 드롭다운 메뉴 디자인
스크롤 애니메이션: 패럴랙스 효과, 버튼 클릭 시 반응 정의
● 정보 구조(IA, Information Architecture)
◎ 정보구조(Information Architecture, IA)
정보를 조직화하고 구조화하여 사용자가 쉽게 이해하고 접근할 수 있도록 만드는 디자인의 분야
사용자가 필요한 정보를 찾아서 이용할 수 있도록 돕는 중추적인 역할
정보의 효율적인 검색과 이용을 가능하게 하며, 콘텐츠의 명확성과 접근성을 높이는 데 중점
◎ 정보구조의 중요성
사용성 향상: 잘 구성된 정보구조는 사용자가 원하는 정보를 쉽게 찾을 수 있도록 하여
사용성을 향상시킵니다.
접근성 증대: 정보를 체계적으로 조직함으로써 모든 사용자,
특히 장애를 가진 사용자가 정보에 접근하기 쉽게 만듭니다.
사용자 만족도 증가: 사용자가 웹사이트나 애플리케이션을 통해 쉽게 정보를 찾고,
이해하며, 필요한 작업을 수행할 수 있도록 함으로써 사용자 만족도를 높입니다.
◎ 정보구조 설계 단계
○ 사용자 조사 및 분석
- 대상 사용자 파악: 제품이나 서비스의 주요 사용자 그룹을 식별합니다.
- 사용자의 요구와 행동 이해: 설문조사, 인터뷰, 사용자 관찰 등을 통해
사용자의 요구와 정보 이용 방식을 조사합니다.
- 페르소나 생성: 대표적인 사용자 유형을 기반으로 페르소나를 만들어,
설계 과정에서 사용자의 요구를 명확하게 반영할 수 있도록 합니다.
○ 콘텐츠 인벤토리 및 감사
- 콘텐츠 인벤토리: 웹사이트나 애플리케이션에 포함될 모든 콘텐츠를 조사하고 목록화합니다.
- 콘텐츠 감사: 기존 콘텐츠의 품질, 정확성, 관련성을 평가하고 개선이 필요한 부분을 식별합니다.
○ 카테고리화와 라벨링
- 카테고리화: 콘텐츠를 논리적인 그룹으로 분류합니다.
이 과정은 콘텐츠의 유형, 사용자의 탐색 패턴, 업계 표준 등을 고려하여 이루어집니다.
- 라벨링: 각 카테고리와 콘텐츠에 명확하고 일관된 라벨을 지정하여
사용자가 쉽게 이해할 수 있도록 합니다.
○ 네비게이션 설계
- 네비게이션 시스템 개발: 사용자가 정보를 쉽게 탐색할 수 있도록
메뉴, 링크, 검색 기능 등의 네비게이션 시스템을 설계합니다.
- 글로벌 네비게이션: 사이트 전체에서 일관적으로 사용될 네비게이션 요소를 구축합니다.
- 로컬 네비게이션: 특정 섹션 내에서만 사용되는 네비게이션 시스템을 설계합니다.
○ 와이어프레임과 프로토타이핑
- 와이어프레임 생성: 페이지 레이아웃과 콘텐츠의 배치를 개략적으로 스케치합니다.
이는 디자인과 개발 초기 단계에서 정보구조를 시각적으로 표현합니다.
- 프로토타이핑: 초기 디자인을 바탕으로 인터랙티브한 프로토타입을 만들어 실제
사용자 환경에서의 탐색과 인터랙션을 시뮬레이션합니다.
○ 사용성 테스트
실제 사용자를 대상으로 설계된 정보구조의 효과성을 테스트합니다.
사용자의 반응을 관찰하고, 문제점을 식별하여 개선합니다.
○ 반복 및 개선
사용성 테스트 결과를 바탕으로 정보구조를 지속적으로 개선합니다.
이 과정은 사용자의 요구가 변화하거나 새로운 콘텐츠가 추가될 때마다 반복될 수 있습니다.
■ 8월 21일 - 7일차
● UI 구성요소
◎ UI 구성요소 특징
UI 구성요소는 사용자에게 효율적이고 즐거운 경험을 제공하여
제품이나 서비스의 사용성을 높이는데 기여함
- 명확성 (Clarity) 이해하기 쉬움
UI 요소는 직관적이어야 하며, 사용자가 별도의 설명 없이도 쉽게 이해할 수 있어야 한다.
버튼, 아이콘, 라벨 등이 명확하게 표현되어야 하며, 사용자가 혼란을 느끼지 않도록 해야 한다.
- 일관성 (Consistency) 디자인의 일관성
모든 UI 요소는 일관된 디자인 언어와 스타일 가이드를 따라야 한다.
이는 사용자가 새로운 화면이나 기능을 접했을 때 빠르게 적응하고 이해할 수 있도록 도와줌.
- 피드백 (Feedback) 즉각적인 응답
사용자가 인터페이스와 상호작용할 때 즉시적이고 이해하기 쉬운 피드백을 제공해야 한다.
예를 들어, 버튼을 클릭하면 변화가 눈에 보이게 해 사용자가 자신의 행동이 시스템에 의해
인식되었다는 것을 알 수 있도록 한다.
- 효율성 (Efficiency) 작업 단순
UI 요소는 사용자가 목표를 더 빨리, 쉽게 달성할 수 있도록 설계되어야 한다.
자주 사용하는 기능은 접근하기 쉬운 위치에 배치하고, 사용자의 작업 흐름을 최적화해야 한다.
- 접근성 (Accessibility) 모든 사용자를 위한 디자인
좋은 UI는 다양한 능력을 가진 사용자 모두가 사용할 수 있도록 설계되어야 한다.
시각적, 청각적, 운동적 제약을 가진 사용자도 고려하여, 접근성이 뛰어나야 한다.
- 미적 매력 (Aesthetics) 시각적 매력
사용자는 보기 좋은 디자인을 선호합니다.
UI는 시각적으로 매력적이어야 하며, 사용자의 감성을 자극하고
긍정적인 경험을 유도할 수 있어야한다.
- 간결성 (Simplicity) 간단하고 깔끔한 디자인
UI 요소는 필요한 최소한만을 제공해야 하며, 사용자에게 복잡함을 느끼게 하지 않아야 한다.
사용자가 필요로 하는 기능과 정보만을 간결하게 제공하여,
사용자의 태스크를 간소화하는 데 집중해야 한다.
- 예측 가능성 (Predictability) 사용자의 예측을 반영
사용자가 특정 UI 요소를 보았을 때 어떻게 동작할지 예측할 수 있도록 해야 한다.
이는 학습 곡선을 낮추고 사용자의 신뢰를 쌓는 데 도움이 된다.
◎ UI 구성요소
- 버튼(Button)
사용자가 클릭하여 특정 작업을 수행할 수 있도록 하는 요소로 행동을 촉진.
- 텍스트 필드(Text Fields)
사용자가 데이터를 입력할 수 있는 공간으로, 로그인 정보 입력, 검색 바 등에 사용.
- 드롭다운 메뉴(Dropdown Menus)
사용자가 여러 옵션 중 하나를 선택할 수 있게 하는 요소
공간을 효율적으로 사용하고자 할 때 적합.
- 체크박스(Checkboxes)와 라디오 버튼(Radio Buttons)
사용자가 여러 옵션 중 하나 또는 여러 개를 선택할 수 있도록 함
체크박스는 다중 선택을, 라디오 버튼은 단일 선택을 허용.
- 토글 스위치(Toggle Switches)
설정을 켜고 끄는 간단한 컨트롤에 사용됨.
-슬라이더(Sliders)
값의 범위를 조정할 때 사용 예를 들어 볼륨 조절이나 밝기 조절에 사용.
- 탭(Tabs)
다양한 콘텐츠를 카테고리화하여 공간을 효율적으로 사용하고 싶을 때 사용.
- 툴팁(Tooltips)
요소에 마우스를 올렸을 때 추가 정보를 제공하는 작은 메시지 상자.
- 아이콘(Icons)
공간을 절약하면서도 기능을 직관적으로 전달.
◎ UI 구성요소의 일관성 유지
일관성 있는 디자인은 사용자가 시스템을 더 빠르게 학습하고, 효율적으로 사용할 수 있도록 돕는다.
이는 또한 사용자가 예측 가능한 상호작용을 경험하게 하여 신뢰감을 증대시키고,
전반적인 사용자 경험(UX)을 향상시킴.
○ 일관성의 중요성
- 학습 용이성
일관된 디자인 요소는 사용자가 새로운 페이지나 기능을 접할 때
이전에 학습한 패턴을 적용할 수 있게 해, 사용자가 시스템을 더 빨리 이해하고
효율적으로 사용할 수 있게 한다.
- 사용자 신뢰 형성
일관성 있는 디자인은 사용자에게 안정감을 제공함.
사용자는 시스템이 일관된 행동을 보일 것으로 기대하며, 이는 신뢰성을 높이는 데 기여한다.
- 오류 감소
사용자가 일관된 인터페이스에서 작업할 때 발생할 수 있는 실수나 오류의 가능성이 줄어든다.
사용자는 특정 요소가 항상 같은 방식으로 반응할 것임을 알고 있기 때문이다.
○ 일관성 유지 방법
- 스타일 가이드와 디자인 시스템 사용
스타일 가이드는 글꼴, 색상 팔레트, 레이아웃 스타일 등 디자인 요소의 일관된 사용을 정의함.
디자인 시스템은 이러한 가이드를 포함하여 재사용 가능한 디자인 컴포넌트와 패턴을 제공.
이 시스템을 따르면 팀 전체가 일관된 방식으로 디자인을 구현할 수 있다.
- UI 요소의 재사용
가능한 한 많이 UI 요소를 재사용함으로써 일관성을 유지하는 것이 필요
를 들어, 모든 '제출' 버튼은 동일한 색상, 크기, 그리고 스타일을 가지고 있어야 한다.
이는 사용자가 동일한 종류의 작업을 수행할 때 기대하는 결과를 명확하게 이해할 수 있게 도와줌.
- 사용자 피드백을 기반으로 한 반복적 개선
사용자로부터의 피드백은 일관성 있는 디자인이 실제로 효과적인지 평가하는 데 중요함.
사용자의 경험을 분석하고, 일관성이 떨어지는 부분을 개선하기 위해 반복적으로 디자인을 수정.
-테스트와 평가
다양한 방법을 사용하여 디자인의 일관성이 사용자 경험에 미치는 영향을 지속적으로 평가한다.
이는 어떤 요소가 잘 작동하는지, 개선이 필요한 지점은 어디인지를 파악하는 데 도움을 준다.
● 사용자 시선 흐름
◎ 사용자 시선흐름
○ 사용자 시선흐름이 중요한 이유
- 사용자는 웹사이트를 방문한 후 3~5초 내에 머무를지 결정함.
- 사용자의 시선이 자연스럽게 흐르는 패턴을 이해하면 콘텐츠 배치를 최적화할 수 있음.
- 특히, 텍스트(기사, 블로그), 쇼핑몰, 랜딩 페이지 등에서 시선 흐름을 고려하는 것이 중요함.
책을 읽을 때 좌에서 우로 읽어들이 듯이
보이는 것은 좌에서 우로 움직이고 마우스는 오른손에서 좌측으로 움직인다.
◎ Z-패턴
Z-패턴은 주로 시각적으로 가벼운 페이지나 단순한 레이아웃에서
나타나는 시선 추적 패턴이다.
이 패턴은 페이지의 좌상단에서 시작하여 우상단으로 가로지르는 ‘Z’ 형태를 따른다.
이러한 패턴은 사용자의 시선이 자연스럽게 움직이는 경로를 반영한다.
이 패턴은 주로 시각적 요소가 상대적으로 적고,
사용자의 주의를 빠르게 끌어야 할 때 효과적으로 사용된다.
○ 적용방법
- 중요 요소 배치
사용자의 시선이 자연스럽게 머무르는 곳,
즉 페이지의 좌우 상단 및 하단에 주요 정보나
호출 버튼(Call to Action, CTA)을 배치한다.
- 시각적 균형
페이지의 각 코너에 시각적 요소를 배치하여 균형 잡힌 디자인을 유도한다.
- 간결성 유지
Z-패턴은 정보가 많지 않고, 시각적으로 단순한 페이지에 적합하다.
○ Z패턴의 구조
- 좌상단 (Start Point)
사용자가 페이지를 처음 볼 때 먼저 시선이 가는 곳으로
이 지점에는 로고나 주요 브랜드 이미지가 위치하는 것이 일반적임
- 우상단 (Top Horizontal)
사용자의 시선이 좌상단에서 시작하여 우상단으로 자연스럽게 이동함.
이 공간에는 주요 메뉴나 중요한 호출 버튼(Call to Action, CTA)을 배치하여
사용자의 행동을 유도한다.
- 좌하단 (Diagonal)
사용자의 시선이 대각선을 따라 좌하단으로 이동함.
이 때, 중간에 시선을 끌 수 있는 시각적 요소나 중요 정보를 배치.
- 우하단 (End Point): Z의 마지막 지점으로, 사용자의 시선이 마무리되는 곳임.
여기에는 추가적인 CTA를 배치하여 페이지의 목적을 달성.
○ 예시1
○ Z-패턴 사용 시기
- 홈페이지 또는 랜딩 페이지
사용자가 사이트에 처음 도착했을 때 주요 정보를 빠르게 전달하고
사용자의 행동을 유도해야 할 때 Z-패턴을 활용함.
- 광고나 프로모션 페이지
제한된 공간 내에서 효과적으로 정보를 전달하고
사용자의 행동을 촉구해야 하는 광고나 캠페인 페이지에 적합.
- 간단한 정보 제공이 필요한 페이지
사용자에게 간단하고 명료한 메시지를 전달해야 할 때 사용됨.
예를 들어, 이벤트 안내, 제품 소개 등에 사용할 수 있음.
○ 마치며
Z-패턴은 특히 시각적 요소와 텍스트가 제한적인 페이지에서
사용자의 주의를 효과적으로 분산시키지 않고
중요한 요소에 초점을 맞추게 하는데 유용하다.
이를 통해 디자이너는 사용자의 탐색 경로를 설계하고,
페이지의 전환율을 최적화할 수 있다.
◎ F-패턴
F-패턴은 사용자가 주로 텍스트 중심의 웹페이지를 읽을 때
나타나는 일반적인 시선 추적 패턴.
이 패턴은 사용자가 페이지 상단에서 시작하여 가로로 읽다가
다음 행으로 넘어가면서 점차 읽는 범위를 좁혀가며
수직으로 스크롤하는 형태를 취함.
○ 적용방법
- 헤드라인과 서브헤드라인
헤드라인을 페이지의 상단에 크고 뚜렷하게 배치하고,
서브헤드라인은 그 아래에 배치하여 사용자가 정보를 계층적으로 이해할 수 있도록 함.
사용자의 주의력이 가장 높은 상단에 가장 중요한 정보나 키워드를 배치.
- 볼드나 하이라이트 텍스트
중요한 단어나 문구를 볼드 처리하거나
하이라이트하여 사용자의 주의를 끌고, 효율적으로 정보를 전달.
- 좌측 정렬 텍스트
대부분의 사용자가 좌측을 따라 내려가며 읽기 때문에
텍스트를 좌측 정렬하는 것이 자연스러움
- 서브헤더와 불릿 포인트 사용
긴 텍스트는 서브헤더, 불릿 포인트, 번호 목록 등을 사용
정보를 분할하고 조직화함으로써 가독성을 높임.
○ F-패턴의 구조
- 가로 스캔 (Top Horizontal)
사용자는 페이지의 상단에서 시작해 왼쪽에서 오른쪽으로 텍스트를 읽음.
이는 보통 페이지의 헤더나 주요 헤드라인이 위치하는 곳.
- 두 번째 가로 스캔 (Second Horizontal)
이 라인은 첫 번째 라인만큼 완전히 읽히지 않을 수 있으며,
일반적으로 사용자의 관심이 감소하기 시작하는 지점.
- 수직 스캔 (Vertical)
사용자는 페이지의 왼쪽 부분을 따라 수직으로 내려가면서 내용을 더 탐색.
이 부분에서 사용자는 보다 중요하지 않거나 관심이 적은 정보를
빠르게 스크롤하며 내용을 스캔
○ F-패턴 사용 시기
- 대량의 텍스트 콘텐츠가 있는 페이지
뉴스 기사, 블로그 포스트, 연구 보고서와 같이
많은 양의 텍스트 정보를 제공하는 페이지에서 F-패턴을 고려
- 검색 엔진 결과 페이지 (SERP)
사용자가 검색 결과를 훑어보는 경우, F-패턴이 자주 나타나며,
중요한 정보는 페이지 상단과 왼쪽에 위치.
- 리스트 또는 메뉴가 있는 페이지
제품 목록, 서비스 옵션 등을 나열할 때 F-패턴이 효과적.
■ 8월 25일 - 8일차
■ 색상 심리학의 이해
● 색상의 중요성
◎ 색채 심리학
참고 자료 : "Color Psychology in Marketing and Brand Identity: Part 1"
○ 색체 심리학 개요
색채 심리학은 색상이 지각과 행동에 어떤 영향을 미치는지에 대한 연구로
브랜딩에서 색채 심리학은 색상이 소비자의 브랜드 인상에 어떤 영향을 미치는지,
그리고 색상이 소비자에게 특정 브랜드를 고려하거나 설득하는지 여부에 초점을 맞춘다.
색상은 개인적 경험에 너무 의전적이어서 보편적인 감정으로 해석할 수 는 없다.
개인적 선호도, 경험, 양육, 문화적 차이로 개별 색상이 미치는 영향을 흐리게 만든다. 즉 정확하지는 않는다.
○ 브랜드 색상
브랜드 색상을 선택하는데 명확한 가이드 라인은 없다.
그러나 특정 브랜드에 사용되는 색상의 인식은 있다고 밝혀졌다.
중요한 것은 브랜드가 만들어내는 느낌과 분위기 이미지는 소비자의 반응에 영향을 준다는 것이다.
출처 : the logo company
COLOR EMOTION GUIDE → 색상 감정 가이드
OPTIMISM → 낙관주의 CLARITY → 명확성 WARMTH → 따뜻함
FRIENDLY → 친근함 CHEERFUL → 쾌활함 CONFIDENCE → 자신감
EXCITEMENT → 흥분 YOUTHFUL → 젊음 BOLD → 대담함
CREATIVE → 창의성 IMAGINATIVE → 상상력이 풍부한 WISE → 지혜로운
TRUST → 신뢰 DEPENDABLE → 신뢰할 수 있는 STRENGTH → 강인함
PEACEFUL → 평온함 GROWTH → 성장 HEALTH → 건강
BALANCE → 균형 NEUTRAL → 중립적 CALM → 차분함
◎ 브랜드별 색상
파란색 (Blue) 신뢰, 안정, 전문성 Facebook, Samsung, IBM
빨간색 (Red) 열정, 에너지, 긴급함 Coca-Cola, YouTube, Netflix
노란색 (Yellow) 행복, 활력, 긍정적 느낌 McDonald's, Snapchat, Ferrari
초록색 (Green) 자연, 신선함, 균형 Starbucks, Whole Foods
검정색 (Black) 럭셔리, 고급스러움, 강렬함 Gucci, Nike, Chanel
흰색 (White) 순수함, 깨끗함, 미니멀함 Apple, Tesla
주황색 (Orange) 활기, 따뜻함, 창의성 Amazon, Fanta, Nickelodeon
보라색 (Purple) 신비로움, 창의성, 우아함 Yahoo, Cadbury, Twitch
● 색상이 웹페이지에서 사용자 행동에 미치는 영향
○ 결정을 빠르게 내리도록 도움
빨간색은 에너지, 긴급함, 그리고 행동을 촉진하는 색으로
마케팅에서 이 색상은 종종 세일이나 할인이 진행 중임을 알리는 데 사용되어
소비자의 구매 결정을 신속하게 유도함.
이러한 전략은 구매 우선 순위와 긴급감을 높이는 데 효과적
○ 특정 감정을 유발하여 브랜드 이미지를 형성
파란색은 신뢰성, 안정감, 전문성을 상징하며, 금융 기관, 보건 서비스, 기술 회사에서 자주 사용.
이 색상은 사용자에게 평온함을 주고 신뢰를 구축하는 데 도움을 준다.
페이팔(PayPal)은 그들의 웹사이트와 로고에 파란색을 사용하여 신뢰성과 안정성을 강조함.
이것은 사용자가 금융 거래를 할 때 느끼는 불안감을 줄여준다.
○ 사이트의 가독성과 접근성을 향상
적절한 색상 대비는 웹사이트의 가독성을 크게 향상시킬 수 있다.
○ 사용자의 편안함과 만족도 제공
부드러운 색조와 조화로운 색상 조합은 사용자에게 편안함을 제공하고,
웹사이트에서 더 긴 시간을 보내도록 만든다.
이는 사용자 경험의 만족도를 높이고, 사이트 내에서의 활동을 증가시킬 수 있다.
건강이나 웰빙 관련 웹사이트에서는 치유와 휴식을 연상시키는 연두색이나 하늘색을 사용하여
방문자에게 평화롭고 치유적인 분위기를 제공한다.
○ 브랜드의 성격 강조
브랜드의 성격을 전달하고 강조하는 데 사용됨.
적절한 색상 사용은 브랜드가 지향하는 가치와 이미지를 소비자에게 명확하게 전달할 수 있다.
환경을 중시하는 브랜드는 자연을 연상시키는 녹색을 사용하여 친환경적인 이미지를 강화한다.
예를 들어, 웹사이트 전반에 걸쳐 사용된 녹색은 제품이 지속 가능하고 자연에 해가 없다는 메시지를 전달함.
○ 소유욕과 구매 욕구
특정 색상은 소유욕이나 구매 욕구를 증가시킬 수 있다.
예를 들어, 럭셔리 브랜드에서는 골드나 버건디 색을 사용하여 고급스러움과 품질의 느낌을 강조하며,
이는 구매 결정에 긍정적인 영향을 미칠 수 있다.
고급스러운 색상을 사용하여 제품의 가치를 강조하고, 구매 욕구를 촉진.
○ 이용자의 체류 시간 연장
색상은 웹사이트의 체류 시간을 연장시키는 데 중요한 역할을 한다.
즐거운 색상 조합은 사용자가 사이트에서 더 오래 머무르도록 유도할 수 있으며,
이는 전환율을 증가시킬 수 있다.
여행 관련 웹사이트가 휴양지의 푸른 바다와 밝은 하늘을 연상시키는 색상을 사용하여
방문자들이 휴가 분위기를 느끼게 함으로써 더 많은 시간을 사이트에서 보내도록 유도함.
■ 디자인 추세, 브랜드 디자인
● 미니멀리즘 디자인(Minimalizm Design)
◎ 미니멀리즘 디자인
디자인의 본질을 단순화하면서 핵심 기능과 콘텐츠에 초점을 맞추는 디자인 철학이다.
이 접근 방식은 현대 디자인에서 강력한 영향력을 발휘하고 있으며,
사용자 경험(UX) 향상에 기여하고 있다.
◎ 미니멀리즘 디자인의 핵심 원칙
○ 단순성 (Simplicity)
- 정의 : 모든 초과적인 요소를 제거하고 필수적인 요소만을 남김으로써 명확하고 간결한 디자인을 추구.
- 적용: 복잡한 그래픽, 텍스처, 색상을 배제하고 필수적인 기능과 콘텐츠에만 집중.
예, 구글 홈페이지는 검색창 하나와 몇 개의 버튼만으로 구성되어 있으며 사용자의 집중을 촉진시킴.
○ 기능성 (Functionality)
- 정의: 디자인 요소는 모두 명확한 기능과 목적을 가지며, 단순히 미적인 이유만으로 사용되지 않는다.
- 적용: 사용자 인터페이스에서 버튼, 메뉴, 링크는 사용자가 필요로 하는 기능을 정확하게 수행할 수 있도록 설계.
예를 들어, ‘삭제’ 버튼은 충분히 눈에 띄고 사용자가 쉽게 이해할 수 있어야 한다.
○ 시각적 통일성 (Visual Unity)
- 정의: 색상, 타이포그래피, 레이아웃 등 모든 디자인 요소는 일관된 스타일을 유지하여
시각적으로 조화롭고 통일된 인상을 제공.
- 적용: 브랜드 아이덴티티를 강화하기 위해 모든 마케팅 자료에서 동일한 색상 스킨과 폰트를 사용함으로써 브랜드 인식을 증가.
예를 들어, 애플(Apple) 제품은 깔끔하고 통일된 디자인으로 유명하다.
○ 공간 활용 (Use of Space)
- 정의: 여백(White Space)의 적극적인 활용을 통해 콘텐츠와 요소 사이에 '숨 쉴 공간'을 제공하고,
시각적으로 깔끔하고 명료한 레이아웃을 구현.
- 적용: 여백은 중요한 정보를 강조하고 주변 요소로부터 분리시켜 사용자의 주의를 집중시키는 데 사용.
또한, 복잡함을 줄이고 콘텐츠를 더욱 돋보이게 한다.
◎ 사용자 경험(UX)에 미치는 영향
미니멀리즘 디자인은 사용자가 정보를 빠르게 이해하고 필요한 작업을 쉽게 수행할 수 있도록 돕는다.
여백과 간결한 레이아웃은 사용자의 인지 부담을 줄여주며,
이는 사용자가 피로감 없이 인터페이스와 상호작용할 수 있게 함.
또한, 디자인의 일관성과 간결성은 사용자의 신뢰를 쌓고, 브랜드 이미지를 강화하는 데 기여.
◎ 전략적 디자인 결정
○ 핵심 기능 강조
디자인에서 가장 중요한 요소를 식별하고, 그 요소를 강조하는 것이 중요.
이를 통해 사용자는 제품이나 서비스를 이용할 때 주요 기능을 즉시 인식하고 접근할 수 있다.
예를 들어, 사용자가 가장 많이 사용하는 기능을 앱의 홈 화면에 크고 눈에 띄게 배치하여 접근성을 높인다.
○ 정보의 우선 순위 설정
모든 정보가 동일하게 중요한 것은 아니다.
디자이너는 정보를 우선 순위에 따라 배열하고, 가장 중요한 정보를 가장 눈에 띄는 곳에 배치한다.
이는 사용자가 정보를 효과적으로 스캔하고 필요한 내용을 빠르게 파악할 수 있도록 돕는다.
○ 네비게이션 단순화
복잡한 네비게이션 시스템은 사용자를 혼란스럽게 할 수 있다.
미니멀리즘 디자인에서는 네비게이션 요소를 최소화하고, 사용자가 필요한 섹션으로 쉽게 이동할 수 있도록 한다.
○ 인터랙티브 요소 제한
너무 많은 인터랙티브 요소는 사용자의 주의를 분산시킬 수 있다.
중요한 호출 버튼(CTA)이나 인터랙션은 사용자의 작업 흐름을 방해하지 않으면서도 목적을 분명히 할 수 있도록 디자인한다.
● 브랜드 아이덴티티와 웹 디자인( Brand Identity)
◎ 브랜드 아이덴티티
○ 브랜드 아이덴티티
한 브랜드가 고객, 경쟁사, 그리고 시장에 자신을 어떻게 표현하고 싶은지에 대한 전반적인 표현
이는 단순히 로고나 시각적 요소를 넘어서
브랜드의 성격, 가치, 그리고 고유성을 포괄적으로 담아내며,
고객에게 전달하고자 하는 메시지와 느낌을 시각적으로 구현하는것을 말암
○ 브랜드 아이덴티티의 핵심 구성요소
- 로고
로고는 브랜드 아이덴티티의 가장 핵심적인 요소로,
브랜드를 상징화하는 그래픽 마크이다.
로고는 모든 마케팅 자료와 제품, 웹사이트에 걸쳐 일관되게 사용되어야 하며,
브랜드의 미션과 비전을 반영해야 한다.
- 색상 팔레트
색상은 감정과 연결되어 있으며 브랜드가 전달하고자 하는 느낌과 메시지를 강화한다.
브랜드에 적합한 색상을 선택하고 일관되게 사용함으로써,
소비자가 브랜드를 쉽게 인식하고 기억할 수 있도록 한다.
- 타이포그래피
브랜드의 성격을 표현하는 데 중요한 역할을 함.
예를 들어, 전통적인 세리프 폰트는 신뢰와 전문성을,
모던한 산세리프 폰트는 현대적이고 접근하기 쉬운 느낌을 줄 수 있다.
- 이미지 스타일
사용하는 이미지와 비주얼 콘텐츠도 브랜드 아이덴티티의 일부.
예를 들어, 생동감 있는 사진, 직접 그린 일러스트레이션 등은
브랜드의 유니크한 스타일을 전달하는 데 사용됩니다.
○ 브랜드 아이덴티티의 중요성
브랜드 아이덴티티는 단순히 브랜드를 아름답게 보이게 하는 것 이상의 기능을 한다.
그것은 브랜드의 본질을 고객에게 전달하고,
브랜드와 고객 간의 감정적 연결을 형성하는 수단이다.
브랜드 아이덴티티가 강하고 일관되면, 다음과 같은 여러 가지 이점을 제공함
- 구별성
강력한 브랜드 아이덴티티는 시장에서 브랜드를 돋보이게 하고,
경쟁사와 구분짓는 데 도움이 된다.
- 인식과 충성도
일관된 브랜드 아이덴티티는 소비자가 브랜드를 쉽게 인식하고 기억하는 데 도움을 준다.
이는 브랜드 충성도를 높이는 데 기여한다.
- 신뢰 구축
일관되고 전문적인 브랜드 아이덴티티는 소비자에게 신뢰감을 줄 수 있다.
이는 고객의 구매 결정에 중요한 역할을 한다.
○ 웹 디자인에서 브랜드 아이덴티티 통합 전략
- 로고와 브랜딩 요소의 일관된 표현
웹사이트의 모든 페이지에서 로고를 눈에 띄게 위치시켜 브랜드의 식별성을 강화한다.
보통 로고는 상단 헤더에 배치하며, 클릭하면 홈페이지로 돌아갈 수 있도록 설정한다.
- 브랜드 색상 팔레트의 일관된 적용
웹사이트의 버튼, 링크, 헤더, 푸터 등의 요소에 브랜드 색상을 적용하여 시각적 일관성을 유지한다.
이는 사용자가 브랜드를 즉시 인식하게 하고, 전체적인 브랜드 경험을 향상시킨다.
- 타이포그래피와 텍스트 스타일링
아이덴티티에 맞는 폰트와 텍스트 스타일을 선택하여 웹사이트 전반에 걸쳐 일관되게 사용한다.
이는 브랜드의 전문성을 강조하고, 콘텐츠의 가독성을 보장한다.
- 통일된 이미지와 비주얼 스타일
웹사이트에 사용되는 모든 이미지와 비주얼은 브랜드의 스타일 가이드에 부합해야 한다.
이는 브랜드가 전달하고자 하는 감성과 메시지를 일관되게 유지하는 데 도움이 된다.
- 컨텐츠의 일관된 톤과 목소리
브랜드의 목소리를 반영하는 콘텐츠를 작성하여,
모든 텍스트 콘텐츠(블로그 포스트, 제품 설명, 고객 서비스 페이지 등)에서 일관성을 유지한다.
이는 브랜드와 고객 간의 감정적 연결을 강화한다.
- 사용자 경험(UX)에 대한 일관된 접근
사용자 인터페이스(UI)는 사용자가 쉽게 탐색하고,
정보를 찾을 수 있도록 직관적이어야 한다.
이는 사이트의 내비게이션 구조를 단순하고 명확하게 유지함으로써 달성할 수 있다.
○ 실행 예시
- 네비게이션
브랜드 아이덴티티가 심플함을 강조한다면,
웹사이트의 네비게이션도 최소한의 메뉴 항목만을 포함하고, 사용자가 정보를 쉽게 접근할 수 있도록 한다.
- 인터랙티브 요소
브랜드가 현대적이고 혁신적임을 강조하고자 한다면, 최신 웹 기술을 활용한 동적 요소
(예: 애니메이션, 전환 효과)를 통해 이를 표현할 수 있다.
웹사이트는 브랜드 아이덴티티의 디지털 표현이며,
잘 구현된 웹 디자인은 브랜드의 이미지와 신뢰성을 크게 향상시킬 수 있다.
웹 디자인 과정에서 브랜드 아이덴티티의 모든 요소가 잘 통합되고 반영되도록 하는 것이 중요함.
○ 브랜드 디자인
- 애플 (Apple)
브랜드 아이덴티티:
애플은 혁신, 깔끔함, 최첨단 기술, 미니멀리즘을 표방함.
이러한 특성은 애플의 로고, 제품 디자인, 그리고 광고에 일관되게 나타난다.
웹사이트:
애플의 웹사이트(https://www.apple.com)는 브랜드 아이덴티티를 완벽하게 반영한다.
사이트는 깔끔한 레이아웃, 간단한 색상 팔레트, 직관적인 네비게이션을 특징으로 하며,
각 제품의 혁신적인 특성을 강조하는 이미지와 비디오로 구성되어 있다.
- 에어비앤비 (Airbnb)
브랜드 아이덴티티:
Airbnb는 개방성, 모험, 다양성, 그리고 지역 커뮤니티와의 연결을 강조.
이 브랜드는 여행자가 로컬처럼 느낄 수 있도록 돕는 것을 목표로 함.
웹사이트:
Airbnb의 웹사이트(https://www.airbnb.com)는 이용자 친화적인 디자인으로 유명.
웹사이트는 따뜻하고 친근한 이미지를 사용하여 방문객을 맞이하며
검색과 예약 과정을 매우 간단하게 만들어 사용자 경험을 최우선으로 한다.
사진 중심 디자인:
홈페이지와 숙소 리스트에서는 크고 매력적인 사진을 사용하여 여행지의 매력을 전면에 내세운다.
이는 사용자에게 감각적 경험을 제공하고 탐험하고 싶은 욕구를 자극.
인간적인 요소:
각 숙소 페이지는 호스트와 여행자의 스토리를 강조하는 콘텐츠를 통해
개인적이고 인간적인 브랜드 이미지를 구축
글로벌 느낌:
다양한 언어 지원과 글로벌한 이미지 사용으로 세계 곳곳의 사용자들이 접근하기 쉽게 디자인됨.
- 나이키 (Nike)
브랜드 아이덴티티:
나이키는 역동성, 성취, 혁신을 강조하며 전 세계적으로
스포츠와 라이프스타일의 대표 브랜드로 자리잡고 있다.
웹사이트:
나이키의 웹사이트(https://www.nike.com)는 강렬한 이미지, 모티베이션을 주는 메시지,
그리고 스포츠에 초점을 맞춘 디자인으로 브랜드의 역동적인 아이덴티티를 반영한다.
사용자는 제품을 쉽게 검색하고 구매할 수 있으며, 브랜드 스토리와 연결되는 콘텐츠를 경험할 수 있다.
- 스타벅스 (Starbucks)
브랜드 아이덴티티:
스타벅스는 커뮤니티, 친환경, 고급스러운 커피 경험을 제공하는 것을 목표한다.
웹사이트:
스타벅스의 웹사이트(https://www.starbucks.com)는 친근하고 접근하기 쉬운 인터페이스를 제공,
지속 가능성과 커뮤니티 참여에 대한 브랜드의 약속을 강조함.
웹사이트는 브랜드 색상을 사용하여 일관된 느낌을 주며, 커피와 관련된 다양한 제품과 경험을 소개.
■ 8월 26일 - 9일차
■ 8월 28일 - 11일차
■ 인지 과학기초와 디자인과의 연계
● 인지과학이란 무엇인가
◎ 인지과학의 정의와 본질
인지과학은 인간의 ‘생각하는 능력’을 과학적으로 탐구하는 학문
인간이 어떻게 정보를 받아들이고, 저장하고, 해석하고, 사용하는가에 대한 체계적인 연구를 수행하며,
이러한 과정을 정보 처리 시스템으로 이해하려는 시도를 기반으로 함
구체적으로 인지과학은 우리가 일상에서 자연스럽게 수행하는
지각, 기억, 언어 사용, 문제 해결, 의사결정, 학습과 같은 지적 활동을 다룬다.
이러한 능력들이 뇌와 신경체계, 신체, 환경과 어떻게 상호작용하는지를 규명하는 것이 이 학문이 추구하는 핵심
단순히 “무엇을 생각하는가”를 넘어서 “어떻게 생각하는가”, “왜 그렇게 인지하고 반응하는가” 를 묻는 학문
◎ 인지과학이 학제 간 학문인 이유
인지과학은 단일 학문으로 출발하지 않았다.
오히려, 여러 학문들이 ‘인간 지성의 작동 원리’를 규명하려는
공동의 목표 아래 모여 형성된 통합적이고 복합적인 학문 영역이다.
주요 학문 분야
- 심리학 (Psychology)
인간의 행동과 정신 과정 전반을 연구.
인지과학에서는 정보를 처리하는 인간의 마음의 구조와 기능,
특히 주의, 기억, 학습, 사고, 감정 등의 내부 심리 메커니즘을 다룬다.
- 신경과학 / 뇌과학 (Neuroscience)
인간의 인지가 실제로 어떻게 신경계 및 뇌의 작용을 통해 구현되는지를 설명
예를 들어, 감각정보가 뇌에서 어떤 경로를 통해 처리되는지,
특정 기억이 어떤 뇌 부위와 관련되어 있는지 등이 이 분야의 핵심 연구 주제.
- 컴퓨터과학 / 인공지능 (Computer Science & AI)
인간의 사고 과정을 컴퓨터 알고리즘으로 모사하거나 구현한다.
인공지능, 머신러닝, 인간-컴퓨터 상호작용(HCI) 분야는 인지과학의 실험적/응용적 확장을 이끄는 기술적 토대를 제공함.
예: 인간처럼 학습하는 기계, 자연어 이해, 시각적 인식 알고리즘 등
- 언어학 (Linguistics)
인간 언어의 구조와 사용 방식을 통해 인지 구조를 이해
특히 언어가 어떻게 인간의 사고에 영향을 미치는지,
언어 습득과 의미 구성 방식은 인간 인지 시스템의 작동 원리를 간접적으로 드러내 줌.
- 철학 (Philosophy)
인간의 마음, 의식, 자유의지, 지각의 본질에 대한 개념적 근거를 제공.
예컨대, '마음은 기계처럼 설명될 수 있는가?', '의식은 물리적으로 설명 가능한가?' 같은 질문은
인지과학의 철학적 기초 위에서 성립됨.
- 인류학 (Anthropology)
인간의 인지 구조가 문화, 사회, 진화의 영향을 어떻게 받아왔는지를 탐구함.
인지의 문화적 차이, 학습의 사회적 맥락, 진화심리학적 기반 등이 인지과학을 보다 입체적으로 만드는 데 기여함.
◎ 인지과학의 핵심 목표: 인간의 정보 처리 메커니즘 해부
인간이 어떻게 외부 세계로부터 들어온 자극을 받아들이고,
그것을 어떤 방식으로 의미화하며, 나아가 기억하고 행동으로 연결시키는지를 해명하는 데 있다.
다시 말해, 인간의 인지과정은 하나의 정보 처리 시스템처럼 구조화되어 있다고 가정하며,
이 시스템을 과학적으로 모델링하고 설명하는 것이 인지과학의 핵심 사명이다.
예로 우리가 웹사이트의 화면을 보았을 때, 시각적 정보는 눈을 통해 들어와
뇌의 시각 피질로 전달되며, 이미 머릿속에 저장된 스키마(schema)와 비교되어
'이건 메뉴다', '이건 버튼이다'라는 식으로 해석됨.
이러한 일련의 과정은 단순해 보이지만 수많은 인지 메커니즘이 작동하고 있으며,
인지과학은 이 과정을 시간 순서, 처리 구조, 뇌 활동, 행동 반응의 형태로 연구하고 모델링한다.
◎ 디자인과 인지과학
디자인은 단순히 ‘형태’와 ‘미적 요소’를 창출하는 작업이 아니다.
사용자가 제품, 서비스, 또는 디지털 인터페이스와 상호작용하면서 경험하게 되는 일련의 인지적 과정을 구조화하는 작업임
여기서 중요한 전제는, 디자인이라는 결과물이 결국 인간의 ‘뇌’에서 처리된다는 사실이다.
사용자는 시각, 청각, 촉각 등의 감각기관을 통해 외부 자극(디자인 요소)을 수용하고,
이를 바탕으로 인지적 해석, 판단, 기억화, 감정 반응, 행동 선택까지 수행함.
따라서, 인간의 인지 시스템이 어떻게 작동하는지를 모르는 상태에서 설계된 디자인은
사용자에게 혼란을 유발하거나, 오류를 증가시키며, 나아가 제품의 신뢰성과 사용 지속 의지 자체를 저해할 수 있다.
반면, 인지과학의 원리를 이해하고 적용하는 디자이너는
더 명확하게 사고하고, 더 효과적으로 설계하며, 사용자의 주의를 관리하고 기억을 설계할 수 있는 능력을 갖출수 있다.
◎ 인지적 기반 없는 디자인의 실패 예시
디자인 실패는 단순한 스타일의 미스가 아니라, 사용자의 인지 능력과 정보 처리 구조를 고려하지 못했을 때 발생한다.
시각적 지각의 실패
예) 배경과 버튼의 색상이 유사하여 버튼이 존재하는지조차 인식되지 않음
➞ 인간의 시각 피질은 ‘대비’에 반응함. 충분한 명도 차와 시각적 계층 구조가 없으면 대상 자체가 눈에 들어오지 않는다.
작업 기억의 과부하
예) 설문지나 회원가입 폼에 과도한 질문, 다양한 분기와 조건
➞ 작업 기억(working memory)은 동시에 5~9개 정도의 정보를 유지할 수 있는 한계가 있다.
UI에 너무 많은 선택지를 동시에 제시하면 인지적 부하를 넘어 ‘인지 마비(cognitive paralysis)’ 상태에 빠지게 된다.
주의 분산과 전환 실패
예) 중요 CTA(Call To Action)가 여러 개 동시에 노출되거나, 페이지마다 UI 구조가 달라 사용자 주의가 분산됨
➞ 인간의 주의력은 제한된 자원이며, 목적성 없는 탐색이나 일관되지 않은 UI는 주의 전환의 인지 비용을 증가시키고.
이는 곧 이탈률로 연결된다.
◎ 인지과학 기반 디자인이 제공하는 전략적 가치
- 선택 아키텍처(Choice Architecture) 설계
사용자는 자유롭지 않는다. 제시된 정보의 구조, 순서, 표현 방식에 따라 선택이 유도된다.
인지과학은 인간이 어떻게 결정을 내리는지, 그 과정에서 어떤 편향(bias)과 휴리스틱(heuristic)을 사용하는지를 설명하고,
디자이너는 이를 기반으로 사용자의 결정 경로를 설계할 수 있다. (예: 기본값 설정, 제한된 옵션 제공, 추천 강조)
- 기억 기반 설계(Memory-Friendly Design)
인간은 인터페이스를 항상 처음부터 배우는 것이 아니다.
기억 속 스키마(schema), 일관된 시각 패턴, 반복 노출은 학습된 행동을 촉진한다.
UX의 핵심은 '기억하기 쉽게 만드는 것'이며, 이는 단순한 UI 반복이 아니라,
기억 구조를 강화하는 방식으로 디자인 요소를 배치하는 것을 의미한다.
- 주의 설계와 몰입 구조 구성
정보가 많다고 전달되는 것이 아니다. 정보는 ‘인식되는 구조’로 배치되어야 하며,
시선의 흐름(flow), 대비의 원리, 시각적 계층(hierarchy), 공간적 간격(white space)을 통해
사용자에게 정보의 중요도와 흐름을 알려주는 것이 핵심이다.
이는 주의가 머무는 시간과 이동 경로를 예측 가능하게 만든다.
◎ 좋은 디자인이란
좋은 디자인은 단순히 아름다운 시각적 결과물이 아닌,
인간의 마음이 움직이는 방식과 가장 잘 호환되는 시스템이다.
사용자의 인지 한계와 능력을 이해하는 디자이너는, 시선을 어떻게 유도하고,
정보를 어떻게 구조화하며, 감정을 어떤 방식으로 설계할지를 명확히 인식하고 행동한다.
즉, 인지과학은 디자인을 단순한 표현에서 사고, 판단, 행동까지
확장된 인간 경험 전체의 설계로 끌어올리는 과학적 프레임워크이다.
◎ 인지과학의 기본 질문
- 인간은 어떻게 정보를 지각하고, 의미를 부여하며, 행동으로 전환하는가?
인지과학의 중심이자 UX 설계의 출발점으로 사용자는 화면을 보며 색과 형태, 텍스트를 시각적으로 ‘지각’하고,
이를 과거 경험이나 기대와 비교하며 ‘의미’를 해석한다.
이후 어떤 버튼을 클릭하거나, 정보를 스크롤하거나, 이탈하는 등의 ‘행동’으로 이어진다.
이 과정은 매우 빠르고 무의식적으로 일어나지만, 디자이너는 이 흐름을 설계할 수 있다.
- 기억은 어떤 방식으로 저장되고 호출되는가?
인간의 기억은 단기 기억(Working Memory)과 장기 기억(Long-term Memory)으로 나뉘며,
설계자는 이 구조를 반드시 이해해야 한다.
작업 기억은 처리 가능한 정보의 양이 매우 제한되어 있으며, 평균적으로 7±2 개의 단위만 유지할 수 있다.
- 뇌와 마음은 어떤 방식으로 사용자 경험(UX)에 영향을 미치는가?
뇌는 감각 입력 → 지각 → 의미화 → 감정 반응 → 의사결정이라는 순차적 처리 구조를 가진다.
이 모든 과정에서 디자인은 지속적으로 영향을 준다.
예를 들어, 단순하고 정제된 레이아웃은 전두엽의 부담을 줄이고 스트레스를 낮추며, 신뢰와 긍정적 감정을 유도한다.
반대로 복잡하고 산만한 인터페이스는 스트레스를 유발하며, 사용자의 판단력과 감정 반응을 왜곡시킨다
- 인간은 왜 때로 비합리적 선택을 하며, 그 패턴은 어떤가?
인간의 결정이 항상 논리적이지 않다는 사실을 강조함.
이는 ‘인지 편향(Cognitive Bias)’이라는 개념으로 설명된다
◎ HCI와 인지 과학의 만남
HCI(Human-Computer Interaction)는 인간과 디지털 시스템 사이의 상호작용을 연구하는 분야
여기서 중요한 것은 '기술'보다 '사용자'이며, 디자인은 인간의 뇌에 최적화되어야 한다는 인지과학적 접근이 필수적임
“기술은 인간의 뇌가 이해할 수 있는 방식으로 설계되어야 한다.”
즉, 아무리 뛰어난 기능이라도 사람이 이해하고 사용할 수 없다면,
그것은 존재하지 않는 것이나 다름없다.
디자이너는 코드나 알고리즘이 아닌, 인간의 ‘생각’, ‘오류 가능성’, ‘기억 구조’, ‘감정 반응’을 이해해야 한다.
- 기술 중심에서 인간 중심으로의 전환
과거의 시스템 설계는 기능 중심적으로 '기계가 무엇을 할 수 있는가'에 초점을 맞추었다면,
오늘날의 HCI는 ‘사용자가 무엇을 이해할 수 있고, 어떻게 사용할 수 있으며, 어떤 경험을 느끼는가’에 중점을 둔다.
이러한 전환은 단순한 관점의 변화가 아니라,
실제 사용자와의 상호작용에서 발생하는 문제 해결 능력, 인지 오류 방지, 감정적 만족도 향상과 직결됨.
HCI는 ‘컴퓨터가 인간처럼 생각해야 한다’가 아니라,
‘컴퓨터와 상호작용하는 방식이 인간의 뇌가 처리할 수 있는 구조로 설계되어야 한다’는
근본적인 사고 방식을 요구한다.
● 인간의 정보처리 과정과 디자인의 연계
◎ 인간은 정보를 어떻게 받아들이고 처리하는가?
우리가 웹사이트를 사용하거나 애플리케이션을 탐색할 때,
사용자는 단순히 화면에 보이는 것을 “보는 것”에 그치지 않고
그 정보를 해석하고 판단한 후 행동으로 이어간다.
이 일련의 과정은 정보처리 과정(information processing process)으로 설명되며,
인간이 환경으로부터 정보를 받아들이고 활용하는 인지 메커니즘의 핵심 개념이다.
이 과정은 대체로 입력(Input) → 저장(Storage) → 처리(Processing) → 출력(Output)의 단계로 구성되며,
컴퓨터 구조와 유사한 방식으로 설명되기 때문에 ‘정보처리 이론’은
인간의 뇌를 일종의 인지적 컴퓨터로 비유하여 설계의 기반 모델로 자주 사용된다.
이 모델은 특히 사용자의 행동을 유도하고 사용자 경험을 극대화하려는 UI/UX 디자인에서 매우 유용하게 활용된다.
◎ 정보처리 구조의 주요 단계
1) 감각 등록기 (Sensory Register)
인간은 외부에서 들어오는 수많은 자극을 모두 받아들이는 것이 아니라,
이를 감각기관(눈, 귀, 피부 등)을 통해 수 밀리초에서 1초 이내의 매우 짧은 시간 동안 임시로 저장한다.
예를 들어 화면에 갑자기 등장하는 팝업 창, 배경에서 흐르는 음악, 알림음 등은 감각 등록기를 통해 포착되지만,
사용자의 주의를 끌지 못하면 인식되지 않고 바로 사라지게 된다.
이러한 감각 등록기의 특징을 디자인에 반영하려면, 사용자가 웹사이트에 들어오자마자 시선을 사로잡는 요소가 필요함.
예를 들어, 사용자의 시각적 중심에 위치한 이미지, 높은 색 대비를 가진 버튼, 강한 모션을 가진 배너는
이 감각 입력을 장기 인식으로 연결하는 첫 단계이다.
2) 주의 집중 (Attention)
모든 감각 정보가 인식되는 것은 아니다.
주의(attention)는 인간이 가진 인지 자원 중에서도 가장 한정적인 요소이며,
이 자원이 어디에 할당되는지가 전체 사용자 경험을 좌우함.
예를 들어 화면에 수많은 버튼이 있다면, 사용자는 ‘자신에게 중요한’ 요소에만 주의를 기울이며, 나머지는 무시한다.
이러한 맥락에서, 디자인의 핵심은 사용자의 주의 자원을 효율적으로 유도하는 것이다.
대표적인 예로는 Z-패턴 또는 F-패턴과 같은 시선 흐름을 고려한 레이아웃 전략이 있으며,
이는 사용자가 정보를 읽어들이는 자연스러운 흐름을 기반으로 중요 정보를 적절히 배치하는 기술이다.
3) 단기기억과 작업기억 (Short-Term Memory / Working Memory)
주의를 통해 필터링된 정보는 단기기억으로 넘어간다.
단기기억은 15~30초 동안 정보를 유지할 수 있으며, 그 용량은 일반적으로 7±2개로 매우 제한적이다.
즉, 동시에 많은 정보를 전달하면 오히려 인지 부하를 유발해 사용자는 아무것도 기억하지 못하고 이탈할 수 있다.
작업기억은 이 단기기억의 한 형태로, 우리가 정보를 논리적으로 분석하고 판단하는 데 사용하는 핵심 공간이다.
정보의 비교, 선택, 분류, 해석 등의 모든 작업은 이 작업기억에서 일어난다.
디자인적으로는 한 화면에 너무 많은 항목을 나열하는 대신,
정보를 청크(chunk) 단위로 나누고, 중요도에 따라 계층적으로 배치하는 것이 바람직하다.
예를 들어, 쇼핑몰의 카테고리를 ‘남성의류 → 상의 → 셔츠’로 분류하는 것처럼
사용자의 인지적 부담을 덜어주는 구조 설계가 필요하다.
◎ 베들리Baddeley의 작업기억 이론과 디자인 적용
Ⅰ. Baddeley의 작업기억 체계 구조
Allan Baddeley는 기존의 단순한 ‘단기기억’ 개념을 확장하여,
인간의 기억 시스템을 작업(Task) 중심의 다중 구성 모델로 제시했다.
이 모델은 우리가 UI와 인터페이스를 다룰 때, 정보를 어떤 시스템으로 받아들이고
가공하며 반응하는지를 설명하는 이론적 틀이다.
1. 중앙집행기 (Central Executive)
정보의 흐름을 전체적으로 조율하고, 어떤 정보에 주의를 줄지 결정하는 ‘인지 관리자’ 역할을 수행한다.
예를 들어, 웹사이트 탐색 중 광고 배너를 무시하고 콘텐츠 본문에 집중하는 선택도 이 중앙집행기의 판단에 따른 것이다.
특징:
의사결정
주의 분배
자원 할당
작업 전환
-> 디자인 적용
사용자에게 너무 많은 정보를 한 번에 제공하면 중앙집행기의 자원 할당 능력을 초과하여 ‘인지 과부하’를 유발한다.
따라서 정보의 계층화(Hierarchy), 시선 유도, 1단계 1기능의 UI 흐름 등이 이 자원 관리를 보조해주는 핵심 전략이다.
예: 한 화면에 여러 기능을 밀어넣는 대신, 단계적으로 탐색하게 하는 ‘탭’, ‘진행 바’, ‘슬라이드 분할’ UI
2. 음운 루프 (Phonological Loop)
언어 정보, 특히 말소리나 글자, 숫자 등의 정보를 짧은 시간 동안 반복하며 유지하는 시스템
이는 내면의 ‘머릿속 낭독기’로 비유할 수 있으며, 사용자는 버튼의 이름, 라벨, 짧은 설명을 이 루프를 통해 기억한다.
-> 디자인 적용
음성과 텍스트를 함께 제공하는 UI는 이 루프를 활성화시켜 학습과 이해를 돕는다.
예: 튜토리얼에서 음성 내레이션 + 자막 텍스트 → 청각과 시각 자극의 동시 결합으로 기억 강화
짧고 반복 가능한 언어 표현은 기억에 더 잘 남습니다.
예: “지금 저장하기” vs “현재 내용을 안전하게 저장합니다” → 전자가 음운루프에 더 적합
3. 시공간 스케치패드 (Visuospatial Sketchpad)
시각적 이미지, 객체 위치, 공간 배열 등을 처리하는 ‘내면의 화이트보드’ 같은 체계이다.
아이콘의 위치, 버튼의 위치, 인터페이스 구성 등은 대부분 이 시스템에 의해 기억되고 유지된다.
-> 디자인 적용
버튼 위치의 일관성 유지는 시공간 스케치패드의 기억 자극을 강화하여 사용자 반응속도를 증가시킨다.
→ 예: 모든 저장 버튼이 항상 우측 하단에 위치할 경우, 사용자는 학습 없이도 자동으로 클릭 가능
시각적 흐름(Reading Path)과 인터페이스 간격(Spacing)을 전략적으로 배치하여,
시각 정보를 더 오래 유지하고 더 빠르게 탐색할 수 있도록 유도해야 한다.
반복된 UI 패턴은 시공간 스케치패드의 자동 작동을 자극한다.
4. 에피소드 버퍼 (Episodic Buffer)
다양한 감각 정보(시각, 청각, 언어 등)와 장기기억에서 호출된 배경 정보를 결합하여
하나의 상황 단위로 통합하는 처리 공간이다.
사용자가 현재 보고 있는 화면을 이전의 기억, 감정, 목적과 연결하여 해석하는 기능을 함.
-> 디자인 적용
UI에 스토리텔링 구조나 상황 기반 정보 설계를 도입하면 에피소드 버퍼를 활성화할 수 있다.
예: ‘이전에 본 제품과 유사한 추천’, ‘최근 검색 기반의 맞춤 콘텐츠’ → 장기기억과 현재 시각 정보의 통합
맥락적 도움말, 진행 기반 튜토리얼, 또는 ‘사용자의 지난 행동 요약’은 에피소드 구성에 결정적으로 작용함.
Ⅱ. 디자인 실무 적용 사례 요약
구성 요소 기억 유형 UX 적용 전략
중앙집행기 주의 조절 정보 계층화, 단계 나누기, 분산된 정보 피하기
음운루프 언어 기억 음성+텍스트 병행, 짧고 명확한 라벨 구성
시공간 스케치패드 시각 위치 기억 버튼 위치 일관성, 인터페이스 정렬, 반복 구조
에피소드 버퍼 종합 기억 스토리 기반 흐름, 최근 사용 기록 기반 추천, 연속성 설계
Ⅲ. 결론
Baddeley의 작업기억 모델은 단지 뇌 구조에 대한 이론이 아니라,
디자인 설계가 사용자의 기억 자원에 어떻게 맞춰야 하는지를 알려주는 실용 도구이다.
디자인이 사용자에게 쉽고 빠르게 이해되도록 하려면,
작업기억의 각 구성 요소에 맞는 정보 자극과 구조 설계가 반드시 필요하다.
기억은 의지로 작동하지 않는다. 구조에 따라 작동한다.
이러한 구조적 대응이 바로 ‘인지 기반 UX 디자인’의 핵심임
■ 9월 1일 - 12일차
◎ Norman의 실행-평가 간극 모델
Ⅰ. ‘간극(Gulf)’ 용어 사용이유?
디자인이 아무리 정교하더라도, 사용자가 제품이나 시스템을 마주할 때 생기는
“무엇을 해야 할지 모르겠다”, 혹은 “했는데 잘 되었는지 모르겠다”는 인지적 단절이 빈번하게 발생한다.
이러한 단절은 시스템 자체의 결함이 아닌, 사용자와 시스템 사이의 이해 차이,
즉 ‘간극’에서 비롯되며, 이는 사용 경험(UX)을 망치는 핵심 원인임.
1. 실행 간극 (Gulf of Execution)
― 사용자는 무엇을 해야 할지 모른다.
사용자는 명확한 목표를 가지고 시스템에 접근함.
예를 들어 “이메일을 보내고 싶다”, “상품을 장바구니에 담고 싶다”는 목적이 있을 수 있다.
그러나 이 목적을 달성하기 위해 어떤 기능을, 어디서, 어떻게 작동시켜야 하는지가 명확히 드러나 있지 않다면, 사용자는 목표를 행동으로 옮기지 못하게 됨.
이처럼, 목표는 있지만 조작 방법을 몰라서 행동이 정지되는 상태가 실행 간극임.
-> 대표적 사례:
버튼이 있는지조차 눈에 띄지 않음:
예를 들어 ‘삭제’ 기능이 텍스트 링크로 작게 배치되어 있거나, 색상 대비가 낮아 배경에 묻혀 있을 경우
기호나 아이콘이 모호해서 기능을 유추할 수 없음:
햄버거 아이콘이나 세 줄 메뉴가 낯선 사용자(특히 고령층)에게는 ‘이것이 메뉴라는 것’을 알 수 없음
순서와 흐름이 제시되지 않음:
예를 들어 ‘다음 단계로 이동’이 분리되어 있거나, 이전 단계를 거치지 않으면 버튼이 활성화되지 않음에도 설명이 없는 경우
-> 디자인 전략:
명확한 시각화와 라벨링
아이콘만 있는 버튼에는 반드시 텍스트 또는 툴팁을 함께 제공
예: ‘→’만 있는 버튼 대신 “다음 단계로 이동”이라고 명시
조작 가능성을 시각적으로 표현
‘눌러보라’고 말하지 않아도 누를 수 있음이 드러나야 함
예: 그림자, 색상 변화, 커서 변화(hover 시 pointer), 버튼 테두리 처리
초보자 중심의 흐름 설계
온보딩, 초기 진입 유도, 단계별 안내를 통해 ‘무엇을 해야 하는지’ 차근히 설명
예: 튜토리얼 슬라이드, “지금 무엇을 해야 하는지” 설명하는 안내 문구
오류 없는 시작 가능성 보장
사용자가 기능을 잘못 사용하더라도 되돌릴 수 있다는 신뢰 제공
예: “취소”, “되돌리기” 버튼 확보
2. 평가 간극 (Gulf of Evaluation)
― 사용자는 행동 결과를 알 수 없다.
사용자가 어떤 기능을 실행했을 때, 그 행동이 시스템에서 어떤 변화를 일으켰는지를 알아차릴 수 없을 때 평가 간극이 발생함.
이는 ‘했는지, 안 했는지, 성공했는지, 실패했는지’를 모르기 때문에 발생하는 불안과 혼란을 의미함.
-> 대표적 사례:
버튼을 클릭했는데 아무런 반응 없음 :
버튼이 눌렸는지, 요청이 진행 중인지 불분명함
입력값이 저장되었는지 알 수 없음 :
예: “회원가입 완료” 버튼을 눌렀으나 페이지 변화 없이 그대로 유지됨
에러 메시지가 모호하거나 부재:
예: “오류가 발생했습니다”만 뜨고, 무엇이 잘못되었는지 알 수 없음
-> 디자인 전략:
즉각적인 피드백 제공
모든 상호작용에 대해 시각적, 청각적 또는 촉각적 반응 제공
예: 버튼 클릭 시 색 변화, 진동, 전환 애니메이션, 로딩 아이콘 등
명확한 상태 메시지 출력
단순히 “성공”이 아니라, 어떤 일이 일어났는지를 설명하는 문장 사용
예: “3개의 항목이 성공적으로 저장되었습니다. 계속하시겠습니까?”
실시간 반응 시각화
예: 슬라이더, 업로드 진행률 표시, 입력값에 따라 버튼 활성화 상태 변화
결과의 확인 가능성 확보
사용자가 입력한 내용이 시각적으로 검증되도록 배치
예: 작성한 정보를 ‘미리보기’로 확인하거나, ‘요약 정보’를 제공
Ⅱ. 실행 간극과 평가 간극은 분리되어 있지만, 실무에서는 동시에 발생한다
사용자는 무엇을 해야 할지도 모르고, 무엇을 했는지도 모르고,
무엇이 되었는지도 모르는 상황에 놓이는 경우가 흔하다.
이는 시스템의 문제가 아니라, 인지 구조를 이해하지 못한 설계 문제임.
Ⅲ. 디자인은 이 간극을 다음과 같이 해소해야 한다:
사용자 상태 디자이너가 해야 할 일
행동을 못 한다 (실행 간극) 조작 가능한 요소를 명확하게 드러내고, 설명과 흐름을 시각적으로 구조화
결과를 알 수 없다 (평가 간극) 모든 인터랙션에 즉각적인 피드백과 상태 확인 수단을 제공
Ⅳ. UI/UX 설계자는 이 두 간극을 ‘없애는 사람’이다
Norman의 이론은 단순히 이론적 모델이 아니라, 실제 사용자 행동 실패의 핵심 원인을 설명하는 인지과학적 틀이다.
이 간극을 줄이는 것이 UX 디자인의 본질이며,
모든 인터페이스 설계의 출발점은 사용자가 행동할 수 있는 여지를 보이고, 그 결과를 신뢰하게 만드는 것에 있다.
Ⅴ. Norman의 사용자 행동 7단계 모델
-1단계~3단계: ‘행동 이전’ (Execution 과정)
1. 목표 설정 (Forming the Goal)
사용자는 어떤 목적을 가지고 시스템에 접근합한다.
예: “내 친구에게 메시지를 보내고 싶다”, “이번 달의 소비 내역을 보고 싶다”
-> 디자인 적용 포인트:
UI의 정보 구조는 사용자가 자신의 목표를 쉽게 떠올릴 수 있는 방식으로 구성되어야 한다.
첫 화면에서 주요 기능들이 명확히 드러나야 한다.
2. 의도 결정 (Forming the Intention)
사용자는 목표를 달성하기 위해 어떤 방식으로 접근할지를 결정한다.
예: “앱에서 메시지 아이콘을 눌러야겠다”
-> 디자인 적용 포인트:
메뉴, 아이콘, 네비게이션이 명확히 ‘무엇을 하는 것인지’를 암시해야 함
기능 이름, 아이콘의 의미, 기호의 직관성이 매우 중요
3. 실행 명령 생성 (Specifying the Action)
사용자는 의도를 실제 행동으로 구체화한다.
예: “하단 메뉴에서 메시지 아이콘을 클릭해야겠다”
-> 디자인 적용 포인트:
사용자가 행동하기 전, 인터랙션 요소(버튼, 메뉴)는 분명히 드러나 있어야 하며,
마우스 오버, 터치 가능 영역, 클릭 피드백이 분명해야 함
행위 유도성(Affordance) 확보가 필수
- 4단계: 행동 수행 (Executing the Action)
4. 행동 수행 (Executing the Action)
사용자가 시스템에 실제로 행동을 전달하는 단계입니다.
예: “메시지 아이콘을 클릭함”
-> 디자인 적용 포인트:
터치 지연 없음, 로딩 피드백 제공, 애니메이션 반응 등 사용자의 입력이 즉각 반영되어야 함
예: 클릭 후 버튼 색상 변화, 진동, 로딩 스피너, 슬라이드 전환 효과 등
이 단계에서 응답이 없다면 사용자는 ‘작동하지 않는다’고 느끼고 시스템 신뢰를 잃는다.
5단계~7단계: ‘평가 이후’ (Evaluation 과정)
5. 시스템 상태 인식 (Perceiving the State of the System)
사용자는 행동 결과로 시스템이 어떻게 변화했는지를 인지한다.
예: 메시지 입력 화면으로 전환됨
-> 디자인 적용 포인트:
사용자 행동 직후, 시스템 상태 변화가 명확히 시각화되어야 함
예: 페이지 전환, 인터페이스 하이라이트, 애니메이션 강조 등
6. 결과 해석 (Interpreting the State)
시스템이 제공한 피드백을 통해, 사용자는 자신의 행동이 ‘의도대로 수행되었는지’를 해석한다.
예: “아, 이제 메시지를 입력할 수 있게 되었네”
-> 디자인 적용 포인트:
구체적 언어로 결과를 설명하는 메시지가 필수
“완료되었습니다” → “메시지 전송이 완료되었습니다. 답장은 푸시로 알림이 갑니다”와 같이 맥락 기반 메시지 설계가 효과적
7. 결과 평가 (Evaluating the Outcome)
사용자는 전체 과정의 결과가 자신의 원래 목표와 부합했는지를 판단한다.
예: “내가 하려던 걸 제대로 했는가?”
-> 디자인 적용 포인트:
사용자 목표 달성 여부가 명확히 검증되어야 하며,
만약 목표와 어긋났다면 재시도할 수 있는 경로를 제공해야 함
예: 전송 실패 시 “다시 시도하기” 버튼, 자동 저장된 초안 복구 기능
Ⅵ. 사용자는 시스템 안에서 단 한 순간이라도 멈추거나, 혼란을 느끼면 그 전체 경험에 대한 신뢰를 잃게 된다.
Norman의 7단계 모델은 단순히 행동을 나눈 것이 아니라,
‘사용자가 끊김 없이 목표를 수행하고 만족할 수 있도록 유도하는 인지적 흐름’을 이해하라는 메시지임.
이 흐름을 설계하지 않은 UI는, 아무리 미려하더라도 사용 불가한 디자인으로 전락한다.
■ 9월 2일 - 13일차
● 뇌의 정보 처리 과정과 UI 설계 연계
◎ 인간은 정보를 어떻게 처리하는가?
인지과학은 인간을 단순한 감각 수용체가 아닌, 능동적으로 정보를 인식하고 해석하며 반응하는 ‘처리 시스템’으로 이해함.
이 관점은 컴퓨터의 입력-처리-출력 구조와 유사하지만,
인간은 감정, 기억, 주의력이라는 복잡한 요인을 함께 가진 존재이기에 더 복합적이고 정교한 방식으로 반응한다.
이러한 정보 처리 흐름은 다음의 6단계로 구분되며, 이 각각의 단계는 UI 설계에서 반드시 고려되어야 할 인지 요소입니다.
◎ UI 설계 적용예
1. 감각 입력 (Sensory Input)
뇌는 감각기관을 통해 외부 자극을 수용함.
시각, 청각, 촉각 등의 정보가 일차적으로 받아들여지며,
이는 아직 '의식적 정보'가 아닌 물리적 신호에 가깝다.
- 디자인 적용 전략:
시각 자극:
버튼 색상, 명도 대비, 아이콘 형태 등은 사용자 눈에 들어오는 ‘입력 포인트’가 된다.
→ 예: CTA 버튼은 주변 요소와의 대비를 통해 즉각적인 시각적 인식을 유도해야 합니다.
청각 자극:
알림음, 클릭 사운드, 오류음 등은 시스템의 상태 변화를 감지하게 함
→ 예: 파일이 업로드되었을 때 ‘딸깍’ 하는 짧은 피드백 소리
촉각 자극: 모바일에서는 진동을 통한 반응성 피드백도 효과적인 감각 자극으로 활용됨
감각 입력이 ‘강조되어야 할 정보’에 집중되지 않으면, 이후 단계로 넘어가지 않고 무시되거나 삭제됨.
2. 주의 집중 (Attention)
감각 자극 중 어떤 정보를 뇌가 ‘의식적 인식 대상’으로 전환할지는 주의(attention)가 결정한다.
이는 제한된 인지 자원을 배분하는 과정으로, 디자인의 시선 유도, 강조, 애니메이션 등은 이 단계에 큰 영향을 미친다.
- 디자인 적용 전략:
주요 정보 강조:
폰트 크기, 색상, 움직임, 여백을 통해 시선이 머무는 위치를 명확히 유도
→ 예: 제목은 굵고 크며, 핵심 CTA는 색상이나 위치로 돋보이게
정보의 시각적 순서:
Z-패턴, F-패턴 레이아웃은 사용자의 시선 흐름을 의도적으로 안내
주의 분산 방지:
하나의 화면에 너무 많은 정보가 있으면 주의는 분산되어 어떤 정보도 처리되지 않음
→ 예: 팝업, 사이드 메뉴, 배너가 동시에 등장하는 것은 피해야 함
3. 단기 기억 (Short-term Memory)
선택된 정보는 뇌의 단기 저장소로 전달되어 짧은 시간 동안 유지된다.
이 공간은 용량이 매우 작고 유지 시간이 수 초 내외이기 때문에, 여기에 맞는 정보량과 표현 방식이 필수적이다.
- 디자인 적용 전략:
핵심 정보만 제공:
하나의 문장 혹은 아이콘으로 요약된 내용이 효과적
→ 예: “이메일 주소를 입력하세요”라는 구체적 지시문
불필요한 반복 정보 제거:
단기 기억은 과부하에 취약하므로, 중복 메시지와 복잡한 설명은 피해야 함
단일 목표 구조:
한 화면에서 하나의 작업 목표만 부여하는 UI가 적합
→ 예: 단계별 로그인, 단계별 가입 절차
4. 작업 기억 (Working Memory)
작업 기억은 단기 기억보다 적극적이다.
비교, 분석, 판단, 선택이 이루어지며, 사용자가 UI 안에서 실질적인 ‘작업’을 수행하게 되는 핵심 단계.
이 단계에서 뇌는 ‘정보를 유지’하면서 동시에 ‘결정을 내리기 위한 가공’을 시도함.
- 디자인 적용 전략:
비교 UI 제공:
상품 비교, 옵션 선택, 가격 정렬 기능은 사용자가 판단을 내릴 수 있도록 지원
필터, 정렬 도구:
정보량이 많을수록 사용자 주도 선택을 돕는 도구가 필요
단계별 피드백 제공:
정보 선택→옵션 확인→결정 클릭까지의 흐름을 연속적으로 안내
이 영역이 과도하게 작동할 경우 사용자는 인지 피로를 느끼고 이탈할 수 있다.
→ 따라서 작업 기억에서 선택의 수를 최소화하고, ‘결정 피로’를 줄이는 것이 관건.
5. 장기 기억 (Long-term Memory)
장기 기억은 반복, 연결, 정서적 경험 등을 통해 정보가 지속적으로 저장되는 영역.
이 공간은 UX 측면에서 매우 중요하다. 왜냐하면, 인터페이스 구조, 기능 위치, 브랜드 정체성 등은 이 영역에 학습되면 반복 학습 없이도 자연스러운 사용이 가능해지기 때문이다.
- 디자인 적용 전략:
일관성 있는 인터페이스 설계:
메뉴 위치, 색상, 버튼 형태가 페이지마다 달라지면 장기 기억 형성 방해
반복 학습 유도:
튜토리얼, 툴팁, 도움말 반복 노출은 사용자의 기억을 공고히 함
감정 기반 설계:
즐거운 경험, 성취 메시지, 시각적 쾌감을 통해 기억에 강하게 각인됨
→ 예: “축하합니다! 새로운 기능을 마스터하셨습니다”
6. 반응 출력 (Response Output)
최종적으로 뇌는 판단한 내용을 바탕으로 행동을 선택.
이 행동이 클릭, 이동, 전환, 입력 등의 형태로 나타나며,
사용자가 자신의 입력에 대해 어떤 반응이 나오는지 즉각 확인할 수 있어야 UX가 완성된다.
- 디자인 적용 전략:
피드백 메시지 제공:
사용자의 입력에 대해 즉각적이고 명확한 반응 메시지를 제공
→ 예: "성공적으로 업로드되었습니다" + 아이콘 변화
상태 전환 표시:
클릭 후 페이지가 바뀌거나, 버튼이 활성화되는 시각적 변화가 필요
→ 예: 로딩 스피너, 전환 애니메이션
오류에 대한 설명 제공:
잘못된 입력에 대해 단순한 경고가 아니라 구체적 해결 방법을 안내해야 함
→ 예: "비밀번호가 짧습니다. 최소 8자를 입력해주세요"
인간의 뇌는 정보를 순차적으로 수용하고 해석하며 반응하는 체계이다.
UI 설계는 이 뇌의 작동 흐름을 정확히 이해한 상태에서,
각 인지 단계별 최적화된 시각 자극과 정보 구조를 설계해야 한다.
감각 자극은 주의를 유도하고, 주의는 기억을 일으키며, 기억은 판단을 형성하고, 판단은 행동으로 전환된다.
이 일련의 흐름에 따라 설계된 UI만이 인지 부하를 최소화하고, 사용성을 극대화하는 디자인이 될 수 있다.
■ 9월 3일 - 14일차
'Web 수업자료 > Web 정규' 카테고리의 다른 글
| UIUX 디자인 24-08 (4) | 2025.08.23 |
|---|---|
| Web 3 25-08 (4) | 2025.08.12 |
| Web 2 25-07 (0) | 2025.07.15 |
| 웹 디자인 1 25-07 (4) | 2025.07.15 |
| Web 4 25-06 (1) | 2025.06.09 |