서비스 기획 (4) UI와 UX

[1. 학습하기] - 기획자의 역량과 태도, 직무 이해하기

기획자의 역량과 태도, 직무 이해하기

이미지 출처 Pixabay

UX is focused on the user’s journey to solve a problem, UI is focused on how a product’s surfaces look and function.

이제는 너무 익숙해진 그 단어 UX/UI.

디지털 서비스에 대한 사용자의 눈높이가 높아지고 더 편리하고 좋은 서비스에 대한 경쟁이 심화되고 있는 지금,

사용자 만족도와 직접적으로 연관된 UX/UI 는  단순히 예쁜 디자인만을 요구하는 것이 아니라
사용자의 행동과 반응, 비즈니스 목표 등 많은 고민을 필요로 한다.

---

1. UX/UI 의 정의

UX (User Experience)

• 사용자가 제품, 서비스를 경험할 때 느끼는 모든 순간의 만족
• 사용자들의 경험 데이터를 분석하여 더 편하고 효율적인 방향으로 설계된 사용자 중심적 UI

UI (User Interface)

• 사용자가 제품, 서비스를 사용할 때 마주하게 되는 시각적인 부분
• 폰트, 컬러, 레이아웃, 로고 등의 요소 등으로 이루어진 인터페이스

2. 디자인 시스템

동일한 브랜드, 제품, 서비스 이용 경험을 위해 탄생한 디자인 시스템으로 Apple HIG(Human Interface Guideline) & Google Material Design 등이 있다. 금융, 커머스, 스타트업 등 다양한 도메인에서 동일한 UI,UX 경험을 위해 구축한다.

• 디자인의 원칙, 규격, 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성
• 다양한 채널에 걸쳐서 브랜드 Identity를 일관되게 전달하고 높은 수준의 사용성과 시각적 일관성 유지
• 팀 내, 팀 간의 언어 통일이 가능하며 디자인 및 개발 작업을 대규모로 신속하게 만들고 복제 가능
• 더 크고 복잡한 문제에 집중할 수 있도록 설계 리소스에 대한 부담 감소

화해 테크 블로그에 디자인 시스템을 구축하는 전체적인 과정이 자세하게 정리되어 있어 많은 도움이 되었다.

https://blog.hwahae.co.kr/all/tech/13236

 

3. UI/UX와 관련된 문서 정리

⑴ 스케치 Sktech

• 밑그림으로 서비스의 핵심적인 부분만을 집중적으로 고민
• 합리적인 구성과 좀 더 편리한 UX 인터랙션을 상상
• 여러 가지 UI 형태를 배치하면서 생각의 다양성을 넓히고 가장 논리적으로 적합한 UI 찾기

⑵ 와이어프레임 Wireframe

• 선만으로 이루어진 프레임 구조
• 네모와 텍스트 정도의 간단한 조합으로 정리된 영역을 합쳐 페이지 전체의 구성 확인
• 영역과 구성 요소를 단순하게 표현하여 디지털 문서화

⑶ 목업 Mockup

• 화면 UI가 2D 형태로 만들어져 있는 형태
• 스타일, 컬러, 정렬, 컨텐츠까지 지정되어 있는 정적인 상태

⑷ 아트보드 Artboard

• 하나의 화면이 다양한 해상도에서 어떻게 보이는지 서비스에 포함된 화면들을 순서대로 펼쳐놓은 형태
• 한 화면 내에서의 변화나 한 화면이 보여주는 다양한 변주

⑸ 프로토타입 Prototype

• 동적인 화면 형태로 다양한 인터랙션을 통해 실제 서비스와 거의 흡사하게 작동
• 웹사이트나 앱의 흐름, 상호작용 방식을 경험하고 사용성과 실현 가능성을 테스트
• Figma, Adobe XD, Farmer, Protopie, Axure 등 다양한 툴 활용

⑹ 스토리보드 Storyboard

• 정책, 프로세스, 와이어프레임, 디스크립션 등을 모두 포함한 종합적인 문서
• 작업 이력과 버전, 목차, 개요, 화면 ID, UI 플로우차트, 정책 포함