05_인터랙션 디자인의 도구_와이어프레임(Wireframe)

구성, 정보 체계, 기능, 컨텐츠를 담은 문서들의 모음이다.

이 작업은 건축 설계의 밑그림이나 네트워크 구조도에 기반을 두고 있다.

와이어 프레임은 제품을 작업할 때 디자이너가 만들어내는 가장 중요한 문서이다.

제품에 들어갈 기능들을 정의한 문서들을 포함하고 있으며 이런 기능들이 들어가게 된 기술적, 사업적 이유들이 한장짜리 디자인 시안과 함께 제시된다.

개발자, 신업 디자이너, 카피라이터, 사업 담당자들은 제품을 이해하고 시각적이거나 물리적인 외형에 휘둘리지않고 신중하게 제품을 개발하기 위해아 와이어프레임을 사용한다.

<그림> 와이어프레임은 비주얼적인 디자인요소를 배제한 디자인요소를 제품의 구성적, 기능적 요소를 담고 있다.

와이어프레임은 이를 읽거나 사용하는 사람이 다양하기 때문에 만들기 꽤 난해한 문서다.

와이어프레임은 모델과 다이어그램처럼 하나의 커뮤니케이션 도구이다.


일반적으로 와이어프레임은 세 개의 영역으로 나뉜다.
하나는 와이어프레임 자체, 또 하나는 관련 주석, 또 하나는 와이어프레임에 대한 정보(와이어프레임 메타데이터)다.

와이어프레임

• 와이어프레임은 제품의 전반적인 속성으로부터 특정한 기능에 대한 상세한 설명까지 모든 내용을 포괄하는 것이 가능하다.


• 와이어프레임을 통해 제품의 개략적인 모양새를 그릴 수 있어야 한다.
• 모양새란 컨텐츠, 기능(형태는 기능을 따른다), 그리고 이 두 요소에 접근하고 이들을 사용할 수 있게 해주는 네비게이션, 이 세가지 요소로 이루어진다.
• 와이어프레임은 컨텐츠와 기능이 위치할 장소뿐 아니라 이들을 사용하게 해주는 요소(버튼, 스위치, 메뉴, 키스트로크 등)에 대한 내용이 들어가야한다.


• 컨텐츠는 텍스트, 이미지, 이이콘, 애니메이션 등을 포괄하는 막연한 집합을 뜻한다.
• 특정하게 제안할 내용이 아니라면 더미로 표현한다.
• 다른 컨텐츠 형태는 뭔가 존재한다는 사실을 알리기위해X자 정도로 표시한다.


• 기능은 각 기능별 버튼, 손잡이, 슬라이더, 다이얼, 입력박스 등으로 이루어진 컨트롤과 해당 컨트롤에 대한 제품의 피드백까지를 모두 포함한다.


• 네비게이션은 하이퍼링크, 간단한 드롭다운 메뉴, 위젯의 툴바, 혹은 물리적으로 공간을 차지하는 복잡한 조작 방법에 이르기까지 온갖 방법을 모두 포괄한다.


• 모든 요소는 각 위치와 중요도에 따라 정렬되어 와이어프레임 상에 나타나야한다.
• 와이어프레임은 시각디자이너, 혹은 산업 디자이너의 손을 거치면서 각각 다른 방식으로 해석될 수 있다.
• 중요한것은 위에서 열거한 컨텐츠 위치, 기능 네비게이션이라는 각 내용이 제품에 반영되려면 와이어프레임 상에 존재해야 한다는 사실이다.
• 약간 모호하거나 특정 제목이 붙은것은 관련된 주석을 첨부한다.
  

주석

1. 와이어 프레임 상의 모호한 내용을 짧게 설명해두는것
2. 개발자나 클라이언트가 어떤 특정 버튼이 왜 그런지의 이유를 알고 싶을때, 관련된 주석에는 그 버튼이 무엇을 하는지뿐 아니라 왜 거기있는지에 대한 설명도 되어 있다.
   ex)'이 버튼을 누르면 프로세스가 정지된다' 와 '이 버튼을 누르면 프로세스가정지되므로, 사용자들이 프로세스가 끝나기를 기다리지않아도 된다'는 차이가 있다.
3. 프로세스상에 변화가 일어났을때(ex))프로세스가 1초도 걸리지 않게 되었을때) 디자인을 어떻게 고쳐야할지 쉽게 알 수 있다.


4. 주석이 필요한 와이어프레임 요소


1. 컨트롤 : 특정한 버튼이 놀리거나 디이얼이 켜지거나 하이퍼링크가 클릭되었을때 어떤 일이 벌어지는지.
2. 조건적인 아이템 : 컨텍스트에 따라 변화하는 오브젝트들이 있다. 어플리케이션 메뉴중에는 사용자가 무엇을 하고 있는지에 따라 비활성화되는 메뉴들을 종종 볼 수 있다.
3. 제약조건 : 사업적, 법적, 논리적, 기술적 제약조건. 암호로 슬 수 있는 글자수의 제한이나 특정 컨텐츠가 어린이에게는 보이면 안 되는 법적인 이유 등.
4. 그 외에 공간의 제약들으로 인해 와이어프레임에서 보여줄 수 없는 모든 내용. 상당히 진 드롭다운 메뉴의 모든 아이템등
   

와이어프레임 메타데이터

1. 개별 와이어프레임은 해당 와이어 프레임에 대한 정보를 가지고 있어야 한다.
2. 이를 와이어프레임메타데이터라하며, 다음과 같은 내용을 포함하고있다.


1. 디자이너 이름
2. 와이어프레임이 만들어지거나 수정된 날짜
3. 버전 숫자
4. 지난 버전에서 무엇이 바뀌었는가 하는 내용 :
   클리이언트들은 이런 내용이 쓰여있는 것을 좋아한다. 이를 통해 프로젝트를 진행하는 동안 발생한 이슈들을 어떻게 처리하고 있는지를 알 수 있기 때문이다.
5. 관련된 문서 :
   해당 와이어프레임과 관련되어 있는 모든 관련 문서(페이지까지 기술). 사업적인 요구사항. 기술 사양서. 유스케이스 등. 와이어프레임에 대한 의문이 생긴다면 적절한 문서를 참고 할수 있도록 한다.
6. 남은 문제 : 이 와이어프레임에는 아직 해결해야 할 문제점이 남아있는가?
7. 기타 내용을 적어둘 공간 :
   해당 프로젝트에 대한 최종 의견을 적어둘 공간이 필요하다. 특히 제품에 영향을 줄 제약조건에 대한 내용이 있을 수 있다. 해당 프로젝트에 부정적인 영향을 줄 만한 사업적, 기술적 제약사항들을 적어둔다. 이를 통해 와이어프레임을 보여줄때 특정한 상황을 변화시켜보려고 노력할 수 있으며, 만일 클라이언트나 개발자가 해당 제약을 개선하는 데 대해 소극적이라면 불만이 제기될 때 들이밀 수도 있고 개선된 버전을 계획할 때 쓸수 있다.

출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한