일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- naver
- 정보처리기사 요약정리
- 정보처리기사
- 정처기 필기
- 코틀린
- 정처기
- 안드로이드
- 개발자
- 정보처리기사 필기
- 코틀린강의
- 코틀린 배우기
- 코틀린기초
- 정보처리기사 내용정리
- Kotlin
- 코틀린 강의
- 정처기 정리
- 코틀린배우기
- 부스트코스
- 정처기 요약
- 부스트코스 서포터즈
- IT
- boostcourse
- 백엔드
- 정보처리기사 요약
- 코틀린 기초
- edwith
- 큐버
- 한이아지
- kkuber
- 정보처리기사 정리
- Today
- Total
초보 개발자의 성장기
한이아지와 함께하는 정보처리기사 1과목 2번째) 화면 설계 본문
이번에는 1과목 2번째 부분은
화면설계에 대해서 정리해보겠습니다!
(☆ 중요도 0.5 / ★ 중요도 1)
PART1. 소프트웨어 설계
- Chap01) 요구사항 설계
- 현행 시스템 분석
- 요구사항 확인
- 분석 모델 확인
- Chap02) 화면설계
- UI 요구사항 확인
- UI 설계
- Chap03) 애플리케이션 설계
- 공통 모듈 설계
- 객체지향 설계
- Chap04) 인터페이스 설계
- 인터페이스 요구사항 확인
- 인터페이스 대상 식별
- 인터페이스 상세 설계
Chap02) 화면 설계
1. UI 요구사항 확인
1.1. UI 개요 (★★★)
UI란?
UI는 넓은 의미에서 사용자와 시스템 사이에서 의사 소통할 수 있도록 고안된 물리적 · 가상적 매개체
좁은 의미로는 정보기기나 소프트웨어 화면 등에서 사람이 접하게 되는 화면
UI 유형 : CGNO (이 영화는 CG가 NO)
- CLI : 정적인 텍스트 기반 인터페이스, 명령어를 텍스트 형태
- GUI : 그래픽 반응 기반 인터페이스, 아이콘이나 메뉴를 마우스를 선택하여 작업을 수행
- NUI : 직관적 사용자 반응 기반 인터페이스, 사용자의 말이나 행동으로 기기를 조작
- OUI : 유기적 상호작용 기반 인터페이스, 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스
UI 분야 : 물디기
- 물리적 제어 분야
- 디자인적 분야
- 기능적 분야
UI 설계 원칙 : 직유학유 (직접 사는 우유 학교에서 주는 우유)
직관성, 유효성, 학습성, 유연성
UI 설계 지침 : 사일단결가표접명오
사용자 중심, 일관성, 단순성, 결과예측가능, 가시성, 표준화, 접근성, 명확성, 오류발생해결
1.2. UI 표준 (★)
UI 표준 및 지침
UI 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용, 화면 구성 그리고 화면 이동이 포함
UI 지침 : UI요구사항 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야할 공통 조건
WEB의 3요소 : 표접호
웹 표준 : 웹 사이트 작성 시 HTML, CSS, JS 등에 대한 규정, 웹 페이지가 어떤 플랫폼에서도 구현되도록 제작하는 기법
웹 접근성 : 누구나 어떤 환경에서도 웹 세이트에서 제공하는 모든 정보를 접근할 수 있도록 보장하는 것
웹 호환성 : 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공하는 것
UI 스타일 가이드 구성
① UI 구동 환경 정의 : OS, 웹 브라우저, 모니터 해상도, 프레임 세트 확인
② 레이아웃 정의 : 기본 배치는 크게 상단, 왼쪽, 콘텐츠 3개 부분으로 설계 (하단 메뉴 구성은 상황에 맞게)
③ 메뉴 네비게이션 정의 : 메뉴 구조에 따라 적당한 타입을 선택하여 적용
④ 기능정의 : 시스템 요구사항에 대한 개념 모델을 논리적 모델로 상세화
1.3. UI 지침 (☆)
UI 표준을 위한 환경 분석
- 사용자 트렌드 분석 : 현재 UI의 단점 및 트렌드 파악, 사용자의 요구사항 파악
- 기능 및 설계 분석 : 기능 조작성 분석, 오류 방지 분석, 최소한의 동작으로 업무 처리 가능 확인, UI 정보 전달력 확인
⒜ UI 개발 목표 및 범위
- 경영진의 UI 관련 개발 요구사항 조사 및 정의 : 경영진을 대상으로 심층 인터뷰를 통해 비즈니스 요구사항 정의
- 3C 분석 및 트렌드 분석 : 기존의 자사 제품과 타사 제품을 분석하는 마케팅적 관점으로 시장 이해
- 관계자 간 개발 목표 협의 : 부서 간, 내부 관계자간 개발 목표 협의, 디자인 및 개발 이슈가 많은 상황에서 필요
⒝ UI 개발을 위한 주요 기법
- 3C 분석 : 고객, 경쟁사, 자사를 비교 분석
- SWOT 분석 : 기업의 강점, 약점, 기회 그리고 위협 요인을 규정하고 경영 전략 수립
- 시나리오 플래닝 : 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계
- 사용성 테스트 : 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞춰 과제를 수행 후 질문에 답변
- 워크샵 : 소수 인원으로 특정 문제나 과제에 대해 의견을 교환하고 검토하는 세미나
⒞ 사용자 분석 및 니즈 조사
리서치 대상 선정 및 내용 설계 → 리서치 진행 → 리서치 결과 정리
⒟ 사용자 요구사항 도출
- 페르소나 : 잠재적 사용자의 다양한 목적과 관찰된 행동패턴을 정의해놓은 가상의 사용자
- 컨셉 모델 정의 : 여러 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램, 다양한 아이디어들을 시각화 가능
- 사용자 요구사항 정의 : 리서치 및 페르소나 결과물을 토대로 요구사항 도출
- UI 컨셉션 : 정의된 요구사항을 구체화, 화면 디자인 단계 전 대표 화면 설계를 진행
(정보 구조 설계 → 와이어 프레임 스케치 → 페이퍼 프로토타입을 통한 스토리보드 설계)
(e) UI 상세 설계 : UI 시나리오 문서 작성 (사용자 인터페이스의 기능 구조, 화면 간 인터렉션 흐름, 예외처리 정리)
UI 시나리오 문서 작성 원칙: 플로우 차트 표기법으로 작성, 인터렉션의 흐름 정의, 기능 별 상세 기능 시나리오 정의
UI 시나리오 문서 작성 요건 : 완일이가추수 (완일이가 쓴 추수용 기계가 용이했음)
완전성, 일관성, 이해성, 가독성, 추적 용이성, 수정 용이성
2. 화면 설계
2.1. UI 흐름 설계 및 상세 설계 (★☆)
UI 설계 프로세스 : 문사작컴인디 (문사 작업용 컴퓨터 인디요)
① 문제 정의 : 시스템의 목적 수립 및 문제 정의
② 사용자 모델 정의 : 시스템을 사용할 사용자의 특성을 파악하여 모델 정의
③ 작업 분석 : 해결해야 할 문제를 정의하고 사용자 특징을 세분화
④ 컴퓨터 오브젝트 및 기능 정의 : 분석한 작업을 컴퓨터의 어떤 사용자 인터페이스를 통해 표현할 지 정의
⑤ 사용자 인터페이스 정의 : 작업 모델을 기반으로 작업자가 예측한 대로 동작하도록 사용자 인터페이스 정의
⑥ 디자인 평가 : 분석한 작업에 맞게 설계되었는지, 사용자가 쓰기 쉽고 편리한 지 평가 (GOMS, 휴리스틱 사용)
UI 흐름 설계 : 기입유양 (문서 기입은 유(너)에게 양보할께)
화면에 표현할 기능 작성, 화면의 입력 요소 확인, 유스케이스 설계, 기능 및 양식 확인
2.2. UI 설계 도구 (★☆)
UI 설계 도구란?
사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구, 기획 단계에서 예시로 사용
ⅰ. 와이어프레임 : 기획 초기단계에서 제작하는 것으로 페이지에 대한 대략적인 레이아웃이나 UI 요소 등 뼈대를 설계
와이어프레임 툴) 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
ⅱ. 목업 : 와이어프레임보다 좀 더 실제 화면과 유사하게 만드는 정적인 형태의 모형
목업 툴) 파워 목업, 발사믹 목업 등
ⅲ. 스토리보드 : 와이어프레임에 콘텐츠에 대한 설명이나 페이지 간 이동 흐름을 정의한 문서이자
디자이너와 개발자가 최종적으로 참고하는작업 지침서(서비스 구축을 위한 모든 정보가 들어있음)
작성절차 : 전체 개요 작성 → 서비스 흐름 작성 → 스타일 확정 → 메뉴 별 화면 설계도 작성
유의사항 : 일관된 기호 표시, 공통 영역 정의, 영역 별 세부 설계, 버젼 업 관리
스토리보드 툴) 파워포인트, 키노트, 스케치, Axure 등
ⅳ. 프로토타입 : 와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 모형
프로토타입 툴) HTML/CSS, Axure, Flinto, 네이버 포로토나우, 카카오 오븐 등
ⅴ. 유스케이스 : 사용자 측면에서의 요구사항으로 목표를 달성하기 위한 내용을 작성, 프로젝트 초기에 작성하고 문서화
자연어로 작성된 사용자의 요구사항을 구조적으로 표현 (다이어그램 사용)
2.3. UI 요구사항 확인 (☆)
1) 목표 정의 : 사용자들을 대상으로 인터뷰를 하여 의견 수렴 후 비즈니스 요구사항을 정의
2) 활동 사항 정의 : 조사한 요구사항을 토대로 해야 할 활동 사항 정의
3) UI 요구사항 작성 : 여러 경로로 수집된 사용자의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성
4) 요구사항 요소 확인 : 파악된 요구사항 요소의 종류와 각각의 표현 방식 등을 검토
5) 정황 시나리오 작성 : 사용자 관점에서 시나리오 작성, 사용자가 목표를 달성 과정을 순차적으로 묘사, 기능 위주
6) 요구사항 작성 : 정황 시나리오를 바탕으로 작성
2.4. 품질 요구사항 (★★☆)
품질요구사항은 소프트웨어의 기능, 성능, 만족도 등 요구사항을 얼마나 충족하는 가를 나타내는 것
ISO/IEC 9126 국제 표준으로 소프트웨어 품질 특성과 평가를 위한 표준 지침을 따름
(1) 기능성 : 소프트웨어가 사용자의 요구사항을 만족하는 기능을 제공하는 정도
[정합성, 정확성, 상호 운용성, 보안성, 호환성]
(2) 신뢰성 : 소프트웨어가 요구된 기능을 정확하고 일관되게 수행하는 정도
[성숙성, 고장허용성, 회복성]
(3) 사용성 : 사용자가 정확하게 이해하고 사용하며 추후에 다시 사용하고 싶어하는 정도
[이해성, 학습성, 운용성, 친밀성]
(4) 효율성 : 할당된 시간, 한정된 자원으로 요구하는 기능을 얼마나 빨리 수행하는 지 확인하는 정도
[시간 효율성, 자원 효율성]
(5) 유지보수성 : 새로운 요구사항 발생 시 소프트웨어를 개선 · 확장할 수 있는 정도
[분석성, 변경성, 안정성, 시험성]
(6) 이식성 : 소프트웨어가 다른 환경에서도 쉽게 적용할 수 있는 정도
[적용성, 설치성, 대체성, 공존성]
2.5. UI 프로토 타입 제작 및 검토 (★)
UI 프로토 타입이란?
사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 테스트 모형
요구사항이 모두 반영될 때 까지 지속적으로 요구사항 반영, 실제 사용자를 대상으로 테스트
UI 프로토 타입 장 · 단점
- 장점 : 사용자를 이해시키고 쉬워 설득이 용이, 개발 시간 단축 가능, 사전에 오류 발견 가능
- 단점 : 지속적인 요구사항 반영으로 작업 시간 증가, 필요 이상의 자원 소모, 부분적으로 중요한 작업 생략 위험
UI 프로토 타입의 종류
- 페이퍼 프로토 타입 : 아날로그적 방법 (스케치, 그림 또는 글로 제작)
- 디지털 프로토 타입 : 디지털적 방법 (파워포인트르 중심으로 하고 아크로뱃, 비지오, 옴니그래프 활용하여 제작)
UI 프로토 타입 계획 시 고려사항
- 개발 목적을 확인
- 프로토 타입 일정은 아키텍처 확정 후 프로젝트 실제 분석 작업이 완료되기 전
- 아키텍처의 핵심이 되는 UI 요소를 프로토 타입의 범위로 잡음
- 분석, 설계, 개발, 테스트 등의 표준 가이드를 확정
UI 프로토 타입 작성 시 고려사항
- 작성 계획을 세움
- 범위나 리스크를 파악해 프로토 타입 제작 범위를 정함
- 목표 확인
- 최소한의 기간과 자원 확인
- 실제 개발에 참조될 수 있는 지 확인
UI 프로토 타입 제작 단계
1단계... 사용자 요구 사항 분석
2단계... 요구사항을 충족하는 프로토타입을 종이에 작성, 핵심적인 기능 위주로 개발
3단계... 작성된 프로토 타입이 잘 수행되고 있는 지 사용자가 확인
4단계... 작성된 프로토 타입을 기반으로 수정과 힙의를 진행 후 3단계 다시 수행
2.6. UI 설계서 작성 (★)
UI 설계서란?
UI 설계를 구체화하여 작성하는 문서
UI 설계서 작성 순서 : 표개요시사프화
① 표지 작성 : 프로젝트 명 or 시스템 명
② 개정 이력 작성 : UI 설계서가 수정될 때 마다 어떤 내용이 수정되었는 지 정리한 문서 (Ver 1.0을 시작으로 0.1 씩)
③ 요구사항 정의서 작성 : 사용자의 요구사항을 작성한 문서 (UI 적용 여부를 요구사항 별로 작성)
④ 시스템 구조 작성 : UI 요구사항 및 프로토 타입에 기초하여 전체 시스템의 구조를 설계
⑤ 사이트 맵 작성 : 시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 메뉴 별로 구분하여 설계
⑥ 프로젝트 정의서 작성 : 사용자 관점에서 프로세스를 작업 순서에 따라 작성 (UI 전체 흐름 파악 가능)
⑦ 화면 설계 : 프로토타입, 프로세스를 참고하여 화면을 페이지 별로 설계 (화면 별 고유 ID 부여, 스토리보드 형태)
2.7. HCI / UX / 감성공학 (★)
HCI란?
사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 개발, 연구하는 학문
UX란?
사용자가 시스템을 이용하면서 생각하는 모든 경험
감성공학이란?
인간의 감성을 정성적 · 정량적으로 측정 및 평가하고 과학적으로 분석하여 실제 제품 설계로 실현하는 공학
나가마치 미츠오 교수님의 감성 공학의 접근 방식
- 1류 접근 방법 : 의미 미분법, 인간의 감성을 표현하는 어휘를 이용하여 제품 이미지 조사하여 디자인 요소와 연계
- 2류 접근 방법 : 문화적 감성의 일부 반영, 개인이 가지고 있는 이미지를 구체화하는 방법
- 3류 접근 방법 : 기존의 감성적 어휘 대신 공학적인 방법으로 인간의 감각을 측정하고 수학적 모델로 구축
'IT 자격증 공부 > 정보처리기사' 카테고리의 다른 글
한이아지와 함께하는 정보처리기사 2과목 2번째) 통합 모듈 구현 (0) | 2021.01.29 |
---|---|
한이아지와 함께하는 정보처리기사 2과목 1번째) 데이터 입 · 출력 구현 (0) | 2021.01.25 |
한이아지와 함께하는 정보처리기사 1과목 4번째) 인터페이스 설계 (0) | 2021.01.08 |
한이아지와 함께하는 정보처리기사 1과목 3번째) 애플리케이션 설계 (0) | 2021.01.04 |
한이아지와 함께하는 정보처리기사 1과목 1번째) 요구사항 설계 (0) | 2020.12.28 |