UI :: 사용자와 시스템이 의사소통하는 매개체

1. UI

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

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

• HMI(Human Machine Interface)라고도 한다.

• UX는 UI를 포함하고 있다.

  UX; User Experience; 사용자 경험

  사용자가 서비스를 경험하면서 느끼고 생각하는 총체적 경험

인터페이스 예시

인터페이스는 매개체이다.

• 하드웨어 인터페이스: PC와 라우터를 연결하는 케이블
• 소프트웨어 인터페이스: 데이터를 A 시스템에서 B 시스템으로 전송하는 인터페이스
• 사용자 인터페이스: UI

1-1. UI 유형 🌟

CG No

(1) CLI

Command Line Interface

• 정적인 텍스트 기반 인터페이스

• 명령어를 텍스트로 입력하여 조작하는 사용자 I/F

(2) GUI

Graphical User Interface

• 그래픽 반응 기반 인터페이스

• 그래픽 환경을 기반으로 마우스나 전자펜을 이용하는 사용자 I/F

(3) NUI

Natural User Interface

• 직관적 사용자 반응 기반 인터페이스

• 키보드나 마우스 없이 신체 부위를 이용하는 사용자 I/F
  터치, 음성 포함 ex) AI 스피커

(4) OUI

Organic User Interface

• 유기적 상호 작용 기반 인터페이스

• 현실에 존재하는 모든 사물이 입출력 장치로 변화할 수 있는 사용자 I/F

1-2. UI 설계 원칙 🌟🌟🌟

(1) 직관성

Intutiveness

• 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 한다.

• 쉬운 검색, 쉬운 사용성, 일관성

(2) 유효성

Efficiency

• 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작한다.

• 쉬운 오류 처리 및 복구

(3) 학습성

Learnability

• 모두가 쉽게 배우고 사용할 수 있게 제작한다.

• 쉽게 학습, 쉬운 접근, 쉽게 기억

(4) 유연성

Flexibility

• 사용자의 요구사항을 최대한 수용하고, 실수를 방지할 수 있도록 제작한다.

• 오류 예방, 실수 포용, 오류 감지

1-3. UI 설계 지침

(1) 사용자 중심

• 사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공한다.

(2) 일관성

• 버튼이나 조작 방법을 기억하기 쉽고 빠르게 습득할 수 있게

(3) 단순성

• 간단하게 작동되도록

(4) 결과 예측 가능

• 기능만 보고도 결과 예측이 가능하게

(5) 가시성

• 주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능하게

(6) 표준화

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

(7) 접근성

• 다양한 사용자 계층을 수용
  ex) 장애인, 노인을 위한 웹 접근성

(8) 명확성

• 개념적으로 쉽게 인지해야 한다.

(9) 오류 발생 해결

• 오류에 대한 상황을 정확하게 인지할 수 있어야 한다.

2. UI 요구사항

사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준

2-1. UI 품질 요구사항(ISO/IEC 9126 기반)

(1) 기능성

• 실제 사용 시 정확하지 않은 결과가 발생할 확률과 관련하여 시스템의 동작을 관찰하기 위한 품질 기준

• 적절성, 정밀성, 상호 운용성, 보안성, 호환성

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

  💡 참고!

  ISO/IEC 25010으로 변경되면서 기능성의 부특성인 보안성, 호환성이 주특성으로 변경되었다.

(2) 신뢰성

• 일정한 시간 또는 작동되는 시간 동안 의도하는 기능을 수행함을 보증하는 품질 기준

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

(3) 사용성

• 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준

• 이해성, 학습성, 운용성

  • 이해성: 논리적인 개념과 적용 가능성을 분간하는 데 필요한 사용자의 노력 정도에 따른 특성
  • 학습성: 익히는 데 필요한 사용자의 노력 정도
  • 활용과 운용 통제에 필요한 사용자의 노력 정도

(4) 효율성

• 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가

• 시간 효율성, 자원 효율성

(5) 유지보수성

• 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가

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

(6) 이식성

• 다른 플랫폼(운영체제)에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가

• 적용성, 설치성, 대체성
  ( 적용성: 제공된 수단이나 다른 조치 없이 특정 환경으로 전환되는 능력에 따른 특성 )

3. UI 표준

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

3-1. UI 표준 구성

• 전체적인 UX 원칙

• 정책 및 철학

• UI 스타일 가이드

• UI 패턴 모델 정의

• UI 표준 수립을 위한 조직 구성

3-2. UI 스타일 가이드 구성

UI 스타일 가이드: UI의 통일과 일관적인 화면 구성을 위해 시스템이 지켜야 할 UI 요소 정의와 화면 설계 원칙

(1) UI 구동 환경 정의

• OS, 웹브라우저, 모니터 해상도, 프레임 세트 확인
  (프레임 세트 확인: 속도 및 업무 편의성을 고려하여 각 영역별 프레임을 구분해 적용)

(2) 레이아웃 정의

• 기본 배치는 크게 상단, 왼쪽, 콘텐츠 영역의 3개 부분으로 설계

• 하단 메뉴 구성(Footer Area)는 상황에 맞게 추가or제외

(3) 메뉴 내비게이션 정의

(4) 기능 및 구성요소 정의

• 화면 구성 요소에 대한 기능과 세부 UI 화면 구성 요소 정의

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

3-3. UI 패턴 모델 정의

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

  • 업무 화면 클라이언트 정의
  • 서버 컨트롤러 정의
  • 서버 메시지 및 예외처리 정의
  • 클라이언트-서버 간 데이터 변환 정의
  • 기업 포털 연계 정의
  • 보고서 정의
  • 외부 컴포넌트 연계 정의

4. UI 지침(Guideline)

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

4-1. UI 개발을 위한 주요 기법 🌟

(1) 3C 분석

• 고객 Customer, 자사 Company, 경쟁사Competitor를 비교하고 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법

(2)SWOT 분석

• 기업의 내부 환경과 외부 환경을 분석하여 강점Strength, 약점Weakness, 기회Opportunity, 위협Threat 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법

(3) 시나리오 플래닝

• 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로, 불확실성을 제거해나가려는 경영 전략의 한 방법

(4) 사용성 테스트

• 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트

(5) 워크숍

• 소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나

4-2. UI 사용자 요구사항 도출

(1) 페르소나 정의

• 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자

• 페르소나 분류 및 정의, 작성, 활용

(2) 콘셉트 모델 정의

• 여러가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램

• 콘셉트 모델 정의(브레인스토밍 활용)

(3) 사용자 요구사항 정의

• 요구사항 매트릭스 작성, 정황 시나리오 제작 및 요구사항 도출

(4) UI 컨셉션

• 정리된 요구사항을 구체화하는 단계로, 화면 디자인 단계 전에 대표 화면 설계를 진행하는 단계

• 정보 구조 설계, 대표 화면 와이어프레임 스케치, 페이퍼 프로토타입을 통한 스토리보드 설계

5. 스토리보드

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

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

5-1. UI 화면 설계 구분 🌟

(1) 와이어 프레임

• 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업

• 파워포인트, 키노트, 스케치, 일러스트

(2) 스토리보드

• 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물

• 파워포인트, 키노트, 스케치

(3) 프로토타입

• 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형

• HTML/CSS

5-2. 스토리보드 작성 절차

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

5-3. 스토리보드 작성 시 유의사항

• 일관된 기호
• 공통 영역 정의
• 영역별 세부 설계
• 버전업 관리

6. UI 프로토타입 제작 및 검토

6-1. 프로토타입

설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나
요구사항을 더 잘 이해하고 결정하기 위해
전체적인 기능을 간략한 형태로 구현한 시제품

6-2. 프로토타입 유형

(1) 아날로그

• 종이와 펜을 활용하여 화면의 구조를 스케치하는 프로토타입

(2) 디지털

• 디지털 편집기, HTML 등의 프로토타이핑 도구를 사용해 화면의 구조를 만드는 프로토타입