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

2. 화면설계

  1) 사용자 인터페이스 

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

     - 사용자 인터페이스의 특징

       - 만족도에 큰 영향을 끼치기 때문에, 가장 많이 변경됨

       - 편리성과 가독성, 이해도를 높임

       - 최소한의 노력으로 결과를 얻을 수 있도록 함

       - 소프트웨어 아키텍처를 숙지해야 함

     - 사용자 인터페이스의 구분 : CLI(텍스트, Command Line Interface), GUI(마우스, Graphical User Interface), NUI(말, 행동, Natural User Interface)

     - 사용자 인터페이스 기본 원칙 : 직관, 유효, 학습, 유연

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

       - 사용자 중심, 일관성, 단순성, 결과 예측 가능, 표준화, 접근성

       - 명확성, 가시성, 오류 발생 해결 

 

  2) UI 표준 및 지침

     - 웹 접근성 : 장애가 있는 사람들도 동등하게 이용가능 

     - 크로스 브라우징 : 어느 환경(브라우저, 플랫폼)에서도 이용가능 

     - 모든 콘텐츠는 시각적으로 구분될 수 있도록 설계해야 한다.(o)

     - 콘텐츠에 포함된 소리는 자동으로 재생되어야 한다.(x)

     - 전체 내용을 한꺼번에 볼 수 있도록 되도록 많은 메뉴를 만들어야 한다.(x)

     - 광과민성 발작(초당 3~50회 깜빡임으로 인한)은 고려하지 않아도 된다.(x)

     - 용도를 정확하게 이해할 수 있도록 텍스트를 제공해야 한다.(o)

     - 웹 서비스에서는 비표준 문법에 대한 확장성은 고려하지 않는다.(o)

     - 모든 웹 문서에 반드시 문서 타입을 명시할 필요는 없다.(x)

     - 주로 쓰이는 설치 환경을 중점적으로 고려해서 제작한다.(x)

 

  3) UI 설계 도구

     - 표준 및 지침에 따라 UI를 제작하기 위해선 설계도가 필요

     - 설계도는 결과물에 대해 미리보기 기능을 함

     - 와이어프레임 : 뼈대(레이아웃) 배치, 화면단위

     - 목업 : 실제 화면과 유사. 기능 구현 아님.

     - 스토리보드 : 와이어프레임 + 콘텐츠 설명(Description), 이동경로. 작업 지침서 활용(Description은 세부적 작성 필요)

     - 프로토타입 : 인터렉션 적용(동적인 형태)

     - 유스케이스 : 사용자 요구사항(기능적)을 다이어그램 형식으로 문서화 각각의 유스케이스에 대한 명세서 작성

 

  4) UI 요구사항 확인

     - UI 요구사항 요소 확인

        - 데이터 : 가장 먼저 확인, 특성 기반 정리

        - 기능 : 무엇을 실행하는지? 동사형으로 정리

        - 품질 : 품질, 서비스, 감성적인 부분

        - 제약 : 비용과 데드라인, 규제 등

     - 정황 시나리오 작성

        - 6하원칙, 이야기 형식, 완성된 서비스를 상상

     - 요구사항 작성

        - 정황 시나리오를 토대로 작성

     - 그룹별 인터뷰를 통해 가능한 많은 사람들과 인터뷰를 진행한다.(x) 

     - 인터뷰를 통해 사업적, 기술적인 요구사항을 명확히 한다.(o)

     - 가능한 리서치를 진행한 후 인터뷰를 해야 보다 효율적이다.(x)

     - 활동 사항을 정의할 때는 서로 협의를 통해 진행한다.(o)

     - 요구사항의 작성은 개발자 중신으로 하여 개발에 편리하도록 한다.(x)

     - UI 요구사항 중 가장 먼저 기능에 대한 정리를 진행한다. (x)

     - 정황 시나리오는 완성된 서비스를 상상하며 최대한 간단히 작성한다.(x)

     - 요구사항은 정황 시나리오를 토대로 작성한다.(o)

 

  5) 품질 요구사항

     - 기능 : 적절한 기능이 정확하게 + 호환, 보안(적절성, 정확, 상호운용, 보안, 호환)

     - 사용 : 얼마나 쉽고 편한지(이해, 학습, 운용, 친밀)

     - 신뢰 : 고장이 나도 문제없음(성숙성, 고장허용성, 회복성)

     - 유지보수 : 개선 및 확장(분석, 변경, 시험, 안정)

     - 이식 : 다른 환경에서 적응(적용, 설치, 대체, 공존)

     - 효율 : 한정된 시간, 자원으로 많은 일 처리(시간, 자원)

 

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

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

     - 장단점 : 이해와 오류발견이 쉬우며, 자원소모, 생략 가능성

     - 종류 : 페이퍼 (손으로) -> 저렴, 즉시, 간단

                 디지털 (SW로) -> 결과와 비슷, 테스트 및 수정, 어려움

     - 고려사항 : 계획 -> 목적-환경-핵심UI-인원-검증-해결-가이드

                        작성 -> 범위확인-목표확인-자원확인

     - 제작단계 : 요구사항 분석-요구사항 작성(프로토타입)

                        사용자 테스트 및 수정-사용자 피드백 및 승인(반복)

 

  7) UI 설계서 작성

     - 표지 : 프로젝트(시스템)명

     - 개정이력 : 초안작성 이후 변경할 때마다 버전 0.1씩 증가

     - 요구사항 정의서 : 요구사항 별 적용여부 기록

     - 시스템 구조 : 전체 시스템(사용자, 관리자 등)의 구조 설계

     - 사이트 맵 : 전체 콘텐츠 메뉴별 구성 + 표 형태로 작성

     - 프로세스 정의서 : 사용자 입장에서 작업이 진행되는 순서도

     - 화면 설계 : 각 화면별로 표지 + 스토리보드 

 

  8) UI 설계서 작성

     - 유용성 평가 

        - 뜻 : 사용자 입장에서 얼마나 유용한지

        - 실행(기능) : 불필요, 중복, 불편, 어려운

        - 결과(평가) : 즉각적이지 않은 피드백, 결과 이해, 파악이 어려움

     - 상세 설계

        - 시나리오 : 순서도나 계층구조로 작성

        - 일반규칙 : 기능, 구조, 인터렉션, 예외처리(이후 세부기능 정의)

        - 기대효과 : 긍정적인 문장과 단어(완전, 일관, 이해 등..)

     - 감성공학

        - HCI(Human Computer Interaction) : 편리하고 안전한 시스템개발(최적의 UX가 목표)

        - UX(User eXperience) : 시스템 이용 경험. 주관적임(객관적인 UI 편리성과 사용성과는 반대개념)

        - 감성공학 : 감성적, 인간친화적 개발