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

2. 화면 설계

 

UI와 UX

 

• UI: 사용자 인터페이스, 사용자와 시스템 사이에서 의사소통할 수 있도록 도와주는 것
• UX: 사용자 경험, 사용자가 서비스를 직접적, 간접적으로 경험한 것

 

 

UI 유형

 

• CLI: 정적인 텍스트 기반 인터페이스
• GUI: 그래픽 반응 기반 인터페이스
• NUI: 직관적 사용자 반응 기반 인터페이스, 키보드나 마우스 없이 신체부위 이용
• OUI: 유기적 상호작용 기반 인터페이스, 현실에 존재하는 모든 사물

 

 

UI 설계 원칙

 

• 직관성: 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 한다.
• 유효성: 정확하고 완벽하게 사용자의 목표가 달성되어야 한다.
• 학습성: 모두가 쉽게 배우고 사용할 수 있어야 한다.
• 유연성: 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작되어야 한다.

 

 

UI 설계 지침

 

• 단순성: 조작 방법은 가장 간단하게 작동되도록 해야 한다.
• 가시성: 주요 기능을 메인 화면에 노출해 쉬운 조작이 가능해야 한다.
• 일관성: 사용자가 기억하기 쉽고 빠르게 습득할 수 있도록 설계되어야 한다.
• 명확성: 사용자가 개념적으로 쉽게 인지해야 한다.

 

 

UI 품질 요구사항

 

• 기능성: 적절성, 정밀성, 상호 운용성, 호환성
• 신뢰성: 성숙성, 고장 허용성, 회복성
• 사용성: 이해성, 학습성, 운용성
• 효율성: 시간 효율성, 자원 효율성
• 유지보수성: 분석성, 변경성, 안정성, 시험성
• 이식성: 적용성, 설치성, 대체성

 

 

UI 개발을 위한 주요 기법

 

• 3C 분석: 고객(Customer), 자사(Company), 경쟁사(Competitor) 비교 분석
• SWOT 분석: 기업의 내부, 외부 환경을 분석해 Strength, Weakness, Opportunity, Threat 요인 규정하고 이를 토대로 경영 전략 수립
• 시나리오 플래닝: 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법
• 사용성 테스트: 최종 고객인 사용자가 쓰기에 편한지 여부를 확인하는 테스트
• 워크숍: 특정 인원이 문제에 대해 토론하는 연구회 및 세미나

 

 

UI 화면 설계 구분

 

1. 스토리보드

• 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
• 디자이너와 개발자가 최종적으로 참고하는 산출 문서

 

2. 와이어 프레임

• 화면 단위의 레이아웃을 설계하는 작업

 

3. 프로토타입

• 실제 구현된 것처럼 시뮬레이션할 수 있는 모형

 

 

UML

 

객체지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어

 

 

UML의 구성 요소

 

• 사물
• 관계
• 다이어그램

 

 

UML 다이어그램 (자세한 내용 그림으로 보면서 공부하는 것이 중요)

 

1. 구조적 다이어그램 / 정적 다이어그램

• 클래스: 클래스의 속성 및 연산과 클래스 간 정적 관계를 표현한 다이어그램
• 객체: 클래스에 속한 사물, 인스턴스
• 컴포넌트: 컴포넌트와 그들 사이의 의존 관계
• 배치: 컴포넌트 사이의 종속성, 물리적 요소들의 위치
• 복합체 구조: 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램
• 패키지: 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계, 서로 다른 패키지들 사이의 의존 관계 표현

 

2. 행위적 다이어그램 / 동적 다이어그램

• 유스케이스: 시스템이 제공하고 있는 기능 관련된 외부 요소를 사용자의 관점에서 표현
• 시퀀스: 객체 간 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현
• 커뮤니케이션: 동작에 참여하는 객체들이 주고받는 메시지, 객체 간의 연관
• 상태: 상호작용에 따라 상태가 어떻게 변화하는지
• 활동: 어떤 기능을 수행하는지, 객체의 처리 로직, 조건에 따른 처리의 흐름
• 타이밍: 객체 상태 변화와 시간 제약을 명시적으로 표현

 

 

UI 시나리오 문서의 작성 요건

 

• 완전성
• 일관성
• 이해성
• 가독성
• 추적 용이성
• 수정 용이성

 

 

추가

 

• 추상 클래스: 객체를 생성하지 않고 클래스들의 공통된 특징을 정의한 클래스
• 프로토타이핑 도구: UX핀, 액슈어, 네이버 프로토나우

 

 

Next

3. 데이터 입출력 구현