[정보처리기사] 실기 2단원 '화면 설계' 정리

UI 유형

CLI (Command Line Interface)	정적인 텍스트 기반	명령어를 텍스트로 입력하여 조작
GUI (Graphical User Interface)	그래픽 반응 기반	마우스나 전자펜을 이용
NUI (Natural User Interface)	직관적 사용자 반응	키보드나 마우스 없이 신체부위를 이용 터치, 음성 포함
OUI (Organic User Interface)	유기적 상호 작용	모든 사물이 입출력 장치로 변화 가능

 

 

UI 설계 원칙 (직유학유)

- 직관성 (intuitiveness)

: 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함

- 유효성 (efficiency)

: 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작

 - 학습성(learnability)

: 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작

- 유연성 (flexibility)

: 사용자의 요구사항을 최대한 수용하고, 실수를 방지할 수 있도록 제작

 

 

 

UI 품질 요구사항(ISO/IEC 9126 기반) (기신사효유이)

1. 기능성  

             1) 적절성 : 필요 적절한 기능들을 제공해 줄 수 있는 소프트웨어 능력

             2) 정밀성 : 올바른 결과를 산출할 수 있는 능력

             3) 상호 운용성

             4) 보안성

             5) 호환성

 

2. 신뢰성 : 시스템이 일정한 시간 또는 작동되는 시간 동안 의도하는 기능을 수행함을 보증하는 품질기준

             1) 성숙성

             2) 고장 허용성

             3) 회복성

 

3. 사용성 : 행위를 정확하고 쉽게 인지할 수 있는 품질기준 (이학운)

                1) 이해성 : 소프트웨어의 논리적인 개념과 적용 가능성을 구분하는 데 필요한 사용자의 노력 정도에 따른 소프트웨어 특성

                2) 학습성 : 소프트웨어 애플리케이션 학습에 필요한 사용자의 노력 정도에 따른 특성

                3) 운용성 : 소프트웨어 운용과 운영 통제에 필요한 사용자의 노력 정도에 따른 특성

 

4. 효율성 : 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질기준

                1) 시간 효율성

                2) 자원 효율성

 

5. 유지보수성 : 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질기준
                      1) 분석성

                      2) 변경성

                      3) 안정성

                      4) 시험성

 

6. 이식성 : 다른 플랫폼에서도 많은 추가 작업없이 얼마나 쉽게 적용이 가능한가에 대한 품질기준

               1) 적용성(Adaptability) : 소프트웨어의 목적을 위해 다른 조치 없이 특정 환경으로 전환되는 능력에 따른 소프트웨어 특성 

               2) 설치성(Installability) : 특정 환경에 소프트웨어를 설치하는 데 필요한 노력의 정도에 따른 특성

               3) 대체성(Replaceability) : 특정 운용 환경하에서 동일한 목적 달성을 위해 다른 소프트웨어를 대신 사용할 수 있는 능력

 

 

 

UI 설계 지침

사용자 중심

일관성

단순성

결과 예측 가능

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

표준화

접근성

명확성

오류 발생 해결

 

 

 

UX(User Experience; 사용자 경험)

: 제품과 시스템, 서비스 등을 사용자가 직/간접적으로  경험하면서 느끼고 생각하는 총체적 경험

 

 

 

UI 개발을 위한 주요 기법

시나리오 플래닝

: 개발 프로젝트의 성공적인 수행을 위해서 내부 관계자에게 UI 개발 필요성 및 목표를 공유하고 개발 범위를 수립하기 위한 주요 기법들 중 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략 기법

 

SWOT 분석

: 기업의 내부 환경과 외부 환경을 분석하여 Strength(강점), Weekness(약점), Opportunity(기회), Threat(위협) 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법

 

3C 분석

: 고객(Customer), 경쟁하고 있는 자사(Company)와 경쟁사(Competitor)를 비교하고 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법

 

사용성 테스트

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

 

워크숍

: 소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을, 서로 교환하고 검토하는 연구회 및 세미나

 

 

 

사용자 요구사항 도출 순서

1. 페르소나 정의 : 가상의 사용자 설정

2. 콘셉트 모델 정의 : 아이디어 시각화, 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램

3. 사용자 요구사항 정의 : 요구사항 도출, 우선순위를 정함

4. UI 컨셉션 : 정리된 요구사항을 구체화하는 단계, 대표 화면 설계 진행

 

 

 

스토리보드

: UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서로,

디자이너와 개발자가 최종적으로 참고하는 산출문서

 

 

 

UI 시나리오 문서의 작성 요건 (완일이가 추수)

완전성 : UI 시나리오는 누락이 없어야 하고, 최대한 빠짐없이 가능한 상세하게 기술

            시스템 기능보다 사용자의 테스크에 초점을 맞춰 기술

일관성

이해성

가독성 : 문서를 쉽게 읽을 수 있어야 한다.

추적 용이성

수정 용이성

 

 

 

UI 화면 설계 기법

와이어 프레임 

: 이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업

프로토타입

: 컴퓨터 시스템이나 소프트웨어의 설게 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위해 전체적인 기능을 간략한 형태로 구현한 시제품

 

 

 

UI 흐름 절차

1. UI 설계안의 적정성 확인

2. 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토

3. 화면의 입력 요소를 통한 UI 요구사항 확인 

4. 유스케이스를 통한 UI 요구사항 확인 

5. 유스케이스 설계

6. 기능 및 양식 확인

 

 

 

프로토타이핑 도구

UX핀 

: 웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구,

구글 글라스에 포함한 다양한 디바이스 환경에 맞추어 설계가 가능하며, 다양한 목업 지원 가능

 

액슈어

: UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구

 

네이버 프로토나우

: 네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트 등의 기능 지원 가능 도구

 

 

 

UML(Unified Modeling Language)

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

 

 

 

UML 구성요소

사물(things) : 추상적인 개념으로, 주제를 나타내는 요소

                       단어의 관점에서 '명사' 또는 '동사'를 의미

 

관계 (relationships) : 사물의 의미를 확장하고 명확히 하는 요소

                                    단어의 관점에서 '형용사' 또는 '부사'를 의미

 

다이어그램 (diagrams) : 사물과 관계를 모아 그림으로 표현한 형태 (9가지)

 

 

 

UML 다이어그램

구조적(structural) / 정적(static) 다이어그램 (클객 컴배 복패)

1. 클래스 (class)

- 클래스 다이어그램 구성 요소 

클래스 : 공통의 속성, 연산 (매서드), 관계, 의미를 공유하는 객체들의 집합

속성 (attribute) : 인스턴스가 보유할 수 있는 값의 범위를 기술

연산 (operation), 매서드 : 객체에 요청하여 행동에 영향을 줄 수 있는 서비스

접근 제어자 (access modifier) : 클래스에 접근할 수 있는 정도를 표현 

                                                   - : 클래스 내부만 접근 허용

                                                   + : 클래스 외부만 접근 허용

                                                   # : 동일 패키지 / 파생 클래스에서 접근 가능

                                                   ~ : 동일 패키지 클래스에서 접근 가능

 

- 클래스 간의 관계

연관 (Association) 관계
의존 (Dependency) 관계	- 하나의 클래스가 또 다른 클래스를 사용하는 관계 ex) 청소 -> 청소부
일반화 (Generalization) 관계	- 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현 - 상속 관계라고 함
실체화 (Realization) 관계	- 추상 클래스나 인터페이스를 상속받아 자식클래스가 추상 메서드를 구현할 때 사용
포함/복합 (Composition) 관계	- 채워진 마름모로 표현
집합 (Aggregation) 관계 = 추상화 (Abstaction X)	- 하나의 객체에 여러 개의 독립적인 객체들이 구성 - 하나의 사물이 다른 사물에 포함

 

2. 객체 (object)

3. 컴포넌트 (component)

4. 배치 (deployment)

5. 복합체 구조 (composite structure)

6. 패키지 (package)

 

행위적(behavioral) / 동적(dynamic) 다이어그램 (유시커 상활타)

1. 유스케이스 (usecase)

 

2. 시퀀스 (sequence)

: 객체 간 상호 작용을 메시지 흐름으로 표현한 다이어그램

- 시퀀스 다이어그램 구성요소

객체 (object) : 객체는 위쪽에 표시되며 아래로 생명선을 가짐, 

                         사각형 안에 밑줄 친 이름으로 명시

생명선 (lifeline) : 객체로부터 뻗어 나가는 점선,

                            실제 시간이 흐름에 따라 객체의 생명주기 동안 발생하는 이벤트를 명시

실행(activation) : 직사각형은 오퍼레이션(함수)이 실행되는 시간을 의미

                             직사각형이 길어질수록 오퍼레이션 수행시간이 길다  

메시지(message) : 객체 간의 상호 작용은 메시지 교환으로 이루어짐,

                              한 객체에서 다른 객체로의 메시지를 전달하여 전달받은 객체의 오퍼레이션을 수행

 

3. 커뮤니케이션 (communication)

4. 상태 (state)

5. 활동 (activity)

: 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램

6. 타이밍 (timing)