[정보처리기사 실기] 2. 화면 설계

이번 시간은 정보처리기사 실기에서 다루는 2장 화면 설계에 대해서 정리를 해보았습니다.

 

* 이 글은 정보처리기사 공부 목적으로 쓴 글입니다. 그러다 보니 혹시 제가 잘못 작성한 부분이 있거나 수정이 필요하다면 댓글로 알려주시면 감사하겠습니다. 

 

 

 

UI	사용자와 시스템 사이의 매개체
UI 유형	CGNO 1. CLI : 텍스트(명령어) 기반 2. GUI : 그래픽 기반 (마우스, 펜) 3. NUI : 신체 부위 이용 (터치, 음성) 4. OUI : 유기적 상호작용 기반 인터페이스 (모든 사물이 입출력장치로 변화)
UI 설계 원칙	직유학유 1. 직관성 : 누구나 쉽게 이해하고 쉽게 사용! 2. 유효성: 사용자 목표가 달성될 수 있어야 함! 3. 학습성: 쉽게 배울 수 있다! 4. 유연성: 인터렉션을 최대한 포용
UI 설계 지침	사일단결 명표오접가 1. 사용자 중심 : 사용자가 이해하기 쉽도록 2. 일관성 : 조작법을 빨리 이해할 수 있도록 일관적으로 설계해야 함 3. 단순성 4. 결과 예측 가능 5. 명확성 : 개념적으로 인지하기 쉬어야 함 6. 표준화 : 디자인 표준으로 선행학습 이후 쉽게 사용할 수 있어야 함 7. 오류 발생 해결 : 오류 상황을 인지할 수 있어야 함 8. 접근성 : 연령, 성별 등 다양한 계층을 수용해야 함 9. 가시성 : 주요 기능은 메인 화면에 노출해야 함
UI 품질 요구사항 (ISO/IEC 9126 기반)	이신사유효기 1. 이식성: 다른 환경에도 잘 적응하는가? 이적설대   - 적용성: 다른 환경에도 잘 적용되고   - 설치성: 잘 설치되며   - 대체성: 다른 SW를 대체할 수 있는지 2. 신뢰성: 오류가 없거나 있더라도 괜찮은가? 신성고회   - 성숙성: 오류가 없고   - 고장허용성: 오류가 있어도 성능을 유지할 수 있고   - 회복성: 오류를 금방 회복할 수 있는지 3. 사용성: 쓰기 편한가? 사이학운   - 이해성: 이해하기 쉽고   - 학습성: 배우기 쉽고   - 운용성: 다루기 쉬운지 4. 유지보수성: 개선 및 확장이 쉬운가? 유분변안시   - 분석성: 결함이나 고장을 발견하기 쉽고   - 변경성: 수정하기 쉽고   - 안정성: 수정하더라도 안정적이고   - 시험성: 변경된 내용을 검증할 수 있는지 5. 효율성: 한정된 자원을 효율적으로 쓰는가? 효시자   - 시간반응성: 처리 속도가 빠르고   - 자원효율성: 적절한 자원을 제공하는지 6. 기능성: 요구사항을 정확하게 만족하며 기능하는가? 기적정상보호   - 적절성: 적절하고   - 정밀성: 정확하고   - 상호운용성: 상호 운용되고   - 보안성: 보안성 있고   - 호환성: 표준 잘 지키는지
UI 표준	액정 스패조 1. UX 원칙 정의 2. 정책 및 철학 설정 3. 스타일 가이드 정의 4. UI 패턴 모델 정의 5. 조직 구성
UI 개발을 위한 주요기법	- 3C 분석 : 고객(Customer), 자사(Company), 경쟁사(Competitor) 분석 - SWOT 분석 : 강점, 약점, 기회, 위협 요인을 분석 - 시나리오 플래닝 : 다양한 시나리오를 설계해 불확실성 제거 - 사용성 테스트 : 사용자가 직접 제품을 사용하며 과제 수행 - 워크숍 : 집단이 모여 지식, 아이디어를 교환하고 검토하는 연구회
사용자 요구사항 도출	페콘요컨 1. 페르소나 정의 2. 콘셉트 모델 정의 3. 요구사항 정의 4. UI 컨셉션
스토리보드	정책, 와이어프레임 등 구축하려는 서비스를 위한 정보가 수록된 문서
UI 화면 설계 구분	와스프 - 와이어프레임 : 화면 단위의 레이아웃 설계 - 스토리보드 : 와이어프레임 + 설명 - 프로토타입 : 와이어프레임(or 스토리보드) + 동적 효과
UML	표준화된 범용 모델링 언어
UML의 특징	가구명문 1. 가시화 언어 : 원활한 의사소통을 위해 가시화 2. 구축 언어 : UML → 소스코드 변환 가능 3. 명세화 언어 4. 문서화 언어
UML의 구성요소	사관다 1. 사물 2. 관계 3. 다이어그램
UML 스테레오 타입	UML 기본 요소 + 새로운 요소를 더한 확장 매커니즘 << >> (길러멧) 기호 사용 <<include>> : 어떤 시점에 반드시 다른 유스케이스를 실행함 <<extend>> : 어떤 시점에 다른 유스케이스를 실행할 수도 있고 아닐 수도 있음 <<abstract>> : 추상 클래스 (인스턴스 생성X, 공통 특징만 정의) <<interface>> : 모든 메서드와 상수가 추상인 클래스 <<entity>> : 정보 또는 행위를 표현하는 클래스 <<boundary>>: 상호작용을 담당하는 클래스 <<control>>: 로직 및 제어를 담당하는 클래스
UML 다이어그램	- 정적(구조적) 다이어그램 : 클객 컴배 복패 - 동적(행위적) 다이어그램 : 시유 커활 상타
정적 다이어그램 종류	클객 컴배 복패 1. 클래스 다이어그램 : 클래스 간 관계를 표현 2. 객체 다이어그램 : 객체 간 관계 표현 3. 컴포넌트 다이어그램 : 컴포넌트 간 관계를 표현 *구현 단계에서 사용 4. 배치 다이어그램 : 물리적 요소의 위치 표현 *구현 단계에서 사용 5. 복합체 구조 다이어그램 : 복합 구조인 경우 그 내부 표현 6. 패키지 다이어그램 : 패키지 간 관계 표현
동적 다이어그램 종류	시유 커활 상타 1. 시퀀스 다이어그램 : "시간적 개념" 중심으로 메시지 표현 2. 유스케이스 다이어그램 : 사용자 관점에서 표현 3. 커뮤니케이션 다이어그램 : 객체들이 주고 받는 메시지와, 상호작용(객체 간 연관)까지 표현 4. 활동 다이어그램 : 시스템이 수행하는 활동을 표현 5. 상태 다이어그램 : 객체의 상태와 상태 변화를 표현 6. 타이밍 다이어그램 : 객체의 상태 변화와 시간 제약을 표현
클래스 다이어그램	클래스의 속성(변수), 연산(메서드), 클래스 간 관계를 표현한 다이어그램 - 속성 : 클래스의 구조적 특성 (인스턴스가 보유 가능한 값의 범위) - 접근 제어자 : 접근 가능한 정도
클래스의 접근 제어자	1. public + : 외부 모든 클래스에서 접근 가능 2. protected # : 동일 패키지(하위 클래스 포함)일 때 접근 가능 3. default ~ : 자바 전용. 접근 제어자 명시가 없을 때, 동일 패키지(하위 클래스 포함) 또는 파생 클래스에서 접근 가능 4. private : 같은 클래스 내에서만 접근 가능
클래스 간 관계	연의집 포일실 1. 연관(Association): 관련되어 있어                                              // <- -> (양방향은 화살표 생략) 2. 의존(Dependency): 클래스가 다른 클래스 사용                         // <・・ ・・> 3. 집합(Aggeregation): 포함하지만 독립적 [부분-◇전체]             // ◇- -◇ 4. 포함(Composition): 포함하고 생명주기를 함께 해                     // ◆- -◆ 5. 일반화(Generalization): 일반적인지 구체적인지 [구체-▷일반]  // ◁- -▷ 6. 실체화(Realization): 기능으로 묶인 관계야                               // ◁・・ ・・▷
컴포넌트 다이어그램	컴포넌트와 컴포넌트 간 관계를 표현한 다이어그램 - 컴포넌트 : 탭 2개가 달린 직사각형 + 이름
패키지 다이어그램	패키지 관계를 표현한 다이어그램 - 패키지 : 폴더 형태
시퀀스 다이어그램	"시간적 개념" 중심으로 메시지 흐름을 표현한 다이어그램 - 생명선 : - - - - - - 실행 : - - [ ] - - (함수 실행시간)
유스케이스 다이어그램	사용자 시점에서 표현한 다이어그램 - 유스케이스 : 찌그러진 원형 - 액터 : ㅇ<-<
커뮤니케이션 다이어그램	객체들이 주고받는 메시지와, 상호작용(객체 간 연관)까지 표현한 다이어그램 - 객체 : 사각형 (객체명:클래스명 으로 표현) - 메시지 : → 로 표현
활동 다이어그램	시스템의 처리 활동을 순서대로 표현한 다이어그램 - ● : 시작점 - ◉ : 종료점 - 조건 노드, 병합 노드, 포크 노드
상태 다이어그램	객체의 상태와 상태 변화를 표현한 다이어그램 - ● : 시작점 - ◉ : 종료점 - 전이, 전이 조건, 이벤트
UI 시나리오 문서 작성 요건	완일이가 추수 1. 완전성 : 누락 없이 최대한 상세하게! 2. 일관성 : 요구사항은 일관적! UI도 일관적으로! 3. 이해성 : 이해하기 쉬워야 함! 4. 가독성 : 쉽게 읽혀야 함! 5. 추적 용이성 : 변경사항을 알아보기 쉬워야 함! 6. 수정 용이성 : 쉽게 수정할 수 있어야 함!
UI 설계 도구	화면 설계 도구   - 파워 목업 (파워포인트+목업 기능)   - 발사믹 목업 (스케치 St.)   - 카카오 오븐 프로토타이핑 도구   - UX핀   - 액슈어 (디스크립션까지 작성 가능)   - 네이버 프로토나우 UI 디자인 산출물로 작업하는 프로토타이핑 도구   - 인비전 (시안 업로드 후 인터랙션 적용)   - 픽사에이트 (구글이 인수, 모바일 앱 최적화)   - 프레이머 (커피스크립트 기반)