[Project] 프로젝트 설계

Updated: 2024.08.06

Categories: Project

Tags: practice, project

📌 개인적인 공간으로 공부를 기록하고 복습하기 위해 사용하는 블로그입니다.
정확하지 않은 정보가 있을 수 있으니 참고바랍니다 :😸
[틀린 내용은 댓글로 남겨주시면 복받으실거에요]

프로젝트 설계

화면정의서

소프트웨어 개발 단계

분석 단계
- 소프트웨어를 개발하기 위해서 만들려고 하는 것에 대한 분석을 먼저 해야 한다.
- 사용자 요구사항 정의서, 유스 케이스 명세서, 요구사항 추적표와 같은 문서를 작성함으로써 보다 구체적으로 분석할 수 있어야 한다.
설계 단계
- 분석이 끝났다면 실제로 구현하기 위해서 올바른 설계를 해야 한다.
- 설계 또한 이전에 작성됐던 SRS를 기반으로 하여 범주에 벗어나지 않는 설계를 할 필요가 있다.
- 설계 단계에서는 클래스 설계서, 사용자 인터페이스 설계서, 컴포넌트 설계서, 인터페이스 설계서, 아키텍처 설계서, 총괄시험 계획서, 시스템시험 시나리오, 엔티티 관계 모형 기술서, 데이터베이스 설계서, 통합시험 시나리오, 단위시험 케이스, 데이터 전환 및 초기데이터 설계서와 같은 문서를 작성함으로써 보다 구체적으로 설계해야 한다.
구현 단계
- 분석 → 설계의 과정을 통해 실질적인 구현의 준비를 마무리 한다.
- 구현 단계에서는 실제 개발 작업이 이루어지며 소프트웨어의 모습이 갖춰지는 단계.
- 프로그램 코드, 단위 시험 결과서, DB 생성 스크립트 등을 문서화 하여 개발의 진행 정도를 알 수 있게 가시화 해야 한다.
시험 단계
- 구현이 완료되면 전체적인 테스트를 할 필요가 있다.
- 통합시험 결과서, 시스템시험 결과서, 사용자 지침서, 운영자 지침서, 시스템 설치 결과서, 인수시험 시나리오, 인수시험 결과서와 같은 문서를 작성함으로써 보다 구체적으로 시험을 진행한다.
- 또한 시험 단계에서 사용자, 운영자를 위한 지침서(매뉴얼)를 작성한다.

화면 정의서

설계 단계에서 작성하는 ‘화면 정의서’는 매우 중요.

작성 목적
시스템이 제공하는 사용자 인터페이스의 전체 구조와 메뉴 형식, 화면 목록과 화면의 상세 설계 내역을 기술한다.
- NIA(한국정보화진흥원)에서는 화면 정의서의 작성 목적을 위와 같이 정의한다.
- 작성할 부분이 상당히 많은 문서지만 매우 중요한 설계 단계 문서이므로 어떻게 작성하는지 직접 경험해보고 해당 문서를 구현 단계에서 활용하여 개발 할 수 있는 것에 목표를 두면 좋다.
작성 방법
전체 시스템에 대한 사용자 인터페이스의 구조를 사용자에게 제공하는 메뉴 형식으로 기술하고, 화면 및 출력으로 구분하여 목록을 작성하며, 화면의 상세 설계 내용을 화면별로 기술한다.
- 화면을 쉽고 편리하게 그릴 수 있는 툴을 사용하여 예상하는 화면을 그리고 예상 화면을 문서에 삽입 한 후, 화면에 대한 설명을 추가하여 하나의 화면 정의를 한다.
- 각 화면에는 화면 아이디를 부여하여 해당 화면을 쉽게 구분할 수 있게 하고
- 또한 화면에서 기능 동작에 대한 정의를 함께 표시한다.
- 해당 동작은 앞서 작성한 사용자 요구사항 정의서의 아이디를 부여하여 두 문서가 연관성을 갖게 해야 한다
항목 설명

화면 ID : 설계된 화면에 고유값을 부여
화면명 : 알아볼 수 있는 화면에 대한 제목을 부여
화면 유형 : 입력 / 출력 중 알맞은 유형을 선택하고 기타 유형이 존재한다면 알맞게 작성하기
메뉴 경로 : 해당 화면이 서비스의 어디에 위치하는지 설명한다.
화면 개요 : 화면의 간단한 설명을 추가한다.
화면 미리보기 : 와이어 프레임과 같은 화면 설계 툴을 사용하여 작성된 화면 미리보기 이미지를 삽입하고 해당 화면에서 기능을 수행하는 항목을 번호를 매겨 표시
기능 번호 : 화면 미리보기에서 표시된 기능의 번호를 기입한다./.
요구사항 아이디 : 해당 기능이 사용자 요구사항 명세서에 기술된 어떤 항목인지를 아이디로 표시
API 활용 여부 : 이 기능이 API를 활용하는 기능인지를 구분한다.
API 주소 : API 활용 여부가 YES라면 어떤 API를 호출하는지 기입
유효성 체크 : 기능이 동작하는 동안 화면 내에서 필수적으로 사용되어야 할 데이터에 대한 유효성 체크를 한다. 예) 회원 가입을 할 때 아이디와 비밀번호는 필수로 작성되어야 한다. → 아이디, 비밀번호

와이어프레임과 목업 실습

기존에 계속 실습했었던 커피주문 애플리케이션 프로그램의 와이어 프레임과 목업을 만든다고 생각하고, 작성해보는 실습을 했는데

요즘 많이 사용한다는 피그마를 써보기로 했다…!

와이어프레임

사실, 태그가 조금 헷갈렸는데 반복되는 것들은 <li> tag를 사용한다거나 해야 하는데 무조건 <div>로 처음 에 채웠었다….!

link도 이미지에 link를 넣을지 tag를 사용할지,,, 프론트 쪽은 많이 해보지를 않아서 많이 헷갈렸고.

화면 다섯개 만드는데도 꽤 많은 시간이 걸렸다, 이전에 사용자 요구사항 정의서를 더 자세하게 작성했더라면

화면을 구성하는데 크게 어려움이 없었을 것 같다.

화면갯수가 10개 내외라고 생각했는데 정말 구체적으로 작성된 와이어프레임은 20개 이상이 나와야 한다고 한다,

목업

와이어 프레임만큼만 만드느라 목업도 딱 6개 이다.

다른 분들은 바나프레소나 스타벅스 어플을 많이 참고하던데

나는 참고를 하지않고 처음에 만들어서 약간 올드한 느낌이 살짝 있어서

뒤늦게 참고했다. ….

목업에서 사용한 사진 출처

사진에 마우스를 갖다대면 장바구니 링크나 이동 링크가 나올 수 있게 구현하고 싶었는데

피그마 유료버전만 가능한듯 했다…

피그마가 꽤나 유용해서 다음에도 참고하면 좋을 듯하다.

역시 참고를 하다보니 뒤로가기 버튼이라던지 상세페이지라던지 빠져 있는 부분이 정말 많아서

실습을 하고 부족했던 부분을 찾을 수 있어서..다행이다 생각했다.

프로젝트 전에라도 해서 정말 정말 다행이다 ,

Hezzi