와이어프레임, 프로토타입, 목업: 무엇이 다른가? (Wireframes, Prototypes, Mockups: what’s the difference?)

이 글은 Jeremiah Lam의 Wireframes, Prototypes, Mockups: what’s the difference?글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다


presentation
illustration by Ouch
UI/UX 디자이너로 전환한 지 1년이 조금 넘었는데, 현재 회사에서 근무하고 있는 동안 많은 엔지니어, 마케팅 담당자, 그리고 고위 경영진들도 서로 다른 디자인 결과물의 이름을 동의어로 사용하고 있다는 것을 알게 되었습니다. 그들은 와이어프레임, 프로토타입, 목업이 정확히 같은 것이라고 생각하는 경향이 있습니다. 기발한 아이디어를 대표하는 회색류와 상자 모양의 스케치입니다.
단순화된 뷰의 문제는 제 결과물에서 무엇을 기대할 수 있는지 전혀 모르기 때문에 종종 혼란스러워 한다는 것입니다.
"이게 왜 클릭할 수 없는 거죠? 왜 이렇게 간단해 보이죠? 저희 브랜드 색상은 어디 있죠?
이러한 종류의 언급은 특히 비디자이너 이해당사자들과 함께 작업할 때 제품 디자인 프로세스에서 매우 중요한 사항임에도 불구하고 UX 디자인 프로젝트에서 짜증스러울 정도로 흔합니다.
와이어프레임과 프로토타입을 혼동하는 것은 건축 설계도(구축 대상 세부 계획)와 쇼하우스가 동일하지만 실제로는 두 가지 모두 아키텍처에서 서로 다른 통신 수단이라고 가정하는 것과 같습니다.
  • 청사진(Blueprint)은 빌딩 계획 역할을 하며 빌딩을 만드는 방법을 지정해야 합니다.
  • 디스플레이 하우스가 미래의 거주자를 위한 테스트 드라이브를 제공합니다.
와이어프레임, 프로토타입 및 실물 모형에 동일한 차별화를 적용할 수 있습니다. 디자인의 다양한 기능 및 측면을 전달하는 데 사용되므로 서로 다릅니다. 이 세 가지 설계 결과물에서 공통적으로 볼 수 있는 한 가지는 모두 최종 제품을 나타낸다는 점입니다. 단지 다른 표현일 뿐입니다.
그렇기 때문에 디자인 아이디어를 제시하기 전에 각 이해당사자에게 각각의 결과물에 대한 차이와 이유를 알리는 경향이 있습니다.

와이어프레임 (Wireframe)

presentation
와이어프레임은 디자인의 충실도가 낮거나 높습니다. 다음 사항을 명확히 보여 줍니다.
  • 주요 내용 그룹(무엇을?-what?)
  • 정보의 구조(어디?-where?)
  • 기본 인터페이스 상호 작용에 대한 설명입니다.(어떻게?-how?)
와이어프레임은 그저 무의미한 회색 상자의 집합이 아닙니다. 정확히 그렇게 보일 수도 있습니다. 디자인의 척추로 간주할 수 있습니다.
너무 많은 세부사항으로 들어갈 수는 없지만, 반대로 중요한 부분을 놓치지 않는 최종 디자인을 확실하게 표현해야 합니다. 개발자, 카피라이터, 프로젝트 관리자 등 전체 프로젝트와 함께 작업하는 사람들을 위한 경로를 설정하고 있다는 점을 기억해야 합니다.
사실, 당신은 도시의 지도를 만들고 있습니다. 모든 거리는 지도에 표시되지만, 매우 단순합니다. 지도를 보면 도시의 건축물을 느낄 수 있지만, 도시의 아름다움을 인식할 수는 없습니다.
잘 만들어진 와이어프레임은 디자인을 투명한 방식으로 전달하고 팀 전체를 위한 길을 정합니다.

와이어프레임은 이럴때 사용합니다.

와이어프레임은 일반적으로 프로젝트의 문서로 사용됩니다. 정적 및 단순하므로 상호 작용 또는 기술 문서를 설명하는 짧은 메모를 포함할 수 있습니다.
그러나, 팀 내 커뮤니케이션을 위한 명확한 스케치 역할을 하는 덜 형식적인 방법으로도 사용될 수 있습니다. 예를 들어, 개발자에게 어떻게 해야 하는지를 설명하는 빠른 방법입니다.
사용자 테스트에 대해서는 방법론적 순도 때문에 와이어프레임을 테스트 재료로 거의 사용하지 않습니다. 프로젝트와 관련된 다양한 이해당사자들 사이의 내부 테스트와 피드백 수집을 위해 이러한 정보를 사용하기는 하지만, 빠른 통찰력을 얻기 위해 사용합니다.

프로토타입 (Prototype)

presentation
By Jose Bento
종종 와이어프레임과 혼동되는 프로토타입은 최종 제품을 중간에서 높은 충실도로 표현한 것으로, 사용자 인터페이스 상호 작용을 시뮬레이션합니다. 사용자는 다음 작업을 수행할 수 있습니다.
  • 인터페이스와 컨텐츠 및 상호 작용을 경험할 수 있습니다.
  • 최종 제품과 유사한 방식으로 주요 상호 작용을 테스트합니다.
프로토타입은 사용자와 인터페이스 간의 최종 상호 작용을 시뮬레이션하는 것입니다. 최종 제품과 꼭 닮지는 않을 수 있지만 매우 비슷해야 합니다.
상호 작용은 주의하여 모델링해야 하며 최종 경험과 상당히 유사해야 합니다. 인터페이스와 백엔드 메커니즘 간의 상호 의존성은 종종 비용을 절감하고 개발 주기를 가속화하기 위해 생략됩니다.

프로토타입은 이럴때 사용합니다.

프로토타입은 사용자 테스트에서 잠재력을 최대한 발휘하는 데 사용됩니다. 최종 상호 작용을 시뮬레이션하여 개발이 실제로 시작되기 전에 인터페이스의 사용성을 확인할 수 있습니다. 이 작업은 UI가 승인될 때까지 개발 비용을 줄이기 위해 수행됩니다. 프로토타입을 테스트한 후, 팀은 코딩을 진행할 수 있습니다.
프로토타입은 인터페이스를 이해하기 위해 약간의 노력을 기울이기 때문에 디자인을 문서화하는 데 가장 좋은 방법은 아닙니다. 그러나 한편으로는 가장 매력적인 형태의 디자인 문서입니다.

목업 (Mockup)

presentation
UI/UX Case Study: Seedly — A Personal Finance App
실물 모형은 중간에서 높은 충실도의 정적 설계 표현입니다. 종종 실물 모형은 시각 디자인 초안 또는 심지어 실제 시각 디자인입니다.
잘 만들어진 모조품은 제품의 색 구성, 시각적 스타일, 타이포그래피와 관련된 최종 결정을 내리는 데 도움이 됩니다. 모의실험을 통해 제품의 시각적 측면을 실험하여 무엇이 가장 잘 보이는지 확인할 수 있습니다.

목업은 이럴때 사용합니다.

모업은 특히 이해당사자들로부터 조기에 매수하고자 할 때 유용합니다. 이러한 시각적 특성 덕분에 모형 제작은 충실도가 낮은 결과물에 대한 저항이 없으며 프로토타입보다 훨씬 더 빠르게 제작할 수 있습니다. 이 자료들은 좋은 피드백을 수집하는 자료이며, 전체 설계 사례의 맥락에 배치될 경우 설명서의 훌륭한 장을 구성할 수 있습니다.

마지막 생각

디자인 프로세스에서 커뮤니케이션 방법을 선택하기 전에 제품과 팀을 고려해야 합니다. 무엇이 모두에게 가장 적합한지 생각해 보십시오. 프로젝트 관계자(개발자, 프로젝트 관리자, 제품 마케팅 담당자)와 회의를 갖고 다양한 결과물을 설명하고 이들에게 가장 적합한 것이 무엇인지 이해하고자 할 수 있습니다.
모든 것을 확실히 만들 수 있으며, 많은 경우 반드시 생성해야 할 수도 있습니다. 모두 이치에 맞으며, 제대로만 하면 "완벽한" 디자인에 더 가까이 다가갈 수 있습니다.
공동 작업, UI/UX 설계에 대해 이야기하거나 대화하고 싶은 경우 LinkedIn 😁 Happy Design을 통해 저와 연결할 수 있습니다!

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp