와이어프레임과 프로토타입에 대한 모든 것

by Adobe Korea

Posted on 03-06-2018

와이어프레임과 프로토타입은 UX 디자인과 연결된 두 가지 대표적인 디자인 산출물입니다. 디지털 디자인 업계 종사자의 상당수는 ‘와이어프레임’과 ‘프로토타입’을 상호 교환적인 용어라고 알고 있지만 이 두 개념은 상당히 큰 차이가 있습니다. 모양도 다르고 의미와 용도도 다릅니다.

이 글에서는 와이어프레임과 프로토타입의 기능, 유용한 이유, UX 디자인 프로세스에서 사용 방식 등에 대한 기본적인 사항을 살펴봅니다.

와이어프레임

와이어프레임이란?

와이어프레임(’골격’이라고도 함)은 제품을 구성하는 서로 다른 레이아웃을 정적인 로우 피델리티 상태로 재현한 것으로, 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것입니다(와이어프레임은 이름에서 알 수 있듯이 와이어로 설계된 모양입니다). 와이어프레임은 구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시될 내용) 및 기능(인터페이스의 작동 방식)을 설명하는 데 사용됩니다.

핵심은 와이어프레임이 미래에 대한 스토리라는 점입니다. 와이어프레임을 통해 디자인 팀은 디자인의 현재 진행 상태, 향후 비전, 작업 경로 등을 서로 공유할 수 있습니다. 와이어프레임은 용도 측면에서 건축 청사진(건축할 건물에 대한 상세한 계획)과 유사합니다. 건축 설계 청사진을 보면 각 방마다 특정한 공간이 할당되어 있는 것은 알 수 있지만 완성된 집은 확인할 수 없습니다.

와이어프레임의 모양

와이어프레임은 실제 완성된 제품과는 전혀 다른 모습이고, 와이어프레임으로 알 수 있는 시각적 특징은 매우 제한적입니다. 대부분의 디자인 요소(예: 이미지, 비디오, 텍스트 등)가 포함되기 전 상태입니다. 대체로, 인터페이스에서 생략된 부분은 자리 표시자로 표시됩니다(이미지와 같이 실제 디자인 요소와 연결된 개체는 X표된 상자나 필러 텍스트로 표시됩니다). 선, 자리 표시자 및 회색 음영 팔레트는 정보 아키텍처, 콘텐츠 및 레이아웃의 고려 사항을 말해줍니다. 프로젝트의 요구에 따라 다르지만, 일부 자리 표시자는 디자이너와 개발자가 모든 구성 요소가 어떻게 구성되어 있는지 보다 효과적으로 확인할 수 있도록 실제의 그래픽 요소나 텍스트로 발전하기도 합니다.

와이어프레임을 제작하는 주요 목적

와이어프레임은 디자이너가 작업을 시작하고 크리에이티브 팀의 작업 방향을 설정하는 기초 역할을 합니다. 와이어프레임은 크리에이티브 팀이 다음 작업 단계로 넘어가기 전에 꼼꼼하게 계획할 기회를 제공하므로 누락된 작업을 위해 다시 뒤로 돌아가야 하는 위험성을 줄여줍니다.

또한 디자이너는 시각 디자인의 세부 묘사에 너무 치우치지 않고 전체적인 디자인 전략을 테스트할 수 있습니다. 몇 개만의 시각적 요소를 사용하면 세부 사항에 대한 작업을 진행하기 전에 핵심적인 디자인 의사 결정에 집중할 수 있습니다.

와이어프레임을 제작해야 하는 시기

와이어프레임 구축은 디자인 팀이 세부적인 시각 작업을 시작하기 전 디자인 프로세스의 초기 단계에서 수행해야 하며, 문제가 발견될 경우, 이 단계에서 디자인의 큰 틀을 변경하는 것이 훨씬 더 효율적입니다. 와이어프레임은 상대적으로 구축이 빠르고 비용도 저렴하므로 디자이너는 콘텐츠와 개체의 위치를 바꿔가며 실험하고, 항목을 그룹으로 묶고, 요소를 추가 또는 제거할 수 있습니다.

와이어프레임 제작의 이점

와이어프레임 제작의 한계

와이어프레임은 사용자 테스트용으로는 적합하지 않습니다. 와이어프레임이 초기 조사 단계에서 피드백을 수집(일부 빠른 인사이트의 형태로)하는 데에는 유용할 수 있지만 정적인 상태로 되어 있기 때문에 전반적인 사용자 경험을 평가하기가 매우 어렵습니다.

또한 와이어프레임은 애니메이션이 적용된 효과, 복잡한 전환 또는 제스처와 같은 복합적인 디자인 아이디어를 설명해야 하는 경우 유용하지 않습니다. 한 쌍의 와이어프레임은 상호 작용이 시작되고 끝나는 지점을 보여줄 수는 있지만 그 사이에 일어나는 일에 대해서는 설명하지 못합니다. 모든 다이내믹한 효과를 설명해야 하는 경우라면 비헤이비어를 명확하게 보여줌으로써 보는 사람의 추측을 배제할 수 있는 하이 피델리티 수준의 인터랙티브한 프로토타입을 사용하는 것이 더 효과적입니다.

와이어프레임 제작 방법

아이디어를 빠르게 시각화할 수 있는 스케치(예: 새 인터페이스 디자인). 이미지 출처: 니콜라스 스완슨(Nicholas Swanson)

프로토타입

프로토타입이란?

프로토타입을 제작하는 것은 인터랙티브한 경험을 구축함으로써 아이디어를 타진하는 프로세스입니다. 프로토타입은 최종 제품을 미들 피델리티에서 하이 피델리티 사이의 품질로 재현한 것으로, 유저 인터페이스의 상호 작용을 시뮬레이션합니다. 프로토타이핑은 디자이너가 자신의 창작물과 실제로 상호 작용할 수 있는 첫 번째 단계입니다.

프로토타입의 모양

와이어프레임과 유사해 보이지만, 이와 달리 프로토타입은 상당히 다른 면이 있습니다. 프로토타입은 아날로그 종이 프로토타입부터 실제 소프트웨어 제품에 이르기까지 모양과 크기가 다양합니다.

프로토타입의 피델리티 레벨도 다양합니다. 프로토타이핑은 로우 피델리티 프로토타입 제작과 하이 피델리티 프로토타입 제작의 두 가지 유형이 있습니다. 프로토타입의 피델리티는 프로토타입에 포함된 세부 묘사 및 기능 레벨을 나타냅니다.

프로토타입을 제작하는 주요 목적

프로토타입은 사람들이 사용하게 될 모든 제품에 있어 매우 중요합니다. 일반적으로 프로토타입은 실제 제품을 연결하는 가교 역할을 합니다. 프로토타입의 목적은 사용자와 인터페이스 사이의 인터랙션을 시뮬레이션하는 데 있습니다. 프로토타입에는 모든 인터랙션이 구현되어 있지는 않지만, 최종 제품의 작동 방식을 명확하게 이해시키는 중요한 인터랙션이 포함되어 있어야 합니다. 프로토타입은 앱 또는 웹 사이트의 흐름 방식, 인터랙션 작동 방식을 경험하고 제품 디자인의 사용성과 가능성을 테스트하는 데 이용하는 것이므로 실제 사용자를 대상으로 테스트하는 것이 좋습니다. 프로토타이핑 및 테스트를 거치지 않고 실제 사용자와 제품 간의 상호 작용 방식을 예측하는 것은 어렵습니다.

프로토타입 제작 시기

크리에이티브 팀이 프로토타입을 실제로 필요하게 되는 시기는 프로젝트의 요구 사항에 따라 달라지게 됩니다. 일반적으로 실제 개발을 시작하기 전에 시각 디자인과 인터랙션 디자인을 함께 연결해야 하는 경우 프로토타입이 필요하게 됩니다.

프로토타입 제작의 이점

프로토타입 제작의 한계

프로토타입은 사용자가 제품의 작동 방식을 이해하기 위해 직접 노력을 기울여야 하기 때문에 문서화된 형태로 사용할 수 없습니다.

프로토타입 제작 방법

결론

와이어프레임과 프로토타입은 기능 면에서 서로 다르지만 모두 제품 팀이 보다 나은 제품을 제작할 수 있게 해주는 유용한 수단입니다. 성공적인 제품 디자인을 수행하는 핵심은 디자인 프로세스에 투자하고 와이어프레임 및 프로토타입 제작을 통합 워크플로우의 한 부분으로 활용하는 것입니다. 하지만 사용자를 염두에 두지 않은 채 제품의 와이어프레임 또는 프로토타입을 제작하지 마십시오. 디자인의 중심에는 항상 사용자가 있어야 합니다. 위의 조언은 사용자가 애용하게 될 제품을 보다 효과적으로 만드는 데 도움을 줄 것입니다.

원문보기

Topics: 디자인, 크리에이티브 클라우드

Products: XD