2. 화면설계(2)

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

■ UML 특징 : 가시화 언어, 구축 언어, 명세화 언어, 문서화 언어(가구명문)

■ UML 구성요소 : 사물, 관계, 다이어그램(사관다)

• 사물(Things) : 추상적인 개념, 주제를 나타내는 요소
• 관계(RelationShip) : 사물의 의미를 확장하고 명확히 하는 요소
• 다이어그램(Diagram) : 사물과 관계를 모아 그림으로 표현한 형태

■ UML 다이어그램

• 구조적 다이어그램 / 정적 다이어그램(클객 컴배 복패)
  • 클래스(Class) : 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현
  • 객체(Object) : 클래스에 속한 사물(객체 = 인스턴스)을 특정 시점의 객체와 객체 사이의 관계로 표현
  • 컴포넌트(Component) : 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존관계 표현
  • 배치(Deployment) : 컴포넌트 사이의 종속성을 표현하고, 물리적 요소들의 위치를 표현
  • 복합체 구조(Composit Structure) : 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현
  • 패키지(Package) : 유스케이스, 클래스 등의 모델 요소를 그룹화한 패키지들의 관계
• 행위적 다이어그램 / 동적 다이어그램(유시커 상활타)
  • 유스케이스(Usecase) : 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현
  • 시퀀스(Sequence) : 객체 간 동적 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현
  • 커뮤니케이션(Communication) : 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 객체 간의 연관까지 표현
  • 상태(State) : 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현
  • 활동(Actvity) : 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현
  • 타이밍(Timing) : 객체 상태 변화와 시간 제약을 명시적으로 표현

■  UI 시나리오 문서의 작성 요건 : 완전성, 일관성, 이해성, 가용성, 추적 용이성, 수정 용이성(완일이가 추수)

• 완전성(Complete) : UI 시나리오는 누락이 없어야하고 최대한 빠짐없이 간으한 한 상세하게 기술
• 일관성(Consistent) : 서비스에 대한 목표, 시스템 및 사용자의 요구사항이 일관성이 있어야 함
• 이해성(Understandable) : 처음 접하는 사람도 이해하기 쉽도록 구성하고 설명해야 하고, 이해하지 못하는 어려운 용어는 사용x
• 가독성(Readable) : 문서를 쉽게 읽을수 있어야 하고 표준화된 템플릿을 작성하여 적용
• 추적 용이성(Traceable) : 쉽게 추적이 가능해야 하고, 변경 사항들이 언제, 어디서, 어떤 부분들이, 왜 발생하였는지 추적이 쉬워야 함
• 수정 용이성(Modifiable) : 쉽게 변경이 가능해야 하고 수정 또는 개선 사항을 시나리오에 반영하는 데 있어 쉽게 적용할 수 있어야 함.

■  UI 설계 도구의 유형

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

---

 

 

최종 요약 정리

 

■ UML의 관계(연의 일실 포집)

• 연관(Association)관계 표시 : [  -  ] 
• 의존(Dependency)관계 표시 : ---->
• 일반화(Generalization) 관계 표시 : -▷
• 실체화(Realization) 관계 표시 : -▷(extends)
• 포함 or 복합(Composition) 관계 : -◆
• 집합(Aggregation) 관계 : -◇

■ UI 기능 및 양식 확인

• Input Box : 텍스트
• ComboBox : 전체 혹은 선택에서 선택
• Radio Box : 하나만 선택 가능(동그라미)
• Check Box : 여러가지 선택 가능(네모)

 

■ UML 클래스의 기호 : 길러멧

• <<include>> : 포함
• <<extends>> : 확장
• <<inteface>> : 추상클래스
• <<entity>> : 정보 표현 클래스
• <<boundary>> : 외부 액터와의 상호작용을 담당하는 클래스
• <<control>> : 기능의 로직 및 제어를 담당하는 클래스

 

■ 추상클래스(Abstract Class)란? : 객체 인스턴스를 생성하지 않고, 단지 유사 클래스들의 공통된 특징을 정의, 하나 이상의 추상 메서드와 일반 필드 및 일반 메서드를 포함하는 클래스

■ UI 흐름 설계 : 업무의 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동

 

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

• 직관성 : 누구나 쉽게 이해하고 사용될 수 있어야 한다.
• 유연성 : 요구사항은 최대한 수용하고 실수를 방지할 수 있도록 제작
• 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함.
• 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록함

■ UI품질 요구사항 [ 기신사효유이 ] 

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

■ UX : 사용자가 직,간접적으로 경험하면서 느끼고 생각하는 총체적 경험

 

■ UI 개발을 위한 주요기법

• 3C분석 : 고객, 경쟁사, 자사를 비교하여 경쟁에서 이길것인가를 분석하는 기법
• SWOT 분석 : 기업의 내/외부를 분석하여 강점, 약점, 기회, 위협 을 규정하고 이를 토대로 경영 전략을 수립하는 방법
• 시나리오 플래닝 : 상황 변화를 사전에 예측하도 다양한 시나리오를 설계하여 불확실성을 제거하는 전략기법
• 워크숍 : 특정 문제에 대한 과제나 지식, 기술, 아이디어, 방법들을 서로 교호나하고 검토하는 세미나

■ UI 지침

• 페르소나 정의 -> 콘셉트 모델 정의 -> 사용자 요구사항 정의 -> UI컨셉션
• 페르소나 정의 : 다양한 행동 패턴을 응집시켜 놓은 가상의 사용자
• 콘셉트 모델 정의 : 여러가지 콘셉트들 사이의 관계를 보여주는 다이어그램
• 사용자 요구사항 정의 : 리서치 및 페르소나 결과물을 토대로 요구사항 도출, 우선순위 정함
• UI 컨셉션 : 정리된 요구사항을 구체화하는 단계

■ UI 화면설계 구분

• 와이어 프레임 : 화면 단위의 레이아웃을 설계하는 작업
• 스토리보드 : 서비스 구축을 위한 모든 정보가 담겨있는 설계 산출물
• 프로토타입 : 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적효과를 적용한 시제품

■ UI 흐름 절차

• 1단계 : UI 설계안의 적정성 확인
• 2단계 : 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토
• 3단계 : 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인
• 4단계 : 유스케이스 설계
• 5단계 : 기능 및 양식 확인