[정처기 실기] 6장 - 화면 설계

사용자 인터페이스

사용자 인터페이스(UI): 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어

• 정보 제공과 전달을 위한 물리적 제어에 관한 분야
• 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
• 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 대한 분야

 

구분

• CLI(Command Line Interface): 명령과 출력이 텍스트 형태로 이루어지는 인터페이스
• GUI(Graphical User Interface): 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
• NUI(Natural User Interface): 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

   

기본 원칙

• 직관성: 누구나 쉽게 이해하고 사용할 수 있어야 한다.
• 유효성: 사용자의 목적을 정확하게 완벽하게 달성해야 한다.
• 학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다.
• 유연성: 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 한다.

 

UI 설계 도구

• 와이어프레임: 뼈대를 설계하는 단계
• 목업: 와이어프레임을 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
• 스토리보드: 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
• 프로토타입: 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
• 유스 케이스: 사용자 측면에서의 요구사항

 

UI 표준 및 지침

UI 표준: 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용. 화면 구성이나 화면 이동 등이 포함.

UI 지침: UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야 할 공통의 조건.

 

웹의 3요소: 웹 표준, 웹 접근성, 웹 호환성

• 웹 표준: 웹에서 사용되는 규칙 또는 기술. 
• 웹 접근성: 누구나 어떠한 환경에서도 웹 사이트에 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장
• 웹 호환성: 환경이 달라져도 모든 이용자들이 동등한 서비스를 제공받을 수 있어야 함.

 네비게이션: 사용자가 사이트에서 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것.

 

UI 요구사항 확인

UI 요구사항 확인 순서: 목표 정의 --> 활동 사항 정의 --> UI 요구사항 작성

 

UI 요구사항은 반드시 사용자 중심으로 작성.

 

정황 시나리오: 사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것. 육하원칙에 따라 간결하고 명확하게 작성.

ex) 윤희는 회의가 끝난 후 핸드폰을 켰다. 주요 회의 내용을 메모하고 다음 약속을 확인하는 한편, 회의 동안 중요한 전화가 있었는지 확인했다.

 

UI 프로토타입 제작 및 검토

프로토타입: 사용자의 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로, 테스트가 가능하다.

최대한 간단하게 제작. 필수적인 기능들을 반드시 포함. 지속적인 개선과 보완. 실제 사용자를 대상으로 테스트하는 것이 유리.

 

프로토타이핑의 종류

• 페이퍼 프로토타입 - 아날로그 적으로 손으로 직접 작성  (비용이 저렴, 즉시 변경이 가능 / 테스트하기에 부적당, 공유하기 어렵다.)
• 디지털 프로토타입 - 파워포인트 등의 프로그램을 사용하여 작성 (수정이 용이, 재사용 가능 / 프로그램의 사용법을 숙지하고 있어야 한다.)

 

UI 상세 설계

사이트 맵: 화면의 정보를 한눈에 파악하기 위한 시각적인 콘텐츠 모형. 일반적으로 계층형으로 표현.

 

 

* 이 글은 시나공 정보처리기사 실기 책을 토대로 작성되었습니다.