[TIL] 오늘의 공부/정보처리기사

화면 설계 01-02. UI 요구사항 확인 / UI 설계

개발소연자 2025. 2. 12. 19:02

UI(User Interface)

UI 유형

  • CLI(Command Line)
  • GUI(Graphical)
  • NUI(Natural)
  • OUI(Organic)

UI 설계 원칙 직유학유

  • 직관성(Intuitiveness)
  • 유효성(Efficiency)
  • 학습성(Learnability)
  • 유연성(Flexibility)

UI 품질 요구사항

  • 기능성(Functionality)
  • 신뢰성(Reliability)
  • 사용성(Usability)
  • 효율성(Efficiency)
  • 유지보수성(Maintainability)
  • 이식성(Portability)

UI 지침

목표 정의를 위한 주요 기법

  • 3C 분석: Customer, Company, Competitor
  • SWOT 분석
  • 시나리오 플래닝
  • 워크숍

프로젝트 계획을 위한 주요 기법

  • 프로파일(Profile)
  • 리서치

요구사항 정의

  • 페르소나(Persona)
  • 브레인스토밍(Brain Storming)
  • 요구사항 매트릭스(Requirement Matrix)
  • 정황 시나리오(Contextual Scenario): 초기 시나리오

설계 구현을 위한 주요 기법

  • UI 시나리오 문서: 사용자 인터페이스와 기능구조, 대표 화면, 화면 간 인터랙션 흐름, 다양한 상황에서의 예외 처리방식

테스트를 위한 주요 기법

  • 사용성 테스트: 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트

UI 화면 설계

UI 화면 설계 구분

  • 와이어 프레임(Wireframe): 화면 단위의 레이아웃
  • 스토리보드(Storyboard): 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의, 데이터 베이스 연동 등
  • 프로토타입(Prototype): 동적효과까지

UML(Unified Modeling Language)

UML의 특징

  • 가시화 언어: 개념적 모델 작성 시 오류가 적고 의사소통이 용이
  • 구축 언어: 다양한 프로그래밍 언어로 실행 시스템의 예측 가능
  • 명세화 언어: 정확한 모델 제시, 완전한 모델 작성 가능
  • 문서화 언어: 시스템에 대항 평가 및 의사소통의 문서

UML 구성요소

  • 사물(Things)
  • 관계(Relationships)
  • 다이어그램(Diagrams)

UML 다이어그램

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

  • 클래스 다이어그램(Class)
  • 객체 다이어그램(Object)
  • 컴포넌트 다이어그램(Component)
  • 배치 다이어그램(Deployment)
  • 복합체 구조 다이어그램(Composite Structure)
  • 패키지 다이어그램(Package)

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

  • 유스케이스 다이어그램(Usecase)
  • 시퀀스 다이어그램(Sequence)
  • 커뮤니케이션 다이어그램(Comunication)
  • 상태 다이어그램(State)
  • 활동 다이어그램(Activity)
  • 타이밍 다이어그램(Timing)

UML 스테레오 타입

  • <<include>> : 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계
  • <<extend>> : 하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수도 있는 확장 관계
  • <<interface>> : 모든 메서드가 추상 메서드이며 바로 인스턴스를 만들 수 없는 클래스로 추상 메서드와 상수만으로 구성된 클래스
  • <<entity>> : 일반적으로 정보 또는 오래 지속되는 연관된 행위를 형상화하는 클래스로 유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장되어야 할 정보를 표현하는 클래스
  • <<boundary>> : 시스템과 외부 엑터와의 상호작용을 담당하는 클래스
  • <<controll>> : 시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스

클래스 다이어그램

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

  • 클래스(Class)
  • 속성(Arttribute)
  • 연산(Operation) / 메서드(Method)
  • 접근 제어자(Access Medifier)

클래스 간의 관계

  • 연관 관계(Association)
  • 의존 관계(Dependency)
  • 일반화 관계(Generalization)
  • 실체화 관계(Realization)
  • 포함 관계(Composition)
  • 집합 관계(Aggregation)

실체화 관계에서 추상 클래스와 인터페이스의 차이

  • 추상 클래스: 1개 이상의 추상 메서드
  • 인터페이스: 모두 다 추상 메서드

유스케이스 다이어그램

유스케이스 다이어그램 구성 요소

  • 유스케이스(Usercase)
  • 액터(Actor)
  • 시스템(System)
  • 시나리오(Scenario)
  • 이벤트의 흐름(Event Flow)

유스 케이스 다이어그램의 관계

  • 포함 관계(Include)
  • 확장 관계(Extend)
  • 일반화 관계(Generalization)

시퀀스 다이어그램

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

  • 객체(Object)
  • 생명선(Lifeline)
  • 실행(Activation)
  • 메시지(Message)

패키지 다이어그램

패키지 다이어그램 구성요소

  • 패키지(Package)
  • 의존 관계(Dependency)

활동 다이어그램

활동 다이어그램 구성 요소

  • 시작점(Initial Node)
  • 전이(Transition)
  • 액션(Action) / 액티비티(Activity)
  • 종료점(Final Node)
  • 조건(판단) 노드(Decision Node)
  • 병합 노드(Merge Node)
  • 포크 노드(Fork Node)
  • 조인 노드(Join Node)
  • 구회면(Swim Lane)

상태 다이어그램

상태 다이어그램 구성 요소

  • 상태(State)
  • 시작 상태(Initial)
  • 종료 상태(Final)
  • 전이(Transition)
  • 이벤트(Event)
  • 전이 조건(Transition Condition)

커뮤니케이션 다이어그램

커뮤니케이션 다이어그램 구성 요소

  • 액터(Actor)
  • 객체(Object)
  • 링크(Link)
  • 메시지(Message)

컴포넌트 다이어그램

컴포넌트 다이어그램 구성 요소

  • 컴포넌트(Component)
  • 인터페이스(Interface)
  • 의존 관계(Dependency)