[정보처리기사] 필기 노트 - 화면 설계

• UI 개요
  • UI 란?
    • 사용자 인터페이스 (User Interface)
    • 사용자와 컴퓨터 시스템 또는 프로그램 간의 소통을 원활하게 도와주는 연계작업
  • UI 의 설계 원칙
    • 직관성: 누구나 쉽게 이해하고 사용해야 함
    • 유효성: 사용자의 목적을 정확하게 달성해야 함
    • 학습성: 누구나 쉽게 배우고 익힐 수 있어야 함
    • 유연성: 사용자의 요구사항을 최대한 수용하며, 오류를 최소화해야 함
• UI 지침
  • UI 의 설계 지침
    • 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결
  • UI 의 요구사항
    • 품질 요구사항
      • 기능성: 소프트웨어를 특정 조건에서 사용할 때 실제 수행 결과가 품질 요구사항을 만족하는 기능에 대한 능력
      • 신뢰성: 시스템이 일정한 시간 또는 작동되는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 능력
      • 사용성: 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 능력
      • 효율성: 할당된 시간에 한정된 자원으로 빨리 처리할 수 있는 능력
      • 유지 보수성: 요구사항을 개선하고 확장하는데 있어 얼마나 용이한가를 의미
      • 이식성: 다른 플랫폼(운영 체제)에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가를 의미
• 프로토타입 (Prototype)
  • 프로토타입이란?
    • 사용자 요구사항을 기반으로 실제 테스트할 수 있는 동적인 형태의 모형
    • 사용자의 요구사항이 정확히 반영될 때까지 계속해서 개선, 보완됨
  • UI 프로토타입
    • 요구사항에 따라 UI 디자인을 작성하기 전에 미리 화면을 설계하는 단계
    • 스케치, 그림, 글 등을 손으로 작성하는 페이퍼 프로토타입 (Paper Prototype)과 컴퓨터를 이용하는 디지털 프로토타입 (Digital Prototype)이 있음
  • UI 프로토타입의 장단점
    • 장점
      • 사용자 설득과 이해가 쉬움
      • 오류를 사전에 방지
      • 개발 비용과 시간 감소
    • 단점
      • 많은 수정을 거치는 경우 작업 시간이 늘어날 수도 있음
      • 필요 이상으로 자원을 많이 소모할 수 있음
      • 정확한 문서 작업이 생략될 수 있음
• 감성공학
  • 감성공학이란?
    • 감성공학이란?
      • 인간의 감성을 정량적으로 측정하고 분석하여 제품 설계에 반영하는 기술
      • 인간이 원하는 이미지나 감성을 구체적인 제품설계로 실현해내는 공학적인 접근 방법
    • 감성공학의 분야
      • 생체 측정 기술, 인간의 오감 센서 및 감성 처리 기술, 감성 디자인 기술, 마이크로 가공 기술, 새로운 감성을 창출하기 위한 기술
  • HCI (Human-Computer Interaction)
    • 사용자가 편리하게 사용할 수 있는 시스템의 개발과 방법을 연구하는 학문
    • 사람과 컴퓨터 기술이 서로에게 영향을 미치는 방식을 연구하는 학문
  • UX (User eXperience)
    • UX 란?
      • 제품과 시스템, 서비스 등을 사용자가 직간접적으로 경험하면서 느끼고 생각하게 되는 지각과 반응, 행동 등 총체적 경험
    • UX 의 특징
      • 주관성, 맥락성, 총체성
• UI 설계 도구
  • UI 설계 도구란?
    • 사용자의 요구사항에 맞게 UI의 레이아웃이나 UI 요소 등을 설계할 때 사용하는 도구
    • 종류: 와이어프레임, 목업, 스토리보드, 프로토타입 등
  • 와이어프레임 (Wireframe)
    • 웹 페이지에 대한 개략적인 레이아웃이나 UI 요소 등을 제안하기 위한 화면 설계도를 작성
    • 와이어프레임을 통해 개발자는 사이트의 기능을 이해하고, 디자이너는 디자인 컨셉을 계획하고, 고객은 요구사항이 제대로 전달되었는지 사전에 확인이 가능
  • 목업 (Mockup)
    • 실물과 흡사한 정적인 형태의 모형
    • 디자인, 사용 방법 설명, 평가를 위해 와이어프레임보다 좀 더 실제와 비슷하게 만든 정적인 형태의 모형
  • 스토리보드 (Storyboard)
    • 디자이너와 개발자가 참고하는 최종적인 산출 문서
    • 정책, 프로세스, 와이어프레임, 기능 정의, 데이터베이스 연동 등이 모두 포함된 설계 문서
  • 프로토타입 (Prototype)
    • 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형
    • 정적인 화면으로 설계된 와이어 프레임이나 스토리보드에 인터랙션을 적용하여 시뮬레이션이 가능