2장. 화면 설계

주간컴공 채널의 지마님의 정보처리기사 필기 유튜브 강의를 들으며 정리한 내용입니다. 1과목 소프트웨어 설계의 1장 요구사항 확인 파트를 필기하였습니다.

1. 사용자 인터페이스

• 사용자 인터페이스의 3가지 분야: 제어, 구성, 기능

• 사용자 인터페이스의 특징
  • 만족도에 큰 영향을 끼치기 때문에, 가장 많이 변경된다.
  • 편리성과 가독성, 이해도를 높인다.
  • 최소한의 노력으로 결과를 얻을 수 있도록 한다.
  • 소프트웨어 아키텍처를 숙지해야 한다.
• 사용자 인터페이스의 구분
  • CLI(Command Line Interface): 텍스트
  • GUI(Graphic User Interface): 마우스
  • NUI(Natural User Interface): 말, 행동
• 사용자 인터페이스의 설계 지침
  • 사용자 중심, 일관성, 단순성, 결과 예측 가능, 표준화, 접근성
  • 명확성, 가시성, 오류 발생 해결

2. UI표준 및 지침

• 웹 표준: 웹 상에서 지켜야 할 표준
  • 웹 접근성: 장애가 있는 사람들도 동등하게 이용 가능
  • 크로스 브라우징: 어느 환경(브라우저, 플랫폼)에서도 이용 가능
• 접근성 지침
  • 인식(대체): ex) 버튼이 있다면, 눈이 안 보이는 사람을 위한 대체 음성 안내 제공
  • 운용(포인팅): 시스템을 사용할 때 장애가 있는 사람이 편해야 한다. (마우스보다는 키보드나 음성으로 좀 더 쉽게 정보에 접근할 수 있도록 메뉴 구성)
  • 이해(논리적): 서비스 이용의 결과가 논리적으로 납득되어야 함 ex) 로그인이 안 될 때 왜 안 되는 지 안내 메시지
  • 견고함: 제작에 필요한 문법을 준수하여 개발하여야 한다.

• 네비게이션: 접근성 지침을 통해 만들어지는 수많은 요소. 네비게이션 요소를 통해 서비스 이용 가능 ex) 메뉴, 링크, 사이트 맵, 메뉴 바

• 정부 웹 표준 지침: 누구나 평등하게 정보 습득 (접근성)
  • 문법준수: 보통적, 보통의 표현
  • 비표준 지양: 불가피할 경우 대체정보 제공
  • 호환성: 결제, 인증기능 등

3. UI 설계 도구

표준 및 지침에 따라 UI를 제작하기 위해서는 결과물에 대해 미리보기 기능을 하는 설계도가 필요하다.

• 와이어프레임: 뼈대(레이아웃) 배치, 화면단위
• 목업: 실제 화면과 유사. 기능 구현 아님
• 스토리보드
  • 와이어프레임 + 콘텐츠 설명(Description), 이동 경로
  • 작업 지침서 활용(Description은 세부적 작성 필요)
• 프로토타입: 인터렉션 적용(동적인 형태)
• 유스케이스
  • 사용자 요구사항(기능적)을 다이어그램 형식으로 문서화
  • 각각의 유스케이스에 대한 명세서 작성

4. UI 요구사항 확인

• 목표 정의
  • 인터뷰: 다양한 의견을 받을 수 있도록 개별 인터뷰 => 사업적, 기술적 요구사항 이해
  • 리서치: 인터뷰 내용을 토대로 진행
• 활동 사항 정의(협의): 목표, 예산, 계획, 우선순위
• UI요구사항 작성: 사용자 중심으로 다양한 의견 반영
  • UI요구사항 요소 확인
    • 데이터: 가장 먼저 확인, 특성 기반 정리
    • 기능: 무엇을 실행하는지 동사형으로 정리
    • 품질: 품질, 서비스, 감성적인 부분
    • 제약: 비용과 데드라인, 규제 등
  • 정황 시나리오 작성
    • 6하원칙, 이야기 형식, 완성된 서비스를 상상
  • 요구사항 작성
    • 정황 시나리오를 토대로 작성

5. 품질 요구사항

• 기능
  • 적정한 기능이 정확하게 + 호환, 보안
  • 적절성, 정확, 상호운용, 보안, 호환
• 신뢰
  • 고장이 나도 문제 없는지
  • 성숙성, 고장허용성, 회복성
• 사용
  • 얼마나 쉽고 편한지
  • 이해, 학습, 운용 친밀
• 효율
  • 한정된 시간, 자원으로 많은 일 처리
  • 시간, 자원
• 유지보수
  • 개선 및 확장
  • 분석, 변경, 시험, 안정
• 이식
  • 다른 환경에서 적응
  • 적용, 설치, 대체, 공존

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

UI프로토타입이란 동적인 형태(실제 동작하는 것처럼)의 테스트 모델을 말한다. 필수 기능을 포함하고, 간단하게, 실 사용자 테스트로 기능을 검증할 수 있다.

• 장단점
  • 장점: 이해와 오류발견 쉬움
  • 단점: 자원 소모, 생략 가능성
• 종류
  • 페이퍼(손): 저렴, 즉시, 간단
  • 디지털(SW): 결과와 비슷, 테스트 및 수정, 어려움
• 고려사항
  • 계획: 목적 - 환경 - 핵심UI - 인원 - 검증 - 해결 - 가이드
  • 작성: 범위확인 - 목표확인 - 자원확인
• 제작단계
  • 요구사항 분석
  • 요구사항 작성(프로토타입)
  • 사용자 테스트 및 수정
  • 사용자 피드백 및 승인 (반복)

7. UI 설계서 작성

• 표지: 프로젝트(시스템)명
• 개정 이력: 초안작성 이후 변경할 때마다 버전 0.1 증가
• 요구사항 정의서: 요구사항 별 적용여부 기록
• 시스템 구조: 전체 시스템(사용자, 관리자 등)의 구조 설계
• 사이트맵: 전체 콘텐츠 메뉴별 구성 + 표 형태로 작성
• 프로세스 정의서: 사용자 입장에서 작업이 진행되는 순서도
• 화면 설계: 각 화면별로 표지 + 스토리보드

8. UI유용성평가, 상세설계, 감성공학

UI 유용성평가

• 뜻: 사용자 입장에서 얼마나 유용한지
• 실행(기능): 불필요, 중복, 불편, 어려운
• 결과(평가): 즉각적이지 않은 피드백, 결과 이해, 파악이 어려움

상세설계

• 시나리오: 순서도나 계층구조로 작성
• 일반규칙: 기능, 구조, 인터렉션, 예외처리 (이후 세부기능 정의)
• 기대효과: 긍정적인 문장과 단어 (완전, 일관, 이해 등..)

감성공학

• HCI: 편리하고 안전한 시스템 개발(최적의 UX가 목표)
• UX: 시스템 이용 경험. 주관적임(객관적인 UI편리성과 반대)
• 감성공학: 감성적, 인간친화적 개발