용어 정리

정보처리기사[실기 핵심 정리] - UI 설계

k_sangmin 2024. 4. 5. 11:49

UI(User Interface) 개념

  • 컴퓨터, 웹 사이트, 시스템 등의 정보 기기와 사용자 간의 상호작용을 가능하게 하는 매개체이다.
  • UI의 구성요소에는 디스플레이 화며, 아이콘, 검색창, 키보드, 문자, 색상, 폰트 등이 포함된다.
  • UI의 핵심은 사용자가 쉽고 편리하게 이용할 수 있는 직관적이고 보편적인 디자인이다.
  • 좋은 UI 디자인은 사용자가 최소한의 노력으로 최대한의 효율을 얻을 수 있도록 한다.

UX(User eXperience) 개념

  • 사용자가 UI를 통해 경험하는 모든 것을 포함한다.
  • 사용자의 만족감, 불편함, 그리고 이용과정에서의 감정과 행동을 모두 포함한다.
  • UX  디자인의 목표는 사용자의 불만족을 최소화하고 편리한 사용경험을 제공하는 것이다.
  • UX는 단순히 제품의 기능적인 측면을 넘어서 사용자의 감정, 인식, 반응 등 포괄적인 경험을 고려한다.

UI 유형

1) CLI(Command Line Interface)

  • 사용자가 키보드를 사용하여 명령어를 입력하여 컴퓨터를 조작하는 시스템

 

2) GUI(Graphical User Interface)

  • 그래픽과 텍스트 기반으로, 사용자의 입력이 마우스 등을 통해 이루어 진다.

 

3) NUI(Natural User Interface)

  • 특별한 하드웨어 없이 인간의 자연스러운 움직임을 인식하여 정보를 제공한다

 

4) OUI(Organic User Interface)

  • 현실의 모든 것이 입력 출력 장치로 사용될 수 있는 인터페이스

 

5) VUI(Voice User Interface)

  • 음성 인식을 기반으로 한 사용자 인터페이스

 

6) ARUI(Augmented Reality User Interface)

  • 증강 현실 기술을 활용한 사용자 인터페이스

 

UI 요구사항 구분

1) 기능적 요구사항

  • 시스템이 제공해야 하는 기능에 대한 요구사항
  • 입력, 출력, 데이터, 연산에 관한 요구사항

 

2) 비기능적 요구사항

  • 사용성, 효율성, 신뢰성, 유지 보수성, 재사용성 등 품질에 관한 요구사함
  • 플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항
  • 비용, 일정 등 프로젝트 계획에 관한 요구사항

 

UI 설계 절차

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

  • 프로젝트의 UI  부분에 대한 목표와 범위를 설정
  • 프로젝트 전반에 걸쳐 UI 계획을 통합
  • 이해 관계자의 UI 요구사항을 조사하고 정의
  • 최신 UI트렌드와 해당 서비스의 특정 사용자 그룹을 분석
  • 사용자의 기대와 프로젝트의 기술적 제약사항을 고려

 

2) UI 전략 수립

  • 사용자 및 시장 조사를 통해 UI 와 UX 전략을 개발
  • 기술적 관점에서도 전략을 수립 (사용할 플랫폼, 프레임워크 선택 등)

 

3) 사용자 요구사항 분석

  • 사용자 조사 결과를 바탕으로 필요한 요구사항을 파악하고 분석
  • 초기 프로토타입을 제작하여 아이디어를 시각화

 

4) UI 상세 설계

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

 

5) 구현

  • HTML5, CSS3, JavaScript 등을 사용하여 UI를 구현
  • 반응형 디자인을 고려하여 다양한 디바이스와 화면 크기에서도 일관된 사용자 경험을 제공

 

6) 테스트

  • UI 사용성 검증

 

UI 설계 원칙

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

 

UI  설계 도구

 1) 와이어 프레임(Wireframe)

  • 웹 사이트나 앱의 기본 구조와 레이아웃을 나타내는 초기 설계 도구실
  • 실제 콘텐츠나 정확한 디자인 보다는 페이지 간의 관계, 기능 및 흐름에 중점을 둠
  • 여러 도구를 사용해 제작 가능하며, 실무에서는 다양한 형태(손그림, 전자도구 등)로 표현

 

2) 스토리 보드

  • 서비스나 제품의 시나리오 흐름을 시각적으로 나타내는 도구
  • 완성된 서비스나 제품의 흐름과 같은 상호적인 영향(인터렉션)을 디테일하게 보여준다.
  • 디자인과 개발 팀이 참조하는 주요 문서로, 서비스의 전체적인 정보와 기능, 디자인 가이드 등이 포함됨

 

3) 프로토타입

  • 실제 서비스와 유사하게 동작하는 모델
  • 와이어프레임이나 스토리보드를 기반으로 하며, 사용자와의 상호적인 영향(인터렉션)을 통해 실제 제품의 작동을 시물레이션함
  • 사용자 테스트를 위해 빠르게 만들수 있음

 

4) 목업(Mockup)

  • 와이어프레임 보다 구체적이며 실제 화면과 유사한 정적 디자인
  • 특정도구(예: 파워목업, 발사목 목업 등)를 이용하여 생성됨

 

5) 유스케이스

  • 사용자 관점에서 시스템이 어떻게 동작하는지 나타내는 도구
  • 사용자의 목표와 이를 달성하기 위한 동작을 시나리오를 기술
  • 종종 다이어그램 형태로 표현되어 시스템을 전체적인 흐름을 보여줌