<주간 UIUX 디자인 : ui ux 기획서>

[초보자도 이해 가능] ui ux 디자이너, ui ux 기획서 작성 능력 필수라고?

제로베이스 UIUX 디자인 취업 스쿨

00 | ui ux 디자이너도 ui ux 기획서를 작성할 수 있어야 한다고요?

사용자 경험 디자인으로 불리는 ui ux 디자인은 사용자를 중심에 두고 실제로 필드에서 사용자를 관찰한 후, 그 결과를 바탕으로 디자인을 진행하는 프로세스를 가지고 있어요. 사실 어떤 아이디어를 가지고 앱을 개발하겠다는 생각을 하는 순간부터 ui ux 디자인 프로세스에서는 작성할 문서가 매우 많아요. 이미 실무에 종사하고 있는 사람이라면 클라이언트의 요구 또는 조직의 목표에 따라 주제가 선정되지만, 개인이나 학생은 주제를 선정하는 것부터 어려움을 겪을 수 있어요.

먼저, 주제는 가까운 곳에서부터 찾는 것이 좋습니다. 예를 들면 가계부를 적거나 운동 기록을 남기는 일 등 일상생활에서 주제를 찾고, 관련 앱이 이미 있는지 살펴본 후 벤치마킹을 하는 것부터 시작해요. 주제를 선정한 후에도 무엇부터 시작해야 할지 막막한 경우가 많죠. 물론 실무에 종사하는 디자이너는 이미 조직에서 분석하고 점검한 거시 환경과 미시 환경, 내부 환경, 클라이언트의 포지셔닝과 니즈에 대한 보고서를 넘겨받아요. 하지만 마케팅팀이 별도로 구성되어 있지 않은 소규모 조직이나 스타트업 또는 개인은 상황이 달라요. 작은 조직에서는 모든 것을 혼자 해 내야 하는 경우가 많으므로 시작부터 막막하기 십상이죠. 또 최근에는 작지 않은 규모의 조직에서도 별도로 기획파트를 구성하지 않고 ui ux 디자이너가 기획을 하게 하는 경우도 있어요. 물론 기획자가 있는 규모의 조직이라도 ui ux 디자이너가 기획에 대해 이해를 하고 있다면 협업에 대한 이해가 훨씬 빠를 거예요.

따라서 ui ux 디자인을 하기에 앞서 기획을 하려면 무엇부터 시작해서 어떤 준비가 필요한지 전체적인 흐름을 파악해야 해요. 주제에 맞는 프로젝트를 진행하려면 사용자 시나리오, 메뉴 트리, 플로우 차트, 와이어 프레임 등 다양한 문서가 필요한데, 이런 문서들을 작성하려면 시간과 노력이 많이 필요해요 하지만 이런 과정을 거쳐야 오류를 줄이고 프로세스에 맞는 프로젝트를 진행할 수 있어요.

01 | 나에게 맞는 ui ux 디자인 프로세스는?

디자인 프로세스란, 기획부터 제작까지 모든 디자인 과정을 지칭하는 말이에요. 디자인 프로세스를 통해 목표와 방향성을 명확하게 정해 불필요한 의사결정을 줄이고, 체계적으로 일할 수 있어요. 또한, 낭비되는 리소스를 줄이고 효율적으로 활용할 수 있어요. 그러나 모든 디자이너나 조직이 동일한 프로세스를 따르는 것은 아니에요. 디자인의 문맥, 목표, 그리고 특성에 따라 다양한 디자인 프로세스가 존재하며, 각기 다른 장점과 적용 사례를 보유하고 있어요. 주요한 디자인 프로세스의 종류와 특징을 탐구하며, 어떤 상황에서 어떤 프로세스가 가장 적합한지 알아보러 가실까요?

서비스 디자인 방법론

서비스 디자인에서 말하는 디자인은 우리가 흔히 생각하는 시각적인 요소들의 집합이 아닌 디자인의 어원인 ‘설계하다’라는 의미를 가져요. 따라서 서비스 디자인에서 말하는 디자인은 어떤 목표나 비전을 실현하기 위해 계획을 세우는 과정으로 서비스 디자인의 궁극적인 목표는 사용자의 만족을 추구하는 것이에요. 따라서 사용자의 문제점을 파악하고 이를 해결하기 위한 전반적인 과정을 설계하는 것이 서비스 디자인의 본질이죠. 단순히 아이디어를 설계하는 것을 넘어서 실제로 실행 가능한 형태로 구체화하는 역할을 담당하게 되는 것이에요. 여기에는 다양한 방법이 존재하는데 대표적인 것이 바로 더블 다이아몬드와 디자인 씽킹, 애자일 그리고 린이에요.

1) 더블 다이아몬드 방법론

더블 다이아몬드 모델은 문제를 정의하고 솔루션을 만드는 두 가지 과정이 한 점에서 시작되어 확산과 수렴의 과정을 거쳐요. 첫 번째 다이아몬드 영역은 사용자의 문제를 찾고 디자인으로 해결하고자 하는 문제를 정의하는 과정이에요. 이 단계에서는 문제를 탐색하는 발견(discover) 과정과 사용자 경험 분석을 통해 문제의 영역을 좁혀 나가는 구체화(define) 과정으로 이루어집니다. 두 번째 다이아몬드 영역은 앞에서 찾은 문제를 해결할 수 있는 다양한 솔루션을 탐색하고 문제 해결을 위한 솔루션을 만들어 나가는 과정이에요. 다양한 아이디어를 제안하고 개발(develop) 하며, 그중에서 가장 효과적인 하나로 좁히면서 해결책을 도출(deliver) 해요. 이러한 과정은 더블 다이아몬드의 두 번의 과정을 거쳐 끝나는 것이 아니에요. 문제를 발견하고 해결책을 도출한 후에 사용자 테스트를 진행한 후 피드백을 분석하여 다시 문제 해결을 위한 작고 큰 수렴과 발산을 반복하죠. 실제 프로젝트에 있어서는 더블 다이아몬드의 과정을 거치지 않는 경우도 있기 때문에 더블 다이아몬드 프로세스를 꼭 거치기보다는 큰 흐름 중의 하나로 생각하면 됩니다.

우선 문제 발견(Discover)의 단계에서는 주제에 따른 제품이나 서비스를 위해 시장을 분석하고 타겟을 설정하게 돼요. 모든 제품이나 서비스도 마찬가지로 이러한 단계를 거치게 되지만 ux 디자인과의 차이는 관점의 차이라고 할 수 있죠. 기존의 방법론이 목표에 접근하는 방법이 제품에 집중되어 있었다면 ux의 관점에서는 제품을 사용하는 사람들의 실제 상황 속에서 문제를 발견하게 돼요. 사용자의 판단이나 심리에 영향을 주는 요인과 감정적인 부분에 대해 고려하는 것이죠. 목표가 설정되면 각 환경에 맞는 기법을 개발해서 리서치(Research)를 실행하게 되고 그 결과를 모델링(Modeling) 하게 돼요. 여기서 모델링이란 리서치의 결과를 정리하는 활동을 말하며 그를 통해 제품이나 서비스의 콘셉트와 전략을 도출하는 것을 말합니다. 전략과 콘셉트가 나오면 실제 제품이나 서비스가 실행되기 위한 시연을 하게 되는데 이를 프로토 타이핑(Prototyping)이라고 해요. 상황과 목표에 따라 프로토 타이핑은 여러 가지로 나올 수 있으며 이를 통해 내린 결론을 가지고 테스트(Test)를 하게 돼요.

디자인 시스템은 최근에 갑자기 생겨난 것은 아니에요. 실질적으로 많은 기업과 조직들은 과거에서부터 디자인 시스템이라고 생각하는 것을 가지고 디자인의 과정에 적용해 오고 있었지만, 이러한 컬렉션은 가장 많이 사용되는 버튼이나 입력 박스와 같은 ui 요소의 더미로 구성된 패턴 라이브러리와 같은 ui 패키지로 일부 디자인의 룩앤 필을 보여주는 방식으로 사용됐어요. 이는 크리스토퍼 알렉산더(Christopher Alexander)의 패턴 랭귀지라는 저서에서 영향을 받은 것으로 이후 제니퍼 티드웰(Jenifer Tidwel)에 의해 ui 패턴 예시와 함께 정리되어 웹 디자인의 영역에서 사용됐어요. 스마트폰이 우리의 일상에 다가온 이후에는 브래드 프로스트(Brad Frost)의 아토믹 디자인(Atomic Design)의 영향을 받아 컴포넌트 단위의 디자인을 시스템화하였으며, 이를 기반으로 기업마다 자신들 고유의 디자인 시스템 구축이 가속화하였다고 할 수 있습니다.

2) 디자인 씽킹

디자인 씽킹은 사용자를 이해하고, 가정하여 문제를 재정의하고, 프로토타입 및 테스트를 위한 혁신적인 솔루션을 만들기 위해 사용하는 비선형적이고 반복적인 프로세스를 말해요. 특히 비즈니스의 문제점을 해결하는 서비스 디자인 프로세스 방법론 중 하나로 사람들이 겪는 불편함을 인간 중심 관점으로 찾아내 해결하기 때문에 창의적 문제 해결 방법론으로 불리고 있어요. 공감하기, 정의하기, 아이디어 내기, 프로토 타이핑하기, 테스트하기의 5단계는 잘못 정의되거나 알려지지 않은 문제를 해결하는데 유용합니다.

3) 애자일 프로세스

소프트웨어 업계와 같은 시장은 빠른 변화로 인해 애자일 프로세스를 도입하게 됐어요. 애자일 프로세스는 소프트웨어가 어느 정도 사용할 만하면 빠르게 출시한 후 사용자의 의견을 수집하여 이를 바탕으로 업데이트를 배포하는 과정을 반복하는 프로세스를 말해요. 애자일 프로세스는 사용자의 요구사항을 끊임없이 수정하는 방식으로 반복적·점진적인 제품 업데이트를 통해 애자일이 추구하는 가치를 더 쉽게 성취할 수 있습니다.

4) 린 프로세스

린 프로세스(lean process)는 일본 토요타(Toyota)의 프로세스를 소프트웨어 개발에 적용한 방법론으로, 낭비를 미리 발견하고 제거하여 어떻게 고객에게 가치를 빠르게 제공할 수 있을 것인지에 대한 생각이자 사고방식에서 출발했어요. 린 스타트 업은 시장에 대한 가정을 테스트하기 위해 빠른 프로토타입을 만들고, 고객의 피드백을 받아 빠르게 프로토타입을 진화시켜요. 이를 통해 낭비를 줄이고, 최소 기능 제품(Minimum Viable Product, MVP)을 만드는 것을 목표로 하고, MVP를 만든 후에도 새로운 기능을 추가할 때마다 3단계 사이클을 돌면서 계속 발전시켜 나갑니다.

02 | 서비스 디자인 기획하기

서비스 디자인을 위해서는 우선 어떤 서비스를 만들 것인지 정하는 것에서부터 시작합니다. 보통의 직장인이라면 프로젝트의 구성원으로서 회사에 소속되어 회사의 목표에 맞는 서비스를 기획하게 되고요. 그러나 어딘가에 소속되어 있지 않은 개인이라면 주제를 정하는 것부터 막연할 수밖에 없죠. 처음부터 거창하게 플랫폼의 가치도 커지고 규모의 성장이 일어날 수 있는 주제로 기획을 만들어 나가는 것도 가치 있는 일이겠지만 생활 속에서 문제를 발견할 수 있다면 더 좋겠죠? 일상생활에서 불편하지만 익숙해서 지나치는 것들에 대해 지금보다 나아질 방법을 고민해 보는 것이 좋아요. 예를 들면 ‘추운 겨울, 집 앞 슈퍼도 나가기 싫다’라는 생각에서 배달의 민족 ‘B마트’가 출발했고, ‘공인인증서 없이 송금할 수 없을까?’라는 문제 의식이 지금의 ‘토스’를 만든 것처럼요.

1) 문제 발견(cover)

✅ 문제점 수집

문제점 수집 단계에서는 실제 사용자들의 이용 맥락에 따라 영향을 미치는 서비스의 경험요소와 페인 포인트를 파악하여 ux 관점에서 분석하게 돼요. 이를 통해 서비스에서 파악하고자 하는 사용자 경험 이슈를 정리해요. 예를 들어 자주 사용하는 메뉴들을 찾기 어렵다면 어떻게 그 문제를 해결할 것인지 이슈를 제기해요. 특정 구성원이 아닌 경우 주제를 정하기 위해 우선 평소에 문제라고 여기거나, 익숙해서 지나쳤던 불편했던 점, 나 또는 내 주변 사람들이 가진 문제에 대해 문제점 수집 부분에 최소 10~30개 정도의 이슈를 정리해 보는 것에서 시작해 보는 것입니다.

✅ 주제 선정

수집된 문제점들 사이에서 공통적인 부분을 찾아내거나 해결할 가치가 있는 순서를 정해 주제를 선정해요. 이때 선정되는 주제는 기술적으로 구현이 가능한 주제여야 합니다. 예를 들어 향수를 구매할 때 스마트폰에서 향을 미리 시향한 후 구매가 가능하도록 하는 서비스는 너무나도 좋은 아이디어이지만 현재의 기술로는 구현이 불가능하기 때문이에요.

✅ 현황 파악

선정된 주제에 대해 문제가 발생하는 원인을 찾아보는 과정을 말해요. 기업들은 이 과정에서 인터뷰나 설문조사와 같은 리서치 과정을 거치게 되지만, 리서치를 진행하기 어려운 경우라면 문제가 발생하는 원인을 고민하여 다양한 내용을 작성해요. 문제의 본질을 파악하기 위해서는 ‘왜?(Why)’가 가장 중요한 역할을 해요. 모든 문제에 접근을 할 때는 ‘왜(Why)’로부터 근본적인 목적을 설정해야 해요.

2) 문제 정의(Define)

✅ 가설 설정

기업이 브랜드 아이덴티티를 디자인할 때 일관된 모양과 느낌을 만드는데 가장 큰 도움이 되는 것은 바로 컬러에요. 우리는 종종 로고의 형태는 기억하지 못해도 그 브랜드가 가지는 특정 색상을 더 오래 기억하는 경향이 있어요. 흔히 우리가 네이버라 말하지 않고 녹색 창이라 해도 인식하고 있는 것과 같죠. 시그니처 컬러를 사용하면 사용자의 브랜드 인지도가 80% 증가한다는 조사 결과처럼 컬러는 이미지를 보다 지속 가능하게 하고 사용자가 보다 쉽게 브랜드를 식별할 수 있게 해줘요.

✅ 프로젝트 정의

서비스를 통해 해결하고자 하는 문제와 제품 또는 서비스에 대한 간략한 요약 설명을 작성해요.

3) 유저 시나리오

유저 시나리오는 현재 사용자들이 어떻게 행동하는지에 대한 묘사가 담기며 퍼소나가 자신의 목적을 달성하기 위해 제품을 어떻게 사용할지를 그려보는 과정을 시나리오로 만드는 것을 말해요. 이러한 시나리오를 작성하기 위해 우리는 가상의 사용자를 필요로 해요. 이것을 우리는 퍼소나라고 부르는데 한두 명의 실제 같은 가상의 퍼소나를 통해 사용자의 감정적인 부분이나 상세한 추가 니즈를 파악할 수 있어요. 따라서 퍼소나를 기준으로 유저 시나리오를 작성하면 돼요. 선정된 주제를 바탕으로 유저 시나리오에 필요한 가상의 인물인 퍼소나를 설정해 볼까요?

퍼소나는 그 인물의 성격과 배경, 환경 등의 묘사로 구성되는데, 가상의 인물 및 해당 프로젝트의 서비스나 제품을 사용하는 목표(goal)와 필요(needs), 그리고 그와 관련해 평소에 느끼는 불편함 등의 내용이 포함돼요. 좀 더 구체적으로는 개인적이고 사회적인 동기(motivation), 의도(purpose), 습관(habit), 직감(intuition), 기( wish), 희망(hope), 흥미(interest) 등의 내용이 포함될 수 있습니다.

4) 유저 시나리오의 구조

✅ 여정

사용자의 경험의 단계를 순서대로 작성하는 단계로 상황은 구체적일수록 좋아요. 예를 들어 오븐을 구매하기 위해 검색을 하고 원하는 제품 디자인을 골라 가격 비교 및 후기를 찾아보는 식으로 사용자가 무엇인가를 구매하기 위한 단계를 작성해 보는 거예요.

✅ 목표 또는 문제점

이 단계에서는 사용자가 성취하려고 하는 목표를 작성해요. 비단 목표뿐만 아니라 이 단계에서 발생하는 문제점을 작성해도 됩니다. 예를 들면 찾아본 후기가 모두 대가를 받고 작성한 후기라 ‘신뢰가 가지 않는다’와 같은 문제점 등을 작성해도 좋아요.

✅ 행동 단계

사용자가 자신의 목표를 이루기 위한 행동을 자세하게 입력해 줍니다.

✅ 감정

사용자가 특정 단계에서 느끼는 감정이나 생각을 구체적으로 입력하고 그 감정을 그래프로 표시하면 나중에 사용자의 감정 흐름을 더 잘 파악할 수 있어요.

✅ 기회

유저 시나리오를 작성하는 핵심 부분으로 사용자의 경험을 개선하거나 강화할 수 있는 해결책을 작성해 봅니다. 사용자가 하려는 목표와 행동에 문제가 발생하지 않도록 이러한 기능을 제시하는 내용으로 작성해 줘요.

5) POINTS 분석

이러한 유저 시나리오를 통해 무엇이 문제이고 기회 요소인지, 이를 통해 얻은 통찰은 무엇이며 사용자가 필요로 하는 것이 무엇인지를 중심으로 분석해 하나의 새로운 서비스나 기능을 도출할 수도 있어요. 이를 영문 앞 글자를 따서 POINTS 분석이라고 해요.

6) 정보구조설계

정보구조를 설계한다는 것은 서비스에서 제공하는 정보의 구성에 관여하여 특정 주제별로 그룹화하고 레이블링하여 콘텐츠의 흐름에 대해 계층 구조를 만드는 것을 말해요. 정보 구조에는 내비게이션, 애플리케이션의 기능 및 인터랙션 방법을 추가하기도 하고요. 정보 구조의 설계는 콘텐츠의 흐름에 관여해요. 따라서 일반적으로 정보 구조를 설계하기 위해서는 우선 콘텐츠를 정의하는 것에서 시작되죠. 일반적으로 페이지 ID, 계층 구조의 페이지 수준, URL, 콘텐츠 유형, 키워드 및 설명이 포함된 인벤토리 스프레드시트를 만들어요. 가장 중요한 것은 콘텐츠를 분류하고 우선순위를 지정하는 것이에요. 서비스에 어떤 콘텐츠를 제공할 것인지 결정하여 콘텐츠를 분류하고 유사한 콘텐츠와 함께 논리적인 그룹을 구성해 나가요. 이렇게 설정한 콘텐츠 그룹을 상위 페이지로 구성하고 상위 페이지에 포함되는 하위 콘텐츠 페이지의 레이블링을 구성하여 정보 구조를 설계한 후 사용자 흐름을 설계하는 것이 가장 일반적인 형태의 정보 구조 설계 방식이라고 할 수 있어요.

✅ 태스크 플로우와 페이지 플로우

유저 시나리오를 바탕으로 사용자들이 목표를 달성하기 위해 진행하는 행동을 순서대로 정리해 보는 것을 태스크 플로우라고 해요. 태스크 플로우는 사용자가 하나의 목표를 달성하는데 필요한 단계를 작성하는 것을 말합니다. 대부분의 태스크 플로우는 선형으로 보이며 단계를 상징하는 레이블과 모양을 가지는 걸 알 수 있어요.

태스크 플로우를 작성하고 난 후에는 각 태스크를 수행하기 위해 필요한 기능이나 화면을 작성해요.

작성된 기능이나 화면을 규칙을 가질 수 있는 레이블을 작성하고 유사한 성격의 레이블을 그룹으로 묶어 상위 카테고리를 작성하고 각 카테고리별로 하위 카테고리를 구성해 정보 체계를 설계해요.

7) 플로우 차트

플로우 차트는 사용자가 제품이나 서비스를 이용하는 동선을 알려주는 순서도를 말해요. 정보 구조에서 작성한 태스크 플로우에서는 선형 구조로 된 순서도로 작성되기 때문에 특정 상황에서 사용자가 두 가지의 선택지를 가진 경우에 대한 구체적인 동선을 작성하기가 어려워요. 예를 들면 특정 제품을 구매를 원할 때 어떤 사용자는 검색 창에 원하는 제품을 직접 입력하여 결과를 얻을 수도 있지만 다른 사용자는 해당 제품의 카테고리를 선택할 수도 있겠죠?

플로우 차트는 전 세계적으로 통용되는 표준 기호가 있어 그를 바탕으로 작성하므로 앱의 각 단계 또는 페이지에서 제공하는 기능과 조건에 따른 이동 방향을 Yes 또는 No에 따라가며 살펴봄으로써 최종 목적에 달성했는지 한눈에 볼 수 있어요. 플로우 차트를 표준 기호에 맞게 작성하지 못하는 경우 정보 구조 설계로 구성된 메뉴 트리에서 화살표로 이동 동선을 연결하는 것도 가능해요.

8) 와이어 프레임

와이어 프레임은 각 화면 단위의 UI를 설계하는 작업으로 모든 화면을 설계하고 화면 간의 이동과 관계를 표현합니다. 다양한 툴을 사용해 그리기도 하지만 핸드 드로잉으로 개략적인 화면 구성 요소를 그려보는 것에서부터 시작해요. 핸드 드로잉으로 그려도 무방하지만 소프트웨어를 이용한 작업에 비해 수정이 용이하지 않아 최근에는 피그마나 스케치와 같은 툴로 와이어 프레임을 그리는 편이에요. 혹시 포토샵이나 일러스트레이터 혹은 파워포인트와 같은 오쏘링 툴이 더 익숙한 사람이라면 다른 소프트웨어를 사용해도 무방하지만 팀 구성의 작업인 경우 함께 공유할 수 있는 소프트웨어를 정해 놓고 작성하는 것이 바람직해요. 과거에는 개략적으로 로우 피델리티(Low Fidelity)의 핸드 드로잉을 했다면 최근에는 와이어 프레임 툴을 사용한 하이 피델리티(High (Low Fidelity)로 와이어 프레임을 작성한 후 플로우를 추가하기도 합니다.

마무리하며.

ui ux 기획서 작성은 사용자의 경험을 중심으로 제품이나 서비스를 계획하고 설계하는 과정의 핵심이에요. 정확하고 체계적인 기획서는 팀 간의 의사소통을 강화시키고, 개발 프로세스를 원활하게 만들며, 원하는 사용자 경험을 실제로 구현하는 데 필수적이죠. 기획서를 작성할 때는 사용자의 관점에서 생각하며, 그들의 필요와 문제점, 그리고 그것을 해결할 수 있는 방법에 초점을 맞추어야 해요. 구체적이고 명확한 시나리오, 시각적 자료, 그리고 명료한 가이드라인은 기획서의 품질을 높이는 데 큰 도움이 됩니다.

마지막으로, 기획서는 한 번 작성하고 끝나는 것이 아니에요. 제품이나 서비스의 개발과 테스트 과정에서 계속해서 업데이트되고 개선되어야 하죠. 지속적인 피드백과 반복적인 검토를 통해, 기획서는 우리의 비전을 현실로 전환시키는 중요한 도구가 되기 때문이에요. 그만큼 탄탄한 디자이너 ui ux 디자이너가 되기 위해서는 ui ux 기획서 작성 능력은 필수라고 할 수 있어요. 이론부터 천천히 알아갈 수 있는 ui ux 디자인 취업 스쿨에서 ui ux 디자이너 준비를 시작해 보시는 건 어떨까요?

UIUX 디자인 취업 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.

추천 컨텐츠