[실기] 소프트웨어 구축 -UI 설계

최초 작성일: 2024-08-26

최종 작성일: 2024-08-26

목표 : 정처기 합격 및 CS 지식 쌓기

 

 

UI 설계

1.    개념

(1)   UI(User Interface) 개념

Ÿ  컴퓨터, 웹사이트, 시스템 등의 정보 기기와 사용자 간의 상호작용을 가능하게 하는 매개체 이다.

Ÿ  UI의 구성요소에는 디스플레이 화면, 아이콘, 검색창, 키보드, 문자, 색상, 폰트 등이 포함된다

Ÿ  UI의 핵심은 사용자가 쉽고 편히라게 이요할 수 있는 직관적이고 보편적인 디자인이다

Ÿ  좋은 UI 디자인은 사용자가 최소한의 노력으로 최대한의 효율을 얻을 수 있도록 한다

(2)   UX(User Experience)의 개념

Ÿ   사용자가 UI를 통해 경험하는 모든 것을 포함한다.

Ÿ   사용자의 만족감, 불편함, 그리고 이용 관점에서의 감정과 행동을 모두 포함한다

Ÿ   UX 디자인의 목표는 사용자의 불만족을 최소화하고 편리한 사용 경험을 제공하는 것이다.

Ÿ   UX는 단순히 제품의 기능적인 측면을 넘어서 사용자의 감정, 인식, 반응 등 포괄적인 경험을 고려한다.

(3)   UI의 유형

1)    CLI (Command Line Interface) : 사용자가 키보드를 사용하여 명령어를 입력하여 컴퓨터를 조작하는 시스템

2)    GUI(Graphic User Interface) : 그래픽과 텍스트 기반으로 사용자의 입력이 마우스 등을 통해 이루어진다

3)    NUI (Natural User Interface) : 특별한 하드웨어 없이 인간의 자연스러운 움직임을 인식하여 정보를 제공한다

4)    OUI(Organic User Interface): 현실의 모든 것이 입력 및 출력 장치로 사용될 수 있는 인터페이스

5)    VUI (Voice User Interface): 음성인식을 기반으로 한 사용자 인터 페이스

6)    ARU(Augmented Reality User Interface) : 증강 현식

2.    UI 설계

(1)   UI 요구사항 구분

1)    기능적 요구 사항

Ÿ   시스템이 제공해야하는 기능에 대한 요구사항

Ÿ   입력, 출력, 데이터, 연산에 관한 요구사항

2)    비기능적 요구 사항

Ÿ   사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항

Ÿ   플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항

Ÿ   비용, 일정 등 프로젝트 계획에 관한 요구사항

(2)   UI 설계 절차

UI 개발목표 및 범위 수립 -> UI전략 수립 -> 사용자 요구사항 분석 -> UI 상세 설계 -> 구현 -> 테스트

1)    UI 개발 목표 및 범위 수립

Ÿ   프로젝트의 UI부문에 대한 목표와 범위를 설정

Ÿ   프로젝트 전반에 걸쳐 UI 계획을 통합

Ÿ   이해관계자의 UI 요구사항을 조사하고 정의

Ÿ   최신 UI 트렌드와 해당 버시스의 특정 사용자 그룹을 분석

Ÿ   사용자의 기대와 프로젝트의 기술적 제약 사항을 고려

2)    UI 전략 수립

3)    사용자 요구사항 분석 : 초기 프로토타입(시제품)을 제작하여 아이디어를 시각화

4)    UI 상세 설계: UI 기능, 화면 구조, 상호작용 흐름 및 예외 처리에 대한 상세 설계를 수행

5)    구현 : HTML5(구조를 만드는 것), CSS3(스타일 쉬트- 화면의 색상이라든지 배치등 담당), JS(동적인 효과)등을 사용하여 UI를 구현/ 반응형 디자인을 고려하여 다양한 디바이스와 화면크기에서도 일관된 사용자 경험을 제공

*반응형 디자인/웹 = 화면 크기에 반응하는 것

적응형 다자인/웹 = PC용 화면, 모바일용 화면 이렇게 나눠져 있음.( 뷰화면을 나눠줌)

6)    테스트 : UI의 사용성을 검증 (사용자 테스트. 퍼포먼스 테스트 등)

(3)   UI 설계 원칙

원칙	설명
직관성	누구나 쉽게 이해하고 사용할 수 있어야 한다
유효성	사용자의 목적을 정확히 달성해야한다
학습성	누구나 쉽게 배우고 익힐 수 있어야 한다
유연성	사용자의 요구사항을 최대한 수용하며, 오류를 최소화 해야한다.

(4)   UI 설계 도구

A.      와이어프레임

         i.         웹사이트나 앱의 기본 구조와 레이아웃을 나타내는 초기 설계 도구

         ii.          실제 콘텐츠나 정확한 디자인보다는 페이지 간의 관계, 기능 및 흐름에 중점을 둠

         iii.         여러 도구를 사용해 제작 가능하며, 실무에서는 다양한 형태로 표현

B.      스토리보드

         i.         서비스나 제품의 시나리오 흐름을 시각적으로 나타내는 도구

         ii.          완성된 서비스나 제품의 흐름과 같은 상호적인 영향(인터랙션)을 디테일하게 보여준다

         iii.         디자인과 개발팀이 참조하는 주요문서로, 서비스의 전체적인 정보와 기능, 디자인 가이드 등이 포함됨

C.      프로토 타입

        i.         실제 서비스와 유사하게 동작하는 모델

        ii.          와이어 프레임이나 스토리보드를 기반으로 하며, 사용자와의 상호작용 영향(인터랙션)을 통해 실제 제품의 작동을 시뮬레이션함

       iii.         사용자 테스트를 위해 빠르게 만들 수 있음

D.     목업(MOCKUP)

       i.         와이어프레임보다 구체적이며, 실제화면과 유사한 정적 디자인

       ii.          특정도구(파워 목업, 발사목 목업등)을 이용하여 생성됨

E.      유스케이스

       i.         사용자 관점에서 시스템이 어떻게 동작하는 지 나타내는 도구

       ii.          사용자의 목표와 이를 달성하기 위한 동작의 시나리오를 기술

       iii.         종종 다이어그램 형태로 표현되어 시스템의 전체적인 흐름을 보여줌

3.    감성공학

(1)   개념 : 인간의 감성을 물리적 설계요소로 번역하고 구현하는 기술/ 마음의 이미지 파악, 형상화 그리고 제품 생산의 과정을 거친다/ 요소화 -> 형상화-> 구현->생산

(2)   제품과 관련된 인간의 감성

• 감각적 감성 : 제품의 외관, 디자인등 외적 특성에 관련된 감성
• 기능적 감성 : 제품의 성능 및 사용 편의성에 관련된 감성
• 문화적 감성: 개인이 속한 사회나 문화에 관련된 감성

(3)   감성공학의 접근방법

접근방법	설명
1류 접근방법	제품에 대한 이미지를 분석하고 이를 디자인 요소와 연결
2류 접근 방법	문화적 감성을 반영하되 평가자들의 생활 양식등을 고려한 방법
3류 접근 방법	특정 제품을 사용하여 감성을 정량화 하고 이를 제품 설계에 응용하는 방법