[SW 설계] UI 종류, 설계원칙, 스토리보드, 흐름, 감성공학

📍 UI 개념

사람과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다.

 

컴퓨터 사용자 인터페이스는 프로그램이 사용자에게 보여주는 화상, 문자, 소리, 정보와 프로그램을 조작하기 위한 수단을 의미한다.

 

📍 UI 종류

그래픽 사용자 인터페이스 (GUI)

그래픽과 텍스트로 이루어져 있으며, 객체지향 인터페이스와 응용 프로그램지향 인터페이스가 공존한다.

 

웹 기반 인터페이스 (WUI)

인터넷과 웹 브라우저를 통해 웹 페이지를 열람하고 조작하는 인터페이스이다.

 

명령 줄 인터페이스 (CLI)

사용자가 컴퓨터 자판 등을 이용해 명령 문자열을 입력하여 체계를 조작하는 인터페이스이다.

텍스트 사용자 인터페이스 (TUI)

문자열 기반 사용자 인터페이스와 구분하기 위해 그래픽 사용자 인터페이스가 발명된 뒤에 만들어진 용어이다. 

사실 CLI의 장점 대부분을 가져오면서 GUI의 꼭 필요한 장점들만 골라다 만든 인터페이스라고 한다.

 

터치 사용자 인터페이스

 

Natural User Interface (NUI)

사용자가 최대한 자연스럽게 사용할 수 있는 인터페이스를 의미한다. 마치 UI가 존재하지 않는 것처럼 느껴지기도 함. 센서 기술과 인공지능 기술이 발전함에 따라 사용자의 행동을 직접 입력받을 수 있게 되며 주목받고 있는 개념.

 

📍 UI 설계 원칙

 

1️⃣ 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 한다.

2️⃣ 유효성 : 사용자의 목적을 정확하게 달성해야 한다.

3️⃣ 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 한다.

4️⃣ 유연성 : 사용자의 요구사항을 최대한 수용하며, 오류를 최소화해야 한다.

 

 

📍 UI 지침

웹/모바일 서비스 구축 시, 효율적인 정보 전달이 가능하게 하기 위하여 사용자 인터페이스 설계에서 지켜야 할 세부 사항을 규정하는 것을 의미한다.

 

1) 사용자 경험(UX) 고려사항

1. 사용 대상, 사용 환경, 사용 목적, 사용 빈도
2. 직관저긍로 서비스 이용 방법을 파악할 수 있는 쉬운 사용 방법
3. 모바일 서비스 특성에 적합한 디자인
4. 사용자 입력을 최소화하고, 자동 완성 기능 제공
5. 사용자의 입력 실수를 되돌릴 수 있는 기능 등

2) 핵심기능의 고려사항

1. 모바일 기기의 화면 크기를 고려하여 메뉴 구조를 단순화하고 간결한 정보 제공
2. 모바일 환경에서 활용성 높은 기능 중심으로 서비스 제공
3. 서비스 목적에 부합하는 기능 중심의 서비스를 제공

3) 호환성과 확정성의 고려사항

1. 모바일 웹의 경우 기술적 제약이 없는 한 3개 이상의 브라우저에서 동등한 서비스를 제공하도록 설계.
2. 모바일 기기의 화면 해상도에 따라 호환성을 고려하여 사용자 인터페이스 설계
3. 특정 모바일 운영체계에서만 동작하는 기능 지양

4)정보소외계층의 접근성

1. 모바일 서비스 구축 시 장애인, 고령자 등이 모바일 서비스에 쉽게 접근하고 이용할 수 있도록 <장애인, 고령자 등의 정보 접근 및 이용 편의 증진을 위한 지침>을 준수해야 한다.

5) 일관성

1. 모바일 서비스 구축 시 색상, 글자체, 용어 사용 등에 있어서 일관성을 유지해야 한다.

6) 이미지

1. 모바일 서비스 구축 시 전송 속도, 전송량 등을 고려하여 경량화된 이미지를 제공하여야 한다.
2. 사회적 갈등을 유발할 수 있는 이미지를 사용해서는 안된다.
3. 단순히 색상과 그래픽에 의존한 서비스 제공을 지양해야 한다.
4. 모바일 서비스 구축 시 사용되는 모든 이미지의 저작권을 확보해야 한다

 

📍 스토리보드

💡 스토리보드 개념

스토리보드는 디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서로 정책, 프로세스 및 콘텐츠의 구성, 와이어프레임(UI, UX) 기능 정의, 데이터베이스의 연동 등 서비스 구축을 위한 대부분의 정보가 수록되어 있다.

구분	스토리보드	와이어프레임	프로토타입
개념	정책, 프로세스 및 콘텐츠의 구성,와이어프레임(UI, UX) 기능 정의, 데이터베이스의 연동 등이 수록된 설계 산출물	이해관계자들과의 의사소통 또는 서비스의 간략한 흐름을 위해 화면 단위의 레이아웃을 설계하는 작업	와이어프레임 또는 스토리보드의 정적화면에 동적효과를 적용하여 실제 구현된 것처럼 테스트해 볼 수 있다
도구	파워포인트, 키노트, 스케치	손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵	HTML/CSS, 네이버, 프로토나우, 카카오오븐

 

💡 스토리보드 설계 절차

1️⃣ 메뉴 구성도 만들기 : 전체적인 메뉴 구성도이며, 메뉴의 순서와 구성 단계, 용어 정의

2️⃣ 스타일 확정 : 레이아웃이나 글자 모양, 크기, 색상, 그래픽에서의 일관성을 유지해야 함.

3️⃣ 설계하기 : 화면에 보여지는 시각적인 디자인 콘셉트를 잡음.

 

 

📍 UI 흐름 및 상세설계

1) UI 설계 단계

① 문제 정의 : 시스템의 목적을 기술하고 해결할 문제를 정의.

② 사용자 모델 정의 : 사용자 특성을 결정하는 것.

③ 작업 분석 : 해결할 문제를 정의하고, 사용자 특징을 세분화하고, 시스템으로 수행되어야 할 작업들을 정의하며 분석.

④ 컴퓨터 오브젝트 및 기능 정의 : 어떤 인터페이스를 통해 표현할 지 정의.

⑤ 사용자 인터페이스 정의 : 상호작용하는 오브젝트 선택. - 마우스, 키보드, 스크린 등 물리적 입력이나 출력 디바이스

⑥ 디자인 평가

 

2) 흐름설계

① 화면에 구현될 기능 정의 : 기능적 / 비기능적 요구사항 정리

② 화면의 입력 요소 파악 : 화면에서 수행될 기능, 입력 항목, 이동과 흐름

③ UI요구사항에 대한 유스케이스 설꼐 : 액터별 시나리오 구상, 액터의 상호작용에 따른 세분화

④ 기능 및 양식의 규칙을 정의 : Input, Control, Radio, Check Box 적용 규칙 정의

 

3) 상세설계

① 메뉴 구조 설계 : 사이트 맵 구조, 화면, 폼 설계

② UI 검토 및 보완 : 사용성의 반복 검토

 

 

 

📍 감성공학 (Human Sensibility Ergonomics)

1) 감성공학 개념

인체의 특징과 감성을 제품설계에 최대한 반영시키는 기술로, 인간이 가지고 있는 소망으로서의 이미지나 감성을 구체적인 제품설꼐로 실현해내는 공학적인 접근방법이다.

 

2) 감성공학 관련 기술

 

3) 감성공학 접근 방법

1️⃣ 감성공학 1류 : 인간의 감성을 형용사로 표현할 수 있다고 보고, 인간의 감성 이미지를 측정하는 방법. 이를 통해 제품에 대한 이미지를 조사, 분석하여 제품의 디자인 요소와 연계.

2️⃣ 감성공학 2류 : 개인 연령, 성별 등의 개별적 특성과 생활 방식으로부터 개인이 갖고 있는 이미지를 구체화하는 방법. 감성의 심리적 특성을 강조한 접근 방법

3️⃣ 감성공학 3류 : 기존 감성적 어휘 대신 공학적인 방법으로 접근하여 인간의 감각을 측정하고, 이를 바탕으로 수학적 모델을 구축하여 활용.