[정보처리기사] 8. UI 설계 - 1과목 소프트웨어 구축

8. UI 설계 - 1과목 소프트웨어 구축

UI 설계에서는 UI 특징 4가지(직유학유)만 빠르게 보고 넘어가도 좋습니다. 다만, 요즘 정보처리기사 실기 시험에 꼭 떨어지라도 내는 문제들이 포함되어 있어 감성공학까지 확인하시면 좋습니다.

 

목차

UI(User Interface)란?

브라우저 상에서 내가 보고 클릭하거나 입력하거나 스크롤하는 인터페이스들을 말합니다.

즉, 사용자와 상호작용하는 매개체입니다.

UX(User Experience)란?

UI를 통해 경험하는 모든 것을 말합니다.

UI 유형

1. CLI (Command Line Interface):
   • CLI는 텍스트 기반의 사용자 인터페이스를 의미합니다.
   • 사용자는 명령어를 입력하여 컴퓨터와 상호 작용합니다.
   • 주로 터미널 또는 명령 프롬프트를 통해 실행됩니다.
   • 예시: Unix/Linux의 Bash 셸, Windows의 CMD
2. GUI (Graphical User Interface):
   • GUI는 그래픽 요소를 사용하여 사용자와 컴퓨터 간의 상호 작용을 지원합니다.
   • 사용자는 마우스, 키보드 또는 터치 스크린을 사용하여 아이콘, 버튼, 창 등을 조작합니다.
   • 일반적으로 시각적인 표현이 있으며, 일반적으로 비순수 텍스트에 비해 직관적입니다.
   • 예시: Windows, macOS, Android, iOS의 대부분의 응용 프로그램.
3. NUI (Natural User Interface):
   • NUI는 사용자가 자연스러운 동작으로 컴퓨터와 상호 작용하는 인터페이스를 의미합니다.
   • 터치, 제스처, 음성, 시선 등을 활용하여 사용자의 의도를 인식하고 반응합니다.
   • 주목할만한 예시로는 터치 스크린 기반의 모바일 장치와 음성 인식 기술을 들 수 있습니다.
4. OLI (Organic User Interface):
   • OLI는 사용자가 기존의 정적이고 불변한 디자인 대신 유기적이고 변화하는 인터페이스를 경험하는 것을 목표로 합니다.
   • 환경에 따라 유동적으로 변화하고, 사용자 상호 작용에 반응하여 동적으로 조정됩니다.
   • 예를 들어, 스마트 홈 장치의 사용자 인터페이스가 주변 조명이나 온도에 따라 변할 수 있습니다.
5. VUI (Voice User Interface):
   • VUI는 음성 명령을 사용하여 컴퓨터나 장치와 상호 작용하는 인터페이스를 의미합니다.
   • 사용자가 음성을 통해 명령을 제공하고, 시스템은 이를 이해하고 실행합니다.
   • 예시: Amazon Alexa, Apple Siri, Google Assistant.
6. ARUI (Augmented Reality User Interface):
   • ARUI는 증강 현실(AR) 기술을 활용하여 사용자에게 확장된 인터랙션 및 정보 표현을 제공합니다.
   • 사용자가 실제 환경과 가상 객체를 결합하여 상호 작용할 수 있습니다.
   • 예를 들어, 스마트글래스를 통해 실제 세계에서 가상 정보를 볼 수 있는 것이 해당되며, 헤드업 디스플레이도 이에 속합니다.

UI 요구사항 구분

기능적 요구사항

시스템이 제공해야하는 입력, 출력,데이터, 연산에 관한 시스템에서 제공해야하는 기능에 대한 명세

1. 입력(Input):
   • 사용자가 시스템에게 제공하는 정보나 명령에 대한 처리.
   • 예시: 텍스트 입력, 음성 명령, 제스처 인식.
2. 출력(Output):
   • 시스템이 사용자에게 제공하는 정보나 결과물에 대한 처리.
   • 예시: 그래픽, 텍스트, 음성 출력.
3. 데이터(Data):
   • 시스템이 다루는 데이터의 처리와 관리.
   • 예시: 데이터 입력, 저장, 검색, 수정, 삭제.
4. 연산(Operations):
   • 시스템이 수행하는 특정 기능이나 작업에 대한 처리.
   • 예시: 계산, 정렬, 필터링, 애니메이션.

비기능적 요구사항

비기능적 요구사항은 주로 시스템의 운영체제(OS), 품질(Quality), 보안(Security) 측면을 다룹니다.

1. 운영체제(OS) 관련 요구사항
   • 시스템이 특정 운영체제에서 동작해야 하는 경우, 이에 대한 요구사항을 명시합니다.
   • 예시: 시스템은 Windows 10 이상에서 동작해야 합니다.
2. 품질(Quality) 관련 요구사항
   • 시스템이 안정성, 신뢰성, 성능 등의 품질 측면에서 특정 기준을 충족해야 합니다.
   • 예시: 시스템의 코드는 테스트를 통과하여 버그가 최소화되어야 합니다.
3. 보안(Security) 관련 요구사항
   • 시스템이 데이터 및 기능을 외부 위협으로부터 안전하게 보호해야 합니다.
   • 예시: 모든 사용자 인증 정보는 안전한 방법으로 저장되어야 하며, 데이터 전송은 암호화되어야 합니다.

 

UI 설계 절차

 UI 설계 절차는 크게 중요하지 않습니다. 다만 순서 정도 알아두시면 좋을 것 같습니다.

1. UI 계발 목표 및 범위 설계:
   • 프로젝트의 목표를 설정하고 UI의 범위를 결정합니다.
   • 기술적 관점에서 전략 설정
   • 예를 들어, 어떤 기능을 갖춘 UI가 필요한지, 대상 사용자는 누구인지 등을 고려합니다.
2. UI 전략 수립:
   • UI를 어떻게 디자인할지에 대한 전략을 수립합니다.
   • 이 단계에서는 기술적인 측면뿐만 아니라 비즈니스 목표와 사용자 경험에 대한 고려도 포함됩니다.
3. 사용자 요구사항 분석:
   • 사용자의 요구사항을 조사하고 문서화합니다.
   • 사용자의 성격, 선호도, 작업 환경 등을 고려하여 UI를 개발합니다.
4. UI 상세 설계:
   • 사용자 요구사항을 바탕으로 UI의 구조, 화면 구조, 레이아웃, 흐름 등을 설계합니다.
   • 이 단계에서는 워크플로우 다이어그램, 와이어프레임, 프로토타입 등의 도구를 사용하여 UI를 시각화합니다.
5. 구현:
   • UI 설계를 바탕으로 실제 UI를 개발합니다.
   • 디자인 요소와 기능을 구현하고 코드를 작성하여 UI를 완성합니다.
   • HTML5, CSS3, JavaScript
6. 테스트:
   • UI 사용성에 대해 품질을 검증하고 사용자 피드백을 수집합니다.
   • UI의 기능성, 성능, 사용자 경험 등을 평가하고 문제를 해결합니다.

 

UI 설계 원칙

직유학유는 꼭 기억해야합니다.

직관성 (Intuitiveness)

UI 설계의 첫 번째 원칙은 사용자가 직관적으로 이해하고 사용할 수 있는 인터페이스를 제공하는 것입니다.

사용자가 시스템을 처음 접하는 순간부터 UI 요소와 기능이 명확하게 이해되어야 합니다. 직관성은 사용자가 추가적인 학습이나 논리적 추론 없이도 UI를 쉽게 탐색하고 사용할 수 있는 능력을 의미합니다. 이를 통해 사용자의 불편함을 최소화하고 사용성을 향상시킬 수 있습니다.

 

유효성 (Efficiency)

유효성은 기능을 수행할 때 원하는 기능이어야합니다.
사용자가 목표를 달성하는 데 소비되는 시간과 노력을 최소화하는 능력을 의미합니다. 효율적인 UI는 사용자가 원하는 작업을 빠르게 수행할 수 있도록 도와줍니다. 이를 위해서는 사용자의 작업 흐름을 고려하고, 반복되는 작업을 자동화하고, 일관된 디자인 패턴을 사용하여 작업을 간소화해야 합니다.

학습성 (Learnability)

UI 설계는 사용자가 새로운 시스템이나 기능을 배우고 습득하는 데 있어서 학습 곡선을 최소화해야 합니다. 사용자는 최소한의 교육이나 지침 없이도 시스템을 쉽게 이해하고 습득할 수 있어야 합니다. 학습성이 높은 UI는 적은 노력으로 새로운 작업이나 기능을 익힐 수 있도록 설계됩니다.

 

유연성 (Flexibility)

유연성은 다양한 사용자 요구와 환경에 대응할 수 있는 능력을 의미합니다. UI는 다양한 디바이스, 화면 크기, 입력 방법 등에 대응하여 일관성을 유지하고 최적의 경험을 제공해야 합니다. 또한 사용자의 개인화 가능성을 고려하여 UI를 유연하게 설계해야 합니다. 사용자는 자신의 선호에 따라 UI를 조정하고 적응시킬 수 있어야 합니다.

 

UI 설계 도구

1. 와이어프레임(Wireframe)
   • 초기 UI 설계를 위한 도구로, 인터페이스의 구조와 레이아웃을 간단하게 표현합니다.
   • 주로 텍스트와 간단한 형상으로 구성되며, 디자인 요소는 최소화됩니다.
   • 시각적인 디자인보다는 기능과 구조에 중점을 둡니다.
2. 스토리보드(Storyboard)
   • 사용자 경험 및 시나리오를 이해하기 위해 시나리오 흐름을 시각적으로 나타내는 도구입니다.
   • 각각의 단계나 이벤트를 이미지나 그림으로 나열하여 사용자의 행동을 시각화합니다.
   • 사용자의 경험을 이해하고 설계할 때 유용합니다.
3. 프로토타입(Prototype)
   • 실제 서비스나 애플리케이션과 유사하게 동작하는 모델을 만드는 도구입니다.
   • 사용자가 제품의 동작을 시뮬레이션하고 테스트할 수 있습니다.
   • 초기 디자인 아이디어를 검증하고 피드백을 받는 데 유용합니다.
4. 목업(Mockup)
   • 실제화면과 유사하고 구체적인 디자인을 표현하는 정적 디자인입니다.
   • 실제 콘텐츠를 사용하여 디자인을 보다 구체화하고 사용자에게 시각적인 감각을 제공합니다.
   • 주로 디자인 요소와 레이아웃을 중점적으로 다룹니다.
5. 유스케이스(Use Case)
   • 사용자 관점에서 시스템이 어떻게 동작하는지를 설명하는 도구입니다.
   • 사용자의 요구와 시스템의 동작을 스토리 형식으로 나타냅니다.
   • 사용자의 요구사항을 기반으로 시스템의 기능을 정의하는 데 사용됩니다.

 

도구	설명	차이점
와이어프레임	초기 UI 설계를 위한 도구로, 인터페이스의 구조와 레이아웃을 간단하게 표현합니다.	디자인 요소의 최소화, 기능 및 구조에 중점을 둠. 시각적 디자인보다는 기능 및 구조에 중점을 둠.
스토리보드	사용자 경험 및 시나리오를 이해하기 위해 시나리오 흐름을 시각적으로 나타내는 도구입니다. 데이터 플로우, 서비스 정책을 포함합니다.	시나리오나 이벤트를 이미지나 그림으로 나열하여 사용자의 행동을 시각화함. 사용자의 경험을 이해하고 설계할 때 유용함.
프로토타입	실제 서비스나 애플리케이션과 유사하게 동작하는 모델을 만드는 도구입니다.	실제 서비스나 애플리케이션과 유사하게 동작하는 모델을 만드는 데 사용됨. 사용자가 제품의 동작을 시뮬레이션하고 테스트할 수 있음.
목업	실제화면과 유사하고 구체적인 디자인을 표현하는 정적 디자인입니다.	정적 디자인으로 실제 콘텐츠를 사용하여 디자인을 구체화함. 사용자에게 시각적인 감각을 제공하고 실제 화면과 유사한 인상을 주는 데 사용됨.
유스케이스	사용자 관점에서 시스템이 어떻게 동작하는지를 설명하는 도구입니다.	사용자의 요구와 시스템의 동작을 스토리 형식으로 나타냄. 사용자가 시스템을 어떻게 사용할지에 대한 시나리오를 기술함.

감성공학이란?

감성공학 (Affective Engineering)은 제품이나 서비스의 디자인 및 개발에 인간의 감성을 중요한 고려 요소로 삼는 학문이나 기술입니다.

이는 제품이나 서비스가 단순히 기능적인 측면뿐만 아니라 사용자의 감정과 경험에도 긍정적인 영향을 미치도록 하는 것을 목표로 합니다.

요소화->형상화->구현->생산은 감성공학을 구체적으로 적용하는 과정을 나타냅니다.

감성을 구체화하고 형상화한 후에는 실제 제품이나 서비스에 구현하고 생산하는 단계를 거치게 됩니다.

 

감성의 종류

1. 감각적 감성 (Sensory Affect): 제품의 외관, 색상, 질감 등과 같이 감각적인 인상을 주는 요소를 강조합니다.
2. 기능적 감성 (Functional Affect): 제품이나 서비스의 성능과 기능에 대한 감성을 의미합니다.
3. 문화적 감성 (Cultural Affect): 개인이 속한 사회나 문화에 관련된 감성을 반영합니다.

접근 방법

1. 1류 접근 방법: 제품의 외관 및 이미지를 분석하여 디자인 요소와 연결하고 사용자의 감성을 반영합니다.
2. 2류 접근 방법: 문화적 감성을 반영하고 사용자의 생활양식을 고려하여 제품을 디자인합니다.
3. 3류 접근 방법: 특정 제품을 사용하여 감성을 정량화하고 응용하여 제품의 감성적 특성을 개발합니다.