정보처리기사 실기 / ii - 화면 설계
실기 시험 준비
수제비 2023 참조
C1. UI 요구사항 확인
i. UI 요구사항 확인
A. UI 개념
- 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체
- UX는 UI를 포함
B. UI 유형
- CLI : 정적인 텍스트 기반 인터페이스 / 명령어를 텍스트로 입력
- GUI : 그래픽 반응 기반 인터페이스 / 그래픽 환경 기반
- NUI : 직관적 사용자 반응 기반 인터페이스 / 신체 부위 이용
- OUI : 유기적 상호 작용 기반 인터페이스 / 모든 사물이 입출력 장치
C. UI 분야
- 물리적 제어 분야 : 정보 제공과 기능 전달을 위한 하드웨어 기반
- 디자인적 분야 : 콘텐츠의 정확하고 상세한 표현과 전체적 구성
- 기능적 분야 : 사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능
D. UI 설계 원칙
- 직관성 : 누구나 쉽게 이해하고 쉽게 사용할 수 있어야함
- 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
- 학습성 : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작
- 유연성 : 사용자의 요구사항을 최대한 수용하고, 실수 방지
E. UI 설계 지침
- 사용자 중심 : 사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경 제공
- 일관성 : 버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠르게 습들 할 수 있도록
- 단순성 : 조작 방법은 가장 간단하게 작동되도록
- 결과 예측 가능 : 작동시킬 기능만 보고도 결과 예측 가능해야
- 가시성 : 주요 기능을 메인 화면에 노출하여 쉬운 조작 가능해야
- 표준화 : 디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용가능해야
- 접근성 : 사용자의 직무, 연령, 성별 등이 고려된 다양한 계층 수용해야
- 명확성 : 사용자가 개념적으로 쉽게 인지해야
- 오류 발생 해결 : 사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야
F. UI 요구사항 확인
1. UI 요구사항 개요
- 사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준
- 시스템 개발과정 전체에 대한 기준
2. UI 요구사항 구분
- 기능적 요구사항 : 시스템이 제공하는 기능, 서비스에 대한 요구사항
- 비기능적 요구사항 : 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항
3. UI 품질 요구사항(ISO/IEC 9126 기반)
- 기능성
- 실제 수행 결과와 품질 요구사항과의 차이를 분석, 시스템의 동작 관찰을 위한 품질 기준
- 기능성 상세 품질 요구사항
- 적절성 : 제품이 주어진 작업과 사용자의 목표에 필요 적절한 기능을 제공해 줄 수 있는 능력
- 정밀성 : 제품이 요구되는 정확도로 올바른 결과를 산출할 수 있는 능력
- 상호 운용성 : 제품이 특정 시스템과 상호 작용하여 운영될 수 있는 능력
- 보안성 : 비인가된 접근을 차단, 우연 또는 고의 접근 인지 대처 능력
- 호환성 : 제품이 비슷한 환경에서 연관된 표준, 관례 및 규정을 준수하는 능력
- 신뢰성
- 시스템이 일정한 시간 또는 동작 시간 동안 의도된 기능을 수행함을 보증하는 품질 기준
- 신뢰성 상세 품질 요구사항
- 성숙성 : 결함으로 인한 고장을 회피할 수 있는 능력
- 고장 허용성 : 결함이나 인터페이스 오류 시에도 특정 수준 이상의 성능을 유지할 수 있는 능력
- 회복성 : 고장 발생 시 영향을 받은 데이터를 복구, 성능의 수준을 다시 확보할 수 있는 능력
- 사용성
- 사용자와 컴퓨터 사이에 발생하는 행위를 정확하고 쉽게 인지할 수 있는 품질 기준
- 사용성 상세 품질 요구사항
- 이해성 : 논리적인 개념과 적용 가능성을 구분하는 데 필요한 사용자의 노력 정도에 따른 특성
- 학습성 : 학습에 필요한 사용자의 노력 정도에 따른 특성
- 운용성 : 운용 통제에 필요한 사용자의 노력 정도에 따른 특성
- 효율성
- 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준
- 효율성 상세 품질 요구사항
- 시간 효율성 : 기능을 수행하는 데 있어서 반응 시간, 처리 시간 및 처리율에 따른 특성
- 자원 효율성 : 기능을 수행하는 데 있어서 사용되는 자원의 양과 지속 시간에 따른 특성
- 유지보수성
- 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질 기준
- 유지보수성 상세 품질 요구사항
- 분석성 : 고장의 원인이나 결함 진단 또는 수정이 요구되는 부분의 확인에 필요한 노력 정도에 따른 특성
- 변경성 : 결함 제거 또는 환경 변화에 따른 수정에 필요한 노력 정도에 따른 특성
- 안정성 : 변경으로 발생하는 예상치 못한 영향에 의한 위험 요소에 따른 특성
- 시험성 : 변경되어 검증에 필요한 노력의 정도에 따른 특성
- 이식성
- 다른 플랫폼에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가에 대한 품질 기준
- 이식성 상세 품질 요구사항
- 적용성 : 고려된 소프트웨어의 목적을 위해 제공된 수단이나 다른 조치 없이 특정 환경으로 전환되는 능력에 따른 특성
- 설치성 : 특정 환경에 설치하는 데 필요한 노력의 정도에 따른 특성
- 대체성 : 특정 운용 환경하에서 동일한 목적 달성을 위해 다른 소프트웨어를 대신 사용할 수 있는 능력
ii. UI 지침
A. UI 지침 개념
- UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부사항을 규정하는 가이드라인
B. UI 표준 적용을 위한 환경 분석
- 사용자 트렌드 분석 : 현재 UI의 단점 파악 및 트렌드 숙지 / 핵심 요구 파악 / 쉬운 기능 위주로 기술 정의
- 기능 및 설계 분석
- 기능 조작성 분석 : 사용자 편의성 확대를 위한 조작 기능 확인
- 오류 방지 분석 : 사용자 조작 시 오류에 대해 예상 가능한지 확인
- 최소한의 조작으로 업무 처리 가능 여부 확인 : 조작 단계를 최소화하고 동선은 단순한지 확인
- UI의 정보 전달력 확인 : 정보 제공 방식이 일관적이면 쉽게 이해 가능한지 확인
C. UI 개발 목표 및 범위
1. UI 개발 목표 및 범위 정의
- 필수적으로 수행, 프로젝트 계획 전반에 반영
2. UI 개발을 위한 주요 기법
- 3C 분석 : 고객, 경쟁사, 자사를 비교 분석 후 경쟁 승리 방법 분석
- SWOT 분석 : 기업 내/외부 환경 분석 후 강점, 약점, 기회, 위협 요인을 규정하고 경영 전략 수립
- 시나리오 플래닝 : 불확실성이 높은 상황 변화를 사전 예측 후 시나리오를 설계하는 방법
- 사용성 테스트 : 사용자가 직접 제품을 사용, 미리 작성된 시나리오에 맞춰 과제 수행한 후 질문
- 워크숍 : 소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술들을 교환 검토
D. 사용자 분석 및 니즈 조사
- 트렌드, 경쟁사 동향을 통해 정의된 핵심 기능 관련, 타겟 고객층의 프로파일 기술 정의
- 리서치 대상 선정 및 내용 설계 : 대상 선정 및 계획 수립
- 리서치 진행 : 니즈를 파악하기 위해 다양한 의견 수집
- 리서치 결과 정리 : 핵심이슈 도출을 통해 UI 개발 목표 설정
E. 사용자 요구사항 도출
- 페르소나 정의 : 잠재적 사용자의 목적과 행동을 응집시켜 높은 가상 인물
- 콘셉트 모델 정의 : 여러 콘셉트들 사이의 관계를 보여주는 다이어그램
- 사용자 요구사항 정의 : 리서치 및 페르소나 결과 토대로 요구사항 도출, 우선순위 설정
- UI 컨셉션 : 정리된 내용으로 요구사항 구체화, 화면 설계
F. UI 상세 설계
- 시안을 토대로 실제 설계 및 구현을 위해 상세 설계
G. UI 화면 디자인
- 레이아웃, 컬러 패턴 등 정의
- 가이드 문서 작성
H. UI 시연을 통한 사용성 검토/검증
- 평가, 개선
I. 테스트, 배포 및 관리
- 실제 사용성 테스트 수행
iii. 스토리보드
A. 스토리보드 개념
- UI 화면 설계를 위해 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임, 기능에 대한 정의, DB 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서
- UI 화면 설계 구분
- 와이어프레임
- 이해 관계자들과의 화면 구성을 협의하거나 서비스의 흐름을 공유하기 위해 레이아웃 설계
- 파워포인트 / 키노트 / 스케치 / 일러스트
- 스토리보드
- 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 모든 정보가 담긴 설계 산출물
- 파워포인트 / 키노트 / 스케치
- 프로토타입
- 정적인 화면, 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션
- HTML / CSS
- 와이어프레임
B. 스토리보드 작성 절차
- 전체 개요 작성 : 문서명, 개정 이력 등 기재해야할 중요사항 등에 대한 전반적인 개요 명시
- 서비스 흐름 작성 : 메인 페이지로부터 각 서브 메뉴들이 어떤 화면을 거쳐서 진행되는지 보여주는 화면 작성
- 스타일 확정 : 레이아웃, 글자, 그래픽에서의 일관성을 유지해야하는 스타일 확정
- 메뉴별 화면 설계도 작성 및 상세 설명 : 각 화면에 대한 상세 설명 페이지 작성
- 추가 관련 정보 작성 : 메뉴별 화면 설명은 구체적, 이해 쉽게 설명
C. 스토리보드 작성 시 유의사항
- 일관된 기호의 표시 : 내용 작성하는 방법, 기호, 번호 등에 일관된 방식 적용
- 공통 영역의 정의 : 상단 메뉴나 하단 내용 등 화면 내의 공통 영역은 페이지마다 같은 형태로 구성
- 영역별 세부 설계 : 각 영역을 명확히 구분, 세부적인 설명 기술
- 버전 업 관리 : 갱신 시 버전과 날짜를 기록하여 효율적인 관리
iV. UI 프로토타입 제작 및 검토
A. 프로토타입 개념
- 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 더 이해하고 결정하기 위해 전체적인 기능을 간략한 형태로 구현한 시제품
B. 프로토타입의 의의
- 사전에 제작하고 이를 기반으로 적정성 평가, 수정 보안으로 추후 발생 가능한 오류들을 사전에 방지
C. UI 프로토타입 유형
- 아날로그 / 디지털 (키노트, UX pin, HTML)
C2. UI 설계
i. UI 설계를 위한 UML
A. UML
1. UML(Unified Modeling Language)의 개념
- 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
- 방법론을 통합한 것, 표준화된 모델링 기법 제공
2. UML 특징
- 가시화 언어 : 개념 모델 작성 시 오류가 적고 의사소통 용이
- 구축 언어 : 다양한 프로그래밍 언어로 실행 시스템의 예측 가능
- 명세화 언어 : 정확한 모델 제시, 완전한 모델 작성 가능
- 문서화 언어 : 시스템에 대한 평가 및 의사소통의 문서
3. UML의 구성요소
- 사물 : 추상적인 개념으로, 주제를 나타내는 요소
- 관계 : 사물의 의미를 확장하고 명확히 하는 요소, 사물과 사물 연결하여 관계 표현
- 다이어그램 : 사물과 관계를 모아 그림으로 표현
4. UML 다이어그램
- 정적(구조적) 다이어그램
- 클래스 : 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계 표현
- 객체 : 클래스에 속한 객체들, 인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현
- 컴포넌트 : 시스템을 구성하는 컴포넌트와 그들 사이의 의존 관계를 나타냄
- 배치 : 컴포넌트 사이의 종속성을 표현, 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치 표현
- 복합체 구조 : 클래스나 컴포넌트가 복합 구조를 갖는 경우 내부 구조 표현
- 패키지 : 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계 표현
- 동적(행위적) 다이어그램
- 유스케이스 : 시스템이 제공하고 있는 기능 및 관련 외부 요소를 사용자 관점에서 표현
- 시퀀스 : 객체 간 동적 상호 작용을 시간적 개념을 중심으로 메시지 흐름 표현
- 커뮤니케이션 : 동작에 참여하는 객체들이 주고 받는 메시지 표현, 객체 간 연관 관계 표현
- 상태 : 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태변화 표현
- 활동 : 시스템이 어떤 기능을 수행하는지를 처리 로직이나 조건에 따른 흐름 순서대로 표현
- 타이밍 : 객체 상태 변화와 시간 제약을 명시적 표현
5. UML 확장 모델의 스테레오 타입
- 기본 요소 이외 새로운 요소 만들어 내기 위한 확장 메커니즘
- ’<<>>’ (길러멧) 으로 표현
- <<include>> : 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계
- <<extend>> : 하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도 있고, 아닐수도 있는 확장 관계
- <<interface>> : 모든 메서드가 추상 메서드, 바로 인스턴스 생성 불가 클래스로 추상 메서드와 상수만으로 구성된 클래스
- <<entity>> : 정보 또는 오래 지속될 행위를 형상화하는 클래스로 유스케이스 처리 흐름이 수행 과정에서 기억 장치에 저장 되어야 할 정보를 표현하는 클래스
- <<boundary>> : 시스템과 외부 액터와의 상호 작용을 담당하는 클래스
- <<control>> : 시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스
B. UML의 유형
1. 클래스 다이어그램
- 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적 관계를 표현
- 구성 요소
- 클래스 : 공통의 속성, 메서드, 관계, 의미를 공유하는 객체들의 집합
- 속성 : 클래스의 구조적 특성에 이름을 붙인 것
- 메서드 : 이름, 타입, 매겨변수들과 연관된 행위를 호출하는데 요구되는 제약사항들을 명시하는 클래스의 행위적 특징
- 접근 제어자
- 클래스에 접근할 수 있는 정도를 표현
- - : private
- + : public
- # : protected
- ~ : default
- 클래스 간의 관계
- 연관(Association) 관계 : 클래스가 서로 개념적으로 연결된 선, 2개 이상의 사물이 서로 관련되어 있는 상태 표현
- 의존(Dependency) 관계 : 하나의 클래스가 또 다른 클래스를 사용하는 관계, 다른 클래스의 멤버 함수 사용
- 일반화(Generalization) 관계 : 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지 표현
- 실체화(Realization) 관계 : 추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메서드를 구현할 때 사용
- 포함(Composition)(복합) 관계 : 영구적이고, 집합 관계보다 더 강한 관계
- 집합(Aggregation) 관계 : 하나의 사물이 다른 사물에 포함되는 관계, 하나의 객체에 여러 독립 객체들이 구성됨
2. 유스케이스 다이어그램
- 시스템이 제공하고 있는 기능 및 관련된 외부 액터를 사용자 관점에서 표현
- 구성 요소
- 유스케이스 : 시스템이 제공해야 하는 서비스, 기능
- 액터 : 사용자가 시스템에 대해 수행하는 역할
- 시스템 : 전체 시스템 영역 표현
- 시나리오 : 발생되는 이벤트의 흐름
- 이벤트의 흐름 : 사람, 시스템, 하드웨어, 시간에 의해 시작
- 유스케이스 다이어그램 관계
- 포함(Include) 관계 : 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행되는 관계, 여러 유스케이스에서 공통적으로 발견되는 기능 표현
- 확장(Extend) 관계 : 여러 유스케이스에 걸쳐 중복적으로 사용되지 않고, 특정 조건에서 한 유스케이스로만 확장되는 관계
- 일반화(Generalization) 관계 : 추상적인 액터와 더 구체적인 액터 사이에 맺어주는 관계
3. 시퀀스 다이어그램
- 객체 간 상호 작용을 메시지 흐름으로 표현한 다이어그램
- 구성 요소
- 객체 : 위쪽에 표시, 아래로 생명선. 객체는 사각형 안 밑줄 친 이름으로 표현
- 생명성 : 객체로부터 뻗어 나가는 점선, 실제 시간 흐름에 따라 생명주기 동안 발생하는 이벤트 명시
- 실행 : 직사각형은 함수가 실행되는 시간 의미, 직사각형이 길수록 수행시간 김
- 메시지 : 객체에서 객체로 메시지를 전달, 전달받은 객체의 함수 실행
4. 패키지 다이어그램
- 시스템의 서로 다른 패키지들 사이의 의존 관계를 표현
- 구성 요소
- 패키지 : 요소들을 그룹으로 조직하기 위한 요소 (폴더 모양=패키지)
- 의존관계 : 하나의 패키지가 다른 패키지를 사용하는 관계
5. 활동 다이어그램
- 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현
- 구성 요소
- 시작점 : 활동의 시작 의미 / 검은 원
- 전이 : 실행의 흐름 / 화살표
- 액션/액티비티 : 어떠한 일들의 처리와 실행 / 둥근 사각형
- 종료점 : 처리의 종료 / 검은 원 포함한 원
- 조건(판단) 노드 : 조건에 따른 제어 흐름의 분리 표현 / 마름모
- 병합 노드 : 여러 경로의 흐름이 하나로 합쳐진 것 표현 / 마름모
- 포크 노드 : 평행적으로 수행되는 흐름을 나누는 노드 / 굵은 가로선
- 조인 노드 : 포크 노드로 나눠진 흐름을 다시 하나로 합치는 노드 / 굵은 가로선
- 구획면 : 액티비티 수행을 담당하는 주체를 구분하는 면
6. 상태 다이어그램
- 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변하는지 표현
- 구성 요소
- 상태 : 객체가 존재할 수 있는 조건 중 하나 / 둥근 사각형
- 시작 상태 : 객체의 시작 상태 / 꽉찬 검은 원
- 종료 상태 : 객체의 종료 상태 / 이중 검은 원
- 전이 : 객체의 상태가 다른 상태로 변경되는 상태 / 화살표
- 이벤트 : 객체의 전이를 유발하는 자극 / 이벤트 = 시간 흐름, 조건 외부 신호 등
- 전이 조건 : 특정 조건 만족 시 전이 발생
7. 커뮤니케이션 다이어그램
- 시퀀스 다이어그램과 같이 동작에 참여하는 객체들이 주고받는 메시지 표현, 객체 간 연동관계까지 표현
- 구성 요소
- 액터 : 시스템으로부터 서비스를 요청하는 외부 요소
- 객체 : 메시지를 주고 받은 주체
- 링크 : 클래스 간 관계 표현
- 메시지 : 객체가 상호작용을 위해 주고받는 메시지
8. 컴포넌트 다이어그램
- 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계 표현
- 구성 요소
- 컴포넌트 : 탭이 달린 직사각형으로 표현
- 인터페이스 : 인터페이스를 실체화한다는 의미는 실제로 동작하는 컴포넌트 안에 인터페이스를 적용한 다는 뜻
- 의존 관계 : 컴포넌트 사이의 의존 관계 표현
ii. UI 설계 도구
A. UI 설계 도구의 개념
- 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근 목적으로 만들어진 물리적, 가상적 매개체인 UI 설계 지원 도구
B. UI 개발 단계별 활용 가능한 설계 도구
- 분석 : UI 패턴, UI 모델링
- 설계 : UI 설계
- 구현 : 프로토타이핑 툴
C. UI 설계 도구의 유형
1. 화면 설계 도구
- 파워 목업 : 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴
- 발사믹 목업 : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구
- 카카오 오븐 : 카카오에서 제작한 온라인 프로토타이핑 도구
2. 프로토타이핑 도구
- UX핀 : 웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구
- 액슈어(AXURE) : UI 설계보다는 스토리보드에 포함되는 정책, 플로우 차트, 디스크립션까지 모두 작성 가능한 도구
- 네이버 프로토나우 : 네이버에서 만든 프로토타이핑 툴
3. UI 디자인 도구
- 스케치 : 다양한 목업, 템플릿 활용한 레이아웃 중심의 UI 디자인 설계 도구
- 어도비 익스피리언스 디자인 CC : UI 디자인에 최적화된 툴, 쉽고 직관적
4. UI 디자인 산출물로 작업하는 프로토타이핑 도구
- 인비전 : 포토샵, 스케치 등으로 디자이너 작업물 업로드, UI 연결 후 간단한 인터랙션 적용 도구
- 픽사에이트 : 구글이 인수한 프로토타이핑 툴
- 프레이머 : 커피 스크립트라고 하는 개발 언어 사용하는 코드 기반 도구
중요할 것 같은거
UI 설계 원칙
UI 유형
UI 요구사항 구분
UI 화면 설계 구분
UML 다이어그램
어차피 추후 기출문제 풀면서 어떤 식으로 출제되나 확인하고 요약할 것이지만
그래도 추려보자면 저 정도가 될 것 같다.
이 블로그는 저작권자의 CC BY 4.0 라이센스를 따릅니다.