UI 설계

뿌엑·2022년 4월 2일
0

정보처리기사

목록 보기
6/20

UML(Unified Modeling Language)

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

특징

  1. 가시화 언어
    • 개념 모델 작성시 오류가 적고 의사소통 용이
  2. 구축 언어
    • 다양한 프로그래밍 언어로 실행 시스템 예측 가능
    • UML을 소스 코드로 변환하여 구축 가능, 역변환하여 역공학 가능
  3. 명세화 언어
    • 정확한 모델 제시, 완전한 모델 작성 가능
  4. 문서화 언어
    • 시스템에 대한 평가 및 의사소통에 사용되는 문서

구성요소

UML은 사물, 관계, 다이어그램으로 구성된다.

  • 사물
    • 추상적 개념으로 주제를 나타냄
    • 명사, 동사
  • 관계
    • 사물의 의미를 확장하고 명확히 함
    • 형용사, 부사
  • 다이어그램
    • 사물과 관계를 모아 그림으로 표현
    • 형식과 목적에 따라 9가지로 정리

UML 다이어그램

  • UML 다이어그램은 구조적(정적) 다이어그램, 행위적(동적) 다이어그램으로 구분된다.
  • 컴포넌트, 배치 다이어그램은 구현 단계에서 사용되는 다이어그램이다.
  1. 구조적 다이어그램(정적 다이어그램)
  • 클래스(Class)

    • 클래스 다이어그램은 객체지향 모델링시 클래스의 속성 및 연산과 클래스 간 정적 관계를 표현한 다이어그램이다.
  • 객체(Object)

    • 객체 다이어그램은 클래스에 속한 사물(객체)들, 즉 인스턴스(Instance)를 특정 시점의 객체와 객체 사이의 관계로 표현한 다이어그램이다.
  • 컴포넌트(Component)

    • 컴포넌트 다이어그램은 여러 컴포넌트가 서로 연결되어 더 큰 컴포넌트와 소프트웨어 시스템을 구성하는 구조를 보인다.
  • 배치(Deployment)

    • 배치 다이어그램은 컴포넌트 사이 종속성을 표현하고, 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치를 표현하는 다이어그램이다.
    • 시스템의 물리적인 요소 모델링, 시스템을 구성하는 처리장치와 그들 사이 통신 경로를 기술할 때 사용
  • 복합체 구조(Composite Structure)

    • 복합체 구조 다이어그램은 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램이다.
  • 패키지(Package)

    • 패키지 다이어그램은 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계를 표현한 다이어그램이다.
  1. 행위적 다이어그램(동적 다이어그램)
  • 유스케이스(Usecase)

    • 시스템과 사용자의 상호작용을 다이어그램으로 표현한 것으로 사용자의 관점에서 시스템의 서비스 혹은 기능, 또한 그와 관련된 외부 요소를 보인다.

      • 연관 관계(Association)

        유스케이스와 액터간 상호작용이 있다는 뜻으로, 실선으로 표시한다.
        사용자는 로그인과 결제 모두를 수행하지만 은행은 로그인 과정에 관여하지 않아도 된다.
        사용자는 로그인과 결제 모두와 연관 관계를 가지며, 은행은 결제에만 연관 관계를 가진다.

      • 포함 관계(Include)

        포함 관계는 두 개 유즈케이스 간 의존성을 나타낸다.
        한 유스케이스가 실행될 때 포함 관계에 있는 유스케이스가 반드시 실행돼야 한다는 의미를 지닌다.
        사용자는 로그인할 때마다 비밀번호를 확인해야 한다. 비밀번호 확인이 로그인 과정에 포함되며, 로그인 유스케이스에서 비밀번호 확인 유스케이스 방향으로 화살표를 그린 후 중앙에 << include >>를 표시하여 포함 관계를 나타낸다.

      • 확장 관계(Extend)

        확장 관계는 두 개 유스케이스 간 확장성을 나타낸다.
        한 유스케이스가 실행될 때 포함 관계에 있는 유스케이스가 특정 상황에서만 실행된다는 뜻을 지닌다.
        확장된 유스케이스에서 기존 유스케이스 방향을 가리키는 점선 화살표를 그리고, << extend >>를 화살표 중앙에 표시한다.

      로그인 에러는 잘못된 비밀번호가 입력된 경우에만 나타난다.
      이런 경우 로그인 에러 출력이 로그인의 확장 관계에 있는 것이다.

      • 일반화 관계(Generalization)

        일반화 관계는 부모 유스케이스와 자식 유스케이스들 간 상속 관계를 나타낸다.
        특정 유스케이스가 한 유스케이스의 국소적인 유스케이스란 의미를 지닌다.
        자식 유스케이스에서 부모 유스케이스 방향으로 삼각형 실선 화살표를 그려 표현한다.

      ※ 확장 관계와의 차이점
      일반화 관계에 있는 자식 유스케이스는 부모의 속성을 물려받으며, 부모 유스케이스에 해당하는 모든 포함, 확장 관계를 만족해야 한다.
      그러나 확장 관계에 있는 유스케이스는 속성을 물려받은 것이 아니기에 기존 유스케이스와 다른 유스케이스와의 관계를 만족하지 않아도 된다.

      체크카드와 무통장입금 결제는 결제 유스케이스와 일반화 관계이다.
      해당 유스케이스가 실행될 때 부모 유스케이스인 결제 유스케이스와 포함 관계인 잔액 확인 유스케이스를 실행해야 하고, 실패시 확장 관계인 잔액 부족 알림 유스케이스를 실행해야 한다.
      그러나 잔액 부족 알림 유스케이스는 결제 유스케이스와 확장 관계이기에 실행시 결제와 포함 관계인 잔액 확인 유스케이스를 실행하지 않는다.

  • 시퀀스(Sequence)

    • 시퀀스 다이어그램은 특정 행동이 어떤 순서로 어떤 객체와 어떻게 상호작용을 하는지 표현하는 행위 다이어그램이다.
    • 교류 다이어그램(Interaction diagram)의 일종이다.
  • 커뮤니케이션(Communication)

    • 시퀀스 다이어그램과 마찬가지로 교류 다이어그램의 일종이다.
    • 요소 간 데이터 연결을 강조한다.
    • 시퀀스 다이어그램은 모든 참여 요소들의 생명선을 잇고, 수직방향으로 메세지의 순서를 표현한다. 그러나 커뮤니케이션 다이어그램은 번호를 붙여 메세지의 순서를 나타낸다.

시퀀스 다이어그램은 호출의 순서에 중점을 두며, 커뮤니케이션 다이어그램은 서로 간 연결을 강조할 때 유용하다.

UML 확장 모델 스테레오 타입

  • 스테레오타입은 UML 모델링 요소들을 모델러의 기준에 따라 새로운 분류를 적용할 수 있게 하는 방식이다.
    스테레오타입은 모델러가 임의로 지정하여 사용할 수 있으며 특별한 제약이나 규칙은 없다.
    스테레오타입은 <<와 >> 사이 이름을 붙여 사용한다.

기본 유형
<< include >>

  • 하나의 유스케이스가 특정 시점에 다른 유스케이스를 실행하는 포함 관계

<< extend >>

  • 한 유스케이스가 특정 시점에 다른 유스케이스를 실행할 수도, 그렇지 않을 수도 있는 관계

<< interface >>

  • 모든 메서드가 추상 메서드이며 바로 인스턴스를 만들 수 없는 클래스로 추상 메서드와 상수만으로 구성된 클래스

<< entity >>

  • 일반적으로 정보 또는 오래 지속되는 연관된 행위를 형상화하는 클래스로 유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장돼야 할 정보를 표현하는 클래스

<< boundary >>

  • 시스템과 외부 액터와의 상호작용을 담당하는 클래스

<< control >>

  • 시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스

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

  1. 완전성
  • UI 시나리오는 누락이 없어야 하고 가능한 한 상세하게 기술한다.
  • 시스템 기능보다 사용자의 태스크에 중점을 둔다.
  1. 일관성
  • 서비스에 대한 목표, 시스템 및 사용자의 요구사항이 일관돼야 하고, 모든 문서의 UI 스타일을 일관적으로 구성한다.
  1. 이해성
  • 처음 접하는 사람도 이해하기 쉽게 구성하여 설명해야 한다.
  1. 가독성
  • 문서를 쉽게 읽을 수 있어야 하고, 표준화된 템플릿을 사용한다.
  1. 추적 용이성
  • 변경 사항에 대한 추적이 용이해야 한다.
  1. 수정 용이성
  • 수정 또는 개선사항을 시나리오에 쉽게 반영할 수 있어야 한다.
  • 동일한 수정사항을 위해 여러 문서를 편집하지 않게 해야 한다.

UI 설계 도구

  • 화면 설계도구, 프로토타이핑 도구, UI 디자인 도구가 있다.
  1. 화면 설계 도구
  • 파워 목업
  • 발사믹 목업
  • 카카오 오븐
  1. 프로토타이핑 도구
  • UX핀
  • 액슈어
  • 네이버 프로토나우
  1. UI 디자인 도구
  • 스케치
  • 어도비 익스피리언스 디자인 CC(Adobe XD)
  1. UI 디자인 산출물로 작업하는 프로토타이핑 도구
  • 인비전
  • 픽사에이트
  • 프레이머

0개의 댓글