brunch

매거진 UX 디자인 이야기

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Jun 18. 2024

와이어프레임의 미학

UX 디자인 이야기 #11

위 강연은 2024년 온라인 Zoom UX 수업 중 일부 내용입니다.

Q1. "낮은 수준의 와이어프레임에서
디자이너가 중점을 두어야 할 부분은 무엇인가요?"

Q2. "높은 수준의 와이어프레임에는 어떤 세부 사항이 포함되어야 하나요?"

Q3. "프로덕트 매니저가 와이어프레임을 어떻게 활용해야 하나요?"

사진: Unsplash의Kelly Sikkema

요약문
(와이어프레임의 미학: 프로덕트 매니저가 알아야 할 핵심 원칙)

UX 디자인에서 와이어프레임의 중요성은 널리 인정되고 있지만, 그 본질과 활용 방법에 대해서는 많은 이들이 간과하고 있습니다.

낮은 수준의 와이어프레임은 주요 기능, 액션, 화면 요소의 우선순위와 정보 아키텍처에 초점을 맞추며, 핵심 CTA(Call-to-Action) 버튼 강조가 핵심입니다.

반면, 높은 수준의 와이어프레임은 세부 기능, 화면 요소, 인터랙션 등 세부 사항이 포함되어 실제 구현을 위한 청사진 역할을 합니다.

프로덕트 매니저는 상황에 맞는 적절한 와이어프레임 수준을 선택하고 활용할 수 있어야 합니다.

사진: Unsplash

상세 내용
(와이어프레임의 미학: 프로덕트 매니저가 알아야 할 핵심 원칙)

"오늘 여러분께 '와이어프레임의 미학: 프로덕트 매니저가 알아야 할 핵심 원칙'이라는 주제로 말씀드리겠습니다.

UX 디자인 분야에서 와이어프레임은 매우 중요한 역할을 하지만, 그 본질적인 가치와 활용 방법에 대해서는 많은 이들이 간과하고 있습니다. 이번 시간을 통해 와이어프레임의 본질과 그 활용 방법에 대해 자세히 살펴보겠습니다. 특히 '낮은 수준의 와이어프레임'과 '높은 수준의 와이어프레임'의 차이점과 각각의 활용 방안에 대해 깊이 있게 다루어 보고자 합니다.

먼저 낮은 수준의 와이어프레임에 대해 말씀드리겠습니다. 낮은 수준의 와이어프레임에서 디자이너는 주요 기능, 주요 액션, 화면 요소의 우선순위와 정보 아키텍처에 중점을 두어야 합니다. 즉, 낮은 수준의 와이어프레임은 시각적인 면보다는 화면의 핵심 기능과 사용자 흐름의 주요 접점에 초점을 맞춥니다.

사진: Unsplash의rivage

특히 CTA(Call-to-Action) 버튼은 과업 흐름과 밀접하므로 반드시 강조되어야 합니다. 이는 사용자의 핵심 행동을 이끌어내는 가장 중요한 UI 요소이기 때문입니다. 낮은 수준의 와이어프레임에서 CTA 버튼은 단연 주연이라고 할 수 있겠죠.

반면, 낮은 수준의 와이어프레임에서는 텍스트와 같은 UI 요소에 대한 자세한 주석은 필요하지 않습니다. 이는 낮은 수준의 와이어프레임이 프로덕트 디자이너의 아이디어를 UX팀원이나 이해관계자에게 전달하는 데 주로 사용되기 때문입니다.

그렇다면 높은 수준의 와이어프레임은 어떻게 다를까요? 높은 수준의 와이어프레임에서는 상세 기능, 화면 요소, 상세한 주석이 포함되어야 합니다. 즉, 와이어프레임 하나하나에 UI 기능, 인터랙션, 정렬, 간격, 크기 조정 등의 세부 사항이 표시되어야 합니다.

이는 낮은 수준의 와이어프레임과는 달리, 높은 수준의 와이어프레임은 실제 구현을 위한 청사진 역할을 하기 때문입니다. 개발자나 다른 이해관계자들이 와이어프레임을 보고 실제 UI를 구현할 수 있도록, 모든 세부 사항이 명시되어야 하는 것이죠.

이처럼 낮은 수준의 와이어프레임과 높은 수준의 와이어프레임은 서로 다른 목적과 활용 방안을 가지고 있습니다.

프로덕트 매니저는 이 두 가지 수준의 와이어프레임을 적절히 활용할 수 있어야 합니다. 상황에 맞는 와이어프레임 수준을 선택하고, 그에 맞는 내용과 표현 방식을 구사할 수 있어야 합니다. 이를 통해 우리는 더 효과적이고 효율적인 프로덕트 디자인 프로세스를 이끌어 낼 수 있을 것입니다."