hi there

사용자 인터페이스(UI)

< 기본 원칙 >

직관성: 누구나 쉽게 이해, 사용
유효성: 사용자의 목적을 정확하게
학습성: 쉽게 학습 가능
유연성: 사용자의 요구사항 수용 가능, 실수 최소화

< 설계 지침 > - 고려 사항

사용자 중심: 사용자 친화적인 환경을 제공
일관성: 버튼, 조작 등을 일관성 있게 제공
단순성: 조작 방법의 단순화
그 외 결과예측 가능, 가시성, 표준화(디자인의 표준화), 접근성, 명확성, 오류 발생 해결 등

UI 표준

< 한국형 웹 콘텐츠 접근성 지침 >

인식의 용이성: 대체 텍스트, 명료성, 대체 수단
운용의 용이성: 키보드 접근성, 광과민성 발작 예방, 충분한 시간 제공, 쉬운 네비게이션
이해의 용이성: 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움
견고성: 문법 준수, 접근성

< 전자정부 웹 표준 준수 지침 >

내용의 문법 준수: 문서타입에 맞는 문법 준수 및 명시, 인코딩 방식 표기
동작 기술 중립성: 스크립트의 비표준 문법은 배제
부가 기능의 호환성 확보: 부가 기능은 다양한 브라우저에서 사용할 수 있어야 함
다양한 프로그램 제공: 별도의 다운로드가 필요한 프로그램은 원도우, 리눅스, 맥 중 2개 이상의 운영체제를 지원해야 함.

UI 설계도구

와이어프레임

기획 초기, 개략적, 뼈대 생성 단계
Tool: 손그림, ppt, 일러스트, 포토샵 etc.

목업

실제 화면과 유사, 정적, 실제 구현x
Tool: 파워 목업, 발사믹 목업 etc.

스토리보드

와이어프레임 + 설명, 페이지간 이동 흐름, 최종적으로 참고하는 작업 지침서
Tool: ppt, 키노트, 스케치, Axure etc.

프로토타입

동적, 실제 구현된 것처럼 테스트 가능
Tool: HTML, CSS etc.

유스케이스

사용자 측면에서 요구사항을 나타낸 것, 사용자가 원하는 목표
다이어그램 + 명세서 (구조적 표현)

UI 요구사항 확인

목표 정의 -> 활동 사항 정의 -> UI 요구사항 작성

목표 정의

사용자 대상 인터뷰(개별적, 많이) -> 요구사항 정의

활동 사항 정의

사용자와 회사의 비전을 일치시키는 작업
예산, 기간, 기술 발전 가능성, UI 디자인 방향

UI 요구사항 작성

실사용자 중심으로 작성 -> 다양한 의견 수렴
전체적인 구조 파악 및 검토
순서: 요구사항 요소 확인 -> 정황 시나리오 작성 -> 요구사항 작성

UI 프로토타입

개요

동적 모형(테스트 가능)
간단하게 구현(전체x) 그러나 핵심적 기능을 제공해야 함
사용자의 요구사항이 모두 반영될 때까지 계속 개선, 보완을 걸친다.

장점

설득, 이해가 용이
요구사항과 기능의 불일치로 인한 혼선을 예방(개발 시간 줄임)
사전에 오류 발견할 수 있다.

단점

개선, 보완 등으로 인해 작업시간 증가
자원소모, 중요한 작업이 생략 될 수도 있다.

종류

페이퍼 프로토타입
- 아날로그 방식
- 제작 기간이 짧은 경우 사용하고 비용이 저렴하다.
- 단점: 테스트 부적합, 공유하기 힘듦, 상호 관계가 많은 경우 나타내기 복잡함
디지털 프로토타입
- ppt, 아크로뱃 등과 같은 프로그램을 사용하여 작성하는 방법
- 장점: 수정 용이, 최종 제품과 비슷한 테스트 가능, 재사용 가능

계획, 작성 시 고려 사항

계획 시: 개발 목적 확인, 환경 마련, 일정 고려, 인원 확인
작성 시: 작성 계획, 프로토타입의 범위 지정, 목표 확인, 기간과 비용 확인, 참조 가능한 지

제작 단계

1단계: 분석(요구사항이 확정될 때 까지)
2단계: 종이 또는 편집 도구로 작성(핵심적인 기능 중심으로)
3단계: 사용자가 직접 확인 -> 추가 및 수정 의견 제안
4단계: 수정 및 합의 단계, 보완 작업 후 3단계로 돌아감(사용자 승인까지)

UI 설계서 작성

개요

요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서(기획, 개발, 디자이너 등과의 의사소통을 위해 작성)

순서

UI 설계서 표지 -> UI 설계서 개정 이력 -> UI 요구사항 정의서 -> 시스템 구조 -> 사이트 맵 -> 프로세스 정의서 -> 화면 설계

표지 작성: 프로젝트명 또는 시스템명 포함
개정 이력 작성: 수정되면 어떤 수정을 거쳤는 지 정리 후 버전을 설정함.
요구사항 정의서 작성: 사용자 요구사항의 적용 여부를 요구사항 별로 표시
시스템 구조 작성: 사용자의 요구사항이 어떻게 적용되는지 알 수 있다(요구사항과 프로토타입에 기초).
사이트 맵 작성: 한 눈에 알아보기, 메뉴별로 구분(테이블 or 표 형태)
프로세스 정의서 작성: 사용자 입장에서 작업이 진행되는 순서도
화면 설계: 프로토타입과 프로세스를 참고하여 페이지 별로 필요한 화면을 설계

UI 상세 설계

개요

실계 설계 및 구현을 위해 모든 호면에 대한 자세한 설계 진행 –> 반드시 시나리오를 작성
시나리오는 순차적으로 묘사되어 있음

UI 시나리오 문서 작성 원칙

트리 또는 플로우차트 표기법으로 정의함.
대표 화면의 레이아웃과 그 화면에 속할 기능 정의.
예외 상황에 대비한 다양한 케이스를 정의.
일반 규칙을 지키면서 기능별 상세 기능 시나리오 정의.

일반 규칙

공통키의 위치, 기능
공통 UI 요소
기본 인터렉션 규칙 etc.

UI 시나리오 문서의 요건

완전성: 상세하게 기술, 기능보다는 사용자의 태스크에 초점을 맞츰
일관성: 말 그대로 일관성을 유지
이해성: 불분명, 추상적인 표현을 피하면서 이해하기 쉽게 표현
가독성: 규칙, 목차 제공하면서 읽기 쉽게해야 함.
수정 용이성: 시나리오의 수정, 개선이 쉬워야 함.
추적 용이성: 변경 사항은 언제, 무엇이, 왜 발생했는지 쉽게 파악 가능해야 함.

UI 시나리오 문서로 인한 기대 효과

요구사항, 의사소통 오류 감소
재작업 감소, 혼선 최소화
불필요한 기능 최소화, 소프트웨어 개발 비용 절감
개발 속도 향상

1과목: 요약 정리(2) - 화면 설계