그림까지 그려본다, 내가

- 문과생의 스마트빌딩 만들기 (6) -

Dec 21. 2018

프로토파이를 설치하고 앱 로고를 만들고 나서 든 생각은 무슨 화면부터 만들지? 였다.

화면이 몇 개 필요한지, 어떤 화면 뒤에 어떤 화면이 나올지 등 흐름을 한눈에 볼 수 있는 게 필요하다고 생각해 용어 정리부터 시작했다.

여담으로, 퍼듀대학교에 오기 전까지만 해도, 검색은 항상 네이버에서만 했다. 내가 하는 과제나 찾고자 하는 정보가 그리 글로벌하지 않았을뿐더러 모국어로 바로바로 찾아낼 수 있다는 점 때문에 굳이 구글에서 검색할 필요성을 못 느꼈다. 프로젝트를 하면서 느낀 것은 영어의 힘과 구글의 힘이었다.

한국어로 검색할 때의 결과물의 양질과 영어로 검색한 결과물의 양질은 매우 달랐다. 정보를 갖고 있는 사람들이 주로 쓰는 언어가 영어라는 점이 그 차이를 만들어낸 것이다.

구글에서 영어로 검색을 하면 모든 사이트의 구석구석까지 모아서 보여준다는 느낌을 받았다. 방대한 양이지만 관련성 없는, 광고성의 글의 수보다 나의 검색의도와 거의 부합하는 글을 보여준다는 점에서도 만족도가 높았다. 요즘 네이버에서도 view라는 기능을 접목해 네이버 그 외 사이트 게시물도 보여주는 것 같은데, 점점 많은 검색엔진들이 그렇게 커지지 않을까 싶다.

가장 큰 문제는 구글에서 검색되는 글의 대부분이 영어라는 점이다. 물론 요즘 크롬에서 자체 번역 서비스를 제공하기도 하는데, 개인적으로는 직독직해가 가장 빠르고 확실하다고 생각한다. 나도 처음에는 전체 번역의 도움을 받았지만 시간에 쫓기다 보면, 읽는 순간 해석이 되는 그런 날이 오기도 했다. 내가 대단하다기보다 수능 영어 훈련과 교육의 도움이지 않나 싶다.

용어 개념을 정리하는데에 도움을 준 원본 사이트를 공유한다. (UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff)

노트에 정리해 보았다

- 플로우차트(Flowchart)는 웹/앱의 흐름을 풀어서 순서를 나타낸 것으로 화면의 전환/버튼 클릭 전후의 변화/화면에서 중심적으로 봐야 할 것들 등을 볼 수 있게 도와주는 그림(도표; diagram)이다.

- 테스크 플로우(Task Flow)는 테스크(task) 즉, 작업/업무에 집중해서 흐름을 표현한다. 쇼핑 앱에서 로그인 > 비밀번호 불일치 > 비밀번호 재설정 > 로그인과 같은 하나의 작업에 하나의 흐름도를 나타낸다.

- 유저플로우(User Flow)는 사용자가 웹/앱을 사용하는 과정에 집중한다. 하나의 작업일지라도 사용자 모두가 동일한 흐름을 따르지는 않는다. '비밀번호 불일치'라는 사건(event)에서 앱을 나가거나, 비밀번호 찾기를 시도하지 않고 비회원으로 쇼핑을 하거나, 환경설정 탭에 들어가서 새로 가입을 하거나 등 여러 경로가 발생한다. 그런 경로들을 미리 예상하여 불필요한 행동을 못하도록 흐름을 끊거나 막는 것으로 사용자의 경로를 유도할 수 있는 단계가 유저플로우이다. 그러기에 테스크플로우와 달리 하나의 작업에도 여러 경로가 존재한다.

- UI 플로우(UI Flow)는 화면에서 어떤 방아쇠(trigger; 어떤 사건의 계기)를 어떻게 행동(action)하면 다른 화면으로 넘어가는 지를 나타낸다. 예를 들어, 쇼핑 앱의 로그인 화면에서 회원가입하려면 버튼을 클릭하도록 할지, 특정 단어를 입력하게 할지 등과 같은 세부적인 방향을 정해주는 것이다.

- 와이어플로우(Wire Flow)는 기존의 와이어프레임에 플로우가 결합된 개념으로, NNgroup에서 새로운 UX플로우로 발표했다. 플로우차트와 와이어플로우는 전체의 흐름과 각 작업 간의 상호작용을 다룬다는 공통점이 있지만, 플로우차트는 키워드, 단순한 레이아웃(사각형, 마름모 등)으로 표현된다면 와이어플로우는 평면에서 나타내는 프로토타입과 같은 느낌으로, 작업 간의 흐름이 어떤 계기로 어떻게 넘어가는지를 구체적으로 표현한다는 점에서 다른 점을 꼽을 수 있다.

추가로, 용어정리와 플로우를 선택하기 위해 참고했던 사이트들을 공유하고자 한다.

Build It With The User in Mind: How to Design User Flow

SIte-map / Flowchart for Web

로직도(User Flow Chart)와 사용자 여정 지도(Customer Journey Map)에 따른 디지털 마케팅 전략

UI/UX 그리고 안드로이드 UI 디자인팁

A Collcetion of Inspiring Sitemaps and User Flow Maps

디자이너는 사용자(user)가 웹이나 앱에서 어떻게 향해(navigate)할지를 미리 살피고 유도해야 한다. 그러기에 많은 디자이너들은 많은 툴과 플로우를 창조하고 융합하고 여러 개 쓰고... 그래서 많은 사이트를 참고했어도 '엥? 이것도 플로우차트라고? 유저플로우같은데?' 싶은 게 정말 정말 많았다. 내가 정리한 것도 사실 정확하지 않을 수 있다. 하지만 내가 이 프로젝트에서 할 플로우를 찾았다는 게 중요하다. 하하.

많은 툴 중에 나는 와이어 플로우(Wire Flow)를 선택했는데 그 이유는, 우리 팀은 단순한 전체 흐름이 필요한 것은 아니었다. 주요 기능 4개를 메인페이지에 그냥 똵 보여주는 형식이었기 때문에, '이 버튼을 누르면 다음에는 이화면이 뜨고~'와 같이 흐름도가 메인인 앱은 아니었던 것이다. 기능별로 화면과 정보를 정리할 수 있는 툴, 장치, 플로우가 필요했고 가장 상황에 적절한 것이 와이어플로우라서 이를 약간 변형하여 사용하게 되었다.

구글에서 iphone mockup paper를 검색해 출력을 하고 그 위에 필요한 화면들을 간략히 그렸다. 그리고 그것을 잘라 흐름에 맞게 위치한 후 큰 종이에 붙였다. 약 이틀 정도 밤새 그리고 오리고 붙이고를 했고 전혀 힘들지 않았다. 예쁜 스티커로 다이어리를 꾸밀 때처럼, 노트북을 처음 샀을 때처럼 설레고 재밌을 뿐이었다.

나의 첫 페이퍼 와이어플로우였다.

그리고 오리고 붙이고, 그리고 오리고 붙이고, 그리고 오리고 붙이고...

처음 구성했을 때는 총 12개의 화면이 나왔다. 로그인 1개, 얼굴인식(도어벨) 4개, 오토라이트(Auto light) 2개, 내부온도 2개, 쓰레기통 2개, 알람(push alarm) 1개로 해서 총 12개의 화면을 추려냈다. 대략적으로 화면의 탭의 구성, 버튼의 위치, 아이콘 위치 위주로 그렸고 그 밑에는 화면의 특징(아이콘, 데이터 종류 등)을 추가로 기재했다.

다음날에 수정하기로는, 도어벨에 비디오 화면을 추가했고, 오토라이트는 하나로 줄였으며, 스플레쉬 스크린(Splash Screen; 앱 시작 전에 짧은 대기화면으로, 주로 앱의 로고, 앱 소개, 또는 로딩 진행률을 보여주는 화면) 1개를 추가하여 다시 12개 화면을 맞췄다.

내가 그렸어! 어때? 괜찮지!!!! 수고했기는~ 난 이게 적성인가 봐. 이런 거 너무 재밌어... 밤새서 오리고 붙였잖아. 하하. 근데 다들 어떤 화면 구성을 좋아해?

페이퍼 와이어플로우를 보여주면서 수정하거나 추가해야 하는 부분은 없는지 짧은 회의를 나눴다.

어떤 화면 탭 구성을 선호하니?

Card Stack View 화면 탭이 쌓여있어서 해당 탭으로 드래그하면 화면이 커지는 구성

Folding Cell 화면 탭을 클릭하면 접히고 펴지는 구성
우리 팀은 Folding을 더 선호한다고 했다. 와이어플로우에 그린 채로 가도 되겠다 싶었다. 접히고 펴지는 애니메이션은 사실 개발자 부분이라서 나는 더 손대지는 않았다.

push notification은 몇 개의 화면이 필요할까?

(push alarm인 줄 알고 wireflow에서는 그렇게 적었지만 정확한 용어는 push notificaition이라고 한다.)

잠금화면에서 뜨는 알람 1개 (lock version)

열림화면에서 상태 표시줄에 뜨는 알람 1개 (unlock version)

열림화면에서 뜨는 알람 1개 (heads-up version)
이렇게 push notification에도 추가 화면이 3개가 더 생겼다. 휴대폰을 사용하면서 지나쳤던 알람도 사실은 여러 상황별로 화면 구성이 다르다는 점에서 놀라면서 나 또한 촘촘히 흐름과 구성을 짜야겠다고 생각했다.