소프트웨어 설계 2. 화면 설계

박유현·2020년 5월 13일
정보처리기사 필기
0

정보처리기사 필기 중요 개념 정리

목록 보기
2/15

1. 사용자 인터페이스(UI)

  • User Interface
    - 사용자가 시스템을 원활히 사용하도록 돕는 장치/소프트웨어
  • 특징
    - 사용자의 만족도에 가장 큰 영향 미침
    - 소프트웨어 영역 중 변경 가장 많음
  • 종류
    - CLI(Command Line Interface)
    - GUI(Graphic User Interface)
    - NUI(Natural User Interface)
  • 사용자 인터페이스의 기본 원칙
    - 직관성
    - 유효성
    - 학습성
    - 유연성
  • 설계 지침: 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

2. 내비게이션

  • Navigation
    - 사용자가 사이트에서 정보를 빠르게 찾도록 안내
    • 다양한 경로를 제공해야
    • 직관적이고 일관성 있어야
    • 메뉴(단추), 링크, 이미지 맵, 사이트 맵, 사이트 메뉴바, 내비게이션 바, 디렉터리 등으로 구성

3. 와이어프레임

  • Wireframe
    - 페이지에 대한 뼈대를 보여주는 UI 설계 도구의 하나
    • 기획 초기 단계에 제작
    • 화면 단위로 영역 구분, 콘텐츠, 텍스트 배치 등 설계
    • 개발자/디자이너 등이 레이아웃 협의하거나 진행 상태 공유 용도
  • 툴: 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

4. 스토리보드

  • Story Board
    - 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 흐름 등을 추가한 문서
    • 개발자/디자이너가 최종 참고하는 지침서
    • 서비스 구축 위한 모든 정보 들어감
      1. 상단/우측: 제목, 작성자 등
      2. 좌측: UI화면
      3. 우측: 디스크립션(Description)
  • 툴: 파워포인트, 키노트, 스케치, Axure 등

5. 프로토타입

  • Prototype
    - 와이어프레임이나 스토리보드 등에 인터랙션 적용해서 실행해볼 수 있는 임시 화면
    • 장점: 사용자 설득 쉽고, 사전에 오류 발견하여 개발 시간 줄일 수 있음
    • 단점: 사용자의 모든 요구사항을 반영하다보면 작업 시간 증가하고, 중요한 작업이 생략될 우려
  • 종류
    - 페이퍼 프로토타입(Paper Prototype)
    - 디지털 프로토타입(Digital Prototype)
  • 툴: HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

6. UI 요구사항

  1. 목표 정의: 사용자 리서치 시작 전 많은 사람을 개별적으로 한 시간 이내로 인터뷰
  2. 활동 사항 정의
    • 사용자의 요구사항과 회사 비전을 일치시킴
    • 예산/일정, 책임자, 우선순위, 단위 업무를 정함
    • 기술 발전 가능성 파악하고 디자인 방향 제시
  3. UI 요구사항 작성: 실 사용자 중심
    3.1. 요구사항 요소 확인: 데이터, 기능, 제품/서비스 품질, 제약 사항
    3.2. 정황 시나리오 작성: 목표 달성 위해 수행하는 과정을 순차적으로 표현
    3.3. 요구사항 작성: 정황 시나리오를 토대로 작성

7. 품질 요구사항

  • ISO/IEC 9126
  1. 기능성(Functionality)
    1.1. 적절성/정합성(Suitability)
    1.2. 정밀성/정확성(Accuracy)
    1.3. 상호 운용성(Interoperability)
    1.4. 보안성(Security)
    1.5. 호환성(Compliance)
  2. 신뢰성(Reliability)
    2.1. 성숙성(Maturity)
    2.2. 고장 허용성(Fault Tolerance)
    2.3. 회복성(Recoverability)
  3. 사용성(Usability)
    3.1. 이해성(Understandability)
    3.2. 학습성(Learnability)
    3.3. 운용성(Operability)
    3.4. 친밀성(Attractiveness)
  4. 효율성(Efficiency)
    4.1. 시간 효율성(Time Behaviour)
    4.2. 자원 효율성(Resource Behaviour)
  5. 유지 보수성(Maintainability)
    5.1. 분석성(Analyzability)
    5.2. 변경성(Changeability)
    5.3. 안정성(Stability)
    5.4. 시험성(Testability)
  6. 이식성(Portability)
    6.1. 적용성(Adaptability)
    6.2. 설치성(Installability)
    6.3. 대체성(Replaceability)
    6.4. 공존성(Co-existence)

8. UI 설계서

  • 실제 사용할 UI를 상세 설계하기 전에 사용자 요구사항을 가시화하여 작성
    - 기획자, 개발자, 디자이너 등의 의사소통 위함
  1. 표지: 프로젝트명 혹은 시스템명 포함
  2. 개정 이력
    • 수정될 때마다 내용 정리
    • 첫 번째 항목: 초안 작성 | Version 1.0(이후 0.1씩 높임)
  3. 요구사항 정의서: UI에 적용 여부 표시
  4. 시스템 구조: UI 요구사항과 프로토타입이 어떻게 시스템에 적용되는지 구조 설계
  5. 사이트 맵
    • 시스템 구조를 바탕으로 콘텐츠를 메뉴별로 한 눈에 볼 수 있게 표시
    • 사이트 맵 상세 내용(Site Map Detail)을 표로 작성
  6. 프로세스 정의서: 사용자 관점에서 UI 전체 흐름을 작업 진행 순서로 정리
  7. 화면 설계
    • 프로토타입과 프로세스(Process) 바탕으로 페이지별로 ID 부여하여 표지 작성
    • 와이어프레임으로 대표적 컨텐츠, 인터페이스 요소, 레이아웃 등을 개략적으로 표현
    • 주요 흐름을 스토리보드로 작성(디스트립션에 시스템 정보, 인터랙션, 로직, 정책 등 기록)

9. 유용성 평가

  • 사용자가 원하는 목표를 시스템으로 얼마나 편리하게 달성할 수 있는지
  • 실행 차를 줄이는 UI 설계 원리
    - 사용 의도 파악
    - 행위 순서 규정
    - 행위 순서대로 실행
  • 평가 차를 줄이는 UI 설계 원리
    - 수행한 키 조작 결과를 빠르게 피드백
    - 시스템 상태 정보를 단순하게 제시
    - 사용자의 의도와 시스템 결과 사이의 유사도에 대한 빠른 이해 유도

10. UI 시나리오

  • 사용자가 최종 목표에 달성하기 위한 화면 간 흐름, 다양한 상황의 예외 처리 등을 순차적으로 묘사
    - UI 상세 설계시 UI 설계자 또는 인터랙션 디저이너가 작성
  • 시나리오 문서 작성 원칙
    - 계층(Tree) 구조 혹은 플로차트(Flow Chart) 표기법 등으로 작성
    - 인터랙션 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등 명시
    - 기능별 상세 시나리오 정의
    - 규칙 지정
    • 주요 키의 위치와 기능
    • 공통 UI 요소
    • 기본 스크린 레이아웃(Basic Screen Layouts)
    • 기본 인터랙션 규칙(Basic Interaction Rules)
    • 공통 단위 태스크 흐름(Task Flows)
    • 케이스 문서
  • UI 시나리오 문서의 요건
    - 완전성(Complete)
    - 일관성(Consistent)
    - 이해성(Understandable)
    - 가독성(Readable)
    - 수정 용이성(Modifiable)
    - 추적 용이성(Traceable)
profile
박유현
이전 포스트

소프트웨어 설계 1. 요구사항 확인

다음 포스트

소프트웨어 설계 3. 애플리케이션 설계

0개의 댓글