1-10강. 화면 설계-UI 설계

과목1. 소프트웨어 설계, 10강. 화면 설계-UI 설계

 

[ 목차 ]

1. UI 설계 단계

2. 흐름설계

3. 상세설계

4. 감성 공학의 개념

5. 감성공학 관련 기술

6. 감성공학의 접근 방법

7. UI 설계 도구의 개념

8. UI 개발 프로세스와 설계도구 적용 사례

9. UI 설계 도구의 유형

10. UI 설계 도구의 종류

 

1. UI 설계 단계

1) 문제 정의

  1] 시스템의 목적을 기술하고 해결해야 할 문제를 정의

  2] 형식 또는 비형식적으로 시스템의 목적을 기술

 

2) 사용자 모델 정의

  1] 사용자의 특성을 명확히 하지 않고는 시스템의 사용성을 확보할 수 없이게 사용자의 특성을 결정

  2] 사용자의 컴퓨터 소프트웨어와 작업에 대한 지식 정도에 따라 초급자, 중급자, 숙련자로 분류

  3] 시스템은 사용자 중심으로 사용자의 특성을 결정해야 함

사용자 모델링

1) 실제 시스템 개발에 부합하는 사용자 모형을 제작하여 특성을 시스템의 개발 목적에 따라 사용자의 행동을 체
      계적으로 파악해 나가는 과정

2) 사용자 분석이 사용자의 니즈를 전반적으로 조사하는 것이면 사용자 모델링은 그 추려진 분석 내용을 시스템
      에 구현, 구체화시키는 과정

3) 작업 분석

  1] 이전 단계를 세분화

  2] 항상 해결해야 할 문제를 정제, 사용자의 특징들을 세분화하고 시스템을 토해 수행되어야 할 작업들을 정의

  3] 위 작업이 끝난 후 사용자가 컴퓨터를 이용해 수행해야 할 구체적인 작업과 개념이 나와야 함

누가 시스템을 사용할 것인가?

어떤 작업을 수행할 것인가?

작업방법은 어떻게 배울 것인가?

어디서 작업이 수행될 것인가?

사용자와 데이터의 관계는 무엇인가?

사용자가 다른 도구를 사용하는가?

사용자는 서로 어떻게 의사소통하는가?

얼마나 자주 작업이 수행되는가?

작업에 어떤시간제약이 있는가?

시스템이 오류일 때 어떤 일이 일어나는가?

4) 컴퓨터 오브젝트(컴퓨터 장치 및 요소) 및 기능 정의

  1] 분석한 작업을 컴퓨터의 어떤 사용자 인터페이스를 통해 표현할 것인지 정의

  2] 실제로 사용자는 시스템을 이용해 작업할 경우, 컴퓨터 오브젝트를 통해 수행

  3] 작업에 대해 컴퓨터의 직접적인 표현은 사용자의 정신적인 수고를 덜어 줌

  4] 작업을 컴퓨터 오브젝트와 일치시켜야 함

  5] 작업 수행을 향상시키기 위해 입력 취소, 잘라내기, 복사, 붙여넣기, 온라인 도움말 등 일반적 컴퓨터 서비스 제공

 

5) 사용자 인터페이스 정의

  1] 컴퓨터나 작업 수행 바업에 대하여 상호작용하는 오브젝트를 선택하고 시스템의 상태를 명확히 함

  2] 상호작용 오브젝트 : 작업을 하기 위한 마우스나 키보드, 스크린 등의 물리적 입력이나 출력 디바이스를 의미

명확한 시스템 상태

1) 시스템의 상태를 사용자 인터페이스를 통해 사용자에게 명백히 알려주어야 함

2) 사용자와 시스템의 상호작용은 사용자의 액션과 시스템의 피드백으로 이루어짐

3) ex) 워드 프로세스의 입력모드 표시, 웹 브라우저 온라인/보안 상태 표시 등

6) 디자인 평가

  1] 설계한 인터페이스가 분석한 작업에 맞게 잘 설계 되었는가?

  2] 사용자의 능력, 지식에 적당한가?

  3] 사용자가 쓰기 쉽고 편리한가?

  4] 사용성 평가 실험을 통해 설계한 인터페이스에 대한 사용성 평가 : GOMS, 휴리스틱

GOMS
1) 사람이 화면에서 어떤 오브젝트를 보는데, 인지하는데, 결정 후 클릭까지 몇 초가 걸리는지 확인하고 해당 인
      터페이스가 어떻다, 라는 분석적인 평가방법
2) 비용이 많이 들지만 평가에 대한 정확도가 높음

휴리스틱
1) 전문가로 구성된 집단에서 설계한 사용자 인터페이스에 대해 의견을 내게 하여 평가하는 방법
2) 비용이 저렴하지만 정확한 평가가 힘듬 -> 기업에서 많이 사용

2. 흐름설계

1) 화면에 구현되어야 할 기능을 정의

  1] 기능적 요구사하에 대한 설명을 정리

    - 입출력 데이터

    - 정보의 등록, 수정, 삭제 기능

    - 이벤트에 따른 수행 기능

  2] 비기능적 요구사항에 대한 설명을 정리

    - 플랫폼 및 적용 기술 등 시스템 환경적 요구 기능

    - 처리속도 등 시스템 성능

    - 시스템 제약사항

 

2) 화면의 입력 요소를 파악

  1] 화면에서 수행되어야 할 기능

  2] 화면의 입력 항목

  3] 화면 간 이동과 흐름

 

3) UI 요구사항에 대한 유스케이스 설계

  1] 액터별 시나리오 구상

    - 각각의 액터가 무슨 행위를 하는지 작성

  2] 액터의 상호작용에 따른 세분화

    - 비슷한 핵위를 하는 액터를 구룹으로 지정하여 부모 액터를 정의

 

4) 기능 및 양식의 규칙을 정의

  1] Input Box 적용 규칙 정의 : 데이터 직접 입력(아이디, 이름)

  2] Combo Box 적용 규칙 정의 : 미리 입력된 내용을 선택(이메일)

  3] Radio Box 적용 규칙 정의 : 둘 중 하나 선택(성별)

  4) Check Box 적용 규칙 정의 : 체크박스를 선택(다중선택 가능)

 

3. 상세설계

1) 메뉴 구조 설계

  1] 사이트 맵 구조 설계

    - 사용자 관점에서 요구되는 프로세스들을 진행되는 순서에 맞춰 정리

  2] 화면설계

    - UI 프로토타입과 UI 프로세스 정의를 참고

    - 필요한 화면 수를 산출

    - 각 화면 별로 구분되도록 고유 ID를 부여하고 별도의 표지 페이지를 작성

    - 각 화면 별로 필요한 화면 내용을 설계

  3] 폼설계

    - 흐름단계의 적용 규칙에 맞게 폼을 설계

 

2) UI 검토 및 보안

  1] 사용성의 반복적인 검토를 통해 완성도가 높은 UI 상세설계 수행 가능

  2] UI 평가 결과를 토대로 설계 보완

UI 프로토 타입

1) 확정된 요구사항을 기반으로 UI전략을 실체화 하는 과정
2) UI 디자인 작성 이전에 미리 화면을 설계하는 단계
3) 페이퍼 프로토타입 : 아날로그 방법으로 스케치, 그림, 글 등을 손으로 작성
4) 디지털 프로토타입 : 컴퓨터 등 도구를 사용하여 작성 
5) HTML 프로토타입 : 사이트를 만들 듯이 넷 브라우저 작성

4. 감성 공학의 개념

1) 인체의 특징과 감정을 제품설계에 최대한 반영시키는 기술

2) 인간이 가지고 있는 소망으로서의 이미지나 감성을 구체적인 제품설계로 실현해내는 공학적인 접근방법

3) 인간 중심의 설계로, 1988년 시드니 국제 학회에서 감성공학으로 명명

4) 인간의 감성을 과학적으로 해석한 후 이에 적합한 제품, 환경 시스템 설계, 개발을 최종 목적으로 함

 

5. 감성공학 관련 기술

1) 생체 측정/인간감성 특성파악기술, 감성 디자인 기술, 오감센서 및 감성처리기술, 마이크로 기구 설계, 동력전달기술,

    마이크로 가공기술 등이 있음

2) 인간공학, 인지공학 등 인간의 특성을 파악하려는 연구에 기본을 둔 생체 측정 기술

3) 인간 특성에 적합하도록 사용자 인터페이스를 실현하기 위한 기술로서 센서공학, 퍼지뉴럴 네트워크 기술, 신경만 기

    술 등 인간의 오감 센서 및 감성 처리 기술

4) 산업 디자인 등의 감성 디자인 기술

5) 마이크로 기구 설계, 극소기계 응용 등 마이크로 가공 기술

6) 사용성 평가 기술, 가상현실 기술 등으로서 인간에 대한 적합성을 판단하고 새로운 감성을 창출하기 위한 기술

마이크로 가공 기술

1) 대규모 집적 회로 제조용의 미세 가공 기술로, 실리콘 기판을 깊이 100mm까지 가공하여 초소형의 3차원 구조
     를 만드는 기술

대규모 직접 회로

1) 구성소자수가 1000 이상인 집적회로
2) 10만 이상은 초대규모 집적회로

6. 감성공학의 접근 방법

1) 각각의 세부분야가 가진 목적 및 필요 기술에 따라 1~3류로 나눔

2) 1류

  1] 인간의 감성을 형용사로 표현할 수 있다고 보고 인간의 감성 이미지를 측정하는 방법

  2] 이를 통해 제품에 대한 이미지를 조사, 분석하여 제품의 디자인 요소와 연계

3) 2류 

  1] 개인의 연령, 성별 등의 개별적 특성과 생활 방식으로부터 개인이 갖고 있는 이미지를 구체화하는 방법

  2] 감성의 심리적 특성을 강조한 접근방법으로, 감성의 개인성에 중점을 둔 문화적 감성의 일부를 반영

  3] 1류와 기본 틀은 같으나 감성 어휘 수집의 전 단계에서 평가자들의 생활양식을 고려하는 것이 추가

  4] 제품에 대한 기호와 수요에 소비자군의 소속 지역, 생활 양식, 의식 문화가 많은 영향을 미칠 때

4) 3류

  1] 기존의 감성적 어휘 대신 공학적인 방버으로 접근하여 인간의 감각을 측정, 이를 수학적 모델로 구축하여 활용

  2] 물리적 튼성과 인간의 감각이 객관화된 지표 사이의 연관성을 분석하여 제품 설계에 응용

  3] 측정 시 감성의 생리적 특성을 중시(신체의 조직이나 기능에 관련되는 특성) 

 

7. UI 설계 도구의 개념

1) 사람과 사물 또는 시스템(기계, 컴퓨터 프로그램 등) 사이에서 의사소통을 할 수 있도록 일시적/영구적 접근을 목적으

    로 만들어진 물리적/가상적 매개체인 UI의 설계를 지원하는 도구

2) POP Prototype on Paper : 모바일용 프로토 타입 툴로 스케치한 화면을 촬영하거나 이미지를 불러와 간단하게 워크

                                         플로우를 시물레이션하는 것으로, 터치 등과 같은 제스쳐 설정 가능

3) 카카오 oven : 온라인 프로토타이핑 툴

 

8. UI 개발 프로세스와 설계도구 적용 사례

1) 일반적인 UI 개발 프로세스는 분석, 설계, 구현의 절차를 거쳐 요구사항에 부합하는 화면의 구현이 이루어짐

2) UI 설계 도구는 분석과 설계를 지원하며, 구현을 지원하는 개발 도구의 기능을 포함하기도 함 

3) 템플릿 : 그래픽 프로그램에서 무엇인가 만들 때 안내 역할을 하는 데 사용되는 틀 또는 모형

4) UI패턴 : UI에서 반복되는 반복되는 형태나 양식, 유형을 의미하며 여러 앱에서 자주 나타나는 화면, 인터렉션의 방식

5) UI 모델링 : 스토리보드, 와이어프레임

 

9. UI 설계 도구의 유형

1) UI 설계 도구의 유형은 UI 구현 절차에 따라 기획단계에서 화면 UI 설계 및 인터랙션 적용에 적합한 도구(KAKAO)와

    설계 작업 이후 이미 설계된 이미지의 인터랙션 작용에 적합한 도구(POP)로 나눌 수 있음

인터랙션

1) 사용자가 인터페이스를 통하여 시스템을 이용하는 일련의 상호작용
2) 능동적 인터랙션 : 사용자가 직접 조작
3) 수동적 인터랙션 : 음악이나 영상
4) 인터랙션의 발달로 프로토타이핑의 중요성이 높아짐

 

10. UI 설계 도구의 종류

1) 문서 작성 도구(소프트웨어) 및 드로잉 전문 도구

  1] 일반 문서 작성 도구나 웹사이트, 윈도우 컴포넌트, 블럭 다이어그램 등 다양한 스텐실을 제공하는 드로잉 도구

  2] 드로잉 : 주로 선으로 그리는 회화표현

  3] 윈도우 컴포넌트 : 화면을 구성하는 요소

  4] 스텐실 : 도면에 문자, 기호를 기입할 때 사용하는 형판. = 템플릿

  5] 목업 : 실물과 흡사한 정적인 형태의 모형

  6] 프로토타입 : 다양한 인터렉션이 결합되어 실제 서비스처럼 작동하는 모형

  7] 스토리보드 : 정책, 프로세스, 와이어 프레임 등이 모두 포함된 설계 문서

  8] 와이어프레임 : UI 중심의 화면 레이아웃

  9] Power Mockup : 파워포인트 목업 프로그램

 

2) 화면 설계를 위한 전문 도구

  1] 다양한 드로잉을 지원하기 보다 화면 스케치를 위한 단순하고 전문화된 기능을 제공

  2] 발사믹 목업 : 디테일한 화면 구성은 어렵지만 스케치한 느낌으로 빠르고 심플하게 서비스 컨셉을 전달

  3] kakao oven : 온라인 프로토타이핑 툴이며 직관적인 인터페이스와 단기간 스케치에 적합

 

3) UI 설계 및 패턴 전문 도구

  1] UI 패턴, UI 모델링, UI 디자인, 소스 코드 생성 등 생산성 향상과 화면의 품질보호를 위한 전문 도구

  2] 스케치 : UI 디자인 프로그램으로, 네덜란드 보헤미안 코딩이 제작. UI 디자인에 필요한 기능만 탑제

 

4) 해당 UI 플랫폼에 포함된 도구

  1] 해당 UI 플랫폼에서 프로토타이핑을 하고 이를 이용해 설계에 관한 협의할 할 수 있고 바로 코딩이 가능한 도구

  2] 프레이머 : coffee script라는 개발 언어를 사용하는 코드 기반의 프로토타이핑 툴