IT/기초 지식

UX 디자인의 5단계 모델

개발자 두더지 2023. 6. 15. 21:42
728x90

일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

 '프로덕트 개발에 있어서 UX가 중요하다는 것을 알지만 어떻게 하면 좋을지 모르겠다'라고 생각하고 있지 않은가? 이번 포스트에서는 UX을 디자인하는 방침인 "UX의 5단계 모델"에 대해서 설명하고자 한다.

 

 

UX의 5단계 모델이란?


 UX의 5단계 모델이란. UX(User Experience)의 요소를 5개의 단계로 분류한 것이다. 이 개념에 대해 이해하기 위해서 그 전에 UX는 무엇인지에 대해서 알 필요가 있다.

 UX(=User Experience)이란? 유저가 프로덕트를 이용했을 때 얻게 되는 체험, 감정의 전체를 의미한다. 예를 들어 메시지 어플리케이션에서 친구와 연력하기, 아이콘 구입하기, 애인에게 답장이 안와서 화가 나는 것 전체가 UX에 포함된다고 할 수 있다.

 

Jesse James Garrett가 제안한 UX의 개념

 2002년 아직 UX이라는 단어 자체가 도입되기전 시기에 미국의 UX 디자이너인 Jesse James Garrett의 저서 "Elements of User Experience"에서 UX의 이 개념도가 제안됐다. 

 이 그림 자체가 UX의 5단계 모델로, UX는 다음 다섯 가지의 요소로 구성되어 있다.

  • 전략 (Strategy) : 유저 니즈와 프로덕트 목적의 설정
  • 요건 (Scope) : 유저에 있어서 필요한 콘텐츠, 기능의 설계
  • 구조 (Structure) : 유저가 필요한 정보나 쓰고 싶은 기능에 도달하기 위한 전체 구성 설계
  • 결곡 (Skeleton) : 유저가 이해하기 쉬운 인터페이스상의 정보 설계
  • 표층(Surface) : 유저가 시각적으로 인식하는 디자인

 그리고 , "Elements of User Experience"에서는 전략~표층의 단계를 밟아가는 것을 프로덕트 개발의 가이드라인이라고 정의하고 있다.

 추상적인 개념인 전략을 토대로 차곡 차곡 구체적인 단계로 나아감으로써, 프로덕트의 목적에서 벗어나지 않고 개발해 나갈 수 있다.

 

UX의 5단계 모델이 비즈니스에 필요한 이유

 비즈니스는 기본적으로 "불만, 불안, 부족등, 문제가 발현 > 문제 해결" 에 의해 가치를 제공하고, 돈을 지불받는 것으로 성립한다. 

 특히 "문제의 발현"가 중요하며, 누가 어떤 문제를 안고 있느가를 애매한 상태로 사업을 진행하면 누구도 필요로 하지 않는 것을 만들게 되어 실패로 끝나게 될 가능성이 높아진다.

 또한, "문제 해결"은 그 문제에 대해 적절해야한다. 예를 들어 애인의 생일에 레스토랑을 이용하고 싶은 사람에 대해서 이자카야를 소개해주는 서비스라면 비즈니스가 성립하지 않는다.

 이 "문제의 발견 > 해결" 의 프로세스를 UX의 5단계 모델에 대조해보자. 문제 발견은 "전략", 문제의 해결이 "요건~표층"에 해당한다. 즉, 문제를 발견하여 이 해결 방법을 단계적으로 구체화하기 위한 프로세스가 UX의 5단계 모델이다.

 

 

UX의 5단계 모델을 적용하면 생기는 세 가지 장점


 지금까지 UX의 5단계 모델의 커다란 개념과 비즈니스에서의 필요성에 대해서 설명했다. 지금부터는 구체적으로 UX의 5단계 모델을 적용함으로써 어떤 장점을 얻을 수 있는지에 대해서 이야기하고자 한다.

 

1. 비즈니스 시점으로 프로덕트를 개발할 수 있게 된다.

 첫 번째 메리트는 프로덕트 갭라의 각 공수에 있어서 "비즈니스 시점"으로 생각해 볼 수 있다는 점이다. 비즈니스 시점이란 "애초에 프로덕트가 누구의 어떤 문제를 해결하기위한 것인가"부터 생각하는 것이다.

 UX의 5단계 모델에서는 기점이 되는 전략 단계가 비즈니스 시점 그 자체이다. 그리고, 전력 단계를 토대로써 요건 이후의 단계로 진행해나가는 것으로 어떤 단계에 있어도 비지니스 시점을 계속해서 가져갈 수 있다. 

 예를 들어 디자이너가 프로덕트의 전략이나 거기서 부터 브레이크 다운된 요건 ~ 골격을 이해한 뒤에 표층의 디자인을 만드는 것으로, 유저가 보다 만족할 수 있는 형태로 완성될 것이다.

 단수히 디자인을 만드는 것이 아닌 사용자의 문제를 해결하는 디자인을 만들 수 있게 되는 것이다.

 

2. 어디서 문제가 일어나고 있는가를 발견하기 쉬워진다.

 두 번째 장점은 개발 프로세스를 5단계로 나눠서 진행함으로써 어디서 문제가 발생하고 있는 가를 특정하기 쉬워진다. 예를 들어 유저가 요구하고 있는 정보로 제대로 네비게이션 역할을 하지 못하고 있다면, 골격 단계에서 문제가 있다고 판단할 수 있다.

 애당초 유저가 원하고 있는 정보와 프로덕트의 콘턴츠의 차이가 있는 경우 요건 단계까지 돌아가 재설계하는 것이 좋다고 판단할 수 있다.

 

3. 팀 전체가 개발의 방향성을 이해할 수 있다.

 세 번째 메리트는 UX의 5단계 모델에 따라 업무를 해나감으로써, 팀 전체가 개발 방향성을 이해할 수 있다는 점이다. 프로덕트 개발에서는 보통 많은 멤버가 참여한다.

 역할이나 전문성이 다른 멤버가 각각 5단계 모델 사고법을 가지고 업무를 하는 것으로 개발의 방향성을 이해하고, 일관성을 가진 아웃풋을 생성할 수 있게 된다.

 

 

UX의 5단계 모델의 각 단계와 그 관계성


 여기서 부터는 각 단계에 대해 각각의 개요에 대해서 설명하도록 하겠다.

 

"전략/요건/구조/골격/표층" 각 단계의 개요

1. 전략 <누구를 위해서, 왜>

 유저 니즈와 프로덕트의 목표를 설정하는 것으로 "누구의 어떤 과제를 해결하는 프로덕트인가", "왜 그 프로덕트가 필요한가" 를 명확히하는 것이 전략 단계이다.

2. 요건 <무엇을>

 프로덕트에서는 "무엇으로 유저에게 가치를 제공하는가"를 생각하는 것이 요건 단계이다. 전략을 해결하기 위해서는 프로덕트에 필요한 콘텐츠나 기능을 유저 체험을 상상해나가면서 리스트업해나간다.

3. 구성 <어떤 정보 설계로>

 여기서 부터는 "어떠한 가치를 제공해나갈지"를 세 가지 단계로 나눠서 살펴본다. 구성 단계에서는 요건 단계에서 정한 콘텐츠, 기능을 정리하여 유저에게 알기 쉽게 도달하도록 전체 구조를 설계한다.

 프로덕트의 어디에 어떠한 컨텐츠, 기능을 배치하고 어떻게 관련지을까를 결정한다.

4. 골격 <어떤 화면 설계로>

 유저와의 접점이 되는 인터페이스에 있어서 설계를 하는 것이 골격 단계이다. 네비게이션 디자인이나 화면의 레이아웃을 만드는 것으로, 최종 성과물 뼈대로한다.

5. 표층 <어떻게 보여줄 것인가>

 인터페이스상에 컬러, 포맷, 로고 디자인등 시각적인 요소를 반영하는 것이 표층단계이다. 배색이나 문자의 포맷등, 유저가 받는 인상에 커다란 영향을 미친다.

 

UX의 5단계 모델의 각 단계 관계성

 UX의 5단계 전체로 본다면 한 단계 전의 단계의 아웃풋 + 현 단계에서의 인풋이라는 관계가 있다. 예를 들어 전략 단계의 유저 니스와 프로덕트의 목적을 바탕으로 요건 단계의 컨텐츠, 기능을 고려하게 된다.

 이렇듯 전후의 단계가 밀접하게 연관되어 있어 일관성이 있는 프로덕트 개발이 가능한 것이다.

 

 

UX의 5단계 모델의 각 단계의 구체적인 진행법, 아웃풋 예


 UX의 5단계 모델을 실제 프로덕트 개발에 활용하기 위해서 각각의 단계의 개요에 추가로 구체적인 진행 방법과 아웃풋에 대해서 이해할 필요가 있다.

 

1. 전략 : 유저 니즈, 프로덕트의 목적

 전략단계는 UX의 5단계 모델에 있어서 토대가 되는 중요한 요소이다. 이 단계에서는 아래의 두 개를 명확히 하여 이후의 단계의 방침이 되게 한다.

  • 프로덕트의 목적 (사업쪽이 실현하고 싶은 비즈니스상의 골)
  • 유저 니즈(어떤 유저가 무엇을 원하고 있는가)

진행방법

 유저의 니즈를 파악하기 위해서 먼저 유저 조사를 실시한다. 조사의 방법은 다양하지만 유저 인터뷰나 설문조사 등이 일반적이다. 유저 조사와 동시에 자사의 아젠다나 경쟁자쪽도 검증할 필요가 있다. 

 이를 통해 얻어진 인풋을 바탕으로 "어떤 유저의 어떤 문제를 해결하는 것으로 대가를 받는가"이라는 프로덕트 목표를 설정한다.

전략 단계의 아웃풋 예시

 전략단계에서 아웃풋되는 대표적인 것이 유저 니즈를 구체화한 페르소나이다. 또한, 사업적인 관점의 정보를 정리한 비즈니스 모델 캔버스, 브랜드의 특징을 내놓는 브랜드 정체성, KPI 설정등 성쪽 측정 기준의 정의도 유효한 아웃풋으로 볼 수 있다.

 

2. 요건 : 컨텐츠/기능의 요건 정의

 전략 단계에서 정한 프로덕트의 방향성으로 바탕으로 문제를 해결하기 위해 필요한 컨텐츠와 기능을 명확히 하는 것이 요건 단계이다.

진행법

 유저에 있어서 필요한 콘텐츠와 기능의 아이디어를 내어 유저 경험의 모델화해나간다. 유저는 언제, 어디서 어떠한 상황에서 어떤 문제를 안고, 그것을 어떠한 형태로 해결하고 싶은지를 가시화한다.

 유저가 프로덕트를 통해서 가치를 느끼는 스토리를 그리는 것으로, 프로덕트에 필요한 요건이 보여진다.

 요건 단계의 아웃풋 예시

 유저 자체의 모델화는 유저의 행동, 간정을 시계열로 정리한 컷스터머 저니맵을 이용하는 것이 일반적이다. 또한, 비쥬얼에 따라 유저 스토리를 한눈에 이해할 수 있도록 스토리 보드를 작성하는 경우도 있다.

 

3. 구조 : 전체 구조의 설계

 요건 단계에서 프로덕트에 포함한 콘텐츠와 기능을 정하면, 다음으로는 그것들을 "구조화"한다. 현시점에서는 "어떤 컨텐츠와 기능이 필요한가"가 리스트업 된 상태이므로 각 콘텐츠와 기능을 유저가 이용하기 쉽도록 할 것이지를 구조화해나가는 것이다.

진행법

정보 아키텍처의 방법을 이용해서 콘텐츠의 분류, 정리, 배치한다.

 어떤 페이제 어떠한 컨텐츠가 있으면 알기 쉬운가, 콘텐츠 간의 관계성을 어떻게 보여주면 좋을까에 대해서 설계를 한다.

 또한, 버튼이나 입력 포맷이라는 기능면의 조작성도 인터랙션 디자인 시점에서 설계한다. 

구조 단계의 아웃풋 예시

 프로덕트의 전체 구조를 가시화한 사이트 맵이 이 단계에서 아웃풋이다.

 

4. 골격 : 인터페이스 디자인

 골격 단계에서는 실제로 유저가 접하는 인터페이스 상의 정보 설계를 한다. 화면에 표시된 정보의 배치나 우선 순위를 유저가 이해하기 쉽도록 설계한다.

진행법

 필요한 정보에 액세스하기 위한 네비게이션이나, 정보의 레이아웃을 와이어 프레임으로 구체화, 프로토맵핑(완성품의 전단계로 검증, 개선을 반복하는 방법)을 실시한다.

 골격 단계의 아웃풋의 구체적인 검증 방법은 Usability testing이 있다. 와이어 프레임의 단계로 유저로부터 "목적을 달성할 수 있는가" "알기 어렵게 설계되어 있지는 않은가"등의 피드백을 받는 것으로 완성까지의 시간을 단축시킬 수 있다.

골격 단계의 아웃풋 예시

 골격단계에서의 아웃풋은 와이어 프레임이다. 검증, 개선을 반복하는 것으로 만들어진 와이어 프레임을 이용하며 최종적으로 표현 단계로 나아간다.

 

5. 표층 : 비주얼 디자인

 지금까지의 단계를 통해서 UX 디자인의 최종 성과물이 되는 것이 표층 단계이다. 유저가 실제로 인지하는 것을 디자인하므로, 보다 감성적인 설계가 필요하다.

진행법

 유저가 프로덕트에 대해서 어떠한 인상을 받았으면 좋겠는지를 생각해나가면서, 컬러나 폰트 선정, 로그 디자인등 UI에 관련된 요소를 디자인한다.

 프로적트의 이미지를 가시화하기 위한 VI(비쥬얼 아이덴티티)를 만들어, 그에 따른 구체적인 디자인을 만들어 나가는 경우도 있다.

표층 단계의 아웃풋 예시

 UX 디자인의 성과물 그 자체가 아웃풋이 된다.

 

 

마무리 : UX의 5단계 모델은 만능이 아니다.


 UX의 5단계 모델은 제안된지 20년이 넘었고 현재까지 UX 디자인의 방침으로 이용되고 있지만, "5단계 모델로 생각하면 모든게 완전하게 이루어진다"라고는 할 수 없다.

 꼼꼼하게 전략을 세워서 유저의 경험을 고려한 프로덕트라고 해도, 실패하는 비즈니스가 많다. 즉, UX의 5단계 모델ㅇ을 이용한다고 성공 확률이 올라가는 것은 아니다.  그럼에도 불구하고 이러한 방법이 있음을 알고 정밀도가 높은 프로덕트 만들기에 활용해나간다면 좋을 것이다.


 참고자료

https://brik.co.jp/tips/4850

https://blog.nijibox.jp/article/5elements_of_ux/

728x90