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

01 UI 요구사항 확인

▶ UI 설계 원칙(직유학유)

⦁  직관성(Intuitiveness) : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 한다.

⦁  유효성(Efficiency) : 정확하고 완벽하게 사용자의 목표가 달성 될 수 있도록 제작한다.

⦁  학습성(Learnability) : 모두가 쉽게 배우고 사용할 수 있어야 한다.

⦁  유연성(Flexibility) : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작

 

▶ UI 설계 지침

⦁  단순성 : 조작 방법은 가장 간단하게 작동되도록 해 인지적 부담 최소화

⦁  가시성 : 주요 기능을 메인 화면에 노출해 쉬운 조작이 가능해야 함

⦁  일관성 : 사용자가 기억하기 쉽고 빠르게 습득할 수 있도록 설계

⦁  명확성 : 사용자가 개념적으로 쉽게 인지해야 함

 

▶ UI 품질 요구사항(ISO/IEC 9126 기반)

⦁  기능성(Functionality) : 적절성, 정밀성, 상호 운용성, 보안성, 호환성

⦁  신뢰성(Reliability) : 성숙성, 고장 허용성, 회복성

⦁  사용성(Usability) : 이해성, 학습성, 운용성

⦁  효율성(Efficiency) : 시간 효율성, 자원 효율성

⦁  유지보수성(Maintainability) : 분석성, 변경성, 안정성, 시험성

⦁  이식성(Portability) : 적용성, 설치성, 대체성

 

▶ UI 개발을 위한 주요 기법

⦁  3C 분석 : 고객(Customer), 자사(Company), 경쟁사(Competitor) 비교하고 분석

⦁  SWOT 분석 : 기업 내부 환경과 외부환경을 분석해 Strength, Weakness, Opportunity, Threat 요인을 규정하고 이를 토대로 경영 전략 수립

⦁  시나리오 플래닝 : 상황 변화를 사전에 예측하고 다양한 시나리오 설계하는 방법

⦁  사용성 테스트(Usability Test) : 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행 한 후, 질문에 답하도록 하는 테스트

 

▶ UI 화면 설계 구분

⦁  스토리 보드 : 정책, 프로세스, 와이어 프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 정보가 수록된 문서, 디자이너와 개발자가 최종적으로 참고하는 산출 문서

⦁  와이어 프레임 : 화면 단위의 레이아웃을 설계한는 작업

⦁  프로토타입 : 정적인 화면(와이어 프레임, 스토리보드)에 동적 효과를 적용해 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형

 

 

02 UI 설계

▶ UML(Unified Modeling Language)

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

 

▶ UML의 구성요소

사물, 관계, 다이어그램

 

▶ UML 다이어그램

◇ 구조적(Structural) 다이어그램 / 정적(Static) 다이어그램

⦁  클래스 : 클래스의 속성 및 연산과 클래스 간 정적 관계를 표현한 다이어그램

⦁  객체 : 클래스에 속한 사물, 인스턴스

⦁  컴포넌트 : 컴포넌트와 그들 사이의 의존 관계

⦁  배치(Deployment) : 컴포넌트 사이의 종속성, 물리적 요소들의 위치

⦁  복합체 구조(Composite Structure) : 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램

⦁  패키지 : 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계, 서로 다른패키지들 사이의 의존 관계 표현

 

◇ 행위적(Behavioral) 다이어그램/ 동적(Dynamic) 다이어그램

⦁  유스케이스 : 시스템이 제공하고 있는 기능 관련된 외부 요소를 사용자의 관점에서 표현

⦁  시퀀스(Sequence) : 객체 간 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현

⦁  커뮤니케이션 : 동작에 참여하는 객체들이 주고받는 메시지, 객체 간의 연관

⦁  상태(State) : 상호작용에 따라 상태가 어떻게 변화하는지

⦁  활동(Activity) : 어떤 기능을 수행하는지, 객체의 처리 로직, 조건에 따른 처리의 흐름

⦁  타이밍 : 객체 상태 변화와 시간 제약을 명시적으로 표현

 

▶ UML/클래스 간의 관계

⦁  연관 관계

⦁  집합 관계 : 하나의 객체에 여러 개의 독립적인 객체들이 구성

⦁  복합 관계 : 영구적, 집합 관계보다 더 강한 관계

⦁  일반화 관계 : 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지 표현

⦁  의존 관계 : 하나의 클래스가 또 다른 클래스 사용

 

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

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