화면 설계

사용자 인터페이스

사용자 인터페이스(UI)는 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미
사용자의 만족도에 가장 큰 영향을 미치는 요소, 변경이 가장 많이 발생
사용자의 편리성과 가독성을 높임으로써 단업 시간을 단축시키고 업무에 대한 이해도를 높여준다.
최소한의 노력으로 원하는 결과를 얻을 수 있다.

사용자 인터페이스의 기본 원칙

• 직관성
• 유효성
• 학습성
• 유연성

사용자 인터페이스 개발 시스템의 기능

• 사용자의 입력을 검증할 수 있어야한다.
• 에러 처리와 그와 관련된 에러 메시지를 표시할 수 있어야한다.
• 도움과 프롬프트를 제공해야한다.

UI 설계 도구

UI 설계 도구는 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구로, 종류에는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등이 있다.

• 와어어 프레임 : 기획 단계의 초기에 제작하는 것으로 페이지에 대한 대략적 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 것이다. 개발자나 디자이너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 사용. 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

• 목업 : 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형. 배치만하고 실제로 구현되지는 않는다. 툴 : 파워 목업, 발사믹 목업

• 스토리 보드 : 와이어프레임에 대한 설명, 흐름을 추가한 문서. 툴 : 파워포인트, 키노트, 스케치 등

• 프로토타입 : 어느정도 구현된 것으로 테스트가 가능한 동적인 형태의 모형. 테스트나 사용자간의 이해를 위한 샘플

• 유스케이스 : 사용자 측면 요구사항. 요구사항을 빠르게 파악하기 위해 사용

UI요구사항 확인

UI 요구사항 확인은 새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계로, 다양한 경로를 통해 사용자의 요구사항을 조사하고 분석한 후 작성해야한다.

< UI 요구사항 확인 순서 >
1. 목표 정의 : 인터뷰를 통해 사용자들의 의견을 수렴
2. 활동 사항 정의 : 조사한 요구사항을 토대로 앞으로 해야할 활동 사항을 정의
3. UI요구사항 작성 : 요구사항을 검토하고 분석하여 UI개발 목적에 맞게 작성해야함

< UI 요구사항 작성 순서 >
1. 요구사항 요소 확인 : 파악된 요구사항 요소의 종류와 각각의 표현 방식등을 검토한다.
2. 정황 시나리오 작성 : 사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것
3. 요구사항 작성 : 정황 시나리오를 토대로 작성

품질 요구사항

소프트웨어의 품질은 소트프웨어의 기능, 성능, 만족도 등 소프트웨어에 대한 요구사항이 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체이다.

• 소프트웨어의 품질은 사용자의 요구사항을 충족시킴으로써 확립
• ISO/IEC 9126 : 소프트웨어 품질 특성과 평가를 위한 표준 지침으로서 국제 표준으로 널리사용

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

1. 기능성(funcionality) : 소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부를 나타냄
2. 신뢰성(reliability) : 소프트웨어가 요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도를 나타낸다.
3. 사용성(useability) : 사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대하여 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도를 나타냄
4. 효율성(Efficiency) : 사용자가 요구하는 기능을 할당된 시간동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지를 나타낸다.
5. 유지 보수성(maintainability) : 환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도를 나타냄
6. 이식성(Portability) : 소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도를 나타냄

UI 프로토타입 제작 및 검토

UI 프로토타입의 개요

• 프로토타입은 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로 테스트가 가능하다.
• 프로토타입은 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것으로, 간단하게 만들어야한다.
• 프로토타입은 일부 핵심적인 기능만을 제공하지만 최종 제품의 작동 방식을 이해시키는데 필요한 기능은 반드시 포함되야아한다.
• 프로토타이핑 및 테스트를 거치지 않고는 실제 사용자와 제품 간의 상호 작용 방식을 예측하기 어려우므로 실제 사용자를 대상으로 사용하는 것이 좋다.

< UI 프로토타입의 장, 단점 >

• 장점
  - 사용자를 이해시키기 쉽다.
  • 요구사항과 기능의 불일치 등으로 인한 혼선을 예방해 개발 시간 단축
  • 사전에 오류 발견 가능
• 단점
  - 반복적인 개선 및 보완작업 때문에 작업시간을 증가시킬 수도 있다. 필요 이상의 자워을 소모할 수 있다.
  • 부분적인 프로토타이핑을 진행하다보면 중요한 작업이 생략될 수 있다.

< 프로토타이핑 종류>

• 페이퍼 프로토타입 : 아날로그적 방법 : 스케치, 그림 손으로 작성하는 방법, 제작비용 적을 경우 , 제작 기간 짧을 경우
• 디지털 프로토타일 : 파워포인트, 아크로뱃 등의 프로그램으로 작성하는 방법. 재사용이 필요한 경우, 전문가가 있을 경우

UI 설계서 작성

개요

• UI설계서는 사용자의 요구사항을 바탕으로 UI설계를 구체화하여 작성하는 문서로, 상세 설계 전에 대표적인 화면들을 설계한다.
• UI 설계서는 기획자, 개발자, 디자이너 등과의 원활한 의사소통을 위해 작성한다.

< 작성 순서 >
1. UI설계서 표지 작성
2. UI설게서 개정 이력 작성 : 버전을 찍는 느낌
3. UI 요구사항 정의서 작성 : 요구사항을 정리해논것
4. 시스템 구조 작성 : 요구사항이 어떻게 시스템에 적용되는지 알수 있게 하는 것
5. 사이트 맵 작성 : 메뉴별로 구분하여 설계
6. 프로세스 정의서 작성 : 사용자의 관점에서 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리한것으로 UI 전체적인 흐름 파악 가능
7. 화면 설계 : 화면을 페이지 별로 설게한 것

UI 시나리오 문서

개요

• UI 상세 설계는 UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계로, UI 상세 설계를 할 때는 반드시 시나리오를 작성해야한다.
• UI 시나리오 문서는 사용자 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐흠, 다양한 상황에서의 예외 처리ㄷ 등을 문서로 정리한 것이다.
• UI설계자 또는 인터랙션 디자이너가 UI 시나리오 문서를 작성하면 그래픽 디자이너가 시나리오를 바탕으로 디자인을 하고 개발자가 UI를 구현한다.

< UI 시나리오 문서의 요건 >

• 완전성 : 누락되지 않도록 최대한 상세하게 기술해야한다. 사용조의 초점에 맞춰 기술
• 일관성 : 서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지해야한다.
• 이해성 : 누구나 쉽게 이해해얗나다.
• 가독성 : 문서를 쉽게 읽을 수 있어야한다.
• 수정 용이성 : 시나리오의 수정이나 개선이 쉬워야한다.
• 추적 용이성 : 변경 사항이 언제, 어떤 부분이, 왜 발생했는지 쉽게 추적할 수 있어야 한다.

HCI / UX / 감성공학

HCI(Human Computer Interaction)

HCI는 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문으로, 최종 목표는 시스템을 사용하는데 있어서 최적의 사용자 경험을 만드는 것이다.

UX(User Experience)

UX는 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험을 말한다.

감성공학

감성공학은 제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술이다.