와이어프레임

와이어프레임

비주얼 디자인이 시작되기 전에 흑백으로 제작되어 UX/UI 디자인의 방향을 잡는 역할을 하며 페이지나 화면에 보여지는 요소들을 정하기 위해 그려지는 일종의 ‘프로토타입’이라고할 수 있다. 피드백과 함께 이루어지는 작업이기 때문에 한번에 완성도를 높이기보다 반복적작업을 진행하는 것을 염두 해 두고 작성해야 한다.

정의

대략적인 스크린 디자인을 일컫는 것으로, 각 페이지와 기능 간의 관계와 구조를 제안하고 시각화하는 것이다. 이러한 와이어프레임은 인터페이스 디자인에서 기본 안내서로 사용한다. 즉, 와이어프레임은 인터페이스의 기본 요소를 담은 레이아웃을 그림 등으로 표현한 것으로, 기획서나 스토리보드 등의 UI 디자인을 의미한다. 가벼운 스케치와 인터랙티브프로토타입 사이에 위치한다고 본다.

• 개별적인 페이지 혹은 템플릿이 구조적인 관점에서 어떻게 보여야 하는지를 정의한다.
• 사이트의 정보구조와 시각 디자인 및 정보 디자인의 특성을 모두 가지고 있다
• ‘페이지’라고 불리는 상대적으로 좁은 2차원 공간에 포함될 콘텐츠와 정보구조를 설명한다.
• 콘텐츠 요소를 어떻게 그룹핑 할지, 어떻게 배열할지, 어떤 요소 그룹들이 높은 우선순위를 가질지 결정하며 화면설계 작업을 진행한다.
• 메인 페이지, 주요 카테고리 페이지, 검색으로 이동하는 인터페이스와 같이 사이트의 가장 중요한 페이지들과 그 밖의 중요한 애플리케이션을 위해 생성된다.

화면 설게의 종류

낮은 완성도의 화면설계

어떤 그래픽 요소나 실제 콘텐츠가 담겨있지 않다. 이 화면설계는 시각 디자이너가 페이지의 글로벌, 로컬, 컨텍스추얼 내비게이션 요소에 집중할 수 있도록 해준다.

중간 완성도의 화면설계

세부사항들이 잘 표현되어 있다. 이 화면설계 콘텐츠, 배열, 내비게이션의 몇 가지 측면을 보여주기 위한 목적으로 만들어졌다.

높은 완성도 화면설계

실제 페이지 모습과 매우 흡사하다. 이 화면설계는 대부분의 인포메이션 아키텍트가 그래픽 디자이너의 도움 없이도 이미지를 사용할 수 있다는 것을 보여준다.

와이어프레임 장점

• 디자인을 좀 더 세밀하게 파악할 수 있게 한다. 세밀하게 작성된 문구는 화면을 이해하는데 도움을 준다
• 와이어프레임을 몇 장 묶으면 사용성에 대한 피드백을 얻을 정도의 충분한 완성도가나온다
• 사용자에게 보여줘서 화면에 대해 어떻게 생각하는지, 어떻게 태스크를 완수할지 들여다 볼 수 있다
• 사이트의 디자인과 기능에 대한 요구 사항을 명확히 전달할 수 있는 커뮤니케이션 도구 역할을 한다.
• 디자인 명세 문서를 상당 부분 대체할 수 있다.