[프론트엔드] 7. UI/UX의 대한 개념 및 종류, 화면 설계도

1. UI (User Interface; 사용자 인터페이스)

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

- UI 세가지 분야

  1) 정보 제공과 전달을 위한 물리적 제어에 관한 분야

  2) 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야

  3) 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

- 특징 : 사용성, 접근성, 편의성 중시

- 예: CLI, GUI

 

 

2. UX (User Experience; 사용자 경험)

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

- UI를 통해 사용자가 느끼는 만족이나 감정을 중시

 

 

3. UI  종류

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

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

- NUI(Natural User Interface) : 사용자의 말이나 행동 등 자연스러운 움직임을 통해 기기를 조작하는 인터페이스

 

 

4. UI 기본 원칙

- 직관성 : 누구나 쉽게 이해하고 사용 할 수 있어야 함

- 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함

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

- 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함

 

 

5. UI 설계 도구 종류

1) 와이어 프레임(WairFrame) 2) 목업(Mockup) 3) 스토리보드(Story Board) 

4) 프로토타입(Prototype) 5) 유스케이스(Use Case)

 

 

6. 와이어프레임(WairFrame) 

- 페이지에 대한 개략적인 레이아웃

- 뼈대를 설계하는 도구

- 기획 단계의 초기에 제작

- 기획자 입장에서는 개발자 or 디자이너 등 레이아웃 협의 및 현재 진행 상태 등 공유 하기 위해 사용

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

 

 

7. 목업(Mockup)

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

- 디자인, 사용 방법 설명, 평가 등을 위해 만듬

- 시각적으로만 구성 / 실제로 구현 하지 않음

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

 

 

8. 스토리보드(Story Board)

- 와이어프레임에 콘텐츠의 대한 설명, 페이지 간 이동 흐름 등 추가한 문서

- 디자이너 / 개발자가 최종적으로 참고하는 작업 지침서

- 서비스 구축을 위한 모든 정보가 들어 있음

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

 

 

9. 프로토타입(Prototype) 

- 와이어프레임 or 스토리보드 등에 인터랙션 적용

- 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

- 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것

- 페이퍼 프로토타입 : 스케치, 그림, 글 등을 이용하여 손으로 직접 작성

- 디지털 프로토타입 : 파워포인트, 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램 사용하여 작성

 

 

10. 유스케이스(Use case)

- 사용자의 요구사항을 기능 단위로 표현

- 일반적으로 다이어그램 형식으로 묘사

- 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술

 

 

11. HCI(Human Computer Interaction or Interface)

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

- 최적의 사용자 경험(UX) 만드는게 최종 목표 (시스템 사용에 있어서)

- 어떤 제품이 좋은 제품인지, 어떻게 하면 좋은 제품을 만들 수 있는지 연구

 

 

12. 감성 공학

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

- 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것

- 인간의 감성을 구체적으로 제품 설계에 적용하기 위한 공학적인 접근 방법 사용

- 인문사회과학/공학/의학 등 여러 분야의 학문에 공존하는 종합과학