brunch

매거진 새싹 UXer 시리즈

라이킷 59 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 유플리트 Jan 22. 2021

잘 설계하고 잘 그리는 법, 서비스 구현하기

U-Biz Consulting Div.핫님

UI/UX조차 몰랐던 햇병아리 시절에도
'나는 분명 뒤로 가기를 눌렀는데 왜 첫 화면이 나오지?' 라던가
'쇼핑 앱에서 물건은 잔뜩 담아놨는데 장바구니 화면을 못 찾아서 헤매었어' 라던가
'앱 디자인은 이쁜데 다른 메뉴 찾아보려면 여기저기 눌러봐야 해서 불편했어' 같은 불편함은 알았더랬다.
-
사용자들은 우리가 얼마나 열심히 기획을 했고, 디자인했는지 모른다.
그저 눈에 보이는 화면이 이쁜지, 사용하기 편한지 불편한지만 볼 뿐이다.

앞선 시리즈에서는 페르소나를 통해 사용자의 니즈를 파악하고 Journey Map이나 Flow를 그려보았다. 그럼 이제 눈에 보이는 화면을 그려볼 차례이다. 각 화면에서 내가 세운 전략·서비스를 어떻게 탐색하게 할지, 화면의 구성 / 디자인은 어떻게 하면 좋을지를 끊임없이 고민하고 수정하기를 반복하면 된다.

1. 정보구조를 설계하자.

1) 뼈대를 세울 것

서비스가 아직 단출해 화면이 총 5개밖에 안 되는 서비스가 있다. 이때 서비스 기획자는 모든 화면을 다 꺼내놓을 수 있을 것이다. 하지만 화면이 100개, 1000개, 더 넘어서는 5000개가 되는 서비스도 존재한다. 이 때는 어떻게 해야 하는가? 바로 서비스의 뼈대인 정보구조를 설계하면 된다. 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 말이다.

2) 어떻게 세우지?

뼈대를 세우기 위한 방법은 다양하지만 자주, 많이 쓰이는 방식을 몇 개 간추려 설명한다.

[계층 구조]

우리가 자주 보는 웹사이트 정보설계 방식이다. 1Depth-2Depth-3Depth ... 로 정보의 상하관계를 구성해 나열한다. 한 화면에서 다양한 기능을 담고 있어 단일한 구조보다는 복잡한 메뉴 구조를 표현할 때 사용된다. 이렇듯 전체적인 구조를 탐색하는데 좋은 방법이지만 Depth가 깊어질수록 사용자는 불편함을 느낄 수 있으니 4-5 Depth 이상을 만들지 않도록 주의해야 한다.

인스타그램의 IA 설계 | by James Wang

[허브 앤 스포크]

콘텐츠가 모이는 중앙 페이지를 중심으로 다양한 카테고리가 퍼져나가는 방식이다. 하나의 콘텐츠(스포크)를 탐색하다 다른 콘텐츠로 넘어가기 위해선 다시 중앙 페이지인 허브를 거쳐가야 한다는 단점이 있지만 각 콘텐츠에 집중해서 탐색할 수 있다는 장점이 있다.

Hub&Spoke | by Dennis Kardys

[계열 구조=선형 구조]

카테고리 화면에서 목록 화면으로, 목록 화면에서 항목으로, 한 페이지씩 한 방향으로 정보가 제공되는 방식이다. 유저에게 순서대로 가이드를 제공함으로써 기획자들이 만들어 둔 마지막 Goal에 잘 도달할 수 있도록 도와준다. 하지만 한 방향으로 진행되는 단순한 정보구조이기 때문에 너무 다양한 내용을 담지 않도록 주의해야 한다.

Mobile Information Architecture: 4 different models | KELAKE

[레이블링 = 하단 탭 구조]

앱에서 많이 사용되는 하단 탭 구조로 각 탭 별 제공하고자 하는 서비스들을 레이블링 해 사용자에게 전체적인 서비스 구성을 빠르게 알려줄 수 있는 방식이다. 각 탭 별 서비스가 묶여있기 때문에 쉽게 서비스를 탐색하고 빠르게 이동할 수 있어 간단한 구조도를 가진 서비스에 맞는 방식이다.

Tabbed view Pattern | By Dennis Kardys

2. 와이어프레임을 그려보자.

드디어 화면에 녹일 차례이다.

1) 레이아웃 잡기

아무리 좋은 기획이라 할지라도 무턱대고 화면을 그릴 순 없다. 메인엔 어떤 서비스가 얼마만큼의 볼륨으로 들어갈지 대략적인 틀을 그려본다. 이때 앞서 잡아둔 Flow를 참고해 레이아웃을 잡는다면 실제 디자인 단계에서 흐름이 잡혀 작업이 수월해진다.

좌 : 핫님이 직접 그린 샘플 | 우 : Mockplus Blog

2) 화면 구체화 하기

다 함께 회의한 하나의 기획서라 할지라도 다양한 디자인이 나올 수 있다. 다른 사람의 의견을 수용할 수 있는 넓은 마음으로 화면을 구체화한다. 다양한 벤치 사이트, 화면들을 보면서 우리가 제공하고자 하는 서비스를 잘 표현해주는 것이 중요하다.

이때 디자인 툴인 Figma 나 Adobe XD, Sketch 툴을 사용하면 작업이 훨씬 효율적으로 진행된다.

Fimga 화면 캡처

3. 화면 설계서 작성하기

디스크립션을 작성한다고도 하는데, 구체화된 화면을 자세히 설명해주는 것을 말한다.

예를 들면 이 버튼을 누르면 어느 페이지로 이동하는지, 어떤 알림이 뜨고 어떤 효과가 나오는지 등을 이미지, 텍스트, 다양한 효과를 활용해 문서를 작성한다. 화면의 구성 요소들을 잘게 떼어 설명해줌으로써 디자인-퍼블리싱-개발까지 협업할 수 있는 산출물이 완성되고 이렇게 사용자가 볼 수 있는 화면 구현으로 이어진다.