2. 화면 설계

2. 화면 설계

 

keywords	CLIGUINUIOUISWOT 분석UIUI 설계 원칙UMLUX가시성관계다이어그램사물사용성 테스트상태 다이어그램소프트웨어 생명주기 모델스토리보드시나리오 플래닝시퀀스 다이어그램와이어 프레임유연성유효성이해성일반화 관계적용성적절성정밀도정확도직관성집합 관계커뮤니케이션 다이어그램컴포넌트 다이어그램클래스프로토타입학습성

 

UI 요구사항 확인

UI 요구사항 확인

1. UI 개념
   • UI(사용자 인터페이스)는 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적 가상의 매개체이다.
   • 좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면이다.
   • 사용자 경험 (UX)는 사용자 인터페이스 (UI)를 포함하고 있습니다.

2. UI 유형
   • UI 유형에는 CLI, GUI, NUI, OUI가 있다.

   유형	특징	설명
   CLI (Command Line Interface)	정적인 텍스트 기반 인터페이스	- 명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스
   GUI (Graphical User Interface)	그래픽 반응 기반 인터페이스	- 그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스
   NUI (Natural User Interface)	직관적 사용자 반응 기반 인터페이스	- 키보드나 마우스 없이 신체 부위를 이용하여 상호작용하는 사용자 인터페이스 - 터치, 음성 포함
   OUI (Organic User Interface)	유기적 상호 작용 기반 인터페이스	- 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스

3. UI 분야

   분야	설정
   물리적 제어 분야	정보 제공과 기능 전달을 위한 하드웨어 기반
   디자인적 분야	콘텐츠의 정확하고 상세한 표현과 전체적 구성
   기능적 분야	사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능

4. UI 설계 원칙
   • UI 설계 원칙에는 직관성, 유효성, 학습성, 유연성이 있다

     설계 원칙	설명	부특성
     직관성	누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함	- 쉬운 사용성 - 일관성 - 쉬운 오류 처리 및 복구
     유효성	정확하고 완벽하게 사용자의 목표가 달성 될 수 있도록 제작	- 쉽게 학습 - 쉬운 접근 - 쉽게 기억 - 오류 예방
     학습성	초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작	- 쉬운 사용성 - 실수포용 - 오류 감지
     유연성	사용자의 요구사항을 최대한 수용하고, 실수를 방지할 수 있도록 제작	- 쉬운 사용성 - 일관성 - 쉬운 오류 처리 및 복구

5. UI 설계 지침
   • UI 설계 지침은 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결이 있다.

   설계 지침	설명
   사용자 중심	사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공하며, 실사용자에 대한 이해가 바탕이 되어야 함
   일관성	버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠르게 습득할 수 있도록 설계해야 함
   단순성	조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화
   결과 예측 가능	결과 예측 가능한 기능만 노출하여 사용자가 예측 가능해야 함
   가시성	주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능해야 함
   표준화	디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용 가능해야 함
   접근성	사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함
   명확성	사용자가 개념적으로 쉽게 인지해야 함
   오류 발생 해결	사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함

6. UI 요구사항 확인
   1. UI 요구사항 개요
      • UI 요구사항은 사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준이다
      • 요구사항은 시스템 개발과정 전체에 대한 기준이 되며, 시스템 개발 종료 및 검수의 기준이 된다.
   2. UI 요구사항 구분
      • UI 요구사항은 크게 시스템이 무엇을 하여야 하는지를 설명하는 기능적 요구사항과 개발과정에서 지켜져야 할 제약 조건들을 설명하는 비기능적 요구사항으로 나눠진다.

        요구사항 구분	설명
        기능적 요구사항	- 시스템이 제공하는 기능, 서비스에 대한 요구사항 - 시스템의 입출력, 데이터, 연산에 관한 요구사항
        비기능적 요구사항	- 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항 - 플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항 - 비용, 일정 등 프로젝트 계획에 관한 요구사항

   3. UI 요구사항 확인
      • 응용 소프트웨어 개발을 위한 UI 표준 및 지침에 따라, 기능 및 비기능 요구사항의 도출을 통해 개발하고자 하는 응용 소프트웨어에 적용될 UI 요구사항을 확인할 수 있다.
   4. UI 품질 요구사항（ISO/IEC 9126 기반)
      1. 기능성（Functionality)
         • 기능성은 실제 수행 결과와 품질 요구사항과의 차이를 분석하고, 실제 사용 시 정확하지 않은 결과가 발생할 확률과 관련하여 시스템의 동작을 관찰하기 위한 품질 기준이다.

         상세 품질 요구사항	설명
         적절성 (Suitability)	소프트웨어 제품이 주어진 작업과 사용자의 목표에 필요한 적절한 기능들을 제공해야 함
         정밀성 (Accuracy)	소프트웨어 제품이 요구되는 정확도로 올바른 결과를 산출할 수 있는 능력을 가져야 함
         상호 운용성 (Interoperability)	소프트웨어 제품이 특정 시스템과 상호 작용하여 운영될 수 있는 능력을 가져야 함
         보안성 (Security)	비인가된 접근을 차단하고, 우연 또는 고의적인 접근을 인지하여 대처할 수 있는 능력을 가져야 함
         호환성 (Compatibility)	소프트웨어 제품이 비슷한 환경에서 연관된 표준, 관례 및 규정을 준수하여 다른 시스템과 호환되는 능력을 가져야 함

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

         상세 품질 요구사항	설명
         성숙성 (Maturity)	소프트웨어 결함으로 인한 고장을 회피할 수 있는 소프트웨어의 능력을 가져야 함
         고장 허용성 (Fault tolerance)	소프트웨어 결함이나 인터페이스 오류 시에도 특정 수준 이상의 성능을 유지할 수 있는 능력을 가져야 함
         회복성 (Recoverability)	소프트웨어 고장 발생 시 영향을 받은 데이터를 복구하고 성능의 수준을 다시 확보할 수 있는 능력을 가져야 함

      3. 사용성
         • 사용성은 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준이다.

         상세 품질 요구사항	설명
         이해성 (Understandability)	소프트웨어의 논리적인 개념과 적용 가능성(응용 가능성)을 구분하는 데 필요한 능력을 가져야 함
         학습성 (Learnability)	소프트웨어 애플리케이션 학습에 필요한 사용자의 노력 정도에 따른 특성을 가져야 함
         운용성 (Operability)	소프트웨어의 운용과 운용 통제에 필요한 사용자의 노력 정도에 따른 특성을 가져야 함

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

         상세 품질 요구사항	설명
         시간 효율성 (Time Behaviour)	소프트웨어의 기능을 수행하는 데 있어서 반응 시간, 처리 시간 및 처리율에 따른 특성을 가져야 함
         자원 효율성 (Resource Behaviour)	소프트웨어의 기능을 수행하는 데 있어서 사용되는 자원의 양과 그 지속 시간에 따른 특성을 가져야 함

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

         상세 품질 요구사항	설명
         분석성 (Analyzability)	소프트웨어 고장의 원인이나 결함 진단 또는 수정이 요구되는 부분의 확인에 필요한 노력 정도에 따른 특성
         변경성 (Changeability)	결함 제거 또는 환경 변화에 따른 수정에 필요한 노력 정도에 따른 특성
         안정성 (Stability)	소프트웨어의 변경으로 발생하는 예상치 못한 영향에 의한 위험 요소에 따른 특성
         시험성 (Testability)	소프트웨어가 변경되어 검증에 필요한 노력의 정도에 따른 특성

      6. 이식성(Portability)
         • 이식성은 다른 플랫폼(운영체제)에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가에 대한 품질 기준이다.

         상세 품질 요구사항	설명
         적용성 (Adaptability)	고려된 소프트웨어의 목적을 위해 제공된 수단이나 다른 조치 없이 특정 환경으로 전환되는 능력에 따른 소프트웨어 특성
         설치성 (Installability)	특정 환경에 소프트웨어를 설치하는 데 필요한 노력의 정도에 따른 특성
         대체성 (Replaceability)	특정 운용 환경하에서 동일한 목적 달성을 위해 다른 소프트웨어를 대신 사용할 수 있는 능력

 

UI 지침

1. UI 지침(Guideline) 개념
   • ui 지침은 ui 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부사항을 규정하는 가이드라인이다

2. UI 표준 적용을 위한 환경 분석
   • UI 표준 적용을 위한 환경 분석을 위해 사용자 트렌드 분석, 기능 및 설계 분석을 한다.
   1. 사용자 트렌드 분석
      • 현재 UI의 단점 파악 및 트렌드 숙지
      • 사용자가 필요로 하는 핵심 요구사항 파악
      • 사용자가 쉽게 이해 가능한 기능을 위주로 기술 영역 정의
   2. 기능 및 설계 분석

      기능 조작성분석	사용자 편의성 확대를 위한 조작 기능 확인 스크롤바 지원 가능 여부 확인 • 마우스 조작 및 업무 처리 시 동선 확인
      오류 방지 분석	사용자 조작 시 오류에 대해 예상 가능한지 확인 • 사용자 의도와 관계없는 페이지 이동이 있는지 확인 • 기능 버튼 명이 사용자 조작과 일치하는지 확인
      최소한의 조작으로 업무처리 가능 여부 확인	• 기능 특성에 맞는 UI 확인 • 조작 단계를 최소화하고 동선은 단순한지 확인
      UI의 정보 전달력 확인	• 정보 제공 방식이 일관적이며 사용자가 쉽게 이해 가능한지 확인 • 사용자 정보 제공이 간결하고 명확한지 확인

3. UI 개발 목표 및 범위
   1. UI 개발 목표 및 범위 정의
      • UI 개발 목표 및 범위 정의를 필수적으로 수행하여 프로젝트 계획 전반에 반영한다.
      • 성공적인 수행을 위해 내부 관계자에게 UI 개발 필요성 및 목표를 공유하고 개발 범위를 수립하기 위한 활동을 한다.

      구분	목표	활동
      경영진의 UI 관련 개발 요구사항 조사 및 정의	- 경영진을 대상으로 심층 인터뷰를 통해 비즈니스 요구사항 정의 - 경영진이 생각하는 사업적 목표를 바탕으로 UI 디자인 프로세스 정의 - 경영진 인터뷰는 반드시 사용자 리서치 시작 전 진행	- 초기 비전과 기대 설정 - 비용과 일정 결정 - 기술적 제약과 가능성 파악 - 사업전략, 목표, 각 프로세스 책임자 선정, 우선순위 선정, 개별적인 업무 단위 구분
      자사 및 타사 사용자 분석 (3C 분석) 및 트렌드 분석	- 기존의 자사 제품과 주요 경쟁사 제품을 분석하는 마케팅적 관점으로 시장 이해	- 자사 및 타사 분석 실시 (3C 분석, SWOT 분석) - 트렌드 분석 실시 (이슈 분석, 시나리오 플래닝) • 전문가 사용성 테스트 진행 • 핵심 이슈 도출
      관계자 간 개발 목표 협의 및 공유 워크숍	• 앞의 단계에서 조사, 분석된 결과를 토 대로 부서 간, 내부 관계자 간 개발 목 표 협의 • UI 차별성 있는 콘셉트, 개선 등 디자 인 및 개발 이슈가 많은 상황에서 필요	워크숍 범위와 목적 정의 - 아이디어 워크숍을 통해 아이디어 수렴 및 평가 - 아이디어 정리, 분석 후 전문가적 통찰을 통해 아이디어를 선정, 개발목표 도출

   2. UI 개발을 위한 주요 기법

      기법	설명
      3C 분석	고객(Customer), 경쟁하고 있는 자사(Company), 경쟁사(Competitor)를 비교하고 분석하여 차별화 전략 도출
      SWOT 분석	기업의 내외부 환경을 분석하여 강점(Strength), 약점(Weakness), 기회(Opportunity), 위협(Threat)을 도출
      시나리오 플래닝	불확실성이 높은 상황에서 다양한 시나리오를 설계하여 불확실성을 제거하는 전략 수립 방법
      사용성 테스트	사용자가 제품을 사용하면서 시나리오에 따라 과제를 수행하고 피드백을 받는 테스트
      워크숍	소집된 인원이 특정 문제나 과제에 대해 아이디어를 교환하고 검토하는 연구회 및 세미나

4. 사용자 분석 및 니즈（Needs） 조사
   • 최신 트렌드, 경쟁사 동향을 통해 정의된 핵심 기능 관련, 예상 타깃 고객층의 프로파일을 기술하고 정의한다.

   세부 수행활동	목표	활동
   적절한 리서치 대상 선정 및 설계	고품질의 리서치 결과 획득을 위해 사용자 분류 기준 정의 및 분류, 대상자 선정 및 리서치 방법 설계	• 사용자 분류기준 정의 및 분류 • 사용자 그룹별 매력도 평가 • 이슈별 내용 상세 설계 • 리서치 방식 정의, 리서치 팀 구성, 스케줄링
   리서치 진행	사용자의 불편사항과 니즈 파악, 제품/서비스에 대한 다양한 의견 수집	• 설문 조사 / 개인(심층 인터뷰) / 그룹(그룹 인터뷰) 리서치 진행 • 리서치 내용 점검 및 보완
   리서치 결과 정리	결과 분석을 통해 핵심 이슈 도출 및 UI 개발 목표 설정	• 리서치 결과 분석서 작성

5. 사용자 요구사항 도출
   • 페르소나 정의, 콘셉트 모델 정의, 사용자 요구사항 정의, UI 컨셉션 단계를 통해 사용자 요구사항을 도출할 수 있다.

6. UI 상세 설계
   • UI 설계 시안을 토대로 실제 설계 및 구현을 위해서 모든 화면에 대한 UI 상세 설계 단계를 진행한다.
   • UI 시나리오 문서는 사용자 인터페이스의 기능구조, 대표 화면, 화면 간 인터랙션 흐름, 다양한 상황에서의 예외 처리방식 등을 문서로 정리한 것으로 ‘효율적인 UI 관리’와 여러 이해관계자 간의 ‘원활한 의사소통’을 할 수 있게 해준다.

7. 화면 디자인
   • UI 화면 디자인에 활용될 레이아웃, 컬러 패턴, 타이포 그래픽, 화면 디자인 요소 등을 정의한다.
   • UI 가이드 문서를 작성한다.

8. UI 시연을 통한 사용성 검토/검증
   • 스크린별 레이아웃과 대부분의 인터랙션이 적용된 고수준의 프로토타입을 이용하여 내부 개발자, 전문가 평가 등을 통해 지속적인 UI 사용에 대한 평가와 UI 디자인 평가를 진행하여 개선사항을 반영한다.

9. 테스트, 배포 및 관리
   • 테스트 계획 수립 단계를 거쳐서 실제 사용성 테스트를 수행한다.
   • 사용성 테스트 결과를 분석하여 객관적이고 정량화된 값을 도출/개선한다.
   • 사용자 중심 소프트웨어 매뉴얼을 작성한다.
   • 사용자 피드백을 지속적으로 수집하고 유형화하여 체계적으로 관리한다.

 

 

스토리보드

1. 스토리보드(Storyboard) 개념
   • 스토리보드는 ui 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서이다.
   • 디자이너와 개발자가 최종적으로 참고하는 산출 문서이다.
   • UI 화면 설계를 위해서는 와이어프레임, 스토리보드, 프로토타입이 활용
     된다.

   구분	설명	도구
   와이어프레임	이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위한 화면 레이아웃 설계	파워포인트, 키노트, 스케치, 일러스트
   스토리보드	정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물	파워포인트, 키노트, 스케치, HTML/CSS
   프로토타입	정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형	HTML/CSS, JavaScript

2. 스토리보드 작성 절차
   • 스토리보드 작성 절차는 전체 개요 작성, 서비스 흐름 작성, 스타일 확정, 메뉴 별 화면 설계도 작성 및 상세 설명, 추가 관련 정보 작성 순으로 되어 있다.

   순서	작성절차	설명
   1	전체 개요 작성	- 문서명, 개정 이력 등 전반적인 개요 명시 - 주요 목적, 대상, 기능 요약 작성
   2	서비스 흐름 작성	- 메인 페이지부터 서브 메뉴까지의 서비스 흐름 작성 - 와이어프레임에서 발견되지 않은 문제 확인 가능
   3	스타일 확정	- 레이아웃, 글자, 색상 등 일관성 있는 스타일 확정
   4	메뉴별 화면 설계도 작성 및 상세 설명	- 각 화면에 대한 상세 설명 페이지 작성
   5	추가 관련 정보 작성	- 메뉴별 화면 설명 구체화 - 프로그램 요소나 스크립트 기능 등 추가 정보 작성

3. 스토리보드 작성 시 유의사항
   • 스토리보드 작성 시에는 일관된 기호의 표시, 공통 영역의 정의, 영역별 세부 설계, 버전 업 관리에 대한 유의사항을 고려해야 한다.

   유의사항	설명
   일관된 기호의 표시	내용을 작성하는 방법이나 기호, 번호 등에 일관된 방식을 사용하여 내용에 대한 명확하게 전달 필요
   공통 영역의 정의	상단 메뉴, 하단 내용, 퀵 메뉴 등 화면 내의 공통 영역은 페이지마다 같은 형태로 구성되어야 합니다.
   영역별 세부 설계	스토리보드의 영역별 세부 설계 시 각각의 영역을 명확히 구분하고, 세부적인 설명을 기록해야 합니다.
   버전 업 관리	갱신 시 버전과 날짜를 기록하여 효율적인 관리 필요

4. 스토리보드 작성 사례

UI 프로토타입 제작 및 검토

1. 프로토타입(Prototype) 개념
   • 프로토타입은 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능
     성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하
     여 전체적인 기능을 간략한 형태로 구현한 시제품이다.
     • 프로토타입은 사용자의 요구사항이 정확하게 반영될 때까지 지속적으로 개
     선하고 보완해서 최종 설계를 완성한다.

2. 프로토타입의 의의
   • 사전에 프로토타입을 먼저 제작하고 이를 기반으로 이의 적정성을 평가, 수
   정 보완함으로써 추후 발생 가능한 오류들을 사전에 방지하는 효과가 있다.
   • 시스템 설계 및 개발에 소요되는 총 비용과 노력을 절감할 수 있다.

3. 프로토타입의 장점 및 단점

   장점	단점
   사용자 설득과 이해가 쉬움	수정 과정 증가 시, 작업 시간 증가 위험 존재
   개발 시간 감소	요구사항에 대한 적절한 타협 필요
   오류 사전 발견을 통한 예방 가능	자원 효율성 관점에서는 필요 이상의 많은 자원 소모

4. UI 프로토타입 유형

   구분	아날로그	디지털
   개념	종이와 펜을 활용하여 화면의 구조를 스케치하는 프로토타입	디지털 편집기, HTML 등의 프로토타이핑 도구를 사용해 화면의 구조를 만드는 프로토타입
   도구	화이트보드, 펜, 종이	Keynote, UX pin, HTML
   특징	- 포스트잇 사용 - 제작 기간이 짧은 경우 적용 - 제작 비용이 적을 경우 적용 - 업무 협의가 빠른 상황일 경우 적용	- 재사용이 필요한 경우 적용 - 산출물과 비슷한 효과를 필요로 할 경우 적용 - 숙련된 전문가가 있을 경우 적용

 

---

 

UI 설계

98페이지

UI 설계를 위한 UML

1. UML
   1. UML(Unified Modeling Language)의 개념
      • UML은 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해 만든 표준화된 범용 모델링 언어이다.
   2. UML의 특징
      • UML은 방법론을 통합한 것으로, 표준화된 모델링 기법을 제공한다.

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

   3. UML의 구성요소
      • UML은 사물, 관계, 다이어그램으로 구성됩니다.

      구성요소	내용
      사물	추상적인 개념으로, 주제를 나타내는 요소 (Things) 단어 관점에서 '명사' 또는 '동사'를 의미
      관계	사물의 의미를 확장하고 명확히 하는 요소. 사물과 사물을 연결하여 관계를 표현하는 요소 (Relationships) 단어 관점에서 '형용사' 또는 '부사'를 의미
      다이어그램	사물과 관계를 모아 그림으로 표현한 형태. 형식과 목적에 따라 9가지로 정의됨 (Diagrams)

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

         다이어그램 유형	설명
         클래스(Class)	객체 지향 모델링 시 클래스의 속성, 연산, 그리고 클래스 간의 정적인 관계를 표현하는 다이어그램
         객체 (Object)	클래스에 속한 사물(객체)들, 즉 인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현하는 다이어그램. 모든 관련된 인스턴스를 표현
         컴포넌트 (Component)	시스템을 구성하는 컴포넌트와 그들 간의 의존 관계를 나타내는 다이어그램
         배치 (Deployment)	컴포넌트 사이의 종속성을 표현하고, 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치를 표현하는 다이어그램
         복합체 구조 (Composite Structure)	클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램
         패키지 (Package)	유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계를 표현하는 다이어그램

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

         다이어그램 유형	설명
         유스케이스 (Usecase)	시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램
         시퀀스 (Sequence)	객체 간 동적 상호 작용을 시간적 개념을 중심으로 메시지 흐름으로 표현하는 다이어그램
         커뮤니케이션 (Communication)	동작에 참여하는 객체들이 주고 받는 메시지를 표현하고, 메시지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램
         상태 (State)	하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램
         활동 (Activity)	시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
         타이밍 (Timing)	객체 상태 변화와 시간 제약을 명시적으로 표현하는 다이어그램

   5. UML 확장 모델의 스테레오 타입(Stereotype)
      • UML의 스테레오 타입은 UML의 기본적 요소 이외의 새로운 요소를 만들어 내기 위한 확장 메커니즘이다.
      • 형태는 기존의 UML의 요소를 그대로 사용하지만 내부 의미는 다른 목적으로 사용하도록 확장한다.
      • UML의 스테레오 타입은 ‘<< >>’(길러멧; Guillemet) 기호를 사용하여 표현 한다.
   6. UML의 유형
      1. 클래스 다이어그램
         1. 클래스 다이어그램(Class Diagram) 개념
            • 클래스 다이어그램은 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램이다.
         2. 클래스 다이어그램 구성요소
            • 클래스 다이어그램의 구성요소는 클래스 이름, 속성, 연산, 접근 제어자, 관계가 있다.

            용어	설명
            클래스 (Class)	공통의 속성, 연산(메서드), 관계, 의미를 공유하는 객체들의 집합
            속성 (Attribute)	클래스의 구조적 특성에 이름을 붙인 것으로 특성에 해당하는 인스턴스가 보유할 수 있는 값의 범위를 기술
            연산 (Operation)	이름, 타입, 매개변수들과 연관된 행위를 호출하는데 요구되는 제약사항들을 명시하는 클래스의 행위적 특징
            메서드 (Method)	객체에 요청하여 행동에 영향을 줄 수 있는 서비스
            접근 제어자 (Access Modifier)	클래스에 접근할 수 있는 정도를 표현 - : 클래스 내부 접근만 허용 (private) + : public # : protected ~ : default

         3. 클래스 간의 관계(Relationships)
            • 클래스의 관계는 연관 관계, 집합 관계, 포함 관계(복합 관계), 일반화 관계, 의존 관계, 실체화 관계가 있다.

            구분	설명
            연관 관계 (Association)	연관 관계는 클래스가 서로 개념적으로 연결된 선 • 연관 관계는 2개 이상의 사물이 서로 관련되어 있는 상태를 표현 • 사물 사이를 실선으로 연결하여 표현하며, 방향성은 화살표로 표현 • 서로에게 영향을 주는 양방향 관계의 경우 화살표를 생략하고 실선으로만 연결
            의존 관계 (Dependency)	하나의 클래스가 또 다른 클래스를 사용하는 관계 • 다른 클래스의 멤버 함수 사용 • 의존 관계는 사물 사이에 서로 연관은 있으나 필요에 따라 서로에게 영향을 주는 짧은 시간 동안만 연관을 유지하는 관계를 표현 • 하나의 클래스에 있는 멤버 함수의 인자가 변함에 따라 다른 클래스에 영향을 미칠 때의관계 • 영향을 주는 사물이 영향을 받는 사물 쪽으로 점선 화살표를 연결하여 표현
            일반화 관계 (Generalization)	일반화 관계는 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현 일반적인 개념을 부모（상위）라고 하고, 구체적인 개념을 자식（하위）이라 함 구체적（하위）인 사물에서 일반적（상위）인 사물 쪽으로 속이 빈 화살표를 연결하여 표현 일반화 관계는 다른 의미로 상속 관계라고 함
            실체화 관계 (Realization)	추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메서드를 구현할 때 사용 사물이 할 수 있거나, 해야 하는 기능（행위, 인터페이스）으로 서로를 그룹화할 수 있는 관계를 표현
            포함 （Composition） 관계 （=복합관계）	• 영구적이고, 집합 관계보다 더 강한 관계로 구성 • 포함되는 쪽（Part； 부분）에서 포함하는 쪽（Whole； 전체）으로 속이 채워진 마름모를 연결하여 표현 • 포함 관계는 집합 관계의 특수한 형태로, 포함하는 사물의 변화가 포함되는 사물에게 영향을 미치는 관계를 표현 • 포함 관계는 복합 관계라고도 함
            집합 (Aggregation) 관계	• 하나의 객체에 여러 개의 독립적인 객체들이 구성되는관계 • 집합 관계는 하나의 사물이 다른 사물에 포함되어 있는 관계 표현 • 포함되는 쪽（Part; 부분）에서 포함하는 쪽（Whole； 전체）으로 속이 빈 마름모를 연결하여 표현

      2. 유스케이스 다이어그램
         1. 유스케이스 다이어그램(Usecase Diagram) 개념
            • 유스케이스 다이어그램은 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램이다.
         2. 유스케이스 다이어그램 구성요소
            • 유스케이스 다이어그램 구성요소는 유스케이스, 액터, 시스템, 시나리오, 이벤트의 흐름이 있다

            구성요소	설명
            유스케이스	시스템이 제공해야 하는 서비스 또는 기능을 나타냅니다.
            액터	시스템과 상호 작용하는 사람 또는 사물을 나타냅니다. 시스템을 통해 서비스를 요청하는 외부 요소입니다.
            시스템	전체 시스템의 영역을 나타냅니다.
            시나리오	액터가 시스템을 통해 수행하는 일련의 행위를 나타냅니다.
            이벤트의 흐름	사람, 시스템, 하드웨어, 시간 등의 흐름에 의해 시작되는 이벤트의 흐름을 나타냅니다.

         3. 유스케이스 다이어그램의 관계
            • 관계는 액터와 유스케이스, 유스케이스와 유스케이스 사이에서 나타날 수 있다.
            • 관계의 종류는 포함 관계, 확장 관계, 일반화 관계가 있다

            관계	설명
            포함 (Include)	• 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행되는 관계 유스케이스 다이어그램에서는 다른 유스케이스가 나타내는 이벤트 흐름을 포함(Include)하는 관계를 유스케이스 간에 표현 여러 유스케이스에서 공통적으로 발견되는 기능 표현 • 2개 이상의 유스케이스 이벤트 흐름에서 중복적인 부분이 발생하는 경우 유스케이스 간 포함 관계를 설정하여 해결 • 〈 〈include〉〉로 표현
            확장 (Extend)	• 확장 관계의 유스케이스는 포함 관계처럼 여러 유스케이스에 걸쳐 중복적으로 사용되지 않고. 특정 조건에서한 유스케이스로만 확장되는 관계 • 확장 유스케이스는 특정 조건이 만족되는 상황에서만 확장 유스케이스의 이벤트 흐름이 수행 • 한 유스케이스에서 추가되거나 확장 된 기능 표현 • 〈 〈extend〉〉로 표현
            일반화 (Generalization)	• 추상적인 액터와 좀 더 구체적인 액터 사이에 맺어주는 관계 • 일반화 관계를 액터에 적용하면 유스케이스 다이어그램에서 사용되는 여러 액터들의 의미를 좀 더 명확하게 하고 다이어그램도 보다 간결하게 작성 • 하위 액터나 유스케이스에서 상위 액터, 유스케이스 쪽으로 속이 빈 삼각형 화살표를 실선으로 연결

      3. 시퀀스 다이어그램
         1. 시퀀스 다이어그램(Sequence Diagram) 개념
            • 시퀀스 다이어그램은 객체 간 상호 작용을 메시지 흐름으로 표현한 다이어그램이다.
            • 객체 간의 동적 상호 작용을 시간적 개념을 중심으로 모델링하는 과정이다.
            • 시퀀스 다이어그램에서는 객체의 오퍼레이션과 속성을 상세히 정의해야 한다.
            • 시퀀스 다이 어그램은 유스케이스를 실현(Realization) 한다.
         2. 시퀀스 다이어그램 구성요소
            • 시퀀스 다이어그램 구성요소는 객체, 생명선, 활성화, 메시지가 있다

            구성요소	설명
            객체 (Object)	사각형 안에 밑줄 친 이름으로 명시되며, 시간에 따라 생명선을 가집니다.
            생명선 (Lifeline)	객체로부터 뻗어나가는 점선으로, 객체의 생명주기 동안 발생하는 이벤트를 명시합니다.
            실행 (Activation)	직사각형으로 표시되며, 오퍼레이션(함수)이 실행되는 시간을 의미합니다.
            메시지 (Message)	객체 간의 상호 작용을 나타내며, 한 객체에서 다른 객체로의 메시지를 전달하는 것을 의미합니다.

      4. 패키지 다이어그램
         1. 패키지 다이어그램(Pa아cage Diagram) 개념
            • 패키지 다이어그램은 시스템의 서로 다른 패키지들 사이의 의존 관계를 표현하기 위한 다이어그램이다.
         2. 패키지 다이어그램 구성요소
            • 패키지 다이어그램 구성요소는 패키지, 의존관계가 있다.

            구성요소	설명
            패키지	요소들을 그룹으로 조직하기 위한 요소입니다. 다른 패키지를 사용하는 관계를 표현할 수 있습니다.
            의존관계	패키지 간의 관계를 나타내는 스테레오 타입을 붙여 표현합니다. 스테레오 타입으로는 «import»,〈〈access〉〉가 있습니다.

      5. 활동 다이어그램
         1. 활동 다이어그램(Activity Diagram) 개념
            • 활동 다이어그램은 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램이다.
            • 오퍼레이션이나 처리과정이 수행되는 동안 일어나는 일들을 단계적으로 표현한다.
            • 활동 다이어그램은 하나의 유스케이스 안이나, 유스케이스 사이에서 발생하는 복잡한 처리의 흐름을 명확하게 표현할 수 있다.
         2. 활동 다이어그램 구성요소
            • 활동 다이어그램 구성요소는 시작점, 전이, 액션/액티비티, 조건(판단) 노드, 병합 노드, 포크 노드, 조인 노드, 구획면이 있다
            • 활동 다이어그램에서 하나의 활동이 처리되면 그 다음 활동으로 자동적으로 옮겨지며, 활동 상태의 시작과 종료는 항상 존재한다.

            구성요소	설명
            시작점 (Initial Node)	활동의 시작을 나타내며, 하나의 다이어그램 안에는 하나의 시작점만 존재합니다. 검은색 동그라미로 표현됩니다.
            전이 (Transition)	활동 간의 이동을 나타내며, 화살표로 표현됩니다.
            액션 (Action)/액티비티 (Activity)	실행의 흐름을 나타내고, 모서리가 둥근 사각형으로 표현됩니다.
            종료점 (Final Node)	처리의 종료를 의미하며, 검은색 동그라미를 포함한 원으로 표현됩니다.
            조건 노드 (Decision Node)	조건에 따른 제어 흐름의 분리를 표현하고, 마름모로 표현됩니다.
            병합 노드 (Merge Node)	여러 경로의 흐름이 하나로 합쳐진 것을 표현하고, 마름모로 표현됩니다.
            포크 노드 (Fork Node)	평행적으로 수행되는 흐름을 나누는 노드로, 굵은 가로선으로 표현됩니다.
            조인 노드 (Join Node)	• Fork Node로 나눠진 흐름을 다시 하나로 합치는 노드 • 굵은 가로선으로 표현하고 들어오는 액티비티 흐름은 여러 개이고, 나가는 액티비티 흐름은 한 개
            구획면 (Swim Lane)	• 액티비티 수행을 담당하는 주체를 구분하는 면 • 가로 또는 세로 실선을 그어 구분

      6. 상태 다이어그램
         1. 상태 다이어그램(State Diagram) 개념
            • 상태 다이어그램은 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램이다.
            • 상태 다이어그램은 어떤 이벤트에 의해 객체 자신이 속한 클래스의 상태 변화나 객체 간 상호 작용하는 과정에서의 상태 변화를 표현한다.
            • 객체는 파악된 상태들 이외의 상태는 가질 수 없고, 특정 순간에는 오직 한 상태로만 존재할 수 있다.
            • 객체의 상태란 객체가 갖는 속성값의 변화이다.
         2. 상태 다이어그램 구성요소
            • 상태 다이어그램 구성요소는 상태, 시작 상태, 종료 상태, 전이, 이벤트, 전이 조건이 있다.

            구성요소	설명
            상태 (State)	객체의 상태를 나타내는 둥근 사각형 안에 기술됩니다.
            시작 상태	객체의 시작 상태를 나타내며, 속이 채워진 원으로 표현됩니다.
            종료 상태	객체의 종료 상태를 나타내며, 속이 채워지지 않은 원으로 표현됩니다.
            전이 (Transition)	객체의 상태 변화를 나타내며, 화살표로 표현됩니다.
            이벤트 (Event)	전이를 유발하는 자극을 나타내며, 전이 위에 이벤트 이름으로 표시됩니다.
            전이 조건	전이가 발생하는 조건을 나타내며, 전이 위에 조건식으로 표시됩니다.

      7. 커뮤니케이션 다이어그램
         1. 커뮤니케이션 다이어그램（Communication Diagram） 개념
            • 커뮤니케이션 다이어그램은 시퀀스 다이어그램과 같이 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램이다.
            • 커뮤니케이션 다이어그램은 시스템이나 객체들이 메시지를 주고받으며 시간의 흐름에 따라 상호 작용하는 과정을 표현한 다이어그램이다
         2. 커뮤니케이션 다이어그램 구성요소
            • 커뮤니케이션 다이어그램 구성요소는 액터, 객체, 링크, 메시지가 있다.

            구성요소	설명
            액터 (Actor)	시스템으로부터 서비스를 요청하는 외부 요소입니다. 주고받은 메시지의 주체로서, 객체와의 상호작용을 통해 시스템과 소통합니다.
            객체 (Object)	객체들 간의 관계를 표현하며, 클래스가 아닌 실제 객체들 사이의 링크를 직접적으로 보여줍니다.
            링크 (Link)	액터와 객체, 객체 간의 관계를 나타내며, 객체 간의 실제 연결을 보여줍니다. 메시지를 통해 표현됩니다.
            메시지 (Message)	객체가 상호작용을 위해 주고받는 메시지를 나타냅니다. 상대 객체마다 여러 개의 메시지가 전달될 수 있으며, 화살표 방향은 메시지를 받는 쪽으로 향합니다.

      8. 컴포넌트 다이어그램
         1. 컴포넌트 다이어그램(Component Diagram) 개념
            • 컴포넌트 다이어그램은 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램이다.
            • 코드 컴포넌트 기반의 물리적 구조로 표현된다.
            • 실질적 프로그래밍 작업에 사용한다
         2. 컴포넌트 다이어그램 구성요소
            • 컴포넌트 다이어그램 구성요소는 컴포넌트, 인터페이스, 의존 관계가 있다.

            구성요소	설명
            컴포넌트	탭이 달린 직사각형으로 표현되며, 모든 컴포넌트는 이름을 가지고 있어야 합니다.
            인터페이스	컴포넌트가 실체화하는 인터페이스를 나타냅니다. 인터페이스를 실체화한다는 것은 해당 컴포넌트에 인터페이스를 구현한다는 것을 의미합니다.
            의존 관계	컴포넌트와 인터페이스 사이의 의존 관계를 나타냅니다. 화살표 모양의 점선으로 연결되며, 한 컴포넌트의 변경이 다른 컴포넌트에 영향을 미칠 때 유용합니다.

   UI 설계 도구
   1. ui 설계 도구의 개념
      • UI 설계 도구는 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지 원하는 도구이다.
   2. UI 개발 단계별 활용 가능한 설계 도구
      • 일반적인 UI 개발 프로세스는 분석, 설계, 구현의 절차를 거쳐 요구사항에 부합하는 화면의 구현으로 이루어진다.
      • UI 설계 도구는 분석, 설계 및 구현 부분을 지원한다

        프로세스	UI 디자이너	업무전문가/개발자	도구
        분석	• UI 표준설계	• 화면 프로토타이핑 • 화면 정의 • 보고서 정의	•UI 패턴 • UI 모델링
        설계	• 디자인 시안 제작 • 화면 템플릿 제작	• 화면 설계 보고서 설계 • 응용 아키텍처 구현	• UI 설계
        구현		화면 개발	• 프로토타이핑 툴

   3. UI 설계 도구의 유형
      • UI 설계 도구의 유형은 UI 구현 절차에 따라 기획단계에서 화면 UI 설계 및 인터랙션 적용에 적합한 도구와 설계 작업 이후 이미 설계된 이미지의 인터랙션 적용에 적합한 도구로 구분할 수 있다.
      • UI 설계 도구를 세분화하면 화면 설계 도구, 프로토타이핑 도구, UI 디자인 도구로 나눌 수 있다
      1. 화면 설계 도구

         파워 목업 (Power Mockup)	파워포인트에 추가 메뉴를 설치하여 목업 기능을 활용할 수 있는 도구입니다. 미리 제작된 레이아웃, 컴포넌트, 내비게이션 등을 사용할 수 있습니다.
         발사믹 목업 (Balsamiq Mockups)	빠르고 간단하게 서비스 콘셉트를 전달할 수 있는 목업 도구입니다. 스케치한 느낌으로 사용되며, 디테일한 화면 구성보다는 간단한 스케치에 활용됩니다.
         카카오 오븐 (Oven)	카카오에서 제작한 온라인 프로토타이핑 도구로, 직관적인 인터페이스를 통해 사용자가 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 공유할 수 있습니다.

      2. 프로토타이핑 도구

         UX 핀 (UXPin)	웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구입니다. 다양한 디바이스 환경에 맞추어 설계가 가능하며, UI 설계뿐만 아니라 스토리보드에도 활용됩니다.
         액슈어 (AXURE)	UI 설계뿐만 아니라 스토리보드, 플로 차트, 디스크립션 등을 작성할 수 있는 도구입니다. 네이버에서 만든 프로토타이핑 툴로 다양한 기능을 지원합니다.
         네이버 프로토나우 (ProtoNOW)	다양한 목업 및 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계를 지원하는 도구입니다. 네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트 등의 기능을 제공합니다.

      3. ui 디자인 도구

         도구	설명
         스케치 (Sketch)	UI 디자인에 최적화된 툴로 다양한 목업 및 템플릿을 활용하여 레이아웃을 설계할 수 있습니다.
         어도비 익스피리언스 디자인 CC (Adobe XD)	UI 디자인에 특화된 도구로, 쉽고 직관적인 인터페이스를 제공하여 사용자가 편리하게 디자인을 할 수 있습니다. 포토샵, 일러스트와의 연동도 지원합니다.