Computer Science/정보처리기사

[필기] 제1과목 소프트웨어 설계 (2) 화면 설계

조코링 2022. 6. 24. 15:06

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

사용자와 시스템 사이에서 사용자가 시스템을 원활하게 이용할 수 있도록 도움을 주는 것

  • 역할: 물리적 제어(전달), 구성, 기능
  • 특징: 사용자의 만족도에 가장 큰 영향을 줌

구분

  • Command Line Interface: 명령어 입력하는 등 텍스트를 통해 소통하는 방식
  • Graphic User Interface: 아이콘을 클릭하는 등 그래픽 요소를 통해 소통하는 방식
  • Natural User Interface: 말이나 행동 등 신체를 움직여 소통하는 방식

기본 원칙

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

설계 지침

  • 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성(기능 노출), 표준화, 접근성, 명확성, 오류 발생 해결
  • 사용자 경험(User eXperience)고려: 사용 대상, 환경, 목적, 빈도 등
  • 핵심 기능 고려: 메뉴 구조를 단순화하고 간결한 정보 제공
  • 호환성 확장성 고려: 3개 이상의 브라우저에서 동등한 서비스 제공
  • 정보 소외계층의 접근성 고려: 장애인, 고령자 등의 정보 접근 및 이용 편의 증진

한국형 웹 콘텐츠 접근성 지침

장애인과 비장애인 모두 동등하게 접근하고 사용할 수 있는 웹 콘텐츠를 제작하기 위한 지침

  • 인식의 용이성: 대체 텍스트, 멀티미디어 대체 수단, 명료성
  • 운용의 용이성: 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 네비게이션
  • 이해의 용이성: 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움
  • 견고성: 문법 준수, 웹 애플리케이션에 대한 접근성

전자정부 웹 표준 준수 지침

정부 기관의 홈페이지를 구축할 때 반영해야하는 최소한의 지침

  • 내용의 문법 준수
  • 내용과 표현의 분리 --- 웹 문서의 구조화
  • 동작의 기술 중립성 보장
  • 플러그인의 호환성
  • 콘텐츠의 보편적 표현 --- 브라우저에 독립적
  • 운영체제에 독립적인 콘텐츠 제공
  • 부가 기능의 호환성 확보
  • 다양한 프로그램 제공

UI 설계 도구

요구사항에 맞게 화면 구조, 배치 등을 설계할 때 사용하는 도구

와이어프레임

  • 기획 초기 단계에 사용, 개략적인 뼈대를 설계
  • 각 페이지 영역 구분, 컨텐츠, 텍스트 배치 등을 설계
  • 사용 도구: 손그림, 파워포인트, 키노트, 일러스트, 포토샵 등

스토리보드

  • 와이어프레임을 확장하여 컨텐츠에 대한 설명, 페이지 간 이동 흐름 등을 포함
  • 디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
  • 절차: 메뉴 구성도 만들기 - 스타일 확정 - 설계
  • 사용 도구: 파워포인트, 키노트, 스케치 등

목업(Mockup)

  • 와이어프레임보다 실제 화면에 유사하게 정적인 화면을 설계
  • 사용방법 설명, 평가, 디자인 등을 위함
  • 사용 도구: 발사믹 목업, 파워 목업 등

프로토타입

  • 실제로 구현된 것처럼 핵심적인 기능을 포함하여 간단하게 제작한 모형, 동적인 형태로 테스트가 가능함
  • 완성품을 만들기 전 사용자의 이해를 돕기 위해 제작
  • 사용 도구: 페이퍼 프로토타입 / 디지털 프로토타입(html/css, 카카오 오븐, 네이버 프로토 나우, Flinto 등)
  • 제작 단계: 요구사항 분석 - 핵심 기능 위주로 프로토타입 작성 - 사용자 피드백 - 프로토타입 보완 및 합의

Use Case

  • 사용자 측면에서 바라본 요구사항, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한 것
  • 자연어로 작성된 내용을 구조적으로 표현

UI 요구사항

UI 요구사항 확인

  1. 목표 정의
    • 여러 사용자를 대상으로 인터뷰 진행(개별적, 1시간 이내)
  2. 활동 사항 정의
    • 사용자의 요구사항 및 회사의 상황 등을 고려하여 UI 디자인 방향성 제시
  3. UI 요구사항 작성
    • 사용자 중심으로 다양한 의견을 고려하여 작성
    • 전체적인 구조 파악 및 검토 필요

UI 요구사항 작성 과정

  1. 요구사항 요소 확인
    • 데이터 요구: 사용자의 요구사항을 기반으로 필요한 데이터, 초기 확인 필요
    • 기능 요구: 사용자의 목적 달성을 위해 무엇을 실행해야 하는지를 동사형으로 기술
    • 제품/서비스 품질: ISO/ISE 9126(기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성)을 기준으로 확인
    • 제약 사항: 개발 비용, 규제, 일정 등
  2. 정황 시나리오 작성
    • 사용자의 관점에서 기능 위주로 작성
    • 육하원칙에 따라 작성, 전문가에게 검토 받기
  3. 요구사항 작성
    • 정황 시나리오를 기반으로 작성
  • ISO/ISE 9126 부가 설명
    기능성: 적절성(정합성), 정밀성(정확성), 상호 운용성, 보안성, 호환성
    신뢰성: 성숙성: 고장 허용성, 회복성
    사용성: 이해성, 학습성, 운용성, 친밀성
    효율성: 시간 효율성, 자원 효율성
    유지보수성: 분석성, 변경성, 안정성, 시험성
    이식성: 적용성, 설치성, 대체성, 공존성

UI 설계서

사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성한 문서
기획자, 개발자, 디자이너의 원활한 의사소통을 위해 필요

구성

  • UI 설계서 표지: 프로젝트 이름, 시스템 이름, 회사 로고 등
  • UI 설계서 개정 이력: 초안 이후 버전을 늘려가며 이력 작성
  • UI 요구사항 정의서: 사용자 요구사항을 정리한 문서
  • 시스템 구조: UI 요구사항 및 프로토타입을 기반으로 시스템 구조 설계
  • 사이트 맵: 전체 컨텐츠를 한 눈에 알아볼 수 있도록 메뉴별로 구분한 것
  • 프로세스 정의서
  • 화면 설계

UI 유용성에 따른 설계

  • UI 유용성: UI를 통해 사용자가 원하는 목표를 효과적으로 달성했는지를 나타내는 척도
  • 실행차를 줄이기 위한 UI 설계 원리 검토
    • 실행차: 사용자가 원하는 기능과의 차이
    • 사용자의 의도를 파악하여 불필요하거나 중복되는 기능이 있는지 확인
    • 행위 순서를 규정하고, 세분화(사용자가 임의로 순서를 변경할 수 있도록)
    • 사용자가 행위 순서를 직접적으로 파악하고 실행할 수 있도록 제공
  • 평가차를 줄이기 위한 UI 설계 원리 검토
    • 평가차: 사용자가 원하는 결과와의 차이
    • 수행한 키 조작의 결과 및 시스템 상태의 변화를 사용자가 빠르고 쉽게 지각하도록 유도

UI 시나리오 문서 작성(상세 설계)

  • UI 시나리오 문서: 실제 구현을 위해 모든 화면에 대한 자세한 설계 내용을 포함한 문서
  • 작성 원칙: 순차적 묘사, Tree 혹은 Flowchart 형태로 작성, UI 요소들 간 상호작용을 포함, 레이아웃 및 기능 정의
  • 일반 규칙
    • 주요 키의 위치와 기능
    • 공통 UI 요소
    • 기본 스크린 레이아웃
    • 기본 인터랙션 규칙
    • 공통 단위 태스크 흐름
    • 케이스 문서 --- 다양한 상황에서 공통적으로 적용되는 시스템의 동작을 정의한 문서
  • 요건: 완전성, 일관성, 이해성, 가독성, 수정 용이석, 추적 용이성
  • 기대효과: 요구사항 이해 및 의사소통에 있어 오해가 줄어들고 재작업 가능성을 낮출 수 있음, 불필요한 기능 최소화

UI 설계 관련 기타 개념

감성공학

  • 인체의 특징과 감정을 제품설계에 반영하는 기술
  • 인간 중심 설계를 기초로 함
  • 관련 기술: 생체 측정 기술, 인간의 오감 센서 및 감성 처리 기술, 감성 디자인 기술, 새로운 감성을 창출하기 위한 기술
  • 접근 방법
    • 인간의 감성 이미지를 측정: 제품에 대한 이미지를 조사, 분석하여 디자인과 연결
    • 개인이 갖고 있는 이미지를 구체화: 개인성에 중점을 둠, 문화적 감성
    • 인간의 감각을 측정하고 수학적 모델을 구축하여 활용

HCI(Human Computer Interaction)

  • 사람이 시스템을 보다 편리하고 안정적으로 사용할 수 있도록 연구하고 개발하는 학문

UX(User eXperience)

  • 사용자가 시스템을 이용하면서 느끼고 생각하는 총체적인 경험
  • 특징: 주관성(개인에 따라 다름), 정황성(환경에 따라 다름), 총체성(심리적, 감성적)

※ 강의 링크: https://inf.run/FkNC

저작자표시 비영리 (새창열림)