UI/UX 디자인 방법을 활용, 소프트웨어 개발 과정에서 사용성을 검토하고 사용자 중심으로 개선할 수 있는 가이드가 발간되었습니다.
이 책은 2013년 산업통상자원부 시스템반도체 융합경쟁력 강화사업 중 UI/UX기술자산 제공 기반구축의 일환으로, 정보통신산업진흥원 소프트웨어공학센터와 한국디자인진흥원의 협업으로 제작되었습니다.
역량 있는 소프트웨어 기업의 UI/UX 디자인 활용과 디자인방법을 통한 사용자중심의 소프트웨어 개발 지원, 소프트웨어산업의 활성화를 위한 기반조성을 목적으로 가이드북 제작, 웹 가이드 게시, UI/UX디자인 컨설팅 등이 진행되었습니다.
이 책은 소프트웨어 기획·개발 전문가들이 개발이나 개선 과정에서 UX, UI 개발 방법을 적용해 보고, 사용자 관점에서 편리하게 설계되었는지 각 단계에서 확인할 수 있는 방법을 소개하고 있습니다. 소프트웨어 개발에 관한 UI/UX에 한정된 것으로서 부족하나마 국내 소프트웨어기업들이 보다 다양한 디자인 방법의 활용을 통해 사용자 중심으로 개발하는데 쓰임이 될 수 있기를 바랍니다.
감사합니다.
*소프트웨어 자산뱅크(http://swbank.kr) 및 디자인포털 디자인디비(www.designdb.com) 에서 무료로 파일을 다운받을 수 있습니다.
소프트웨어 공학센터의 품질기준에 근거한 최소한의 UI/UX/GUI/UT 지식을 이해할 수 있습니다.
소프트웨어 개발 또는 개선 시에 단계별로 간단히 사용성을 테스트해 볼 수 있는 방법을 알 수 있습니다.
◇ 목차
Part I 소프트웨어 개발 UI/UX 참조모델 소개
1. UI & UX ?
2. 소프트웨어 개발 UI/UX 참조모델 제작배경
3. 소프트웨어 개발 UI/UX 참조모델 & 가이드 소개
Part II 소프트웨어 개발 UI/UX 참조모델 가이드
1. 목표정의
2. 프로젝트 계획
3. 요구사항 정의
4. 설계 및 구현
5. 테스트
6. 배포 및 관리
Appendix
용어 소개
Reference
방법론
참고서식
◇ 기획
미래창조과학부
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행처
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행연월
2013.12
◇ 참고링크 : SW자산뱅크 UI/UX 체험하기 바로가기 http://swbank.kr
◇ 문의처 : 한국디자인진흥원 서비스디지털융합팀 031)780-2263
UI/UX 디자인 방법을 활용, 소프트웨어 개발 과정에서 사용성을 검토하고 사용자 중심으로 개선할 수 있는 가이드가 발간되었습니다.
이 책은 2013년 산업통상자원부 시스템반도체 융합경쟁력 강화사업 중 UI/UX기술자산 제공 기반구축의 일환으로, 정보통신산업진흥원 소프트웨어공학센터와 한국디자인진흥원의 협업으로 제작되었습니다.
역량 있는 소프트웨어 기업의 UI/UX 디자인 활용과 디자인방법을 통한 사용자중심의 소프트웨어 개발 지원, 소프트웨어산업의 활성화를 위한 기반조성을 목적으로 가이드북 제작, 웹 가이드 게시, UI/UX디자인 컨설팅 등이 진행되었습니다.
이 책은 소프트웨어 기획·개발 전문가들이 개발이나 개선 과정에서 UX, UI 개발 방법을 적용해 보고, 사용자 관점에서 편리하게 설계되었는지 각 단계에서 확인할 수 있는 방법을 소개하고 있습니다. 소프트웨어 개발에 관한 UI/UX에 한정된 것으로서 부족하나마 국내 소프트웨어기업들이 보다 다양한 디자인 방법의 활용을 통해 사용자 중심으로 개발하는데 쓰임이 될 수 있기를 바랍니다.
감사합니다.
*소프트웨어 자산뱅크(http://swbank.kr) 및 디자인포털 디자인디비(www.designdb.com) 에서 무료로 파일을 다운받을 수 있습니다.
소프트웨어 공학센터의 품질기준에 근거한 최소한의 UI/UX/GUI/UT 지식을 이해할 수 있습니다.
소프트웨어 개발 또는 개선 시에 단계별로 간단히 사용성을 테스트해 볼 수 있는 방법을 알 수 있습니다.
◇ 목차
Part I 소프트웨어 개발 UI/UX 참조모델 소개
1. UI & UX ?
2. 소프트웨어 개발 UI/UX 참조모델 제작배경
3. 소프트웨어 개발 UI/UX 참조모델 & 가이드 소개
Part II 소프트웨어 개발 UI/UX 참조모델 가이드
1. 목표정의
2. 프로젝트 계획
3. 요구사항 정의
4. 설계 및 구현
5. 테스트
6. 배포 및 관리
Appendix
용어 소개
Reference
방법론
참고서식
◇ 기획
미래창조과학부
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행처
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행연월
2013.12
◇ 참고링크 : SW자산뱅크 UI/UX 체험하기 바로가기 http://swbank.kr
◇ 문의처 : 한국디자인진흥원 서비스디지털융합팀 031)780-2263
UX가 무엇인지, UX를 디자인 한다는 건 어떤 일인지, 좋은 UX란 무엇인지에 대해 경험을 바탕으로 풀어본 이야기입니다.
Slideshare에 업로드 되어 있는 비슷한 주제의 자료들 대부분이, 화면을 꽉 채우는 이미지만 덕지덕지 붙어 있거나, 도대체 어떻게 전개되는 이야기인지도 알 수 없게 키워드만 툭툭 던지는 방식이라서 조금 답답하더라구요.
그래서 제맘대로 만들어 봤어요. ㅋ
(얼마를 상상하시든 그것보다 더) 짧은 기간동안 파바박 만든 자료라서.. 조금은 아쉬운 부분도 있지만, 이 자료가 어느 누군가에게는 도움이 되길 바라는 마음에서 올려봅니다.
* 구글의 Noto Sans Korean 폰트를 주로 썼는데, 슬라이드쉐어의 작은 뷰로 보기에는 가독성이 좋지 않아서 맑은 고딕으로 바꿨습니다.
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안(주)SNC Lab.
데이터 기반 UX평가를 통한 반응형웹 디자인 개선 방안 사례 발표자료입니다. (An improvement guidelines of responsive web design through data-based UX evaluation)
많은 연구를 통해 웹사이트에서 사용성의 중요성이 강조되고 있지만 실제 웹사이트 개발 프로세스에서 사용성에 대한 고려가 충분히 이뤄지기는 쉽지 않다. 사용성에 대한 고려는 기획단계부터 개발 및 완성 단계까지 전 과정에 걸쳐 진행되어야 하는데 사용성에 대한 고려 없이 제작된 웹사이트는 사용상의 문제점이 발견되고 유지보수를 어렵게 만든다. 이를 위한 사용성 평가는 웹사이트가 본연의 목적에 적합하게 제작되었는지 실제 사용자를 대상으로 평가, 분석하는 방법으로 웹사이트에서 사용자 경험을 측정하는데 주안점을 두고 있다.
웹사이트의 사용성을 높이기 위해 전문가 평가 및 사용성 평가를 수행하여 제작팀에 개선가이드라인을 제시할 수 있지만 사용성 평가는 사용자의 반응과 만족도를 평가하기 위해 수행하는 방법들이 피실험자의 주관적인 의견에 의해 측정 오류 및 편견(biases)이 발생하는 문제점을 가지고 있다. 또한 정성적인 평가를 보완하기 위해 분석 솔루션을 활용한 평가방법도 사용되지만 솔루션에 의한 분석 방법은 상세한 원인을 파악하기 힘든 경우가 있어 실제 웹사이트 제작 시 사용성 평가를 통해 객관적인 결과를 획득하려면 시간과 비용이 많이 소요되어 웹사이트에서 사용성에 대한 고려는 매우 제한적으로 활용되고 있다.
이번 Case Study에서는 국내 공공기관 및 민간기업의 실제 프로젝트 사례를 기준으로, 데이터 기반 평가를 통해 기존의 정성적인 평가 결과를 객관적인 데이터로 보완하고 웹사이트에서 빠른 시간 내에 적용할 수 있는 웹사이트 사용성 평가 방법을 제시하고자 한다.
UX의 사전적 정의를 통한 UX의 의미와 UX 디자인에 대한 이야기, 그리고 프로세스에 대한 이야기를 정리해보았습니다. :)
(2014년년 7월, 내부 발표자료)
[Content]
USER EXPERIENCE
Definition (value)
UI & UX
Value & Context
UX Process
UCD
GDD
Lean UX
Agile UX
Summary
UX 리서치 시 사용자를 정의하고 모델링하는 3가지 방식
How to define your user when you want to make user centered design product & service..
Conceptual Model, Persona, Mental Model
UX가 무엇인지, UX를 디자인 한다는 건 어떤 일인지, 좋은 UX란 무엇인지에 대해 경험을 바탕으로 풀어본 이야기입니다.
Slideshare에 업로드 되어 있는 비슷한 주제의 자료들 대부분이, 화면을 꽉 채우는 이미지만 덕지덕지 붙어 있거나, 도대체 어떻게 전개되는 이야기인지도 알 수 없게 키워드만 툭툭 던지는 방식이라서 조금 답답하더라구요.
그래서 제맘대로 만들어 봤어요. ㅋ
(얼마를 상상하시든 그것보다 더) 짧은 기간동안 파바박 만든 자료라서.. 조금은 아쉬운 부분도 있지만, 이 자료가 어느 누군가에게는 도움이 되길 바라는 마음에서 올려봅니다.
* 구글의 Noto Sans Korean 폰트를 주로 썼는데, 슬라이드쉐어의 작은 뷰로 보기에는 가독성이 좋지 않아서 맑은 고딕으로 바꿨습니다.
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안(주)SNC Lab.
데이터 기반 UX평가를 통한 반응형웹 디자인 개선 방안 사례 발표자료입니다. (An improvement guidelines of responsive web design through data-based UX evaluation)
많은 연구를 통해 웹사이트에서 사용성의 중요성이 강조되고 있지만 실제 웹사이트 개발 프로세스에서 사용성에 대한 고려가 충분히 이뤄지기는 쉽지 않다. 사용성에 대한 고려는 기획단계부터 개발 및 완성 단계까지 전 과정에 걸쳐 진행되어야 하는데 사용성에 대한 고려 없이 제작된 웹사이트는 사용상의 문제점이 발견되고 유지보수를 어렵게 만든다. 이를 위한 사용성 평가는 웹사이트가 본연의 목적에 적합하게 제작되었는지 실제 사용자를 대상으로 평가, 분석하는 방법으로 웹사이트에서 사용자 경험을 측정하는데 주안점을 두고 있다.
웹사이트의 사용성을 높이기 위해 전문가 평가 및 사용성 평가를 수행하여 제작팀에 개선가이드라인을 제시할 수 있지만 사용성 평가는 사용자의 반응과 만족도를 평가하기 위해 수행하는 방법들이 피실험자의 주관적인 의견에 의해 측정 오류 및 편견(biases)이 발생하는 문제점을 가지고 있다. 또한 정성적인 평가를 보완하기 위해 분석 솔루션을 활용한 평가방법도 사용되지만 솔루션에 의한 분석 방법은 상세한 원인을 파악하기 힘든 경우가 있어 실제 웹사이트 제작 시 사용성 평가를 통해 객관적인 결과를 획득하려면 시간과 비용이 많이 소요되어 웹사이트에서 사용성에 대한 고려는 매우 제한적으로 활용되고 있다.
이번 Case Study에서는 국내 공공기관 및 민간기업의 실제 프로젝트 사례를 기준으로, 데이터 기반 평가를 통해 기존의 정성적인 평가 결과를 객관적인 데이터로 보완하고 웹사이트에서 빠른 시간 내에 적용할 수 있는 웹사이트 사용성 평가 방법을 제시하고자 한다.
UX의 사전적 정의를 통한 UX의 의미와 UX 디자인에 대한 이야기, 그리고 프로세스에 대한 이야기를 정리해보았습니다. :)
(2014년년 7월, 내부 발표자료)
[Content]
USER EXPERIENCE
Definition (value)
UI & UX
Value & Context
UX Process
UCD
GDD
Lean UX
Agile UX
Summary
UX 리서치 시 사용자를 정의하고 모델링하는 3가지 방식
How to define your user when you want to make user centered design product & service..
Conceptual Model, Persona, Mental Model
[ITOnAir] 데브멘토 동영상, 정선경 아주대교육연구소 연구위원 2/2부_성공하는 모바일 서비스를 위한 실전 강연
UX 패턴의 구성요소와 영역모바일 App의 Task & FlowUI Design 구성 요소UI & UX Map본 영상은 데브멘토 ITOnAir (tv.devmento.co.kr) 또는 다음tv팟(tvpot.daum.net/pot/Itonair)을 통해 웹과 모바일로 시청하실 수 있습니다.
[ITOnAir] 데브멘토 동영상, 정선경 아주대교육연구소 연구위원 1/2부_성공하는 모바일 서비스를 위한 실전 강연
UX Pattern Design의 정의Persona?UX 패턴의 구성요소와 영역본 영상은 데브멘토 ITOnAir (tv.devmento.co.kr) 또는 다음tv팟(tvpot.daum.net/pot/Itonair)을 통해 웹과 모바일로 시청하실 수 있습니다.
6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
UX 프로젝트를 시작하는 분들을 위해 UX 디자인과 프로젝트방법론에 대한 A부터 Z까지를 간결한 질문들을 중심으로 모두 정리했습니다. (PDF 다운로드 가능)
1. UX 디자인이란?
• UX 디자인은 한 마디로 무엇인가?
• UX 디자인에서 하는 일은?
• UX 디자인이 왜 필요한가?
• UX 디자인의 핵심은?
• UXer들이 알고자 하는 사용자 경험이란 무엇인가?
• UX 디자이너들은 누구인가?
2. UX프로젝트란?
• UX 프로젝트는 무엇이 다른가?
• 왜 UX 프로젝트를 해야 하는가?
• 우리 분야에 대한 경험이 부족한 UXer에게 프로젝트를 맡겨도 되는가?
• UX 프로젝트를 했다가 실패한 경험이 있다. 무엇이 잘못된 건가?
• UX 프로젝트의 일반적인 일정
• UX 프로젝트 계획 시 염두에 두어야 할 5가지
• 컨설팅 업체가 UX 프로젝트를 진행할 때 우리의 역할은 무엇인가?
• 컨설팅 업체가 요구하는 자료가 많은데, 모두 공개해도 되는가?
• 진행중인 UX 프로젝트를 공개하면 어떤 장점이 있는가?
3. 필드리서치
• UXer들은 왜 필드리서치를 하는가?
• 필드리서치와 마케팅 리서치의 차이점은?
• 필드리서치는 누구를, 몇 명이나 대상으로 해야 하나?
• 필드리서치를 할 때, 주의해야 할 사항은?
• 필드리서치 결과를 가지고 바로 디자인하면 안 되는가?
4. UX 모델링
• UX 프로젝트에서 모델링이란 작업을 굳이 해야 하는가?
• 필드리서치 결과를 가지고 가장 빠르게 인사이트를 도출할 수 있는 방법은?
• Persona가 기존의 마케팅 시장세분화와 다른 점은?
• Persona를 통해서 얻을 수 있는 기대효과는?
• 선행연구 프로젝트에 가장 적합한 UX 모델링 방법은?
• Journey Map은 언제나 유효한가?
5. UX 전략
• UX 모델링을 통해서 얻어야 할 최종 결과는?
• UX 프로젝트에서 이야기하는 전략이란?
• UX에서 가치가 중요한 이유는?
• UX 프로젝트에서 얘기하는 가치의 구체적인 구분은?
• UXer들은 새로운 사용자경험을 어떻게 디자인하는가?
• UX 프로젝트에서 사용자 시나리오가 중요한 이유는?
• 사용자 시나리오는 어떻게 활용되는가?
6. 프로토타이핑
• UX 프로젝트에서의 프로토타이핑은 무엇인가?
• 구현충실도(fidelity)를 꼭 낮은 것에서부터 시작해야 하는가?
• 프로토타입 작업 시 사용성 테스트를 거치는 이유는?
• 테스트는 누구를 대상으로 하는 것이 좋은가?
• 테스트는 몇 명이나 하는 것이 좋은가?
• UX 프로젝트에서 이야기하는 테스트 방법에는 어떤 것들이 있나?
비주얼로 풀어보는 사용자경험 디자인 요약본 입니다.
2014년 8월 16일 공간더하기에서 진행한 사용자 경험 강의 내용 일부 입니다.
전체 자료는 170페이지 정도 되나 여기에선 간단하게 어떤 내용인지 알 수 있도록 요약본으로 정리했습니다.
본 요약본은 비주얼 기반으로 이해하기 쉽게 구성되어 있어 사용자 경험을 누구보다도 쉽게 받아 들이고 이해하실 수 있습니다.
디자이너 마케터 기획자 스타트업 종사자들 분께 많은 도움이 되시리라 봅니다.
궁금하신 분은 ultra0034@gmail.com / 010-9190-7792 로 연락주시면 좋겠습니다.
플루토미디어 주최 "UX 월드 2017" 강연자료.
1. 프로토타이핑을 하는 이유
- 인터랙션 디자인
- Lean UX 프로세스
- 프로토타이핑 프로세스와 기대효과
2. 프로토타입 툴의 트랜드
- 프로토타입 툴의 종류
- 프로토타입 툴의 선택 기준
- 프로토타입 제작 원칙
3. 카카오 UX팀의 프로토타입 제작 사례
- Piccoma : 카카오재팬. 신규 서비스 프로토타입.
- ZERO+ : 인터랙션 라이브러리(인하우스용).
- IX Watch : 아이디어 발산을 위한 컨셉 스마트워치.
1. 누구나 UX를 이야기하는 시대가 되었지만, 정작 UX라는 말은 새로운 간판에 불과한 경우가 허다합니다.
웹디자인부서나 기획부서가 UX라고 간판만 바꿀 뿐 실제 하는 일은 달라지지 않는 것이죠.
UX 전문가라고 자칭하는 사람이 알고보니 UX와 사용성(Usability)의 구분조차 못하는 경우도 흔합니다. 자
신이 모바일 앱을 디자인하고 있다고 해서 UX Design을 했다고 하는 사람들도 많습니다. 거듭 말씀드리지
만 UX Design은 방법론입니다. 특정 대상을 지칭하는 용어가 아닙니다. UX Design이라는 방법론을 쓸 줄
알아야지만 UX 전문가라고 할 수 있습니다.
User experience는 제품/서비스의 구성요소 또는 디자인 같은 레이어가 아닙니다. UX는 전체 시스템과 그
들의 상호 연관성에 대한 것이라고 보는 게 맞습니다“
UX는 제품이나 서비스의 레이어나 요소를 의미하는 것이 아니다.
UX는 전적으로 시스템내 상호 접속을 포함한 시스템 전체에 관한 것이다
- Andrew Hinton, Senior information architect at Vanguard
“User experience design은 체크박스나 디자인하는 일이 아닙니다. 여러분들이 하는 모든 것들을 통합하는
것이죠"
- Liz Danzico, Chair, MFA in Interaction Design School of Visual Arts in NYC
“User experience design은 컴퓨터에만 국한된 게 아닙니다. 화면조차 필요없는 경우도 많이 있습니다.
User experience는 어떤 제품이나 시스템, 서비스들에도 적용될 수 있죠"
- Bill DeRouchey, Director of interaction design at Ziba Design
User eXperience는 단지 사용자에 관한 것이 아니다.
우리는 항상 무엇이 사용자에게 최선인가를 고민할 수 만은 없다.
우리는 비즈니스의 목적에 대해 고민할 수 밖에 없고, 우리는 그것을 설계해야 한다. ”
Russ Unger Director of Experience Planning, Draft FCB
2. 먼저 UI, UX 디자인을 배제하고 UI, UX 용어 자체 정의에 대해서는 큰 의견차가 없습니다. 우선 위키피디아의 정의
는 다음과 같이 되어 있습니다.
The user interface, in the industrial design field of human?machine interaction, is the space where interaction
between humans and machines occurs.
User experience (UX) is the way a person feels about using a product, system or service.
UI와 UX는 다른 개념입니다. 정의도 분명합니다.
1. UI 디자인은(User Interface)의 약어로 기술적인 표현이라고 할 수 있습니다. UI 디자인이란 말 그대로 '유저
인터페이스' 사용자 위주의 인터페이스를 말합니다. 인터페이스를 만드는 디자인 기술 자체와 실현해서 사용하
는 실물을 말하는 것입니다. 웹디자인에서 UI는 보통 그래픽 사용자 인터페이스(GUI)라고 하는데 사용자가 어
떤 프로그램을 사용할 때 메뉴나 버튼 기타 입력창들을 사용자가 사용하기 쉽게 디자인하는 걸 말합니다. 즉
사용자가 프로그램을 이용해서 컴퓨터에 내용을 입력하고 작업을 수행할 때 쉽게 눈과 손이 움직일 수 있도록
메뉴나 버튼을 배치하고 디자인하는 작업을 말합니다.
* 인터페이스(interface)는 말 그대로 inter(사이의, 상호간의)와 face(얼굴, 표면, 겉면)의 합성어로 두 시스템이나 객
체의 사이나 경계의 접점 혹은 어느 중간 사이에서 맞대고 있는 부분을 의미한다. 인터페이스는 컴퓨터 용어에서 많
이 등장하는데 대표적인 것이 사용자 인터페이스(User Interface, UI)다. 사용자 인터페이스란 사용자와 컴퓨터 사이
에서 일어나는 상호작용을 매개하는 것을 말한다
2. UX 디자인은(User experience)의 약어로 사용자가 디자인된 제품과 서비스, 그리고 그것을 제공하는 회사와 상
호작용하면서 경험하게 되는 모든 경험의 총합을 의미합니다. 모범적인 사용자 경험을 만드는 가장 중요한 조건은
고객의 요구를 정확하게 만족하게 하는 것이며, 다만 어떤 경우에도 고객을 혼란스럽게 만들거나 귀찮게 해서는 안
됩니다. 다음으로 중요한 것은 단순함과 우아함인데 이 특징들은 사람들이 제품을 가지고 싶고, 사용하고 싶게 만듭
니다.
정리하면...
사용자 경험이라는 총체적인 관점으로 콘셉트를 잡고 개발 방향을 정하고 감독하는 작업을 UX 디자인이라고 할 수
있고 그것을 구현하는 제작단계에서 사용자에게 맞는 최적화를 시켜주는 디자인 행위를 UI 디자인이라고 할수있습
니다.
3.
4. What is UX (2/3)
※ The spectrum of User Experience v0.5 by Information Architects, Inc.< User Experience 범주>
“Technology”
“Business” “Design”
서비스, 상품, 프로세스, 사회와 문화까지 응용되고 있음컴퓨터 인터랙션 연구에서 출발
• 1974, 에드워드(E.C.Edwards)와 카시크(D.J.Kasik)의 “사이버
그래픽터미널에서의 사용자 경험(User Experience With the CYBER
Graphics Terminal Proceedings of VIM-21)에서 용어가 언급됨
• 1970-80년대, 인간중심의 디자인(Human Centered Design, UCD)의
맥락에서 인간과 기계간의 상호교감에서 긍정적 경험의 가치를
창출하고자 수많은 연구가 이루어짐
• 1998, 조셉 파인(B, Joseph Pie II)과 제임스 길모어(James Gilmore)는
경험경제로의 초대(Welcome to the Experience Economy) 기사를 하버드
비즈니스 저널에 발표/1999년 저서를 발표해 경제, 경영계에
사용자 경험에 대한 관심을 불러일으킴
농업경제에서 산업경제로 각 단계의 발전을 이루는 동안 상대적으로
우수한 조건의 제품으로 차별화시키기 위해 선도기업들은 자신들의 제품
서비스의 독특한 경험을 만들어 내었다고 주장
(월트디즈니사의 일관된 테마를 통해 오감을 통한 경험과 기억강화)
• 1970, 앨빈 토플러는 미래쇼크에서 언급한 경험산업 개념을
통해 디자인, 영화, 레크레이션, 컴퓨터, 예술, 미술 전문가들의
경험설계 역량을 기업행위 전반에 사용하게 될 것이라고 예측
5. What is UX (3/3)
※ The User Experience Honeycomb by Peter Morville, Semantic Studios
유용한
useful
가치있는
valuable
credible
접근 가능한
accessible
매력적인
desirable
발견 가능한
findable
usable
신뢰할 수 있는
사용하기 쉬운
< 7가지 User Experience 구성요소 >
• 유용한 (useful) : 좀 더 유용하고 혁신적인 솔루션을 만들기 위해
기술과 매체에 대한 지식을 창의적으로 적용해야 함
• 매력적인 (desirable) : 효율성의 추구와 더불어 이미지, 아이덴티티,
브랜드, 기타 감성적 디자인 요소들의 강렬함이나 가치도 중요함으로 적절
한 조율이 필요
• 접근 가능한 (accessible) : 건물에 엘리베이터와 휠체어용 경사로
가 공존하듯 장애가 있는 사람들까지도 접근 가능하도록 만들어야 함
• 신뢰할 수 있는 (credible) : 사용자의 신뢰도에 영향을 미치는
디자인적 요소를 적절히 사용하여 완성도를 높여야 함
• 발견 가능한 (findable) : 사용자들이 필요로 하는 것을 찾을 수
있도록, 내비게이션, 개체의 위치 파악이 가능하게 만들어야 함
• 사용하기 쉬운 (usable) : 다양한 환경, 제약조건을 가지고 있는
사용자들도 사용하기 용이하도록 만들어야 함
• 가치 있는 (valuable) : 광고주, 사이트 목표 등 사용자를 포함한
다양한 이해관계자에게도 가치를 전달해야 함
6.
7. UX
User Experience Interaction Interface
목표(GOAL) 행동(Activity) 도구(Tool)
사용자와 접하는 시간Long Short
Content
Community (Customer)
Communication
Company (Corporation)
Connectivity
Credibility
Culture
Coherence (일관성)
Syncronization (일치)
Screen Sharing (화면공유/분할)
Device Shifting (디바이스간 이동성)
Complementarity (상보성)
Simultaneity (동보성)
PUI Key Mapping
Touch UI Method
Screen Layout
Input Methods
Widget
General Rules
Notifications
8. □ 출처 / SW 사용성 개선을 위한 평가 모델 및 방법론에 관한 연구 - 한국 소프트웨어 진흥원 2005
사용자 품질 요구에 부응하는 S/W는 사용성에 달려있다
사용자의 품질 요구에 부응하는 소프트웨어 개발을 위해서
소프트웨어 제품의 사용성이 향상되어야 한다
디자인으로 경영을 혁신하라
디자인을 기업 가치사슬에 녹여라
상품에 즐거운 ‘체험의 옷’을 입혀라
□ 출처 / Dong-A Harvard Business Review : 삼성경제연구소 / LG전자 디자인경영센터 / KAIST - 2008 JUN Vol.11
9. 3.1.3. UX 프로토타입– 부가 설명
[프로젝트 산출물간의 관계]
UXB 전문가가 PI단계에 제공하는 UX 프로토타입 산출물은 설계 단계 이후, 프로젝트 현업의 사용자 중심 업무정의에 새로운
관점을 지원하며, 이 개념은 SI의 모델러, 디자이너, UI개발자의 산출물에 영향을 주게 됩니다.
핵심 업무 UX프로토타입 작성
분석 단계 설계 단계
UXB
UXB 대상 핵심 업무
차세대 시스템 전체 범위
프로젝트 현업
핵심 업무 UX프로토타입 정의
화면 작성 UX 멘토링
UXB
프로젝트 현업
전체 범위 화면 및 기능 정의
SI 모델러
전체 범위 화면 정의서 작성
- 화면 구성 모습
- Input/Output
- Event
차세대 시스템 전체 범위
화면 유형별 Sample
디자이너
UI 개발자
활용
UI 표준 / 디자인 가이드 작성
UI 개발 표준 작성 / UI 개발
개발 단계
- 업무규칙
- 화면속성
- Validation 로직
개발자
프로젝트 현업 SI 모델러
시스템 개발
시스템 Test
활용
표준준수
차세대 시스템 전체 범위
코딩화면
제공
- 화면 구성 모습
- 주요기능/동작방식 정의
10. 프로젝트 현업 역량강화 지원
현업은 화면 설계시 화면 설계를 프로세스/사용자와 연계를 하는 방법을 알지 못하며, 프로젝트의 여러
상황에 의해 화면 설계 우선순위를 낮추게 되어 AS-IS의 모습 그대로 화면을 구축하게될 가능성이 높습
니다. 이를 방지하고 사용자 중심의 화면 설계가 될 수 있도록 업무 당담자를 위한 UX 멘토링이 필요합
니다.
<프로세스>
<화면>
어떻게
구성하지?
[현업]
연속성 관리 부재
현업을 위한
“UX 멘토링”
필요
‘프로세스-화면’의 연관성이 없다고 생각
사용자 고려 부재
IT 관점으로 기능 단위의 화면 개발
운영관리조직에 따른 메뉴 구성
예쁘기만 하면 사용자가 만족할
것이라 착각
강한 현상유지 성향
현재 사용에 익숙한 화면에서 벗어나지 못함
화면의 중요성 인지 약함
중요하지 않으므로 마지막에 진행하면 된다고 생각
새로운 기술 파악 어려움
새로운 UI 기술을 알지 못해 적용하기 힘듦
11. 3.3.1. 진행방안
현업이 고민하고 있는 업무를 사용자 관점으로 ‘프로세스-사용자-화면’을 재정의 할 수 있도록 UX 멘토링
을 진행합니다. UX 전문가와 현업이 함께 고민하고 해결방안을 토론하며 찾아가는 과정을 통해, 현업 스스
로 동부화재 차세대 시스템 사용자중심의 화면을 구성할 수 있는 능력을 키우게 됩니다.
현업을 위한 UX 멘토링
화면 스케치
(진행산출물)
업무성격에 따른
화면 유형화
산출물
[TO-BE Usage Process]
[현업]
매일 같은 업무만 하니까
이렇게 생각해본 적이 없는데…
‘새로운 시각’을
가지게 된 것 같아요!
1 사용자 그룹별로 프로세스 분리
2 사용자 그룹별 업무수행 시점
분리
3 사용 행태 반영
4 새로운 기술 적용
[UX 전문가]
[화면]
12. 3.3.2. 선행 프로젝트 예시
TO-BE 프로세스를 통해 화면을 구성할 경우 사용자 관점으로 구성하기 어려우므로, ‘프로세스 – 사용자 –
화면 ‘ 재정의를 통해서 사용자 그룹 업무 특성에 적합한 화면 도출 및 구성을 진행하였습니다.
현업을 위한 UX 멘토링
13. 높은 수준의 시스템 UI 위한 가이드 – 예시
UI QA를 위해서 ‘IT 담당자 - 디자이너(SI) – UXB 전문가(PMO)’의 co-Work으로 IT여러 단계의 Task를 진행
합니다. 이를 통해서 모든 업무영역을 고려한 UI 표준 수립 및 적용이 가능하게 됩니다.
UI Study
TASK
1.
시스템 구성에 대
한 TFT 팀원 공유
/ 필요 기능 수집
2.
화면 CRUD
3.
UI 표준
4.
UI 표준 교육 및
Q&A
5.
화면 검수 방안
…
차세대 시스템 구성
전략 설명
진행 준비
(대상자 모집,
시간 선정)
/ 진행
진행 준비
(대상자 모집,
시간 선정)
/진행
UI Q&A 지원 - …
차세대 시스템
구현 모습 정리
(PI 단계 UXB 산출
물)
자료 제공
/ 진행 지원
자료 제공
/ 진행 지원
UI Q&A 지원
화면 검수 방안 수
립
…
필요 기능 수집
및 정리 수행
화면 CRUD 확정 화면 UI 표준 정의 UI 표준 교육 화면 검수 …
대상자
프로젝트
현업 전체
(프로젝트 현업 중)
UI 핵심 멤버
(프로젝트 현업 중)
UI 핵심 멤버
프로젝트 현업 전체
+ SI 설계자
SI 설계자
…
[IT 담당자]
[PMO - UXB 전문가]
[SI – 디자이너]
+
14. 변화의 소리
14
프로젝트 끝나고 시스템 오픈 하면, 실제 사용자는 데이터 통합이 잘됐는지 무슨
솔루션을 썼는지
관심 없습니다. 오직 화면만으로 평가하기 때문에 중요합니다.
- A 보험사. 정보기획 담당임
원
비즈니스와 IT 사이에 비어있던 뭔가…그 부족했던 뭔가가 UXB로군요.
- B 증권사. 차세대시스템 수행PM
(UXB완료보고 이후) 단순히 화면만 나오는 줄 알았는데, 이건 화면으로 하는
BPR인데요. - B 증권사. 정보기획 담당임원
이렇게 해주면 실제 사용자가 정말 좋아하겠는데요. 선정된 과제 이외의 것도 이렇
게 해야 되야텐데. - C 증권사. 차세대시스템 프로젝트, 개발PL
- D 보험사. 차세대시스템 프로젝트, 현업담당자
15. User Interface User Interaction
인간이 ‘도구’를 사용하기 시작하면서, 인간과 도구 사이에
상호작용하는 총체적인 작용을 일컬음
인간의 컴퓨터나 핸드폰 사용에서…
- 컴퓨터, 핸드폰이라는 device를
사용하는 것
- 화면(screen)을 통해 인지하는 것
- 키보드, 마우스, 터치스크린 등의
도구를 통해 시스템을 조작 하는 것
Interface가 일어나는 동안
사용자와 ‘도구’가 서로“대화”하는 것
Interaction Design : 제품의 사용성과 사용자 경험가치의
관계를 연구, 새로운 기술과 소비자를 연결하는 다리 구실
Web 2.0 시대 Interaction의 발전 및 진화
: Asynchronization, Mash-up
UI
사용자가 특정한 목적을 가지고 어떤 도구를 사용할 때, 사용자가 이해하고, 학습하고, 흥미를 느끼게 하
는
해당 도구, 또는 도구 내의 소프트웨어의 특성 으로 사용자의 도구 사용에 대한 만족도 측정의 중요한
기준 (ISTQB)
Usability
Intro… between Users & system…
16. 4.1. 화면, UI는 무엇인가?
창문의 하늘 저 너머에는
보이는 것 보다 더 복잡한 우주가 존
재하지만,
우리는 그저 우리에게 보이는 것만 볼
뿐이고,
그 이상은 보기 원하지도 필요하지도
않는다.
각자 다른 곳에서 다른 창을 통해 보
고 있지만, 우리가 보는 하늘은
동일한 하늘이다.
모니터속 화면 저 너머에는
보이는 것보다 더 복잡한 시스템이 존재하
지만
우리는 그저 우리에게 보이는 화면에만 신경
쓸 뿐이고,
그 이상은 생각하지 않다.
각자 다른 곳에서 다른 모니터를 통해 보고
있지만,
우리가 보는 화면은
동일한 화면이다.
시스템 화면 = 창문을 통해 보이는 하늘
Editor's Notes
실제로 이러한 UXB서비스를 적용해본 고객사에서는 긍정적인 반응이 있었습니다.
저희에게 중요한 것은 긍정적인 반응 자체보다는
고객사 여러분들이 UXB서비스를 경험해 봄으로써 그들 스스로도 새로운 방법에 대해 자신감을 가지고 믿음을 갖게 되었다는 점입니다.
여러분도 변화의 소리에 함께 해보시길 바랍니다.
감사합니다!
본론에 들어가기 전에 사람, “사용자”에 대해 한가지만 더 알아보겠습니다.
사람과 시스템 사이에는 UI…라는 것이 존재합니다.
UI가 단순‘화면’이라고 생각하시는 분들도 많으실텐데, UI는 User Interface와 Interaction 함께 UI라고 정의할 수 있습니다.
User Interface는 … 인간이 이 토기와 같은 도구를 만들기 시작하면서, 도구와 상호작용을 해왔습니다. 무언가를 보관하기 위해 토기를 만들었고,
사용하다보니 손잡이도 필요하고, 더 나아가 바닥이 넓고 안정감 있고 뚜껑이 있는 이런 모양의 그릇도 만들게 된 것이지요.
Interface는 핸드폰, 컴퓨터 같은 device를 사용하는 것, 화면을 통해 인지하는 것, 마우스, 키보드를 통해 조작하는 것 모든 것이 Interface입니다.
반면, User Interaction은… Interface가 일어나는 동안 사용자와 도구가 서로 “대화”하는 것을 말합니다.
요즘 어린이와 어른에게 가장 인기 있는 닌텐도 WII가 사용자와 도구의 Interaction을 가장 잘 나타내는 것이겠지요.
Interaction은 발전하여 웹2.0시대를 연 서로 떨어진 사용자가 online상에서 하나의 문서를 작성하면서 버전과 update에 구애를 받지 않는 ‘비동기’
Open source의 활발한 사용으로 만들어지고 있는 ‘mash-up’도 인간과 도구의 대화의 결정체라고 할 수 있지요.
이런 인간과 도구사이의 관계의 잘되고 못되고의 정도를 나타내는 정도중 Usability가 있고.
세계 사용성의 날을 지정할 정도로 사용성이 강조되는 시대에 우리는 살고 있습니다.