[디자인부트캠프] UI 디자인을 위한 설계

서론

12일차인 오늘은 문제를 해결하기 위해 구상한 기능들을 실제로 어떻게 구현하는 지에 대해 디자인 설계 방법에 대해 배우고 직접 UI 디자인을 위한 설계를 경험해보는 시간을 가졌다.

복습하기

> 디자인이란?

1. 문제를 창의적이고 실용적으로 해결하기 위해 계획하고 표현하는 과정
2. 우리 주변의 모든 것을 계획하고 구성하는 과정이며 단순히 예쁘게 만드는 것을 넘어 사용자의 편의와 경험을 고려하여 문제를 해결하고 새로운 가치를 창출하는 활동

> UX/UI란?

UI : User Interface, 화면구성이나 디자인
UX : User Experience, 사용자의 경험 (어떤 문제점이 있고 어떻게 해결을 해야하는가)
❊ 전반적인 Product가 '어떤 목표를 가지고 있는가?'와 '사용자가 어떻게 경험하고 있는가?'를 생각하면 UX에 다가가기 더 쉽다.

눈으로 이쁜 것만으로는 차별점을 둘 수 없기 때문에 UX가 중요하고, 더 나은 서비스 제공을 통해 점유율을 높일 수 있다는 점을 기억해두자!

> 디자인 실력을 키우는 법

이론/기초 공부→디자인 자료 학습 및 분석→디자인 시도와 반복→반복
❊ 이 과정을 반복함으써 더 나은 결과를 도출해낼 수 있다.

디자인 설계

문제를 해결하기 위해 구상한 기능들을 실제로 구현시키는 과정이다.

> UI 설계

UI(User Interface)는 사용자가 제품과 상호작용하는 시각적 요소
단순한 화면 디자인이 아닌 시용자가 제품을 쉽게 이해하고 사용할 수 있도록 계획하는 과정이다.

• 심미적인 안정감과 더불어 전달하고자 하는 정보들을 사용자에게 쉽게 전달할 수 있도록 디자인하는 것이 핵심
• 정보전달을 위해서는 내가 디자인한 Product가 무엇을 위한 Product인지 파악하는 것이 중요
• 유저들이 가장 필요로 하는 것이 무엇인지를 생각하며 화면을 배치 (Flow설계까지도 UI설계)

> UI에서 중요한 것

심미적인 부분 (디자인 일관성) : 버튼크기, Color, Typography 등 일관된 Style Guide(규칙)가 필요
기능적으로 분류 : Button을 Default, Hover, Desable로 나누는 것과 같이 여러 경우의 수 생각하기
정보 구조화 : 기능을 체계적으로 정리하고, 정보가 논리적인 흐름을 가지도록하기

> UI Design Process

※ Wire Frame은 선, Figma, Component로 제작하는 등 종류가 다양하다.

IA (정보구조 설계)

앞서말한 정보 구조화를 체계적으로 작성한 문서

Wire Frame

선(Wire)으로 만든 틀(Frame)으로 서비스(웹사이트, 앱)의 UI와 기능을 나타내는 시각적 Diagram
※ 계속해서 Feedback과 수정이 이루어지는 초기단계

UI 디자인의 초기 설계도로 기능 배치와 화면 구조를 시각적으로 표현하는 과정이며 Color, Font, image 없이 기능과 정보 배치를 중심으로 제작한다.

흐름의 구현과 화면이동 경로를 밑그림처럼 그려보는 과정이라고 생각하면 된다.

> Wire Frame의 중요성

1. 디자인을 시작하기 전에 기능과 구조를 먼저 정리해 효율적인 UI 개발 가능
2. 팀원(기획자, 개발자) 간의 원활한 커뮤니케이션 가능
3. 초기 설계 단계에서 오류를 발견하고 개선할 기회 제공

> Wire Frame 작성방법

Low-Frdelity : 빠르게 손으로 그린 Sketch (종이, 화이트보드 활용)
High-Frdelity : 디지털 도구로 사용한 정교한 Wire Frame (Figma, Adobe XD, Balsamiq)

Flow Chart/Work Flow

Wire Frame에 포함되어 있는 개념으로 사용자가 서비스를 이용하는 전체 흐름을 시각적으로 표현한 것
Wire Frame이 개별 화면 구조라면, Work Flow는 화면 간 이동과 사용자 흐름을 정의
※ Flow Chart 또한 경우의 수를 생각하는 것이 중요

요즘은 표로 작성하는 경우가 많지는 않으며 이 Flow가 잘 작성이 되어야지 개발자와 기획자 간의 소통이 원활하고 내가 원하는 디자인을 구축할 수 있다.

> Work Flow를 작성하는 이유

• 사용자가 어떤 경로로 이동하는지 파악 가능
• 버튼을 누르면 어디로 이동하는지 등 사용자 행동을 예측
• UI 디자인과 개발 과정에서 논리적인 구조를 제공

> Work Flow 작성단계

1. 핵심 사용자 흐름 정의 : 로그인, 회원가입, 상품 구매 등 주요 시나리오 정리
2. 화면 간 연결 설정 : 버튼 클릭 → 다음 화면으로 연결되는 방식 명확화
3. 예외 상황 정의 : 사용자가 입력을 잘못했을 때, 오류 메세지는 어덯게 처리될 지 정리

IA Wire Frame 구성정리

위 과정을 종합에 사용자에게 전달되는 과정을 거친다.

그려보기

오늘 배운 내용을 토대로 직접 Flow Chart를 그려보고 IA구조를 뜯어보며 그래프화 해보기, Wire Frame과 Work Flow까지 그려보는 시간을 가지며 서비스들이 정부구조의 위계를 따르고 있는 과정과
서비스들이 어떻게 구조화가 되어있는지에 대해 알아보았다.

▼ 아래는 내가 'Figma'를 통해 작성한 'CGV'앱의 IA구조와 Work Flow이다.
<'CGV'앱 IA구조, Work Flow>

사실 사용자입장에서는 단편적인 부분만 보이기 때문에 그냥 Design System 배치를 이런식으로 했구나~ 정도만 알았지 이렇게 체계적이고 구조적인 과정을 통해 한 화면이 디자인된다는 것은 처음 알아서 놀라웠다. 처음에는 이게 맞는건가 싶기도 했지만 작성을 해가며 이 과정의 필요성과 중요성을 다시금 깨닫고 이해할 수 있어서 좋았다.