📌
1. UI 디자인 핵심 원리
2. 사용자 경험을 향상시키는 방법
3. 캐러셀 만들기

1. UI 디자인 핵심 원리

사용자 이해하기

• 사용자 경험의 향상과 참여 유도를 목적으로 한다.
• 서비스를 사용하는 사용자를 이해하고 공감하는 것이 가장 중요하다.
• 모든 의사결정은 사용자의 니즈와 기대를 중심으로 이루어져야한다.

💡 사용자 중심 디자인 (User Centered Design)
제품이나 서비스를 설계하는 단계에서 사용자가 겪는 문제에 공감하고 이해하여 이를 해결하기 위한 개선안을 제공함으로써 사용자에게 만족스러운 경험을 제공하는 접근 방식

직관적인 디자인

사용자가 새로운 제품을 접했을 때 인터페이스를 따로 학습하지 않아도 쉽게 이해하고 사용할 수 있어야한다.

사용자 행동 유도

- 버튼

색상의 대비를 사용하여 사용자의 눈에 쉽게 띌 수 있도록 한다.
사용자 흐름을 고려하여 필요한 위치에 배치한다.

- 링크

더 자세한 내용을 확인할 수 있도록 연결하는 역할
일반적으로 파란색으로 표현하고 밑줄을 추가하여 사용자가 클릭이 가능하다는 것을 알 수 있도록 한다.

정보전달

- 픽토그램

텍스트로만 되어있는 정보들을 픽토그램이나 아이콘을 활용하여 사용자가 쉽고 빠르게 이해할 수 있도록 돕고 중요한 내용을 강조하여 빠르게 전달한다.

- 아이콘

문화적, 언어적 차이를 넘어 사용자의 즉각적인 이해를 돕는다.

핵심 요소

- 색상의 대비

강조하고 싶은 요소와 배경의 색상 대비를 높인다.

- 간단한 레이아웃

정보 구성과 디자인 요소를 적절하게 배치하여 사용자가 이해하기 쉬운 간결한 레이아웃 구조를 만든다.

- 유연한 인터페이스

사용자가 원하는대로 설정을 할 수 있는 기능을 제공한다. (ex. 알림 끄기)

- 시각요소 사용

누구나 이해하기 쉬운 시각 요소를 사용하여 사용자와의 상호작용을 돕는다.

일관된 디자인

사용자에게 신뢰감을 형성하는데 중요한 역할을 한다.

신뢰감 형성

• 사용자가 운영체제, 화면 크기 등 여러 사항에 구애받지 않고 동일한 서비스를 경험할 수 있도록 한다.
• 예측 가능하고 일관된 사용자 경험을 제공함으로써 사용자가 느낄 불확실성은 줄이고 신뢰감은 높일 수 있다.

업무 효율성 증대

• 업무 시간을 단축시키고 빠르게 결과물을 만들 수 있다. (ex. 작업 상황에 따라 디바이스를 다르게 사용)
• 새로운 기능이 추가되더라도 일관된 사용자 경험을 통해 빠르게 적응하고 이해할 수 있다.

핵심 요소

- 디자인 시스템 구축

인터페이스에 사용되는 요소에 공통된 기준을 적용하여 일관된 디자인을 가능하게 한다.

- 사용자 피드백

사용자로부터 지속적으로 피드백을 받아 그 내용을 분석하고 디자인에 적용하여 사용자에게 친숙하고 일관된 경험을 제공한다.

가독성을 고려한 디자인

사용자가 정보를 얻는 과정에서 텍스트는 쉽게 읽힐 수 있어야하며 정보는 보기 쉽고 간결해야한다.

여백 활용

• 여백을 통해 중요한 요소를 강조하고 내용이 정돈된 느낌을 줄 수 있다.
• 너무 많은 요소를 여백 없이 배치한다면 가독성이 떨어지고 중요한 정보를 확인할 수 없다.

콘텐츠 그룹화

비슷한 주제 혹은 내용을 가지는 컨텐츠들끼리 그룹화하여 사용자가 보기 쉽고 필요한 정보를 빠르게 찾을 수 있도록 한다.

크기와 비율

중요도에 따라 요소의 크기와 비율을 조정하여 원하는 내용을 강조할 수 있고 요소들 간 계층을 구성할 수 있다.

계층 구조

• 핵심 정보를 빠르고 쉽게 확인할 수 있도록 시각적 계층 구조를 형성해야한다.
• 텍스트의 크기, 컬러, 위치를 활용하여 형성할 수 있다.

명확한 피드백 제공

사용자가 인터페이스와 상호작용하며 작업을 수행할 때, 그에 대한 적절한 피드백을 기대한다.
ex. 정보를 모두 기입했을 때, 확인 버튼 색상 변화

즉각적인 반응 제공

사용자의 행동에 따라 시각적 혹은 청각적 피드백을 제공하여 사용자의 다음 행동을 유도한다.

시각적 변화

다음 작업을 수행하기 위한 필요한 조건이 모두 충족이 되었을 경우, 시각적 피드백을 제공하여 사용자가 이를 인식할 수 있도록 한다.

접근성을 고려한 디자인

신체적, 환경적 조건에 관계없이 모든 사용자가 동등하게 웹에 접근하여 원하는 작업을 수행할 수 있도록 정보의 평등한 사용이 보장되어야한다.

다양한 사용자가 제품을 이용할 수 있기 때문에 비즈니스 기회의 확장으로도 이어진다.

핵심 요소

- 텍스트 + 아이콘

보다 명확한 정보 전달이 가능하다.

- 입력 필드

오류가 발생했을 경우, 입력 필드 주변에 오류에 대해 알려주거나 해결책을 제시해주는 텍스트를 배치한다.

- 텍스트 컨텐츠

텍스트로 이루어진 컨텐츠 안에 링크나 버튼을 배치할 경우 이를 분리하여 배치해야 스크린 리더가 위치를 파악하기 쉽다.

- 텍스트 + 라인

텍스트 컨텐츠를 색과 명도 대비만으로만 표현하기보단 테두리를 추가하여 형태적 차이를 표현한다.

- 명도대비

요소 간 색상 대비를 충분히 적용하여 가독성을 높인다.

💡 WCAG (Web Content Accessibility Guidelines)
저시력자, 고령자도 쉽게 인식할 수 있는 텍스트와 배경의 명도 대비는 4.5:1 이상이어야 한다.

- 키보드 내비게이션

사용자가 마우스 없이 키보드로만 웹사이트 안에서 이동할 때, 모든 기능에 접근하고 사용할 수 있도록 설계해야한다.

- 스크린 리더

스크린 리더가 화면 요소들을 올바르게 읽을 수 있도록 설계해야한다.

2. 사용자 경험을 향상시키는 방법

직관적인 내비게이션

사용자가 자신이 어디에 위치해있는지 알고 원하는 목표를 이루기 위한 방향을 쉽게 정할 수 있도록 하는 것은 중요하다.

명확한 메뉴 구조

- 예상 가능한 카테고리

사용자가 웹사이트의 모든 페이지를 방문하지 않아도 어디에 어떤 정보가 있는지 예측할 수 있어야 한다.

- 일관된 메뉴 구조

모든 페이지의 메뉴 구조가 일관되게 유지되어야 사용자가 혼란을 겪지 않고 원하는 방향을 쉽게 찾을 수 있다.

- 메뉴 depth 최소화

사용자가 3번 이상 클릭하지 않고도 원하는 목적지에 도달할 수 있어야한다.

비주얼 요소 활용

- 픽토그램, 아이콘 활용

명확하고 직관적인 시각 요소를 사용하여 사용자에게 빠르게 정보를 전달한다.

- 활성화 효과

현재 사용자가 위치해있는 메뉴를 강조하여 사용자가 알 수 있도록 한다.

다양한 디바이스 지원

디바이스나 운영 체제에 상관 없이 일관된 경험을 제공하는 것은 중요하다.

반응형 디자인

- 디바이스 최적화

데스크탑, 태블릿, 모바일 등 다양한 디바이스에 최적화된 디자인을 제공해야한다.

- 그리드 시스템

다양한 해상도에 최적화되고 일관된 레이아웃을 구현하기 위해 그리드 시스템을 사용한다.

터치 스크린 최적화

• 손가락으로도 쉽게 터치할 수 있도록 충분한 터치 영역을 확보하고, 요소 간 적절한 간격을 유지한다.
• 버튼, 아이콘 요소의 최소 사이즈를 확인하고 적용한다.

사용자 피드백 반영

• 사용자의 피드백을 정기적으로 수집하고 그 내용을 반영하는 지속적인 개선 과정이 필요하다.
• 지속적인 개선은 사용자의 경험에 긍정적인 영향을 줄 수 있고 사용자의 충성도를 높일 수 있다.

피드백 수집 방법

- 사용자 VOC 분석

💡 VOC (Voice of Customer) ; 고객의 소리
사용자의 VOC를 통해 반복적으로 발생하는 문제를 인식하고 해결한다.

- 사용자 설문 조사

설문조사를 통해 서비스에 대한 사용자의 만족도나 경험을 빠르게 수집하여 데이터화한다.

- 사용자 인터뷰

사용자의 생각과 행동을 직접 확인하며 사용자가 느끼는 불편함과 니즈를 파악한다.

3. 캐러셀 만들기

디자인 숙련 개인 과제 중에서 캐러셀 만들기를 할 때 가로 드래그를 할 때 페이지네이션까지 같이 움직여서 그냥 가로 스크롤만 적용하고 제출했었다.
그래서 해설 영상을 보며 드래그 트리거를 적용하여 스크롤이 넘어가도록 만들어보았다!

1. 사진 세장 한번에 선택해서 프레임으로 묶어주기
2. 페이지네이션까지 추가해서 같이 프레임으로 한번 더 묶기
3. 프레임이 한장 사이즈여야 사진 한장만 보이기 때문에 크기 조정 (나의 경우 375x375)
4. 3개 복사해서 각각 다른 사진이 보이도록 위치 조정
5. 세개 한 번에 선택해서 컴포넌트 세트로 만든다.
6. 베리언츠 각 순서에 맞게 변경
7. 한장씩 인터렉션 추가 (트리거 : onDrag, 액션 : Change to, 애니메이션 : 스마트 애니메이션)
8. 두번째 사진에 드래그 인터렉션이 두개가 적용되어있으면 원활하게 작동이 안 되므로 슬라이더에 인터렉션 추가

완성 🫶

🎙️ 느낀점

어제 TIL을 작성했는데 제출을 안 해서 안 낸 사람이 되었다.
그래서 쓰자마자 바로 제출을 해버렸다!

오랜만에 여유롭게 강의를 들은 것 같은데 2강은 2시간이 넘어가니 또 부지런히 들어야할 것 같다.
그리고 디자인 입문 개인 과제 피드백을 이제야 봐서 튜터님을 오늘 찾아뵈었다.
가기 전에 긴장을 엄청 많이 하고 갔었는데 튜터님께 질문을 하고 답변을 들으니 과제를 하며 막혔던 부분들이 어느정도 해소가 되었다.
튜터님께 질문을 하는 것을 너무 두려워하지 않아도 될 것 같다!