UI/UX 기획

Posted Mar 26, 2025

By 79gun79

14 min read

UI/UX 기획

UI/UX

UI: 디자인할 대상, 서비스의 구조나 형태 (서비스 관점)
- 제품을 편리하게 사용할 수 있도록 설계하고 디자인
UX: 방법론, 사용자 경험 (사용자 관점)
- 사용자의 라이프 사이클과 제품의 특성 고려 → 아이디어를 상품화하고 서비스 기획

UI/UX 기획

사용자 경험

최종 사용자
회사의 서비스
해당 제품과의 상호작용 를 모두 포함

UI/UX 업무

국내는, 한 명의 디자이너가 모두 진행(한 팀에서 이뤄짐)
UI의 개선 결과로 새로운 UX가 도출 (UI/UX 연관성)

UX 방법론

UX

하드웨어 UX: 물리적 형태의 외관 ⇒ 인간공학, 제품디자인
소프트웨어 UX: 비물리적인 부분 제품의 디자인 ⇒ 인지심리
- UX 기획
- UI 기획
  - UI기획, UI디자인, UI개발

UI 기획 5단계

메뉴트리
- 중복 아이템 정리, 유사한 것끼리 묶기, Depth 결정, 메뉴간 이동 및 제목 선정
일관성
- 화면 영역 지정, 요소 배치, 사용자 입력의 피드백
  (→예: 버튼의 모양은 동일해야함, 중요한 것은 위의 영역에 할당,
  입력 양식에 들어오는 것에 대한 피드백의 일관성)
UI FLOW
- 길은 명확하고 단순하게 구성
유지보수
- 목적을 잊지 않도록 (기능에만 치우치지 않도록)
5초안에 시선 잡기
- 표시 내용 정리, 중요도 선정, 표현방법 선정 (창의성 있게, 시선을 끌 수 있도록)

UX 방법론 문제 정의

아이디어 → 시나리오 → 프로토타입

UX 방법론 - 체계

UX 피라미드 제시

6가지 계층: 유용성, 신뢰성, 사용성, 편의성, 감성, 의미성

위로 갈수록 달성하기 어려움. But, 우열을 가리는 것은 아님
이성적 영역: 유용성, 신뢰성, 사용성, 편의성
- 유용성: 무엇을 제공하여, 사용하게끔 함
- 신뢰성: 사용자가 서비스를 전적으로 믿도록
- 사용성: 쉽고 직관적이게
- 편의성: 사용자의 시간과 노력을 줄이도록
- 감성: 좋은 서비스에 즐거움까지 더하도록
- 의미성: 특별하고 중요한 의미를 지니도록

UX 방법론 - 구성요소

동기, 행동, 고충, 니즈, 태도 (+ 맥락)

고충 or 니즈만 알 때 (보통 상황)
행동 + 고충/니즈를 알 때
동기 + 행동 + 고충/니즈를 알 때
동기: 서비스를 이용하는 이유 (맥락에 영향 받음)
- 목적 의식 동기(예: 병원이용), 비목적 의식 동기(예: 쇼핑)
- 수동적 동기, 습관적 동기, 반응적 동기, 우연적 동기
행동: 연속된 이동 단계와 단계별 구체적 행위
고충: 서비스 이용이 매끄럽지 못한 부분. (트렌드)
니즈: 사회적인 변화와 새로운 변화에 민감함.

UX 방법론 - 여정

사용자가 서비스를 이용하는 과정

외부 탐색(서비스 접근전) → 접근 → 탐색 → 조회 → 주활동 → 이탈

접근, 탐색, 조회, 주활동 ⇒ 인증 개인화:
인증 개인화: 동일한 방식에 다른 인증방식 요구시, 인증 횟수 등의 문제
부가활동: 저장, 내려받기 등의 사용자 편의를 위해 모아놓은 기능

UX 디자인 영역

UI/UX 디자인

UI: 와이어프레임 설계
IA(정보체계구조): 메뉴 계층구조 설계
GUI: 그래픽 UI
Interaction: (예: The Thumb Zone [엄지영역])
User Flow: 사용시 화면 흐름

UX/ UI 디자인 프로세스

발견

목표 수립
관련 UX 분석: 경험적 요소 및 이용 맥락 파악
이슈 제기
데스크 리서치(책상에 앉아서 논문 보기, 자료조사 등..)
필드 리서치

도출

키파인딩: 의미 있는것만 간추림, 문제 제시
UX 모델링: 경험이 유사한것끼리 묶어 = 페르소나
인사이트: 앞으로 취해야할 변화 찾기

구체화

UX 전략
아이디어 도출: 새로운 경험 디자인
아이디어 평가
시나리오 설계

산출

IA 설계: 정보 정의→ 정보구조 설계 → 내비게이션 설계
→ 검색 설계 → 필터/태그 설계 → 레이블링
User Flow 설계
Interaction 설계: 손동작, 버퍼링 동작(1초이하는 X, 4초이하는 스피너… 시간에 따라 차이),
화면을 어떻게 전환시킬 것인지
프로토타이핑: 구체적인 형태 설계
UX 테스트: QA팀에서 진행
UX 가이드라인

프로젝트 - 업무 프로세스

신규 프로젝트

요구사항 발생
요구사항 수립
요구사항 구체화
일정 산정
킥오프 미팅-공식
서비스 정책수립, 대략적인 서비스 시각화
화면 설계
디자이너/ 개발자와 협업
QA
론칭 - OPEN
운영이슈확인 및 데이터 분석

기존 프로젝트 고도화

개선니즈 발생
요구사항 정리
일정 산정
디자이너/ 개발자와 협업
QA
론칭 - OPEN
운영이슈확인 및 데이터 분석

기존 서비스 운영

운영
데이터 분석
사용자 의견 분석
문제가 있는 경우 수정 → 프로젝트 고도화 과정 진행

애자일 방식

빠른 산출물
중간과정에서 진행되는 기획을 빠르게 수정 가능(변화 대응에 유연)
디자이너, 개발자의 자유도가 높음 → 창의적임
프로세스 내내 협업
주로 스타트업 방식

TFT 소집 / 서비스기획 미션 할당 → 상위 기획 → 기획안 작성 / 기획용 프로토타입
기획용 프로토타입 → 디자인 / 개발(Backend) → 테스트 → 오픈

폭포수(Waterfall) 방식

테스트 이전까지 산출물 고려 X
주로 대기업 방식

TFT 소집 / 서비스기획 미션 할당 → 아이데이션 → 기획안 작성 / 퍼플리싱 개발
디자인 (따로이뤄짐) → 프로토타입 → 개발(Backend) → 테스트 → 오픈
퍼블리싱 개발 → 테스트 → 오픈

프로젝트 관리

폴더관리 / 문서관리대장: 알아보기 쉽게 구성
파일명 규칙 설정: YYYY.MM.DD, 프로젝트명, 문서카테고리, 버전표시 등..
프로젝트 필요기능과 데이터 정의 예시
프로젝트 플로우 화면 정리 예시
프로젝트 정보 구조 작성(메뉴) 예시

프로젝트 기획문서

벤치마킹 보고서
- 벤치마킹 - 웹사이트 평가 예시
정보구조도 IA
- 정보구조도 예시
- 메뉴트리 예시

서비스 흐름도

Flow Chart 구성

기호	명칭	설명
⬜ 둥근 사각형	단말(Terminator)	시작(Start) 또는 끝(End) 지점 표시
➡️ 화살표	흐름선(Flowline)	처리의 흐름, 방향 표시
⬡ 육각형	준비(Preparation)	초기화 등 준비 작업 표시 (드물게 사용)
▭ 직사각형	처리(Process)	일반적인 작업 또는 처리 과정 표시
⪢ 평행사변형	입출력(Input/Output)	데이터 입력 또는 출력 표시
◇ 마름모	의사결정(Decision)	조건에 따른 분기 판단
⊓ 잘린 직사각형	표시(Display)	화면 등으로 결과 표시