<소프트웨어 설계> - (2) 화면 설계

[1. 사용자 인터페이스]

1. 사용자 인터페이스(UI, User Interface)의 개요

: 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치, 소프트웨어

- 3가지 분야

(1) 물리적 제어 : 정보 제공과 전달

(2) 표현과 구성 : 콘텐츠의 상세적인 표현과 전체적인 구성

(3) 기능 : 사용자의 편리성과 간편함

 

2. 사용자 인터페이스(UI)의 특징

- 변경이 잦음 : 사용자 만족도 직결

- 편리성, 가독성, 시간 단축, 업무 이해도 향상

- 최소 노력으로 원하는 결과

- 수행 결과의 오류 줄임

- 구체적 방법 제시

- 정보 제공자와 공급자 간의 매개 역할

- 소프트웨어 아키텍처 숙지가 우선시 되어야 함

<소프트웨어 아키텍처>
개발할 SW의 기본 틀, SW 개발 과정을 체계적으로 접근하기 위한 밑그림
아래와 같은 효과를 가져온다.
- SW의 특성과 본질 파악
- 다양한 시각에서의 모형화
- 전체 시스템의 전반적 구조
- 시스템 구축 및 개선 용이
- 작업자들 간의 상호 이해(타협,의사소통)

 

3. UI의 구분 (상호작용의 수단 및 방식에 따라)

(1) CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스

(2) GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 수행하는 그래픽 환경의 인터페이스

(3) NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

++

(4) VUI(Voice User Interface) : 사람의 음성으로 기기를 조작하는 인터페이스

(5) OUI(Organic User Interface) : 모든 사물과 사용자 간의 상호작용을 위한 인터페이스

 

4. UI의 기본 원칙

(1) 직관성 : 누구나 쉽게 이해, 사용 가능

(2) 유효성 : 사용자의 목적을 정확하고 완벽하게 달성 가능

(3) 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함

(4) 유연성 : 사용자 요구사항을 최대한 수용, 실수의 최소화

 

5. UI 설계 지침 (설계 시 고려사항)

(1) 사용자 중심 : 실사용자에 대한 이해 → 사용자의 이해와 편리한 사용 (직관성을 위해)

(2) 일관성 : 버튼이나 조작 방법 등의 일관성 → 사용자가 쉽게 기억하고 습득할 수 있도록

(3) 단순성 : 조작 방법의 단순화 → 인지적 부담 감소

(4) 결과 예측 가능 : 작동시킬 기능만 보고도 결과 미리 예측 가능

(5) 가시성 : 메인 화면에 주요 기능 노출, 최대한 조작이 쉽도록 설계

(6) 표준화 : 기능 구조와 디자인의 표준화

(7) 접근성 : 다양한 계층(연령, 성별, 인종)이 사용할 수 있도록

(8) 명확성 : 사용자가 개념적으로 쉽게 인지 가능

(9) 오류 발생 해결 : 오류 발생 시 사용자가 쉽게 인지 가능

 

 

 

[2. UI 표준 및 지침]

1. UI 표준 및 지침

(1) UI 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용. 화면 구성, 화면 이동 등

(2) UI 지침 : UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야 할 공통의 조건

↓

웹의 3요소가 고려되었는가 CHECK

(1) 웹 표준(Web Standard) : 웹에서 사용되는 규칙 또는 기술 → 웹 페이지가 다른 기종, 플랫폼에서도 구현되도록 제작

(2) 웹 접근성(Web Accessibility) : 누구나, 어떤 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장

(3) 웹 호환성(Cross Browsing) : HW, SW 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공하는 것

 

2. 한국형 웹 콘텐츠 접근성 지침(KWCAG; Korean Web Content Accessibility Guidelines)

: 장애인이 비장애인과 동등하게 접근할 수 있는 웹 콘텐츠의 제작방법

- 웹 접근성이 보장된 웹 콘텐츠를 제작할 수 있도록 도와주는 가이드라인

- 요구조건 : 웹 접근성의 준수 여부 평가

- 기대효과 : 모두 준수할 경우 얻을 수 있는 효과

(1) 인식의 용이성 : 대체 텍스트, 멀티미디어 대체 수단, 명료성

(2) 운용의 용이성 : 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방(불규칙적인 깜빡임, 번쩍이는 빛의 자극으로 인한 발작), 쉬운 네비게이션(반복 skip, 링크 텍스트)

(3) 이해의 용이성 : 가독성, 예측 가능성, 콘텐츠의 논리성(선형구조, 논리적 순서), 입력 도움

(4) 견고성 : 문법 준수(마크업 언어의 문법), 접근성

cf> 마크업 언어(Markup Language) : 태그 등을 이용하여 문서의 포맷이나 구조 등을 지정하는 언어

(ex> HTML, SGML, XML)

 

3. 전자정보 웹 표준 준수 지침

: 정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약의 정의

- 웹 표준 : 모든 사람이 시스템 환경에 구애 받지 않고 정부기관의 홈페이지를 이용할 수 있도록

- 기대효과 : 이를 준수할 경우의 효과

(1) 내용의 문법 준수 : 적절한 문서타입, 문법, 인코딩 방식 표기

(2) 내용과 표현의 분리 : 논리적인 마크업 언어, 표준 문법의 스타일 언어

(3) 동작의 기술 중립성 보장 : 스크립트 비표준 문법 확장 배제, 스크립트 비사용자를 위한 대체 텍스트와 정보 제공

(4) 플러그인의 호환성 : 다양한 웹 브라우저에서 호환되는 플러그인

(5) 콘텐츠의 보편적 표현 : 다양한 웹 브라우저, 다양한 인터페이스

(6) 운영체제에 독립적인 콘텐츠 제공

(7) 부가 기능의 호환성 확보 : 실명인증, 전자인증 등의 부가 기능

(8) 다양한 프로그램 제공 : 정보 열람, 다운로드 등등

cf> 플러그인(Plug-In) : 응용 프로그램에 추가되어 특정한 기능을 수행하도록 구현된 프로그램 모듈

cf> 인코딩(Encoding) : 문자들의 집합을 컴퓨터의 저장, 통신 목적으로 부호화하는 방법

 

 

 

[3. UI 설계 도구]

1. UI 설계 도구

: 사용자의 요구사항에 맞게 UI의 화면구조나 화면배치 등을 설계할 때 사용하는 도구

→ 결과물 : 실제 구현 시 화면 구성, 수행 방식 등을 기획단계에서 미리 보여주는 용도

 

2. 와이어프레임(Wireframe)

: 기획단계 초기. 페이지에 대한 개략적인 레이아웃, UI 요소 등에 대한 뼈대 설계

- 화면 단위 설계 : 각 페이지 영역 구분, 콘텐츠, 텍스트 배치 등

- 역할 : 개발자나 디자이너 등의 레이아웃 협의 및 진행 상태 공유

- 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

3. 목업(Mockup)

: 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

- 역할 : 디자인과 사용방법 설명, 평가

- 툴 : 파워 목업, 발사믹 목업 등

 

4. 스토리보드(Story Board)

: 와이어프레임 + 콘텐츠 설명, 페이지 간 이동 흐름 등

- 역할 : 디자이너와 개발자의 최종 참고 작업 지침서 (서비스 구축을 위한 모든 정보 포함)

- 디스크립션(Description) : 화면 설명, 전반적인 로직, 분기처리, 예외 처리 등

- 툴 : 파워포인트, 키노트, 스케치, Axure 등

화면 레이아웃	제목, 작성자, 업데이트 날짜 등
	디스크립션

 

5. 프로토타입(Prototype)

: 와이어프레임, 스토리보드 + 인터랙션 = 실제 구현처럼 테스트가 가능한 동적인 형태의 모형

**인터랙션 : UI를 통해 시스템을 사용하는 일련의 상호작용

- 역할 : 사용성 테스트, 작업자 간 서비스 이해를 위한 샘플

- 분류 : 페이퍼 프로토 타입, 디지털 프로토 타입(작성 방법)

- 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐

 

6. 유스케이스(Use Case)

: 사용자 측면에서의 요구사항. 사용자가 원하는 목표 달성을 위해 수행할 내용.

- 역할 : 시스템의 기능적 요구 결정 & 문서화 (프로젝트 초기)

- 유스케이스 다이어그램 : 사용자 요구사항의 구조적 표현

- 유스케이스 명세서 : 각 유스케이스에 대한 명세서(개요, 액터, 이벤트흐름, 처리내용)

 

 

 

[4. UI 요구사항 확인]

: 새로 개발할 시스템에 적용할 UI 관련 요구사항 조사해서 작성하는 단계

 

1. (단계 1) 목표 정의

: 사용자들 대상 인터뷰 진행 → 비즈니스(사업적, 기술적) 요구사항 정의(사용자들의 의견 수렴)

<인터뷰 유의사항>

- 개별적 진행

- 다양한 의견 수렴 + 소수의 중요 의견도 놓치지X

- 한 시간 이내

- 사용자 리서치 시작 전 수행 : 설문조사, 개인 인터뷰 등

 

2. (단계 2) 활동 사항 정의

: 조사한 요구사항 → 앞으로 해야 할 활동 사항 정의

<조건>

- 사용자와 회사의 비전 일치

- 리서치 규모, 디자인 목표 등을 결정할 수 있도록 예산과 일정 결정

- 기술의 발전 가능성 → UI 디자인의 방향 제시

- 인터뷰 내용 → 경영진의 프로젝트 이해, 협의 도움

- 사업 전략 및 목표, 프로세스의 책임자 선정, 회의 일정 및 계획 작성, 우선순위 선정, 개별적인 단위 업무 구분 등

 

3. (단계 3) UI 요구사항 작성

: 여러 경로로 수집한 사용자들의 요구사항 검토, 분석 → UI 개발 목적에 맞게 작성, UI 전체 구조 파악 및 검토

 

(1) 요구사항 요소 확인

: 요구사항 요소의 종류, 각각의 표현 방식 등 검토

① 데이터 요구 : 사용자 요구 모델과 객체들의 주요 특성 기반으로 데이터 객체 정리 / 초기 확인 필요

ex> 이메일 메시지 : 제목, 발신일, 발신인, 참조인, 답변

② 기능 요구 : 사용자 목적 달성을 위해 무엇을 실행해야 하는지 동사형으로 설명 (기능 요구 리스트)

ex> 이메일 메시지 : 읽기, 삭제, 보관 등

③ 제품/서비스의 품질 : 데이터, 기능 요구 외의 제품의 품질, 서비스 + 감성적인 품질

ex> 파일 처리 속도 등(정량화 가능)

④ 제약 사항 : 제품 완료 데드라인, 전체 개발 및 제작 비용, 시스템 준수에 필요한 규제 / 사전에 제약 사항의 변경 가능 여부 확인 필요

 

(2) 정황 시나리오 작성

: 사용자가 목표 달성하기 위해 수행하는 방법을 순차적으로 묘사 → 사용자 요구사항 도출

- 사용자 관점의 초기 시나리오

- 주된 기능 위주로 작성됨

- 육하원칙, 간결, 명확

- 외부 전문가, 경험이 풍부한 사람의 검토 필요

 

(3) 요구사항 작성

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

 

 

 

[5. 품질 요구사항]

1. 품질 요구사항

(1) SW 품질 : 기능, 성능, 만족도 등 SW에 대한 요구사항의 충족 정도를 나타내는 SW 특성의 총체

- 사용자 요구사항 충족 → 품질 확립

(2) ISO/IEC 9126

: SW 품질 특성과 평가를 위한 표준 지침(국제 표준)

- 용도 : SW 품질 요구사항 기술, 품질 평가

- 기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성

(3) ISO/IEC 25010

: ISO/IEC 9126 + 호환성, 보안성

 

2. 기능성(Functionality)

: SW가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는가

- 적절성/정합성(Suitability) : 작업과 사용자의 목적 달성을 위한 적절한 기능?

- 정밀성/정확성(Accuracy) : 사용자 요구 결과의 정확한 산출 능력

- 상호 운용성(Interoperability) : 다른 시스템과 서로 어울려 작업할 수 있는 능력

- 보안성(Security) : 정보에 대한 접근을 권한에 따라 허용/차단할 수 있는 능력

- 준수성(Compliance) : 기능과 관려된 표준, 관례 및 규정 준수 능력

 

3. 신뢰성(Reliability)

: SW가 요구된 기능을 정확하고, 일관되게, 오류 없이 수행하는 정도

- 성숙성(Maturity) : 결함으로 인한 고장을 피해갈 수 있는 능력

- 고장 허용성(Fault Tolerance) : 결함, 인터페이스 결여 시에도 규정된 성능 수준을 유지할 수 있는 능력

- 회복성(Recoverability) : 고장 시 규정된 성능 수준까지 다시 회복하고, 직접 영향 받은 데이터를 복구할 수 있는 능력

 

4. 사용성(Usability)

: 사용자와 컴퓨터 사이에 발생하는 어떤 행위에 대하여 사용자가 정확하게 이해하고 사용하며, 다시 사용하고 싶은 정도

- 이해성(Understandability) : SW의 적합성, 사용 방법 등 (사용자가 이해할 수 있는) 능력

- 학습성(Learnability) : SW 애플리케이션을 학습할 수 있도록 하는 능력

- 운용성(Operability) : 사용자가 SW를 운용하고 제어할 수 있도록 하는 능력

- 친밀성(Attractiveness) : 사용자가 SW를 다시 사용하고 싶어하도록 하는 능력

 

5. 효율성(Efficiency)

: 사용자 요구 기능을 할당된 시간 동안, 한정된 자원으로, 얼마나 빨리 처리 가능?

- 시간 효율성(Time Behaviour) : 적절한 반응 시간 및 처리 시간, 처리율 제공 능력

- 자원 효율성(Resource Behaviour) : 적절한 자원의 양과 종류 제공 능력

 

6. 유지 보수성(Maintainability)

: 환경의 변화 또는 새로운 요구사항 발생 시 SW의 개선 및 확장 정도

- 분석성(Analyzability) : 결함, 고장의 원인, 수정될 부분들의 식별 가능?

- 변경성(Changeability) : 결함 제거 또는 환경 변화로 인한 수정 등을 쉽게 구현 가능?

- 안정성(Stability) : 변경으로 인한 예상치 못한 결과의 최소화 가능?

- 시험성(Testability) : SW의 변경 검증 가능?

 

7. 이식성(Portability)

: 다른 환경에서도 얼마나 쉽게 적용 가능?

- 적용성(Adaptability) : 원래 목적 외 다른 환경을 변경 가능?

- 설치성(Installability) : 임의의 환경에 SW 설치할 수 있는가?

- 대체성(Replaceability) : 동일 환경, 동일 목적을 위해 다른 SW를 대신 가능?

- 공존성(Co-existence) : 자원 공유 환경에서 다른 SW와 공존 가능?

 

 

 

[6. UI 프로토타입 제작 및 검토]

1. 프로토타입

: 사용자 요구사항 기반으로 실제 동작하는 것처럼 만든 동적인 모형

- 목적 : 사용자 요구사항 반영 및 검증을 위한 테스트

- 대상 : 실제 사용자

- 정도 : 제품 작동 방식 이해를 위한 핵심 기능 모두 포함 → 사용자 요구사항의 완벽한 충족까지 개선, 보완

cf> 프로토타이핑 : 프로토타입을 만드는 과정

 

2. UI 프로토타입의 장단점

(1) 장점

- 사용자 : 설득과 이해의 용이성

- 시간 : 요구사항, 기능 불일치로 인한 혼선 줄여줌

- 예방 : 사전 오류 발견

 

(2) 단점

- 시간, 자원 : 반복적 개선 및 보완 작업

- 허점 : 부분적인 프로토타이핑 → 중요 작업 생략

 

3. 프로토타이핑의 종류

(1) 페이퍼 프로토타입(Paper Prototype)

: 손으로 직접 작성(아날로그적 / 스케치, 그림, 글 등)

- 언제 활용 ? : 짧은 제작 기간, 적은 제작 비용, 빠른 업무 협의

- 장점 : 저렴한 비용, 즉시 생성 및 변경, 고객의 낮은 기대

- 단점 : 테스트 부적당, 많은 상호 관계에 부적절, 공유 어렵

 

(2) 디지털 프로토타입(Digital Prototype)

: 프로그램을 활용한 작성(파워포인트, 아크로뱃, 비지오, 옴니그래플 등)

- 언제 활용 ? : 재사용 필요, 산출물과 비슷한 효과, 숙련된 전문가 있음

- 장점 : 최종 제품과 비슷한 테스트, 수정 용이, 재사용

- 단점 : 프로그램 사용법 숙지 필요

 

4. UI 프로토타입 계획 시 고려사항

- 프로토타입의 개발 목적 확인 : 아키텍처 검증? 분석 설계 가이드의 검증?

- 환경 : SW, HW 등 프로토타입 개발에 필요한 환경 마련

- 프로토타이핑 일정 : 아키텍처 확정 후, 실제 분석 작업 완료 전

     - 아키텍처 검증 목적 : 프로젝트 개발 이전 OR 대략 1개월

     - 분석 설계 가이드 검증 목적 : 2개월 추가 가능

- 범위 : 아키텍처의 핵심이 되는 UI 요소들

- 개발 인원 : 리더, 솔루션 담당자, 인프라 담당자, 개발 환경 리더, 공통 모듈 개발자, 프로토타입 개발자 등

- 프로토타입 이슈 : 주로 SW 아키텍처 검증 과정에서 발견 → 취합, 해결 방법 제시

- 표준 가이드 : 분석, 설계, 개발, 테스트 등

- 시간 단축 : 시간 소요가 큰 구간 발견, 원인 분석, 해결 방법 제시

- 시연 : 고객, 프로젝트 매니저, 프로젝트 리더 등에게

 

5. UI 프로토타입 작성 시 고려사항

- 계획 : 프로토타입 작성 계획

- 범위 : 프로젝트 범위, 리스크 상황 등 주변 여건 감안

- 목표 : 프로토타입을 통해 얻고자하는 목표

- 기간, 비용 확인

- 실제 개발 참조 가능성 확인

 

6. UI 프로토타입 제작 단계

(1단계) 사용자 요구사항 분석 : 사용자 관점에서 기본 요구사항 확정 시까지

(2단계) 프로토타입 작성 : 핵심 기능 위주

(3단계) 사용자가 프로토타입 검증, 추가 및 수정 의견 제안

(4단계) 개발자가 프로토타입 보완(수정 및 합의 과정)

--- 사용자 최종 승인 전까지 3,4단계 반복---

 

 

 

[7. UI 설계서 작성]

**UI 설계서

: 사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 대표적인 화면을 설계한 문서

- 시점 : 상세 설계 이전

- 목적 : 기획자, 개발자, 디자이너 등과의 원활한 의사소통

 

<순서>

1. UI 설계서 표지 작성

: 프로젝트명 또는 시스템명 포함

 

2. UI 설계서 개정 이력 작성

: UI 설계서 수정될 때마다 어떤 부분이 어떻게 수정되었는지 정리

- 버전(Version) : 1.0부터 시작해 0.1씩 높임

 

3. UI 요구사항 정의서 작성

: 사용자 요구사항, 확정 여부, 비고 작성

 

4. 시스템 구조 작성

: UI 요구사항, UI 프로토타입을 기초로 전체 시스템의 구조 설계

 

5. 사이트 맵(Site Map) 작성

: 시스템 구조 바탕으로 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있게 메뉴별로 구분하여 설계

- 사이트 맵 상세내용(Site Map Detail) : 표 형태로 작성

 

6. 프로세스(Process) 정의서 작성

: 사용자 관점에서 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리

→ UI 전체적인 흐름 파악

 

7. 화면 설계

: UI 프로토타입, UI 프로세스 참고하여 필요한 화면을 페이지별로 설계

- 고유 ID, 별도 표지

- 와이어프레임 : 인터페이스 요소, 레이아웃, 화면 포함 정보

- 스토리보드 : 주요 흐름

- 기본 구성 요소

① 윈도우(Window) : 데이터 입력 및 결과를 보여주는 화면상의 표시 영역

② 메뉴(Menu) : 화면에서 수행할 기능들을 일정 형태로 모아놓은 인터페이스

③ 아이콘(Icon) : 동작, 동작 대상을 조그만 그림 형태로 표현한 인터페이스. 동일 사용 환경에서 동일하고 규칙적인 크기를 가짐

④ 포인터(Pointer) : 입력이 이뤄지는 지점. 시스템의 상태

 

[8. 유용성 평가]

1. UI의 유용성 평가

(1) 유용성(Usability) : 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도

(2) 유용성 평가

- 사용자 측면에서 시스템을 얼마나 편리하게 사용할 수 있는지 평가

- 시스템의 문제점 찾아내고 개선 방향 제시하기 위한 조사 과정

(3) 사용자 모형과 개발자 모형 간 차이(실행 차, 평가 차)

- 실행 차 : 사용자가 원하는 목적 vs 실행 기능

- 평가 차 : 사용자가 원하는 목적 vs 실행 결과

 

2. 실행 차를 줄이기 위한 UI 설계 원리 검토

(1) 사용 의도 파악 : 사용자 목적 → 불필요, 중복 기능 확인

(2) 행위 순서 규정

- 행위 순서의 세분화, 순서대로(BUT 사용자가 변경 가능)

- 작업 수행 단계 최소화, 다양한 방법

- 사용자 친숙성

(3) 행위의 순서대로 실행

- 프로세스 흐름 직접 파악할 수 있도록 제공

- 과도한 상호작용 피하기

- 피드백, 취소 기능, 디폴트 값 등 → 의도한 행위 실행

 

3. 평가 차를 줄이기 위한 UI 설계 원리 검토

(1) '수행한 키 조작의 결과'를 사용자가 빠르게 지각하도록 유도

- 수행 행위에 대한 최대한 빠른 반응

- 피드백 : 수행 행위로 인한 현재 시스템의 변화를 직접적으로 파악 가능

(2) 키 조작 → '변화된 시스템의 상태' 쉽게 인지

- 단순, 이해하기 쉬운 시스템의 상태 정보

(3) '사용자 원래 의도와 시스템 결과 간의 유사 정도' 의 쉬운 파악 유도

- 사용자의 의도가 시스템을 통해 충족되었는지, 충족될 수 있는지를 쉽게 파악

 

 

 

[9. UI 상세 설계]

1. UI 시나리오 문서 개요

(1) UI 상세 설계 : UI 설계서 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계 진행. 시나리오 필수 작성!!

(2) UI 시나리오 문서

: UI 기능 구조, 대표 화면, 화면 간 인터랙션 흐름, 다양한 상황에서의 예외 처리 등을 문서화

- 내용 : 사용자의 최종 목표 달성까지의 방법

- 작성자 : UI 설계자 OR 인터랙션 디자이너 → 그래픽 디자이너, 개발자에게 전달

 

2. UI 시나리오 문서 작성 원칙

(1) 표기 : 계층(Tree) 구조, 플로차트(Flow Chart)

(2) 구성 요소

- 일반 규칙 : 모든 기능에 공통 적용될 UI 요소, 인터랙션

- 대표 화면의 레이아웃 + 기능

- 인터랙션의 흐름 : 화면 간 인터랙션의 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop)

- 예외 상황 대비한 다양한 케이스

- 기능별 상세 기능 시나리오

- UI 시나리오 규칙

 

3. UI 시나리오 문서 작성을 위한 일반 규칙

- 주요 키의 위치와 기능 : 모든 화면에 공통적으로 배치 → 여러 화면 간 일관성

- 공통 UI 요소 : 언제, 어떤 형태로 사용할 지 + 사용자 조작 시 어떻게 반응하는지

ex> 체크 박스, 라디오 버튼, 텍스트 박스 등

- 기본 스크린 레이아웃(Basic Screen Layout) : 모든 화면에 공통적으로 나타나는 Titles, Ok/Back, Soft Key, Option, Functional Buttons 등의 위치, 속성

- 기본 인터랙션 규칙(Basic Interaction Rules) : 터치 제스처 등에 공통 사용되는 조작 방법 + 화면 전환 효과(실행, 이전, 다음, 삭제, 이동 등)

- 공통 단위 태스크 흐름(Task Flows) : 많은 기능들에 공통 사용되는 인터랙션 흐름

ex> 삭제, 검색, 매너 모드 상태 등

- 케이스 문서 : 다양한 상황에 공통 적용되는 시스템의 동작

ex> 사운드, 조명, 이벤트 케이스 등

<UI 요소>
1. 체크 박스(Check Box) : 여러 선택 상황에서 1개 이상의 값 선택할 수 있는 버튼
2. 라디오 버튼(Radio Button) : 여러 항목 중 하나만 선택할 수 있는 버튼
3. 텍스트 박스(Text Box) : 사용자가 데이터 입력, 수정할 수 있는 상자
4. 콤보 상자(Combo Box) : 이미 지정된 목록 상자에 내용 표시, 선택과 입력 모두 가능
5. 목록 상자(List Box): 목록 표시, 선택만 가능

4. UI 시나리오 문서의 요건

(1) 완전성(Compelte)

- 누락X, 상세하게

- 사용자의 태스크 중심(기능보다는)

(2) 일관성(Consistent)

- 서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등의 일관성

(3) 이해성(Understandable)

- 누구나 쉽게 이해

- 불분명, 추상적 표현X

(4) 가독성(Readable)

- 표준화된 템플릿 활용

- 문서 인덱스에 대한 규칙, 목차

- 줄 간격, 단락, 들여쓰기 등의 기준 마련

- 시각적 효과 : 여백, 빈 페이지, 하이라이팅의 일관성

(5) 수정 용이성(Modifiable)

- 시나리오의 수정이나 개선 용이

(6) 추적 용이성(Traceable)

- 변경 사항은 언제, 어떤 부분이, 왜 발생했는지 쉽게 추적할 수 있어야

 

5. UI 시나리오 문서로 인한 기대 효과

- 오류 감소 : 요구사항, 의사소통 관련

- 혼선 최소화 : 개발 중 재작업 감소

- 불필요한 기능의 최소화

- SW 개발 비용 절감

- 개발 속도 향상

 

 

 

[10. HCI/UX/감성공학]

1. HCI(Human Computer Interaction or Interface)

: 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구, 개발하는 학문

- 최종 목표 : 시스템 사용 시 최적의 사용자 경험(UX) 만들기

- 대상 : 개인, 사회, 집단 + 컴퓨터, 서비스, 디지털 콘텐츠 등 (이들의 상호작용)

 

2. UX(User Experience)

: 사용자가 시스템, 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험

(기능, 절차상 만족 + 참여, 사용, 관찰, 상호 교감을 통한 가치 있는 경험)

- 기술 = 사용자의 '삶의 질'을 향상시키는 하나의 방향

- 중요한 것 : 사용자의 만족, 감정

- 특징

① 주관성(Subjectivity) : 사람들의 개인적, 신체적, 인지적 특성에 따라 주관적

② 정황성(Contextuality) : 경험이 일어나는 상황, 주변 환경의 영향

③ 총체성(Holistic) : 개인이 느끼는 총체적인 심리적, 감성적인 결과

 

3. 감성 공학

: 제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술. 여러 분야의 학문이 공존하는 종합과학.

- 목적 : 인간의 삶의 편리, 안전, 쾌적

- 감성의 측정 : 생체계측 기술, 감각계측 기술, 센서, 인공지능, 생체제어 기술

- HCI 설계(상호작용) + 인간의 특성, 감성

- 요소 기술

① 기반 기술 : 제품 설계에 적용할 인간의 특성

② 구현 기술 : 인간의 특성에 맞는 인터페이스 구현

③ 응용 기술 : 인간에 맞는지 파악하여 새로운 감성 만듦