와이어프레임과 스토리보드의 차이점

와이어프레임 및 스토리보드는 웹 개발 및 웹 애플리케이션에서 많이 사용되어 온 일반적인 기술입니다. 웹 개발 수명 주기에는 많은 것들이 있습니다. 전반적인 사용자 경험에 기여하는 여러 가지 요소가 있습니다. 

온라인 쇼핑몰을 사용하고 있다고 가정해 보겠습니다. 예를 들어 익숙하지 않은 UI, 작은 글꼴, 반응성 등 여러 요인으로 인해 경험이 안 좋아질수 있습니다. 이 모든 요소가 UX 디자인에 기여합니다. 와이어프레이임과 스토리보드는 프로세스 초기에 적용되는 제안된 기술로, 전체 시간을 절약하면서 프로세스 후반의 위험을 줄이는 데 도움이 될 수 있습니다. 그러나 와이어프레임과 스토리보드는 비슷한 성격과 목적 때문에 혼동되곤 합니다.

 

와이어프레임이란 ?

와이어프레임은 웹사이트의 스케치인 페이지 도식입니다.어떤 종류의 개발이나 디자인 요소가 들어가기 전에 디자인 요소 없이 웹 사이트를  레이아웃을 시각적으로 표현한 것입니다. 와이어프레임은 미디어 및 콘텐츠 관점에서 각 페이지에 들어가는 항목에 대한 일종의 뼈대역할을 합니다. 기본적으로 웹 페이지의 스케치와 모양, 상자, 선, 색상으로 윤곽이 잡힌 중요한 요소가 있지만 가능한 한 단순하게 유지하기 위해 회색조로만 표시됩니다. 새 건물이나 사무실에 대한 청사진을 만드는 것처럼 와이어프레임은 각 페이지가 어떻게 상호 연결되는지 보여주는 웹 사이트의 청사진이라 할수있습니다. 와이어프레임은 웹 사이트가 어떻게 보일지에 대한 아이디어를 제공합니다.

 

스토리보드란?

와이어프레임과 유사하게 스토리보드는 웹 디자인 프로젝트의 청사진 또는 웹 사이트의 모든 구성 요소와 상호 연결 방식을 나타내는 앱의 프로토타입이기도 합니다. 스토리보드는 연필을 사용하거나 컴퓨터의 그래픽 프로그램을 사용하여 종이에 만든 일종의 고급 와이어프레임이라 할수있습니다. 색상, 글꼴과 같은 웹 사이트의 디자인 요소에 대해 걱정하기 전에 정보 구성을 시작하는 방법, 웹 페이지의 흐름 파악과 같은 모듈의 산출물입니다.  응용 프로그램에서 더 나아가 요소와 상호 작용하며 방법에 대한 간단한 스케치 및 설명입니다. 

디자이너와 개발자가 참고할수 있는 정책, 프로세스, 기능 정의와 서비스 구축에 대한 최종적인 문서라 할수있습니다.

와이어프레임과 스토리보드의 차이점

와이어프레임과 스토리보드는 가장 자주 생산되는 UX 산출물 중 두 가지로 종종 서로 혼동되기도 합니다. 와이어프레임은 각 페이지가 상호 연결되는 방식을 보여주는 웹사이트 또는 앱의 기본적인 그림 표현입니다 . 미디어 및 콘텐츠 관점에서 각 페이지에 들어가는 항목의 세탁 목록과 비슷합니다. 스토리보드는 화이트보드에 대한 초기 연구 프로세스 중에 생성된 고급 와이어프레임이라는 점을 제외하면 와이어프레임과 매우 유사합니다 . 둘 다 똑같이 중요하며 전체 웹 개발에서 각각의 역할을 수행합니다.

 

와이어프레임은 웹 사이트 또는 웹 페이지 구조를 선형으로 표현한 것으로, 실제 모습에 대한 목업 화면의 일종입니다. 웹사이트의 전체 레이아웃을 계획하는 데 보다 선형적인 접근 방식이 필요합니다. 예를 들어 골격 표현이나 각 페이지에 들어가는 내용의 프레임워크가 있습니다. 스토리보드는 웹사이트의 모든 구성 요소를 매핑하는 와이어프레임과 매우 유사합니다. 그러나 스토리보드는 사용자가 응용 프로그램 내부로 더 들어갈 때 발생하는 일에 대한 설명을 포함하는 높은 수준의 개요인 보다 자세한 표현입니다. 스토리보드는 그룹화 및 순서 지정 측면에서 보다 역동적인 구조입니다.

 

 

 

 항상 와이어프레임을 사용해야 하는 가장 중요한 이유는 와이어프레임을 사용하면 웹사이트 또는 웹페이지에서 명확한 목표를 결정하고 정보의 계층을 설정할 수 있기 때문입니다. 즉, 가입 양식, 피드백 페이지 또는 중요한 정보와 같은 클릭 유도 문안과 같이 웹 사이트의 중요한 요소가 들어가는 위치를 파악할 수 있습니다. 또한 귀하와 귀하의 고객 간의 의사 소통을 단순화합니다. 스토리보드는 기본적으로 동일한 목적을 수행하지만 더 자세한 방식으로 사용됩니다. 클라이언트(또는 클라이언트)와의 추가 논의를 위한 촉매제 역할을 합니다.

와이어프레임과 스토리보드는 기본적으로 시각적 요소 없이 동일한 내비게이션 체계와 레이아웃을 따르므로 웹 디자이너와 웹 개발자 모두의 인지 부담을 줄여준다는 점에서 거의 동일합니다.와이어프레임 및 스토리보드는 웹 개발 프로세스의 전제 조건으로 초기에 적용되는 제안된 기술입니다. 그러나 스토리보드는 작업자 모두가 공통의 목표를 향해 작업하는지 확인하기 위해 클라이언트와 공유할 더 자세한 표현과 스케치 또는 레이아웃이 포함된 높은 수준의 와이어프레임으로 볼 수 있습니다. 게다가 전체 웹 개발 수명 주기에서 중요한 역할을 하는 가장 중요하고 자주 생성되는 UX 결과물입니다.