안녕하세요, 꾸우._. 입니다. 이번에는 프로덕트 설계 시 뼈대가 되는 와이어프레임과 출시 전 제품 시뮬레이션을 위해 만들어지는 프로토타입에 대해 알아보고 정리해보겠습니다.
📌 와이어프레임 (Wireframe)
와이어프레임은 제품을 구성하는 서로 다른 레이아웃을 Lo-fi (Low-Fidelity) 단계로 구현한 것을 의미합니다. 즉, 간단한 모양만을 사용해 인터페이스를 시각적으로 표현한 것을 말한다고 볼 수 있습니다.
그러나 와이어프레임은 실제 완성된 제품과는 전혀 다른 모습입니다. 즉, 디자인적 요소가 포함되기 전 상태이며, 화면 내 인터페이스에서 생략된 부분은 자리 표시자 (X로 표시된 원, 사각형 등)로 나타낸 것입니다. 구조 (페이지 구성 요소 방식), 기능 (인터페이스 동작 방식), 콘텐츠 (페이지에 표시할 내용)를 표시하기 위한 목적으로 사용된다고 볼 수 있겠습니다.
와이어프레임은 디자이너가 작업을 시작하고, 팀의 작업 방향성을 설정해주는 역할입니다. 또한 디자이너, 또는 팀이 다음 단계의 작업을 진행할 때 누락된 작업으로 인해 이전 단계로 되돌아가는 위험성을 줄일 수 있게 합니다.
💡와이어프레임 제작 시기
와이어프레임은 디자인 팀에서 세부적인 시각 작업을 시작하기 전, 디자인 프로세스의 초기 단계에서 실행해야 합니다. 문제가 발견됐을 때 해당 단계에서 디자인의 틀을 변경하거나 개선방안을 찾아 적용하는 것이 더 효율적입니다.
💡와이어프레임의 이점
- 팀 내 디자이너와 이해관계자 등에게 디자인 의사 결정을 명확히 전달할 수 있도록 하는 수단
- 수정사항 발생 시 개발 코드나 툴 없이 필요한 수정을 빠르게 진행 가능
- 디자인에 가려지는 기능, 정보 구조, 사용자 흐름, 기능의 유용성 등에 대해 중점을 둘 수 있음
💡와이어프레임 제작 방법
- 종이와 펜으로 제작
- 디자인 소프트웨어 활용 : UX 디자인 소프트웨어, 그래픽 디자인 소프트웨어
📌 프로토타입 (Prototype)
프로토타입은 최종 제품을 Mid-fi (Middle-Fidelity)에서 Hi-fi (High-Fidelity) 사이의 품질로 재현한 것으로, UI의 상호작용을 시뮬레이션하는 것입니다. 즉, 제품 출시 전 테스트를 위해 사용하는 최종 제품의 시뮬레이션 또는 샘플 버전이라고 볼 수 있습니다.
프로토타입은 와이어프레임과 비슷해보이지만 페이퍼 프로토타입부터 실제 소프트웨어 제품에 이르기까지 모양과 크기가 다양합니다. 또한 프로토타입의 Fidelity 도 다양하며, 프로토타이핑은 Lo-fi 프로토타입 제작과 Hi-fi 프로토타입 제작 두 가지 유형이 존재합니다.
Lo-fi (Low-Fidelity) 프로토타입
- 디자이너가 디자인 프로세스 초반에 검토할 수 있게 컨셉을 대략적으로 재현한 것
- ex. 스케치 또는 와이어프레임에서 클릭이 가능하도록 만든 프로토타입
Hi-fi (High-Fidelity) 프로토타입
- 실제 웹 사이트 또는 앱의 기능과 디자인 세부 사항을 시뮬레이션 하는 것
- 사용자는 앱 또는 웹 페이지에 반응하고 사용자 경험을 느낄 수 있음
프로토타입은 사용자와 제품 사이의 인터랙션을 시뮬레이션 한다는 것에 목적을 두고 있습니다. 모든 인터랙션이 프로토타입에 적용되어 있는 것은 아니지만 최종 제품의 작동 방식을 이해시킬 수 있는 중요한 인터랙션은 포함되어야 합니다. 또한 프로토타입은 실제 사용자를 대상으로 테스트하는 것이 좋습니다. 앱 또는 웹 페이지의 흐름 및 인터랙션 작동 방식을 경험하고 제품 디자인에 대한 사용성과 가능성을 테스트하는 데 사용하는 것이기 때문입니다.
팀 내에서 프로토타입을 제작하는 시기는 프로젝트의 요구사항에 따라 달라집니다. 일반적으로는 개발 시작 전 시각 디자인과 인터랙션 디자인을 함께 연결해야 하는 경우에 필요로 하게 됩니다.
💡프로토타입의 이점
- 아이디어를 설득에 효과적임 (아이디어 검증 수단)
- 프로토타입을 시뮬레이션 해볼 경우, 이해관계자가 제품을 사용해보고 사용자 경험을 쉽게 파악할 수 있기 때문에 이해 관계자의 지지를 쉽게 얻을 수 있습니다.
- 와이어프레임은 구조를 다루는 반면, 프로토타입은 사용성을 다룹니다. 프로토타입을 통해 사용자 경험을 테스트하고 전체적인 인터랙션 흐름에서 잠재적인 문제점을 찾을 수 있습니다.
- 초반의 사용자 참여 가능
- 디자인 또는 코딩 스킬이 필요 없음
- 적은 자원 소모
- 빠른 평가와 테스팅
💡프로토타이핑 단계
- Lo-Fi Prototype (Low-Fidelity Prototype)
- 실제 출시될 서비스와 거리가 먼 초기 단계의 프로토타입
- 시간 및 리소스가 절약되고, 복잡한 수정 절차가 없으므로 새로운 의견을 바로 적용 가능
- 아이디어 회의와 같은 기획 단계에서 자주 작성함
그러나 팀 간 소통을 위한 정식 업무 산출물은 아닌 임시 방편 정도로 보면 됨
- Mid-Fi Prototype (Middle-Fidelity Prototype)
- 주로, 피그마, PPT와 같은 디자인 툴을 이용해서 만듦
- Lo-Fi 프로토타입에서 발전해, 레이아웃을 맞추고 기능 배치와 영역, 글자 포인트, 이미지 위치 등을 실제 산출물에 조금 더 가깝게 조정하는 것
- 서비스 기획자의 경우, 여기서 디스크립션이라는 설명을 추가해 스토리보드, 화면 설계서라는 최종 산출물을 만들기도 함
- Hi-Fi Prototype (High-Fidelity Prototype)
- Hi-Fi Prototype은 디자인과 인터랙션을 가미해, 실제 개발될 완성본에 가깝게 만드는 산출물
- 높은 그래픽 수준을 요구하기 때문에 PM이 직접 만드는 경우는 드묾
📌 정리
이번에는 와이어프레임, 프로토타입에 대해 알고 각각의 특징과 이점에 대해 알아보았습니다. 와이어프레임과 프로토타입에 대해 시각적인 이미지로는 차이가 느껴지지만, 추가 아티클을 찾아보고자 서치하면 이미지 자료가 유사한 것들이 많아 헷갈릴 것 같기도 합니다. 해당 부분에 대해서는 경험해 본 프로젝트들에 대해 재설계 작업을 하면서 다시금 개념을 다져야겠다는 생각이 들었습니다.
적극적인 피드백은 언제나 환영입니다:)