UI 요구사항 확인

(1) UI 개념

- UI는 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체이다.

- 좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면이다.

- UX(사용자 경험)은 UI를 포함하고 있다. 

 

 

(2) UI 유형

• CLI : 정적인 텍스트 기반 인터페이스(명령어를 텍스트로 입력하여 조작)
• GUI : 그래픽 반응 기반 인터페이스(그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스)
• NUI : 직관적 사용자 반응 기반 인터페이스(키보드나 마우스 없이 신체 부위를 이용하는 사용자 인터페이스)
• OUI :  유기적 상호 작용 기반 인터페이스(현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스)

 

(3) UI 분야

• 물리적 제어 분야 - 정보 제공과 기능 전달을 위한 하드웨어 기반
• 디자인적 분야 - 콘텐츠의 정확하고 상세한 표현과 전체적 구성
• 기능적 분야 - 사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능

(4) UI 설계 원칙

1. 직관성(Intuitiveness) : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함
2. 유효성(Efficiency) : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
3. 학습성(Learnability) : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작
4. 유연성(Flexibility) : 사용자의 요구사항을 최대한 수용하고, 실수를 방지할 수 있도록 제작

 

(5) UI 설계 지침

사용자 중심 : 사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공하며, 실사용자에 대한 이해가 바탕이 되어야 함

일관성 : 버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠르게 습득할 수 있도록 설계해야 함

단순성 : 조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화

결과 예측 가능 : 작동시킬 기능만 보고도 결과 예측이 가능해야 함

가시성 : 주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능해야 함

표준화 : 디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용 가능해야 함

접근성 : 사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함

명확성 : 사용자가 개념적으로 쉽게 인지해야 함

오류 발생 해결 : 사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함

 

(6) UI 품질 요구사항(ISO/IEC 9126 기반)

[1] : 기능성

상세 품질 요구사항	설명
적절성	소프트웨어 제품이 주어진 작업과 사용자의 목표에 필요 적절한 기능들을 제공해 줄 수 있는 소프트웨어의 능력
정밀성	소프트웨어 제품이 요구되는 정확도로 올바른 결과를 산출할 수 있는 능력
상호 운용성	소프트웨어 제품이 특정 시스템과 상호 작용하여 운영될 수 있는 능력
보안성	비인가된 접근을 차단하고, 우연 또는 고의적인 접근을 인지하여 대처할 수 있는 능력
호환성	소프트웨어 제품이 비슷한 환경에서 연관된 표준, 관례 및 규정을 준수하는 능력

 

[2] : 신뢰성

성숙성, 고장 허용성, 회복성

 

[3] : 사용성

이해성, 학습성, 운용성

 

[4] : 효율성 

시간 효율성, 자원 효율성

 

[5] : 유지보수성

분석성, 변경성, 안정성, 시험성

 

[6] : 이식성

적용성, 설치성, 대체성

 

 

(7) UI 표준

- UI 표준은 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약이다.

 

• 전체적인 UX 원칙 : 사용자의 관점에서 사용자 업무를 효율적으로 수행할 수 있는 UX 원칙 정의
• 정책 및 철학 : 조직의 목표나 정체성을 포함하는 정책 및 철학 설정
• UI 스타일 가이드 : UI에 대한 구동 환경 및 레이아웃 등을 정의
• UI 패턴 모델 정의 : CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의
• UI 표준 수립을 위한 조직 구성 : UI 팀 및 표준 개발팀을 주축으로 추진 조직 구성

 

(8) UI 스타일 가이드 구성

1. 구성요소 정의

▼구성요소

구성요소	설명
그리드	UI를 구성하는 방법 중 테이블 형태로 UI를 구성
버튼/컨트롤 타입	기능 버튼, 검색 버튼, 그리드 관련 버튼, 기타 버튼 등 다양한 형태로 구분해 제작
Page 요소	폰트규정, 아이콘 요소, 체크박스/라디오 버튼, 말풍선, 이미지 표시, 탭 표시, 스텝 표시, 페이지 이동, 상하 스크롤, 정보입력 등으로 구성
팝업 요소	윈도 팝업, 레이어 팝업
Alert 요소	정보 누락/정보 오류 시 Alert, 업무 처리 완료, Alert, 삭제, 수정 시 Alert, 업무 안내성 Alert

 

2. 팝업 요소

- 팝업 요소에는 윈도 팝업과 레이어 팝업이 있다.

 

(9) UI 패턴 모델 정의

- CRUD 방식을 기반으로 데이터의 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고, UI 패턴 모델을 개발한다.

- 표준 프레임워크로 개발하고, 유스케이스를 이용해서 패턴별 표준 개발 방법 총 7가지 영역을 정의한다.

 

• 업무 화면 클라이언트 정의 : 제안 단계에서 결정된 클라이언트를 통해 설계자는 개발 시에 필요한 공통 요소 식별, 디렉토리 구성, 개발 환경 구축 부분 도출
• 서버 컨트롤러 : 프레임워크를 도입한다면 해당 프레임워크가 제공하는 방식 채택
• 서버 메시지 및 예외 처리 정의 : 서버의 메시지 및 예외 처리를 클라이언트 UI에 전달하는 방식을 결정(System, Error, Information)
• 클라이언트-서버 간 데이터 변환 정의 : 어떤 방식의 오브젝트를 사용할 것인지를 먼저 결정, 클라이언트와 서버 간의 데이터 형태 변환을 어떻게 처리할 것인지 방안 마련
• 기업 포털 연계 정의 : EP-SSO-사용자 간 연계 방안을 URL 연계 시를 고려하여 정의
• 보고서 정의 : 클라이언트와 리포트 솔루션 간의 연계 방식을 결정
• 외부 컴포넌트 연계 정의 : 외부 UI 컴포넌트를 도입할 대, 서버와의 연계 방식으로 결정

 

(10) UI 지침 개념, 주요 기법

- UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부사항을 규정하는 가이드라인이다. 

 

기법	설명
3C 분석	고객, 경쟁하고 있는 자사와 경쟁사를 비교하고 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법
SWOT 분석	기업의 내부 환경과 외부 환경을 분석하여 경영 전략을 수립하는 방법
시나리오 플래닝	불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략의 한 방법
사용성 테스트	사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트
워크숍	소집단 정도의 인원으로, 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나

 

(11) 스토리보드

- 스토리보드는 UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임, 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분의 정보가 수록된 문서이다.

- 디자이너와 개발자가 최종적으로 참고하는 산출 문서이다.

- UI 화면 설계를 위해서는 와이어프레임, 스토리보드, 프로토타입이 활용된다. 

 

구분	설명	도구
와이어프레임	이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업	파워포인트 키노트 스케치 일러스트
스토리보드	정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물	파워포인트 키노트 스케치
프로토타입	정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형	HTML/CSS

 

(12) 스토리보드 작성 절차

1. 전체 개요 작성 -> 2. 서비스 흐름 작성 -> 3. 스타일 확정 -> 4. 메뉴별 화면 설계도 작성 및 상세 설명 -> 5. 추가 관련 정보 작성

 

 

(13) UI 프로토타입 제작 및 검토

1. 프로토타입 개념

- 프로토타입은 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품이다.

- 프로토타입은 사용자의 요구사항이 정확하게 반영될 때까지 지속적으로 개선하고 보완해서 최종 설계를 완성한다.