오래가는 UX 디자인 [웹/앱 프로젝트 과정]

오래가는 UX 디자인ㅣ한빛미디어

도서 [오래가는 UX 디자인], 한빛미디어 에서는 사용자 경험 UX (User Experience)에 대해서 명확하게 설명해주고있다. UX에 대해 깊고 자세하게 알기 유용한 책이다. 

웹/앱 프로젝트 과정

구상 > 기획 > 사용자 리서치 > 프로토타이핑 > UI개발 > 백엔드 개발 > 사용성 테스트 > 품질관리

기획 

구상한 아이디어나 정보를 바탕으로 그 정보를 체계적으로 전달하는 정보 구조를 만들고 사용자와 제품의 인터랙션 방식을 설계하며 콘텐츠 작성을 담당한다. 웹 기획팀이최근에는 웹과 모바일 애플리케이션 등을 함께 고민하므로 UI기획팀 등으로 바뀌는 추세다. 

기획의 중요성

기획에서 설계가 무너지면 프로젝트 전반이 흔들린다. 기능하나를 추가하더라도 신중해야한다.

예를들어, 체크박스 기능하나를 추가한다고 가정해보자.

체크박스가 1개인 경우 2가지의 경우의 수를 갖는다. -> 2번의 테스트 필요

체크박스가 2개인 경우 4가지의 경우의 수를 갖는다. -> 4번의 테스트 필요

.......

체크박스가 50개인 경우 천조가지의 경우의 수를 갖는다. -> 인간이 가늠하기 힘든 숫자

*예시 출처: 생활코딩 웹서버 만들기 수업

사용자 리서치 

사람을 직간접적으로 만나서 의견을 듣는 설문조사, 인터뷰 같은 기법과 함께 그들이 실제 어떻게 행동하고 무슨 선택하는지 조사한다. 

왜 반드시 리서치를 해야 하는가. 리서치는 고객의 삶 속을 파고드는 통찰력을 제시하고 고객에 대한 공감을 개발하도록 함으로써 디자인 작업을 증대시켜준다. -사용자 경험에 미쳐라 81P 

 리서치를 수행하는 부서는 대부분 조직 내에서 디자인과 개발 프로세스에서 물리적으로 또는 조직적으로 분리되어 있다. 다시 말해 리서치에서 얻은 통찰력이 리서치 그룹 안에 갇혀있다는 뜻이다. 리서치를 수행하는 사람들을 제외한 조직 내의 나머지 사람들은 고객에 대한 진정한 공감을 개발할 기회를 갖기 어렵다. 대부분의 리서치 팀은 외부에서 전달된 한 다발의 요구사항을 받고 이에 맞춰서 리서치를 수행한 후, 그 결과를 보고서와 프레젠테이션 형태로 전달한다. 디자이너나 개발자, 관리자들은 보고서를 한번 읽어보고 서랍 안에 던져버리거나 파일을 컴퓨터 폴더에 넣어 둔다. 이것은 흔히 범하는 실수이다.-사용자 경험에 미쳐라 

-89P 

프로토타이핑

프로토타입이란 한국말로 '원형'이란 뜻으로, 실제 제품을 만들기 전에 시험 삼아 혹은 특정한 기술 및 제품의 이해를 위해 재빠르게 만들어보는것이다. 종이 프로토타입을 만들어 사람들이 제품을 쉽게 이해하고 사용할 수 있을지 파악한 다음, 구체적인 고수준 프로토타입을 만들어 사용성 테스트를 진행할 수 있다. 그리고 동작 프로토타입을 만들어 사람들의 제품 사용 방식을 확인하는 사용성 테스트를 진행하고 제품 작동 방식을 최적화한다.   

UI 개발

최근에는 웹 화면을 만들고 웹 표준을 지키면서 보편적 접근성 및 HTML5의 특화된 기능까지 고려해야하는 등, UI개발에 점점 많은 노력과 전문성이 요구되고있다. 그래서 이런 눈에 보이는 UI개발 단계의 업무를 전문적으로 수행하는 조직이 생겨났는데 그 조직이 UI개발 조직이다. 눈에 보이는 화면 요소의 동작을 설계하고 구현하므로 시각 디자인과 개발의 중간적인 업무 영역에 속한다. 

백엔드 개발

눈에 보이는 요소를 만드는 것이 UI개발이라면, 겉으로 보이지 않지만 UI에서 입력받은 결과를 처리하는 백엔드 개발로 나누는 편이다. 이때 UI개발을 좀 더 크게 나눠 UI구현ㅣ을 포함한 앞단의 사용자 서비스 개발을 프론트엔드 개발이라고 하고 뒷단의 서버 쪽 개발을 백엔드 개발이라고 구분하기도 한다. UI개발 업무 중에 HTML과 CSS코딩을 맡아서 하고 웹 표준, 웹 접근성에 관한 전문 지식이 있는 담당자를 특별히 웹 퍼블리셔라고 부르기도 한다. 

품질관리

소프트웨어 화사의 품질관리 조직에서는 제품의 기능이 제대로 동작하는지 확인한다. 보통 QA팀, 품질관리팀, 테스트팀이라고 불리는 팀에서 이런 역할을 한다. 개발팀과 기획팀에서 테스트 업무를 나눠서 맡기도 한다. 

와이어 프레임(Wire Frame) / 스토리보드 (Storyboard) 구분하기 

와이어 프레임(Wire Frame)은 스토리보드의 이전 단계.서비스 레이아웃을 구상해보는 단계로, 손으로 그리거나 ppt로 간단하게 그린 그림이다.

스토리보드무료 툴 : oven https://ovenapp.io/

스토리보드(Storyboard)는 원래 의미는 영화, 애니메이션 등의 영상매체를 미리 그려볼 수 있도록 일러스트나 사진을 나열한 형태로 시각적으로 정리한 것이나 웹기획에서의 스토리보드는 IA와 요건정의서를 기준으로 실제로 사용자가 보게 될 화면을 설계하는 것이다. 비슷한 용어로는 UI설계서, 화면설계서, 화면구성안 등이 있다. 

스토리보드유료 툴 : axure http://www.axure.com/

출처: 도서 [오래가는 UX 디자인], 한빛미디어