6장 화면 설계

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

 

UI란, 사용자와 시스템 간 상호작용이 원활히 이뤄지도록 도와주는 장치나 소프트웨어.

 

• 분야
  • 물리적 제어
  • 콘텐츠의 상세적 표현과 전체적 구성
  • 기능
• 특징
  • 사용자 만족도에 가장 큰 영향을 미침
  • 작업 시간을 단축, 업무에 대한 이해도 높여줌
  • 최소한 노력으로 원하는 결과
  • 수행 결과 오류 줄임
  • 작업 기능에 대한 구체적 방법 제시
  • 정보 제공자 - 공급자 간 매개 역할
  • 소프트웨어 아키텍처를 숙지해야 함.
• 구분
  • CLI(Command Line Interface) : 명령과 출력이 텍스트형태로 이뤄짐
  • GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택해 작업을 수행하는 그래픽 환경 인터페이스
  • NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
• 기본 원칙
  • 직관성 : 누구나 쉽게 이해하고 사용
  • 유효성 : 목적을 정확하고 완벽하게 달성해야 함
  • 학습성 : 누구나 쉽게 배우고 익혀야 함
  • 유연성 : 사용자 요구사항을 최대한 수용하고 실수를 최소화해야 함.
• 설계 지침
  • 사용자 중심 : 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경을 제공, 실사용자에 대한 이해가 바탕이 되어야 함.
  • 일관성 : 조작 방법 등을 일관성있게 제공하여 사용자가 쉽게 기억하고 습득할 수 있게 설계해야 함.
  • 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 함.
  • 결과 예측 가능 : 작동시킬 기능만 보고도 결과를 예측할 수 있게 설계해야 함
  • 가시성 : 주요 기능을 메인에 노출시켜 조작을 쉽게 설계해야 함.
  • 표준화 : 기능 구조와 디자인을 표준화해 한 번 학습한 이후 쉽게 사용할 수 있도록 설계해야 함.
  • 접근성 : 다양한 계층이 남녀노소 설계해야 함.
  • 명확성 : 사용자가 개념적으로 쉽게 인지하게 설계해야 함.
  • 오류 발생 해결 : 오류가 발생하면 사용자가 쉽게 인지하게 설계해야 함.
• UI 설계 도구
  • 와이어프레임
    • 개략적 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 것
  • 목업
    • 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적 모형
  • 스토리보드
    • 와이어프레임 + 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등
  • 프로토타입
    • 와이어프레임이나 스토리보드 등 인터랙션을 적용
  • 유스케이스
    • 사용자 측면 요구사항. 

---

UI 표준 및 지침

 

UI 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용

UI 지침 : UI 개발 과정에서 꼭 지켜야 할 공통의 조건

 

• 웹의 3요소
  • 웹 표준 (Web Standards) : 웹에서 사용되는 규칙 또는 기술
  • 웹 접근성 (Web Accessibility) : 누구나 어떤 환경에서도 웹 사이트에 제공하는 모든 정보를 접근해 이용할 수 있도록 보장하는 것
  • 웹 호환성 (Cross Browsing) : 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공
• UI 스타일 가이드
  • 구동 환경 정의
    • 프레임 세트 : 화면을 Top, Left, Contents 등 영역으로 프레임을 구분해 적용
  • 레이아웃 정의
    • 화면 구조 정의, 각 영역 메뉴 구성. Top, Left, Contents, Footer가 있음.
  • 네비게이션 정의
    • 네비게이션 메뉴 타입을 선택해 적용
  • 기능 정의
    • 시스템에 적용할 업무 과정에서 일어나는 모든 활동(프로세스 모델링 정의)이나 필요한 데이터 간 관계(데이터 모델 정의)를 논리적 모델로 상세화
  • 구성 요소 정리
    • 화면에 표시할 그리드(테이블 형식으로 쉽게 데이터 표시)나 버튼(기능 / 검색 / 그리드 관련 / 기타) 정의

---

UI 요구사항 확인

 

1. 목표 정의
   • 사용자들 대상 인터뷰 진행. 사용자들의 의견이 수렴된 비즈니스 요구사항 정의
2. 활동 사항 정의
   • 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항 정의
3. UI 요구사항 작성
   1. 요구사항 요소 확인
      • 데이터 요구
      • 기능 요구
      • 제품 / 서비스 품질
      • 제약 사항
   2. 정황 시나리오 작성
      • 사용자의 요구사항을 도출하기 위해 작성하는 것. 사용자 관점 시나리오.
   3. 요구사항 작성

---

UI 프로토타입 제작 및 검토

 

• 장점
  • 사용자 설득, 이해가 쉬움
  • 혼선 예방. 개발 시간 단축
  • 사전 오류 발견
• 단점
  • 사용자 모든 요구사항을 반영하기 위한 프로토타입 개선 및 보완 작업 때문에 작업 시간 증가, 필요 이상 자원 소모 가능성
  • 중요한 작업이 생략될 수도 있음
• 종류
  • 페이퍼 프로토타입
  • 디지털 프로토타입
• 개발 단계
  • 사용자 요구사항 분석
  • 프로토타입 작성. 핵심 기능 중심 개발
  • 요구사항을 잘 수행하는 지 확인
  • 프로토타입 기반 수정과 합의

---

UI 흐름 설계

 

1. 기능 작성
   • 기능적 / 비기능적 요구사항 정리
2. 입력 요소 확인
   • 화면에 표현되어야 할 기능 확인 후 화면에 입력할 요소 확인
   • 기능 확인 - 입력 요소 확인 - 화면 확인 - 화면 간 흐름 확인
3. 유스케이스 설계
   • UI 요구사항 기반 UI 유스케이스 설계
4. 기능 및 양식 확인
   • 텍스트 박스, 콤보 박스, 라디오 박스, 체크 박스 확인 및 규칙 정의

---

UI 상세 설계

 

1. 요구사항 확인
   • UI 상세 설계를 위한 요구사항 최종 확인
2. UI 설계서 표지 및 개정 이력 작성
   • 표지엔 시스템이나 프로젝트명 포함해 작성
   • UI 설계서가 수정될 때마다 버전으로 0.1씩 높임. 초안 버전은 1.0
3. UI 구조 설계
   • UI 요구사항과 UI 프로토타입에 기초해 UI 구조 설계
4. 메뉴 구조 설계
   • 사이트 맵 구조를 통해 사용자 기반 메뉴 구조 설계
     
     1. 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있게 메뉴별 구분한 사이트 맵 구조 설계
     2. 작성한 사이트 맵 상세 내용을 표 형태로 작성
     3. 사용자 요구 프로세스들에 대해 작업 진행 순서에 맞춰 프로세스 정의서 작성
5. 화면 설계
   • UI 프로토타입과 UI 프로세스 참고해 필요한 화면을 페이지별로 설계