1.소프트웨어 설계 - 화면설계

2. 화면 설계

2-1. 사용자 인터페이스(🔖출제)

• 사용자 인터페이스 (UI)

  • 초기 : 사용자와 컴퓨터간의 상호작용 / 후기 : 정보 내용을 전달하기 위한 표현 방법
  • 사용자 인터페이스의 3가지 분야
    • 물리적 제어 (정보제공,전달)
    • 전체적 구성 (상세적 표현)
    • 기능 (간단하고 편리한 사용성)
  • 소프트웨어 영역 중 변경이 가장 많이 발생
  • 편리성과 가독성을 높여 작업시간 단축
  • 최소한의 노력으로 원하는 결과 / 사용자 중심으로 설계, 사용자 중심의 상호작용
  • 막연한 작업 기능에 대한 구체적 방법 제시

• 사용자 인터페이스의 구분

  • CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이뤄짐 (ex. cmd)
  • GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업수행
  • NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작
  • VUI(Voice User Interface) : 사람의 음성으로 기기 조작
  • OUI(Oraganic User Interface) : 모든 사물과 사용자간의 상호 작용을 위한 인터페이스

• 사용자 인터페이스의 기본 원칙(🔖출제)

  • 직관성 : 누구나 쉽게 이해
  • 유효성 : 목적을 정확하고 완벽하게 달성
  • 학습성 : 누구나 쉽게 배우고 학습
  • 유연성 : 요구사항을 최대한 수용 / 실수 최소화

• 사용자 인터페이스의 설계 지침

  • 사용자 중심
  • 일관성 : 버튼이나 조작방법을 일관성 있게 제공
  • 단순성 : 조작 방법의 단순화
  • 결과 예측가능
  • 가시성
  • 표준화 : 기능과 구조의 디자인을 표준화 하여 학습 이후에는 쉽게 사용이 가능해야함
  • 접근성 : 연령, 성별, 인종에 상관 없이
  • 명확성
  • 오류 발생 해결

• 사용자 인터페이스 개발 시스템의 기능

  • 입력 검증 / 에러 처리 / 도움제공

2-2. UI 표준 및 지침

• 웹표준성(Web Standards) : 다른 기종이나 플랫폼에서도 구현되도록 제작
• 웹 접근성(Web Accessibility) : 누구나, 어떠한 환경에서도 웹에서 제공하는 모든 정보에 접근가능
• 웹 호환성(Cross Browsing) : 하드웨어나 소프트웨어등 다른 환경에서도 동등한 서비스 제공

• 내비게이션 : 사용자가 사이트에서 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것 (사용자 중심)
  • 메뉴 / 링크 / 이미지 맵(이미지 하이퍼링크) / 사이트 맵 / 사이트 메뉴바 / 내비게이션 바 / 디렉터리

2-3. UI 설계도구

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

• 1. 와이어프레임 : 대략적인 레이아웃이나 UI요소에 대한 뼈대, 초기의 제작

     • 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵

  2. 목업 : 와이어 프레임보다 좀 더 실제화면과 유사하게 만든 정적 형태 모형

     • 툴 : 파워 목업, 발사믹 목업

  3. 스토리보드 : 와이어프레임 + 디스크립션

     • 툴 : 파워포인트, 키노트, 스케치, Axure

  4. 프로토타입 : 와이어 프레임이나 스토리보드에 인터랙션을 적용한 동적인 형태의 모형

     • 인터렉션 : UI를 통해 시스템을 사용하는 일련의 상호작용
     • 툴 : HTML/CSS , Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

  5. 유스케이스 : 사용자의 요구사항, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술 (문서화)

     ​ 자연어를 구조적으로 표현, 각각의 유스케이스에 대한 명세서를 작성함

2-4. UI 요구사항 확인

1. 목표 정의 - 인터뷰를 진행
   • 인터뷰 유의 사항 : 개별적 진행 / 많은 사람의 의견을 다양하게 수렴 / 한시간 이하 / 리서치 시작 전에 실행
2. 활동 사항 정의
3. UI 요구사항 작성
   1. 요구사항 요소 확인
   2. 정황 시나리오 작성 : 사용자 관점에서 시나리오 작성 / 사용자가 주로 사용하는 기능 위주로 작성
   3. 요구사항 작성

2-5. 품질 요구사항 (🔖출제)

• ISO/IEC 9127 , ISO/IEC 21510 : 소프트웨어 품질 특성과 평가를 위한 표준 지침 (21510이 발전 모델)
• ISO/IEC 12119 : 테스트 절차를 포함한, 품질 표준
• ISO/IEC 14598 : 개발자, 구매자, 평가자 별로 수행해야 할 제품 평가 활동을 규정함

2-5-1 ISO/IEC 9126(🔖출제, 🏷️중요)

1. 기능성(Functionally)

   • 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지

   상세 품질 요구사항	설명
   적절성/적합성(Suitablity)	적절한 기능을 제공할수 있는가
   정밀성/정확성(Accuracy)	사용자가 요구하는 결과를 정확하게 산출 가능한가
   상호 운용성(Interoperability)	다른 시스템들과 서로 어울릴 수 있는가
   보안성(Security)	접근 권한을 허용하거나 차단할 수 있는가
   준수성(Compliance)	표준 관례 및 규정을 준수하는가

2. 신뢰성(Reliablilty)

   • 요구된 기능을 정확하고 일관되게 오류없이 수행하는지

   상세 품질 요구사항	설명
   성숙성(Maturity)	고장을 피해갈 수 있는가
   고장 허용성(Fault tolerance)	인터페이스 결여시에도, 규정된 성능 수준을 유지하는가
   회복성(Recoverability)	고장 시, 다시 회복이 가능한가

3. 사용성(Usability)

   • 사용자가 쉽게 배우고 사용할 수 있으며, 다시 사용하고 싶은지

   상세 품질 요구사항	설명
   이해성(Understandability)	사용자가 이해할 수 있는 능력
   학습성(Learnability)	소프트웨어가 애플리케이션을 학습할 수 있는지
   운용성(Operability)	운용하고 제어할 수 있는 능력
   친밀성(Attractiveness)	다시 사용하고 싶은지

4. 효율성(Efficiency)

   • 한정된 자원, 한정된 시간동안 얼마나 빨리 처리할 수 있는지

   상세 품질 요구사항	설명
   시간 효율성(Time Behaviour)	적절한 반응, 처리시간, 처리율 제공 가능?
   자원 효율성(Resource Behaviour)	적절한 자원의 양과 종류를 제공?

5. 유지보수성(Maintainability)

   • 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도

   상세 품질 요구사항	설명
   분석성(Analyzability)	결함이나 고장의 원인, 수정될 부분을 식별 가능한가
   변경성(Changability)	환경변화로 인한 수정이 쉽게 가능한가
   안정성(Stability)	예상치 못한 결과를 최소화 가능한가?
   시험성(Testability)	변경 검증

6. 이식성(Portability)

   상세 품질 요구사항	설명
   적용성(Adaptablilty)	다른환경으로 변화가능한가
   설치성(Installability)	임의의 환경 소프트웨어를 설치할 수 있는가
   대체성(Replaceability)	다른 소프트웨어를 대체 가능한가
   공존성(Co-existence)	다른 소프트웨어와 공존 가능한가

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

• 프로토타입 : 사용자의 요구사항 기반 / 동적 형태 모형
• 최대한 간단히 / 핵심적 기능 제공, 작동방식에 필요한 모든 기능은 포함
• 종류
  • 페이퍼 프로토타입
  • 디지털 프로토타입
• 과정
  • 개발 계획 수립 과정
    • 아키텍처가 확정된 이후, 프로젝트의 실제 분석 작업이 완료되기 이전에 진행
  • 개발 후 결과 보고 과정

2-7. UI 설계서 작성

• 순서

  • UI 설계서 표지 작성 → UI 설계서 개정 이력 작성(최초 : 1.0 / 이후 + 0.1) → UI 요구사항 정의서 작성

    →시스템 구조 작성 → 사이트맵 작성(사이트를 메뉴별 구분 설계) → 프로세스 정의서 작성(전체적 흐름 파악)

    → 화면 설계(윈도우,메뉴,아이콘,포인터)

2-8. UI 상세 설계

• UI 설계자 또는 인터렉션 디자이너가 UI 시나리오 문서 작성

• 그래픽 디자이너가 시나리오를 바탕으로 디자인

• 개발자가 UI를 구현

• UI 문서작성규칙

  • 주요키의 위치와 기능 / 공통 UI요소 / 기본 스크린 레이아웃 / 기본 인터랙션 규칙 / 공통 단위 태스크 흐름 / 케이스

• UI 요소

  • 체크 박스 /라디오 버튼 / 텍스트 박스 / 콤보 상자 / 목록 상자

• UI 시나리오 문서의 요건

  • 완전성 : 상세히 기술, 사용자의 태스크에 초점
  • 일관성
  • 이해성
  • 가독성
  • 수정 용이성
  • 추적 용이성

2-9. HCI / UX / 감성공학

• HCI (Human Computer Interaction or Interface)

  : 시스템을 사용하는데에 있어 최적의 사용자 경험(UX)를 만드는 것

• UX (User eXperience)

  • 주관성(Subjectivility)
  • 정황성(contextuality)
  • 총체성(Holistic)

• 감성공학

  : 사용자의 감성에 알맞도록 설계 및 제작하는 기술

  • 생체 게측 기술/ 감각 계측 기술 / 센서 / 인공지능 / 생체 제어 기술
  • 감성공학의 요소기술
    • 기반 기술 : 인간의 특성 파악
    • 구현 기술 : 인터페이스를 구현
    • 응용 기술 : 새로운 감성 창조