UX Sketching 어떻게 활용하는가?
UX 디자인 배우기 #70
Today UX 아티클
UX Planet에 게재된 Nick Babich의 글 EverythingYou Need to Know About UX Sketching를 전문(全文) 번역한 글입니다.
누구든 진지한 창작 작업을 한 번이라도 해보았다면, 창작 활동의 벽을 느껴 보셨을 겁니다. 마치 돌로 된 벽을 치는 느낌일 겁니다. 여러분이 시각화해 낸 아이디어 중 어떤 것도 만족할 만큼 좋지 않거나 실생활에 적용할 수 없을 겁니다.
디자이너에게는 매우 익숙한 느낌일 겁니다. 하지만, 분명한 솔루션이 없는 다른 복잡한 문제들과 마찬가지로, 스마트 프로세스가 큰 차이를 만들어낼 수도 있습니다. 바로 여기서 UX 스케칭이 필요합니다.
UX 스케칭은 매우 중요하지만 자주 간과되는 사용자 경험 디자인의 한 측면입니다. 스케칭은 디자인에 대한 의사소통을 하는 매우 효율적인 방법으로, 디자이너가 다양한 아이디어를 시도해 보고 하나를 선택하기 전에 반복 작업을 해볼 수 있게 해줍니다.
UX스케칭은 두 단계로 된 프로세스다
디자인에서 많은 옵션을 고려해야 하며, 이를 통해 최고의 디자인을 선택하고 실행하게 되는 결과가 나오게 됩니다.
디자이너는 옵션을 고려한 후에 세부 사항을 다루는 단계로 넘어가기 때문에 UX 디자인 프로세스는 두 단계로 구성되게 됩니다.
"아이디어 창출"
초기 단계에서는 많은 아이디어가 쏟아져 나오지만 완전한 모양새가 갖춰지지 않았기 때문에 일부 요소가 불완전하거나 빠져 있는 것도 흔한 일입니다. 서로 다른 접근법을 고려하는 것, 해당 태스크의 맥락 및 해당 프로젝트의 여러 제약 안에서 가장 효율적인 것을 결정하는 것이 가장 중요합니다.
"세부사항 정하고 세밀화하기"
한 단계씩, 몇 가지 유망한 버전을 정하고 세부적으로 만들어가야 합니다. 이렇게 하면서 적절하지 않은 아이디어는 제거합니다.
UX스케치 및 와이어프레임
요구되는 세부화 정도, 색상 및 스타일의 정도, 누군가에게 보여줄지 아닌지 여부 등과 같은 요인에 따라 여러분이 만드는 와이어프레임은 달라질 것입니다.
좋은 스케치는 보다 명확히 생각할 수 있도록, 더 나은 솔루션을 찾을 수 있도록, 시간을 절약할 수 있도록 도와줄 것입니다.저는 스케치 유형을 다음과 같이 꼽아 보았습니다.
스케치
아이디어 창출. 초기 스케치를 뜻합니다. 세부화 정도가 낮다는 것을 쉽게 알 수 있습니다. 제한된 숫자의 색만 적용됩니다. 저는 문제를 다양한 각도에서 고민해보고 다양한 솔루션을 생각해보기 위해 많은 기본 스케치를 그립니다.
이런 스케치를 그리는 동안, 저는 최대한 다양한 버전의 솔루션을 만들어내려고 매우 노력합니다. 이 단계에서는 불완전성이라는 것 덕분에 마음 편하게 생각해볼 수 있기 때문에, 이 단계에서 세부 사항에 대한 문제로 교착 상태에 빠지지 않는 것이 매우 중요합니다. 여기서 제 목표는 최대한 많은 아이디어를 만들어내고 그중 가장 유망한 것을 선택하는 것입니다.
와이어프레임: 사양 정하기 및 세부화 된 단계
저는 보통 가장 유망해 보이는 스케치를 고르고 세부 사항 작업에 들어갑니다. 그리고 그 후에 다시 최고의 버전을 선택해서 보다 세부 사용을 작업하면 됩니다. 하지만, 그렇다고 해서 모든 작은 세부사항까지 신경 쓰라는 뜻은 아닙니다. 명확한 것들만 적으면 됩니다. 더욱이, 어떤 부분은 종이에 설명하기 어려울 수도 있습니다.
이 단계에서 저는 중요한 세부사항은 모두 그리지만, 아직 Balsamiq으로 그리진 않습니다. 모든 것을 종이에 그린 후에, Sketch에 작업하기 시작합니다. 디지털 툴은 종이보다 더 많은 창의적 자유를 제공해주며 작은 부분에도 쉽게 관심을 기울일 수 있습니다. 예를 들어 디자인 대신 “픽셀 하나하나까지” 집중할 수 있습니다.
비주얼 디자인 드래프트
매우 드물게 사용하는 접근법이지만, 어떤 경우엔 도움이 될 수도 있습니다. 다양한 시각적 솔루션이 프로젝트 초기 단계에서 고려되지만 그 모든 것의 디지털 스케치를 만드는 데는 많은 시간이 걸릴 수 있습니다. 제가 종이에 먼저 디자인 스케치를 하는 것도 그 이유입니다. 다양한 옵션을 고려하고 비주얼 디자인 방향을 선택하기 위함이죠.
구성요소 쪼개기
전반적인 아이디어를 이미 가지고 있고, 특정 페이지의 기능 혹은 인터페이스 구성요소에 대해 생각 중일 때는 이 테크닉이 유용하다고 생각합니다. 저는 다양한 페이지 요소를 그리고 세부 사항을 그린 다음에, 페이지 요소들을 놓을 수 있는 다양한 위치를 그려봅니다. 가장 간단한 요소라 할지라도 상태(state)를 가지고 있습니다. 가령 버튼을 누르면 거기에 호버 효과로 텍스트 블록이 들어가거나 하는 거죠. 복잡한 요소일수록 더 많은 상태를 가지게 됩니다.
기본부터 시작하기
"툴 준비하기"
넓은 공간이 있는 큰 테이블이 있는 가장 편한 장소를 찾습니다. 많은 종이를 준비하고 펜과 마커도 준비합니다.
"몸풀기"
준비가 되기 위해 라인, 동그라미, 기본 템플릿, 아이콘 등을 그려 보길 권장합니다.
"목표 정하기"
무엇을 그리고 싶은지 정합니다. 목표를 설정하고 무슨 이야기를 해야 하는지 결정합니다. 요구되는 세부화 정도도 결정합니다. 많이 그릴 준비가 되었는지 아닌지 판단합니다.
"타깃 오디언스 정의하기"
혼자서만 보려고 하는 거라면, 스케치가 어떻게 보일지는 걱정하지 않으셔도 됩니다. 하지만, 그린 것을 클라이언트에 보여주려고 한다면, 스케치에 더 많은 세부사항을 덧붙이는 데 추가 시간을 들여야 합니다.
"기간 정하기"
스케칭에 할당할 준비가 된 시간을 30분 정도로 정했다고 해봅시다. 미리 정해두면 일에 집중하는 데 도움이 됩니다.
이제 준비는 다 되었고 시작하면 됩니다.
1. 테두리 그리기
프레임, 브라우저 또는 폰 윈도, 인터페이스의 일부 등과 같은 것을 그립니다.
2. 가장 큰 혹은 가장 기본적인 요소 더하기.
메뉴, 푸터(footer), 메인 콘텐츠.
3. 세부사항 더하기.
관련된 세부사항을 더하되, 이 단계에서는 간단히 합니다.
4. 애니메이션과 노트 더하기.
스케치를 공유할 계획일 때만 필요한 단계입니다. 하지만 혼자서 보려고 만들 때도 유용할 수 있습니다.
5. 대안 스케치하기.
여러분의 솔루션에 대한 간단한 대안책을 스케치합니다.
6. 최고의 솔루션 고르기
최고의 옵션을 선택합니다.
7. 그림자 및 빗금 더하기
공유하는 목적일 때 특히나 중요합니다. 스케치에 그림자를 넣어주면 시각적으로 더 멋져 보이는데, 팀 멤버들이나 클라이언트에게 공유하려는 계획이 있을 때 중요한 부분입니다.
8. 스케치 저장하기
사진을 찍거나 폴더에 넣어둡니다. 저는 책상 위해 스케치를 위한 페이퍼 트레이가 몇 개 있습니다.
9. 공유하기.
저는 보통 다음 중 하나의 방법을 사용합니다. Evernote를 통해 스케치를 스캔하고 다른 팀 멤버나 이해관계자들에게 퍼머링크를 제공하거나 사진을 찍어서 InVision에 올리거나 Realtimeboard에 이미지를 올리고 서로 연결해두거나 이메일로 사진을 보냅니다.
10. 스케치 리뷰하고 노트 추가하기
잠시 휴식을 취하고 조금 시간이 지난 후에 다시 스케치를 봅니다. 스케치가 여전히 잘 이해되나요? 좋은 스케치는 이해하기 쉬워야 합니다.
디자이너가 자신이 그린 스케치 중에 이해할 수 없는 것이 있다면, 그 해결책은 성공적이지 못할 것입니다. 스케치가 아이디어를 제대로 시각화해 주지 못했을 수도 있고, 아니면 아이디어가 너무 복잡했을 수도 있습니다.
추가 요소로 스케치 명확하게 만들기
적절한 스케치를 찾거나 그린 후에 다음과 같은 세부사항을 추가합니다.
1. 제목
어떤 경우에는 제목을 추가하는 것이 좋은 선택일 때도 있습니다. 필요하다면 설명과 날짜도 스케치 상단에 써줍니다. 타이틀은 찾는 중인 스케치가 무엇인지, 해당 스케치가 관련이 있는지 없는지 아는 데 도움이 될 것입니다. 특히 스케치가 아주 많거나 다른 사람에게 보여주려고 할 때 도움이 됩니다.
2. 주석
주석은 해당 요소 가까이에 배치하는 이름 및 노트로, 콘텐츠나 다른 특징을 설명해줍니다. 다른 요소들, 보통은 그리기 어려운 요소를 명확히 해주는 세부사항을 더해줍니다. 예를 들어, 해당 블록의 이름, 인터랙션 디테일, 그림에 대한 설명, 향후 디자인 변형에 대한 아이디어 등이 들어갈 수 있습니다.
3. 번호
스케치에 있는 요소들 혹은 스케치 자체에 번호를 붙입니다. 어떤 순서로 붙일지는 여러분이 결정하시면 됩니다 (예: 인터랙션 플로우 순서, 만든 순서 등). 토론 중에, 특히 원격으로 토론할 때 유용하게 사용할 수 있습니다. 동료들과 클라이언트들이 피드백에서 스케치의 번호를 써서 얘기하면, 여러분은 무엇에 대한 코멘트인지 쉽게 알 수 있기 때문입니다.
4. 화살표
스크린 전환을 나타내기 위해 화살표를 사용할 수도 있습니다. 스케치의 서로 다른 부분을 연결하는 데도 이용할 수 있고, 액션의 순서를 나타내는 데도 사용할 수 있습니다. 화살표의 의미가 다양할 수 있기 때문에 화살표 위에 화살표가 무엇을 뜻하는지 적어주면 좋습니다. 다음은 화면 전환과 몇 가지 다양한 상태를 보여주는 기본 스케치 사례입니다
5. 노트
주석과 마찬가지로 노트는 콘셉트를 설명하는 데 사용됩니다. 하지만, 노트는 다음 사례처럼 주석과 다른 위치에 사용됩니다. 노트는 각 요소에 덧붙여지거나 대상 요소 근처에 배치하는 것이 아닙니다. 노트는 페이지의 상단 혹은 하단에 배치하는 것입니다. 해당 디자인에 포함되지 않은 요소나 여러분이 가질 수 있는 질문, 전반적인 설명, 스케치하지 않은 아이디어 등에 대해서 설명할 수도 있습니다.
6. 제스처
제스처는 터치 디바이스 디자인의 경우에 관련이 있습니다. 손의 제스처를 그리는 데는 연습이 필요할 수 있습니다. 다양한 유형의 액션을 나타내는 데 사용되는 몇 가지 제스처가 있기 때문에, 특정 액션을 지정하는 방법을 (불분명한 경우에도) 미리 결정하고 연습해 두는 것이 더 낫습니다.
7. 피드백
스케치를 다른 사람에게 보여준 후나 나중에 스스로 다시 본 후에 수정이나 개선에 대한 제안을 받을 수도 있습니다. 그런 피드백은 다른 색으로 표시하면 기존 스케치에 있던 피드백과 구분하는 데 도움이 되어 훨씬 더 유용할 것입니다.
서로 다른 유형의 요소에는 다른 색을 써서 구분할 수도 있습니다. 때때로 저는 드로잉에는 검은색, 링크에는 파란색, 노트에는 진한 녹색, 타이틀과 피드백에는 빨간색을 사용합니다. 스케치에서 서로 다른 색을 사용해 보세요. 다만 색상 선택을 일관성 있게 유지해야 합니다!
더 구체적인 팁 및 요령
1. 질에 대해선 걱정하지 않는다
Dribble에 올라온 스케치는 보지 마세요. 거기 올라오는 건 완전히 다른 것들입니다. 스케치의 주된 목적은 보다 명확하게 생각하고 더 나은 솔루션을 찾고 시간을 절약하는 데 도움을 받는 것이라는 점을 염두에 두세요.
2. 연습한다
몇 가지 앱을 그려보는 것부터 시작할 수 있습니다. 웹이나 모바일 앱을 열고, 노트에 각 요소들에 대한 설명을 달면서 스크린을 카피해보세요. 시간이 날 때마다 디자인의 기본 토대들을 그려보는 연습을 해보는 겁니다. 보통은 자꾸 연습하면 아주 잘 하게 됩니다. 시간이 좀 흐르면, 여러분이 하는 디자인의 일부분이 될 것입니다.
3. 폴더를 구입한다
저는 사무실에서 일하지 않고 카페나 집에서 일하는 경우가 자주 있습니다. 종이 스케치는 손상되기 쉽기 때문에 간단한 폴더를 구입해서 스케치를 안전하고 온전하게 보관하세요.
4. 어디를 가든 툴을 가지고 다닌다
이렇게 하면 언제든 종이에 아이디어를 적어둘 수 있습니다. 이렇게 적어두지 않으면 그 생각을 잊어버릴
수도 있고 아니면 충분히 세세하게 기억하지 못하게 될 수도 있습니다. 저는 항상 노트패드와 몇 장의 A4용지, 펜을 들고 다닙니다.
5. 다른 사람과 공유한다
다른 사람을 동참시키고 팀과 소통하는 것은 매우 중요합니다. 특히 초반에 다른 사람을 개입시키는 것과 그들의 피드백을 받는 것은 결국 시간과 자원을 절약할 수 있게 해줍니다. 다른 사람에게도 그들이 생각하는 방식의 디자인을 그려보게 독려할 수도 있습니다.
6. 페이퍼 드레이를 준비한다
업무 공간에 페이퍼 트레이를 두는 걸 고려해보세요. 예를 들자면 저는 페이퍼 트레이를 3개 가지고 있습니다: 새로운 태스크를 위해 하나, 스케치를 위해 하나, 빈 종이를 위해 하나씩 가지고 있죠.
7. 실험해보고 커스터마이즈 한다
제가 하게 될 디자인 제안은 제 경험에 기반하게 됩니다. 곧 여러분은 가장 잘 맞는 것을 찾게 될 겁니다. 최선의 방법, 최선의 순서, 여러분의 창의적 잠재성을 제대로 채워줄 무언가를 찾게 될 겁니다. 이는 지속적으로 새로운 것을 시도해 봐야만 얻을 수 있는데, 때문에 다양한 포맷, 스타일을 실험해보고 새로운 템플릿을 시도해보는 것이 중요합니다.
8. 템플릿을 사용한다
템플릿은 시간을 절약해주고 포맷의 제약 사항을 자연스럽게 담고 있어서 중요한 부분에 집중할 수 있는 시간을 만들어 줍니다.
스케치를 개선할 수 있는 추가적인 미니 방법론
다음은 팁이나 요령은 아닐 수 있지만, 여러분의 생산성을 올려주거나 스케치의 질을 개선해줄 방법론, 툴, 제안 등을 모아보았습니다.
1. 스케치 보드를 만든다
디지털 스케치 툴 대신 펜과 종이를 이용하는 것의 가장 큰 이점 중 하나는 실제로 벽에 붙일 수 있다는 겁니다. 여러분 팀에 있는 모두가 볼 수 있고 참여할 수 있습니다 (그래도 저는 리뷰 세션을 따로 마련하길 권장합니다).
(1) 자신이 만든 스케치를 직접 볼 수 있는데, 이는 여러분의 생각을 촉진시키고, 동 떨어진 작은 부분이 아닌 큰 그림, 전체 시스템을 볼 수 있게 해줍니다. 여러 파트 사이에 인터랙션을 볼 수 있게 될 것이고 다른 것과 서로 얼마나 잘 어울리는지 볼 수 있습니다.
(2) 스케치 보드를 만들고 화이트보드에 스케치를 붙이세요. 만일 오피스에 화이트보드가 없다면, 양면 테이프나 포스트잇 노트 시트를 사용해서 벽에 스케치를 붙여도 됩니다. 벽에 붙이고 싶지 않다면, 넓은 판지를 사용해도 됩니다. 저는 스케치 보드를 사용하기를 강력하게 추천합니다. 최고의 디자인 툴 중 하나이기 때문입니다.
2. 화이트보드를 사용한다
화이트보드는 훌륭한 드로잉 툴입니다. 여러 장점을 가지고 있죠. 협업을 도와주는 도구로, 토론과 드로잉에 팀 멤버들을 참여시키기 더 쉽습니다. 그들의 아이디어가 별로 적합하지 않더라도, 그들이 생각하는 방식을 이해할 수 있게 되며, 서로 이해하고 합심할 수 있게 도와줍니다.
(1) 마커는 디테일에 집중할 수 없게 하기 때문에 전반적인 것에 대해서 생각해야 합니다. 여기서 하는 스케치는 해석의 여지를 가지고 있습니다.
(2) 화이트보드는 지우기 쉽고 수정하기 쉽습니다.
(3) 공간이 많아서 전체 시스템 플로우를 쉽게 생각해볼 수 있습니다.
(4) 자석을 이용해서 스케치나 프린트물, 레퍼런스 등을 붙일 수 있습니다.
3. 프로토타입
디자인을 평가하기 위해 클릭 가능한 프로토타입을 만드세요. 일부 요소에 대한 피드백을 받아보는 겁니다. 특히 템플릿을 이용할 때 쓰면 좋은 방법입니다.
스케치가 전부 같은 사이즈이기 때문이죠. 템플릿을 이용하면 같은 사이즈의 스케치를 그리는 것이 훨씬 더 쉬워집니다. 더 쉽게 할 수 있도록 다운로드하여 사용할 수 있는 템플릿을 알려 드리겠습니다. Mobile, Browsermulti-window, Browserscroll, Personas.
4. 프린터와 스캐너를 활용한다
손으로 프레임워크를 그린 후에 (더 정확하게 그리려면 자를 이용하면 됩니다), 스캐너나 모바일 앱을 이용해서 스캔하고 프린트를 합니다. 프린트 전에 이미지 편집기를 이용해서 템플릿을 편집할 수도 있습니다. 불필요한 요소는 제거하거나 같은 요소를 복제할 수도 있습니다. 레디메이드 사이트 페이지나 사진, 그 외 기술 요소(descriptive elements) 등을 프린트할 수도 있습니다. 스케치에서 오려낸 것을 붙일 수도 있습니다.
5. 스캐닝할 때 Evernote를 이용한다
Evernote는 훌륭한 디자인 툴입니다. Evernote 안에 디자인을 저장할 수도 있고 공유할 수도 있습니다. 테마를 만들 수도 있고 스케치를 정리하기 위해 태그를 이용할 수도 있습니다. “Scanner” 모드의 기능은 특히나 인상적입니다. Scanner 모드를 설정하고 앞에 스케치를 놓으면 “스캔”을 해줘서 스케치의 사본을 얻을 수 있습니다. 그러면 Evernote에 동료들을 초대하고 그들에게 노트 링크를 주면 됩니다. 태블릿과 폰을 위한 모바일 앱이 있어서 언제나 스케치를 손에 들고 다닐 수도 있습니다.
6. 하이브리드 스케칭
스케치에 현실감을 더해주기 위해서는 사진과 결합해볼 수도 있습니다. 즉, 사진을 찍어서 인터페이스 요소에 스토리를 더해서 그릴 수 있다는 말입니다. 이렇게 하면 인터랙션 이슈와 디테일을 아는 데도 도움이 됩니다.
7. 현실 세계를 추적한다
스토리보드를 만들어야 한다면, 구체적인 맥락에서의 경험을 그리세요. (예: 버스 정류장에서 스마트폰을 이용하는 사람 등) 사람, 공간에 대한 설명과 함께 다양한 현실적 대상을 넣어줘야 합니다. 이런 것들은 그리기 어려울 수도 있습니다. 특히 드로잉 스킬을 아직 마스터하지 못했을 때 더 그렇습니다. 하지만 간단한 팁이 있습니다.
상황이나 물건의 사진을 찍은 다음, 이미지 에디터를 이용해서 핵심적인 물건의 윤곽을 땁니다. 여기서 딴 윤곽선을 나중에 스케치하는 데 사용할 수도 있습니다.
물론, 태블릿이나 스타일러스가 있으면 더 쉬울 겁니다.
와이어 플로우: 시스템 플로우 윤곽 및 가지 그리기
와이어 플로우(wireflow)는 기본적으로 시스템 플로우의 순서를 뜻합니다. 어떻게 유저가 태스크를 수행하는지, 스크린에서 스크린으로 어떻게 옮겨가는지, 제품에 대한 전반적인 경험은 어떻게 되는지 고려해야 합니다.
와이어 플로우, 혹은 여러분이 그리고 있는 무언가와 그것이 연결되는 방식은 다음과 같은 접근 방식에 따라 정리될 수 있습니다.
"시퀀스"
시퀀스는 스크린 다음에 스크린이 나오게 되는 일방향 여정입니다. 의사결정 지점에 대한 스토리를 담을 수도 있습니다. 여정만 보여주는 것이 아니라 의사결정 지점과 유저가 선택할 수 있는 다양한 경로를 보여주게 됩니다. 스크린 인터랙션의 구조를 보여줄 수 있습니다.
"상태 변화"
일부 요소의 다양한 스크린 상태와 상태 혹은 상태 사이에 전환을 유발하는 액션 등을 그립니다.
"스크린 vs. 스크린 요소"
전체 스크린을 그릴 수도 있고 아니면 마이크로 인터랙션이나 인터랙션만 고려할 수도 있습니다.
"플랫폼"
하나의 플랫폼 경험만 고려할 수도 있고 여러 플랫폼을 고려할 수도 있습니다.
"범위"
사용자 여정의 일부만 묘사할 것인가요? 아니면 전체 여정을 묘사할 것인가요? 시스템에 있는 하나의 유저 인터랙션을 그릴 것인가요? 여러 유저 인터랙션을 그릴 것인가요?
저는 일반적으로 회사와 현실적 용도에 따라 다음과 같이 와이어 플로우 유형을 정합니다.
1. 전반적인 플로우와 상위 플로우를 연결하기(High Level Flow)
적절하게 스크린 전환을 스케치하고 제품 이용의 전반적인 여정을 그립니다. 여기서 맥락을 포함시킬 수도 있고 옵션으로 일부 유저 인터랙션을 보여줄 수도 있습니다. 예를 들어, 이커머스 쇼핑 서비스는 여러 단계가 들어가는 상당히 긴 여정을 가지고 있습니다. 유저가 샵을 찾는 방식, 제품을 주문하기 위해 밟게 되는 단계, 결제 방법 등을 고려해야 합니다.
2. 스크린 플로우(Screen Flow)
여기서는 시스템 전반에 걸친 구체적인 기능적 플로우에 초점을 맞춥니다. 스크린의 짧은 일방향 시퀀스가 될 수도 있고 아니면 여러 가지를 가진 여정일 수도 있습니다. 예를 들어, 유저가 사진이나 비디오를 업로드하는 경우가 있겠죠.
3. 내비게이션 스킴(Navigationscheme)
스크린과 그 안에 들어가는 옵션들을 그립니다. 여정을 그리는 건 아닙니다. 이 단계에는 유저가 선택할 수 있는 옵션, 유저가 갈 수 있는 방향, 앱의 여러 부분을 보여주는 정보가 들어갑니다. 저는 보통 프로젝트를 시작할 때 내비게이션 스킴을 그립니다. 내비게이션이 어떻게 구조화되어야 하는지 이해하는 데 도움을 줍니다. (어떤 부분이 들어가야 하고, 얼마나 많은 레벨이 필요한지 알 수 있습니다).
4. 스크린 상태(screen states)
스크린 혹은 요소의 상태를 그립니다. 파일 업로드 다이얼로그를 그 사례로 들 수 있겠습니다. 이 경우에, 가령 다음과 같은 상태가 들어가게 될 겁니다.
빈 스크린
유저가 활성화 영역으로 파일을 끌어옴
파일이 업로드 중
파일이 업로드됨
오류가 발생함.
UX 플로우 스케치하기: 방법을 알려주는 간단한 가이드
와이어 플로우 디자인 프로세스는 와이어프레임 디자인 프로세스와 비슷합니다. 많은 단계가 비슷하거나 동일하지만, 몇 가지 중요한 차이가 있습니다:
1. 무엇을 그려야 하는지 정한다
무엇을 그리고 싶은지 정확히 결정하세요. (예: 전반적인 히스토리를 그릴 것인가 아니면 디자인의 한 부분을 그릴 것인가) 다양한 옵션을 만들어내고 싶으신가요? 아니면 한 여정의 세부 사항들을 생각해보고 싶으신가요? 누군가에게 스케치를 보여줄지 보여주지 않을 지도 결정해야 합니다.
2. 드로잉에 어떤 키프레임과 전환을 집어넣을 것인지 정한다
모든 스크린과 쉬프트들을 넣었다면, 와이어 플로우는 매우 길고 복잡해질 겁니다. 태스크를 완수하는데 도움이 되는 인터랙션의 핵심을 전달하기 위해 반드시 보여줘야 하는 핵심 스크린이 무엇인지 고민해보세요. 스크린쉬프트도 마찬가지입니다. 여러분의 아이디어를 표현하는 데 어떤 쉬프트가 더 유용한 지 선택해야 합니다. 다음 사례를 참고해보세요.
3. 시작점을 정한다
여러분이 만드는 여정의 시작점은 어디가 될까요? 예를 들어 앱에 로그인할 때 보이는 부분을 여정의 시작으로 생각할 수도 있습니다. 아니면, 중간지점이나 가장 흥미로운/어려운/중요한 스크린이나 프로세스 단계에서 시작할 수도 있습니다. 아니면 마지막 유저가 달성하는 마지막 결과가 보이는 끝에서부터 시작해서 유저가 그 지점에 도달하기까지 밟은 단계를 설명할 수도 있습니다.
접근법을 정하고 전반적인 페이퍼 스케치를 만든다4. 그다음에 무엇이 나올지 정한다
시작점을 그리고 난 후에는, 다음 질문에 답하면서 그다음에 무엇이 나오게 될지 결정합니다. 이 단계는 어떤 방향으로 유저를 이끄나요? 여러분은 어떤 방향으로 유저가 갔으면 좋겠다고 생각하나요? 거기까지 가기 위해 유저가 무엇을 해야 하나요?
5. 대안 루트를 스케치한다
유저가 각 단계에서 밟을 수 있는 대안적 경로도 생각해보세요. 유저의 인터넷 연결이 실패하면 어떤 일이 벌어질까요? 그들이 선택할 수 있는 다른 옵션은 무엇인가요? 유저나 앱이 오류를 낸 경우에 무엇이 잘못될 수 있나요? 유저가 그다음에 앱을 시작했을 때 어디서부터 시작하게 될까요?
6. 대안 플로우에 대해 생각한다
히스토리를 분석하고, 대안 플로우를 디자인하고, 스케치합니다.
7. 주석, 노트, 세부사항을 추가한다
불명확한 세부사항을 분명하게 해주는 설명 요소를 추가합니다.
8. 저장한다
해당 스케치의 디지털 사본을 만듭니다.
9. 공유한다
해당 스케치를 공유합니다. (예: Evernote 혹은 InVision을 통해)
UX플로우 스케칭의 기본 팁과 요령
1. 와이어 플로우 초안을 먼저 짠다
상당히 긴 여정에 대해 생각해볼 예정이라면, 얼마만큼의 공간이 필요한지 이해하기 위해, 그리고 중요한 단계 혹은 세부사항을 놓치지 않기 위해 간단한 스케치를 만드는 것이 좋을 겁니다. 나중에 페이퍼 스케치에 추가하려면 어려울 수 있습니다.
2. 너무 많은 디테일이 들어간 거대한 맵을 만드는 게 아니다
너무 정확하게 디테일을 그리게 되면 다양한 상위 버전을 만드는 데 상상력에 제약이 생길 수 있습니다. 전체 시스템을 묘사하는 거대한 스킴(scheme)을 만드는 대신, 핵심 스크립트에 집중하려고 노력하고 각 스크립트에 개별 페이지를 만드는 데 전념하려고 노력해야 합니다.
3. 불필요한 세부사항은 제거하고 다양한 세부화 정도를 가진 스케치를 합친다
모든 인터랙션 설명서를 그릴 필요는 없으니 여정의 핵심 요소만 이용하려고 노력하세요. 거대한 인터랙션 맵을 그리면서 모든 스크린을 세부적으로 만들 필요는 없습니다. 일부 스크린은 네모 몇 개로 표현할 수도 있고, 다른 핵심 스크린은 좀 더 자세하게 그릴 수도 있습니다.
4. 다양한 크기의 종이를 써본다
A3나 A5 등 다양한 형식의 종이를 사용해보세요. 종이 시트 크기는 여러분을 제약할 수도 있고 다양한 방식으로 여러분의 프로세스에 영향을 미칠 수도 있습니다. 작은 종이에 많은 스크린이나 디테일을 넣기 힘들게 할 수도 있지만, 주요 아이디어에 집중할 수 있도록 도와줄 수 있습니다. 큰 종이를 사용하면, 거대한 여정을 하나 그리고, 거기에 많은 디테일과 추가 노트를 더할 수 있습니다. 아니면, 여러 작은 여정을 거기에 더할 수도 있습니다.
5. 포스트잇 노트도 도움이 될 수 있다
포스트잇 노트도 써보길 바랍니다. 거기에 분리된 스크린을 그릴 수도 있고 각주를 달 수도 있고 아니면 스케치 구성요소의 추가적 상태를 그릴 수도 있습니다. 포스트잇의 장점은 쉽게 대체할 수 있고 간단히 자리를 옮길 수 있다는 겁니다. 예를 들어, 플로우가 변화된 경우, 포스트잇의 순서만 바꾸면 됩니다.
6. 템플릿을 사용한다
템플릿도 써보길 바랍니다. 시간을 절약해주고 보다 클릭 가능하고 질이 높은 프로토타입을 만들 수 있게 해줄 겁니다.
7. 화이트보드를 써본다
화이트보드는 많은 장점을 가지고 있습니다. 많은 가지를 가진 큰 여정을 그릴 수 있게 해주기 때문에 점점 더 인기가 많아지고 있습니다. 종이에 많은 애플리케이션 구성 요소를 그리고 나서 자석을 이용해서 화이트보드에 그려진 여정에 덧붙일 수도 있습니다.
8. 그림자 스케치하기
그림자는 중요한 요소를 표시하고 시각적 매력을 더해주는 데 도움이 될 수 있습니다. 저는 세 가지 유형의 그림자를 사용합니다. 빛의 방향에 따라 그은 라인. 항상 예뻐 보이는 건 아니지만 그라데이션을 이용해서 대상의 “높이”가 달라 보이게 만들 수 있습니다. 윤곽 중 일부분(바닥만 혹은 바닥과 오른쪽)에 더 두껍게 어두운 색을 넣을 수도 있습니다. 혹은 Pro-marker (혹은 드로잉 앱에서 쓰이는 동일한 기능)를 이용할 수도 있습니다.
9. 구성요소 그리기
“난 그림을 잘 못 그립니다” 같은 반대는 여러분의 진취성을 가로막을 수 있습니다. 사실 보기보다 더 쉬운 작업입니다. 가장 복잡한 스케치라 할지라도 일반적으로 다음과 같은 몇 가지 기본 요소로 구성되어 있습니다.
점, 선, 세모, 네모, 동그라미를 그릴 수 있다면, 스케치를 그리는 데 필요한 모든 기본 무기는 가지고 있는 겁니다.
10. 전체 합치기
기본 요소, 버튼, 라디오 버튼, 드롭다운 메뉴는 모두 기본 요소로 구성되어 있습니다. 이런 요소 그리기를 배우고 나면, 이제 그런 걸 합쳐서 더 복잡한 블록이나 구성요소를 만들 수 있습니다.
마무리
이 글의 목표는 궁극의, 널리 적용할 수 있는 UX 스케칭 혹은 일반 스케칭 가이드를 만드는 것이 아니었습니다. 디자이너마다 서로 다른 니즈와 개인적 취향을 가지고 있기 때문입니다.
여러분도 보셨듯이, 여기서 많은 것을 다루긴 했습니다. 디자이너는 UX 스케치를 만들기 위해 무수히 많은 툴, 테크닉, 접근법을 사용하며, 이는 보통 주관적입니다. 특정 테크닉은 다른 프로젝트 작업을 하는 다른 사람들에게 적합할 수도 있고 아닐 수도 있습니다. 만일 시작을 하려고 한다면, 반드시 여러 가지를 실험해봐야 합니다.
지속적인 연습과 실험을 해봐야 본인에게 가장 잘 맞는 것을 찾는 데 도움이 될 것입니다.
감사합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
