와이어프레임의 80%는 List, Detail, Form으로 정리된다.

UI·UX 기획을 할 때는

 

목표로하는 서비스의 핵심 기능 및 플로우를 사전에 확인할 수 있는 방안으로 와이어프레임(wireframe)을 그리게 됩니다.

 

그리고 정리된 와이어프레임을 기준으로 상세 설계 산출물을 작성하고, 디자인팀 및 개발팀과 소통하는 것이 일반적입니다.

 

 

 

그렇기 때문에

 

 

 

와이어프레임은

 

빠르고(팀 전체의 이해도를 빠르게 높이기 위함),

 

정확하게(기능이나 플로우의 뼈대가 튼튼하게 하기 위함)

 

설계하는 것이 중요합니다. 

 

 

 

이렇게 설계된 와이어프레임은

 

서비스의 핵심 기능 및 플로우를 사전에 확인할 수 있는 좋은 수단이 되는데,

 

 

 

불과 10년 전만 하더라도

 

파워포인트(PPT)로 와이어프레임을 그렸는데, 

 

그러다보니 빠르고 정확하게 설계하는 것이 쉽지 않았습니다.

 

파워포인트로 만든 와이어프레임

 

 

 

(사실 아직도 예전 피피티 양식의 산출물을 고집하는 경우도 많습니다)

 

 

 

최근에는

 

figma나 framer 같은 도구들이 대중화되었을뿐만 아니라

 

다양한 디자인 시스템을 쉽게 활용할 수 있습니다.

 

 

 

예를 들어 구글의 material 디자인 시스템은 

 

웹/앱 서비스에서 일반적으로 활용되는 UI 요소를 쉽게 활용할 수 있도록

 

가이드와 함께 figma 리소스로 제공하고 있으며, 

 

이를 활용하면 보다 빠르고 정확하게 와이어프레임을 설계할 수 있습니다. 

 

 

figma로 만든 와이어프레임

 

 

 

그러나

 

실제 와이어프레임을 신속하고 정확하게 설계하기 위해서는

 

한 가지 명심해야 할 사실이 있습니다.

 

 

 

바로

 

 

 

주요 와이어프레임의 대부분은 List, Detail, Form으로 이루어진다는 것입니다.

 

 

즉, 와이어프레임으로 작성되는 

 

대부분의 페이지는

 

 

 

1) 목록을 보여주거나
 
2) 상세 페이지를 보여주거나
 
3) 상세 정보를 생성/수정하는

 

 

 

페이지라는 것입니다.
 
 

쉽게 블로그를 예로 들면
 
1) 블로그 글 목록을 보여주는 페이지 
 
2) 블로그 글 상세 페이지
 
3) 블로그 글 작성 페이지

 

로 와이어프레임이 작성된다는 것입니다.

 

 

 

다른 유명한 서비스를 살펴보아도

 

인스타그램, 카카오톡, 당근, 배달의민족처럼 유명한 서비스들 역시

 

기본적으로는 List, Detail, Form의 구조룰 따르고 있습니다.
 

 

인스타그램에서는 피드가 목록이 될테고,

 

게시글을 클릭하면 상세,

 

그리고 피드 올리기를 클릭하면 생성 페이지를 볼 수 있습니다.
 

 

카카오톡 역시 친구 목록이 말그대로 목록이 될테고,

 

친구를 클릭하면 상세를 확인할 수 있으며,

 

해당 정보는 각자 본인의 프로필 생성/수정됩니다.
 

 

당근 역시 중고거래 목록이 있고,

 

클릭 시 해당 중고거래 상세를 확인할 수 있으며,

 

게시글 작성 시 생성 페이지를 확인할 수 있습니다.
 

 

마지막으로

 

배달의민족도 마찬가지로 식당 목록이 있고,

 

클릭 시 해당 식당 상세를 확인할 수 있으며,

 

각각의 식당이 자신의 상세 정보를 생성(사장님 앱)할 수 있습니다.
 
더 나아가 식당 상세에서는 메뉴 목록을 확인할 수 있고,

 

또 이 메뉴를 클릭하면 메뉴 상세를 볼 수 있으며,

 

이 메뉴들 역시 각각의 식당에서 생성할 수 있습니다.
 

 

이처럼 서비스는 기본적으로 List, Detail, Form 구조로 이루어져 있습니다.

 

 

 

이는 데이터의 CRUD 원칙과도 연결되며,

IT 서비스와 CRUD 원칙

 

 

 

노코드 플랫폼인 앱시트(Appsheet)도

스프레드시트로 앱 만들어보기

기본적으로는 List, Detail, Form을 기준으로

 

프로토타입을 구성하는 것을 확인할 수 있습니다.

 

 

 

정리하면,

 

 

 

모든 서비스는

 

상세로 진입할 수 있는 목록을 갖고 있고,

 

상세에서 제공되는 데이터들(Read)은 어디선가 생성(Create)되어야 하며,

 

사용자 및 권한에 따라 수정/삭제(Update & Delete)가 가능합니다.

 

 

 

이러한 구조를 정확하게 이해한다면

 

보다 빠르고, 정확하게 와이어프레임을 설계할 수 있을 것입니다.