프로덕트 디자이너로 기획 초기 단계에서 종종 텅 빈 피그마 화면을 마주하며 압박감과 부담을 느낀적이 있으신가요? 스타트업에서 프로덕트 디자이는 초기 기획부터 비주얼 요소 제작 전반까지 담당을 하여 진행하기 때문에 기획 단계에서부터 머리에 비주얼이 자동으로 상상되기도 합니다. 이번 글에서는 본질에 집중하여 기획하고, 초기 단계에서 와이어프레임의 중요성과 의사결정 속도를 높이는 방법에 대해 알아보겠습니다.
초기 단계
와이어프레임의 역할
꽤 오랫동안 디자인을 하면서 몇 가지 명확하게 말할 수 있는 것들이 있습니다. 요즘은 피그마가 보편적으로 사용되기도 하고 피그마 커뮤니티에서 제공하는 디자인 소스도 많기 때문에 서비스기획을 하시는분들도 소스를 활용하면 생각보다 꽤 그럴듯해보이는 앱 화면을 뚝딱 제작할 수도 있습니다. 그래서 간혹 원하는 디자인 느낌을 이끌어내기 위해 기획자분들이 대략적인 디자인을 잡아서 기획서를 전달하는 경우를 많이 보았습니다. 이러한 과정들은 디자이너의 아웃풋을 향상시켰을까요?
대부분의 주니어 디자이너들은 이런 기획서를 받으면 생각이 닫혀버립니다. 어느새 기획서에 색칠하는 디자이너가 되어 있습니다. 우리는 와이어프레임이 왜 존재하는지에 대해서부터 생각해 보아야 합니다.
와이어프레임은 디자인의 본질에 집중할 수 있도록 도와주는 중요한 수단입니다. 비주얼 요소를 배제하고 기능과 사용자 흐름에 집중할 수 있게 합니다. 비주얼에 사용되는 몇 가지 시각적인 요소(형태, 색상 등)는 매우 강한 자극을 줍니다. 뇌에서 텍스트보다 시각요소를 먼저 받아들이게 되어 있으므로 와이어프레임에 시각 요소가 등장하는 순간 기획의 핵심 목표와 본질을 놓치기 쉽습니다. 결국 본질보다 시각적인 요소 중심으로 논의하거나 피드백이 돌아올 수 있습니다. 이는 비주얼 요소를 고민하는 시간만큼 의사결정이 지연됩니다.
와이어프레임은 기능에 집중하고 빠르게 그려내어 초기 의사결정을 신속하게 내리도록 도와주는 도구입니다. 그러니 와이어프레임을 스킵하고 바로 시각 요소를 설계하고 있다면 프로세스를 바꿔보세요. 디자인 도구를 사용하기 전, 종이나 화이트보드에 간단한 스케치로 시작하는것은 텅 빈 화면을 마주했을때 느끼는 압박감을 해소해주기도 합니다.
레퍼런스 활용의 위험
작업을 시작할때 초기 단계에서 레퍼런스부터 서치하는 디자이너가 많습니다. 단기적으로 레퍼런스를 모방하여 빠르고 퀄리티 있는 디자인 아웃풋을 산출할수는 있지만 장기적인 관점에서 기획 초기 단계에 레퍼런스 서치를 진행하는 것은 좋지 않습니다.
다른 디자인을 먼저 접하게 되면 독창적인 해결책을 찾기 어렵습니다. 또한 다른 프로젝트의 비주얼 요소를 참고하면 일관성 있는 디자인을 유지하기 어렵습니다. 레퍼런스를 서치하는 시점은 초기 와이어프레임이 나온 후 진행하는 것이 좋습니다.
본질에 집중하는 기획 방법
비주얼 요소에 방해받지 않고 본질에 집중하여 기획을 진행하고자 한다면 초기에 아래 단계를 먼저 구축하세요.
- 사용자 흐름 우선: 사용자 흐름과 주요 기능에 집중하여 와이어프레임을 제작합니다.
- 피드백 루프 구축: 초기 와이어프레임 단계에서부터 팀원들과 정기적으로 피드백을 주고 받습니다.
- 점진적 디테일 추가: 와이어프레임이 확정된 후에 점진적으로 비주얼 요소를 추가합니다.
더 나은 초기 기획을 위한 대안과 방법
이제 초기 단게에서 명확한 정보값 정의와 시각 요소에 방해받지 않는 기획을 하기 위해 구체적으로 어떻게 접근해야 하는지 알아보겠습니다.
명확한 정보값 정의
초기 기획의 목적은 각 정보값을 명확하게 정의하고, 이를 바탕으로 사용자 경험을 설계하는 것입니다.
- 사용자 시나리오 작성: 사용자 유형별로 시나리오를 작성해 각각의 정보값이 언제, 어디서, 어떻게 사용되는지 정의합니다.
- 정보 아키텍처 설계: 전체적인 정보 구조를 시각화해 각 정보값의 위치와 관계를 명확히 합니다.
- 저해상도 와이어프레임 사용: 디테일한 디자인을 배제하고, 기능과 흐름에만 집중할 수 있는 저해상도 와이어프레임을 사용합니다.
- 콘텐츠 우선 접근법: 시각적 디자인보다 콘텐츠와 정보 전달에 중점을 둡니다.
도구와 기술 활용
기획 단계에서 유용하게 사용할 수 있는 도구와 기술을 소개합니다.
- 디자인 스프린트: 짧은 시간 내에 아이디어를 구체화하고, 프로토타입을 통해 피드백을 받는 디자인 스프린트 방법을 사용합니다.
- 디지털 화이트보드: Miro, MURAL, Figjam 등의 디지털 화이트보드를 활용해 팀원들과 실시간으로 협업합니다.
콘텐츠 우선 접근법
Google Docs 또는 Notion등의 툴로 텍스트 중심의 기획 문서 작성하고, Miro와 같은 콘텐츠와 사용자 흐름을 시각화할 수 있는 디지털 화이트보드 툴을 사용합니다.
구체적 실행 방법
- Google Docs 또는 Notion
- 프로젝트의 목표, 사용자 시나리오, 주요 기능 등을 문서로 정리합니다.
- 각 페이지에서 제공해야 하는 정보와 콘텐츠를 텍스트로 상세히 작성합니다.
- 문서를 팀원들과 공유하여 의견을 수렴하고, 필요한 부분을 수정합니다.
- Miro
- Miro 보드를 열고, 사용자 흐름과 정보 구조를 시각화합니다.
- 각 화면에서 필요한 콘텐츠와 기능을 박스로 구분하여 표시합니다.
- 팀원들과 실시간으로 협업하며, 보드 위에 댓글을 달아 피드백을 주고받습니다.
1. 프로젝트 브리프 작성
- 제목: [프로젝트 이름] 브리프
- 목표: 프로젝트의 주요 목표를 간결하게 설명합니다.
- 타겟 사용자: 대상 사용자 그룹을 정의합니다.
- 주요 기능: 제공할 주요 기능을 나열합니다.
이해를 돕기 위해 지금부터 ‘새로운 To-Do 리스트 앱’을 기획한다고 가정하겠습니다.
- 이름: 새로운 To-Do 리스트 앱
- 목표: 사용자가 쉽게 할 일을 관리하고, 효율적으로 시간 관리를 할 수 있도록 돕는 To-Do 리스트 앱을 개발합니다.
- 타겟 사용자: 학생, 직장인, 프리랜서
- 주요기능: 할 일 추가 및 편집, 카테고리별 정리, 알림 설정, 달력 연동
2. 사용자 시나리오 작성
시나리오 1: 할 일 추가
- 사용자는 앱을 열고 ‘할 일 추가’ 버튼을 클릭합니다.
- 사용자는 할 일의 제목과 세부 정보를 입력합니다.
- 사용자는 카테고리를 선택하고, 필요 시 알림 시간을 설정합니다.
- 사용자는 ‘저장’ 버튼을 클릭하여 할 일을 추가합니다.
시나리오 2: 할 일 완료
- 사용자는 목록에서 완료한 할 일을 체크합니다.
- 할 일이 완료 목록으로 이동됩니다.
3. 정보 아키텍쳐 설계
홈 화면
- 오늘의 할 일 리스트
- 할 일 추가 버튼
- 카테고리 필터
할 일 추가/편집 화면
- 제목 입력 필드
- 세부 정보 입력 필드
- 카테고리 선택 드롭다운
- 알임 시간 설정
- 저장 버튼
설정 화면
- 알림 설정
- 계정 정보 관리
- 앱 정보
이러한 방법을 통해 Google Docs나 Notion을 사용해 텍스트 중심의 기획을 진행할 수 있습니다. 이를 통해 비주얼 요소에 방해받지 않고, 기획의 본질에 집중하며 명확한 정보값을 정의할 수 있습니다. 이 접근법은 초기 기획 단계에서 더 나은 의사결정을 이끌어내는 데 도움이 될 것입니다.
기능 중심의 프로토타이핑
이 작업을 수행하기 위해 Figma와 InVision 툴을 추천합니다.
Figma
- 새로운 Figma 파일을 생성하고, 기본 와이어프레임 템플릿을 사용하여 주요 페이지를 설계합니다.
- 페이지 간의 연결을 설정하여 클릭 가능한 프로토타입을 만듭니다.
- 링크를 통해 팀원들과 공유하고, 사용성 테스트를 통해 피드백을 받습니다.
InVision
- InVision 프로젝트를 생성하고, 와이어프레임 이미지를 업로드합니다.
- 각 이미지에 핫스팟을 추가하여 페이지 간의 이동 경로를 설정합니다.
- 공유 링크를 통해 팀원들에게 프로토타입을 제공하고, 피드백을 수집합니다.
결론
이와 같은 방법들을 통해 초기 기획 단계에서 시각적 요소에 방해받지 않고 기능과 사용자 흐름에 집중할 수 있습니다. 저해상도 와이어프레임, 콘텐츠 우선 접근법, 그리고 기능 중심의 프로토타이핑 도구를 활용하면 기획의 본질에 집중하며 명확한 방향을 설정할 수 있습니다. 이 과정을 통해 디자이너들은 더욱 효과적으로 의사결정을 내리고, 프로젝트의 성공 가능성을 높일 수 있습니다.