best : 사용자 인터페이스의 구분, 사용자 인터페이스의 기본원칙, 설계 지침, 목업, 품질 요구사항, 기능성 신뢰성, 사용성, 이식성, UI요소
11. 사용자 인터페이스
사용자 인터페이스 (UI, User Interface)
UI는 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치 또는 소프트웨어
💡인터페이스 Interface
서로 다른 두 시스템이나 소프트웨어 등을 서로 이어주는 부분 또는 접속 장치를 의미함
인터페이스의 3가지 분야
1) 정보 제공과 전달을 위한 물리적 제어에 관한 분야
2) 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
3) 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야
UI의 특징
- 소프트웨어 영역 중 변경이 가장 많이 발생
- 편리성과 가독성을 높임으로써 작업 시간 단축, 업무 이해도 향상
- 사용자 중심으로 설계되어 사용자 중심의 상호 작용
- 수행 결과 오류를 줄여줌
- 기능에 대해 구체적인 방법 제시
- UI를 설계하기 위해서는 소프트웨어 아키텍처를 반드시 숙지해야 한다.
소프트웨어 아키텍처는 3장에서 설명할 예정이다.
UI 구분
1) CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이루어짐
2) GUI(Graphical Uer Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업 수행
3) NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작
4) VUI(Voice User Interface) : 사람의 음성으로 기기 조작
5) OUI(Organic User Interface) : 모든 사물과 사용자 간의 상호작용을 위한 인터페이스로 하드웨어 분야에서 사물 인터넷, 가상현실, 증강현실, 혼합현실 등과 함께 대두되고 있음
💡 주요 모바일 제스처
- Tap(누르기) : 화면 가볍게 한 번 터치
- Double Tap(두 번 누르기) : 빠르게 두 번 터치
- Drag(누른 채 움직임)
- Pan(누른 채 계속 움직임) : 화면에 손가락을 댄 후 떼지 않고 계속 움직임
- Press(오래 누리기) : 특정 위치를 손가락으로 꾹 누름
- Flick(빠르게 스크롤) : 터치하면서 수평 또는 수직으로 드래그하는 동작
- Pinch(두 손가락으로 넓히기/좁히기) : 두 손가락으로 화면을 터치한 후 서로 다른 방향으로 움직이는 동장
UI 기본 원칙
사용자 인터페이스의 기본 원칙에는 직관성, 유효성, 학습성, 유연성이 있다.
1) 직관성 : 누구나 쉽게 이해하고 사용 가능해야 함
2) 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함
3) 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함
4) 유연성 : 사용자의 요구사항을 최대한 수용하고 실수 최소화 해야 함
UI 설계 지침
1) 사용자 중심 : 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경 제공, 실사용자에 대한 이해가 바탕
2) 사용성 : 사용자가 쉽고 빠르게 이해할 수 있는지, 편리하고 효율적으로 사용할 수 있는지를 뜻하며, 가장 우선적으로 고려해야 하는 사항이다.
3) 일관성 : 버튼, 조작 방법을 일관성 있게 제공
4) 단순성 : 조작 방법 단순화 시켜 인지적 부담 감소시켜야 함
5) 결과 예측 가능 : 작동시킬 기능만 보고 결과를 예측할 수 있어야 함
6) 가시성 : 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계 해야 함
7) 심미성 : 디자인 적으로 글꼴, 색상을 완성도 높게 적용하고 그래픽 요소를 배치해 가독성을 높인다.
8) 표준화 : 한 번 학습한 이후에 쉽게 사용할 수 있도록 설계
9) 접근성 : 사용자의 연령, 성별, 인종 등 다양한 계층이 사용할 수 있도록 설계
10) 명확성 : 개념적으로 쉽게 인지할 수 있도록 설계
11) 오류 발생 해결 : 오류가 발생하면 쉽게 인지할 수 있도록 설계
UI 개발 시스템의 기능
- 사용자의 입력을 검증할 수 있어야 함
- 에러 처리와 관련된 메시지를 표시할 수 있어야 함
- 도움과 프롬프트(Prompt)를 제공해야 함
12. UI 표준 및 지침
먼저 UI 표준과 UI 지침에 대해 설명하겠다.
- UI 표준: 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로, 화면 구성이나 화면 이동 등이 포함됨
- UI 지침: UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야 할 공통의 조건을 의미함
UI 표준과 지침을 토대로 기술의 중립성(웹 표준), 보편적 표현 보장성(웹 접근성), 기능의 호환성(웹 호환성) 이 고려되었는지 확인해야 한다.
💡 웹 표준(Web Standards)
웹에서 사용되는 구칙 또는 기술을 의미
💡 웹 접근성(Web Accessibility)
누구나, 어떠한 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장
💡 웹 호환성(Cross Browsing)
하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스 제공
한국형 웹 콘텐츠 접근성 지침 (KWCAG: Korean Web Content Accessibility Guidelines)
한국형 웹 코넨츠 접근성 지침은 장애인이 비장애인과 동등하게 접근할 수 있는 웹 콘텐츠의 제작 방법을 제시한다.
웹 콘텐츠 접근성(사용정) 지침 준수를 위한 고려 사항
-
인식의 용이성
1.1 대체 텍스트
1.2 멀티미디어 대체 수단
1.3 명료성 -
운용의 용이성
2.1키보드 접근성
2.2충분한 시간 제공
2.3 광과민성 발작 예방
2.4 쉬운 내비게이션 -
이해의 용이성
3.1 가독성
3.2 예측 가능성
3.3 콘텐츠의 논리성
3.4 입력 도움 -
견고성
4.1 문법 준수
4.2 접근성
💡 내비게이션 구조
메뉴(단추): 계층 구조를 표현하는 기본 요소
링크 : 원하는 페이지로 이동할 수 있게 하는 하이퍼링크
이미지 맵 : 그림에 하이퍼링크 연결
사이트 맵 : 사이트의 전체 구조를 한눈에 파악, 트리구조
사이트 메뉴바 : 사이트의 좌측이나 우측에 메뉴, 링크 등을 모아둔 것
내비게이션 바 : 메뉴를 한 곳에 모아 놓은 그래픽이나 문자열
디렉터리 : 주제나 항목을 카테고리별로 표현
전자정부 웹 표준 준수 지침
정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약을 정의한 것
전자정부 웹 표준 준수 지침 사항
내용의 문법 준수, 내용과 표현의 분리, 동작의 기술 중립성 보장, 플러그인의 호환성, 콘텐츠의 보편적 표현, 운영체제에 독립적인 콘텐츠 제공, 부가 기능의 호환성 확보, 다양한 프로그램 제공
13. UI 설계 도구
UI 설계 도구는 사용자의 요구사항에 맞게 UI 화면 구조나 배치 등을 설계할 때 사용하는 도구
종류) 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등이 있다.
와이어프레임(Wireframe)
기획 단계 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 것
- 와이어프레임을 제작할 떄 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계
- 개발자나 디자이너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 사용
- 와이어프레임 툴) 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
목업(Mockup)
디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
- 실제로 구현 X (정적)
- 목업 툴) 파워 목업, 발사믹 목업 등
스토리보드(Story Board)
와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가하는 문서
프로토타입(Prototype)
와이어 프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
- 사용성 테스트 또는 작업자 간 서비스 이해를 위해 작성하는 샘플
- 작성 방법에 따라 페이퍼 프로토타입과 디지털 프로토타입으로 나뉨
- 프로토타입 툴) HTML/CSS, Axure, Flinto, 네이버 프로토나우,
💡인터랙션
사용자와 시스템을 연결하는 것이 UI라면, 인터랙션은 UI를 통해 시스템을 사용하는 일련의 상호 작용을 의미함
유스케이스(Use Case)
사용자 측면에서의 요구사항으로, 원하는 목표를 달성하기위해 수행할 내용 기술
- 사용자의 요구사항을 빠르게 파악함으로써 시스템의 기능적인 요구를 결정하고 그 결과를 문서화할 수 있다.
- 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것, 다이어그램 형식으로 묘사된다.
- 다이어그램이 완성되면 각 유스케이스에 대해 명세서를 작성함
14. UI 요구사항 확인
새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해 작성하는 단계로, 다양한 경로를 통해 사용자의 요구사항을 조사하고 분석한 후 작성해야 한다.
목표 정의 ➜ 활동 사항 정의 ➜ UI 요구사항 작성
1. 목표 정의
사용자들을 대상으로 인터뷰를 진행한 후 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의한다.
[유의사항]
1. 가능하면 개별적으로 진행
2. 다양한 의견을 수렴하되, 다수의 의견으로 개인의 중요한 의견을 놓치지 않도록 해야함
3. 한 시간을 넘지 않도록 인터뷰 진행
4. 반드시 사용자 리서치를 시작하기 전에 해야함
💡리서치
사용자들의 요구사항이나 불편사항 등을 파악하기 위해 진행되는 것
2. 활동 사항 정의
조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의
- 사용자와 회사의 비전을 일치시키는 작업을 진행
- 리서치 규모, 디자인 목표 등을 결정할 수 있도록 필요한 예산과 일정 결정
- UI 디자인 방향 빠르게 제시
- 경영진마다 다르게 이해하고 있는 프로젝트에 대해 정확히 이해하고 협의하도록 함
- 사업 전략 및 목표, 프로세스 책임자 선정, 회의 일정 ㅣㅊ 계획 작성, 우선순위의 선정, 개별적인 단위 업무를 구분함
3. UI 요구사항 작성
여러 경로를 통해 수집된 사용자들의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성해야 함
- 반드시 실 사용자 중심으로 작성
- 여러 사람의 인터뷰를 통해 다양한 의견을 수렴해 작성
- 전체적인 구조를 파악 및 검토 해야 함
[UI 요구사항 작성 순서]
1. 요구사항 요소 확인 ➜ 정황 시나리오 작성 ➜ 요구사항 작성
1) 요구사항 요소 확인
데이터 요구, 기능 요구, 제품/ 서비스 품질, 제약 사항
2) 정황 시나리오 작성
사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것
3) 요구사항 작성
정황 시나리오를 토대로 작성
15. 품질 요구사항
소프트웨어 품질은 소프트웨어의 기능, 성능, 만족도 등 소프트웨어에 대한 요구사항이 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체이다.
ISO/IEC 9126
- 소프트웨어의 품질 특성과 평가를 위한 표준 지침으로서 국제 표준으로 널리 사용됨
- 품질에 대한 요구사항을 기술하거나 개발중인/ 개발이 완료된 품질 평가에 사용
- 호환성과 보안성을 강화하여 ISO/IEC 25010으로 개정됨
ISO/IEC 25010
ISO/IEC 25010은 소프트웨어 제품에 대한 국제 표준으로 2011년에 9126을 개정하여 만들었다.
기능성(Functionality)
사용자 요구사항을 정확하게 만족하는 기능을 제공하는지 여부
- 적절성/적합성(Suitability)
- 정밀성/정확성(Accuracy)
- 상호 운용성(Interoperability)
- 보안성(Security)
- 준수성(Compliance)
신뢰성(Reliability)
요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도
- 성숙성(Maturity)
- 고장 허용성(Fault Tolerance)
- 회복성(Recoverability)
사용성(Usability)
- 이해성(Understandability)
- 학습성(Learnability)
- 운용성(Operability)
- 친밀성(Attractivenenss)
효율성(Efficiency)
- 시간 효율성(Time Behaviour)
- 자원 효율성(Resource Behaviour)
유지보수성(Maintainability)
- 분석성(Analyzability)
- 변경성(Changeability)
- 안정성(Stability)
- 시험성(Testability)
이식성(Portability)
- 적용성(Adaptability)
- 설치성(Installability)
- 대체성(Replaceability)
- 공존성(Co-existence)
16. UI 프로토타입 제작 및 검토
프로토타입은 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로 테스트 가능
- 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것으로 최대한 간단하게 만들어야 함
- 일부 핵심적인 기능만을 제공하지만 최종 제품의 작동 방식을 이해시키는데 필요한 기능은 반드시 포함한다.
- 요구사항이 모두 반영될 때까지 프로토타입을 계속하여 개선하고 보완해야 함
- 프로토타이핑 및 테스트를 거치지 않고는 실제 사용자와 제품간의 상호작용 방식을 예측하기 어려우므로 실제 사용자를 대상으로 테스트하는 것이 좋음
💡프로토타입
16장에서 언급하는 프로토타입은 UI 프로토타입을 의미하겠다.
💡프로토타이핑
프로토타입을 만드는 과정으로, 사용자의 요구사항 검토부터 최종적인 프로토타입을 완성하기 까지 반복적으로 수행되는 전체적인 과정
UI 프로토타입의 장/단점
장점
- 사용자를 설득하고 이해시키기 쉬움
- 요구사항과 기능의 불일치 등으로 인한 혼선 예방 가능하여 개발 시간을 줄일 수 있음
- 사전에 오류 발견 가능
단점
- 사용자의 모든 요구사항을 바녕ㅇ하기 위한 반복적인 개선 및 보완 작업 때문에 작업 시간을 증가 시킬 수 있고, 필요 이상으로 자원을 소모할 수 있다.
- 부분적으로 프로토타이핑을 진행하다보면 중요한 작업이 생략될 수 있다.
프로토타이핑의 종류
1) 페이퍼 프로토타입
2) 디지털 프로토타입
UI 프로토타입 계획 및 작성 시 고려사항
[계획 시 고려사항]
- 개발 목적 확인
- 개발에 필요한 환경 마련
- 일정은 실제 분석 작업이 완료되기 이전에 진행해야 함
- 이슈를 모두 취합하고 해결 방법 제시
- 진행하면서 분석, 설계, 개발, 테스트 등의 표준 가이드를 확정
- 가장 많은 시간이 소요된 구간을 찾고 그 원인을 분석해 해결 방법 제시
- 고객, 매니저, 리더 등에게 완성된 프로토타입을 시연
[작성 시 고려사항]
- 작성 계획을 세움
- 범위, 리스크 상황 등 주변 여건을 감안해 범위를 정한다.
- 얻고자하는 목표 확인
- 최소한의 기간과 비용 확인
- 실제 개발에 참조될 수 있는지 확인
17. UI 설계서 작성
UI 설계서는 사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서이다.
- UI 설계서는 기획자, 개발자, 디자이너 등과 원활한 의사소통을 위해 작성
- UI 설계서는 UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의서, 시스템 구조, 사이트 맵, 프로세스 정의서, 화면 설계 순으로 작성
UI 설계서 표지 작성
표지는 다른 문서와 혼동되지 않도록 프로젝트명 또는 시스템명을 포함시켜 작성한다.
UI 설계서 개정 이력 작성
처음 버전을 1.0으로 설정하고 변경 내용을 적은 후 0.1씩 올린다.
UI 요구사항 정의서 작성
사용자의 요구사항을 확인하고 정리한 문서이다.
사용자 요구사항의 UI 적용 여부를 요구사항별로 표시한다.
시스템 구조 작성
UI 요구사항과 UI 프로토타입에 기초해 전체 시스템의 구조를 설계한 것으로 사용자의 요구사항이 어떻게 시스템이 적용되는지 알 수 있다.
사이트 맵(Site Map) 작성
시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분하여 설계한 것
- 사이트 맵을 작성한 후 사이트 맵의 상세 내용을 표 형태로 작성한다.
프로세스(Process) 정의서 작성
사용자의 관점에서 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리한 것으로 UI의 전체적인 흐름을 파악할 수 있다.
화면설계
UI 프로토타입과 UI 프로세스를 참고하여 필요한 화면을 페이지별로 설계한 것
18. 유용성 평가
유용성(Usability)은 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도로, UI의 주된 목적은 유용성이 뛰어난 UI를 제작하는 것이다.
평가 차를 줄이기 위한 UI 설계 원리 검토
1. 수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도
2. 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
3. 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도
19. UI 상세 설계
UI 상세 설계는 UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계이다.
UI 상세 설계를 할 때 반드시 시나리오를 작성해야 한다.
💡UI 설계서
UI 흐름 설계와 UI 상세 설계에서 모두 작성
UI 시나리오 문서 작성 원칙
개발자가 전체적인 UI의 기능과 작동 방식을 한눈에 이해할 수 있도록 구체적으로 작성한다.
보통 계층(Tree) 구조, 플로우차트(Flow Chart) 표기법으로 작성한다.
UI 시나리오 문서 작성을 위한 일반 규칙
주요 키의 위치와 기능) 모든 화면에 공통적으로 배치되는 주요 키의 위치와 기능을 설명한 것
공통 UI 요소) 체크박스, 라디오 버튼, 텍스트 박스 등의 UI 요소를 언제 어떤 형태로 사용할지 정의하고, 어떻게 반응하는지 그 흐름을 설명
기본 스크린 레이아웃) 모든 화면에 공통적으로 나타나는 Titles, Ok/Back, Soft Key, Option, Functional BUttons등의 위치와 속성을 정의
기본 인터랙션 규칙) 터치 제스처 등에 공통적으로 사용되는 조작 방법과 실행, 이전, 다음, 삭제, 이동 등의 화면 전환 효과 등을 기술
공통 단위 태스크 흐름) 많은 기능들에 공통적으로 사용되는 삭제, 검색, 매너 모드 상태 등에 대한 인터랙션 흐름 설명
케이스 문서) 다양한 상황에서 공통적으로 적용되는 시스템의 동작을 정의한 문서
💡UI 요소
체크박스) 여러 개의 선택 상황에서 1개 이상의 값 선택
라디오 버튼) 여러 항목 중 하나만 선택
텍스트 박스) 사용자가 데이터를 입력하고 수정할 수 있는 상자
콤보 상자) 이미 지정된 목록에서 상자에 내용을 표시해 선택하거나 새로 입력할 수 있는 상자
목록 상자) 콤보상자와 같이 목록을 표시하지만 새로운 내용을 입력할 수 없는 상자
UI 시나리오 문서의 요건
완전정(Complete)
누락되지 않도록 최대한 상세히 기술
사용자의 태ㅡ크에 초점을 맞춰 기술
일관성(Consistent)
서비스목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지해야 함
이해성(Understandable)
누구나 쉽게 이해 가능하도록 설명
불분명하거나 추상적인 표현은 피한다.
가독성(Readable)
표준화된 템플릿 등을 활용해 문서를 쉽게 읽을 수 있도록 해야 함
수정 용이성(Modifiable)
시나리오의 수정이나 개선이 쉬워야 함
추적 용이성(Traceable)
변경 사항은 언제, 어떤 부분이, 왜 발생했는지 쉽게 추적할 수 있어야 함
UI 시나리오 문서로 인한 기대 효과
- 요구사항이나 의사소통에 대한 오류 감소
- 개발 과정에서 재작업 감소, 혼선 최소화
- 불필요한 기능 최소화
- 개발 비용 절감
- 개발 속도 향상
20. HCI / UX / 감성공학
HCI(Human Computer Intercation or Interface)
HCI는 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문
최종 목표는 시스템을 사용하는데 있어 최적의 사용자 경혐(UX)을 만드는 것이다.
UX(User Experience)
사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험
단순 기능이나 절차상의 만족뿐만 아닌 사용자가 참여, 사용, 관찰하고, 상호 교감을 통해 알 수 있는 가치 있는 경험을 말한다.
UX의 특징
1. 주관성(Subjectivity)
사람들의 개인적, 신체적, 인지적 특성에 따라 다르므로 주관적이다.
2. 정황성(Contextuality)
경험이 일어나는 상황 또는 주변 환경에 영향을 받음
3. 총체성(Holistic)
개인이 느끼는 총체적인 심리적, 감성적인 결과
감성공학
여기서 감성은 사용자가 제품을 사용한 경험을 통해 얻은 복합적인 감각을 의미한다.
감성공학을 디자인의 기능적인 측면에서 봤을 경우 심리적 기능에 해당한다.
