2. 화면설계

✅ UI 요구사항 확인

1. 사용자 인터페이스

(1) 사용자 인터페이스(UI : User Interface)의 개념

• 외부 설계의 한 종류이며, 소프트웨어와 조직 환경과의 인터페이스를 설계하는 과정
• 사용자와 시스템이 정보를 주고받는 상호작용이 잘 이루어지도록 하는 장치나 소트프웨어를 의미

💡 사용자 경험(UX : User eXperience)

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

📌 사용자 인터페이스 평가 기준

평가 기준	내용
배우기 쉬움	소프트웨어를 사용할 수 있게 되기까지 배우는데 걸리는 시간
속도	특정 기능을 수행시키는 데 걸리는 시간
사용 중 오류의 빈도	원하는 작업을 수행시킬 때 사용자가 범한 오류의 빈도
사용자의 만족	시스템에 대한 사용자의 반응
사용법의 유지	시스템 사용에 대한 지식이 얼마나 쉽게 기억될 수 있는지에 대한 정도

(2) 사용자 인터페이스의 종류🔥

구분	내용
CLI (Command Line Interface)	- 대표적으로 DOS 및 UNIX 등의 운영체제에서 조작을 위해 사용하던 것 - 문자 방식의 명령어 입력 사용자 인터페이스
GUI (Graphic User Interface)	그래픽 환경 기반의 마우스 입력 사용자 인터페이스
NUI (Natural User Interface)	- 사용자의 말과 행동 기반의 제스처 입력 인터페이스 - 멀티 터치(Multi-touch), 동작 인식(Gesture Recognition) 등 사용자의 자연스러운 움직임을 인식하여 서로 주고받는 정보를 제공
OUI (Organic User Interface)	- 모든 사물과 사용자 간에 사용호작용을 위한 인터페이스 - 실세계에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스라고 할 수 있다.
기타	웹 사용자 인터페이스(WUI) / 터치 사용자 인터페이스(Touch UI) / 텍스트 사용자 인터페이스(TUI) 등이 있다.

(3) 사용자 인터페이스 기본 원칙🔥

구분	내용
직관성(Intuitiveness)	누구나 쉽게 이해하고 사용할 수 있도록 제작한다.
유효성(Efficiency)	정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작한다.
학습성(Learnability)	초보와 숙련자 모두가 쉽게 배우고, 사용할 수 있게 제작한다.
유연성(Flexibility)	사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작한다.

💡 인터랙션(Interaction)
- 사용자가 목적을 달성하기 위해 제품의 UI를 사용하여 상호작용하는 과정

(4) 사용자 인터페이스 개발 시스템의 기능🔥

• 사용자 입력의 검증이 가능해야 한다.
• 에러 처리와 그에 맞는 에러 메시지 처리를 표시할 수 있어야 한다.
• 도움과 프롬프트(Prompt)를 적절하게 제공해야 한다.

(5) 사용자 인터페이스 4단계 모형(J. Foley)

구분 내용

구분	내용
개념 단계 (Conceptual Level)	대화형 시스템에 관한 심리적 모형
의미 단계 (Semantic Level)	입력 명령과 출력 결과가 사용자에게 주는 의미를 표현
문구(구문) 단계 (Syntactic Level)	명령문을 이루는 단어들의 정의
어휘 단계 (Lexical Level)	특정 명령 문구를 형성하는 절차 등을 의미

(6) HCI (Human Computer Interface) 모형

구분 내용

구분	내용
HCI 설계 모형	- 설계 모형 - 사용자 모형 → 사용자 프로필 파악이 중요 - 시스템 인식 - 시스템 이미지
태스크 분석과 모델링	사람이 현재 수행하는 태스크를 이해하는데 적용된 후에 이것들을 HCI의 내용을 구현한 유사한 태스크들의 집합에 사상한다.

💡 HCI는 시스템을 사용하는 데 있어 최적의 UX를 만드는 것이 목표이다.

2. UI 기본 원칙

(1) UI 표준

• 전체 시스템의 모든 UI에 공통으로 적용될 내용
• 화면 구성, 화면 간 이동 등에 관한 규약

(2) UI 지침

• UI 개발 과정에서 꼭 지켜야 할 공통의 조건

💡 브룩스(Brooks)의 법칙
- 지연된 소프트웨어 개발 프로젝트에 인력 추가는 오히려 일정을 더 지연시킬 수 있다.

✅ UI 설계

1. 사용자 인터페이스 설계 지침

설계 지침	내용
사용자 중심	기계 중심이 아닌 사용자 중심의 편의성을 제공하도록 설계
일관성	버튼 등 조작 방법을 모든 화면에서 동일하게 하여 습득을 용히하게 설계
단순성	조작 방법을 단순화하여 간단히 작동되도록 설계
가시성	주요 기능을 메인 화면에 노출시켜 화면 내용을 쉽게 파악하도록 설계
표준화	공통적 기능 구조와 디자인을 표준화하여 호환성 있게 설계
접근성	연령, 성별, 인증, 장애에 대한 차별없이 누구나 접근할 수 있도록 설계
명확성	막연한 작업 기능에 대해 구체적인 방법을 제시하도록 설계
오류의 최소화	구현하고자 하는 결과의 오류를 최소화 할 수 있도록 설계 → 오류를 없앨 수 있다 XXX
결과 예측 가능	작동시킬 기능만 보고도 결과를 미리 예측할 수 있게 설계

2. 사용자 인터페이스 설계 도구

(1) UI 설계 도구의 개념

• UI 설계 도구는 웹 사이트 또는 모바일 앱을 제작하기 위한 화면 설계 도구이다.
• 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구로 UI 미리보기 용도로 사용한다.

(2) UI 설계 도구의 종류

와이어 프레임(Wireframe)

• 화면 단위의 레이아웃을 설계하는 작업
• 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용하며, UI/UX 설계에 집중되어 있다.
• 와이어프레임 도구 : 손그림, 파워포인트, 스케치, 일러스트, 포토샵 등

목업(Mockup)🔥

• 와이어프레임 보다 더 실제 화면가 유사하게 만든 정적 형태의 모형
• 목업 도구 : 파워 목업, 발사믹 목업 등

스토리보드(StoryBoard)

• 디자이너, 개발자가 참고하는 최종적인 산출 문서
• 정책, 비즈니스, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨있는 문서
• 현업에서 해당 문서를 바탕으로 커뮤니테이션을 진행한다.
• 스토리보드 툴의 종류 : 파워포인트, 키노트, 스케치 등

프로토타입(Prototype)

• 실제 서비스와 흡사한 모형을 만드는 작업
  • 견본, 시제품
• 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 **인터랙션(동적 효과)**을 적용함으로써 실제 구현된 것처럼 시뮬레이션 할 수 있으며, 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행해 볼 수 있다.
• 이를 통해 설계 단계의 리스크를 사전에 예방할 수 있다.
• 프로토타입 도구 : HTML/CSS, 액슈어(Axure), 카카오 오븐, 네이버 프로토나우

일반 문서 툴(tool)

• 워드(Word), 엑셀(Excel), 파워포인트(Power Point) 등

화면 디자인 UI 컨트롤

텍스트 박스	메시지를 보여주거나 사용자가 데이터를 입력할 곳을 제공한다.
다이얼로그 박스	- 시스템이 수행할 작업에 대한 정보를 사용자에게 입력하게 한다. - 주로 임시 화면이나 선택을 위한 옵션을 제시할 때, 오류 메시지나 주의 메시지를 띄울 때 사용한다.
라디오 박스	여러 가지 제시된 것 중 하나만 선택할 때 사용 (=옵션버튼)
체크 박스	여러 그룹 중 하나 이상의 후보를 선택할 때 사용
명령 버튼	사용자의 명령을 지시받으려 할 때 사용하는 ‘확인’버튼
리스트 박스	사용자가 선택할 수 있는 후보 리스트를 디스플레이 한다.
토글 버튼	버튼을 클랙할 때마다 상태를 ‘on’, ‘off’로 변환시킨다.

CASE(Computer Aided Software Engineering)

• 소프트웨어 공학의 자동화를 의미하며, 소프트웨어 공학 작업 중 하나의 작업을 자동화한 소프트웨어 패키지를 CASE 도구라고 한다.

CASE의 원천 기술🔥

구조적 기법
프로토타이핑 기술
응용 프로그래밍 기술
정보 저장소 기술
분산 처리 기술

📌 CASE 도구의 구분

구분	내용	주요 기능
상위 CASE (Upper CASE)	- 요구 분석과 설계 단계를 지원하는 도구 - 요구 분석 후에 명세서를 작성하고 설계하는 과정을 지원하는 도구	- 여러 가지 방법론을 지원하는 다이어그램 작성 기능 - 모델의 정확성, 일관성을 확인하기 위한 오류 검증 기능 - 프로토타이핑 지원 기능 - 설계 자료 사전 기능
하위 CASE (Lower CASE)	코드를 작성하고 테스트하며 문서화하는 과정에 도움을 주는 도구	- 프로그래밍 지원 기능(코드 생성 및 편집, 컴파일러 등) - 코드 자동 생성 기능 - 테스트 도구(정적 및 동적 분석, 회귀 테스트 등)
통합 CASE (Integrated CASE)	소프트웨어 개발 주기 전체 과정을 지원하기 위하여 공통의 정보 저장소와 통일된 사용자 인터페이스로 도구들을 통합한 것	- 그래픽 기능 - 프로토타이핑과 명세화 기능 - 설계 기능 - 프로그래밍 및 테스트 기능 - 공동 정보 저장소 기능

구분 내용 주요 기능

상위 CASE
(Upper CASE)	- 요구 분석과 설계 단계를 지원하는 도구

• 자동화된 소프트웨어 공학은 개발과 유지보수를 표준화하는 데 기여한다.
• 소프트웨어 공학 자동화로 개발 비용 절감 및 생산성을 향상시킬 수 있다.
• CASE 도구들은 소프트웨어 관리자들과 실무자들이 소프트웨어 프로세스와 관련된 활동을 지원한다. 즉, 프로젝트 관리 활동을 자동화하고, 프로세스에서 생산된 결과물을 관리하며, 엔지니어들의 분석, 설계 및 코딩과 테스트 작업을 도와준다
• CASE의 주요 기능🔥
  • 다양한 소프트웨어 개발 모형 지원
  • 그래픽 지원
  • 소프트웨어 생명 주기 전 단계와 연결

💡 Gibson 교수

- 상위 : 분석 , 설계
- 중위 : 상세설계
- 하위 : 구현, 테스트

3. 감성 공학

(1) 감성공학(Sensibility Ergonomics)의 정의

• 인간의 감성을 과학적으로 측정하고 평가한 것에 공학적 기술력을 결합시켜 새로운 제품을 만들어 인간이 더욱 편리하고 안락할 수 있게 도모하려는 기술

(2) 감성공하 기술 활용 분야

• 인간 공학 / 인지 공학 등 인간 특성을 파악하려는 연구에 기본을 둔 생체 측정 기술
• 인간 특성에 적합하도록 사용자 인터페이스를 실현하기 위한 기술로서 센서 공학 / 퍼지 뉴럴 네트워크 기술 / 신경망 기술 등 인간의 오감 센서 및 감성 처리 기술이다.
• 사용성 평가 기술 / 가상현실 기술 등으로서 인간에 대한 적합성을 판단하고, 새로운 감성을 창출하기 위한 기술이다.