[정처기 실기] 「1」 | 소프트웨어 구축 - (1.2) 소프트웨어 설계, 화면 설계

[정처기 실기] 「1」 | 소프트웨어 구축 - (1.2) 소프트웨어 설계, 화면 설계

> 「1」 소프트웨어 구축

「2」 데이터베이스 구축

「3」 운영체제

「4」 네트워크

「5」 정보보안

「6」 신기술 용어

 

1. 소프트웨어 공학 개념

2. 프로젝트 계획 / 분석

> 3. 소프트웨어 설계

> 4. 화면 설계

5. 서버 프로그램 구현

6. 인터페이스 구현

7. 객체지향 구현

8. 애플리케이션 테스트 관리

9. 소프트웨어 유지보수

10. 제품 소프트웨어 패키징

3. 소프트웨어 설계

소프트웨어 설계의 기본 원칙

소프트웨어 설계

 

○ 요구사항 명세서를 바탕으로 소프트웨어의 구체적인 설계서를 작성하는 단계

○ 소프트웨어 설계의 종류

  - 상위설계(High-level Design) : 아키텍처, 데이터, 인터페이스 정의, 사용자 인터페이스 설계

  - 하위설계(Low-level Design) : 모듈, 자료구조, 알고리즘

  - 협약에 의한 설계 : 선행조건, 결과조건, 불변조건

○ 소프트웨어 설계의 원리

  - 분할과 정복(Divide & Conquer) : 여러 개의 작은 서브시스템으로 나눠 각각을 완성

  - 추상화(Abstraction) : 과정(전반적인 흐름), 데이터(데이터 구조), 제어(대표 가능한 표현)

  - 단계적 분해(Stepwise Refinement) : 하향식 설계, 세부 내역은 뒤로 미루어 진행

  - 모듈화(Modulization) : 모듈 크기 ↑, 모듈 개수 ↓, 모듈간 통합비용 ↓

  - 정보은닉(Information Hiding)

  - 결합도와 응집도

 

설계 모델링

○ 소프트웨어의 구조와 기능을 그래픽적으로 표현한 것

○ 설계 모델링 유형

  - 구조 모델링 : UML 정적 다이어그램

  - 행위 모델링 : UML 동적 다이어그램

 

소프트웨어 아키텍처

소프트웨어 아키텍처

○ 소프트웨어의 기본 구조로, 시스템의 컴포넌트와 이들 간의 관계를 기술

○ 소프트웨어 아키텍처 4 + 1 뷰

  - 논리 뷰(Logical) : 시스템의 기능적 요구사항

  - 구현 뷰(Implementation) : 모듈의 구성과 개발자의 관점을 반영

  - 프로세스 뷰(Process) : 프로그램 실행 시의 시스템을 표현

  - 배치 뷰(Deployment) : 시스템의 물리적 배치

  - 유스케이스 뷰(Use Case) : 아키텍처 설계 / 검증을 주도

 

소프트웨어 아키텍처 패턴

○ 재사용 가능한 소프트웨어 아키텍처의 해결책으로, 공통적인 설계 문제에 대한 일반적인 접근 방법 제시

○ 소프트웨어 아키텍처 패턴 종류

  - 계층화 패턴(Layered) : OSI 7 계층

  - 클라이언트-서버 패턴(Client-Server) : 클라이언트에서 요청하면 서버에서 응답, 서로 독립적

  - 마스터-슬레이브 패턴(Master-Slave) : 마스터가 나눠주고 슬레이브가 처리된 결과 반환, 분산 처리, 병렬 컴퓨팅

  - 파이프-필터 패턴(Pipe-Filter) : 단방향으로 흐르며, 필터 이동 시 오버헤드, UNIX 쉘

  - 브로커 패턴(Broker) : 컴포넌트와 사용자를 연결, 분산 환경 시스템

  - 피어 투 피어 패턴(Peer to Peer) : 컴퓨터와 컴퓨터가 직접 연결, 멀티스레팅 방식

  - 이벤트-버스 패턴(Event-Bus) : 이벤트 메시지 발행 시 구독한 리스너가 이벤트 처리

  - 모델-뷰-컨트롤러 패턴(MVC) : 모델(데이터 관리), 뷰(화면 관리), 컨트롤러(처리), 대화형 애플리케이션

  - 블랙보드 패턴(Blackboard) : 알려지지 않은 문제점

  - 인터프리터 패턴(Interpreter) : 특정 언어로 작성된 프로그램 해석

 

UML

UML(Unified Modeling Language)

○ 소프트웨어 시스템을 시각화 / 문서화하고, 소프트웨어 시스템의 구조와 동작을 명세하는 표준화된 모델링 언어

○ 특징 : 가시화 언어, 명세화 언어, 구축 언어, 문서화 언어

 

UML 구성요소

○ 사물(Things) : 구조사물(개념, 물리적 요소), 행동사물, 그룹사물, 주해사물(제약조건)

○ 관계(Relationship)

  - 일반화 관계(Generalization) : 상속관계

  - 연관관계(Association) : 관련된 관계

  - 의존관계(Dependency) : 짧은 시간만 사용하는 관계, 오퍼레이션 수행

  - 실체화 관계(Realization) : 추상 메서드를 오버라이딩

  - 집합관계 > 집약관계(Aggregation) : 부분 객체는 독립적

  - 집합관계 > 합성관계(Composition) : 부분 객체는 의존적

○ 다이어그램(Diagram)

  - 구조(정적) 다이어그램

    : 클래스 다이어그램(Class) : 클래스 사이의 관계 / 속성 표현

    : 객체 다이어그램(Object) : 인스턴스를 객체와 객체 사이의 관계로 표현

    : 컴포넌트 다이어그램(Component) : 구현 모델인 컴포넌트 간의 관계 표현

    : 배치 다이어그램(Deployment) : 물리적 요소의 위치 / 구조 표현

    : 복합체 구조 다이어그램(Composite Structure) : 클래스 / 컴포넌트의 복합체 내부 구조 표현

    : 패키지 다이어그램(Package) : UML의 다양한 모델요소를 그룹화하여 묶음

  - 행위(동적) 다이어그램

    : 유스케이스 다이어그램(Use Case) : 사용자 관점, 사용자(Actor) + 사용 사례(Use Case)

    : 순차 다이어그램(Sequence) : 주고받는 메시지 표현, 액터 / 객체 / 생명선 / 메시지 / 제어 삼각형

    : 커뮤니케이션 다이어그램(Communication) : 주고받는 메시지와 객체 간 연관관계까지 표현

    : 상태 다이어그램(State) : 상호작용에 따라 상태가 어떻게 변화하는지 표현

    : 활동 다이어그램(Activity) : 객체의 처리 로직 / 조건에 따른 처리의 흐름을 순서에 따라 표현

    : 상호작용 다이어그램(Interaction) : 상호작용 다이어그램 간 제어 프름 표현

    : 타이밍 다이어그램(Timing) : 객체 상태 변화와 시간 제약을 명시적으로 표현

4. 화면 설계

UI 설계

UI(User Interface)

○ UI : 컴퓨터, 웹 사이트, 시스템 등 정보 기기와 사용자 간의 상호작용을 가능하게 하는 매개체

○ UX : 사용자가 UI를 통해 경험하는 모든 것을 포함

○ UI 유형

  - CLI(Command Line Interface)

  - GUI(Graphical User Interface)

  - NUI(Natural User Interface)

  - OUI(Organic User Interface)

  - VUI(Voice User Interface)

  - ARUI(Augmented User Interface)

 

UI 설계

○ UI 요구사항 구분

  - 기능적 요구사항 : 시스템이 제공해야 하는 기능에 대한 요구사항

  - 비기능적 요구사항 : 사용성, 효용성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항

○ UI 설계 원칙

  - 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함

  - 유효성 : 사용자의 목적을 정확하게 달성해야 함

  - 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함

  - 유연성 : 사용자의 요구사항을 최대한 수용하며, 오류를 최소화함

○ UI 설계 도구

  - 와이어프레임(Wireframe) : 기획자, 디자이너가 사용

  - 스토리보드 : 디스크립션, 최종 산출 문서

  - 프로토타입 : 시제품 만듦

  - 목업(Mockup) : 정적인 요소를 구현한 것

  - 유스케이스

 

감성공학

○ 인간의 감성을 물리적 설계 요소로 번역하고 구현하는 기술

○ 제품과 관련된 인간의 감성 : 감각적 감성, 기능적 감성, 문화적 감성

○ 감성공학의 접근 방법

  - 1류 접근 방법 : 디자인 요소와 연결

  - 2류 접근 방법 : 문화적 감성을 반영

  - 3류 접근 방법 : 감성을 정량화

 

UI 구현

화면 레이아웃 구성

○ 레이아웃 : 특정 공간 내에서 여러 구성요소를 보기 좋고 효과적으로 배치하는 작업

○ 레이아웃 개발 구분 : HTML, CSS(Cascading Style Sheet), JavaScript

○ JavaScript 프레임워크

  - React : 페이스북에 의해 개발

  - Vue.js : Evan You에 의해 개발

  - AngularJS : 구글에 의해 개발

  - Ajax : 비동기적인 웹 애플리케이션 제작

 

UI 관련 용어

○ 웹 표준 : 월드 와이드 웹에서 사용되는 공식 표준

○ 웹 호환성 : 다양한 환경에서도 웹 서비스가 동일하게 작동하는 능력

○ 웹 접근성 : 장애인과 비장애인 모두가 웹 사이트 이용

○ 반응형 웹 : 화면 크기에 맞춰 내용을 적절하게 표시

○ 인포그래픽 : 정보와 그래픽을 결합

○ 브랜드 아이덴티티 : 특정 브랜드의 가치와 의미

○ 내비게이션 : 정보를 탐색하고 접근

○ 아코디언 : 확장, 축소 패널

○ 플레이스 홀더 : 입력 필드에 예시나 안내 문구

○ 필터링 : 데이터를 제외

○ 입력 폼 : 웹 서버로 전송할 수 있게 하는 웹 페이지의 부분

○ 입력 필드 : 사용자가 데이터를 입력하는 요소

○ 썸네일 : 작은 이미지

○ 레이블 : 입력 폼의 각 입력 필드를 식별

○ 대체 텍스트 : 이미지대신 제공되는 텍스트

 

 

 

 

 

 

 

 

 

출처 | 흥달쌤