와이어프레임과 프로토타입에 대한 모든 것
와이어프레임과 프로토타입은 UX 디자인과 연결된 두 가지 대표적인 디자인 산출물입니다. 디지털 디자인 업계 종사자의 상당수는 ‘와이어프레임’과 ‘프로토타입’을 상호 교환적인 용어라고 알고 있지만 이 두 개념은 상당히 큰 차이가 있습니다. 모양도 다르고 의미와 용도도 다릅니다.
이 글에서는 와이어프레임과 프로토타입의 기능, 유용한 이유, UX 디자인 프로세스에서 사용 방식 등에 대한 기본적인 사항을 살펴봅니다.
와이어프레임
와이어프레임이란?
와이어프레임(’골격’이라고도 함)은 제품을 구성하는 서로 다른 레이아웃을 정적인 로우 피델리티 상태로 재현한 것으로, 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것입니다(와이어프레임은 이름에서 알 수 있듯이 와이어로 설계된 모양입니다). 와이어프레임은 구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시될 내용) 및 기능(인터페이스의 작동 방식)을 설명하는 데 사용됩니다.
핵심은 와이어프레임이 미래에 대한 스토리라는 점입니다. 와이어프레임을 통해 디자인 팀은 디자인의 현재 진행 상태, 향후 비전, 작업 경로 등을 서로 공유할 수 있습니다. 와이어프레임은 용도 측면에서 건축 청사진(건축할 건물에 대한 상세한 계획)과 유사합니다. 건축 설계 청사진을 보면 각 방마다 특정한 공간이 할당되어 있는 것은 알 수 있지만 완성된 집은 확인할 수 없습니다.
와이어프레임의 모양
와이어프레임은 실제 완성된 제품과는 전혀 다른 모습이고, 와이어프레임으로 알 수 있는 시각적 특징은 매우 제한적입니다. 대부분의 디자인 요소(예: 이미지, 비디오, 텍스트 등)가 포함되기 전 상태입니다. 대체로, 인터페이스에서 생략된 부분은 자리 표시자로 표시됩니다(이미지와 같이 실제 디자인 요소와 연결된 개체는 X표된 상자나 필러 텍스트로 표시됩니다). 선, 자리 표시자 및 회색 음영 팔레트는 정보 아키텍처, 콘텐츠 및 레이아웃의 고려 사항을 말해줍니다. 프로젝트의 요구에 따라 다르지만, 일부 자리 표시자는 디자이너와 개발자가 모든 구성 요소가 어떻게 구성되어 있는지 보다 효과적으로 확인할 수 있도록 실제의 그래픽 요소나 텍스트로 발전하기도 합니다.
와이어프레임을 제작하는 주요 목적
와이어프레임은 디자이너가 작업을 시작하고 크리에이티브 팀의 작업 방향을 설정하는 기초 역할을 합니다. 와이어프레임은 크리에이티브 팀이 다음 작업 단계로 넘어가기 전에 꼼꼼하게 계획할 기회를 제공하므로 누락된 작업을 위해 다시 뒤로 돌아가야 하는 위험성을 줄여줍니다.
또한 디자이너는 시각 디자인의 세부 묘사에 너무 치우치지 않고 전체적인 디자인 전략을 테스트할 수 있습니다. 몇 개만의 시각적 요소를 사용하면 세부 사항에 대한 작업을 진행하기 전에 핵심적인 디자인 의사 결정에 집중할 수 있습니다.
와이어프레임을 제작해야 하는 시기
와이어프레임 구축은 디자인 팀이 세부적인 시각 작업을 시작하기 전 디자인 프로세스의 초기 단계에서 수행해야 하며, 문제가 발견될 경우, 이 단계에서 디자인의 큰 틀을 변경하는 것이 훨씬 더 효율적입니다. 와이어프레임은 상대적으로 구축이 빠르고 비용도 저렴하므로 디자이너는 콘텐츠와 개체의 위치를 바꿔가며 실험하고, 항목을 그룹으로 묶고, 요소를 추가 또는 제거할 수 있습니다.
와이어프레임 제작의 이점
- 의사 소통의 수단입니다._ 하나의 그림이 천 마디의 말을 대신합니다. 와이어프레임은 이해 관계자와 팀원에 디자인 의사 결정을 명확히 전달하는 수단이며, 이를 통해 이해 관계자와 팀원들은 앱 또는 웹 사이트가 어떤 화면에 표시되는지 효과적으로 이해할 수 있을 것입니다. 자리 표시자로 채워진 웹 사이트 또는 모바일 앱의 와이어프레임을 통해서도 이해 관계자와 팀원이 디자인이 어떻게 구성될지 파악할 수 있습니다._
- 작업의 기록입니다._ 와이어프레임은 일반적으로 기능을 참조하기 위한 시점으로 사용됩니다. 디자인 산출물로서, 와이어프레임은 모든 팀원이 동일한 작업 페이지에 있도록 팀 전원과 공유할 수 있습니다._
와이어프레임 제작의 한계
와이어프레임은 사용자 테스트용으로는 적합하지 않습니다. 와이어프레임이 초기 조사 단계에서 피드백을 수집(일부 빠른 인사이트의 형태로)하는 데에는 유용할 수 있지만 정적인 상태로 되어 있기 때문에 전반적인 사용자 경험을 평가하기가 매우 어렵습니다.
또한 와이어프레임은 애니메이션이 적용된 효과, 복잡한 전환 또는 제스처와 같은 복합적인 디자인 아이디어를 설명해야 하는 경우 유용하지 않습니다. 한 쌍의 와이어프레임은 상호 작용이 시작되고 끝나는 지점을 보여줄 수는 있지만 그 사이에 일어나는 일에 대해서는 설명하지 못합니다. 모든 다이내믹한 효과를 설명해야 하는 경우라면 비헤이비어를 명확하게 보여줌으로써 보는 사람의 추측을 배제할 수 있는 하이 피델리티 수준의 인터랙티브한 프로토타입을 사용하는 것이 더 효과적입니다.
와이어프레임 제작 방법
- 펜과 종이를 사용한 스케치._ 와이어프레임은 손으로 쉽게 그릴 수 있습니다. 손으로 그리는 스케치는 빠르게 그릴 수 있고 반복 프로세스도 신속하게 수행할 수 있습니다. 스케치는 디자이너들이 내놓은 다양한 아이디어(예: 특정 뷰를 위한 다양한 레이아웃 연구)를 빠르게 시각화해야 하는 브레인스톰 세션에 특히 적합합니다. 아이디어를 종이 위에 빠르게 옮길 수 있게 되면 컴퓨터로 전환해 더 빠르게 작업할 수도 있습니다._
아이디어를 빠르게 시각화할 수 있는 스케치(예: 새 인터페이스 디자인). 이미지 출처: 니콜라스 스완슨(Nicholas Swanson)
- UX 디자인 소프트웨어 사용._ 특화된 소프트웨어 사용 시의 큰 장점은 다른 툴로 전환하지 않고도 와이어프레임 제작에서 프로토타입 제작으로 매끄럽게 전환할 수 있다는 것입니다. Adobe XD 같은 툴을 사용하면 디자이너는 와이어프레임을 로우 피델리티 프로토타입으로 신속하게 바꿀 수 있습니다._
팁
- 간결성._ 와이어프레임 제작의 핵심은 속도와 간결성입니다. 와이어프레임의 목적은 페이지 디자인의 기본 구조를 보여주는 데 있으므로 와이어프레임은 신속하게 제작되어야 합니다. 세부적인 디자인 작업은 나중에 합니다._
- 짧고 적절한 주석. 팀원은 다른 문서보다는 와이어프레임을 우선적으로 읽을 것이므로 팀에게 와이어프레임을 제공하려고 하는 경우 항상 주석을 포함시켜야 합니다. 주석은 구조적인 맥락을 생성하고 핵심 아이디어를 신속하게 전달하는 데 도움을 줍니다.
- 피드백 장려._ 와이어프레임을 공유하고 팀원의 피드백을 장려하는 것은 디자인 향상을 도모하는 확실한 수단입니다._
- 와이어프레임 키트 이용. 와이어즈(Wires)를 사용해 와이어프레임 제작을 시작해 보십시오. 이 키트는 Adobe XD를 위한 무료 와이어프레임 키트입니다.
프로토타입
프로토타입이란?
프로토타입을 제작하는 것은 인터랙티브한 경험을 구축함으로써 아이디어를 타진하는 프로세스입니다. 프로토타입은 최종 제품을 미들 피델리티에서 하이 피델리티 사이의 품질로 재현한 것으로, 유저 인터페이스의 상호 작용을 시뮬레이션합니다. 프로토타이핑은 디자이너가 자신의 창작물과 실제로 상호 작용할 수 있는 첫 번째 단계입니다.
프로토타입의 모양
와이어프레임과 유사해 보이지만, 이와 달리 프로토타입은 상당히 다른 면이 있습니다. 프로토타입은 아날로그 종이 프로토타입부터 실제 소프트웨어 제품에 이르기까지 모양과 크기가 다양합니다.
프로토타입의 피델리티 레벨도 다양합니다. 프로토타이핑은 로우 피델리티 프로토타입 제작과 하이 피델리티 프로토타입 제작의 두 가지 유형이 있습니다. 프로토타입의 피델리티는 프로토타입에 포함된 세부 묘사 및 기능 레벨을 나타냅니다.
- 로우 피델리티 프로토타입이란 디자이너가 디자인 프로세스 초반에 검토할 수 있도록 디자인 컨셉트를 대략적으로 재현한 것입니다. 로우 피델리티 프로토타입의 경우 일반적으로 기능과 인터랙션 면에서 제한적입니다. 로우 피델리티 프로토타입의 예는 스케치 또는 와이어프레임에서 만든 클릭 가능한 프로토타입입니다.
- 하이 피델리티 프로토타입은 실제 웹 사이트 또는 앱의 기능과 디자인 세부 사항을 시뮬레이션하는 인터랙티브한 프로토타입입니다. 하이 피델리티 단계의 프로토타이핑은 제품 디자인에 생기를 불어넣는 것으로, 이를 통해 사용자는 앱 또는 웹 사이트에 반응함은 물론 ‘느낌’까지 경험할 수 있습니다.
프로토타입을 제작하는 주요 목적
프로토타입은 사람들이 사용하게 될 모든 제품에 있어 매우 중요합니다. 일반적으로 프로토타입은 실제 제품을 연결하는 가교 역할을 합니다. 프로토타입의 목적은 사용자와 인터페이스 사이의 인터랙션을 시뮬레이션하는 데 있습니다. 프로토타입에는 모든 인터랙션이 구현되어 있지는 않지만, 최종 제품의 작동 방식을 명확하게 이해시키는 중요한 인터랙션이 포함되어 있어야 합니다. 프로토타입은 앱 또는 웹 사이트의 흐름 방식, 인터랙션 작동 방식을 경험하고 제품 디자인의 사용성과 가능성을 테스트하는 데 이용하는 것이므로 실제 사용자를 대상으로 테스트하는 것이 좋습니다. 프로토타이핑 및 테스트를 거치지 않고 실제 사용자와 제품 간의 상호 작용 방식을 예측하는 것은 어렵습니다.
프로토타입 제작 시기
크리에이티브 팀이 프로토타입을 실제로 필요하게 되는 시기는 프로젝트의 요구 사항에 따라 달라지게 됩니다. 일반적으로 실제 개발을 시작하기 전에 시각 디자인과 인터랙션 디자인을 함께 연결해야 하는 경우 프로토타입이 필요하게 됩니다.
프로토타입 제작의 이점
- 효과적인 아이디어 홍보 수단._ 아이디어를 설득할 때 디자인 사양 또는 다른 형태의 텍스트 설명보다는 간단한 인터랙티브 프로토타입이 더 효과적일 수 있습니다. 프로토타입을 사용하면 이해 관계자가 제품을 사용해 보고 사용 경험을 느낄 수 있기 때문에 이해 관계자의 지지를 쉽게 얻을 수 있습니다._
- **문제점 이해. **프로토타입을 제작하면 해결하려는 문제를 더욱 깊게 이해할 수 있습니다.
- 의사 소통의 수단._ 사용자(디자이너, 이해 관계자 또는 최종 사용자)는 디자이너의 컨셉트를 ‘실험’해 보고 소중한 피드백을 제공해 줄 수 있습니다._
- 검증 수단._ 와이어프레임은 구조를 다루는 반면, 프로토타입은 사용성을 다룹니다. 사용자에게 프로토타입을 보여주고 일반적인 사용자 흐름을 따라 갈 기회를 제공하는 것은 놀라운 통찰력을 얻을 수 있는 일입니다. 프로토타입을 사용하면 사용자 경로를 테스트하고 전체적인 인터랙션 흐름에서 잠재적 문제점을 디자인 초기 단계에 찾을 수 있습니다._
- 사용자 조사 단계에서 유용._ 프로토타입은 타깃 사용자의 기호를 밝히기 위해 사용되기도 합니다. 초기 단계에서 프로토타입을 테스트하면 잘못된 솔루션을 개발함으로써 발생할 수 있는 막대한 비용과 시간을 절약할 수 있습니다. 제품 라이프사이클 초기에서 검증 결과를 얻을 경우 사용자의 호응이 가장 좋은 기능을 찾아내고 디자인 및 개발 작업을 올바른 방향으로 이끌 수 있습니다._
프로토타입 제작의 한계
프로토타입은 사용자가 제품의 작동 방식을 이해하기 위해 직접 노력을 기울여야 하기 때문에 문서화된 형태로 사용할 수 없습니다.
프로토타입 제작 방법
- 종이를 사용한 프로토타입 제작._ 디지털 방식이 아닌 이 접근 방식은 종이 위에 ‘페이지’를 그리는 작업입니다. 사람이 이 인터랙션을 시뮬레이션합니다(사람이 컴퓨터 역할을 하며, 사용자의 선택 사항에 따라 종이를 바꿔가면서 제작). 이러한 프로토타입 제작 방법은 빠르고 쉽지만 사용자에 대한 엄청난 상상력이 필요하고 많은 인터랙션 문제점을 반영하지 못할 수 있습니다._
- 프레젠테이션 소프트웨어 사용._ 파워포인트와 키노트와 같은 소프트웨어에서 서로 다른 페이지를 함께 연결하고 이러한 페이지 사이에 애니메이션이 적용된 전환을 추가하는 방식으로 매우 기본적인 프로토타입을 만들 수 있습니다. 이러한 프로토타입 제작 방법은 쉽고 간편하지만 인터랙션 요소가 제한적입니다._
- 디자인 소프트웨어 사용._ 특화된 디자인 소프트웨어에는 프로토타입 제작에 필요한 거의 모든 기능을 포함하고 있습니다. 이러한 툴의 대부분은 공동 작업이라는 추가적인 이점을 제공합니다. 다시 말해 서로 다른 팀원이 동일한 문서에 주석을 달 수 있어 처음부터 피드백을 서로 주고 받으면서 작업을 진행할 수 있습니다._
- 기본 프로토타이핑 툴 사용._ 기본 프로토타이핑이란 코드 작성을 의미합니다. 여기에는 Java 기반의 안드로이드 앱 제작이나 Swift 기반의 iOS 앱 구축 또는 웹 앱을 위한 HTML/CSS/JavaScript 코딩 작업이 해당됩니다. 기본 프로토타입 제작은 최대한 실제 데이터, 실제 디바이스, 실제 사용자를 기반으로 수행되어야 하고 이러한 프로토타입 제작 유형은 고도의 기술력이 요구됩니다. 제품이 디자인 소프트웨어를 사용하여 프로토타이핑하기 어려운 기술을 탑재하고 있는 경우(예: 프로젝트가 실제 GPS 데이터가 필요한 모바일 앱인 경우) 기본 프로토타이핑은 필수적입니다._
팁
- 한 가지 프로토타입 디자인 아이디어에 만족하지 마십시오._ 첫 번째 아이디어가 적합한 아이디어인 것 같다는 생각에 현혹되어 프로토타입을 토대로 세부 작업을 시작할 수 있습니다. 그러나 이 방식은 최선의 프로토타입 제작 방식이 아닙니다. 프로토타입 제작 단계를 시작할 때에는 최대한 다양한 아이디어를 시도하는 것이 중요합니다. 아이디어를 다양화하면 팀이 문제가 되는 영역에 대해 자세히 파악하고 가능한 모든 솔루션을 찾을 수 있습니다._
- 프로젝트에 맞는 적합한 피델리티를 선택하십시오._ 자레드 스풀(Jared Spool)은 자신의 글 프로토타입 제작 시 저지르기 쉬운 5가지 실수에서 적합하지 않은 피델리티의 프로토타입 제작이 가장 큰 실수가 될 수 있다고 말하고 있습니다. 피델리티는 테스트 목적, 디자인 완성도 및 사용 가능한 리소스를 기반으로 선택해야 합니다._
- 피드백을 반영한 프로토타입 제작._ 가장 일반적인 프로토타입 제작 방법은 로우 피델리티 프로토타입으로 빠르게 시작한 다음 점진적으로 반복하여 하이 피델리티 버전으로 만드는 것입니다(이 방법은 애플의 방식과 유사함). 사용자의 피드백은 훨씬 더 다듬어진 최종 제품을 만들 가능성을 높이는 요인이며, 이 프로세스는 사용자 피드백에 의해 큰 영향을 받습니다._
- 재사용 가능한 프로토타입을 제작하십시오._ 몇 가지 사항을 제외하면 프로토타입은 제작 비용이 높고 시간 소모적인 디자인 산출물입니다. 이러한 이유로, 개발 과정에서 재사용할 수 있는 프로토타입을 제작하는 것이 더 효과적입니다._
결론
와이어프레임과 프로토타입은 기능 면에서 서로 다르지만 모두 제품 팀이 보다 나은 제품을 제작할 수 있게 해주는 유용한 수단입니다. 성공적인 제품 디자인을 수행하는 핵심은 디자인 프로세스에 투자하고 와이어프레임 및 프로토타입 제작을 통합 워크플로우의 한 부분으로 활용하는 것입니다. 하지만 사용자를 염두에 두지 않은 채 제품의 와이어프레임 또는 프로토타입을 제작하지 마십시오. 디자인의 중심에는 항상 사용자가 있어야 합니다. 위의 조언은 사용자가 애용하게 될 제품을 보다 효과적으로 만드는 데 도움을 줄 것입니다.