[소프트웨어설계] 3. UI설계

UI 표준을 위한 환경 분석

• 사용자 경향 분석: 현재 UI단점을 작성
• 경향 분석 시 주의점:
  • 다양한 사용자 그룹 확인, 인터뷰 질문의 정확성, 사용자의 행동 고려, 시나리오 기반 테스트, 사용자 피드백 수집, 보안 문제 고려
• 기능 및 설계 분석
  • [기능 조작성 분석] 스크롤바 지원 가능 여부, 마우스 동선 확인
  • [오류방지 분석] 의도치 않은 페이지 이동, 버튼의 명확한 구분이 가능한지
  • [최소한의 조작으로 업무처리가 가능한 형태인지 분석]
  • [UI의 정보 전달력 확인] 오류 발생 시 해결 방법의 접근 용이성 확인
• UI 요구사항 요소
  • 데이터 요구, 기능 요구(동사형), 제품, 서비스 품질, 제약 사항

정황 시나리오

• 개발하는 서비스의 초기 모양을 상상하는 단계
• 사용자 관점에서 작성
• 요구사항 정의에서 가장 기초적인 시나리오를 의미
  *[시나리오에서 페르소나를 사용하는 목적 ] 사용자의 취향과 성향을 파악하여 제품을 디자인하기 위함
• 유의사항
  • 명확한 목적 설정, 사용자 중심, 상황 설명, 피드백 수집, 상세한 기술 설명, 예외상황 고려, 단계적인 설명

정황 시나리오	요구사항
사원은 출근해 로그인하고 오늘 업무 확인	로그인하면 맨 위 화면에 오늘 업무가 표시

---

UI 표준 및 지침

• UI의 개념:
  • 인간, 디지털 기기, 소프트웨어 사이에서 의사소통할 수 있도록 만들어진 매개체
• UI 분야: 표현에 관한 분야, 정보제공과 전달 분야, 기능 분야
• UI 활용 분야: 웹디자인, 모바일 앱 디자인, 게임 디자인, 산업 디자인, …
• UI 개발 시스템이 가져야 할 기능
  • 사용자 입력의 검증
  • 에러 처리와 에러메시지 처리
  • 도움과 프롬프트(Prompt)제공
    *프롬프트: 명령 표시

UI 설계

• UI 설계 원칙 ⭐
  • 직관성 Intuitiveness
  • 유효성 Efficiency : 정확하게 수행할 수 있는지
  • 학습성 Learnability : 사용자가 쉽게 배울 수 있도록
  • 유연성 Flexibility : 원하는 대로 동작하도록 함
• UI 설계 필요성:
  • 오류 최소화, 사용자 편의성을 높임, 기능에 대한 구체적 방법 제시, 필요한 노력을 줄일 수 있음
• UI 설계 지침 ⭐
  • 사용자 중심 (↔ 개발자 중심),
  • 일관성, 단순성, 가시성, 표준화, 접근성, 결과 예측 가능, 명확성,
  • 오류 발생 해결(사용자가 오류 상황을 정확히 인지할 수 있어야 함)

UI 구현

• 오류 메시지나 경고에 관한 지침
  • 명확하고 이해하기 쉬운 메시지
  • 문제 해결 방법 제공
  • 시각적인 강조
  • 사용자 경험 고려
• 한국형 웹 콘텐츠 접근성 지침 4가지 원칙 ⭐
  • 인식의 용이성
  • 운용의 용이성
  • 이해의 용이성
  • 견고성 : 문법 준수, 웹 애플리케이션 접근성

UI 표준 구성과 표준 수립

• UI 표준 구성
  • 전체적인 UX원칙
  • 정책 및 철학
  • UI 스타일 가이드
  • UI 패턴 모델 정의(CRUD기반으로 정의)
  • UI 표준 수립을 위한 조직 구성
• 표준 수립 시 고려사항
  • 사용자가 불편해하지 않아야 함
  • 많은 업무 케이스 포함
  • 다양한 상황에 대처
• UI 개발을 위한 주요 기법
•  

  주요 기법	설명
  3C 분석	Customer, Company, Competition 을 비교, 분석해 자사를 어떻게 차별화해서 이길 것인가를 분석
  SWOT 분석	기업의 내/외부 환경을 분석해 Strength, Weakness, Opportunity, Threat 요인을 규정하고 경영전략 수립
  시나리오 플래닝	다양한 시나리오를 설계해 불확실성 제거
  사용성 테스트 ⭐	사용자가 직접 제품을 사용해 과제 수행 후 질문에 응답하는 테스트 기법
  워크숍	새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 세미나

 

UX (User eXperience)

• UX 의 개념
  • 제품을 대상으로 직, 간접적으로 사용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등 모든 경험
• UX 에 영향을 주는 요소: 성능, 시간
• 모바일 사용자 UX 설계 시 고려 사항 (행정안전부 고시)
  • 입력의 최소화, 자동 완성 기능을 제공
  • 되돌림 기능 제공
  • 적합한 디자인 제공
  • 직관적으로 방법을 파악할 수 있도록 함

---

UI 설계 단계

문제 정의 → 사용자 모델 정의 → 작업 분석 → 컴퓨터 오브젝트 및 기능 정의 → 사용자 인터페이스 정의 → 디자인 평가(GOMS, Heuristics)

*GOMS: 인간이 어떤 행위를 할지 예측해 그 문제를 해결하는 데 필요한 소요시간, 학습 시간 등을 평가하기 위한 기법

*Heuristics: 논리적 근거가 아닌 어림짐작을 통하여 답을 도출해 내는 방법

• UI 상세 설계
  • UI메뉴 구조 설계
  • 내/외부 화면과 폼 설계
  • UI 검토 수행
• UI 상세 설계 - 시나리오 작성 원칙
  • 전체적 기능, 작동 방식을 구체적으로 작성
  • Tree 구조, Flowchart표기법 이용
  • 공통 적용이 가능한 UI요소와 상호작용을 일반적인 규칙으로 정의
  • UI 시나리오 규칙 지정
  • 시나리오 문서 작성 요건: 완전성, 일관성, 이해성, 가독성, 수정 용이성, 추적 용이성
• UI 흐름 설계서 구성: 표지, 개정이력
• UI 요구사항 정의
  • 시스템 구조
  • 사이트맵
  • 프로세스 정의
  • 화면 설계

UI 종류

CLI (Command Line Interface)

• 텍스트 기반 인터페이스
• MS-DOS

GUI (Graphical User Interface)

• 그래픽 기반 인터페이스

NUI (Natural User Interface) ⭐

• 사용자의 자연스러운 동작을 인식해 컴퓨터와 상호작용하는 방식
• 기계적 인터페이스나 명령어→ 움직임, 목소리, 손가락 등을 사용
• 터치 스크린, 음성 인식, 제스처 인식

OUI (Organic User Interface)

• 사용자가 느끼는 인터페이스의 물리적 형태를 고려하여 설계
• 인간의 느낌과 체험에 기반
• 스마트홈, 스마트카, 가상현실, 증강 현실

TUI (Text UI)

• 텍스트 단어를 입력해 상호작용을 수행하는 방식
• CLI가 등장하기 이전에 사용했던 UI

WUI (Webbase UI)

• 웹 브라우저를 통해 상호작용을 수행하는 방식

Touch UI

• 음성, 온도, 촉감을 통해 상호작용을 수행하는 방식
• 스마트 TV, 스마트 폰, 노트북 등에 응용하는 방식

UI 설계도구

UI설계에 도움을 주는 도구들

• 와이어 프레임
  • 선을 이용해 작성
  • 핸드라이팅, 파워포인트, Balsamiq
• 목업 Mockup
  • 실제 제품과 유사하게 만들어지는 실물 크기의 정적모형
  • 시각적으로만 구현
  • 카카오 오븐, Balsamiq Mackup, Power Mockup
• Storyboard
  • 사용자와 작업, 인터페이스 간 상호작용을 시각화한 것
  • 개발자-디자이너와의 의사소통을 돕는 도구
  • 작성목적: 조각을 배치, 조립하는 과정으로 설계 단계에서 발생할 수 있는 문제를 미리 발견하고 대처하기 위함

UI 요소들 종류 ⭐

• 라디오 버튼 : 하나를 선택
• 체크박스 : 여러 항목
• 토글 버튼 : 항목을 on/off 할때
• 드롭다운 리스트(목록 상자)

UI 프로토타입

• 시제품
• 동적인 형태로 구현된 모형
• 작성 방법에 따른 분류 : 디지털 프로토타입, 페이퍼 프로토타입
• 장점:
  • 사용자의 설득과 이해가 쉬움
  • 개발 시간 감소
  • 오류를 사전에 발견
• 단점
  • 수정이 많아지면 작업 시간 증가
  • 자원을 많이 소모
  • 정확한 문서 작업이 생략되는 문제
• 작성 도구
  • 아날로그 : 손, 펜
  • 디지털 : digital tool

감성 공학

• 개념: 인간과 컴퓨터 간의 상호작용 즉 HCI 설계에 인간의 특성, 감성 등의 정량적 측정과 평가를 통해 제품 환경 설계에 반영하는 기술
• 목표: 인간이 쉽고 편리하고 쾌적하게 시스템과 어우러 지는 것
• 접근 방법
  • 1류(의미 미분법)
    • 인간의 감각, 감성을 표현하는 어휘 이용
  • 2류
    • 1류와 기본 틀을 공유하고
    • 평가자들의 생활 양식 추가
  • 3류
    • 1류의 감성 어휘 대신 특정 시제품을 사용해 측정한 감각 척도를 사용
• 감성 공학 요소 기술: 기초 기술, 구현 기술, 응용 기술
• 관련 기술:
  • 생체 측정 기술, 인간 감성 특성 파악 기술, 감성 디자인 기술, 오감센서 및 감성 처리 기술, 마이크로 기구 설계, 사용성 평가 기술, 가상 현실 기술
• HCI (Human Computer Interaction or Interface)
  • 인간과 컴퓨터의 상호작용을 연구해 어떻게 하면 좋은 제품을 만들 수 있는지를 연구
  • 목적: 컴퓨터를 인간이 쉽게 사용할 수 있게 하여 상호작용(UX)을 개선