UI 스케치 절차와 팁

UI 스케치 절차와 팁

UI 스케치 절차와 팁
Category
Share Story

미국이 우리나라의 UX 디자인 프로세스와 크게 다른 점 가운데 하나는 스케치(Sketch)를 잘 활용한다는 점입니다. 미국의 UXer들은 틈만 나면 스케치를 합니다. UX 스케치에 관한 책들도 많고, 다양한 UI Stencil(필기도구)들이 팔리며, 심지어는 어떤 종이와 펜을 써야 좋은 스케치를 그릴 수 있는 지에 대한 칼럼이 UX Mag이나 UX Booth와 같은 권위있는 UX magazine에 종종 실리기도 합니다.

파워포인트나 포토샵으로 프로토타이핑을 하지 않고, 모호하고(ambiguity) 거칠며(rough), 세밀한 표현이 뒤쳐진(lack of detail) 스케치를 거치는 이유는 정형화되지 않은 스케치의 표현방법이 우리의 사고를 좀 더 확장시켜주고 어떤 가능성에도 눈을 뜰 수 있게 생각을 열어주기 때문입니다.

“Learning from sketches is based largely on the ambiguous nature of their representation. That is, they do not specify everything and lend themselves to, and encourage, various interpretations that were not consciously integrated into them by their creator.”

– Bill Buxton, Sketching User Experiences

스케치는 서비스 아이디어 스케치와 UI 스케치로 나뉘는데, 먼저 UI 스케치 절차와 팁을 알려드리고자 합니다.

1. 종이로 할 지 테블릿 PC로 할 지 결정한다. 디지타이저가 결합된 테블릿 PC는 필기감이 떨어지기는 하지만 완성된 스케치의 저장, 공유, 관리가 종이보다 수월하다.

2. 제일 위에 스케치 컨셉을 적는다.

3. 연속된 화면의 변화나 이동을 표현할 지, 하나의 화면을 표현할 지 결정한다.

4. 연속된 화면을 표현하고자 할 때에는 어디에서 시작해서 어디로 끝날지 결정한다.

5. 화면 주변에 여백을 어느 정도 둘지 결정한다. 그냥 화면만 그리겠다면 상관없지만 주변에 글씨를 써서 설명하거나 UI 요소 하나를 확대 또는 변화(transition)를 나타내기 위해서는 그만큼의 여백이 필요하다.

6. 스케치를 담을 화면을 그린다. 테블릿 PC라면 상관없지만 종이 위에 펜으로 그릴 경우에는 일단 연필이나 작은 선으로 그리는 것이 실수를 정정하기 편리하다.

7. 각 화면(네모 박스)의 위에 화면명을 쓴다. 좋은 레이블은 스케치가 엉성해도 스케치의 의도를 잘 살려준다.

8. 각각의 화면에서 반복되는 요소(Navigation, 로그인, 설정, 상태표시바 등의 공통 UI 요소)를 적당한 위치에 배치한다. 중요한 의미를 갖지 않는다면 그냥 사각형으로 영역만 표시해도 무방하다.

9. 컨텐츠 영역을 수직/수평으로 구분한다. (모바일 UI에서는 이런 일이 거의 드물지만) 수직적인 영역을 먼저 나누는 것이 좋다. 그 다음에 수평적인 영역을 구분한다.

10. 가장 큰 UI 요소(메인 이미지, 컨테이너, 키패드)에서 시작하여 점점 작은 요소를 그린다.

11. 입력박스와 같은 Form이나 버튼 등은 되도록 동일한 크기와 형태로 그린다.

12. 연속된 화면의 변화를 표현하고자 할 때에는 똑같은 UI 요소를 반복해서 그려야 하는 경우가 많다. 귀찮다고 생략하는 것은 바람직하지 않다.

13. 카피나 레이블을 써넣는다.

14. 각각의 화면에서 반복되는 요소에 옅은 색깔로 배경색을 덧칠하면 좀 더 통일성이 있어 보인다.

15. 강조해야 할 부분은 좀 더 굵은 선으로 표시하거나 색깔을 입힌다. 동그라미를 그린 후 그 안에 확대경처럼 특정 요소를 더 크게 그리는 것도 좋다.

16. 필요하다면 화면의 주변 여백 공간에 UI 요소에 대한 설명글을 써넣는다.

17. 모바일 UI인 경우에는 사용자의 제스처 인터렉션 방식을 그려 넣는 것도 좋다. (double tab, swipe, pinch..)

18. 이 작업을 반복한 후 다된 스케치들을 공유하고 다른 팀원들과 토론한다.

021305'

 

다음은 UI 스케치시 주의해야 할 몇가지 사항들입니다.

1. 스케치는 여러 페이지들이 한 장에 나온 템플릿이 유용하다. 하나의 정적인 상태(화면)를 상세하게 표현하기보다 여러 상태를 한꺼번에 표현해야 하기 때문이다.

2. 스케치에는 각 정적인 상태가 어떻게 연관성을 갖고 사용자의 이용 흐름으로 묶이는지를 표현하는 것이 표현돼야 한다.

3. 스케치는 반드시 지정된 날짜/공간에서 수행할 필요는 없다. 그러나 하루나 이틀 정도는 모든 팀원들이 모여서 그동안 작업한 스케치를 검토하거나 그 자리에서 즉석해서 스케치를 해 보는 일정(스케치 워크숍)을 잡는 것이 좋다.

4. 스케치 워크숍을 진행할 때는 과제를 정하고 스케치-평가 과정을 과제별로 반복해서 수행한다.

5. 몇 개의 그룹으로 나눠 똑같은 대상을 스케치한 다음 그것을 상호 비교하면서 장단점을 평가하는 것도 좋다.

6. 되도록 자유롭게 다양한 형태의 스케치를 하되 평가 과정에서는 몇 개의 안으로 방향을 좁혀야 한다. 모든 스케치가 다음 프로토타이핑 작업으로 이어지는 것은 비효율적이다.

 

 

– UX1 컨설팅그룹

[catlist name=”ux-prototyping” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]