brunch

매거진 UX UI 수업

You can make anything
by writing

C.S.Lewis

by 두블링 한윤석 Jul 06. 2023

UX/UI 디자인 프로세스(1)

UX/UI 디자인 프로세스의 방법론 설명과 각 방법론을 사용하는 이유

한윤석 (두블링 DOBLING, UI/UX 디자이너)

안녕하세요, 현업에서 UX/UI 디자이너로 활동하고 있는 두블링 한윤석(@duddwoff_yoon)입니다.


저번 강의에서는 UX와 UI가 각각 무엇인지 그 차이점과 각 분야에서 필요스킬은 무엇인지 알아보았습니다. 그렇다면 이번에는 소위말하는 'UX/UI'디자인을 하기위해 어떤 프로세스가 필요한지 그리고 그 프로세스를 왜 사용하는지에 대한 내용을 공유하겠습니다.


실제로 UX/UI 디자이너로 취업을 하기위해 포트폴리오를 만들때 각 프로세스에 대해서 왜 이 프로젝트에 이런 프로세스를 적용하였는지 제대로 설명할 수 있어야 합니다.

왜 그러한 방법론을 사용했는지 고민이나 생각없이 그냥 프로세스만 따라서 학원에서 포트폴리오를 찍어내듯이 만들었다면 면접에서 마이너스 요소가 됩니다.

왜 이러한 프로세스를 적용하였는지에 대해 집중하여 글을 읽어주시면 되겠습니다.





UX/UI 디자인 프로세스


UX/UI디자인을 하기위한 첫걸음

프로세스를 실행하며 잊지 않아야할 세가지

UX/UI디자인 프로세스를 들어가기전, 프로세스를 진행하면서 잊지말아야할 세가지가 있는데

첫번쨰는 사용자

두번째는 비즈니스

세번째는 맥락

입니다. UX/UI를 통해 제품을 만들어가면서 사용자를 위한 제품이기에 사용자의 경험을 항상 생각해야하고 제품이 돈을 벌어야하기에 비즈니스 측면(비즈니스 로직)도 생각하며 디자인을 해야합니다. 마지막은 맥락인데, 위의 설명은 유튜브 영상 강의에서 계속 설명하겠습니다.



프로세스

전반적인 프로세스


위 이미지에 UX/UI 디자인 프로세스의 단계가 잘 나와있습니다.

프로세스는 크게 문제 > 해결로 이어지는데 거기서 세분화 하자면 문제발견 > 문제정의 > 개발 > 전달로 프로세스가 이어집니다.



문제 - 문제발견 단계

문제발견 단계에서는 배경분석과 요구사항분석, 경쟁사 분석, WOM(Word of Mouth)분석, 벤치마킹, 유저리서치를 진행하게 됩니다.

이러한 분석과 리서치를 통해 많은 양의 문제를 발견하는 과정을 거칩니다.



문제 - 문제정의 단계

문제정의 단계에서는 문제 발견단계에서 나온 수 많은 문제점들을 걸르고 걸러서 가장 중요한 문제점을 Key finding하는 단계입니다.

무수한 문제점들을 어피니티 다이어그램 방법론을 통해 문제점끼리 카테고라이징하고 중요한 우선순위 문제들을 몇가지 뽑아냅니다. 그후 리서치와 문제점을 기반으로 사용자 모델링을 하고 사용자 경험 여정지도를 그려 제품을 사용하는 동안의 모든 여정에서 나타나는 문제점을 정리 합니다.




해결 - 개발 단계

문제를 발견하고 정의하였다면 이제 문제가 해결된 제품으로 개발하는 단계입니다.

여기서는 정의한 문제를 어떻게 해결할지 아이디어 브레인 스토밍을 거치고 해결방법을 제품으로 표현합니다.

제품으로 표현하는데 앞서 IA(정보구조), Userflow를 통해 사용자 여정을 정의하고 각 메뉴와 단계를 구성합니다.

그 후 와이어프레임을 통해 실제로 구현될 UI화면을 설계하게 됩니다. 여기서 디자인이 들어가기 보다는 레이아웃과 같은 구조 설계를 진행합니다.




해결 - 전달 단계

제품의 프로토타입이 나왔다면 여기서는 제품에 색상과 폰트 등의 디자인을 입히고 그것을 시스템화 합니다. 여기서 A/B test 등의 사용자 검증을 통해 완벽한 제품이 만들어지면 사용자들에게 실제로 배포하게 됩니다.



다음강의

이번 강의에서는 UX/UI 프로세스에 대하여 크게 알아보았습니다. 다음 강의에서는 이것을 세분화하여 프로세스에서 각각의 방법론의 설명과 왜 그 방법론을 사용하는지 UX/UI 포트폴리오를 기반으로 함께 알아보겠습니다.

다음강의에서는 UX/UI 프로세스를 시작할때, 또 UX/UI포트폴리오를 만들때 첫 시작 단계인 프로젝트 정의에 대해서 이야기해보겠습니다.


매거진의 이전글 UX vs UI (2)
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari