
UI/UX 개발 필요성
소프트웨어 산업이 발전하고, HW-SW 융합개발의 흐름으로 SW 개발수요가 확대되는 등 시장 경쟁이 치열해지는 상황에서 시장 경쟁력을 확보하기 위해 소프트웨어의 품질향상 및 차별화가 요구되고 있습니다.
소프트웨어가 최종적으로 소비자에게 전달될 때의 경험이 소프트웨어의 경쟁력이 되는 시점으로 기술적인 진보와 함께 디자인적인 완성도가 중요합니다.
SW자산뱅크 시스템에서 UI/UX 개발도우미 서비스를 통해 지원되는 검증된 UI/UX 개발요소를 활용하여, UI/UX 분야에 대한 개발비 및 인력, 전문적 노하우가 부족한 국내 기업들이 손쉽게 UI/UX를 개발함으로써, 개발기간은 단축시키고, 양질의 결과물을 도출하여, 소프트웨어 품질 경쟁력을 효율적으로 강화시킬 수 있도록 지원합니다.
실질적으로 국내 기업에서 UI/UX 개발은 SW 개발 프로세스 중 가장 비 전문분야에 해당되고, 전문적 디자인 분야임에도 기업 내부의 SW 개발자가 UI/UX 업무를 수행하는 것이 현실입니다. SW자산뱅크 시스템에서 UI/UX 개발도우미 서비스를 통해 활용할 수 있는 UI/UX 개발요소를 지원함으로써 개발소요기간 단축 및 개발인력자원의 효율적 운용을 지원합니다. 궁극적으로 사용자 중심의 UI/UX 개발을 통한 소프트웨어의 UI/UX 사용자 가치품질 향상을 목표로 합니다.
소프트웨어 UI/UX 활용소개 동영상
- Reference Book
- 인간중심 UX디자인, 킴굿윈, 에이콘출판사
- UX 디자인 7가지 비밀, 박지수, 김헌, 안그라픽스
- UX DESIGN COMMUNICATION, 댄브라운, 위키북스
- 오래가는 UX디자인, 반준철, 한빛미디어
- 이것이 UX디자인이다, 조성봉, 위키북스
- 디자인 방법론 불변의 법칙 100가지, 벨라마틴, 브루스 해닝턴 공저/유다혜, 이유미 공역, 고려문화사
- UX기반 기술인문융합 프레임워크와 방법, 기술인문융합창작소
A사
- AS-IS 분석
- 개선방향
- TO-BE 수립
1. AS-IS 분석
A사의 IoT 포털 서비스는 온도계, 습도계, 전구, 버튼 등 다양한 디바이스를 게이트웨이를 통해 클라우드에 연동할 수 있으며, 디바이스 별 규칙을 직접 설정하고 대시보드를 통해 손쉽게 관리할 수 있는 차별화된 서비스다.
이 서비스는 농장이나 소규모 사업장에서도 쉽고 빠르게 디바이스를 연결할 수 있어 전문 지식이나 구축 경험이 없는 초보 사용자도 최소의 학습으로 이용할 수 있는 환경을 구축하는 것이 매우 중요하다.
초보 사용자가 이 서비스를 제대로 이해하고 있는지, 쉽게 적응하는지 등 사용성 문제와 이슈를 살펴보기 위해 사용성 테스트를 시행하였고, 그 결과 다음과 같은 시사점을 얻을 수 있었다.
- 대시보드, 게이트웨이, Trigger, Condition, Action, Method, Parameter 등 설명을 들어도 알기 어려운 전문 용어 사용
- 용어를 이해할 수 없어 주요 사업자 과업을 수행하기 어렵고, 이로 인해 서비스 개념이 불완전하게 형성
- 왼쪽부터 제조현장, 사용자 인터뷰 장면, 사용성 테스트 영상
2. 개선방향
서비스 개념을 사용자가 제대로 이해하지 못하고 것이 가장 큰 문제였다. 그래서 사용자의 사고 방식에 맞게 서비스를 재설계하는 데 주안점을 두었고, 그 결과 "최소 학습으로 이용할 수 있고, 상황과 설정을 한 눈에 파악할 수 있는 서비스"라는 방향성 아래 다음과 같은 개선 전략을 수립하였다.

3. TO-BE 수립
메인 대시보드
대시보드를 실제 존재하는 센서와 그 위치를 반영하는 사용자 인터페이스로 재정의하고, 장소 기반으로 구성/운영되도록 설계하고, 센서 현황, 통계 정보 등을 제공하여 기술적 판단을 도울 수 있도록 개선하였다.





서브 대시보드
서브 대시보드는 메인 대시보드와 달리 장소와 위치 개념이 있다. 현장 구조에 맞게 정보 구조를 만들고, 센서를 게이트웨이와 디바이스 별로 확인할 수 있도록 구성하였다. 센서 개수가 많은 상황을 고려하여 위젯 크기를 줄이고 구성 요소를 최소화하여 핵심 정보에 집중할 수 있도록 설계하였다.





센서 상세
센서 상세는 해당 센서에 대한 모든 것을 알 수 있도록 개선하였다. 이를 위해 규칙 관리와 위치 정보를 추가하였다.





규칙 관리
규칙 관리는 여러 화면을 이용하지 않고 한 화면에서 설정/관리할 수 있도록 구성하여 가시성을 높였고, Trigger, Condition, Action, Type, Method, Parameter와 같은 전문 용어를 사용하지 않고 맥락에 의해 해당 요소를 이해할 수 있도록 설계하였다.
1.규칙만들기
2. 트리거 선택 - 타입 선택
3. 트리거 선택 - 메소드 선택
4. 트리거 선택 - 파라미터 입력
5. 액션 선택
6. 액션 선택 - 타입 선택
7. 액션 선택 - 메소드 선택
8. 액션 선택 - 파라미터 입력


규칙 목록
규칙 목록은 규칙 관리로 이동하지 않고 목록을 통해 어떤 규칙인지 파악할 수 있도록 구성 요소를 재정의하였고, IFTTT와 같이 규칙을 서로 공유하고 활용할 수 있는 공간을 추가하였다.





B사
- AS-IS 분석
- 개선방향
- TO-BE 수립
1. AS-IS 분석
B사의 출입통제 시스템은 빌딩, 소규모 오피스, 산업시설의 물리보안 소프트웨어로써 출입문, 리더, 입력장치, 출력장치 등을 연계하여 침입감시, 출입통제 등 보안업무를 실시간으로 수행하는 시스템이다.
이 시스템은 해외 시장 진출을 위해 각종 경보 이벤트의 빠른 인지와 이벤트 원인에 대한 직관적 표현 등을 개선하기 위해 맞춤형 관제 화면이 필요하다. 또한, 향후 새로운 비즈니스 모델을 위해 버티컬 플랫폼 전략을 활용한 출입통제 시스템의 사용성 이슈를 확인하였다.
2. 개선방향
이 시스템은 단순한 업무 시스템이 아니라 향후 비즈니스 모델의 확장까지 고려해야 하는 버티컬 플랫폼 서비스인 점을 고려하여 PC의 바탕화면의 개념을 차용하고 화면 구조를 논리적이고 일관성 있게 설계하여 "비즈니스 모델의 확장성과 업무 효율성의 극대화"를 추구하였고, 이를 위해 다음과 같은 개선 전략을 수립하였다.

3. TO-BE 수립
메인 페이지
개선안은 가상 스크린렛 방식의 메인 페이지, 출입자 페이지, 모델러 페이지, 뷰어 페이지 등 핵심 서비스 중심으로 작업하였고, UI 설계안, GUI 디자인 시안, 스타일 가이드, 결과보고서 등 향후 개발 작업에 직접 활용할 수 있는 산출물을 제공하였다.





출입자 페이지
메뉴를 신속하게 확인하고 읽을 수 있어야 한다는 원칙 아래 내비게이션 영역의 메뉴 항목을 일렬로 정렬시켰고 열고 닫는 기능도 과감히 제거하였다. 또한, 밝은 배경을 사용하여 메뉴 텍스트의 가독성을 높였고, 본문 영역에 제목을 두지 않은 문제를 해결하고 검색과 컨트롤 버튼을 재배치하여 페이지 헤더 영역을 단일 행(Single Line)으로 구성하였다.






모델러 페이지
장치와 지역(위치) 정보가 3개의 테이블로 표현되어 화면의 복잡성을 가중 시키고 있었다. 이를 해결하기 위해, 장치 목록-상세 정보-지역 정보가 1개의 테이블로 구성되도록 재설계하였다.





뷰어 페이지
다른 곳과 달리 멀티 뷰어(Multi-viewing) 방식을 채택하고 있어 창 열기의 일관성을 유지되지 않고 있으며, 잦은 스크롤링으로 인한 사용성 저하가 우려되어 창 열기 방식을 재정의하였다.





C사
- AS-IS 분석
- 개선방향
- TO-BE 수립
1. AS-IS 분석
C사의 멀티미디어 통합관리 솔루션은 웹 기반으로 이미지, 동영상, 음성 파일 등을 개별, 폴더, 묶음 등 다양한 파일 단위로 업로드/다운로드할 수 있는 솔루션이다. HTML5 기술을 적용하여 Activ eX나 NPAPI이 없어도 웹 기반으로 멀티미디어 서비스와 영상 편집 기술을 구현할 수 있다는 강점을 가지고 있다.
이미 시장에는 많은 종류의 멀티미디어 관리 솔루션이 출시되었기 때문에 C사만의 차별화 된 경쟁력을 확보하는 것이 중요하였다.
2. 개선방향
멀티미디어 관리는 사용자에게 제공할 멀티미디어 콘텐츠를 관리하는 것이므로 운영자가 곧 사용자는 가정 하에 "관리자 화면이 곧 사용자 화면인 새로운 개념의 멀티미디어 콘텐츠 관리 솔루션"이라는 개선 방향을 설정하였고, 이를 구현하기 위해 다음과 같은 개선 전략을 수립하였다.

3. TO-BE 수립
콘텐츠 관리 페이지
기존의 콘텐츠 관리 페이지는 전형적인 형태와 구성이었다 개선안에서는 "관리자도 사용자다"라는 원칙 아래 멀티미디어 콘텐츠를 좀 더 편하고 빠르게 탐색/관리할 수 있도록 설계하였다. 특히, 관리자 화면이 곧 사용자 화면이 되도록 콘텐츠 목록을 디자인하였고, 구글 이미지 검색의 장점을 벤치마킹하여 적용하였다.





콘텐츠 상세 페이지
콘텐츠 상세 페이지는 멀티미디어 콘텐츠 특성을 고려하여 구글 이미지 검색처럼 미리보기 기능을 추가하였고, 상세 페이지는 반드시 필요한 정보 위주로 재구성하였다.







콘텐츠 등록 페이지
콘텐츠 등록 페이지는 멀티미디어 콘텐츠와 업무 특성을 고려하여 한 번에 여러 개의 파일을 등록하고, 마우스 드래그 앤 드롭 방식(Drag & Drop)을 지원할 수 있도록 개선하였다. 그리고 한 화면에서 정보 입력, 등록 진행 상태 확인, 등록 완료 상태 확인이 동시에 가능하도록 설계하였다.





D사
- AS-IS 분석
- 개선방향
- TO-BE 수립
1. AS-IS 분석
D사의 전자팩스 서비스는 PC 클라이언트 프로그램을 통해 팩스와 SMS를 송수신하는 서비스다. 주 고객층은 기업이며, 다른 서비스와 달리 후불제를 채택하고 있다.
기존 기업 고객 대상의 테스트에서는 이미 기존 서비스에 익숙해 있어 불편함을 느끼지 못하였지만, 초보 사용자 대상의 테스트에서는 전송 파일을 전환하는 과정에서 문제가 발생하였다. 새로운 일반 사용자 수요층을 발굴하고 기업 수요층을 확대하기 위해서는 개선 가능한 모든 것에 대해 과감한 변화가 필요하다는 결론에 이르렀다.
- 왼쪽부터 초보사용자 테스트, 기존사용자 테스트, 사용성 테스트 영상
2. 개선방향
팩스와 SMS 송수신에 필요한 기능 화면이 20개가 넘을 정도로 많았는데, 화면 수를 최소화하고 현재 창에서 모든 기능을 수행할 수 있도록 재설계하였다. 기존 프린터 기능을 이용하여 파일을 전환한 후 팩스를 보내는 과정에서 심각한 사용성 문제가 발생하여 팩스 보내기를 이메일로 첨부 파일을 보내는 것과 같은 방식으로 이용하도록 개선하였다.

3. TO-BE 수립
팩스 메인 화면
메뉴 바를 없애고, 핵심 서비스인 팩스, 문자, 주소록을 중심으로 사용자 경험이 이루어지도록 구성하였다. 대량으로 팩스를 송수신하는 기업 고객을 고려하여 팩스 현황을 한 곳에서 확인할 수 있는 팩스 메인 화면을 신설하였다.





팩스 보내기 화면
팩스보내기 화면은 팩스 송신에 집중할 수 있도록 불필요한 요소를 최소화하여 구성하였고, 이메일 보내듯이 팩스를 보낼 수 있도록 사용 흐름을 변경하였다. 특히, 받는 사람은 이메일의 연락처 칩(Contact chip) 방식으로 표현하였고, 보낼 문서는 이메일 첨부파일 기능과 동일한 방식으로 구현하였다.





문자 보내기 화면
문자보내기는 팩스보내기와 같은 절차와 방법으로 사용할 수 있도록 일관성 강화에 주력하였고, 주소록은 필요 시 호출하여 사용하도록 구성하여 받는 사람과 메시지 입력에 집중할 수 있는 환경을 구현하였다.





E사
- AS-IS 분석
- 개선방향
- TO-BE 수립
1. AS-IS 분석
E사의 통합관제 소프트웨어는 치안과 재난 상황 관리를 위한 필수 기능 중심으로 구성된 소규모 상황실 대상의 관제 소프트웨어로써 대규모 상황실을 위한 관제 소프트웨어와의 차별성을 강화하고 해외 시장 공략을 위한 주력 제품이다.
해외 시장 공략을 위해서는 보편적이고 표준적인 측면을 강화하고, 현황을 한 번에 조망할 수 없는 화면 구조, 중요도가 높은 정보의 낮은 가독성 등 관제 소프트웨어의 기본 품질 요소에 대한 보강 작업이 시급하였다.
2. 개선방향
관제 소프트웨어는 사건/사고에 신속하게 대응하고, 동시 다발적으로 발생하는 상황에 효과적으로 대응할 수 있도록 멀티 태스킹/세션 개념을 적용하였다. 이 소프트웨어는 관제실과 현장 간 실시간 커뮤니케이션 기능이 강점이다. 이 강점을 살려 커뮤니케이션 결과를 시간 순서 기준으로 자동으로 상황 일지가 생성되는 기능을 추가하여 관제 업무의 효율성을 강화하였다.

3. TO-BE 수립
관제 업무의 특성 상 실제 사용 상황에서의 유용성과 사용성이 더 중요하다는 판단 아래 선호도(User Preference)보다는 성과(User Performance)에 초점을 두고 진행하였고, UI 설계안, GUI 디자인 시안, 스타일 가이드, 결과보고서 등 향후 개발 작업에 직접 활용할 수 있는 산출물을 제공하였다.
메인 화면
탭으로 구분된 화면 구조를 탭 없이 사건 정보를 확인할 수 있도록 구성하였고, 사건 정보의 가독성을 높이기 위해 밝은 배경을 채택하였다.





사건 화면
메인 화면의 사건 목록을 선택하면 해당 사건 화면이 탭 브라우징 방식으로 열리도록 설계하고, 컨트롤 버튼은 영어, 스페인어 등 글자 수가 많은 외국어를 고려하였다.





F사
- AS-IS 분석
- 개선방향
- TO-BE 수립
1. AS-IS 분석
F사의 프로그램 라이팅 소프트웨어는 PCB 생산과 테스트 공정에서 PCB의 마이크로 컨트롤러와 플래시 메모리에 프로그램을 설치하기 위한 소프트웨어다. 생활가전, IoT 응용 제품, 자동차용 전자장치 생산에 사용되며, 정부의 스마트공장 도입 정책에 따른 자동화 된 생산라인 구축을 위한 기반 기술이다.
이 제품은 주로 생산 현장의 특정 업무에 사용하는 특수 소프트웨어여서 스크립트 명령 방식으로 주요 기능을 제어하고 있어서, 최소의 교육훈련으로 적응할 수 있도록 사용성 품질 향상이 시급했다.
2. 개선방향
명령어 인터페이스(CLI, Command Line Interface)에서 그래픽 사용자 인터페이스(GUI, Graphic User Interface)로 전환하였고, 이 소프트웨어로 수행하는 프로그램 설치 작업은 정해진 프로세스를 따라 진행되므로 소프트웨어를 사용자 작업 프로세스에 맞게 구성하여 불필요한 탐색과 선택 부담을 최소화 하였다.

3. TO-BE 수립
CLI에서 GUI로의 전환은 거의 모든 것을 바꿔야 하는 것을 의미했다. 그래서 개선 작업은 모든 화면을 대상으로 진행되었고, UI 설계안, GUI 디자인 시안, 스타일 가이드, 결과보고서 등 향후 개발 작업에 직접 활용할 수 있는 산출물을 제공하였다.
Select Device 화면
제조사 선택, 디바이스 선택, ID 체크 과정을 직관적으로 표현하였다.





Load File 화면
명령어를 사용하지 않고 화면 순서대로 조작하면 파일을 로드할 수 있도록 구성하였다.


Program 화면
프로그램 라이팅이 진행되는 상태를 시각적으로 확인할 수 있도록 표현하였다.


Transfer file 화면
파일 전송 대상과 형식을 직관적으로 확인할 수 있도록 표현하였다.




기술하였습니다. 상세 개선안은 각 기업별 컨설팅 결과물들을 확인하시기 바랍니다.
- SOA(Service Oriented Architecture)를 지원하는 서비스와 어플리케이션 컴포넌트간의 연동을 지원하는 미들 웨어 플랫폼인 ESB(Enterprise Service Bus)를 구축 및 관리하는 솔루션
- 주요기능
-
- ESB콘솔 : 초기 구축/유지보수 시 서비스간 연결하는 모듈
- 서비스모델러 : 초기 구축/유지보수 시 개발 코딩하는 모듈
- 대시보드(운영자/관리자) : 현재 상태 모니터링 및 오류발생 시 대응하는 모듈
-
- ESB콘솔, 서비스모델러, 대시보드(운영자/관리자) 간의 BI를 고려한 일관성 있는 디자인 필요
- B2B 솔루션의 특성과 달리 전반적으로 포털느낌이나 디자인 개선 필요
- ESB콘솔 : 전반적인 테이블 기반의 화면디자인, 버튼속성을 고려하지 않은 화면배치, 불명확한 2단 탭메뉴 UI 개선 필요
- 서비스모델러 : 아이콘 디자인 가이드 및 전반적으로 세련되지 못한 디자인 개선 필요
- 대시보드 : 제공되는 정보량 대비 복잡한 화면디자인 개선필요
- 산재되어 있는 다양한 데이터소스와 시스템, Application 등으로부터 데이터를 모으고, 의미를 부여하고 재사용 가능한 정보가 되도록 만들어 주는 데이터통합 솔루션의 개발지원도구
- 주요기능
-
- 개발지원도구 : 데이터 통합을 위한 개발코딩을 하고 실행하는 솔루션
- 스케줄러 : 유지/보수 시 변경된 작업을 상시 모니터링하는 솔루션
-
- 데이터 통합솔루션 중 개발지원도구를 대상으로 컨설팅
- 개발자 중심으로 화면이 설계되어 전반적인 사용성 개선 필요
-
- 소프트웨어의 특성에 따라 데이터 통합솔루션의 개발지원도구를 UX 모니터링 전용 솔루션인 사용영상캡쳐 솔루션(Morae) 및 시선추적 솔루션 (myGaze)을 이용하여 정량적 사용성 평가 및 분석을 통해 사용자 행태를 파악하여 개선안을 제공하였습니다.
- 기업의 프로세스를 전자문서 형태로 작성하여 자산화하고, 지속적으로 프로세스 관리 및 개선하는 솔루션
- 주요기능
-
- 프로세스 구조화 : 프로세스 레벨/관련조직/승인자/모델러/권한설정하고, 프로세스 관리 전략 수립
- 프로세스 표준화 : 프로세스 표준화 및 상세항목의 내용을 입력
- 프로세스 모델링 : 이름/템플릿 설계 관련 오브젝트 및 상세항목을 정의
- 프로세스 관리 : 신규 프로세스 생성/개제된 프로세스의 이슈 및 변경 관리
-
- 전반적으로 올드한 디자인으로 트렌드 반영 필요
- 개별 화면단위의 UI개선보다는 거시적 관점에서의 UX개선 필요
- 브랜드 아이덴티티 컬러는 주황색이지만 대부분의 고객들은 블루계열을 선호해 적용 필요
- 마이크로소프트사 웹 솔루션 제품에 하나의 장착(모듈)해서 제공되는 제품으로 데이터 연동하는 솔루션
- 주요기능
-
- 솔루션 내 세일즈, 서비스, 마케팅과 같이 제공되는 4번째 모듈인 마이그레이터
- 제너럴, 데이터소스, 데이터타겟 & 매핑, 히스토리 영역으로 구성
-
- 마이크로소프트사 웹 솔루션 제품 중의 하나이기 때문에 소프트웨어에 대한 개선 불가능해 판매채널인 홈페이지 개선 필요
- 기존 홈페이지가 사용자에게 신뢰감을 주지 못하고 있는 점 개선 필요
- 소프트웨어 판매채널로서의 역할을 할 수 있는 홈페이지 개선 필요
- 전자문서 형태로 서비스되는 콘텐츠를 E-BOOK의 형태로 쉽게 열람할 수 있는 PDF 문서 전용 APP
- 주요기능
-
- View : 단순 PDF 문서 뷰어의 한계를 뛰어 넘은 멀티미디어 콘텐츠 뷰어 기능
- Create : PDF에 직접 추가적인 내용을 표현하는 주석 기능
- Process : 입력 데이터 프로세싱 기능
-
- 기능과 메뉴의 복잡한 화면 구성으로 사용성 부족
- 사용자의 입장에서 손쉬운 조작과 직관성 부족
- 언어 별 특징을 분석하여 최적화 된 입력방식을 제공하는 Android 전용 키보드 APP
- 주요기능
-
- Typing : 모바일 폰이나 태블릿 화면에 문자를 입력하는 키보드 기능
- Multi language keyboard : 음은론 기반의 자모음이 분리된 다국어 입력기
- Adjustment : 크기나 위치를 변경할 수 있는 레이아웃 조절기능
-
- 언어의 특징을 반영한 키보드로써
- 사용자의 입장에서 객관적 평가를 통한
- 사용성 개선 방향의 부제
- 데이터센터에 적용된 패스워드 관리솔루션. 패스워드 일괄변경 및 일회용 패스워드 발급가능
- 주요기능
-
- 자동화된 패스워드 변경 및 관리로 비용감소 및 업무효율증대
- 유지보수, 사업자 및 관리자 해킹의 비밀번호 원천 차단
- 체계적이고, 높은 등급의 비밀번호 관리시스템
-
- 보편적이지 않고 기능의 주체/객체가 혼재된 레이블링 개선
- 그룹화 되지 못한 주요정보. 상세정보 노출의 부재된 인포그래픽 개선
- 정보전달 부족. 체계적이지 못한 대쉬보드 레이아웃
- 통합된 이용 환경 하에서 Hadoop 및 빅데이터 관련 오픈소스를 All-In-On으로 페키징하여 최적화한 하이브리드 DW기반 대용량 데이터 분석용 톱합 솔루션
- 주요기능
-
- 데이터 수집/저장: 데이터 형태와 수집 주기를 지정하여 Storage에 저장, 원천 데이터를 다양한 형태로 가공 및 최적화로 DB에 저장
- 데이터 가공/분석: 가공데이터 분석 리포트화, SQL을 지원하여 사용자가 원하는 분석 결과를 추출
- 데이터 시각화: 다양한 분석차트와 테이블을 Dashboard형태 웹페이지로 시각화, Open API를 통해 별도의 웹사이트에서 호출 시각화
- 고급 분석: 고급 분석 환경 R을 통해 통계 수치와 그래픽이 결합된 다양한 통계 기법과 수치 해석 기법을 지원
-
- 관리자, 데이터 분석, 대쉬보드 기존 상세화면의 UI개선
- 메뉴를 예측가능한 명칭으로 개선, 영역별로 정보 재배치
- 주요 화면 레이아웃 개선을 통한 접근성 향상
- 모바일 기기 관리/통제를 통해 기업 정보 유출 차단 및 보안 위협에 대응하는 모바일 통합 보안 MDM 솔루션
- 주요기능
-
- 모바일 기기 관리/통제를 통해 기업 정보 유출 차단 및 보안 위협에 대응하는 모바일 통합 보안 MDM 솔루션
- 화면 캡쳐, USB, 사진 촬영 차단 및 사내 정보 유출 방지
- 실시간으로 확인하는 스마트 기기 도난/분실 대응
- 불법 앱을 통한 악성코드 유입을 막는 사내 앱스토어 기능
- 보안 키패드, 모바일 백신까지 통합 모바일 보안 솔루션 제공
- 맞춤 환경 모니터링 및 통계
-
- 주요기능 설정을 위해 많은 페이지를 거쳐야 함
- 단편화 되어있는 기능설정은 사용자가 사용하기 어려움
- 웹 트래픽에 특화된 애플리케이션 보안(방화벽) 솔루션
- 주요기능
-
- 웹 서버 앞에서 사용자의 서비스 요청과 서버의 응답을 검사
- 체계적이고 안정적으로 개발된 웹 쉘 대응 기능
- 클라우드 서비스를 위한 웹 애플리케이션 독립 가상화 기술
- 여러 대의 WEBFRONT-K를 한 곳에서 모니터링 하는 기능
- OWASP Top 10, 국정원 8대 취약점 완벽 대응 가능
-
- 주요화면 UI개선: 기능 수행 프로세스의 개선, 프로세스 복잡성 증가 및 작업효율성 저해 요소 차단
- 주요화면 레이아웃 개선: 정보간의 연관성이 고려되지 않은 레이아웃 개선
국내 SW기업이 자체 브랜드를 가진 패키지SW를 출시하고, 해외수출 및 투자유치를 진행하는 과정에서 기술적, 기능적 품질은 크게 평가받으나, 시각적 요인에서 가치품질개선에 대한 바이어들의 요구가 커지고 있습니다. 최종적으로 소비자에게 보여지는 시각적 완성도부터, 사용성 개선, 사용자 경험 만족도 개선에 이르는 SW의 UI/UX 기반 가치품질 역량강화가 매우 필요합니다.
SW공학센터에서는 SW기술자산 활용촉진사업의 일환으로 SW자산뱅크 등록기업을 대상으로 중소기업의 UI/UX 역량강화 프로그램을 운영, 중소기업 SW에 대한 UI/UX 컨설팅 사업을 진행하였으며, 2013년 진행된 컨설팅 중 대표 사례를 아래에 소개합니다.
컨설팅 예시
L사
- - 소프트웨어 소개 : 화물운송의 업무체계를 정립하고 체계적인 전산화 및 업무효율을 높이는 솔루션
- - 소프트웨어 주요 기능 : 배차관리/청구관리/세금계산서/지급관리/실적관리/거래처 관리/출력
- - 컨설팅 요구사항 : 소규모 클라이언트 대상 배차관리 시스템 Economic 상품 출시를 위해 복잡한 화면구성을 개선,
사용성을 높이며, 다양한 모니터환경(17"~21")에 최적화된 배차관리화면의 개선을 요청함 - - 컨설팅 프로세스 : 대상 화면의 UI분석, 화면 Density 비교 분석을 통한 최종 UI개선안 제안

컨설팅 최종안
As Is 기존화면

To Be 제안화면

화면분석 및 제안
UI 분석 및 제안
현실 세계와 부합되도록 설계한다. Match between system and the real world
As Is
- 기능키(Function Button)들이 산재되어 사용자에게 혼란을 유발함

To Be
- 유사한 버튼 그룹핑 및 재배치, 9개 이상의 버튼 그룹핑은 지양함

화면 디자인은 심미적이고 간결해야 한다. Aesthetic and minimalist design
As Is
- 기능위주로 배치된 컨텐츠를 태스크(TASK)위주로 배치되도록 해야함

To Be
- 순차적 Usage Path( I형 Path)가 가능하도록 개선함

화면 Density 비교 분석/ Usage Path 분석 및 제안
화면 Density Check
As Is
- 1. 많은 수의 버튼(1 Chuck : 40개의 컴포넌트)가 배치되어 있어 복잡도 가중, 탐색의 어려움이 있음
- 2. 중요 컨텐츠의 화면 내 비율이 다른 컨텐츠와 동일하여 부각되지 않고 오히려 스크롤로 내용을 봐야해서 보기에 어려우며, 영역 추가확보 필요
- 3. 불필요하게 특정 기능을 중복적으로 제공함

To Be
- 1. 기능은 중복적으로 제공하지 않고 단일하게 제공함
- 2. 버튼은 속성별로 그룹핑하여 인지 부하를 최소화할 수 있도록 Chuck와 Component로 구성함
(5~9개의 Unit 권장) - 3. 중요 컨텐츠의 화면비율을 크게 할당하여 강조되도록 함

Usage Path Check
As Is
- 1. W형 Path
- 2. 검색>그룹선택>옵션설정>배차리스트 선택>(스크롤)>상세내역 확인>엑셀/이메일 등 추가 TASK 수행해야 함
- 3. 순차적인 흐름이 아닌 화면을 많이 탐색해야 하는 복잡하고 동선이 긴 Path를 가짐

To Be
- 1. I 형 Path
- 2. 주요 태스크(TASK) 위주로 순차적인 흐름이 되도록 배치함( 위>아래, 좌>우)
- 3. 작업 동선의 최소화되도록 관련이 있는 정보는 유사한 위치에 배치함


- 참조모델
-
참조모델은 소프트웨어 개발 시 기초적인 사용성 문제 발생을 방지하기 위한 최소한의 프로세스와 요소들을 예시로 제공하고 있습니다.
기획, 분석, 설계 구현, 테스트로 진행되는 소프트웨어 개발 단계에 맞춰 UI/UX/GUI/UT(사용성평가) 적용 이론과 방법을 상세하게 설명하여 소프트웨어 개발인력의 UI/UX 디자인 프로세스의 이해를 돕고, 단계별로 보다 사용자 중심으로 업무를 수행하고 디자인 인력과 협업할 수 있도록 가장 기본적인 가이드 역할을 위해 개발되었습니다. -
- 진단모델
-
진단모델은 소프트웨어의 품질과 개발 프로세스에 대한 UI/UX 관점의 자가 진단을 할 수 있도록 개발된 Self-check List 입니다.
국제 표준의 사용성 품질 특성에 맞춰 UI/UX 품질 향상을 위한 기본적은 요소들을 간편하게 진단할 수 있도록 하였으며, 각 문항에 필요한 도움말과 활용가이드를 제공하여 이해를 도울 수 있도록 제작되었습니다.
또한 소프트웨어 개발 단계에서 필요한 UI/UX 품질 향상을 위한 수행 항목들을 점검하고 조직내의 UI/UX 프로세스를 진단하여 지속적인 UI/UX 품질개선 및 관리에 도움이 되도록 하였습니다. -
목표정의
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
UI/UX 개발 목표 및 범위 정의 | UI/UX 개발 목표 및 범위 정의 | UI/UX 개발 목표 |
- 명확한 목표 및 범위 정의 - 이해 관계자와의 협의 및 합의 - UI/UX 개발 목표의 내부관계자 합의 - 타사/선진 사례, 트렌드 조사 등을 통한 개발 목표 수립 - 내부 관계자간 개발 목표 협의 및 공유 |
UI/UX 개발 목표 및 범위 정의
최근 소프트웨어 개발 차별화를 위해 UI/UX 분야의 개발 중요성이 강조되고 있음
소프트웨어 개발 목표 및 범위 정의 단계에서 UI/UX 분야의 개발 목표 및 범위 정의를 필수적으로 수행하여 프로젝트 계획 전반에 반영하기 위한 활동으로,
성공적인 수행을 위해 내부관계자가 UI/UX 개발 필요성 및 목표를 공유하고 개발 범위를 수립하기 위한 활동임
세부활동
1. 경영진의 UI/UX 관련 개발 요구사항 조사 및 정의
목표
경영진을 대상으로 p.83심층 인터뷰를 통해 의견을 반영하여 비즈니스 요구사항을 정의함
경영진 인터뷰를 통해 제품의 사업적, 기술적 측면의 요소를 깊이 이해하는 것을 목표로 함
경영진이 생각하는 사업적 목표를 바탕으로 UI/UX 디자인 프로세스를 정의함
경영진 인터뷰는 반드시 사용자 리서치를 시작하기 전에 진행되어야 함
(여기서 얻은 결과를 토대로 앞으로의 효과적인 리서치를 계획할 수 있는 것)
활동
- 초기 비전과 기대 : 사용자와 고객, 회사의 비전을 일치시키는 일을 진행함
- 비용과 일정 : UX리서치, UI/GUI 디자인에 투자될 예산과 일정을 결정함
(리서치 규모, 디자인의 목표 등이 결정됨) - 기술적 제약과 가능성 : 현 기술의 발전 가능성 파악, UI/UX 디자인의 미래와 방향을 제시
- 사업전략, 사업목표, 각 프로세스 책임자 선정, 회의 계획 세우기, 우선순위 선정, 개별적인 업무단위를 구분함
- 경영진의 프로젝트에 대한 이해 : 인터뷰 내용을 바탕으로 경영진마다 상이한 UI/UX 개발 프로젝트에 대한 이해를 돕고 협의되도록 함
TIP
경영진 인터뷰는 여러 명을 한꺼번에 하는 것보다 개별로 진행하는 것이 좋음
다수의 목소리에 묻혀 개인의 중요한 의견을 놓칠 위험이 없어야 함
각 인터뷰는 한 시간을 넘어서는 안 됨
2. 자사-타사-사용자분석(3C분석), 트렌드 분석
목표
기존의 자사 제품과 주요 경쟁사 제품을 분석하는 마케팅적 관점으로 시장을 이해함
경쟁 상황을 파악하여 차후 인터뷰에 필요한 질문을 준비하는데 필요한 자료를 구체화함

활동
-
현 상황 이해 (자사, 타사 제품 상태 분석)
- 사용자(고객의 욕구, 시장동향, 표적시장), 경쟁사(상대적 경쟁력, 경쟁사, 강점과 약점), 자사(자사현황, 자사의 강약점, 자사목표) 분석
- AW(Forces at work)분석은 3C 분석을 사용하는 경우에 빠지기 쉬운, 사업에 영향을 미치는 거시적 환경을 주로 분석하는 기법
-
사용성 평가 기준을 활용, 전문가 사용성 평가를 진행함
- 휴리스틱 분석 (Heuristic analysis) + 제이콥 닐슨(Jacob Nielson)의 '10대 사용성 리스트'(가장 널리 사용되는 사용성 평가 기준임)
- 가장 빠르고 저렴하게 사용성 디자인을 평가할 수 있다는 장점을 가지고 있음
- 이 기법을 통해 전반적인 UX 품질을 측정하고, UX 이슈가 될 만한 내용을 도출해 낼 수 있음
- 제품과 프로젝트의 배경 지식 파악 ▶ 어떤 사용성 기준을 사용할지 결정 ▶ 조사 및 분석의 과정으로 결과보고서를 작성, 프로젝트 팀과 주요 경영진들에게 제출함
- 핵심 이슈(Key Finding)를 도출함
TIP
제품의 강점과 약점을 상세히 확인해야 함
사용자에게 제공되고 있는 기능과 기존 제품으로 가능한 기술 영역을 이해하는 것이 중요함
지금까지 제작된 시안과 프로토타입이 있다면 함께 분석함
경쟁사 제품을 분석시 도출되는 공통적 핵심 이슈를 중심으로 경쟁사 요소의 문제점, 사용자 핵심 니즈, 미충족 니즈(Unmet Needs)를 준비함
3. 관계자 개발 목표 협의 및 공유 워크샵
목표
앞의 단계에서 조사, 분석된 결과를 토대로 부서간, 내부 관계자간(마케팅, 디자인, 개발, 영업 등의 관계부서) 개발 목표를 협의하여 향후 개발을 원활히 하기 위해 진행함
UX적 차별성이 있는 컨셉 또는 UI의 대폭 개선 등 디자인 및 개발 이슈가 많은 상황에서 필요함
활동
- 워크샵 범위와 목적을 정의함
- 아이디어 워크샵을 통해 아이디어를 발산, 수렴 및 평가하며,
육색사고모자(6 Thinking Hats), 어피니티 다이어그램(Affinity Diagram) 등을 사용할 수 있음 - 아이디어를 정리, 분석 후 전문가적 통찰을 통해 아이디어를 선정, 개발목표를 도출함
TIP
벤치마킹을 통한 성공, 개선사례 위주의 개발 필요성을 경영진 및 의사 결정자에게 제시, 회사 차원의 지원이 가능하도록 함
내부 관계자간 워크샵에서 중요 이슈들에 대한 협의가 최대한 이루어지도록 하는 것이 중요함
경영진 인터뷰 : 심층 인터뷰(In-depth Interview)
자사 및 타사분석 : 3C(Customer, Company, Competitor)분석, PLC(Product Life Cycle)분석,
BCG 매트릭스, SWOT분석, 5 forces 분석
트렌드 분석 : FAW분석, 이슈분석, 시나리오 플래닝
아이디어워크샵 : 육색사고모자(6 Thinking Hats), 어피니티 다이어그램(Affinity Diagram), 체크리스트법
프로젝트 계획
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
UX 전략 수립 | 사용자 분석 및 니즈조사
UX 차별화(혁신,경쟁)전략수립 |
사용자 분석서 UX 전략 |
- UI/UX 개발 기간 및 비용 반영 - UI/UX 개발 프로세스 정의 - UX 전략의 차별성 |
사용자 분석 및 니즈 조사
데스크리서치(경쟁사 동향)를 통해 정의된 핵심기능 관련, 예상 타겟 고객층의 프로파일을 기술, 정의함
조사 전 무엇을 관찰할 지를 정확히 정의하여 현장에서 만족 수준, 고민점(Pain Points), 표면적으로 드러나지 않은 니즈가 있는지 직접 현장 관찰을 통해 도출하여 이를 토대로 다음 단계에서 UX전략을 수립하게 됨
세부활동
1. 리서치 대상 선정 및 내용 설계
목표
고품질의 리서치 결과를 얻기 위해 적절한 리서치 대상자 선정과 리서치 설계(적절한 인터뷰 기법, 관찰조사 기법, 리서치 포인트 정의 및 내용설계)가 필요함
리서치 대상그룹(표본)이 사용자 행동 유형들을 충분히 포함하면서, 그 범위가 필요 이상으로 넓지 않게 조정하기 위해 대상 선정 및 계획 단계를 거침
활동
- 사용자 분류기준 정의 및 분류
- 세그먼트(분류된 사용자 그룹)별 매력도 평가
- 리서치 대상 프로파일 선정 및 대상 선정
- 리서치 포인트 정의
- 이슈별 내용 상세 설계
- 전체 내용 점검
- 리서치 방식 정의, 리서치팀 구성, 스케줄링
TIP
리서치 기법은 리서치 규모와 목적에 따라 정량적, 정성적 리서치를 적절히 사용함
리서치는 불특정 다수의 사람들을 대상으로 수행할 수도 있으나, 리서치 결과의 신뢰성을 위해서는 대상자 선정이 까다롭게 되어야 함
리서치는 벤치마킹이나 통계분석, 전문가 평가 등을 통해서 도출한 이슈들을 실제 사용자들에게 확인하는 절차임
신생기업, 제품의 경우 포커스그룹인터뷰로 시작하여 대상자를 확대해 나가는 것이 좋음
2. 리서치 진행
목표
사용자의 불편사항과 니즈를 파악하기 위한 단계로써, 해당 제품/서비스에 대한 다양한 의견을 수집함
활동
- 설문조사(서베이)/개인(심층인터뷰)/그룹(포커스 그룹인터뷰) 리서치 진행
- 리서치 내용 점검 및 보완
인터뷰 기술
[Do]
심문하지 말고 대화를 나눠라.
이야기에 공감하고, 일방적인 판단은 하지 말라.
전문가가 아니라 배우는 사람이 돼라.
기본적인 질문을 하라.
참가자들에게 보여달라고 요청하라.
볼 수 없는 부분에 대해서는 더더욱 구체적인 이야기를 요청하라.
제안된 기회를 받아들여라.
모순을 경계하라.
디자인 문제를 넘어서지 말고 제품을 넘어서라.
비언어적 신호에 주의를 기울여라.
너무 많이 말고 약간 앞서 생각해라.
팀원들을 믿어라.
[Do not]
유도질문을 하지 말아라.
인터뷰 참가자에게 해결책에 대해 묻지 마라.
인터뷰 도중 문제를 해결하려 하지 말라.
3. 리서치 결과 정리
목표
필드리서치(데스크리서치와 달리 사용자 사용행태를 실제로 조사, 에스노그라피, 옵저베이션 등이 있음) 결과분석을 토대로 핵심이슈 도출을 통해 시사점을 찾고 사용자 경험 가치 발굴을 목표로 하며 이것은 전략과 디자인 개발의 토대가 됨
이슈별, 사용자별, 사용자의 컨텍스트별, 사용자의 경험별 분류기준을 적용하여 필드리서치 결과를 정리함
리서치 분석 결과 그대로 핵심이슈가 될 수도 있지만, 유추나 재해석, 결과들의 복합적 해석, 페르소나(Persona), 사용자 멘탈모델(Mental Model)등과 복합적 해석을 통해 핵심이슈가 도출될 수 있음
어피니티 다이어그램(Affinity Diagram), 인지도 맵(Cognitive Maps)기법 등을 활용하여 정리함
[리서치 결과분류]
분류기준 | 내용 | |
---|---|---|
이슈별 | 발견된 이슈별 분류 | |
사용자별 | 인구 통계학적 분류, 제품 이용 특성간 분류, 수행 역량별 분류 | |
사용자의 컨텍스트별 | 장소, 시간, 상황의 영향력에 따라 분류 | |
사용자의 경험별 | 니즈 | 니즈계층별(IA/UI/디자인/서비스/콘텐츠), 디자인 영역별(유용성/신뢰성/사용성/감성) 분류 |
동기 | 사용자들은 왜 우리제품.서비스를 찾는가? 내적인 동기와 외적인 동기는? 사용자들은 왜 우리제품/서비스를 이탈하는가? | |
행태 | 사용자 이동경로 및 연속된 행동, 예상과 실제 일어난 행동간의 일치성(제품/서비스 이용시 보이는 움직임, 표정, 주저함, 머뭇거림, 정지상태, 주의력 분산 등) |
** 참조서식, 인터뷰 리포트
[정성적 리서치 : 주관적 생각을 조사]
포커스 그룹 인터뷰(Focus Group Interview)
심층 인터뷰(In-depth Interview)
사용자 VOC(Voice of Customer)분석
인지도 맵(Cognitive Maps)
맥락적 인터뷰(Contextual Interview)
에스노그래피(Ethnography-Field Research)
어피니티 다이어그램(Affinity Diagram)
[정량적 리서치 : 통계수치를 조사]
서베이(Survey)
아이트랙킹(Eyetracking)
UX차별화(혁신,경쟁)전략 수립
선행조사된 시장 현황, 사용자 조사 결과를 토대로 UX전략의 포지셔닝을 하는 단계임
사용자, 비즈니스, 기술적 관점의 목표를 설정하고 UX차별화 전략을 수립함
세부활동
1. UX차별화(혁신,경쟁)전략 수립
목표
경쟁환경, 기술적 발전, 사용자의 니즈를 반영하여 시장에서 차별화될 수 있는 혁신, 경쟁 전략을 수립함
"사용자는 뭘 원한다. 그래서 우리 제품/서비스는 이런 가치를 담아야 한다."라는 거시적 시각에서 접근하는 UX Value를 작성함
활동
- 3C분석, FAW분석, 비즈니스 모델 캔버스, SWOT 분석 등을 활용하여 시장 경쟁 요소 및 차별화 이슈를 정리함
- 사용자 조사를 통한 주요 사용자 니즈를 정리함
- 핵심 이슈를 도출함
- UX 차별화 전략을 수립함

출처 : UX1, UX Consultant 과정
비즈니스 모델 캔버스(Business Model Canvas) + SWOT분석
3C 분석 & FAW(Forces at Work)
요구사항 정의
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
사용자 요구사항 도출 |
페르소나(Persona)정의 컨셉모델 정의 사용자 요구사항 정의 |
페르소나 정의서 컨셉모델 정의 요구사항 매트릭스 |
- 단계 시작 전 UI/UX 전략의 참여인력간 공유 - 페르소나(Persona)정의의 적합성 - 사용자 불만사항/니즈로 부터 적합한 UX 전략 도출 - 단계 종료 후 UI/GUI 컨셉의 UX 전략 일관성 검토 |
UX 컨셉션 정의 | UI 컨셉션
GUI 컨셉션 |
메뉴구조도 와이어프레임스케치 스토리보드 GUI 이미지 무드보드 |
- 단계 시작 전 UI/UX 전략의 참여인력간 공유 - 단계 종료 후 UI/UX 컨셉의 UX 전략 일관성 검토 |
페르소나(Persona) 정의
페르소나(Persona)는 잠재적 사용자 및 구매자들의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 원형으로, 사용자를 보다 면밀하게 분석하기 위해, '공통된 경험 특성을 가진 사용자(Persona)'를 정의하여 그들의 이용행태와 동기, 니즈, 태도 등을 서술하게 하는 방법임
세부활동
1. 페르소나(Persona) 분류 및 정의
목표
사용자들이 제품/서비스에 대해서 중요시 여기는 가치(니즈의 중요도에 따라 어떤 영역에 가치를 두는지 분석)에 따라서 사용자를 구분하여 정의함
활동
- 맥락적 인터뷰 등 다양한 조사기법을 통해 수집한 제품/서비스를 찾는 이용동기에 따라서 사용자를 구분함
- 동일한 가치, 동기를 가진 사용자들을 행태(빈도, 탐색방법, 이용시간/장소, 이용경로, 기타 특징)별로 구분함
- 동일한 가치, 동기, 행태를 가진 사용자들을 태도(인지도, 충성도, 경험/지식, 동기강도, 만족도)별로 구분함
- 모형크기, 중요도, 발전가능성을 토대로 1순위 사용자(Primary User Group)/ 2순위 사용자(Secondary User Group)/ 기타(Ignorable)로 분류함
- 사용자들의 가치(니즈), 이용동기, 행태, 태도에 따라 분류하고, 분류한 결과를 토대로 페르소나(Persona)를 정의함
- 각 페르소나별 특징들을 토대로 별명을 붙임
TIP
잘 만들어진 페르소나(Persona)는 누가 우리 제품/서비스를 이용하는지, 이용 특성에 따른 사용자 유형을 쉽고 명쾌하게 이해할 수 있도록 도움
잘못 만들어진 페르소나(Persona)는 있으나 마나 한 군더더기에 불과하며 통계분석을 통해 나온 결과를 그대로 반영할 뿐임
2. 페르소나(Persona) 작성
목표
정의된 페르소나(Persona)들을 서술하는 문서를 작성함
페르소나(Persona)에 대한 최종적인 산출물 형태가 됨
작성내용
(밑줄은 필수항목)
- 사용자 별명
- 사용자 정보 및 간단한 프로파일
- 사용자가 제품/서비스에 대해 갖는 태도
- 사용자에 대한 구체적인 정보
(인구 통계학적인 정보, 제품에 대한 이용정보) - 사용자의 니즈
- 공급자 기대(Business Objectives)
- 동기
- 동기별 이용 시나리오
- 시나리오별 이용 기능/콘텐츠
- 시나리오별 구체적인 이용행태
** 참조서식, 페르소나

출처 : UX1, UX Consultant 과정 中 발췌
TIP
사용자들의 특징과 차이가 분명해야 하며, 실제 사용자처럼 느껴져야 하며 모든 사용자를 포괄해야 하며, 의사결정에 영향을 미치는 시사점이 있어야 함
잘 만들어진 페르소나(Persona)에는 각 페르소나(Persona)별 특징과 이용동기, 이용 시나리오, 니즈와 고민점(Pain Points)등이 자연스럽게 녹아들어 있음
잘못 만들어진 페르소나(Persona)에 대한 묘사는 억지스러우며, 구체적이지 못하고 이미 알고 있는 사실을 정리했을 뿐임
3. 페르소나(Persona) 활용
목표
정의된 페르소나(Persona)를 이후 이루어지는 UX 디자인 작업에 활용하여 주요 의사결정과 상세 디자인 수행에 활용함
활용분야
- 사용자 시나리오 작성 : 페르소나(Persona)별로 사용자 시나리오를 작성함
- 기능 정의 : 페르소나(Persona)별로 주요 기능, 세부 기능의 필요여부를 작성하여 체크리스트로 활용함
- 레이블 정의 : 주요 페르소나(Persona)들에게 익숙한 용어 및 표현을 통해 레이블을 정의함
TIP
잘 만들어진 페르소나(Persona)는 '시장 매력도 분석(마케팅)'보다 더 큰 통찰을 제시하며, 어떤 페르소나(Persona)가 가장 매력적이며 성장 가능성이 높은지 판단할 수 있음
잘못 만들어진 페르소나(Persona)는 통찰도 얻을 수 없고 의사결정도 내리기 어려움, 어떤 경우에는 '시장 매력도 분석'과 거의 비슷해서 '이 작업을 왜 해야하는지 조차 헷갈리는' 경우도 있음
맥락적 인터뷰(Contextual Interview)
어피니티 다이어그램(Affinity Diagram)
컨셉 모델 정의
컨셉모델은 여러가지 추상적인 컨셉들 사이의 관계를 보여주는 다이어그램임
다양한 아이디어들을 간편하게 시각화하여 표현할 수 있는 유용한 방법으로 아이디어를 잘 전달하는 것 뿐만 아니라 생각의 과정을 효율적으로 이끌어 줌
또한 문서의 작성자에게뿐만 아니라 문서를 활용하는 사람들에게도 그 프로젝트를 시작하기까지 생각해본 적 없었던 복잡한 아이디어들과 관계들을 고민해볼 수 있는 기회가 됨
세부활동
1. 컨셉 모델 정의
목표
컨셉모델은 여러가지 추상적인 컨셉들 사이의 관계를 보여주는 다이어그램으로, 서비스/제품을 기획할 때, To-Be모델을 가시화해서 검토하기 위해 정의함
활동
- 구성 요소 중 '명사'에 해당하는 Entity를 친화도에 따라 Grouping함. Key Entity는 별도로 배치함(그룹 안으로 포함시키면 핵심가치가 사라질 수 있음)
- 각 Entity들을 '동사'에 해당하는 Relation들로 연결시킴
- Entity의 중요도로 크기, 색상 등을 결정하여 조절하고, Relation의 흐름안에 거쳐 지나가는 Entity들을 Relation 자체를 넓은 화살표로 표현하여 그 과정에 포함시킴
Flickr의 컨셉모델

참조 : http://www.flickr.com/photos/bryce/55749985/sizes/o/
상단의 사용목적이 표현되어 있으며, 각 객체(Flickr User, photos, Subject)가 다른 사용자 그룹이나 컨텐츠에 어떻게 녹여지고 사용될 수 있는지 그 아래에 텍스트 /이미지/도형 /선을 이용하여 잘 표현되어 있고, 그 흐름들이 유기적으로 얽혀있음
각 흐름에서 사용자 위치와 사용가능한 행동이 자세하게 묘사되어 있음 자세한 묘사는 프로젝트 관련자들의 커뮤니케이션을 원활하게 함
브레인스토밍 (Brain Storming)
어피니티 다이어그램(Affinity Diagram)
사용자 요구사항 정의
리서치 및 페르소나(Persona)결과물을 토대로 요구사항을 도출하고 여과하여 요구사항의 우선순위를 정함
페르소나(Persona)를 중심으로, 우선순위를 중심으로, 시나리오를 중심으로 요구사항을 정의할 수 있음
세부활동
1. 요구사항 매트릭스 작성
목표
다양한 경로를 통해 수집된 직접적인 요구사항을 검토하여, 페르소나(Persona)의 목적을 기준으로 데이터 니즈, 기능 니즈, 제품 품질, 제약 요인으로 요구사항 매트릭스를 작성함
요구사항 요소
- 데이터 니즈 : 각 페르소나(Persona)의 멘탈모델과 객체들의 주요 특성과 관련된 데이터 객체들을 모아 정리되며(데이터 객체 리스트), 인터페이스에 영향을 주므로 초기에 확인해야 함
ex) 이메일 메시지의 속성은 제목, 발신인, 발신일, 참조인, 답변 등 - 기능 니즈 : 사용자가 목적을 이루기 위해 무엇을 해야하는지 동사형으로 설명함. 기능 니즈 리스트로 정리되며, 할 수 있는 최대한 철저하게 해야함
ex) 페르소나(Persona)는 이메일 메시지를 읽고, 삭제하며, 특정 양식으로 다른 메시지들과 함께 보관할 수 있음 - 제품/서비스의 품질 : 데이터 및 기능 니즈 외에 중요하게 고려해야 할 여러가지 속성으로 제품 품질이라 부를 수 있으며 감성적 품질도 고려해야 함
ex) 얼마나 빨리 시스템이 파일을 처리하는 지와 같이 실용적이고 정량화 할 수 있는 요구사항들을 포함함 - 제약 요인 : 제품 출시 데드라인, 개발 및 제작 비용, 시스템이 준수해야 하는 규제 등이 포함되며, 제약 사항의 강도(변경가능, 변경불가 등)가 논의되어야 함
[요구사항 매트릭스]
자료 | 데이터니즈 | 기능니즈 | 제품품질 | 제약요인 | |
---|---|---|---|---|---|
1순위 페르소나 (Primary User Group) |
시나리오 멘탈모델 목적 환경 기술과 능력 |
||||
2순위 페르소나 (Secondary User Group) |
|||||
이해관계자, 경쟁자, 규제 등 |
2. 정황시나리오 제작
목표
정황 시나리오(Contextual Scenario)는 요구사항 정의에 사용되는 초기 시나리오를 말하며, 높은 수준, 낙관적이면서도 발생 상황에서의 이상적인 시스템 동작에 초점을 맞춤
제품/서비스가 어떤 모습을 가져야 하는지 상상하는 첫번째 활동으로, 페르소나(Persona) 관점에서 시나리오를 작성함
활동
-
필요한 정황 시나리오를 확인함
- 페르소나(Persona)가 관여하고 싶어하는 주요 활동들의 전형적인 예를 포함하고 있어야 하며, 함께 발생되는 활동들은 하나의 시나리오에 통합되어야 함
- 1순위 페르소나(Persona)의 주요 활동에 기반을 두고 리스트 작성 후, 2순위 페르소나(Persona)의 활동 포함여부를 검토함
-
개별스토리를 개발함
- 리스트로 정리된 각각의 상황에 대해 페르소나(Persona)의 스토리(서술적으로 해당 상황을 표현)로 서술함
- 육하원칙으로 서술하며, 세부사항을 적절히 조절하여 간결하면서 전달력있게 작성함
-
다른 사람에게 정황 시나리오를 검토해달라고 부탁함
- 정황 시나리오 작성에 대한 지식이 많고 그동안 리서치에 참가했던 팀 리더 혹은 영역전문가가 가장 적합함
유즈케이스, 유저스토리, 정황 시나리오
유즈케이스는 행위자와 시스템 사이의 인터랙션을 묘사하며, 일반적으로 다이어그램형식으로 묘사됨
사용자들이 인터랙션에 대해 어떻게 느끼는지 또는 왜 특정 동작이 바람직한지 다루지 않으며, 또한 페르소나(Persona)를 이용하지 않음
유저스토리는 스크럼(Scrum) 등에서 사용되며, 시나리오와 비슷하게 보이지만 요구사항에 가까움. 사용자의 작업 흐름을 처음부터 끝까지 묘사하지 않음
시나리오는 사용자가 최종 목표를 달성하기 위한 방법을 순차적으로 묘사함
3. 정황 시나리오로부터 요구사항 도출
목표
정황 시나리오 리스트를 토대로 상세히 작성된 개별 시나리오로부터 관련 요구사항을 작성함
시나리오 외의 다른 자료(멘탈모델, 목적, 환경, 기술과 능력, 비즈니스 및 다른 니즈, 이해관계자, 규제, 경쟁자, 접근성, 지속가능성 등)으로 부터 요구사항을 도출함
[ 정황 시나리오 리스트 도출 예시 ]
제품 | 페르소나 | 시나리오 | |
---|---|---|---|
이메일 시스템 | 간단한 니즈를 지닌 시스템 관리자(1순위 관리자) |
- 시스템 설정 - 계정 추가 |
- 설정 변경 - 계정 삭제 |
모바일 이메일 사용자(2순위 최종 사용자) | |||
- 원격 사용 |
** 출처 : 인간중심 UX디자인, 킴굿윈, 에이콘출판사
[ 시나리오에서 요구사항 도출하는 과정 예시 ]
시나리오 | 요구사항 |
---|---|
긴 회의가 끝난 후 앤은 PA(Personal Assistant)를 꺼냈다. 그녀가 조치해야 할 항목들을 기록하고 다음 회의 장소를 확인하는 한편, 지난 두시간 동안 중요한 일이 발생했는지 살펴봐야 했기 때문이다. |
- 문자를 입력할 수 있어야 한다. - 약속을 추적할 수 있어야 한다. - 메시지의 리스트를 볼 수 있어야 한다. - 휴대 가능한 폼 팩터 |
** 출처 : 인간중심 UX디자인, 킴굿윈, 에이콘출판사
시나리오(Scenario)
*어피니티 다이어그램(Affinity Diagram)
UI 컨셉션
정리된 요구사항을 바탕으로 UX전략에 따라 구체화하는 단계로, 화면 디자인 단계 전에 대표 화면 설계를 진행하는 단계임스케치로 정리되는 페이퍼 프로토타입(Paper Prototype)부터, 시연이 가능한 디지털 프로토타입(Digital Prototype)까지 프로젝트에 맞게 선택적으로 진행함UX전략을 실제 구현하여, 사용자들의 컨셉 수용성과 사용성을 검토한 결과물을 토대로 실제 개발을 위한 상세 화면 설계로 진행됨
세부활동
1. 정보구조(Information Architecture) 설계
목표
정보 구조화와 분류 체계를 수립, 사용자 요구사항을 토대로 기능 구조를 도출, 메뉴 구조를 작성하고 네비게이션과 레이블링을 정의함
활동
-
기능 그룹핑
- 시나리오로부터 도출된 요구사항, 기능들을 포스트잇에 나누어 쓰고 카드소팅 기법을 활용, 그룹핑하여 그룹의 이름을 정하는 과정을 거침
- 기능을 어떻게 묶느냐에 따라 정보/기능 구조가 달라지므로 인터페이스의 구조(ex : 메뉴구조, 화면 구성 등)를 고려해야 함
- 카드소팅(Card Sorting)을 사용하여 다양하게 그룹핑을 시도하면서 정확한 기능구조를 정하는 것이 중요함
-
각 그룹의 중요도/사용빈도를 바탕으로 연결/순서관계를 결정
- 이 단계에서 인터랙션 디자인에 어떤 메타포를 도입할 것인지 결정하는 것이 좋음. 어떤 메타포를 도입하느냐에 따라 기능의 연결관계가 달라지기 때문임
- 스케치를 통해 대략적으로 기능구조를 정의함
2. 대표화면 와이어 프레임 스케치
목표
인터페이스 디자인이 시각적으로 구체화하기 위해 와이어프레임(대표적인 화면들에 포함되는 정보, 인터페이스 요소, 그들의 레이아웃)을 대략적으로 스케치함
설계원칙
- 메타포를 활용하라.
- 기본 모드를 신중하게 결정하고 사용자 이력에 따라 똑똑하게 변하게 하라.
- 사용자가 기억하게 하지 마라('회상' 보다 '인식';)
- 사용자의 실수를 방지하거나 복구할 수 있는 방법을 제공하라.
- 모든/특정 사용자의 모든 태스크 상황, 사용케이스, 시나리오를 고려하라.
- 시스템의 현재 상태를 명확하게 가시화하라.
- 인터페이스를 접어 복잡도를 낮춰라.
- 사용자의 태스크 수행에 연속성을 부여하라. 팝업을 최소화 하라.
- 모든 상황에서 반드시 의도된 행위를 유발하도록 설계하라.(행동 유도성)
- 태스크 수행절차를 일관되게 하라.
** 참조서식, 와이어프레임 스케치
TIP
와이어 프레임 스케치 전, 공통적인 인터페이스 요소(예: 옵션버튼, 체크박스, 텍스트 입력필드 등)가 정의되어 있지 않다면 먼저 그것부터 설계해야 함
와이어 프레임 스케치를 토대로 주요 화면의 디자인이 결정되므로 하나의 디자인만 스케치하기보다는 여러 디자인 안을 스케치해서 비교하는 것이 좋음
사용자 요구사항과 UI설계 원칙을 함께 고려하여 설계해야 함(iOS나 Android OS 기반의 앱을 개발하는 경우, 애플과 구글의 사용자 인터페이스 가이드라인을 따르면 됨)
3. 페이퍼 프로토타입(Paper Prototype)을 통한 스토리보드 설계
목표
인터랙션을 고려하여 주요 흐름(Key Flow)을 스토리보드 형태로 그림
UI 컨셉션의 결과물을 사용자에게 평가받아 신속하게 문제점을 발견하고 개선하는 것이 중요함하지만 대표화면 와이어프레임만으로는 인터랙션 상의 문제점을 발견하기 어려워 페이퍼 프로토타입(Paper Prototype)평가를 활용함
제품/서비스 개발 초기에 별도의 하드웨어나 소프트웨어를 사용하지 않고도 제품의 디자인 컨셉, 사용성, 기능 동작 등을 빠르고 반복적으로 검증하는데 활용됨
활동
- 대표화면, 인터페이스 위젯(아이콘, 팝업, 체크박스 등), 물리적 버튼을 사용하여 인터랙션의 흐름이 보이도록 스토리보드를 제작함
-
사용자가 페이퍼프로토타입을 실제 상황인 것처럼 사용하면, 컴퓨터 역할을 맡은 사람이 인터랙션을 시뮬레이션함
- 컴퓨터 역할을 맡아 종이를 조작하는 사람 1~2명 : 현재 인터페이스에 대한 이해도가 제일 높은 사람으로 가장 중요한 역할
- 진행자(Facilitator, 평가진행자) 1명 : 사용자에게 수행할 태스크를 제시하고 질문에 대답하는 등 실험을 진행
- 관찰자(Observer, 관찰/기록 하는 사람) 1명이상 : 사용자의 말과 행동을 관찰하여 사용자가 겪는 어려움이나 설계의 문제점을 기록하는 사람
- 위의 사용자 평가결과를 토대로 와이어프레임, 인터랙션 설계를 개선, 상세설계(UI시나리오 문서 작성)로 진행함
TIP
페이퍼 프로토타입(Paper Prototype)을 활용할 수 있는 단계는 디자인 컨셉 결정 단계, 인터랙션 디자인 과정에서 사용성 문제를 파악하는 단계에 활용 가능함
UI컨셉, 기능/버튼 배치, 요구정보, 레이블, 피드백 적합성 등을 신속하게 평가하는 데 유용함
개발팀 간 혹은 개발팀과 고객 간 의사소통을 원활하게 해줌
카드 소팅(Card sorting)
페이퍼 프로토타입(Paper Prototype)
GUI 컨셉션
와이어프레임 스케치와 함께, 화면 디자인의 시각적 컨셉을 설명하기 위한 작업으로, 컨셉 단계에서의 GUI 디자인은 참고 이미지, 벤치마킹 이미지 등을 활용하여 무드보드로 표현하여 이해를 도움, 경우에 따라 시안을 제작하기도 함
세부활동
1. GUI 이미지 무드보드 제작
목표
화면 디자인의 시각적 컨셉을 설명하기 위한 작업으로, 레이아웃, 타이포그래피, 참고 이미지 등을 활용하여 디자인 개발 컨셉을 표현, 개발방향성의 이해를 도움
활동
- UX전략에 따른 화면 디자인 방향(시각디자인 언어)을 설정함
- 이미지 수집 및 아이디어 발상을 진행함
-
프리젠테이션을 위한 이미지보드(무드보드)작성 또는 러프한 디자인 시안을 제작함
- 심미성, 간결성, 목적부합성, 장식성 등 시각적 언어를 기준으로 벤치마킹 GUI 이미지를 맵핑하고, 개발 방향에 적합한 포지셔닝을 설정함
- GUI 벤치마킹 사례, 다른 시각 디자인, 사진 등의 이미지를 참고하여 디자인 컨셉을 참고할 수 있도록 함
- 대표 메타포, 아이콘의 스타일, 폰트와 컬러 등의 예시를 제시함
[ UX전략에 따른 화면방향 설정 ]

출처 : http://cfile201.uf.daum.net/image/2029544950C9D97535BF0D
[ 이미지 무드보드 예시 ]

출처 : http://wireframes.linowski.ca/wp-content/themes/darwin/images/full70.jpg
** 참조서식, 무드보드
벤치마킹
무드보드
시안 디자인(Concept Design)
설계 및 구현
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
UI 상세 설계 | UI 상세 설계 | UI 시나리오 문서 |
- 단계 시작 전 UI/UX전략의 참여인력간 공유 - 사용자 관점의 UI설계 - 규격화된 문서 작성 - 커뮤니케이션 오류 검토 - 단계 종료 후 UI/GUI 개발의 UX전략 일관성 검토 |
GUI 화면 디자인 | GUI 템플릿 제작 및 화면디자인 GUI 가이드 문서 작성 |
GUI 스타일 가이드 GUI 화면 디자인 |
- GUI 디자인의 차별성 |
UI/GUI 검증 | UI/GUI 시연을 통한 사용성 검토/검증 | GUI 가이드 문서 사용성 검토 보고서 |
- GUI 가이드문서의 명확성
- 적절한 테스트 방법, 평가대상자 선정 |
UI 상세설계
UX 컨셉션 단계에서 작성된 UI 컨셉션의 결과물(UI 설계시안)을 토대로 실제 설계 및 구현을 위한 모든 화면에 대한 UI 상세 설계 단계를 진행함
UI 시나리오 문서는 사용자 인터페이스의 기능구조, 대표화면, 화면간 인터랙션 흐름, 그리고 다양한 상황에서의 예외 처리방식 등을 문서로 정리한 것임 '효율적인 UI관리'와 그래픽 디자이너, 소프트웨어 개발자, 품질 관리자 등 다른 개발자들과의 '원활한 의사소통' 을 위한 것임
세부활동
1. UI 시나리오 문서 작성
활동
- 전체 기능을 한 눈에 이해할 수 있도록 기능 구조를 작성하며, 일반적으로 계층구조 또는 플로차트 표기법으로 작성함
- 모든 기능에 대해 공통적으로 적용되는 UI요소와 인터랙션을 일반 규칙으로 정의함
- 대표화면(시나리오에 포함되는 서로 다른 형태를 가진 독립적인 화면들)의 레이아웃과 그 화면들 속의 기능을 정의함
- 인터랙션(페이퍼프로토타입에 의해 발견된 문제점들을 모두 개선한 최종 인터랙션) 흐름을 정의하며, 화면 내 그리고 화면 간 인터랙션의 순서(sequence), 분기(Branch), 조건(Condition), 그리고 루프(Loop)등을 명시함
- 여러 예외 상황들에 대한 예외 케이스를 정의함
(보통 소프트웨어 개발자나 품질 관리자들이 UI시나리오 문서에 대해 가장 불만을 많이 드러내는 부분이 예외 케이스 정리가 부족한 점임) - UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오를 정의함
** 참조서식, UI 시나리오_스토리보드
[ UI 시나리오 문서를 위한 일반 규칙 정의 ]
주요 키의 위치와 기능 | 화면상에 공통적으로 배치되는 주요 키의 위치와 기능을 설명한 것으로 여러 화면간의 일관성을 보장하기 위한 것 |
---|---|
공통 UI 요소 | 체크박스, 라디오 버튼, 스크롤바, 텍스트 입력필드, 상하/좌우 휠, 모드설정, 탭, 팝업 등의 각 UI 요소를 언제 사용하며 어떤 형태인지 정의하고 사용자의 조작에 어떻게 반응하는지 상세하게 그 흐름을 설명한 것 |
기본 스크린 레이아웃 (Basic Screen Layouts) |
여러 화면 내에 공통적으로 나타나는 Indicators, Titles, Ok/Back, Soft Key, Option, Functional Buttons등의 위치와 속성을 정의한 것으로서 여러 기능들 간에 화면 레이아웃의 일관성을 보장하기 위한 것 |
기본 인터랙션 규칙 (Basic Interaction Rules) |
터치 제스처 등의 공통적으로 사용되는 조작의 방법, 홈키의 동작방식과 같은 운항규칙, 실행, 이전, 다음, 삭제, 이동 등의 화면 전환 효과 등에 대해 기술한 것 |
공통단위 태스크 흐름 (Task Flows) |
많은 기능들에 공통적으로 자주 나타나는 삭제, 검색, 매너모드 상태에서의 소리 재생 등의 인터랙션 흐름을 설명한 것 |
케이스 문서 | 다양한 상황에서의 공통적인 시스템 동작에 대해 정의한 문서 (ex. 사운드, 조명, 이벤트 케이스 등) |
2. UI 시나리오 문서 작성의 팁
Complete(완전성)
(누람 됨이 없이) 완전해야 함
최대한 빠진 것이 없도록 가능한 상세하기 기술함
시스템 기능보다 사용자의 태스크에 초첨을 맞춰 기술함
Consistent(일관성)
(서비스 목표/시스템/사용자요구사항과) 일관성이 있어야 함
문서마다의 UI스타일(Flow or Layout)을 일관되게 구성함
Understandable(이해성)
(처음 접하는 사람도) 이해하기 쉽도록 구성하고 설명함
애매모호하거나 추상적인 표현이나 이해하기 어려운 용어의 사용은 지양함
Readable(가독성)
문서를 쉽게 읽을 수 있어야 함(문서 템플릿과 타이포 그래피)
표준화된 템플릿을 제정하여 적용함(회사마다 고유 문서양식 정의)
일관성 있는 버전 넘버링(예 v1.0, v2.1.1등), 문서인덱스 규칙 적용, 목차 제공 중요함
충분한 줄간격 유지, 단락구분과 들여쓰기 기준을 적용하여 읽기 편하게 해야 함
적절한 여백/빈 페이지 활용 등으로 여백의 미를 살리면 좋음
시각적인 하이라이팅을 일관성 있게 활용해야 함
파워포인트의 상호참조(Cross-referencing) 기능 (예:하이퍼링크 등)을 활용함
Modifiable(수정 용이성)
변경이 용이해야 함
수정/개선 사항을 시나리오에 반영하는 것이 수월해야 함
하나의 동일한 사항 수정을 위해 문서 여기저기를 편집해야 하는 것은 좋지 않음
Traceable(추적용이성)
추적이 가능해야 함
어떤 변경사항들이 언제, 어떤 부분들에, 왜 발생했는지 추적이 용이해야 함
모범적인 UI시나리오 문서의 효과
요구사항 오류의 감소
의사소통 오류의 감소
개발과정에서의 재작업 감소, 혼선 최소화
불필요한 기능의 최소화
시나리오 작성과 소프트웨어 개발 비용 절감
개발속도 향상
유관부서 만족도 제고
3. UI검토(Iteration)
목표
UI 상세 설계 단계에서 사용성에 대한 반복적인 검토를 통해 완성도 높은 UI 상세 설계를 수행함
UI 스토리보드를 활용하여 페이퍼 프로토타입 평가를 통해 짧은 단위로 개발, 평가, 보완을 반복함
활동
- 대표화면, 인터페이스 위젯(아이콘, 팝업, 체크박스 등), 물리적 버튼을 사용하여 인터랙션의 흐름이 보이도록 스토리보드를 제작함
-
사용자가 페이퍼 프로토타입을 실제 상황인 것처럼 사용하면, 컴퓨터 역할을 맡은 사람이 인터랙션을 시뮬레이션해줌
- 컴퓨터 역할을 맡아 종이를 조작하는 사람 1~2명 : 현재 인터페이스에 대한 이해도가 제일 높은 사람으로 가장 중요한 역할임
- 평가진행자(Facilitator) 1명 : 사용자에게 수행할 태스크를 제시하고 질문에 대답하는 등 실험을 진행함
- 관찰/기록자(Observer) 1명 이상 : 사용자의 말과 행동을 관찰하여 사용자가 겪는 어려움이나 설계의 문제점을 기록하는 사람임
- 위의 사용자 평가결과를 토대로 설계를 보완함
GUI 템플릿 제작 및 화면 디자인
화면 디자인에 활용될 레이아웃, 컬러 패턴, 타이포그래피, 화면 디자인 요소 등을 정의하는 단계임
템플릿 제작을 통해 페이지 전체적으로 통일감 있게 만드는 것이 기본적인 목표이며, 잘 정의된 템플릿을 통해 소프트웨어의 시각적 아이덴티티를 가질 수 있음
레이아웃과 함께 타이포그래피도 템플릿의 중요한 요소임
화면디자인에 반복적으로 사용될 요소를 미리 디자인하여 활용함으로써, 팀 작업시 많은 페이지를 디자인하는 환경에서 일관성을 지킬 수 있음
세부활동
1. GUI 스타일 가이드 제작
목표
스타일가이드는 일관성 있는 화면 디자인을 위해 레이아웃, 컬러패턴, 타이포그래피, 화면 디자인 요소들을 팔레트처럼 미리 정의하여 반복적으로 활용하기 위한 것임
활동
- GUI 컨셉 수립 : GUI 컨셉션의 결과물을 토대로 상세한 GUI 디자인 컨셉을 수립함
- 컬러 컨셉 수립 : 메인컬러, 서브컬러, 포인트컬러, 폰트컬러를 정의함
- 폰트를 정의함
TIP
개발자에게 주요 컨셉과 디자인 원칙, 패턴을 효과적으로 전달하려면 디자인 문서가 필수적임
최종 결과물을 바탕으로 제품 구현 과정을 함께 지켜보고 지속적으로 의견을 주고 받아야 함
[GUI 스타일 가이드 예시 ]

참조 : http://baekhorang.tistory.com/entry/XFile
2. 세부화면디자인
목표
UI 시나리오 문서를 토대로 GUI 스타일가이드와 템플릿 디자인을 활용하여 전체 페이지에 대한 화면 디자인을 수행함
일관성 있게 스타일가이드를 적용하여, 팀 작업 및 추후 수정시 오류를 최소화함
GUI 디자인 원칙을 숙지하여, 사용성이 잘 적용된 화면디자인을 수행하도록 함
[ 애플이 제시하는 10가지 디자인 원칙 ]
메타포 | 메타포를 활용하여 개념과 특징을 전달할 수 있도록 디자인, 메타포의 활용은 문화적, 언어적 장벽들을 자연스럽게 극복하게 해준다. |
---|---|
수행활동 | 사용자로 하여금 객체를 직접 제어하고 있는 느낌을 가지도록 한다. 사용자는 자신의 행동으로부터 물리적인 결과를 기대할 뿐만 아니라 반응이 나타나기를 바란다. |
보고 선택하기 | 사용자가 기억에 의해 행동하지 않고, 인지를 통해 행동하도록 한다. |
반응과 대화 | 사용자에게 시스템이 무슨 일이 일어나고 있는 지를 계속 알려주어야 한다. 가능한 한 즉각적으로 시각적 혹은 청각적으로 반응을 제공한다. |
관대함 | 관대함을 기본적으로 제작해, 시스템에 손상을 주지 않으면서 편안하게 작업하도록 지원하여야 한다. |
정보를 시각적으로 표현 | 정보를 잘 조작하여 시각디자인 원칙에 일치하도록 표현한다. 너무 복잡하거나 사용자에게 부담을 주는 표현은 적절하지 않다. |
사용자에 대한 이해 | 사용자로 하여금 프로토타입과 개발될 제품들을 테스트하도록 한다. 컴퓨터의 능력이 아닌, 사용자와 사용자 능력을 염두에 두어야 한다. |
접근 가능성 | 개발자가 상상한 평균 사용자와의 다른 대상 층을 염두에 두어야 한다. 제품 개발 시작 단계부터 대상 사용자의 문화적, 언어적 요구와 기대사항에 유의해야 한다. |
조직성 | 사용자에게 일관성 있는 개념적 구조를 제공하도록 한다. GUI 디자인에서 일관성, 스크린 레이아웃, 항해성 등의 하부원칙들이 지켜져야 한다. |
경제성 | 최소한의 실마리로 효율을 극대화 하는 것으로, 경제성의 개념은 간결성, 명료성의 하부 원칙과 함께 중요 정보를 다른 정보와 차별화시키고 강조함으로써 달성된다. 간결성이란 디자이너가 커뮤니케이션을 위해 꼭 필요한 요소만을 디자인하는 것을 의미한다. |
3. GUI 검토 (Iteration)
목표
GUI 화면 디자인 단계에서 디자인 선호도 및 디자인 품질을 검증하여, GUI 가이드문서 작성 후 디자인 수정에 따른 반복적인 가이드문서 작성 작업을 최소화함
GUI 화면 시안 또는 시뮬레이션(플래시 등을 활용하여 화면의 동작을 구현한 버전)을 활용한 고수준 프로토타입 평가를 통해 짧은 단위로 개발, 평가, 보완을 반복함
활동
- 사용자가 고수준 프로토타입을 실제 상황인 것처럼 사용해보는 평가를 진행함
- 사용자 평가 결과를 토대로 디자인을 보완함
GUI 가이드 문서 작성
최종 확정된 화면디자인문서를 개발팀에 이관하기 위해 작성함
개발에 관련된 컬러, 폰트, 이미지 슬라이스, 이미지 및 여백에 대한 좌표값, 크기 정의 등을 문서화 함
1.0버전이 배포된 후, 개발이 진행되면서 발행하는 UI 수정 사항, GUI 수정 사항들을 지속적으로 반영하는 유지보수작업을 진행함
세부활동
1. GUI 가이드문서 작성
목표
확정된 화면 설계 및 디자인을 적용하여 개발팀에 전달하게 되는 최종 데이터를 작업하는 단계임
개발이 진행되면서 개발부서의 설계변경에 따른 디자인 수정사항을 지속적으로 수정, 반영하여 개발팀에 전달할 때, 데이터의 정확도와 적절한 설명을 통한 원활한 커뮤니케이션을 위해 정확한 GUI 가이드 문서 작성이 필요함
활동
- GUI 가이드문서 작성 및 문서를 관련부서에 배포함
- 수정사항에 대해 확인 및 반영함
- 변경이력을 관리함
** 참조서식, GUI 가이드문서
[ GUI 가이드문서 예시 ]

출처 : http://www.jjim.com/v7/files/201103/130132330007.jpg
UI/GUI 시연을 통한 사용성 검토/검증
소프트웨어의 개발이 진행되면서, 스크린별 레이아웃과 대부분의 인터랙션이 적용된 고수준(High-Fidelity)의 프로토타입을 이용하여 내부 개발자, 전문가 평가 등을 통해 지속적인 UI 사용성 평가와 GUI 디자인 평가를 진행하여 개선사항을 반영함
세부활동
1. 사용성검토, 결과 분석 및 수정사항 반영(Iteration)
목표
고수준(High-Fidelity)의 프로토타입을 활용 소프트웨어 개발과정 중 내부 개발자 및 전문가를 활용한 사용성 검토를 수행하면서 프로토타입에 대한 다양한 의견들을 수집, 분석하여 최종 개발에 반영함
활동
- 검토계획을 수립함
- 검토 대상자를 정의하고 모집함
- 태스크와 질문사항을 준비함
- 검토를 진행함
- 검토 결과를 분석하고 반영함
TIP
설계가 변경될 수 있다는 점을 미리 고려, 가능한 경우 몇 가지 안을 미리 만들어 사용자 테스트 시에 제공하는 것이 좋음
성능(Performance) 평가, 선호도(Preference) 평가 등 평가항목에 적합한 평가방법을 수행함

http://uxmovement.com/wp-content/uploads/2012/11/image02.png
고수준(High Fidelity) 프로토타입 평가
*휴리스틱(Heuristic) 평가
*선호도(Preference) 평가
*성능(Performance) 평가
테스트
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
사용성 테스트 계획 수립 | 사용성 테스트 계획 수립
사용성 테스트 설계 |
사용성 테스트(UT) 계획서 |
- 적절한 테스트방법, 평가대상자 선정 - 단계 시작 전 UI/UX전략의 참여인력간 공유 |
사용성 테스트 수행 | 사용성 테스트 수행 | ||
사용성 테스트 결과 분석 | 사용성 테스트 결과 분석 | 사용성 테스트(UT) 분석서 | - 사용성 테스트(UT) 분석서 |
사용성 테스트 계획 수립
소프트웨어 최종 배포전 일반 사용자를 대상으로 SW의 사용성을 검증하는 사용성 평가에 대한 계획을 수립하는 단계임
전문가가 아닌 일반인 사용자를 대상으로 적절한 테스트 방법과 평가 대상자를 선정함
테스트 시나리오 및 테스트 케이스를 체크하면서 효과적인 사용성 테스트 계획을 수립함
세부활동
1. 사용성 테스트 계획 수립
목표
사용성 테스트의 목표,도구, 방법을 명시함
이 테스트에서 무엇을 얻어야 하는가? 테스트를 어떻게 진행할 것인가? 테스트 중에 무엇을 물을 것인가? 에 대해 계획함
소프트웨어 최종 배포전 시행하는 평가로, 프로젝트 초기에 사용성 평가를 수행했다면 비교평가를 통해 개발개선정도를 평가하는 계획을 수립할 수 있음
활동
- 평가 목적을 정의하고 대상을 분석함
- 사용자 집단과 테스트 환경을 정의함
- 태스크 및 질문사항을 준비함
** 참조서식 : 사용성 테스트 계획서
사용성 평가 계획서 작성항목 예시

출처 : 댄브라운, UX DESIGN COMMUNICATION, 위키북스, 2009
2. 사용성 테스트 설계
목표
일반적이고 추상적인 테스트의 목적을 구체적인 상황과 테스트 케이스로 변환함
활동
- 테스트 설계 : 단일/비교 테스트를 설계하고, 질적/양적 결과 데이터를 정의함
- 테스트 참가자 선정 : 참가자 수 결정, 참가자 무작위 추출, 참여 안내/동의서를 작성함
- 과업 선정 : 과업분석, 순서/지침을 작성함
- 질문지 인터뷰 작성 : 사전/사후 설문서, 사후 인터뷰 항목을 작성함
사용자 프로파일(예시)
개인이력 |
나이 성별 컴퓨터에 대한 우호 정도 오른손/왼손잡이 여부(마우스 사용에 영향을 줄 수 있는 요인) 학습스타일(직접 경험을 통해 배우는 것을 선호하는지, 독서를 통해 간접적으로 배우는 것을 좋아하는지 등) |
---|---|
학력 |
최종 학력 수강과목 전공 |
컴퓨터 경험 |
사용시간 사용빈도 사용기종/장치 사용 OS(Operating System) 사용한 스크린 인터렉션 종류(GUI, DOS) |
제품 경험 |
사용시간 사용빈도 수행한 과업의 종류 및 빈도 회사 제품의 사용자 여부 |
직업 이력 |
현재 및 이전 직종 담당업무 이수한 직업교육 현재 직장 복무 기간 |
** 출처 : UX1, UX Consultant 과정 중 발췌
사용성 테스트 수행
테스트 계획 수립 단계에서 작성된 계획서와 설계서를 토대로 실제 사용성 테스트를 수행하는 단계임
사용성 테스트는 효율성과 정확성, 기억, 감성적 반응에 따라 적절한 방식을 선택하여 진행하고 참가자들에게는 최대한 부담이 가지 않도록 테스트를 진행함
세부활동
1. 테스트수행
목표
아래의 항목들에 대해 분석 할 수 있도록 태스크 수행을 통한 사용성 테스트를 진행함
효율성 : 얼마나 시간이 걸리며, 몇 개의 단계를 거쳐서 태스크가 완료되는가?
정확성 : 사용자들이 얼마나 에러를 일으키는가? / 치명적인 에러와 복구가 가능한 에러 중 어떤 에러인가?
기억 : 사용 후 또는 한동안 사용하지 않은 다음에 얼마나 많은 것들을 회상해 낼 수 있는가?
감성적 반응 : 태스크 완료시 사용자들이 받는 감정은? / 긍정적인 경험이 다른 이들에게까지 전파되는가?
활동
- 휴리스틱 평가(Heuristic Evaluation), 상태전이 다이어그램(STDS)등을 활용하여 전문가 사용성 테스트를 진행함
- 정의된 환경, 태스크, 시나리오로 1:1 사용자 테스트를 진행함
- 랩테스트(사용성평가룸에서 테스트), 리모트 테스트(인터넷을 활용한 원격테스트), 필드 테스트(현장테스트)등의 방법을 선택하여 진행함
- 테스트 후 추가설문을 진행하여 사용자의 의도를 파악함
TIP
사전 인터뷰를 진행하여 사용자의 경험과 지식에 대해 파악함
테스트룸과 관찰룸을 구분함
사용성 테스트 진행시 사용자가 자신의 의사를 자유롭게 표현할 수 있도록 유도함
모든 테스트 시나리오 후 사용만족도 수준을 측정함
휴리스틱 평가(Heuristic Evaluation)
1:1 사용자 테스트(User Test)
심층인터뷰(In-depth Interview), 포커스 그룹 인터뷰(Focus Group Interview)
상태전이 다이어그램(STDS, State Transition Diagrams)
온라인 설문(Online Survey)
사용성 테스트 결과 분석
테스트 결과 데이터들을 취합하여 분석하는 단계로 전문 툴들을 이용하거나 직접 비디오를 판독하면서 사용자 반응을 체크함
분석된 데이터는 문서화하여 가이드 자료로 활용하거나, 수정/보안 또는 향후 적용계획에 반영하도록 함
세부활동
1. 사용성 테스트 결과분석
목표
테스트 결과 데이터들을 취합/분석하여 객관적이고 정량화된 값을 도출함
결과 및 진행 상황을 한 눈에 파악 할 수 있도록 하여 문서화를 통한 지속적인 자료로 활용이 가능하도록 정리함
활동
-
테스크 결과를 분석함
- 태스크 성공, 태스크 시간, 에러, 효율성, 학습성 등에 대해 데이터를 분석하고 수행 매트릭스를 작성
- 비디오 분석 및 task analysis등을 활용하여 사용자의 테스트 수행과정을 관찰하거나 자가기록 데이터를 활용하여 데이터를 보강
-
결과 보고서를 작성함
- 사용성 문제점 종합
- 심각성 분석
- 개선안 도출 및 우선 순위 분석
-
문서화함
- 지속적인 자료로 활용
[ 수행 매트릭스 ]
태스크 성공 |
태스크가 포함되어 있는 사용성 연구에서는 항상 계산할 수 있는 태스크 성공은 가장 일반적이고 보편적인 매트릭스임 |
---|---|
태스크 시간 |
시간 기반 태스크는 어떤 제품에서건 효율성을 측정할 수 있는 방법이며, 태스크 완료 시간 또는 단순히 태스크 시간이라고 하기도 함. 대부분 사용자가 태스크를 더 빠르게 완료할수록 더 나은 경험이라 할 수 있으며, 사용자가 기대했던 것보다 짧은 시간 내에 태스크를 완료하는 일은 일반적이지 않음. 테스트 진행자가 스톱워치로 기록하거나, 자동화 툴(Ego Browser, Data Logger, Bailey의 Usability Testing Environment등)을 사용하는 방법, 사용자가 시계 끄고 켜기 방법 등으로 데이터를 수집함 |
에러 |
태스크를 수행하는 동안 사용자가 범한 실수를 수집하여 분석하는 기법으로, 태스크 진행중 얼마나 많은 실수가 있었는지, 이러한 실수가 제품의 어느 부분에서 발행했는지, 디자인에 따라 어떤 종류의 에러가 얼마나 자주 일어나는지, 일반적으로 무엇이 어떻게 유용한지에 대해서 말해줄 수 있음 에러로 인해 데이터가 손실되는 등 효율성에서 중대한 손실을 가져올 때용 에러로 인해 고객센터로 걸려오는 통화량이 증가되는 등 많은 비용을 발생시킬 때 에러가 태스크의 실패를 야기할 때 |
효율성 |
효율성 매트릭스는 태스크를 완료하기 위해서 걸리는 시간뿐 아니라 인지적 노력과 물리적 노력의 양을 중요하게 여길 때 효과적임. 효율성은 흔히 태스크를 완료하는 데 필요한 단계나 행동의 개수에 의해 측정됨, 또는 태스크마다 걸린 평균 시간과 태스크 성공율의 비율에 따라 측정되기도 함 |
학습성 |
학습성은 효율성 매트릭스가 시간이 지남에 따라 어떻게 변하는지를 살펴보는 것임, 참여자들이 언제 어떻게 제품을 사용하는 데 익숙해지는 조사할 때 유용함 |
유저빌리티 매트릭스(수행 매트릭스 , 이슈기반 매트릭스, 자가기록 매트릭스)
배포 및 관리
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
사용자 중심 매뉴얼 작성 가이드 개발 | 사용자 중심 SW 매뉴얼 작성가이드 개발 | 메뉴얼 작성 가이드 | 실사용자의 메뉴얼 이해도 |
UX 요구사항 수집 | UX 요구사항 수집 | 사용자 피드백 보고서 | 사용자 피드백의 지속적인 수집 및 체계적인 정리 |
사용자 중심 매뉴얼 작성 가이드 개발
소프트웨어의 배포 및 관리를 하기 위한 매뉴얼의 작성가이드를 개발하는 단계임
개발자 관점(기능 위주)으로 작성된 매뉴얼을 사용자 중심으로 재구성하여 활용도를 높이고, 소프트웨어의 이해도를 높이도록 함
세부활동
1. 매뉴얼 작성 가이드 개발
목표
기능 설명 위주의 매뉴얼이 아닌 사용자 관점으로 작성된 태스크 위주의 매뉴얼로 재구성하여 활용도를 높이고, 소프트웨어의 이해도를 높이도록 함
사용자의 소프트웨어 이해도 향상으로 소프트웨어 사용 오류를 최소화하고 잦은 오류 발생에 따른 AS 비용을 최소화할 수 있도록 함
활동
- 구버전 매뉴얼, 기능 사양서 등을 참고하여 매뉴얼 컨텐츠의 속성(정보의 종류, 비중, 이미지(그림,표)설명의 필요성 등)을 파악함
- 태크스 위주로 매뉴얼 컨텐츠를 재구성함
- 페이지타이틀, 주요 내용, 참고 내용, 안내문, 주석 등의 주요 컨텐츠의 레이아웃을 디자인함
- 영역별 내용 작성에 필요한 설명문 및 주의사항을 작성하여 템플릿 페이지를 개발함
- 매뉴얼 내용의 일부분을 적용한 샘플 매뉴얼을 작성하여 매뉴얼 작성가이드의 적정성을 검토함
- 매뉴얼 작성 담당자에게 사용자 중심 매뉴얼 작성가이드 및 템플릿페이지(샘플매뉴얼 포함)를 배포함

출처 : Mobico, 'Technical Writing'
UX 요구사항 수집
배포된 소프트웨어에 대하여 사용자의 지속적인 피드백 수집 및 체계적인 정리 단계임
개발자 및 판매자가 아닌 사용자 위주로 정보를 수집하기 위하여 고객센터로 들어오는 VOC(Voice of Customer)들을 중심으로 정보를 수집함
세부활동
1. 사용자 피드백의 지속적인 수집
목표
고객 대응 부서, 영업팀 등으로 들어오는 다양한 사용자의 불만사항, 요구사항을 지속적으로 수집 및 유형화하여 체계적으로 정리함
개발자 또는 판매자, 구매자가 아닌 실사용자의 요구사항을 수집함
활동
- 사용자 요구사항 정보를 수집함
- 결과를 취합 및 정리함
- 즉시반영, 차기 버전에 반영 등 반영의 시기와 정도를 판단하여 적용함
TIP
대규모의 사용자 리서치를 항상 수행하기 어려운 중소기업에서 활용할 수 있는 방법임
이 때 수집된 사용자 피드백의 유형을 토대로, 신규 개발 또는 리뉴얼 시 개선 필요 사항 도출에 활용할 수 있도록 함

출처 : http://www.slideshare.net/june820/4-voc

