소프트웨어 설계 - 화면 설계

UI : 사용자와 시스템 간의 상호작용 도와주는 장치

< 특징 >

● 사용자의 편리성과 가독성 높임 ● 수행 결과의 오류 줄임

< 구분 >

● CLI : 명령과 출력이 txt 형태로 이뤄짐, 키보드로 작업 수행

● GUI : 아이콘이나 메뉴를 마우스로 선택하여 작업 수행

● NUI : 사용자의 말이나 행동으로 기기 조작

< 기본 원칙 >

● 직관성 : 누구나 쉽게 이해하고 사용 ● 유효성 : 목적을 정확히 달성

● 학습성 : 누구나 쉽게 배우도록 함 ● 유연성 : 요구사항을 최대한 수용

< 설계 지침 >

● 사용자 중심 : 사용자가 쉽게 이해하고 편리하게 사용

● 일관성 : 사용자가 쉽게 기억하고 습득

● 가시성 : 메인 화면에 주요 기능 노출시켜 최대한 조작이 쉽도록 설계

● 단순성 ● 오류 발생 해결

 

SW 아키텍처

● 개발하고자 하는 SW의 특성과 본질을 파악하고 다양한 시각에서 모형화

● 전체 시스템의 전반적인 구조 설계  ● 논리적 구성 바탕

 

한국형 웹 콘텐츠 접근성 지침 : 장애인이 비장애인과 동등하게 접근할 수 있도록

● 이미지 등의 콘텐츠에는 의미를 식별할 수 있는 텍스트 제공

● 키보드만으로도 접근 가능

● 광과민성 발작을 일으킬 수 있는 콘텐츠는 제공 X

● 가독성 : 콘텐츠는 읽고 이해하기 쉬워야 함

 

전자정부 웹 표준 준수 지침 : 홈페이지 구축 시 반영해야 할 최소한의 규약 정의

● 모든 페이지는 사용할 인코딩 방식 표기

● 웹 문서 구조화  ● 다양한 브라우저에서 접근 가능  ● 범용적인 포맷 사용

 

내비게이션 : 사용자가 사이트에서 원하는 정보를 빠르게 찾을 수 있도록 안내

● 메뉴  ● 링크  ● 이미지 맵  ● 사이트 맵  ● 사이트 메뉴바  ● 내비게이션 바  ● 디렉토리

 

UI 설계 도구 : 사용자 요구사항에 맞게 UI 화면 구조나 배치 설계 시 사용하는 도구

< 종류 >

와이어프레임

● 기획 단계 초기에 제작

● 페이지에 대한 개략적인 레이아웃이나 UI 요소의 뼈대 설계

● 레이아웃을 협의하거나 현재 진행 상태를 공유하기 위해

● 손그림, 파워포인트, 스케치, 포토샵

목업

● 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적 형태 모형  ● 실제 구현 X

스토리보드

● 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 추가한 문서

프로토타입

● 와이어프레임, 스토리보드 등에 인터랙션, 디스크립션 적용 -> 실제 구현 된 것처럼 테스트 가능

( 인터랙션 : UI를 통해 시스템을 사용하는 일련의 상호 작용 )

( 디스크립션 : 페이지 노출 시 지정한 내용 보임 )

유스케이스

● 사용자 측면에서의 요구사항  ● 사용자의 요구사항을 빠르게 파악

● 자연어로 작성  ● 각각의 유스케이스에 대해 유스케이스 명세서 작성

 

UI 요구사항 확인 : 시스템에 적용할 UI 관련 요구사항을 조사하여 작성

< 순서 >

1. 목표 정의

● 사용자들을 대상으로 인터뷰 진행

● 개별적으로 인터뷰 진행  ● 인터뷰 진행은 반드시 사용자 리서치 시작 전 수행

2. 활동 사항 정의

● 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항 정의

● 사용자와 회사의 비전을 일치시키는 작업 진행

● 필요한 예산과 일정 결정  ● 기술의 발전 가능성 파악 -> UI 디자인 방향 제시

3. UI 요구사항 작성 : 사용자들의 요구사항 검토 분석 -> UI 개발 목적에 맞게 작성

● 실사용자 중심으로 작성  ● UI 전체적인 구조를 파악 및 검토

< UI 요구사항 작성 순서 >

1.요구사항 요소 확인

● 데이터 요구 : 데이터 객체 정리, 반드시 초기에 확인

● 기능 요구 : 사용자의 목적 달성위해 무엇을 실행해야 하는지 설명, 기능 요구 리스트

● 제품/서비스의 품질 ● 제약사항

2. 정황 시나리오 작성 : 사용자의 요구사항 도출하기 위해 작성

● 요구사항 정의에 사용되는 초기 시나리오  ● 사용자 관점 시나리오 작성

● 사용자가 주로 사용하는 기능 위주로 작성  ● 간결, 명확

3. 요구사항 작성 : 요구사항은 정황 시나리오를 토대로 작성

( 정황 시나리오 : 사용자 관점에서 기능 위주로 작성 )

 

품질 요구사항 : SW에 대한 요구사항이 얼마나 충족하는가를 나타내는 SW의 특성

● 기능성 : 적절성 / 정합성 / 정밀성 / 정확성 / 상호 운용성 / 보안성 / 호환성

● 신뢰성 : 성숙성 / 고장 허용성 / 회복성

● 사용성 : 이해성 / 학습성 / 운용성 / 친밀성

● 효율성 : 시간 or 자원 효율성

● 유지 보수성 : 분석성 / 변경성 / 안정성 / 시험성

● 이식성 : 적용성 / 설치성 / 대체성 / 공존성

 

프로토타입

● 사용자 요구사항 기반 – 실제 동자하는 것처럼 나든 동적 형태 모형

● 테스트 가능  ● 간단하게 작성

● 최종 제품의 작동 방식을 이해 시키는데 필요한 기능은 반드시 포함

● 장점 : 사용자 설득 쉬움, 개발 시간 줄임, 사전에 오류 발견 가능

● 단점 : 반복적인 개선작업으로 작업 시간 증가, 중요한 작업이 생략 될 수 있음

< 종류 >

1. 페이퍼 프로토타입 : 손으로 직접 작성, 제작 기간 짧은경우 or 비용 적을 경우 사용

-> 장점 : 비용 저렴, 즉시 변경 가능

-> 단점 : 테스트하기에 부적당, 공유 어려움

2. 디지털 프로토타입 : 프로그램을 사용하여 작성

-> 장점 : 최종 제품과 비슷하게 테스트, 수정 쉬움, 재사용 가능

-> 단점 : 프로토타입을 작성할 프로그램의 사용법을 알아야 함

 

UI 프로토타입 설계 시 고려사항

● 실제 분석 작업이 완료되기 전에 진행  ● 표준 가이드 확정

● 프로토타이핑 진행 동안 가장 많은 시간이 소요된 구간 찾고 원인 분석 후 해경 방법 제시

 

UI 설계서 : UI 설계를 구체화하여 작성하는 문서

 

UI 설계서 개정 이력 : UI 설계서가 수정될 때마다 변경 사항 정리한 문서

● 처음 작성 시 첫 번째 항목을 초안 작성이라 함

● 버전을 1.0으로 설정

● 변경 사항 있을 때마다 변경 내용을 적고 버전을 0.1씩 높임

 

UI 요구사항 정의서 : 사용자의 요구사항을 확인하고 정리한 문서

 

시스템 구조 : 요구사항이 어떻게 시스템에 적용되는지 확인 가능

 

사이트 맵 : 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분하여 설계

 

프로세스 정의서 : 사용자 관점에서 프로세스들을 작업 진행 순서에 맞춰 정리

 

UI 상세 설계 : 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계 진행

 

템플릿 : 화면의 기본적인 레이아웃 형태

 

UI 시나리오 문서 : 사용자 인터페이스의 기능 구조, 대표 화면 등을 문서로 정리

< 작성 원칙 >

● 계층 구조 or 플로 차트 표기법으로 작성  ● 대표 화면의 레이아웃과 그 화면에 속할 기능 정의

● 예외 상황에 대비한 다양한 케이스 정의  ● 기능별 상세 기능 시나리오 정의

● 사용자의 태스크에 초점

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

● 완전성 : 최대한 상세하게 기술, 사용자의 태스크에 초점

● 일관성 ● 이해성 ● 수정/추적 용이성

● 가독성 : 템플릿 활용해 문서를 쉽게 읽을 수 있도록 함, 문서들이 서로 참조되도록 지정

 

HCI : 사람이 시스템을 보다 편리하게 사용하도록 연구하고 개발하는 학문

 

UX : 사용자가 시스템이나 서비스를 이용하면서 느낀 경험

 

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

-> 목적 : 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것