정보처리기사 필기 - 소프트웨어 설계 : 화면 설계

정보처리기사 필기 - 소프트웨어 설계 : 화면 설계

 

사용자 인터페이스(UI)

 

• 사용자와 시스템간의 상호작용이 원활하게 이루어지도록 도와주는 장치, 소프트웨어
• 분야 : 물리적 제어(전달) / 구성 / 기능(편리, 간편)

 

1. 사용자 인터페이스의 특징

 

• 사용자의 만족도에 가장 큰 영향을 미치는 요소
• 작업시간 단축, 업무 이해도 증가
• 최소한의 노력으로 원하는 결과를 얻을 수 있다
• 정보 제공자와 공급자 간의 매개 역할

 

2. 사용자 인터페이스의 구분

 

• CLI(Command Line Interface) : 텍스트
• GUI(Graphic User Interface) : 아이콘, 메뉴를 마우스로 선택
• NUI(Natural User Interface) : 말, 행동

 

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

 

• 직관성 : 누구나 쉽게 이해
• 유효성 : 목적을 정확하고 완벽하게 달성
• 학습성 : 누구나 쉽게 배울 수 있음
• 유연성 : 사용자의 요구사항 최대한 수용, 실수 최소화

 

4. 사용자 인터페이스의 설계 지침

 

• 사용자 중심, 일관성, 단순성
• 결과예측 가능, 가시성(기능 노출), 표준화
• 접근성, 명확성, 오류 발생 해결

 

 

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

 

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

 

ⓞ 전자 정부 웹 표준 준수 지침

 

• 내용의 문법 준수 : 모든 웹문서는 적절한 문서 타입을 명시하고 맞는 문법 준수
• 내용과 표현의 분리 : 웹문서 구조화
• 동작의 기술 중립성 보장 : 비표준문법 배제
• 플러그인의 호환성 : 다양한 웹브라우저에서 호환가능한 플러그인 사용
• 콘텐츠의 보편적 표현 : 다양한 브라우저에서 접근 가능
• 운영체제에 독립적인 콘텐츠 제공 : 범용적인 형식의 미디어 제공
• 부가 기능의 호환성 확보 :  다양한 브라우저에서 사용가능한 실명인증 같은 부가기능 사용
• 다양한 프로그램 제공 : 별도 프로그램은 2개 이상의 운영체제에서 지원

 

ⓞ UI 지침

 

• 사용자 경험(UX)의 고려사항 : 사용대상, 환경, 목적, 빈도, 모바일 서비스, 입력 최소화, 자동완성
• 핵심 기능의 고려사항 : 메뉴 구조를 단순화하고 간결한 정보 제공
• 호환성 확장성의 고려사항 : 3개 이상의 브라우저에서 동등한 서비스를 제공
• 정보 소외계층의 접근성 : 장애인, 고령자 등의 정보 접근 및 이용 편의 증진을 위한 지침
• 일관성
• 이미지 : 전송속도, 저용량, 사회적 갈등, 저작권
• 기타 설계 지침 : 사용자 중심, 단순성, 결과 예측 기능, 가시성, 표준화, 접근성, 명확성, 오류발생 해결

 

 

스토리보드

 

- 디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서

- UI 화면설계 구분

 

• 와이어 프레임 : 이해관계자들간 의사소통 목적, PPT, 키노트
• 스토리보드 : 와이어프레임에 콘텐츠에 대한 설명, 이동 흐름 추가, PPT, 키노트
• 프로토타입 : 동적 효과 적용, 네이버프로토나우, HTML/CSS

 

ⓞ 스토리보드 작성 절차

 

1. 1단계 : 메뉴 구성도 만들기 - 메뉴 순서, 구성 단계, 용어 정의
2. 2단계 : 스타일 확정 - 레이아웃, 글자, 크기, 색상 정의
3. 3단계 : 설계하기 - 시각적인 디자인 컨셉 잡기

 

UI 설계 도구

 

- 와이어프레임 : 기획초기단계, 개략적, 뼈대 설계 / 손그림, PPT, 키노트, 일러스트, 포토샵

- 목업 : 와이어프레임보다 더 실제화면과 유사, 정적인 모형, 실제구현x / 파워목업, 발사믹 목업

- 스토리보드 : 와이어 프레임에서 컨텐츠에 대한 설명, 페이지간 이동 흐름, 최종적 참고 지침서 / PPT, 키노트, 스케치

- 프로토타입 : 동적인 형태로 실제구현하는 모형물 / HTML/CSS, Flinto, 네이버 프로토나우

- 유스케이스 : 사용자 측면에서 요구사항 표현, 자연어를 구조적으로 표현, 유스케이스 다이어그램 완성 후 유스케이스 명세서 작성 

 

 

UI 요구사항 확인

 

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

 

1. 목표정의 : 인터뷰를 통해 요구사항 정의, 개별적, 다수의 의견, 1시간 이내, 리서치 전에 인터뷰 수행
2. 활동 사항 정의 : 앞으로 해야할 사항 정의, 개인의 요구사항과 회사의 비전 일치, 예산과 일정 고려
3. UI 요구사항 작성 : 실 사용자 중심으로 작성, 다양한 의견 수렴, 전체적 구조 파악 및 검토

• 요구사항 작성 순서 : 요구사항 요소 확인 → 정황 시나리오 작성 → 요구사항 작성

요구사항 요소 확인

 

- 데이터 요구 : 초기 확인

- 기능 요구 : 무엇을 실행하는지 동사형으로 설명

- 제품/서비스 품질 : 빠르게 정량화

- 제약 사항 : 비용, 규제, 일정에 관한 내용

 

정황 시나리오 작성

 

- 사용자의 요구사항 도출, 초기에 사용하는 시나리오

- 사용자 관점의 기능 위주로 작성

- 육하원칙에 따라 간결하고 명확하게 작성

- 전문가가 검토

 

요구사항 작성

 

- 정황 시나리오를 토대로 작성

ex. 문자 입력, 약속 추적, 메세지 리스트 확인

 

 

품질 요구사항

 

• ISO/IEC 9126 : 기능성, 신뢰성, 효율성, 유지보수성, 이식성
• ISO/IEC 25010의 품질특성 : 기능성, 사용성, 이식성, 유지보수성, 기능적합성, 실행효율성, 호환성, 보안성

 

1. 기능성 : 정확하게 기능 제공

 

• 적절성/정합성 : 목적달성을 위해 적절한 기능 제공
• 정밀성/정확성 : 요구하는 결과를 정확하게 산출
• 상호 운용성 : 다른 시스템과 어울려 작업할 수 있는 능력
• 보안성 : 접근권한에 따라 허용/차단하는 능력
• 호환성 : 기능과 관련된 표준을 준수할 수 있는 능력

 

2. 신뢰성 : 오류없이 수행

 

• 성숙성 : 결함으로 인한 고장을 피해갈 수 있는 능력 
• 고장허용성 : 결함에도 성능 유지
• 회복성 : 고장 시 원래상태로 빠르게 복구

 

3. 사용성 : 다시 사용하고 싶은 정도

 

• 이해성 : 소프트웨어에 대한 사용방법 이해
• 학습성 : 소프트웨어 애플리케이션을 학습할 수 있는 능력
• 운용성 : 소프트웨어 운용, 제어
• 친밀성 : 다시 사용하고 싶어하는 능력

 

4. 효율성 : 할당된 시간/자원으로 빠르게 처리하는 정도

 

• 시간 효율성 : 반응 시간, 처리 시간, 처리율 제공
• 자원 효율성 : 적절한 자원의 양, 종류 제공

 

5. 유지보수성 : 새로운 요구사항 개선, 확장

 

• 분석성 : 결함/고장 원인 식별
• 변경성 : 쉽게 수정
• 안정성 : 변경으로 인한 예상치 못한 결과를 최소화
• 시험성 : 변경 검증

 

6. 이식성 : 다른 환경에서 쉽게 적용 가능 여부

 

• 적용성 : 다른 환경으로 변경 가능
• 설치성 : 임의의 환경에 소프트웨어 설치 가능 
• 대체성 : 동일한 목적을 위해서 다른 소프트웨어를 대신해 사용
• 공존성 : 자원을 공유하는 환경에서 다른 소프트웨어와 공존

 

 

UI 프로토타입

 

ⓞ 개요

 

- 실제 동작하는 것처럼 만든 모형으로 테스트

- 간단하게(전체x) 핵심적인 기능을 포함

- 계속해서 개선하여 보완

- 실 사용자를 대상으로 테스트

 

ⓞ 장점

 

- 모형을 통해 테스트 하기 때문에 사용자를 설득하고 이해시키기 쉽다

- 요구사항과 기능의 불일치 예방, 개발 시간 단축

- 사전 오류 발견 가능

 

ⓞ 단점

 

- 프로토타입의 개선 및 보완 작업 때문에 작업 시간 증가, 자원 소모

- 중요한 작업이 생략될 가능성

 

ⓞ 종류

 

① 페이퍼 프로토타입

 

- 아날로그적인 방법

- 스케치, 그림, 글 등 직접 작성

- 기간이 짧고 비용이 적은 경우 빠른 협의가 필요한 경우 사용 

- 저렴한 비용, 대화하면서 작성 가능, 변경 용이, 고객의 과대한 기대x

- test하기 부적당, 상호관계가 많은 경우 표현하기 복잡, 공유 불편

 

② 디지털 프로토타입

 

- 프로그램을 사용해서 작성

- 숙련된 전문가 필요, 재사용 가능

- 최종 제품과 비슷하게 test 가능, 수정과 재사용 용이

- 사용법을 알아야 한다

 

ⓞ 계획시 고려사항 : 개발목적 확인, 필요환경 마련, 일정 고려(실제 분석 전), 인원

ⓞ 작성시 고려사항 : 작성계획, 범위, 목표, 기간, 비용, 참조가능여부 확인

 

ⓞ 제작단계

 

1단계 : 요구사항이 확정될 때까지 요구사항 분석

2단계 : 종이나 편집도구를 이용해 작성, 핵심 기능을 중심으로 개발

3단계 : 프로토타입을 사용자가 확인하고 추가, 수정 제안

4단계 : 수정, 합의가 이루어지는 단계, 보완작업

 

 

UI 설계서

 

• 요구사항을 바탕으로 UI 설계를 구체화하여 작성, 상세 설계 이전에 작성
• 기획자, 개발자, 디자이너와 원활한 의사소통을 위해 작성

ⓞ UI 설계서 작성 순서

 

1. UI설계서 표지 작성 : 프로젝트명 및 시스템명
2. UI설계서 개정 이력 작성 : 수정이력 포함, 초안 작성 version 1.0부터 0.1씩 증가
3. UI 요구사항 정의서 작성 : 요구사항을 정리한 문서
4. 시스템 구조 작성 : UI 요구사항과 UI 프로토타입을 기초로 전체적인 시스템 구조 설계
5. 사이트 맵 작성 : 한 눈에 알아 볼 수 있도록 메뉴별로 구분 후 표 형태로 작성
6. 프로세스 정의서 작성 : 사용자 관점에서 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리, UI 전체적 흐름 파악 가능
7. 화면 설계 : UI 프로토타입과 UI 프로세스를 참고하여 필요 화면을 페이지별로 설계

 

 

UI 유용성 평가

 

- 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성했는지 나타내는 척도

- UI의 주된 목적 : 유용성이 뛰어난 UI 제작

 

ⓞ 실행차를 줄이기 위한 UI설계 원리 검토(사용자 관점)

 

• 사용의도 파악 : 사용자의 목적 명확하게 파악( 불필요한 기능, 중복)
• 행위 순서 규정 : 행위 순서 세분화
• 행위의 순서대로 실행 : 프로세스의 흐름을 직접적으로 파악할 수 있도록 제공

 

ⓞ 평가차를 줄이기 위한 UI설계 원리 검토(개발자 관점)

 

• 수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도
• 키 조작으로 변화된 시스템이 상태를 사용자가 쉽게 인지하도록 유도 : 단순하고 쉽게 이해하도록 유도

 

UI 상세 설계

 

- UI 설계 + 세부적인 내용 → 시나리오 문서로 작성

 

ⓞ UI 시나리오 문서 개요 : 모든 화면의 자세한 설계 → 시나리오 문서로 작성

ⓞ UI 시나리오 문서 작성 원칙

 

• 계층구조(Tree), Flowchart 표기법으로 작성
• 공통 UI 요소와 인터랙션을 일반 규칙으로 정의
• 대표화면의 레이아웃과 기능 정의
• UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오 정의
• UI 시나리오 규칙 지정

 

ⓞ UI 시나리오 문서 작성을 위한 일반 규칙

 

• 주요 키의 위치와 기능 : 공통키의 위치, 기능
• 공통 UI 요소 ex. 체크 박스, 라디오 버튼, 텍스트 박스
• 기본 스크린 레이아웃 ex. title, ok
• 기본 인터랙션 규칙 : 조작방법, 실행, 이전, 다음 등 화면 전환 효과
• 공통 단위 태스크 흐름 ex. 삭제, 검색
• 케이스 문서 : 공통적으로 적용되는 시스템 동작 ex. 사운드, 조명

 

ⓞ UI 시나리오 문서의 요건

 

• 완전성 : 누락없이 상세하게 기술, 사용자 관점
• 일관성
• 이해성 : 쉽게 이해, 불분명한 표현x
• 가독성
• 수정 용이성 : 수정, 개선 용이
• 추적 용이성 : 변경사항 추적

 

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

 

• 요구사항, 의사소통에 대한 오류 감소
• 재작업 감소, 혼선 최소화
• 불필요한 기능 최소화
• 개발 비용 절감, 개발 속도 증가

 

감성공학

 

ⓞ 감성공학의 개념

 

• 인체의 특징과 감정을 제품설계에 최대한 반영시키는 기술
• 인간 중심 설계, 인간의 감성을 과학적으로 해석

 

ⓞ 감성공학 관련 기술

 

• 생체 측정 기술 : 인간공학, 인지공학, 인간특성
• 인간의 오감 센서 및 감성 처리 기술 : 사용자 인터페이스 실현 기술
• 감성 디자인 기술 : 산업디자인 
• 새로운 감성을 창출하기 위한 기술 : 가상현실로 인간에게 적합성 판단

 

ⓞ 감성공학의 접근 방법

 

• 1류 : 인간의 감성 이미지를 측정하는 방법 - 제품의 이미지 조사, 분석
• 2류 : 개인이 갖고 있는  이미지를 구체화하는 방법 - 개인성, 문화적 감성
• 3류 : 인간의 감각을 측정하고 수학적 모델을 구축하여 활용 

 

ⓞ HCI(Human Computer Interaction)

 

• 사람이 시스템을 편리하고 안전하게 사용하기 위해 연구, 개발하는 것
• 최적의 사용자경험(UX)을 만듦

 

ⓞ UX(User Experience)

 

• 주관성 : 개인적, 신체적, 인지적 특성에 따라 다름
• 정황성 : 같은 경험이더라도 상황이나 주변 환경에 영향을 받음
• 총체성 : 개인이 느끼는 총제적인 심리적, 감성적 결과