본문 바로가기

05_인터랙션 디자인의 도구_와이어프레임(Wireframe) 구성, 정보 체계, 기능, 컨텐츠를 담은 문서들의 모음이다. 이 작업은 건축 설계의 밑그림이나 네트워크 구조도에 기반을 두고 있다. 와이어 프레임은 제품을 작업할 때 디자이너가 만들어내는 가장 중요한 문서이다. 제품에 들어갈 기능들을 정의한 문서들을 포함하고 있으며 이런 기능들이 들어가게 된 기술적, 사업적 이유들이 한장짜리 디자인 시안과 함께 제시된다. 개발자, 신업 디자이너, 카피라이터, 사업 담당자들은 제품을 이해하고 시각적이거나 물리적인 외형에 휘둘리지않고 신중하게 제품을 개발하기 위해아 와이어프레임을 사용한다. 와이어프레임은 비주얼적인 디자인요소를 배제한 디자인요소를 제품의 구성적, 기능적 요소를 담고 있다. 와이어프레임은 이를 읽거나 사용하는 사람이 다양하기 때문에 만들기 꽤 난해한 문서다. .. 더보기
05_인터랙션 디자인의 도구_무드보드 (mood board) 제품.서비스의 감성적인 영역을 탐색할 수 있게 도와주는 매개체다. 이미지, 단어, 색상, 타이포그라피 등 다양한 방법을 사용해 최종 디자인이 어떤 느낌을 주게 되는지를 설명하는 집합물을 구성한다. 이미지와 단어는 잡지나 뉴스, 온라인 이미지 갤러리에서 얻거나 디자이너가 직접 만들수도 있다. 직접 촬영하기도 한다. 전통적으로 무드보드는 커다란 포스터 보드지에 만들곤 한다. 이런 방법은 결과물을 벽에 붙여놓고 가끔 바라보면서 영감을 얻을 수 있다는 장점이있다. 어떤형태로 무드보드를 만들든 간에 여기에는 디자이너가 최종단계의 제품/서비스에 담고자 하는 감성을 반영해야 한다. 좋은 싯구나 미술작품의 한 부분만으로도 보는 사람에게 본능적인 반응을 이끌어낼 수 있다. 출처 : (에이콘 UX 프로페셔널 시리즈 1-0.. 더보기
05_인터랙션 디자인의 도구_유스케이스 프로그래머는 유스케이스를 오랫동안 소프트웨어 디자인에 사용해왔다. 유스케이스는 제품/서비스의 기능을 간략하게 늘어놓은것이다. 간단한 단어를 사용하여 해당 기능의 쓰임새와 이유를 설명한다. 유스케이스는 그 기능을 쓰는 주체에 대해서도 설명한다. 이를 통해 점재적인 작업자들의 특성이 정의된다. 유스케이스는 딱히 시스템에서 일어나는 이벤트를 정리하는 데만 한정될 필요는 없으며 다음과 같은 형태를 보인다. 제목 이 개별 제목은 문서와 회의에서 자주 쓰이게 되므로 설명적인 제목을 붙여야 한다. ex)이메일 프로젝트에는 '이메일 전송'이라는 유스케이스가 포함되어있다. 작업자 누가 이 기능을 수향하는가? ex)이메일 전송의 예를 들면 작업자는 사용자와 시스템이다. 목적 이 유스케이스로 무슨 작업이 수향되어야하고, 왜.. 더보기
05_인터랙션 디자인의 도구_워크플로우 일단 작업 목록이 작성되고 나면 이 업무들을 특정한 순서나 플로우, 혹은 중요도에 따라 나눠볼 수 있다. 워크플로우는 이들이 어떻게 논리적으로 연결되어 와이어프레임으로 구성되는지를 보여준다. 작업을 이런 플로우 안에 배치함으로써 디자이너는 제품의 형태를 구성하기 시작한다. 워크플로우를 통해 웹사이트나 도구판 안에서 페이지 순서를 그려볼 수 있다. 작업 흐름도 상에서 사용자들의 특정한 행동이 개별 작업을 이끌어 내기 때문에 꼭 필요한 컨트롤 기능을 정의하는 데도 도움을 준다. 도한 특정한 결정이 이루어져야 하는 지점과, 그 당시 함께 보여져야 할 메뉴와 정보도 포함된다. 출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한 더보기
05_인터랙션 디자인의 도구_작업목록 작업목록은 최종디자인을 위한 여러 가지 활동 중 우선순위가 낮은 편이다. ex) 새로운 웹브라우져 디자인에서 사용자가할 수 있는일 주소를 직접 입력해 해당 페이지로 이동한다. 즐겨찾기를 통해 해당 페이지로 이동한다. 즐겨찾기에 새 항목을 추가한다. 즐겨찾기에 항목을 제거한다. 즐겨찾기를 폴더의 형식으로 구성한다. 페이지를 인쇄한다. 페이지를 새로 고침 한다. 이전 페이지로 돌아간다. 기타. 일반 사용자들은 거의 쓰지않는 기능들, 페이지 소스코드를 보여주거나 자바스크립트 설정창을 여는기능. 작업목록은 엑셀 시트나 텍스트 문서 형태로 만든다. 와이어프레임을 써서 각 작업이 개별 페이지에서 어떻게 동작하는지를 그려볼 수 있다. 작업은 기능, 사용자등급(기본사용자작업, 로그인한 사용자작업, 관리자 작업 등)이나.. 더보기