서비스 기획 시작하기

UX/UI 개념부터 이해하고 넘어가기

by 인류에 대한 기여

Jan 20. 2025

People don't know what they want until you show it to them

스티브 잡스

UX & UX 디자인 11가지 법칙

1. 제이콥의 법칙

사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.

2. 피츠의 법칙

대상에 도달하는 시간은 대상까지의 거리와 대상 크리와 함수 관계에 있다

3. 힉의 법칙

의사 결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.

4. 밀러의 법칙

보통 사람은 작업 기억(Working Memory 에 7 (+-2) 의 항목밖에 저장하지 못한다.

5. 포스텔의 법칙

자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게

6. 피크엔드 법칙

인간은 경험 전체의 평균이나 합계가 아니라, 저정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.

7. 심미적 사용성 효과

사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.

8. 폰 레스토프 효과

비슷한 사물이 여러개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.

9. 테슬러의 법칙

복잡성 보존의 벅칙이라고도 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일수 없는 일정 수준의 복잡성이 존재한다.

10. 도허티 임계

컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터렉션하면 생선성은 급격히 높아진다.

11. 힘에는 책이이 따른다.

UX & UX 리서치

UX 리서치(User eXperience Research)는 말 그대로 UX를 조사하는 것, 즉 사용자가 제품/서비스와 상호작용하는 과정을 조사하는 일입니다. 우리 제품/서비스의 사용자가 누구인지부터 시작해, 제품/서비스를 어떻게 이용하고 있는지, 어느 부분을 특히 좋아하고 어디서 불편을 느끼는지, 앞으로 더 원하는 것은 무엇인지 등을 파악하는 것입니다.

UX 리서치의 목적은 우리 제품/서비스를 사용자에게 가장 적합한 형태로 만드는 겁니다. 이를 위해 제품/서비스의 개선 방향을 찾는 거죠. 이를 통해 사용자 이탈을 방지하고 매출을 개선함으로써 비즈니스 성장을 기대할 수 있습니다.

예를 들어 우리가 온라인 패션 쇼핑몰을 운영한다고 해볼까요? 한 사용자가 우리 쇼핑몰에서 신발을 구매하려고 합니다. 사용자는 앱을 열고, 메인과 상세 페이지를 탐색하고, 사고 싶은 제품을 검색하고, 장바구니에 담고, 결제하고, 배송 현황을 확인하고, 구매 후기를 남깁니다. 그러면서 만족감을 느끼기도, 불편한 점을 발견하기도 합니다. 이처럼 제품/서비스를 접한 순간부터 사용하면서 느끼는 감정까지, 이 모든 과정이 바로 사용자의 경험, UX입니다.

1. UX

1. 유저 리서치(User Research)

* 브랜드 "페르소나"를 만들자

2. 정보 설계(Information architecture)

: 서비스를 구성하는 정보의 구조와 우선순위, 흐름의 설계등을 포함, 서비스가 구축의 가장 기초적인 작업이면서 이 작업을 통해 와이퍼 프레임까지의 일괄적인 작업 진행이 가능하다.

* feature : 제품이나 서비스에서 하나의 기능 단위를 뜻하는 단어, 핵심 기능을 키피처(Key feature)라고 칭함

* feasibility : 실현 가능성이란 디자인 - 개발 리소스, 기간, 예산 등을 현실적으로 따져보았을 때 실현 가능한지를 의미, 대개는 아이디어가 선정되거나 프로젝트에서 개발해야 하는 피처를 정할 때 팀이 리소스는 충분한지, 실현 가능한 일정인지 확인하기 위해 사용

3. 와이어프레임(Wirdframes)

서비스의 대략적인 모습을 모노톤으로 진행, 화면의 배치와 흐름을 보여줄 수 있기 때문에 UI 디자이너나 개발자들이 이를 보고 피드백을 주기도 하고 이를 통해 UX와 UI 가 연결

4. 유저 시나리오(User Scenarios)/스토리보드

와이어 프레임에 시나리오, 플로우, 설명이 추가되면 스토리 보드가 됨. 와이어 프래 레임의 방향만 알려주면 스토리보드는 서비스의 ㅣ각 페이지 구성 요소나 콘텐츠의 설명, 페이지 간의 이동 흐름, 로직등을 기술한 '문서'임

1) 버젼 정보(Document history)

2) 서비스 정책(Service policy)

3) 정보 구조도(Information Archtecture)

4) 와이어 프레임(WireFrame)

5) 기능 프로세스(Function process)

6) 기능 디스크립션(Function description)

5. 로우/미드파이 프로토타입(Lo-fi/Mid-fi prototype)

* Fidelity : 디자인이 디테일한 정도나 컬러, 폰트 등이 얼마나 최종디자인에 가까운지(혹은 얼마나 공수를 많이 들였는지)를 나타내는 말이다. 쉽게 말해 앱을 스케치한다 했을 때 세세히 모사하고 표현했는지 정도를 뜻한다.

Low Fidelity(줄여서 Lo-Fi)는 최소한의 구성요소를 갖춘 정도로 그림으로 말하면 '크로키 정도다. 반대로 High Fidelity(줄여서 Hi-Fi)는 완성에 거의 가까운 형태다'

2. UI

1. 디자인 시스템(Design system)

* Brendcrumbs : 빵가루라는 의미로 사용자가 사이트 내에서 현재 어디에 위치했는지를 알려준다, 많은 양의 콘텐츠나 계측 구조로 이루어져 있는 경우, 사용자의 내비게이션을 돕는다. 논리적 계층 구보가 없는 단일 레벨 시스템에서는 유효하지 않다. 카테고리가 많고, 하위 카테고리도 많은 아마존 같은 커머스에서 자주 사용