UI
개념
- 넓은 의미에서 사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 물리적, 가상의 매개체
- 좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면
유형 : CGNO - CLI / GUI / NUI / OUI
CLI : 텍스트 명령
GUI : 그래픽 반응 기반 인터페이스
NUI : 터치나 음성, 동작인식, 뇌파 인식
OUI : 유기적 상호기반 인터페이스
UI 설계 원칙
직유학유 - 직관성(Intuitiveness) / 유효성(Effciency) / 학습성(Learnability) / 유연성(Flexibility)
| 직관성 (Intuitiveness) | - 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함 - 쉬운 검색, 쉬운 사용성, 일관성 |
| 유효성 (Effciency) | - 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작 - 쉬운 오류 처리 및 복구 |
| 학습성 (Learnability) | - 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작 - 쉽게 학습, 쉬운 접근, 쉽게 기억 |
| 유연성 (Flexibility) | - 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작 - 요류 예방, 실수포용, 오류 감지 |
UI 설계 지침
사일단결 가표접명오 - 사용자 중심 / 일관성 / 단순성 / 결과 예측 가능 / 가시성 / 표준화 / 접근성 / 명확성 / 오류 발생 해결
UI 요구사항
사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준
| 기능적 요구사항 | 비기능적 요구사항 |
| - 시스템이 제공하는 기능, 서비스에 대한 요구사항 - 특정 입력이나 상황에 대해서 시스템이 어떻게 반응하고 동작해야 하는지에 대한 기술 |
- 시스템이 수행하는 기능 이외의 사항, 시스템 구축에 대한 제약사항에 관한 요구사항 - 품질 속성에 관련하여 시스템이 갖춰야 할 사항 - 시스템이 준수해야 할 제한 조건 |
UI 품질 요구사항 (ISO/IEC 9126 기반)
기신사효유이
| 기능성 | - 실제 수행 결과와 품질 요구사항과의 차이를 분석하고, 실제 사용 시 정확하지 않은 결과가 발생할 확률과 관련하여 시스템의 동작을 관찰하기 위한 품질 기준 - 적절성(Suitality), 정밀성(Accuracy), 상호 운용성(Interoperability), 보안성(Security), 호환성(Compliance) |
| 신뢰성 | - 시스템이 일정한 시간 또는 작동되는 시간 동안 의도하는 기능을 수행함을 보증하는 품질 기준 - 성숙성(Maturity), 고장 허용성(Fault tolerance), 회복성(Recoverability) |
| 사용성 | - 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준 - 이해성(Understandability), 학습성(Learnability), 운용성(Operability) |
| 효율성 | - 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준 - 시간 효율성(Time Behaviour), 자원 효율성(Resource Behaviour) |
| 유지 보수성 | - 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질 기준 - 분석성(Analyzability), 변경성(Changeability), 안정성(Stability), 시험성(Testability) |
| 이식성 | - 다른 플랫폼(운영체제)에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가에 대한 품질 기준 - 적용성(Adaptability), 설치성(Installability), 대체성(Replaceability) |
UI 표준 개념
- UI 표준은 디자인 철학과 원칙 기반 하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약
UI 표준 구성
- 전체적인 UX 원칙
- 정책 및 철학
- UI 스타일 가이드
- UI 패턴 모델 정의
- UI 표준 수립을 위한 조직 구성
UI 스타일 가이드 구성
UI의 통일과 일관적인 화면 구성을 위해서 시스템이 지켜야 할 UI 요소 정의와 화면설계원칙을 제시
1. UI 구동 환경 정의 : OS, 웹 브라우저, 모니터 해상도, 프레임 세트를 확인
2. 레이아웃 정의 : 기본 배치는 크게 상단, 왼쪽, 콘텐츠 영역의 3개 부분으로 설계, 하단 메뉴 구성은 상황에 맞게 추가, 제외
3. 메뉴 내비게이션 정의
4. 기능 및 구성요소 정의 : 화면 구성 요소에 대한 기능과 세부 UI 화면 구성요소 정의
| 그리드 타입 | - UI를 구성하는 방법 중 테이블 형태로 UI 구성 |
| 버튼/컨트롤 타입 | - 기능 버튼, 검색 버튼, 그리드 관련 버튼, 기타 버튼 등 다양항 형태로 구분 제작 |
| Page 요소 | - 폰트규정, 아이콘 요소, 체크박스/라디오 버튼, 말풍선, 이미지 표시, 탭 표시, 스텝 표시, 페이지 이동, 상하 스크롤, 정보입력 등으로 구성 |
| 팝업 요소 | - 윈도 팝업, 레이어 팝업 |
| Alert | - 정보 누락/정보 오류 시 Alert, 업무 처리 완료 Alert, 삭제, 수정 시 Alert, 업무 안내성 Alert |
UI 패턴 모델 정의
- CRUD 방식을 기반으로 데이터의 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고, UI 패턴 모델을 개발
- 업무 화면 클라이언트 정의, 서버 컨트롤러 정의, 서버 메시지 및 예외처리 정의, 클라이언트-서버 간 데이터 변환 정의, 기업 포털 연계 정의, 보고서 정의, 외부 컴포넌트 연계 정의
UI 표준 수립을 위한 조직 구성
- 조직 구성 및 역할 정의, 커뮤니케이션 방안 수립