본문 바로가기

-_-

06_인터페이스 디자인의 기초_컨트롤과 위젯 대부분의 애플리케이션과 디바이스는 어느정도 시각적인 컨트롤로서 제품 기능을 사용할 수 있다. 컨트롤은 해당 제품이 어떤 기능을 지니는지를 설명하기 위한 어포던스와 이 기능을 구현하기 위한 파워를 갖고있다. 스위치 : 켜기와 끄기라는 두 가지 상태로 동작하며 바뀌기 전에는 그 상태를 유지한다. 버튼 : 모든 인터페이스에서 어디에서나 사용되고 있다. 버튼은 기본적으로 누르거나 클릭해서 동작하는 도구를 말한다. 눌린 채로 멈춰 있을 수도 있고, 이를 다시 돌리려면 한 번 더 누를 필요가 있다. 혹은 자동으로 제자리로 돌아오기도 한다. 버튼은 모드를 바꾸는 것에서부터 다양한 행동의 범위에 사용된다. 다이얼 : 연속적인 수치 중 한 지점을 선택한다거나 다양한 세팅이나 모드 중 하나를 산택하는 등 버튼보다 더 복잡.. 더보기
06_인터페이스 디자인의 기초_비주얼 인터페이스 디자인의 기본요소_레이아웃 비주얼 인터페이스 요소에는 버튼, 라벨, 화면 상 개별 아이템의 위치, 디바이스 상에서의 스크린 위치, 다른 인터랙션 디자인 요소들이 위치할 공간이 포함된다. 비주얼 인터페이스는 기본 요소 몇 개만으로 이뤄져있다. 이런요소들이 어우러진 방식이 비주얼 인터페이스를 정의한다. 레이아웃 모든 스크린 비주얼 디자인의 핵심은 레이아웃이다. 레이아웃이란 구성요소, 칸트롤, 컨텐츠를 어디에 어떻게 배치할까 고민하는 것이다. 레이아웃은 이런 요소들을 배치할 구조를 만들어 내고 우선순위를 매겨 놓음으로써, 사용자는 무엇이 더 중요하고 무엇이 덜 중요한지 알 수 있다. 레이아웃은 공간이 한정된 작은 스크린에서 더욱 중요하다. 그리드시스템 그리드 시스템은 디자이너가 유사한 패턴 안에 존재하는 정보를 쉽게 조직화할 수 있게 .. 더보기
06_인터페이스 디자인의 기초 사람은 인터페이스를 통해서만이 디지털 제품과 관련을 맺을 수 있다. 디지털 디바이스와 대화를 하려면 커뮤니케이션의 중개자인 인터페이스가 반드시 필요하다. 인터페이스 디자인은 인터랙션 디자인의 '경험적 공유'일 뿐이며 인터랙션 디자인 자체가 아니다. 인터페이스는 사람들이 보도 듣고 느끼는 부분만을 담당하며 인터랙션디자인의 한 부분일 뿐이다. 인터랙션 디자이너는 인터페이스를 통해 해당 제품이 어떻게 사람과 연관을 맷고 어떻게 해당 제품이 어떻게 사람과 연관을 맷고 어떻게 그 제품이 현실적으로 반응할지를 결정한다. 인터페이스를 통해 제품의 보이지 않는 기능들이 시각적으로 보이고 연결되고 사용된다. 인터랙션 디자이너는 '제품'뿐 이니라 인터페이스가 물리적인 공간, 제품, 그리고 사람과 확연한 관계를 맺게 되는 .. 더보기
05_인터랙션 디자인의 도구_프로토타입_테스트 일단 프로토타입을 만들면 이것을 보아야 할 사람들은 실제 의도한 사용자군들이다. 제품/서비스는 사용자가 직접 테스트해야 한다. 디자인리서치(4장)와 똑같은 규칙이 사용자 테스트에도 적용된다. 직접만나라, 직접 대화하라, 직접 기록하라 특정한 환경설정이 필요한것이 아니라면 테스트가 사용자의 고유환경에서 이루어지는 것이 가장 효과가 좋다 테스트용 연구소에서는 효율성이라는 하나의 장점뿐이다. 대상자를 하루에 불러 한꺼번에 관찰할 수 있다. 테스트는 디자인 리서치과정을 통해 만들어진 잘못된 결론들을 바로 잡을 수 있는 시간이다. 테스트하는 동안 와이어프레임 등의 문서들을 옆에 두고 새로 발견된 패턴들을 기록할 수 있다면 아주 좋을것이다. 테스트 하는동안 방어적 입장이 되지않도록 노력한다. 직접 제품을 설명하게 .. 더보기
05_인터랙션 디자인의 도구_프로토타입 : 종이, 디지털, 실제 프로토타입 마지막으로 제품.서비스가 출시되기 전에는 프로토타입을 만들어 사용자들에게 테스트시켜보는 것이 중요하다. 프로토타이핑에서 드디어 디자인의 모든 요소가 하나의 형태로 합쳐지게된다. 다른 모델과 다이어그럄처럼 프로토타입도 커뮤니케이션용 도구지만, 실물이 이렇게 생겼을꺼라는 메시지를 전달한다. 제대로된 자원을 갖춘 디자이너라면 최종 제품/서비스와 유사하게 보이고 비슷하게 동작하는 충실한 프로토타입을 만들 수 있을 것이다. 많은 프랜차이즈 업체가 프로토타입용으로 진짜 가게를 열고는 한다. 모든 프로토타입의 목적은 최종 제품/서비스의 톡징을 살펴보는것이다. 프로토타입을 통해 디자이너와 클라이언트, 사용자들에게 제품이 어떻게 쓰이는지를 실험하고 관찰한다. 대부분의 디자이너들은 세 가지 타입의 프로토타입으로 작업한다... 더보기
05_인터랙션 디자인의 도구_와이어프레임(Wireframe) 구성, 정보 체계, 기능, 컨텐츠를 담은 문서들의 모음이다. 이 작업은 건축 설계의 밑그림이나 네트워크 구조도에 기반을 두고 있다. 와이어 프레임은 제품을 작업할 때 디자이너가 만들어내는 가장 중요한 문서이다. 제품에 들어갈 기능들을 정의한 문서들을 포함하고 있으며 이런 기능들이 들어가게 된 기술적, 사업적 이유들이 한장짜리 디자인 시안과 함께 제시된다. 개발자, 신업 디자이너, 카피라이터, 사업 담당자들은 제품을 이해하고 시각적이거나 물리적인 외형에 휘둘리지않고 신중하게 제품을 개발하기 위해아 와이어프레임을 사용한다. 와이어프레임은 비주얼적인 디자인요소를 배제한 디자인요소를 제품의 구성적, 기능적 요소를 담고 있다. 와이어프레임은 이를 읽거나 사용하는 사람이 다양하기 때문에 만들기 꽤 난해한 문서다. .. 더보기
05_인터랙션 디자인의 도구_무드보드 (mood board) 제품.서비스의 감성적인 영역을 탐색할 수 있게 도와주는 매개체다. 이미지, 단어, 색상, 타이포그라피 등 다양한 방법을 사용해 최종 디자인이 어떤 느낌을 주게 되는지를 설명하는 집합물을 구성한다. 이미지와 단어는 잡지나 뉴스, 온라인 이미지 갤러리에서 얻거나 디자이너가 직접 만들수도 있다. 직접 촬영하기도 한다. 전통적으로 무드보드는 커다란 포스터 보드지에 만들곤 한다. 이런 방법은 결과물을 벽에 붙여놓고 가끔 바라보면서 영감을 얻을 수 있다는 장점이있다. 어떤형태로 무드보드를 만들든 간에 여기에는 디자이너가 최종단계의 제품/서비스에 담고자 하는 감성을 반영해야 한다. 좋은 싯구나 미술작품의 한 부분만으로도 보는 사람에게 본능적인 반응을 이끌어낼 수 있다. 출처 : (에이콘 UX 프로페셔널 시리즈 1-0.. 더보기
05_인터랙션 디자인의 도구_유스케이스 프로그래머는 유스케이스를 오랫동안 소프트웨어 디자인에 사용해왔다. 유스케이스는 제품/서비스의 기능을 간략하게 늘어놓은것이다. 간단한 단어를 사용하여 해당 기능의 쓰임새와 이유를 설명한다. 유스케이스는 그 기능을 쓰는 주체에 대해서도 설명한다. 이를 통해 점재적인 작업자들의 특성이 정의된다. 유스케이스는 딱히 시스템에서 일어나는 이벤트를 정리하는 데만 한정될 필요는 없으며 다음과 같은 형태를 보인다. 제목 이 개별 제목은 문서와 회의에서 자주 쓰이게 되므로 설명적인 제목을 붙여야 한다. ex)이메일 프로젝트에는 '이메일 전송'이라는 유스케이스가 포함되어있다. 작업자 누가 이 기능을 수향하는가? ex)이메일 전송의 예를 들면 작업자는 사용자와 시스템이다. 목적 이 유스케이스로 무슨 작업이 수향되어야하고, 왜.. 더보기
05_인터랙션 디자인의 도구_워크플로우 일단 작업 목록이 작성되고 나면 이 업무들을 특정한 순서나 플로우, 혹은 중요도에 따라 나눠볼 수 있다. 워크플로우는 이들이 어떻게 논리적으로 연결되어 와이어프레임으로 구성되는지를 보여준다. 작업을 이런 플로우 안에 배치함으로써 디자이너는 제품의 형태를 구성하기 시작한다. 워크플로우를 통해 웹사이트나 도구판 안에서 페이지 순서를 그려볼 수 있다. 작업 흐름도 상에서 사용자들의 특정한 행동이 개별 작업을 이끌어 내기 때문에 꼭 필요한 컨트롤 기능을 정의하는 데도 도움을 준다. 도한 특정한 결정이 이루어져야 하는 지점과, 그 당시 함께 보여져야 할 메뉴와 정보도 포함된다. 출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한 더보기
05_인터랙션 디자인의 도구_작업목록 작업목록은 최종디자인을 위한 여러 가지 활동 중 우선순위가 낮은 편이다. ex) 새로운 웹브라우져 디자인에서 사용자가할 수 있는일 주소를 직접 입력해 해당 페이지로 이동한다. 즐겨찾기를 통해 해당 페이지로 이동한다. 즐겨찾기에 새 항목을 추가한다. 즐겨찾기에 항목을 제거한다. 즐겨찾기를 폴더의 형식으로 구성한다. 페이지를 인쇄한다. 페이지를 새로 고침 한다. 이전 페이지로 돌아간다. 기타. 일반 사용자들은 거의 쓰지않는 기능들, 페이지 소스코드를 보여주거나 자바스크립트 설정창을 여는기능. 작업목록은 엑셀 시트나 텍스트 문서 형태로 만든다. 와이어프레임을 써서 각 작업이 개별 페이지에서 어떻게 동작하는지를 그려볼 수 있다. 작업은 기능, 사용자등급(기본사용자작업, 로그인한 사용자작업, 관리자 작업 등)이나.. 더보기
05_인터랙션 디자인의 도구_스토리보드 제품/서비스의 모양을 짐작하게 해주는 시나리오와 스케치 작업이 끝나면 제품을 사용하는 모습을 상상하는데 도움을 주기 위해 스토리보드를 만들게 된다. 스토리보드는 단어와 이미지를 사용해서 그 제품/서비스를 사용하는 경험이 어떨지 상상하게 한다. 스토리보드 작업은 영화와 광고에서 쓰이는 기법이다. 스토리보드에서는 이 작업을 위해 특별히 찍은 사진이나 일러스트레이션을 사용한다. (해당 시나리오에 완벽하게 들어맞는 경우가 아니고서는 웹에서 얻은 클립아트나 사진 사이트에서 판매하는 상업용 이미지는 쓰지않는걸 추천한다.) 스토리보드를 이용하면 사용자의 동작 중 가장 중요한 부분을 설명할 수 있다. ex)드래그앤드롭 과정을 설명하려면 사용자가 오브젝트를 선택하는 순간의 장면, 오브젝트를 드래깅하는 장면, 오브젝트가 .. 더보기
05_인터랙션 디자인의 도구_스케치와 모델 디자이너는 단어를 이용해서 스케치를 하는 것처럼 이미지를 그려 낼 수도 있다. 종이와 펜이 디자이너에게 가장 좋은 도구인 이유는 공간의 제약이 없고 제일 빠르고 유연하기 때문이다. 다른 형태의 스케치로는 모형제작을 들 수 있다. 스케치와 모델링은 개별 디자인 프로세스에 완결되지만 이후로는 디자인 아이디어와 컨셉이 진행되어 형태를 갖추는 중간 과정을 시각화하는데 가장 큰 도움을 준다. 근본적으로 별다른 형식이 없고 쉽게 고칠수 있어 자유롭다는 큰 장점이 있다. 출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한 더보기
05_인터랙션 디자인의 도구_시나리오 디자인 컨셉을 상상하게 만드는 빠르고 효과적인 방법이다. 시나리오란 글로 쓰는 프로토타입이다. 만들어진 제품/서비스가 어떻게 쓰이게 될까에 대한 이야기다. 이 이야기의 등장인물이 페르소나다. 페르소나는 시나리오를 통해 의미를 갖는다. 각각 다른 페르소나를 이용해 같은 시나리오를 따라가면 최종제품에 어떤 기능이 삽입되어야 할지 자연스럽게 알 수 있다. 거의 모든 제품.서비스에 유효한 일반적인 시나리오는 최초의 경험에 대해 상상하는 것이다. 페르소나가 그제품/서비스를 처음 접했을때 어떤 일이 벌어질까? 그 제품.서비스에서 뭘 해야 하는지, 어떻게 사용해야하는지를 어떻게 알 수 있을까? 그것이 어떤 느낌일까? 모든 페르소나를 통해 최초의 사용 경험을 따라가게 하는 시나리오를 써서 최종 디자인이 각 페르소나에게.. 더보기
05_인터랙션 디자인의 도구_페르소나 그 제품/서비스에 관련될 사람들의 특정 유형을 나열한 것이다. 이를 통해 '사용자들'이 아니라 특정한 한 사람을 위해 디자인한다는 느낌을 갖게된다. 만약 이 설정이 잘못된다면 디자인은 왜곡되고 제대로 된 결과를 내기 어려울것이다. 사용자를 관찰하고 직접 대화를 나눠본 결과로 페르소나를 만들어낸다. 페르소나는 일반적으로 비슷한 목적, 의도, 행동방식을 공유하는 복수 인물의 가상적인 혼합체다. 개별 페르소나는 이들의 심층적인 성격 차이를 드러내야한다. 그들이 뭘하며(프로젝트에 대한 행동) 왜 그걸 하는지(목적과 의도)의 차이말이다. 각 페르소나가 서로 비슷한 배경을 가진 사용자들이면 안 된다. 인구통계학적인 배경의 다양성에만 초점을 맞추면 페르소나 자체가 아니라 시장의 인구 분포만을 보여주게된다. 인물의 배.. 더보기
05_인터랙션 디자인의 도구_리서치 모델 처음 만드는 모델은 리서치에서 얻어진 결과를 시각화한 것이다. 리서치 데이터에서 얻어진 디자인적 함의들을 존중해야한다. 은 인트라넷의 사용자들과 대화를 나누고 얻은 데이터로 만든것이다. 대부분의 기능이 사용되지않고 있으나, 상요자들이 필요하다고 말하는 기능들이 이미 포함되어있다. 이 기능들이 자주 쓰이지 않는 이유 중 하나는 사용자들이 이 기능이 있는지 몰랐기 때문이다. 이 데이터는 정작 잘 알려진 기능을 좋아하지않는다는 사실도 보여준다. 사용자들이 가장 필요로 하는 기능들은 쓰이지 않거나, 알려지 않았거나, 아니면 시스템에 존재하지 않았다. 인트라넷 사용자들의 리서치 결과 이런 정보들은 몰론 길지않은 문장이나 통계 도표로 표현될 수 있지만 모델만큼 강한 임팩트를 주지는 못한다. 모델은 프로젝트가 진행되.. 더보기
05_인터랙션 디자인의 도구_다뤄야 할 도구 소프트웨어를 쓰기전에 먼저 종이나 화이트 보드위에 생각하고 기획할 시간이 있어야 한다. 뭘 디자인 할지 디자인해라 다이어그램 소프트웨어 MS의 비지오나 옴미그래플이 표준이며, 어도비 인디자인도 쓰인다. 드로잉이나 일러스트레이션 소프트웨어 실제로 만들어질 서비스/제품의 현실적인 모습을 그려볼 수 있는 프로그램이다. 스토리보드를 만들거나 프로토타입을 그려보는데도 사용된다. 어도비 일러스트레이터, 포토샵, 코렐드로우 프로토타입 소프트웨어 주로 디지털 제품의 프로토타입을 만드는데 사용된다. 어도비 플래시, 솔리드웍스, 비비에디트, 드림위버... 프리젠테이션 소프트웨어 파워포인트, 키노트, 플래시, 애크로뱃 변환 소프트웨어 애크로뱃 출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사.. 더보기
05_인터랙션 디자인의 도구 프로젝트를 정의하고 이해관계자와 인터뷰도 하고 디자인 리서치도 진행한 후에는 모델, 다이어그램과 문서작업이 이어진다. 디자이너는 모델과 다이어그램을 사용해서 전단계의 디자인 프로세스에서 얻은 지식을 시각화하고 분석하면서 자신들의 기술과 지식, 아이디어를 드러내 보인다. 프로젝트가 잘 진행되기에 충분한양의 문서를 작성해야 한다. 인터랙션 디자이너가 모델과 다이어그램 작업을 하는 유일한 이유는 프로젝트에 대해 지식을 나누고 비전을 공유하기 위함이다. 리서치 모델은 사용자 리서치를 통해 무엇을 얻었는지 보여준다. 가상의 인물 유형을 통해 다른 사람의 이해를 도울 수 있도록 페르소나를 설정한다. 유스케이스와 작업목록은 제품/서비스가 완수해야 할 목표를 명확히 하는 데 이용한다. 무드보드, 시나리오, 스토리보드,.. 더보기
04_디자인 리서치와 브레인스토밍_브레인 스토밍:"여기서 기적이 일어난다면..." 리서치가 끝나고 디자인적인 함의들이 정리되었는데 갑자기 혼란이 닥치는 시기가 있다. 리서치와 인터뷰에서 이미 해결책이 보이기 시작하기도 하지만 어떤 사람에게는 뭘 해야 할지 도무지 단서가 없다. 이럴때 제일 좋은 방법은 일단 문서 작업을 하면서 해결책이 떠오르기를 기다리는 것이다. 해결책이 떠오르면 브레인 스토밍에 집중할 때다. 브레인 스토밍을 할 때 디자이너들은 리서치의 결과물이나 문제점을 정의한 디자인 제안서 같은 문서를 들고, 벽에 붙여뒀던 메모도 모두 모아서 준비한다. 묙표정의서도 당연히 참조용으로 필요하다. 특히 스케치하기 위한 도구가 중요하다. 처음 10분은 워밍업 브레인 스토밍의 시간을 정한다. 보통 한 번에 두시간을 넘지 않게 한다. 이 시간 동안 최대한 많은 아이디어와 그 아이디어의 변형.. 더보기
04_디자인 리서치와 브레인스토밍_디자인적 함의 리서치 데이터는 디자이너가 쓸 수 있는 정보로 정제됐을 때만 유용하다. 디자이너는 데이터들에 형태와 모양을 부여해야한다. 데이터를 디자인해야한다. 처음해야 할 일은 모든 데이터를 어떤 정연한 형태로 정렬하는 것이다. 데이터를 의미 있는 방식으로 모으고 여기에 형태를 부여한 후에야 데이터를 가지고 생각을 해볼 수 있다. 한가지 방법은 데이터의 개념적인 모델을 만드는 것인데 사실 데이터를 어떤 방식으로 늘어 놓더라도 디자이너가 그 데이터 안에 들어 있는 디자인적인 함의를 그려낼수만 있다면 족하다. 디자이너들이 데이터로부터 뽑아낸 어떤 디자인적인 함의는 아주 간단할지도 모른다. 프로세스가 진행됨에 따라 이런 디자인적 함의들은 디자인이 어떻게 되어가는지에 대해서 좋은 점검 항목이 되어준다. 출처 : (에이콘 U.. 더보기
04_디자인 리서치와 브레인스토밍_리서치 방법 크게 관찰, 인터뷰, 활동이라는 세가지 영역으로 나눌 수 있다. 여기서는 대상자들에게 직접 만들게 한 결과물이나 활동 기록이 포함된다. 관찰 모든 리서치 방법 중 가장 쉽고도 제일 효과적인 방법은 사람들이 무얼 하는지 관찰하는 것이다. 구경 : 무슨일이 벌어지는지 눈에 띄지않게 관찰한다. 추적 : 대상자들이 고유한 행동을 하는 것을 따라다닌다. 어떤일이 잇었고 어떤 말들이 오갔는지 녹화하라. 탐문 : 대상자의 활동 장소에 가서 그 행동에 대한 질문을 던진다. 잠입 : 사람들에게 알리지 않고 직접 인터랙션하면서 벌어지는 일을 관찰한다. 소비자인척 하고 서비스를 직접 이용해볼 수 있다. 관찰을 하려면 눈에 띄지 않는 차림을 한다. 카메라폰은 공공장소에서 눈에 띄지 않고 사진을 찍는데 아주 유용하다. 하지만 .. 더보기

티스토리툴바