brunch

You can make anything
by writing

C.S.Lewis

by 포동포동 Oct 11. 2020

5편. 디자인과 기획

UX 디자인 입문

원래는 더블다이아몬드를 활용하여 실습을 했던 내용을 정리하려고 했으나, 시간이 조금 더 걸릴 것 같기 때문에 조금 미루려고 합니다. 그렇기 때문에 약간 계획을 수정했는데, 앞에서 UX 디자인에 대한 기본적인 개념을 공부했다면 지금부터는 디자인 기획에 관한 개론을 공부하려고 합니다. 이번 글에서는 총 7가지의 큰 내용을 정리할 것이며, 주로 용어 정리, 역사, 트렌드 등에 관한 내용과 UX 방법론, 모델링 그리고 사용성 테스트를 통해 사용자의 요구(니즈)와 맥락을 분석하고 그에 맞는 디자인을 도출하는 방법에 대해 알아볼 것입니다. 한번 정리해보러 가실까요?

01. 디자이너의 역할 변화

원본 출처 : 미디엄 - freecodecamp

기본적으로 디자이너들의 역할은 크게 위와 같이 구분됩니다. UX Design, UI Design, Interaction Design. 공부를 하다 보면 익숙하게 들어온 이름들이죠. 하지만 그 옆에 회색으로 되어있는 프런트-엔드의 경우 익숙하지 않을 수 있는데, 이 부분은 웹페이지 디자인으로, 개발 쪽과도 연결이 되어있기 때문입니다. 패스트 캠퍼스에서는 현재 프런트엔드에 관한 인터넷 강의를 개강했고, 저는 이를 수강신청을 해놨어요. 오로지 나의 욕심이겠지만, 디자인 인터넷 강의를 전부 수강하고 정리를 다 끝내고 나면 듣게 되지 않을까 생각합니다. 그때 가서 다시 자세하게 언급하겠습니다! 본론으로 돌아와서 UX, UI, IxD의 경우 앞에서 간단하게 구분했기 때문에 크게 정리를 하지 않으려고 합니다.

최근 그림과 같이 디자이너들의 역할은 폭이 넓어지고 있습니다. 시각적인 요소를 디자인한다는 개념에서 확장되어 코딩을 건드리는 부분까지. 그렇기 때문에 더 이상 디자이너는 그림을 그리는, 시각적인 것을 관리하는 사람이 아니라 전체적인 서비스 또는 제품 등의 개발과정에서 종합적으로 참여를 하고 있다고 봐야 합니다.

디자이너들은 이러한 변화에 맞춰 항상 발전해나가야 합니다. 시대가 변하면서 디자이너가 필요로 하는 분야는 많아지고 있고, 사용자들의 니즈는 정확하고 완벽하게 파악하기 힘들기 때문에 조금 더 총체적으로 깊이 있게 관찰하고 분석을 하는 것이 중요하며 이러한 과제를 수행할 수 있게 도와주는 것이 바로 UX라는 강력한 도구겠죠. 아래의 그림을 통해 디자이너의 역할에 대해 간단하지만 이해하기 쉽게 알아보도록 해봅시다!

하늘색 부분은 일반적으로 디자인의 업무라고 보기는 어렵지만, 디자이너의 스펙트럼이 넓어지면서 담당하게 된 부분입니다.

02. 각 직군별 다양한 직업

UX와 UI 디자인에는 분야별로 다양한 직업들이 존재합니다. 통틀어서 UX/UI 디자이너라고 부르지만 그 안에서도 자세하게 나뉠 수 있다는 뜻입니다. 그중에서도 익숙하게 들을 수 있는, 알면 좋은 직업들에 대해서 알아봅시다!

1. Product Owner / Product Manager

PO 또는 PM이라고도 부릅니다. 프로젝트의 총책임자로 프로젝트의 당위성에 대하여 이해관계자들(Stakeholders)과 협의를 하는 역할을 합니다. 이후 전체 프로젝트에 대한 목표, KPI(Key performance Indicator : 핵심 성과지표), Scope(변수에 포함될 수 있는 범위) 등을 정하기도 합니다.

2. UX Researcher

사용자 리서치를 주로 담당하며 프로젝트가 설정 및 진행되는 초기에 가설을 세우는 등의 작업에 필요한 사용자들의 요구, 행동 등을 앞에서 배웠던 정성적, 정량적 리서치를 통해 분석하는 역할입니다.

3. UX Designer, UI Designer, Interaction Designer

UX Designer의 경우는 사용자 리서치를 하는 경우도 있으나, 대부분의 디자이너들은 와이어 프레임을 작성하거나, 스토리보드 및 기획문서를 제작하며 디자인과 디자인에 대한 전체적인 가이드를 세우며 이를 통해 결과물의 프로토타이핑을 만드는 역할입니다. 단, 회사마다 직무의 정의와 역할이 매우 다르니 이를 유의해야 합니다.

4. Content Strategist, Copy Writer & UX Writer

이들은 제공하려고 하는 서비스들을 구성하는 콘텐츠를 제작하고 기획하며, 톤&매너에 맞는 문구, 워딩을 작성하는 역할을 합니다.

03. 실무에 쓰이는 UX/UI 필수적인 용어 정리

1. Fidelity : 충실도

디자인을 하는 과정에서 나오는 결과물 또는 진행 과정을 어떤 정도로 묘사, 표현을 했는지를 뜻하는 단어입니다. Fidelity는 Low와 High, 두 개로 구분되는데 아래의 그림으로 두 가지를 비교해봅시다.

그림 출처 : 나

Low - Fidelity는 최소한의 구성요소는 다 갖추고 있는 정도의 와이어 프레임을 뜻합니다. 아이콘의 위치, 로고, 메뉴 제목 등의 구간을 틀로 표현을 하거나, 구분할 수 있게 최소한으로 내용을 채우는 것입니다. 이에 반해 High - Fidelity의 경우는 위의 그림처럼 완성에 가까운 형태로 디자인한 결과물을 뜻합니다.

2. Wireframe : 와이어 프레임

기획 단계에서 주로 제작이 되며 Low - Fidelity의 대표적인 종류입니다. 각 페이지들의 정보와 UI적인 요소 등에 대한 배치를 표현하며 와이어 프레임에 시나리오, 콘텐츠 설명 등이 첨부가 되면 스토리보드가 되죠. 와이어 프레임에 대한 예시는 위 그림을 참고합시다.

3. Story Board : 스토리보드

제공되는 서비스의 각 페이지나 구성요소, 콘텐츠의 설명 및 페이지 간의 이동 흐름 등을 표시하는 것을 의미합니다. 와이어 프레임에서 구성요소들을 글로 설명을 하면 스토리보드가 되기도 하고 화면 설계서, UI 문서, 스펙 문서, 기획서, MMI(Man Machin Interface)라고도 불리는 아이입니다. 사용자가 서비스와 어떤 컨텍스트에서 인터랙션을 하는지 시각적으로 표현한 시나리오라고 생각하면 편하죠.

출처 : http://blog.naver.com/durandot/220348523459

4. Mockup : 목업

디자인, 데모 시연 및 사용자 평가를 위한 서비스 및 제품의 디자인입니다. 일반적으로 디자인한 최종적인 결과물을 표현할 때 쓰입니다. 주로 실제 제품에 제작한 디자인 결과물을 합성하는 형식으로 쓰이는데, Medium to High Fidelity라고 생각하면 되고 서비스가 시각적으로 어떻게 표현될 것인지를 보여주는 것입니다. 컬러, 타이포그래피 등이 보이며 몇 가지의 피드백들을 받고 나면 이것이 최종 디자인이 되기도 합니다.

5. Prototype : 프로토타입

처음을 뜻하는 프로토스, 느낌을 뜻하는 타이포스가 합쳐져서 나온 단어로, 최근 디자인 개발 프로세스가 시장에 사용자들에게 빨리 보이고, 사용자들의 반응을 실질적으로 확인한 뒤 그에 따라 개선하는 순서가 대두되면서 중요성이 높아지고 있습니다. 동적인 모형, 제한적인 움직임을 표현하며 인터랙션이 들어가면서 사용자 테스트, 개발자와 디자이너 간의 커뮤니케이션을 위해 사용됩니다.

프로토타이핑의 경우 시스템 초기 모델을 세우고 다듬는 과정을 반복적인 과정을 통해 이루어집니다. 그러나 이런 과정에서 무계획적인 것은 지양하고 철저하게 계획된 과정을 통해 사용자들의 요구를 좀 더 정확하게 반영해야 하죠. 이때 서비스 및 제품의 모든 기능을 표시하지는 않습니다. 사용자들에게 초기의 모습을 보며 주면서 그때그때의 평가를 받으며 이를 통해 개선해나가는 것이 특징입니다.

프로토타이핑 출처 : 패스트캠퍼스 수강생 제작.

6. Affordance : 행동 유도성

사용자가 제품 또는 서비스를 인지했을 때 어떻게 사용해야 하는지 알거나 디자이너의 의도대로 사용자의 행동을 유도하는 것을 의미합니다. 예를 들어 아이폰의 초기 모델 중 하나인 "밀어서 잠금 해제"는 디자이너의 의도대로 옆으로 슬라이딩을 할 경우 잠금이 풀리는 행동을 하게 끔 유도하도록 디자인을 했다는 것입니다.

7. IA = Information Architecture (정보구조)

제품 및 서비스를 구성하는 정보의 구조와 우선순위, 흐름의 설계 등을 포함하며 사이트맵을 생각하면 됩니다. 건축을 할 때 뼈대, 구조를 잘 잡는 것이 안정성과 편리함을 좌우하는 것과 같이 서비스와 제품을 설계할 때 이를 정의하는 것이 사용성과 편리함, 접근성 등을 결정하는 중요한 요소라고 할 수 있습니다.

출처 : https://medium.com/@mklab.co

글을 안 올린 지 조금 시간이 지난 듯합니다. 제가 하는 사이드 프로젝트와 몇몇 모임 등이 바쁘다는 핑계로 글을 오랫동안 올리지 못했는데 많이 아쉬움이 남습니다. 현재 제작 일기로 올리고 있던 스쿨빌런의 경우 전체 리디자인 작업을 들어갔으니 조만간 새로운 모습으로 여러분들께 찾아뵐 수 있을 것 같습니다.

현재는 이것저것 하는 것들이 많아 이론 정리에 관한 글들이 조금은 늦어질 수 있지만 중단되지 않도록 열심히 해야겠다는 생각이 많이 듭니다. 현재 남아있는 타이포 강의와, 기획 강의, 브랜딩 강의가 얼른 마무리되고 정리를 해서 온전한 나의 것으로 만들 수 있도록 노력해야 할 것 같아요.

어쩌다 들어오신 분들, 꾸준히 봐주시는 모든 분들께 감사합니다 :)

keyword