UI 표준 및 지침

• 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용
• 지침 : UI 개발 과정에서 꼭 지켜야할 공통의 조건
• 스타일 가이드
  • 개발자 또는 디자이너가 UI를 작성할 때 기준이 되는 규칙
• 스타일 가이드 작성 순서
  • 구동 환경 정의
    • 사용환경에 적합하도록 규정
  • 레이아웃 정의
    • 화면 구조를 정의하고 각 영역의 메뉴 구성
  • 네비게이션 정의
    • 네비게이션의 메뉴 타입을 선택하여 적용
  • 기능 정의
    • 업무 과정에서 일어나는 모든 활동이나 필요한 데이터 간의 관계 등을 논리적인 모델로 상세화
  • 구성 요소 정의
    • 화면에 표시할 그리드 또는 버튼 등을 정의

  UI 설계 도구

• 와이어프레임(Wireframe)
  • 페이지에 대한 개략적인 레이아웃 등의 뼈대를 설계하는 도구
  • 기획 단계의 초기에 제작
  • 레이아웃 협의 또는 현재 진행 상태 등을 공유하기 위해 사용
  • 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계
• 목업(Mockup)
  • 실제 화면과 유사하게 만든 정적인 형태의 모형
  • 시각적으로만 구성 요소를 배치하여 실제로는 구현되지 않는 모형
  • 디자인, 사용 방법 설명, 평가 등을 위해 제작
• 스토리보드(Story Board)
  • 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
  • 최종적으로 참고하는 작업 지침서
  • 서비스 구축을 위한 모든 정보가 포함
• 프로토타입(Prototype)
  • 인터랙션을 적용하여 실제 구현된 것처럼 테스트 가능한 동적인 형태의 모형
  • 사용자의 요구사항을 검증하기 위한 모형
• 유스케이스(Use Case)
  • 사용자의 요구사항을 기능 단위로 표현하는 것
  • 원하는 목표를 달성하기 위해 수행 내용 기술
  • 프로젝트 초기에 기능적인 요구를 결정하고 결과를 문서화
  • 다이어그램 형식으로 묘사

UI 설계

• UI 설계서 작성 순서
  • UI 설계서 표지 작성
    • 프로젝트명 또는 시스템 명을 포함하여 작성
  • UI 설계서 개정 이력 작성
    • 설계서가 수정될 때마다 어떤 부분이 수정되었는지 정리
  • UI 요구사항 정의서 작성
    • 사용자의 요구사항을 확인하고 정리
  • 시스템 구조 작성
    • 요구사항과 프로토타입에 기초하여 전체 시스템 구조 설계
  • 사이트 맵 작성
    • 사이트에 표시할 콘텐츠를 메뉴별로 구분하여 설계
  • 프로세스 정의서 작성
    • 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리
  • 화면 설계
    • 페이지 별로 필요한 화면 설계
• UI 흐름 설계 순서
  • 기능 작성
    • 화면에 표현할 기능 작성
  • 입력 요소 확인
    • 화면에 표현할 기능 확인 후 화면에 입력할 요소 확인
  • 유스케이스 설계
    • UI 요구사항을 기반으로 유스케이스 설계
  • 기능 및 양식 확인
    • 텍스트, 콤보, 라디오, 체크 박스 등을 확인하고 규칙 정의
• UI 상세 설계 순서
  • 요구사항 확인
    • 요구사항 최종 확인
  • UI 설계서 표지 및 개정 이력 작성
    • 표지 : 프로젝트명 또는 시스템명을 포함
    • 개정 이력 : 수정사항 정리
  • UI 구조 설계
    • 요구사항과 프로토타입에 기초한 UI 구조 설계 단계
  • 메뉴 구조 설계
    • 사이트 맵 설계 후 사용자 기반 메뉴 구조 설계
  • 화면 설계
    • 프로토타입과 프로세스를 참고하여 필요한 화면을 페이지 별로 설계
• UI 시나리오 문서 요건
  • 완전성(Complete)
    • 누락되지 않도록 최대한 상세히 기술해야 함
  • 일관성(Consistent)
    • 서비스 목표, 시스템 및 사용자의 요구사항, UI 스탕닐 등이 모두 일관성을 유지해야 함
  • 이해성(Understandable)
    • 누구나 쉽게 이해할 수 있도록 설명함
  • 가독성(Readable)
    • 표준화된 템플릿 등을 활용해 문서를 쉽게 읽을 수 있어야 함
  • 수정 용이성(Modifiable)
    • 시나리오 수정 및 개선이 용이해야 함
  • 추적 용이성(Traceable)
    • 변경 사항은 쉽게 추적할 수 있어야 함

HCI/UX/감성공학

• HCI(Human Computer Interacion or Information)

  • 사람이 시스템을 편리하고 안전히 사용할 수 있도록 연구하고 개발하는 학문

• UX(User Experience, 사용자 경험)

  • 사용자가 시스템이나 서비스를 이용하며 느끼고 생각하게 되는 총체적 경험
  • 특징

  특징	설명
  주관성(Subjectivity)	사람들의 개인적, 신체적, 인지적 특성에 따라 다름
  정확성(Contextuality)	경험이 일어나는 상황 또는 주변 환경에 영향을 받음
  총체성(Holistic)	개인이 느끼는 총체적인 심리적, 감성적 결과

• 감성공학

  • 제품이나 작업환경을 사용자의 감성에 알맞도록 설꼐 및 제작하는 기술