2장 - 화면 설계

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

• 사용자-시스템 간의 상호작용이 원할하게 이루어지도록 돕는 장치 또는 소프트웨어
• 분야
  • 정보 제공과 전달을 위한 물리적 제어
  • 콘텐츠의 상세적인 표현과 전체적인 구성
  • 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능
• 특징
  • 사용자의 만족도에 가장 큰 영향을 줌
  • 소프트웨어 영역 중 가장 많은 변경 발생
  • 최소한의 노력으로 원하는 결과를 얻게 해줌
  • 사용자 중심으로 설계
  • 수행 결과의 오류를 줄임
  • 막연한 작업 기능에 대한 구체적인 방법 제시
  • 정보 제공자-정보 공급자 간의 매개 역할
  • UI 설계를 위해서는 소프트웨어 아키텍처를 반드시 숙지
• 구분
  • CLI(Command Line Interface) - 명령과 출력이 텍스트 형태
  • GUI(Graphical User Interface) - 아이콘 또는 메뉴를 선택하여 작업을 수행하는 그래픽 환경
  • NUI(Natural User Interface) - 사용자의 말 또는 행동으로 조작
• 기본 원칙
  • 직관성 - 누구나 쉽게 이해하고 사용
  • 유효성 - 사용자의 목적을 정확하게 달성
  • 학습성 - 누구나 쉽게 배우고 익힘
  • 유연성 - 사용자의 요구사항을 최대한 수용 & 실수 최소화
• 설계 지침
  • 사용자 중심 - 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경 제공
  • 일관성 - 조작 방법을 일관성 있게 제공하여 사용자가 쉽게 사용할 수 있도록 설계
  • 단순성 - 조작 방법을 단순화시켜 인지적 부담 감소
  • 결과 예측 가능 - 기능만 보고 결과를 예측 가능하도록 설계
  • 가시성 - 메인 화면에 주요 기능을 노출시켜 조작이 쉽도록 설계
  • 표준화 - 기능 구조와 디자인을 표준화하여 한 번 학습 이후에는 쉽게 사용 가능하도록 설계
  • 접근성 - 사용자의 성별, 연령에 상관없이 다양한 계층이 사용할 수 있도록 설계
  • 명확성 - 사용자가 개념적으로 쉽게 인지할 수 있도록 설계
  • 오류 발생 해결 - 오류 발생 시 사용자가 쉽게 인지할 수 있도록 설계
• 인터페이스 개발 시스템의 기능
  • 사용자의 입력 검증
  • 에러 처리와 에러 메시지
  • 도움과 프롬프트(Prompt) 제공

 

UI 표준 및 지침

• UI 표준
  • 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용
  • 화면 구성, 화면 이동 등
• UI 지침
  • UI 개발 시 꼭 지켜야 할 공통의 조건
  • UI 요구사항, 구현 시 제약사항 등
• 웹의 3 요소
  1. 웹 표준 - 웹에서 사용되는 규칙 또는 기술 / 웹 페이지가 다른 기종이나 플랫폼에서 구현되도록 제작하는 기법 등
  2. 웹 접근성 - 누구나, 어떠한 환경에서도 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장
  3. 웹 호환성 - 다른 환경에서도 모든 이용자에게 동등한 서비스 제공
• 한국형 웹 콘텐츠 접근성 지침(KWCAG; Korean Web Content Accessibility Guidelines)
  • 사이트 저작자, 사이트 설계자 등이 접근성이 보장된 웹 콘텐츠를 쉽게 제작할 수 있도록 도움을 줌
  
• 네비게이션(Navigation)
  • 원하는 정보를 쉽게 찾을 수 있도록 다양한 경로나 방법 제공
  • 요소
    • 메뉴 - 계층 구조를 표현하는 기본 요소
    • 링크 - 하이퍼링크
    • 이미지 맵 - 그림에 하이퍼링크 연결
    • 사이트 맵 - 사이트의 전체 구조를 한 눈에 알아볼 수 있는 트리 구조
    • 사이트 메뉴바 - 사이트의 좌측이나 우측에 있는 메뉴, 링크 모음
    • 내비게이션 바 - 메뉴를 한 곳에 모아 놓은 그래픽 또는 문자열
    • 디렉터리 - 항목을 카테고리별로 표현
• 전자정부 웹 표준 준수 지침
  • 정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약
  

 

UI 설계 도구

• 사용자의 요구사항에 맞게 UI의 화면 구조 또는 화면 배치 등을 설계할 때 사용
• 작성된 결과물은 요구사항이 실제 구현되었을 때 어떻게 화면이 구성되는지, 어떤 방식으로 수행되는 지 등을 기획단계에서 미리 보여주기 위한 용도로 사용
• 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등
  1. 와이어프레임(Wireframe) - 손 그림, 파워포인트, 스케치, 포토샵 등
     • 기획 단계의 초기에 제작
     • 개략적인 레이아웃이나 UI 요소에 대한 뼈대 설계
     • 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 사용
  2. 목업(Mockup) - 파워 목업, 발사믹 목업 등
     • 와이어프레임보다 더 실제 화면과 유사하게 만든 정적인 형태의 모형
     • 시각적으로만 구성 요소 배치 → 실제로 구현되지는 않음
  3. 스토리보드(Story Board) - 파워포인트, 키노트, 스케치, Axure 등
     • 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름을 추가
     • 최종적으로 참고하는 작업 지침서
     • 좌측에는 UI 화면, 우측에는 디스크립션 기입
     • 디스크립션은 명확하고 세부적으로 작성
  4. 프로토타입(Prototype) - HTML/CSS, Axure, 프로토나우 등
     • 와이어프레임이나 스토리보드에 인터랙션(상호작용)을 적용한 동적인 형태의 모형
     • 사용성 테스트나 작업자 간 서비스 이해를 위해 작성
     • 페이퍼 프로토타입, 디지털 프로토타입으로 나눠짐
  5. 유스케이스(Use Case)
     • 사용자 측면에서의 요구사항
     • 사용자의 요구사항을 빠르게 파악하여 시스템의 기능적인 요구를 결정하고 결과를 문서화
     • 자연어로 작성된 사용자의 요구사항을 구조적으로 표현하여 다이어그램으로 묘사
     • 각각의 유스케이스에 대해 유스케이스 명세서 작성

 

UI 요구사항 확인

• 새로 개발할 시스템에 적용할 UI 관련 요구사항을 다양한 경로로 조사해서 작성하는 단계
• 목표 정의 → 활동 사항 정의 → UI 요구사항 작성 순으로 진행
  1. 목표 정의
     • 사용자들을 대상으로 인터뷰를 진행하여 의견이 수렴된 비즈니스 요구사항 정의
     • 인터뷰 진행 시 가능하면 개별적으로 1시간을 넘지 않도록 진행하고 다양한 사람의 의견을 수렴하되, 개인의 의견도 빠트리지 않도록 주의한다
     • 인터뷰 진행은 반드시 사용자 리서치를 시작하기 전에 해야 한다
  2. 활동 사항 정의
     • 조사한 요구사항을 토대로 앞으로의 활동 사항을 정의
     • 각각 필요한 예산과 일정을 결정
     • UI 디자인의 방향 제시
     • 우선순위 선정, 책임자 선정, 개별적인 단위 업무를 구분한다
  3. UI 요구사항 작성
     • 실사용자 중심으로 작성
     • UI 요구사항을 바탕으로 UI의 전체적인 구조를 파악 및 검토
     • 요구사항 요소 확인 → 정황 시나리오 작성 → 요구사항 작성 순으로 진행
       • 요구사항 요소 확인
         1. 데이터 요구
            • 사용자가 요구하는 모델과 객체의 주요 특성을 기반으로 데이터 객체 정리
            • 반드시 초기에 확인
         2. 기능 요구
            • 사용자의 목적 달성을 위해 무엇을 실행해야 하는 동사형으로 설명
            • 최대한 철저하게 정리
         3. 제품/서비스의 품질
         4. 제약 사항
            • 데드라인, 필요한 비용, 시스템 준수에 필요한 규제 등
            • 사전에 제약사항 변경 가능 여부 확인
       • 정황 시나리오 작성
         • 사용자의 요구사항을 도출하기 위해 작성
         • 목표 달성을 위해 수행하는 방법을 순차적으로 묘사
         • 사용자 관점에서 간결하고 명확하게 시나리오 작성
         • 주로 사용하는 기능 위주로 작성하되, 함께 발생되는 기능은 하나의 시나리오에 통합
       • 요구사항 작성
         • 정황 시나리오를 토대로 작성

 

품질 요구사항

• 소프트웨어의 품질은 기능, 성능, 만족도 등 요구사항을 충족시킴으로써 확립
• ISO/IEC 9126
  • 소프트웨어의 품질 특성과 평가를 위한 표준 지침
  • 요구사항을 기술하거나 소프트웨어의 품질 평가 등에 사용
  • ISO/IEC 9126의 호환성과 보안성을 강화하여 ISO/IEC 25010으로 개정
  • ISO/IEC 12119: ISO/IEC 9126을 준수한 품질 표준으로, 테스트 절차를 포함하여 규정
  • ISO/IEC 9126에서 제시한 품질 특성을 다음과 같다
    • 기능성(Functionality) - 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부

      품질 요구사항	설명
      적절성/적합성(Suitability)	지정된 작업과 사용자의 목적 달성을 위해 적절한 기능 제공
      정밀성/정확성(Accuracy)	사용자가 요구하는 결과를 정확하게 산출
      상호 운용성(Interoperability)	다른 시스템과 서로 어울려 작업하는 능력
      보안성(Security)	정보에 대한 접근을 권한에 따라 허용하거나 차단
      준수성(Compliance)	기능과 관련된 표준, 관례 및 규정을 준수

    • 신뢰성(Reliability) - 요구된 기능을 오류 없이 수행할 수 있는 정도

      품질 요구사항	설명
      성숙성(Maturity)	결함으로 인한 고장을 피해갈 수 있음
      고장 허용성(Fault Tolerance)	결함이 있을 때도 규정된 성능 수준 유지
      회복성(Recoverability)	고장 시 규정된 성능 수준까지 회복하고 영향 받은 데이터를 복구하는 능력

    • 사용성(Usability) - 사용자-컴퓨터 간의 행위에 대해 사용자가 쉽게 배울 수 있고 다시 사용하고 싶은 정도

      품질 요구사항	설명
      이해성(Understandability)	적합성, 사용 방법 등을 사용자가 이해할 수 있는 능력
      학습성(Learnability)	애플리케이션을 학습할 수 있도록 하는 능력
      운용성(Operability)	운용하고 제어할 수 있도록 하는 능력
      친밀성(Attractiveness)	재사용하고 싶어 하도록 하는 능력

    • 효율성(Efficiency) - 요구하는 기능을 할당된 시간 동안 한정된 자원으로 얼마나 처리할 수 있는가

      품질 요구사항	설명
      시간 효율성(Time Behaviour)	특정 기능을 수행할 때 적절한 반응 시간, 처리시간 등을 제공하는 능력
      자원 효율성(Resource Behaviour)	기능을 수행할 때 적절한 자원의 양과 종류를 제공하는 능력

    • 유지 보수성(Maintainability)

      품질 요구사항	설명
      분석성(Analyzability)	결함, 고장의 원인 등의 식별을 가능하게 하는 능력
      변경성(Changeability)	결함 제거 또는 수정 등을 쉽게 구현할 수 있는 능력
      안정성(Stability)	예상치 못한 결과를 최소화하는 능력
      시험성(Testability)	변경이 검증될 수 있는 능력

    • 이식성(Portability)

      품질 요구사항	설명
      적용성(Adaptability)	원래 목정 이외에 다른 환경으로 변경될 수 있음
      설치성(Installability)	임의의 환경에 설치
      대체성(Replaceability)	동일한 환경&동일한 목적을 위해 다른 소프트웨어를 대신하여 사용될 수 있음
      공존성(Co-existence)	자원을 공유하는 환경에서 다른 소프트웨어와 공존

 

UI 프로토타입

• 사용자의 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 모형
• 최대한 간단하게 개발
• 일부 핵심적인 기능 & 최종 제품의 작동 방식을 이해시키는 데 필요한 기능 반드시 포함
• 실제 사용자를 대상으로 테스트
• 장,단점
  • 장점
    • 사용자 설득이 쉬움
    • 개발 시간 단축 가능
    • 사전에 오류 발견 가능
  • 단점
    • 반복적인 작업으로 인한 작업 시간 증가
    • 필요이상의 자원 소모 가능성
    • 부분적인 작업으로 인해 중요한 작업이 생략될 가능성
• 종류
  • 페이퍼 프로토타입
    • 손으로 직접 작성
    • 제작 기간이 짧고 비용이 적을수록 사용
    • 즉시 변경이 가능하고 비용이 저렴하지만, 테스트하기에 적당하지 않고 공유가 어려움
  • 디지털 프로토타입
    • 아크로뱃 등 프로그램으로 작성
    • 재사용이 필요하고 전문가가 있을 경우 사용
    • 최종 제품과 비슷하게 테스트 할 수 있고 재사용이 가능하지만, 프로그램의 사용법을 알아야 함
• UI 프로토타입 제작 단계
  1. 사용자의 요구사항을 분석하는 단계
     • 기본적이 요구사항이 확정될 때까지 수행
  2. 프로토타입 작성
     • 핵심적인 기능을 중심으로 개발
  3. 작성된 프로토타입이 요구사항을 잘 수행하는지 사용자가 확인
     • 의견 추가 및 수정 가능
  4. 수정과 합의
     • 사용자가 요청한 제안 사항을 수용하여 보완 작업 수행
     • 작업 완료 후, 3단계로 돌아가 최종 승인이 완료될 때까지 반복
• 고려사항

  계획 시 고려사항	- 개발 목적 확인 - 필요한 환경 마련 - 프로토타이핑 일정은 아키텍처가 확정된 이후 실제 - 분석 작업이 완료되기 전에 진행 핵심이 되는 UI 요소를 범위로 설정 -개발 인원 확인 - 프로토타입 아키텍처를 검증 - 표준 가이드 확정 - 가장 많은 시간이 소요된 구간을 찾고 원인을 분석하여 해결 방법 제시
  작성 시 고려사항	- 작성 계획 수립 - 얻고자 하는 목표 확인 - 최소한의 기간과 비용 확인 - 완성된 프로토타입이 실제 개발에 참조될 수 있는지 확인

 

UI 설계서 작성

• 사용자 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서
• 개발자, 디자이너, 기획자의 원활한 의사소통을 위해 작성
• UI 설계서 표지 → UI 설계서 개정 이력 → UI 요구사항 정의서 → 시스템 구조 → 사이트 맵 → 프로세스 정의서 → 화면 설계 순으로 작성
  1. UI 설계서 표지
     
     • 프로젝트명 또는 시스템 명을 포함하여 작성
  2. 개정 이력
     • 처음 작성 시 첫 번째 항목은 '초안 작성', 버전은 1.0으로 설정
     • 이후 변경 사항이 있을 때마다 변경 내용을 작성하고 버전은 0.1씩 증가
  3. UI 요구사항 정의서
     • 요구사항의 UI 적용 여부를 요구사항별로 표시
  4. 시스템 구조
     • UI 요구사항과 UI 프로토타입에 기초하여 전체 구조를 설계
  5. 사이트 맵
     • 시스템 구조를 바탕으로 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분하여 설계
     • 사이트 맵 작성 후, 상세 내용을 표 형태로 작성
  6. 프로세스 정의서
     • 사용자 관점에서 사용자가 요구하는 프로세스를 진행 순서에 맞춰 정리
     • 전체적인 흐름 파악 가능
  7. 화면 설계
     • UI 프로토타입과 UI 프로세스를 참고하여 필요한 화면을 페이지별로 설계
     • 화면별 고유 ID를 부여하고 별도 표지 작성
     • 주요 흐름을 스토리보드 형태로 작성

 

UI 상세 설계

• UI 설계서를 바탕으로 실제 설계 및 구현을 위해 자세한 설계 진행
• UI 시나리오 작성 필수
  • 사용자 인터페이스의 기능 구조, 인터랙션 흐름, 예외 처리 등을 문서로 정리
  • 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 정리되어 있음
  • UI 설계자 또는 인터랙션 디자이너가 UI 시나리오 문서를 작성하면 그래픽 디자이너가 디자인 후, 개발자가 UI 구현
  • 작성 원칙
    • 계층 구조나 플로차트로 작성
    • 공통적으로 적용될 UI 요소와 인터랙션을 일반 규칙으로 정의
    • 인터랙션의 흐름을 정의하고 인터랙션의 순서, 분기, 조건, 루프 등을 명시
    • UI 시나리오 규칙을 지정
  • 일반 규칙

    주요 키의 위치와 기능	모든 화면에 공통적으로 배치되는 키의 위치와 기능 설명
    공통 UI 요소	UI 요소를 언제, 어떤 형태로 사용할 것인지, 조작 시 어떻게 반응하는지 설명
    기본 스크린 레이아웃	모든 화면에 공통적으로 나타나는 Title, Option 등의 위치와 속성 정의
    기본 인터랙션 규칙	제스처에 사용되는 조작 방법, 화면 전환 효과 등을 설명
    공통 단위 태스크 흐름	많은 기능에 공통적으로 사용되는 인터랙션 흐름 설명
    케이스 문서	공통적으로 사용되는 시스템의 동작 정의

  • 요건

    완전성(Complete)	최대한 상세하게 기술 사용자의 태스크에 중점을 둠
    일관성(Consistent)	스타일, 요구사항, 목표 등이 모두 일관성을 유지해야 함
    이해성(Understandable)	누구나 이해하기 쉽도록 추상적인 표현은 지양
    가독성(Readable)	템플릿 등을 사용하여 문서를 쉽게 읽을 수 있도록 작성 문서 인덱스에 대한 목차 제공
    수정 용이성(Modifiable)	시나리오 수정이나 개선이 용이
    추적 용이성(Traceable)	변경 사항 추적이 용이

HCI / UX / 감성공학

• HCI(Human Computer Interaction or Interface)
  • 인간이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문
  • 최적의 사용자 경험(UX) 제작을 목표로 함
• UX(User Experience)
  • 사용자가 시스템을 이용하면서 느낀 총체적인 경험
  • 사용자의 감정 중시
  • 특징
    • 주관성(Subjectivity)
    • 정황성(Contextuality)
    • 총체성(Holistic)
• 감성공학
  • 제품이나 작업 환경을 사용자의 감성에 맞게 설계 및 제작
  • 삶을 편리하고 쾌적하게 만드는 것을 목표로 함
  • HCI 설계에 인간의 감성 반영
  • 요소기술
    • 기반 기술
    • 구현 기술
    • 응용 기술