[디자인부트캠프] 디자인 실전

서론

4주차의 마직막인 오늘은 Design 실전을 위한 Design 기본 원칙을 재상기 시키고 App&WEB의 기본 원칙을 통해 성공적인 User Interface를 제작하는 방법을 찾아 내 WEB Design에 적용해보는 시간을 가졌다.

사용자 습관 이해도

WEB Site User Interface (UI) Design을 진행할 때, WEB Site의 목적과 사용자의 컴퓨터 환경을 고려하는 것은 필수, 그러나 이와 함꼐 간과해서는 안 될 중요한 요소가 사용자의 습관

이에 따라, UI Designer들은 가능한 한 폭 넓게 사용자 습관을 연구하고 분석하여, 이러한 습관이 UI Design에 반영되도록 노력해야 함

ex) 인스타그램을 습관적으로 들어가는 것은 이 사용자 습관 이해도가 잘 설계된 사례
ex) 휴대폰을 사용할 때 자연스럽게 Scroll을 내리는 것

UI 기본 원칙

> 명확성(Clarity)

사용자가 UI를 쉽게 이해할 수 있도록 설계

• 사용자가 현재 System의 상태를 쉽게 파악할 수 있어야 함
• Button, Icon, Menu 등의 의미가 직관적으로 전달되어야 하며, 불필요한 장식요소는 피해야 함

❊ "삭제" Button에 휴지통 Icon과 "삭제(Delete)"라는 Text를 함께 제공

> 알관성(Consistency)

UI 요소들은 동일한 Style과 Pattern을 유지

• Button Style, Color, 글꼴, 여백, Interaction 방식 등이 일관되게 유지
• 같은 기능의 요소는 같은 위치에 배치하고, 같은 명칭을 사용

※ Native Mobile App에서 iOS와 Android 각각의 UI Guide Line을 준수하여 통일성 유지

> 단순함(Simplicity)

불필요한 요소를 제거하고 핵심 정보만 제공하여 사용자의 인지부담을 줄여야 함

• "Keep It Simple"원칙을 따르며, UI가 복잡하지 않도록 설계
• 한 번에 너무 많은 정보를 제공하면 사용자가 혼란을 느낌
• 우선순위가 높은 요소를 강조하고, 부차적인 요소는 최소화

※ 회원가입 Form에서 필수 입력 Field만 제공하고, 선택 Option은 숨김 처리

> 피드백 제공(Feedback)

사용자의 입력이 System에서 어떻게 처리되고 있는지 즉각적으로 알려주어야 함

• 사용자가 Click, 입력, 이동 등의 동작을 수행할 때 System이 반응해야 함
• Button Click 시 색상이 변하거나, Roading 상태를 표시하는 Spinner를 제공
• 오류 발생 시 적절한 Messege와 해결 방법 제공

❊ "File Uproading..." Messege와 함꼐 진행률 표시

> 유연성(Flexibility)

다양한 사용자의 요구와 Device 환경에 적응할 수 있어야 함

• UI는 사용자의 경험 수준에 따라 다르게 제공될 수 있어야 함 (초보자와 전문가를 위한 Mode 제공)
• 반응형(Responsive) Design을 적용하여 다양한 화면 크기(Mobile, Tablet, Desktop)에서도 원활히 동작해야 함
• 사용자별 설정을 지원하여 UI를 개인화할 수 있도록 함

※ Dark Mode와 Light Mode를 제공하여 사용자 취향에 맞게 조정

> 사용자 중심(User-Centered Design, UCD)

사용자의 요구를 반영하고 직관적인 경험을 제공

• UI를 Design할 때 사용자의 관점에서 생각해야 하며, UX Research를 기반으로 개선
• 사용자의 행동 Pattern을 분석하고, 목표를 신속하게 달성할 수 있도록 UI를 설계

※ 쇼핑몰 App에서 사용자가 자주 찾는 Category를 홈 화면 상단에 배치

사용자 중심으로 생각하는 것이 가장 중요하다고 할 수 있음

> 예측 가능성(Predictability)

사용자가 기대하는 방식으로 UI가 동작해야 함

• Button을 Click하면 예상한 동작이 실행되어야 하며, 갑작스러운 변화는 피해야 함
• 일반적인 UI Pattern을 따르고, 이미 익숙한 Interface Style을 유지하는 것이 중요

※ Hamburger Menu를 Click하면 Navigation Menu가 펼쳐짐

> 오류방지(Error Prevention)

사용자가 실수하지 않도록 UI를 설계

• 중요한 작업을 수행하기 전에 확인 Messege를 제공하여 실수를 방지
• 입력 Fillter를 적용하여 오류 발생 가능성을 줄임

※ "삭제" Button을 Click하면 "정말 삭제하시겠습니까?"라는 확인 창 제공

> 가독성(Readability)

사용자가 Text와 정보를 쉽게 읽을 수 있도록 해야 함

• 적절한 글자 크기, 줄 간격(Line Height)), 색상 대비(Contrast)를 유지
• 핵심 정보는 강조하고, 긴 문장은 짧고 명확하게 표현

※ 16Px 이상의 Font크기, 충분한 줄 간격, 대비가 높은 색상 조합 사용

가독성은 Designer의 기본소양, Reference를 많이 찾아보는 게 중요

> 접근성(Accessibility)

장애를 가진 사용자도 쉽게 UI를 사용할 수 있도록 고려해야 함

• 색양(색맹) 사용자를 고려하여 색상만으로 정보를 전달하지 않도록 함
• 화면 낭독기(Screen Reader) 사용자를 위해 적절한 대체 텍스트(Alt Text) 제공
• Keyboard Navigation이 가능하도록 설계하여 마우스를 사용할 수 없는 사용자도 접근할 수 있도록 함

※ 입력 Field에 Label을 명확히 제공하고, Button에 적절한 색상 대비 적용

UI 설계 예시

> Contents 형식 지정

기기 화면에 맞는 Layout을 생성, 기본 Content를 확대/축소 또는 가로로 Scroll하지 않고 볼 수 있어야 함

> Touch 제어기

Touch 동작을 위해 설계된 UI 요소를 사용하여 App과의 상호작용이 쉽고 자연스럽게 느껴지도록 함

> 대상 Tap 하기

손가락으로 정확하게 Tap할 수 있도록 크기가 최소 44px x 44px인 제어기 생성

> Text 크기

Text 크기를 11px 이상으로 하여 일반적인 거리에서 화면을 확대하지 않고도 Text가 선명하게 보일 수 있게 함

> 대비

Text가 선명하게 보이도록 서체 색상과 배경 간에 대비가 명확하게 함

> 간격

Text가 겹치지 않도록 하기, 행 높이와 문자 간격을 늘려 가독성을 향상

자간은 최대한 건들지 않는 것이 좋다.

> 고해상도

모든 Image Asset의 고해상도 버전을 제공

> 왜곡

항상 의도한 가로 세로 비율로 Image를 표시하여 왜곡을 방지

> 구성

제어기를 수정하는 Content 가까이에 배치하여 읽기 쉬운 Layout을 생성

> 정렬

Text, Image, Button을 정렬하여 사용자에게 정보와 연관성을 보여줘야 함

적용해보기

앞서 배운 내용을 바탕으로 잘 만들어진 WEB의 Reference를 찾아보고 분석을 통해 내가 이전에 제작한 WEB화면의 구성을 점검해보고 잘못된 부분을 고쳐 적용해보는 시간을 가졌다.

Reference를 통해 찾은 WEB Page를 Crome의 검사 기능으로 Design System을 확인해볼 수 있다!

내가 분석하고 수정 후 적용해 본 'Maow' WEB Page의 일부이다.

▼ 아래에서 내가 'Figma'로 제작한 Reference 분석과 수정보완을 거친 'Maow' Page의 전체 화면을 확인할 수 있다.
<'Maow' WEB 화면 Design>

Crome의 도구인 검사기능이 유용해서 더 호기심을 가지게 되었고 Reference를 찾아보는 능력을 기르고 있는 것 같아서 기분이 좋았다. 추후에 Code에 대한 개념도 배워보고 싶고 확실히 이전에 제작한 WEB Design과 비교했을 때 위의 구성요소를 고려하며 수정하니 더 직관적이고 가독성이 좋은 WEB Design을 제작할 수 있어서 중요성을 다시 한 번 깨달았고 뿌듯했다.