▶ 010 사용자 인터페이스
사용자 인터페이스(UI, User Interface)
사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치, 소프트웨어
• 사용자 인터페이스의 3가지 분야
- 물리적 제어에 관한 분야 : 정보 제공과 전달
- 기능에 관한 분야 : 모든 사용자가 편리하고 간편하게 사용
- 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
사용자 인터페이스의 특징
- 소프트웨어 영역 중 변경이 가장 많이 발생
- 사용자의 만족도에 가장 큰 영향을 미침
- 수행 결과의 오류를 줄임
- 작업 시간 단축, 업무에 대한 이해도 높임
- 편리성과 가독성 높임
- 사용자 인터페이스 설계를 위해선 소프트웨어 아키텍처를 반드시 숙지해야 함
☞ 소프트웨어 아키텍처
개발할 소프트웨어의 기본 틀을 만드는 것, 복잡한 소프트웨어 개발 과정을 체계적으로 접근하기 위한 밑그림
사용자 인터페이스의 구분
- CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
- GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
- NUL(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
사용자 인터페이스의 기본 원칙
- 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함
- 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함
- 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함
- 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함
사용자 인터페이스 설계 지침
사용자 인테페이스 설계 시 고려 사항 : 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결 등
▶ 011 UI 표준 및 지침
UI 표준 및 지침
UI 표준 및 지침을 토대로 웹 표준, 웹 접근성, 웹 호환성이 고려되었는지 확인
- UI 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로
- UI 지침 : UI 개발 과정에서 꼭 지켜야 할 공통의 조건
☞ 웹의 3요소
웹 표준 , 웹 접근성, 웹 호환성
한국형 웹 콘텐츠 접근성 지침(KWCAG)
장애인이 비장애인과 동등하게 접근할 수 있는 웹 콘텐츠의 제작 방법을 제시
- 인식의 용이성 : 대체 텍스트, 멀티미디어 대체 수단, 명료성
- 운용의 용이성 : 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션
- 이해의 용이성 : 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움
- 견고성 : 문법 준수, 접근성
☞ 내비게이션 구조의 요소
메뉴, 링크, 이미지 맵, 사이트 맵, 사이트 메뉴바, 내비게이션 바, 디렉터리
사이트 맵 : 사이트의 전체 구조를 한 눈에 알아볼 수 있도록 트리 구조 형태로 만든 것
이미지 맵 : 그림에 하이퍼링크를 연결하여 원하는 페이지로 이동할 수 있게 함
디렉터리 : 주제나 항목을 카테고리별로 표현한 방식
전자정부 웹 표준 준수 지침
정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약을 정의
- 내용의 문법 준수
- 내용과 표현의 분 리
- 동작의 기술 중립성 보장
- 플러그인의 호환성
- 콘텐츠의 보편적인 표현
- 운영체제에 독립적인 콘텐츠 제공
- 부가 기능의 호환성 확보
- 다양한 프로그램 제공
▶ 012 UI 설계 도구
UI 설계 도구
사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구
- UI 설계 도구의 종류 : 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등
1. 와이어프레임(Wireframe)
기획 단계의 초기에 제작하는 것, 페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 단계
- 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
2. 목업(Mockup)
디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
- 목업 툴 : 파워 목업, 발사믹 목업 등
3. 스토리보드(Story Board)
와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
- 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등
4. 프로토타입(Prototype)
와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
* 인터렉션 : UI를 통해 시스템을 사용하는 일련의 상호 작용
- 프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등
5. 유스케이스(Use Case)
사용자 측면에서의 요구사항, 사용자가 원하는 목표를 달성하기 위해 수행할 내용 기술
- 일반적으로 다이어그램 형식으로 묘사
▶ 013 UI 요구사항 확인
UI 요구사항 확인
새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계
- 요구사항의 순서 : 목표 정의 → 활동 사항 정의 → UI 요구사항 작성
1. 목표 정의
사용자들을 대상으로 인터뷰를 진행한 후 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의
2. 활동 사항 정의
조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의
3. UI 요구사항 작성
여러 경로를 통해 수집된 사용자들의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성
- UI 요구사항 작성 순서 : 요구사항 요소 확인 → 정황 시나리오 작성 → 요구사항 작성
• 요구사항 요소 확인
파악된 요구사항 요소의 종류와 각각의 표현 방식 등을 검토
- 요구사항 요소 : 데이터 요구, 기능 요구, 제품/서비스의 품질, 제약 사항
• 정황 시나리오 작성
사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사
- 요구사항 정의에 사용되는 초기 시나리오
- 개발하는 서비스의 모습을 상상하는 첫 단계로 사용자 관점에서 시나리오를 작성
- 사용자가 주로 사용하는 기능 위주로 작성
- 육하 원칙에 따라 간결하고 명확하게 작성
• 요구사항 작성
정황 시나리오를 토대로 작성
▶ 014 품질 요구사항
품질 요구사항
소프트웨어의 품질은 소프트웨어의 기능, 성능, 만족도 등 소프트웨어에 대한 요구사항이 얼마나 충족하는가를 나타내는 소프웨어 특성의 총체
• ISO/IEC 9126
- 소프트웨어의 품질 특성과 평가를 위한 표준 지침
- ISO/IEC 9126에서 제시한 품질 특성 : 기능성, 신뢰성, 사용성, 효율성, 유지 보수성, 이식성
1. 기능성(Functionality)
사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부를 나타냄
- 적절성/정합성, 정밀성/정확성, 상호 운용성, 보안성, 호환성
2. 신뢰성(Reliability)
소프트웨어가 요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도를 나타냄
- 성숙성, 고장 허용성, 회복성
3. 사용성(Usability)
사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대하여 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도를 나타냄
- 이해성, 학습성, 운용성, 친밀성
4. 효율성(Efficiency)
사용자가 요구하는 기능을 할당된 시간 동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지 정도를 나타냄
- 시간 효율성, 자원 효율성
5. 유지 보수성(Maintainability)
환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도를 나타냄
- 분석성, 변경성, 안전성, 시험성
6. 이식성(Portability)
소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도를 나타냄
- 적용성, 설치성, 대체성, 공존성
▶ 015 UI 프로토타입 제작 및 검토
UI 프로토 타입
사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로 테스트가 가능
- 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것, 최대한 간단하게 만들어야 함
UI 프로토 타입의 장점과 단점
장점 |
- 사용자를 설득하고 이해시키키 쉬움 - 요구사항과 기능의 불일치 등으로 인한 혼선을 예방할 수 있어 개발 시간을 줄일 수 있음 - 사전에 오류를 발견할 수 있음 |
단점 |
- 반복적인 개선 및 보완 작업으로 작업 시간을 증가 시키고, 필요 이상으로 자원을 소모할 수 있음 - 부분적으로 프로토타이핑을 진행하다보면 중요한 작업이 생략될 수 있음 |
프로토타이핑의 종류
페이퍼 프로토타입 | - 아날로그적인 방법으로, 스케치, 그림, 글 등을 이용하는 것 - 제작 기간이 짧고, 제작 비용이 적고, 업무 협의가 빠를 경우 사용 - 장점 : 저렴한 비용, 즉시 변경 가능, 고객의 과다한 기대X - 단점 : 테스트하기에 부적당, 공유하기 어려움, 상호 관계가 많은 경우 나타내기 복잡함 |
디지털 프로토타입 | - 파워포이트, 비지오, 아크로뱃 등과 같은 프로그램을 사용하는 것 - 재사용이 필요하고, 산출물과 비슷한 효과가 필요하고, 숙련된 전문가가 있을 경우 사용 - 장점 : 최종제품과 비슷한 테스트 가능, 쉬운 수정, 재사용 가능 - 단점 : 프로그램의 사용법 숙지 |
UI 프로토타입 제작 단계
1단계 | - 사용자의 요구사항을 분석하는 단계, 사용자 관점에서 기본적인 요구사항이 확정될 때까지 수행 |
2단계 | - 요구사항을 충족하는 프로토타입 작성 - 프로토타입은 개발할 시스템의 핵심적인 기능을 중심으로 개발 |
3단계 | - 작성된 프로토타입이 요구사항을 잘 수행하고 있는지 사용자가 직접 확인하는 단계 - 프로토타입에 대해 다양한 추가 및 수정 의견 제안 |
4단계 | - 작성된 프로토타입을 기반으로 수정과 합의가 이뤄지는 단계 - 개발자는 사용자가 요청한제안 사항을 수용해 보안 작업을 함 - 최종적으로 승인을 완료할 때까지 3,4 단계 반복 |
