[디자인부트캠프] Chapter 6. UI/UX 개념 입문

1. UI

UI : User Interface, 사용자 인터페이스

사용자가 제품(웹사이트, 앱 등)과 상호작용할 때 직접 보거나 조작하는 화면 요소. 버튼, 메뉴, 아이콘, 입력창 같은 시각적 구성요소가 포함됨.

 

👉 쉽게 말해 사용자가 보는 디자인!

 

UI 디자인 목표

 

UI 디자인은 사용자가 디지털 제품(웹사이트, 앱 등)과 상호작용할 때 시각적으로 보이는 모든 것을 설계하는 과정. UI 디자인의 목표는 단순히 예쁘게 만드는 것❌ 명확하고 직관적이며 사용자가 쉽게 조작할 수 있도록 만드는 것.

 

UI 핵심 요소

 

레이아웃	- 사용자가 화면을 볼 때, 어떤 요소나 정보들을 어디에 어떻게 배치할지 결정하는 구조 - 사용자가 흐름을 쉽게 따라가기 위해 레이아웃 설계가 잘 돼야 함
컬러	- 브랜드 정체성, 사용자의 감정과 행동을 유도하는 중요 요소
타이포	- 정보 전달의 가장 기본적인 요소 - 사용자가 보는 정보의 80% 이상이 글자로 이루어지기 때문에 읽기 쉽고 명확한 타이포는 핵심 요소!
버튼	- 사용자에게 특정 액션을 유도하고 UX의 흐름과 방향을 제시하는 길잡이 - 통일된 색감과 디자인, 애니메이션 반응과 같은 피드백, 너무 작지 않은 사이즈로 명시성 확보가 중요!
아이콘	- 글자 대신 그림으로 정보를 전달하는 시각적 요소 - 불분명하거나 추상적인 디자인으로 혼란을 주면 안되며, 전체 디자인의 흐름을 고려한 일관된 디자인 - 위치와 크기가 적절해야 함
여백/정렬	- 여백이 있어야 화면에 답답함이 없이 보기가 편하며, 요소 간 적절한 여백(거리)가 시각적 하이어라키를 형성 - 정렬을 잘 맞춰야 깔끔하고 정돈되어 컨텐츠를 한눈에 읽기 쉬움 - 여백/정렬은 어느 정도 정해진 틀과 규칙이 있다
피드백	- 로딩 진행도와 같이 사용자에게 현 상황을 이해할 수 있도록 알려주는 요소

 

2. UX

UX : User Experience, 사용자 경험

사용자가 제품이나 서비스를 사용할 때 느끼는 전반적인 경험. 사용의 편리함, 만족도, 기대 충족 여부가 포함됨.

 

👉 쉽게 말해 사용자가 느끼는 감정과 전체적인 흐름!

택시를 당장 부르고 싶은 사용자의 기대를 충족하기 위한 카카오 택시의 UX 흐름/재밌는 콘텐츠를 빨리 찾고 싶은 사용자를 위한 넷플릭스의 전략

 

UX 디자인 목표

 

UX 디자인의 목표는 사용자가 제품을 사용할 때 불편함, 스트레스❌ 기분 좋게 원하는 목표를 이루도록 도움을 주는 것.

 

UX 핵심 요소

 

사용자 리서치	- 사용자에 대한 이해, UX의 첫 걸음이자 기본 - 사용자의 입장에서 문제를 알아내고 해결책을 찾아야 하기 때문에 효율적이고 유효한 사용자 리서치가 필요
페르소나	- 그리스어 '가면'에서 파생한 단어로 개인이 사회적으로 드러내는 모습 - 유저의 페르소나를 정의하기 위해 이름, 연령대, 직업, 성격, 니즈, 행동 등을 고려하여 작성하며 3명 이상의 여러 가지 페르소나를 상정하기도 함 - 자세하게 설정한 페르소나를 통해 서비스를 분석하고 사용자에게 공감
사용자 여정	- 페르소나에서 시작된 공감을 설계로 옮기는 지도 - 사용자가 어떤 상황에서 어떤 생각과 감정을 갖는지 - 유저 페르소나와 함께 고려하는 게 일반적, 뎁스와 단계에 따라 어떻게 변화하는지를 통해 필요한 요소를 추가하는 (예: 4단계 대기에서 페르소나 지현이 초조함을 느끼는 현상을 발견, 실시간 위치 추적 혹은 예상 도착 시간 알림을 추가) 등 서비스 보완이 가능

 

3. 반응형 / 적응형

 

반응형 디자인

 

하나의 레이아웃이 다양한 화면크기에 따라 유연하게 변형된다. 하나의 디자인이 모든 해상도에 대응하여 화면 너비에 따라 콘텐츠 배치나 크기가 자동으로 조절된다. 대표적인 예로 유튜브가 해당된다.

 

적응형 디자인

 

미리 정의된 특정 해상도(320px, 768px, 1024px 등)에 맞춰 고정된 레이아웃을 각각 설계한다. 데스크탑, 태블릿 pc, 휴대폰 등 디바이스 별 화면 크기를 감지해 가장 적합한 디자인을 선택해 보여준다. 대표적인 예로는 네이버가 있다.

페이지 크기에 따라 썸네일 리스트의 열이 자연스럽게 변경되는 대표적인 반응형 웹사이트 유튜브

PC버전과 모바일 버전이 따로 제공되는 대표적인 적응형 웹사이트 네이버