UI(User Interface) 개념
- UI(사용자 인터페이스)는 넓은 의미에서 사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 물리적, 가상의 매개체이다.
- 좁은 의미론 정보 기기나 소프트웨어의 화면 등에서 사람이 접하는 화면이다.
- UX(사용자 경험)는 UI를 포함하고 있다.
UI 유형
- UI 유형엔 CLI, GUI, NUI, OUI가 있다.
- CLI(Command Line Interface)
- 명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스
- GUI(Graphical User Interface)
- 그래픽 환경에 기반한 마우스나 전자펜을 이용한 사용자 인터페이스
- NUI(Natural User Interface)
- 키보드나 마우스없이 신체 부위를 이용하는 사용자 인터페이스
- 터치, 음성 등
- OUI(Organic User Interface)
- 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스
분야
- 물리적 제어 분야: 정보 제공과 기능 전달을 위한 하드웨어 기반
- 디자인적 분야: 콘텐츠의 정확하고 상세한 표현과 전체적 구성
- 기능적 분야: 사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능
UI 설계 원칙
UI 설계 원칙엔 직관성, 유효성, 학습성, 유연성이 있다.
- 직관성(Intuitiveness): 누구나 쉽게 이해하고, 사용할 수 있어야 함
- 유효성(Efficiency): 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
- 학습성(Learnability): 초보와 숙련자 모두 쉽게 배우고 사용할 수 있게 제작
- 유연성(Flexibility): 사용자의 요구사항을 최대한 수용하고, 실수를 방지할 수 있게 제작
UI 요구사항 구분
- 기능적 요구사항
- 시스템이 제공하는 기능, 서비스에 대한 요구사항
- 시스템의 입출력, 데이터, 연산에 관한 요구사항
- 비기능적 요구사항
- 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항
- 플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항
- 비용, 일정 등 프로젝트 계획에 관한 요구사항
기능성 상세 품질 요구사항
- 적절성, 정밀성, 상호 운용성, 보안성, 호환성
스토리보드
스토리보드는 UI 화면 설계를 위해 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축할 서비스를 위한 대부분의 정보가 수록된 문서이다.
또한 디자이너와 개발자가 최종적으로 참고하는 산출 문서이다.
UI 화면 설계를 위해선 와이어 프레임, 스토리보드, 프로토타입이 활용된다.
| 구분 | 설명 | 도구 |
|---|---|---|
| 와이어프레임 (Wireframe) | 이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업 | 파워포인트 키노트 스케치 일러스트 |
| 스토리보드 (Storyboard) | 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담긴 설계 산출물 | 파워포인트 키노트 스케치 |
| 프로토타입 (Prototype) | 정적 화면으로 설계된 와이어 프레임 혹은 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형 | HTML/CSS |
스토리보드 작성 절차
- 전체 개요 작성
- 서비스 흐름 작성
- 스타일 확정
- 메뉴별 화면 설계도 작성 및 상세설명
- 추가 관련 정보 작성
UI 프로토타입
- 프로토타입은 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위해 전체적인 기능을 간략한 형태로 구현한 시제품이다.
- 프로토타입은 사용자의 요구사항이 정확하게 반영될 때까지 지속적으로 개선하고 보완해서 최종 설계를 완성한다.
프로토타입의 장단
- 장
- 사용자 이해과 설득 용이
- 개발 시간 감소
- 오류 사전 발견을 통한 예방 가능
- 단
- 수정 과정 증가시 작업시간 증가 위험 존재
- 요구사항에 대한 적절한 타협 필요
- 자원 효율성 관점에선 필요 이상의 많은 자원 소모
