[정보처리기사 실기] 06. 화면 설계

사용자 인터페이스(User Interface)

• 사용자와 시스템 간의 상호작용이 원활하게 이루어지도록 도와주는 장치나 소프트웨어
• 사용자 인터페이스의 3가지 분야
  • 정보 제공과 전달을 위한 물리적 제어에 관한 분야
  • 콘텐츠와 상세적인 표현과 전체적인 구성에 관한 분야
  • 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

 

 

사용자 인터페이스의 구분

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

 

 

사용자 인터페이스의 기본 원칙

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

 

 

UI 표준 및 지침

• UI 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로, 화면 구성이나 화면 이동 등이 포함된다.
• UI 지침 : UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야할 공통의 조건을 의미한다.

 

 

UI 스타일 가이드 

• 개발자나 디자이너들이 UI를 작성할 때 기준이 되는 규칙
• 구동 환경, 레이아웃, 네비게이션 등을 정의
• 작성 순서
  1. 구동 환경 정의 : 컴퓨터 OS, 웹 브라우저, 모니터 해상도, 프레임 세트 등을 사용 환경에 적합하도록 규정
  2. 레이아웃 정의 : 화면 구조를 정의하고 각 영역의 메뉴 구성
  3. 네비게이션 정의 : 네비게이션의 메뉴 타입을 선택 적용
  4. 기능 정의 : 시스템에 적용할 업무 과정에서 일어나는 모든 활동이나 필요한 데이터 간의 관계 등을 논리적인 모델로 상세화
  5. 구성 요소 정의 : 화면에 표시할 그리드나 버튼 등을 정의

 

 

UI 설계 도구

• 와이어프레임(Wireframe)
  • 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 도구
  • 기획 단계의 초기에 제작
  • 개발자나 디자이너 등의 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 사용
  • 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
• 목업(Mockup)
  • 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
  • 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지 않는다.
  • 툴 : 파워 목업, 발사믹 목업 등
• 스토리보드(Storyboard)
  • 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
  • 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
  • 서비스 구축을 위한 모든 정보가 들어 있다.
  • 툴 : 파워포인트, 키노트, 스케치, Axure 등
• 프로토타입(Prototype)
  • 와이어프레임이나 스토리보드 등에 인터렉션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
  • 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것
  • 일부 핵심적인 기능만 제공
  • 종류
    • 페이퍼 프로토타입 : 손으로 직접 작성하는 아날로그적인 방법
    • 디지털 프로토타입 : 프로그램을 사용하여 작성하는 방법
• 유스케이스(Usecase)
  • 사용자의 요구사항을 기능 단위로 표현하는 것
  • 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술
  • 사용자의 요구사항을 빠르게 파악함으로써 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화
  • 일반적으로 다이어그램 형식으로 묘사

 

 

 

UI 요구사항 확인

• 새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계
• 다양한 경로를 통해 사용자의 요구사항을 조사하고 분석한 후 작성해야 한다.

 

UI 요구사항 확인 순서

1. 목표 정의 : 사용자들은 인터뷰한 후 사용자들의 의견이 수렴된 비즈니스 요구사항 정의
2. 활동 사항 정의 : 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항 정의
3. UI 요구사항 작성 : UI 요구사항을 UI 개발 목적에 맞게 사용자 중심으로 작성

 

UI 요구사항 작성 순서

1. 요구사항 요소 확인 : 파악된 요구사항 요소의 종류와 각각의 표현 방식 등을 검토
2. 정황 시나리오 작성 : 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사
3. 요구사항 작성 : 정황 시나리오를 토대로 요구사항 작성

 

요구사항 요소

• 데이터 요구 : 사용자가 요구하는 모델과 객체들의 주요 특성을 기반으로 하여 데이터 객체들을 정리
• 기능 요구 : 사용자의 목적 달성을 위해 무엇을 실행해야 하는지를 동사형으로 설명
• 제품/서비스의 품질 : 데이터 및 기능 요구 외에 제품의 품질, 서비스, 여기에 감성적인 품질 등을 고려하여 작성
• 제약사항 : 제품 완료 데드라인, 전체 개발 및 제작에 필요한 비용, 시스템 준수에 필요한 규제가 포함

 

 

품질 요구사항

• 소프트웨어에 대한 요구사항이 사용자의 입장에서 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체
• 소프트웨어 품질 관련 표준
  • ISO/IEC 9126 : 소프트웨어의 품질 특성과 평가를 위한 국제 표준
  • ISO/IEC 25010 : ISO/IEC 9126에 호환성과 보안성을 강화하여 개정한 소프트웨어 제품에 국제 표준
  • ISO/IEC 12119 : 패키지 소프트웨어의 일반적인 제품 품질 요구사항 및 테스트를 위한 국제 표준
  • ISO/IEC 14598 : 소프트웨어 품질의 측정과 평가에 필요 절차를 규정한 표준

 

ISO/IEC 9125 소프트웨어 품질 특성

• 기능성(Functionality)
  • 소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부
  • 하위 특성 : 적절성, 적합성, 정밀성, 정확성, 상호 운용성, 보안성, 준수성
• 신뢰성(Reliability)
  • 주어진 시간 동안 주어진 기능을 오류 없이 수행할 수 있는 정도
  • 하위 특성 : 성숙성, 고장 허용성, 회복성
• 사용성(Usability) 
  • 사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대하여 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도를 나타냄
  • 하위 특성 : 이해성, 학습성, 운용성, 친밀성
• 효율성(Efficiency) 
  • 사용자가 요구하는 기능을 얼마나 빠르게 처리할 수 있는지 정도
  • 하위 특성 : 시간 효율성, 자원 효율성
• 유지 보수성(Maintainability)
  • 환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도
  • 하위 특성 : 분석성, 변경성, 안정성, 시험성
• 이식성(Portability)
  
  • 소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도
  • 하위 특성 : 적용성, 설치성, 대체성, 공존성

 

 

UI 설계

• 사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서
• 기획자, 개발자, 디자이너 등과의 원할한 의사소통을 위해 작성
• 순서
  1. UI 설계서 표지 작성 : 다른 문서와 혼동되지 않도록 프로젝트명 또는 시스템명을 포함하여 작성
  2. UI 설계서 개정 이력 작성 : UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지 정리
  3. UI 요구사항 정의서 작성 : 사용자 요구사항을 확인 및 정리
  4. 시스템 구조 작성 : UI 요구사항과 UI 프로토타입에 기초하여 전체 시스템의 구조 설계
  5. 사이트 맵 작성 : 사이트에 표시할 콘텐츠를 메뉴별로 구분하여 설계
  6. 프로세스 정의서 작성 : 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리
  7. 화면 설계 : 필요한 화면을 페이지별로 설계

 

 

UI 흐름 설계

• 업무의 진행 과정이나 수행 절차에 따른 흐름을 파악하여 화면과 폼을 설계하는 단계
• 순서
  1. 기능 작성 : 화면에 표현할 기능 작성
  2. 입력 요소 확인 : 화면에 표현되어야 할 기능을 확인 후 화면에 입력할 요소 확인
  3. 유스케이스 설계 : UI 요구사항을 기반으로 UI 유스케이스 설계
  4. 기능 및 양식 확인 : 텍스트 박스, 콤보 박스, 라디오 박스, 체크 박스 등을 확인하고 규칙 정의

 

 

UI 상세 설계

• UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대해 자세하게 설계를 진행하는 단계
• UI 상세 설계를 할 때는 반드시 시나리오 작성
• 순서
  1. 요구사항 확인 : UI 상세 설계를 위한 요구사항을 최종적으로 확인
  2. UI 설계서 표지 및 계정 이력 작성 
     • 표지 : 다른 문서와 혼동하지 않도록 프로젝트명이나 시스템명 포함
     • 개정 이력 : UI 설계서의 수정사항 정리
  3. UI 구조 설계 : UI 요구사항과 UI 프로토타입에 기초하여 UI 구조를 설계하는 단계
  4. 메뉴 구조 설계 : 사이트 맵 구조를 설계한 후, 이를 바탕으로 사용자 기반 메뉴 구조 설계
  5. 화면 설계 : UI 프로토타입과 UI 프로세스를 참고하여 필요한 화면을 페이지별로 설계

 

 

UI 시나리오 문서

• 사용자의 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름, 다양한 상황에서의 예외 처리 등을 정리한 문서
• 사용자가 최종 목표를 달성하기 위한 방법을 순차적으로 묘사
• 조건
  • 완전성(Complete) : 누락되지 않도록 최대한 상세하게 기술
  • 일관성(Consistent) : 서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성 유지
  • 이해성(Understandable) : 누구나 쉽게 이해할 수 있도록 설명
  • 가독성(Readable) : 표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록 해야 한다.
  • 수정 용이성(Modifiable) : 시나리오의 수정이나 개선이 쉬워야 한다.
  • 추적 용이성(Traceable) : 변경 사항은 언제, 어떤 부분이, 왜 발생했는지 쉽게 추적할 수 있어야 한다.

 

 

HCI(Human Computer Interaction or Interface) 

• 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문
• 최종 목표는 시스템을 사용하는 데 있어 최적의 사용자 경험(UX)를 만드는 것
• 어떤 제품이 좋은 제품인지, 어떻게 하면 좋은 제품을 만들 수 있는지 등을 연구

 

UX(User Experience) 

• 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험
• 특징 
  • 주관성(Subjectivity) : 사람들의 개인적, 신체적, 인지적 특성에 따라 다르므로 주관적
  • 정황성(Contextuality) : 경험이 일어나는 상황 또는 주변 환경에 영향을 받는다.
  • 총체정(Holistic) : 개인이 느끼는 총체적인 심리적, 감성적인 결과

 

감성 공학

• 제품이나 작업 환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술
• 인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존하는 종합 과학
• 감성 공학의 목적은 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것
• 인간의 감성을 구체적으로 제품 설계에 적용하기 위해 공학적인 접근 방법 사용