모바일 UX 기획과 프로토타입 디자인 실습 _ 권희성 교육자

안녕하세요 -

한국대학생IT경영학회 대외홍보팀장 서채원입니다.

---

이번 티스토리 일지에서는, 권희성 교육자님께서 진행해주신

모바일 UX 기획과 프로토타입 디자인 실습에 대해 이야기해보려고 합니다.

​

UI/UX 개념, UX principle, 실무 기획 프로세스에 대한 이론적인 내용에 더불어

정보구조도, 플로우차트, 스토리보드를 작성하는 실습까지의 내용을 모두 담았으니

끝까지 열심히 읽어주세요 :)

---

​ UI/UX 개념 

 

UI란, user interface의 약자입니다.

사용자와 제품 사이에 존재하는 면이자 사용자와 제품 사이의 상호작용이 일어나는 장소입니다.

​

인터렉션은 사용자가 목적을 달성하기 위해 제품의 UI를 사용하여 상호작용하는 것을 의미합니다.

쿠팡에서 아이패드 프로를 사고 싶을 때, 우리는

아이패드 프로를 사기 위해 쿠팡 앱을 켜고

쿠팡 검색창에 아이패드 프로를 검색해서 결제하는 과정으로 통해 '구매한다'라는 목적을 달성하게 됩니다.

이 모든 과정이 하나의 인터렉션입니다.

​

UX는 user experience의 약자입니다.

사용자가 목적 달성 과정에서 느끼는 종합적인 만족도를 의미합니다.

즉, 우리가 흔히 듣던 UX 기획이라는 말은

사용자에게 목적 달성 절차의 효율성과 만적스러운 경험을 제공하는 UI를 위해 사고하는 과정이라고 볼 수 있습니다.

​

이 모든 것을 하나의 예로 정리하자면 -

쿠팡에서 물건을 살 때,

쿠팡 앱은 UI,

물건을 구매하는 과정은 인터랙션,

이 모든 경험이 바로 UX.

그래서 결국,

쓰는 사람이 누구인지, 무엇을 원하는지, 물건을 어떻게 사용하는지,

사용자가 더 쉽고 편리하게 물건을 사용하려면 어떻게 해야 하는지

사용하는 사람 입장에서 물건을 만드는 것이 바로바로

UX Design입니다.

​

자, 이제 UX principle에 대해 배워볼까요?​

사용자가 편리하게 사용하는 UX를 디자인하기 위한 이 원칙은

소프트웨어와 웹사이트 디자인에서 저명한 학자인 Jakop Nielsen이 제안한 10가지의 원리입니다!

​

1) Visibility of system status

사용자가 원하는 대로 잘 되고 있다는 느낌을 줘야 한다는 것입니다.

엘리베이터에서 올라감 버트는 눌렀을 때 들어온 초록색 불을 확인하고

아! 제대로 눌렀구나!를 깨닫는 것.

이것이 바로 Visibility of system status입니다.

​

2) Flexibility and efficiency of use

사용의 효율성을 높여야 한다는 것입니다.

사용 효율성을 높이기 위한 전략으로는 서치바, 상단 바, 하단 바 등이 있습니다.

​

3) Consistency and standards

메뉴 아이콘, 장바구니 아이콘은 어디에서나 비슷하게 생겼습니다.

연속성과 표준성을 지닌 아이콘들을 통해 사용자들은 편안함을 느낄 수 있겠죠?

​

4) Match between system and the real world

실제 계산기와 비슷하게 생긴 계산기 앱처럼

실제 세계를 반영하는 UX에서 우리는 안정감을 느끼고 편리하게 사용할 수 있게 됩니다.

​

5) Recognition rather than recall

우리가 아이콘이나 앱을 봤을 때

'이것을 누르면 어디로 이동할 수 있겠다!'라고 생각하는 과정을 거치기보다는

별도의 사고과정 없이 자연스럽게 클릭하게 되죠?

이러한 UX가 잘 만들어진 UX라고 할 수 있습니다.

​

6) User control and freedom

뒤로 가기 버튼, 로컬바처럼

유저가 자유롭게 향유할 수 있게 하는 것을 말합니다.

​

7) Error prevention

결제하기 전 '정말 결제하시겠습니까?'

삭제하기 전 '정말 삭제하시겠습니까?'

이러한 안내 창처럼

사용자가 자주 하는 실수에서 이탈을 막기 위한 과정입니다.

​

8) Help users recognize, diagnose, and recover from errors

회원가입 시 개인 정보를 입력하는 과정에서 우리는 가끔 실수를 하곤 합니다.

전화번호에 숫자만 적어달라고 했는데 '-'를 적는 등!

이런 경우에 '-를 제외하고 작성해 주세요.'라는 멘트가 빨간 글씨로 뜹니다.

이러한 워딩 하나, 하나도 UX 기획자가 생각해야 할 부분입니다.

​

9) Aesthetic and minimalist design

물품 판매를 위한 애플 페이지는 aesthetic 하고, 구글 메인 페이지는 minimalist 합니다.

두 사이에 옳고 그름은 당연히 없지만 충분히 비교 가능하죠?

​

10) Help & documentation

사용자가 필요한 정보를 찾을 수 있도록 정보를 도식화해서 제공해야 한다는 것인데요,

앱 처음 설치 시 튜토리얼이나 가이드 등을 제공하는 것이 바로 그 예입니다!

​

 실무 기획 프로세스 

 

보통 실무 과정에서 모바일 앱을 만든다면, 다음과 같은 프로세스로 진행됩니다.

#상황분석

기획자들이 하는 시장조사 등을 상황분석이라고 합니다.

​

#필드리서치

많은 레퍼런스와 자료를 조사하는 과정입니다.

​

#모델링

앞서 진행한 상황분석과 리서치를 바탕으로 사용자들의 패턴을 발견하는 과정입니다.

그 예로는 페르소나, 사용자 스토리(user story), 여정지도 (Journey map) 등이 있습니다.

​

#UX 전략 수립

말 그대로 UX 전략을 수립하는 과정입니다.

​

#서비스 디자인

서비스 디자인은 서비스 기반 마케팅 논리에 중점을 둔 디자인 분야입니다.

depth 번호 붙이기, 플로우차트 작성 등이 이 단계에 해당됩니다.

​

#프로토타이핑

우리가 만들고자 하는 제품의 구체적인 형태를 디자인하는 과정입니다.

​

#테스트와 구현

프로토타입 구현까지 끝나면 마지막 검토를 하고 실제 구현 작업에 들어가겠죠?

이제 멋진 개발자분들이 저희가 찍어둔 프로토타입 디자인을 기반으로 제작해 주실 겁니다!

​

 정보구조도, 플로우차트, 스토리보드 작성 및 figama 

 

교육자님의 멋진 이론 강의를 바탕으로 실습을 진행하였습니다 -

 

정보구조

메인화면에서 뭘 누르면 어디로 넘어가고, 뭐가 나오고, 어떤 기능을 쓸 수 있는지 등

전반적인 배치를 그려보면 설계도 같은 것이 나오게 되는데 이를 정보구조라고 합니다.

​

저희는 엑셀 표 형식으로 정보구조도를 작성해보았어요 -

사진과 같은 정보구조도에 Depth에 맞춰 각각 번호를 붙여주었습니다.

1.0 큐시즘, 1.1큐시즘 소개, 1.1.1CI ~ 이런 식으로요!

​

플로우차트 작성

앞서 작성한 정보구조도로 표현하지 못하는 분야가 있습니다.

이러한 경우는 플로우차트를 통해 더 자세히 작성하게 되는데,

우리는 draw.io라는 사이트를 통해 플로우차트를 작성했습니다.

​

스토리보드 작성

스토리보드는 앱을 개발하기 위한 기초 설계 도면으로, 디자이너 및 개발자가 참고하는 최종적인 산출 문서입니다.

화면 구성이 어떻게 보일 것이며, 다음 화면이 어떻게 전개될 것인지를 알려주는 것으로,

화면에 대한 화면정의서, 기능정의서, 데이터베이스 연동 등 구축을 위한 모든 정보가 담겨있습니다.

​

figma 실습​

클라우드 기반의 웹 프로그램이어서

앱이 굳이 없더라도 어디서든 접속해서 작업할 수 있다는 장점을 가진 Figma.

저희는 이 프로그램을 통해 프로토타입 디자인을 진행했습니다.

능숙도에 따라 얼마든지 더 멋있는 프로토타입을 만들 수 있습니다.

저희 실습에서는 기본적인 툴을 이용해 간단하게 큐시즘 앱의 프로토타입을 제작해보았어요.

​

위처럼 멋진 말을 저희에게 보여주며 세션을 마무리해 준 권희성 교육자님이었습니다 -

---

이상, 모바일 UX 기획과 프로토타입 디자인 실습에 대해 작성한

대외홍보팀장 서채원이었습니다.

 

한국대학생IT경영학회 티스토리에 들어온 모든 분들에게 많은 도움이 되었길 바라며,

다음 일지 때 다시 찾아뵙도록 하겠습니다!

 

내용에 대해 궁금한 점은 댓글로 남겨주세요, 감사합니다 :)