화면 설계 (UI 설계)

UI/UX

UI(User Interface, 사용자 인터페이스)

• UI는 사용자와 시스템간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미한다.
• 컴퓨터, 웹 사이트, 시스텝 등의 정보 기기와 사용자 간의 상호작용을 가능하게 하는 매개체이다.
• UI의 핵심은 사용자가 쉽고 편리하게 이용할 수 있는 직관적이고 보편적인 디자인이다.
• 좋은 UI 디자인은 사용자가 최소한의 노력으로 최대한의 효율을 얻을 수 있도록 한다.
• UI 구성요소
  디스플레이 화면, 아이콘, 검색창, 키보드, 문자, 색상, 폰트 등
• UI의 세 가지 분야
  • 정보 제공과 전달을 위한 물리적 제어에 관한 분야
  • 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
  • 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

UX(User Experience, 사용자 경험)

• UX는 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험을 의미한다. (사용자가 UI를 통해 경험하는 모든 것)

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

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

• UI가 사용성, 접근성, 편의성을 중시한다면 UX는 이러한 UI를 통해 사용자가 느끼는 만족이나 감정을 중시한다.

UI의 유형

• CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스, 사용자가 키보드를 사용하여 명령어를 입력하여 컴퓨터를 조작하는 시스템
• GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
• NUI(Natural USer Interface) : 사용자의 말이나 행동 등 자연스러운 움직임을 통해 기기를 조작하는 인터페이스, 특별한 하드웨어 없이 인간의 자연스러운 움직임을 인식하여 정보를 제공한다.
• OUI(Oraganic User Interface) : 현실의 모든 것이 입력 및 출력 장치로 사용될 수 있는 인터페이스
• VUI(Voice User Interface) : 음성 인식을 기반으로 한 사용자 인터페이스
• ARUI(Augmented Reality User Interface) : 증강 현실 기술을 활용한 사용자 인터페이스

UI 설계

UI 요구사항

1) 기능적 요구사항

• 시스템이 제공해야 하는 기능에 대한 요구사항
• 입력, 출력, 데이터, 연산에 관한 요구사항
  2) 비기능적 요구사항
• 사용성, 효율성, 신뢰성, 유지 보수성, 재사용성 등 품질에 관한 요구사항
• 플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항
• 비용, 일정 등 프로젝트 계획에 관한 요구사항

UI 설계 절차

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

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

• 프로젝트의 UI 부문에 대한 목표와 범위를 설정
• 프로젝트 전반에 걸쳐 UI 계획을 통합
• 이해 관계자의 UI 요구사항을 조사하고 정의
• 최신 UI 트렌드와 해당 서비스의 특정 사용자 그룹을 분석
• 사용자의 기대와 프로젝트의 기술적 제약 사항을 고려
  2) UI 전략 수립
• 사용자 및 시장 조사를 통해 UI와 UX 전략을 개발
• 기술적 관점에서도 전략을 수립(사용할 플랫폼, 프레임워크 선택 등)
  3) 사용자 요구사항 분석
• 사용자 조사 결과를 바탕으로 필요한 요구사항을 파악하고 분석
• 초기 프로토타입을 제작하여 아이디어를 시각화
  4) UI 상세 설계
• UI 기능, 화면 구조, 상호작용 흐름 및 예외 처리에 대한 상세 설계를 수행
  5) 구현
• HTML5, CSS3, JavaScript 등을 상용하여 UI를 구현
• 반응형 디자인을 고려하여 다양한 디바이스와 화면 크기에서도 일관된 사용자 경험을 제공
  6) 테스트
• UI의 사용성을 검증(사용자 테스트, 퍼포먼스 테스트 등)

UI의 기본 원칙

• 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함
• 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함
• 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함
• 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함

UI 설계 도구

와이어프레임

• 와이어프레임(Wireframe)은 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 도구이다.
• 웹 사이트나 앱의 기본 구조와 레이아웃을 나타내는 초기 설계 도구
• 실제 콘텐츠나 정확한 디자인보다는 페이지 간의 관계, 기능 및 흐름에 중점을 둠
• 개발자나 디자이너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 사용한다.
• 와이어프레임 툴 : 재플린, 피그마, 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

목업(Mockup)

• 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형이다.
• 디자인, 사용 방법 설명, 평가 등을 위해 만든다.
• 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않는다.
• 목업 툴 : 파워 목업, 발사믹 목업 등

스토리보드(Story Board)

• 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서이다.
• 서비스나 제품의 시나리오 흐름을 시각적으로 나타내는 도구
• 디자인과 개발 팀이 참조하는 주요 문서로, 서비스의 전체적인 정보와 기능, 디자인 가이드 등이 포함됨
• 서비스 구축을 위한 모든 정보가 들어 있다.
• 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

프로토타입(Prototype)

• 와이어프레임이나 스토리보드 등에 인터랙션(상호적인 영향)을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형이다.
• 사용자의 요구사항을 개발자가 맞게 해석했는지 검증 하기 위한 것이다.
• 페이어 프로토타입 : 스케치, 그림, 글 등을 이용하여 손으로 직접 작성하는 아날로그적인 방법
• 디지털 프로토타입 : 파워포인트, 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램을 사용하여 작성하는 방법

유스케이스(Use Case)

• 사용자의 요구사항을 기능 단위로 표현하는 것이다.
• 사용자 관점에서 시스템이 어떻게 동작하는지 나타내는 도구
• 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다.
• 일반적으로 다이어그램 형식으로 묘사되어 시스템의 전체적인 흐름을 보여줌

품질 요구사항

• 소프트웨어 품질은 소프트웨어에 대한 요구사항이 사용자의 입장에서 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체이다.
  <소프트웨어 품질 관련 표준>
  - ISO/IEC : 9126 소프트웨어의 품질 특성과 평가를 위한 국제 표준
  - ISO/IEC 25010 : ISO/IEC 9126에 호환성과 보안성을 강화하여 개정한 소프트웨어 제품에 대한 국제 표준
  - ISO/IEC 12119 : 패키지 소프트웨어의 일반적인 제품 품질 요구사항 및 테스트를 위한 국제 표준
  - ISO/IEC 14598 : 소프트웨어 품질의 측정과 평가에 필요 절차를 규정한 표준

ISO/IEC 9126의 소프트웨어 품질 특성

• 기능성(Fuctionality)
  • 소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부를 나타낸다.
  • 하위 특성 : 적절성/적합성, 정밀성/정확성, 상호 운용성, 보안성, 준수성
• 신뢰성(Reliability)
  • 주어진 시간동안 주어진 기능을 오류 없이 수행할 수 있는 정도를 나타낸다.
  • 하위 특성 : 성숙성, 고장 허용성, 회복성
• 사용성(Usability)
  • 사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대하여 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도를 나타낸다.
  • 하위 특성 : 이해성, 학습성, 운용성, 친밀성
• 효율성(Efficiency)
  • 사용자가 요구하는 기능을 얼마나 빠르게 처리할 수 있는지 정도를 나타낸다.
  • 하위 특성 : 시간 효율성, 자원 효율성
• 유지 보수성(MAintainability)
  • 환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도를 나타낸다.
  • 하위 특성 : 분석성, 변경성, 안정성, 시험성
• 이식성(Portability)
  • 소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있느지 정도를 나타낸다.
  • 하위 특성 : 적용성, 설치성, 대체성, 공존성

HCI

• HCI(Human Computer Interaction or Interface)는 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문이다.
• 최종 목표는 시스템을 사용하는데 있어 최적의 사용자 경험(UX)을 만드는 것이다.
• HCI는 어떤 제품이 좋은 제품인지, 어떻게 하면 좋은 제품을 만들 수 있는지 등을 연구한다.

감성공학

감성공학의 개념

• 인간의 감성을 물리적 설계 요소로 변역하고 구현하는 기술
• 감성공학은 제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술이다.
• 인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존 하는 종합과학이다.
• 마음의 이미지 파악, 형상화, 그리고 제품 생산의 과정을 거친다.
• 요소화 -> 형상화 -> 구현 -> 생산

제품과 관련된 인간의 감성

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

감성공학의 접근 방법

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

감성공학의 목적

• 감성공학의 목적은 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것이다.