[클라우딩 어플리케이션 엔지니어링 TIL] - 6주차 프로젝트 명세서

프로젝트 명세서

프로젝트 명세서란?

• 프로젝트 목표와 범위
• 구현해야 하는 기능, 디자인
• 마감 기한 등이 포함된 상세 계획
• 청사진, 설계도라고 할 수 있음

필요한 이유

• 개발자와 클라이언트의 의사소통 병목을 줄임
• 팀 내의 프로젝트에 대한 공통 목표 설정
• 즉 방향성을 올바르게 잡을 수 있도록 함

포함되어야 하는 내용

• 프로젝트 목표, 달성 범위
• 프로젝트 일정
• 프로젝트 상세 기능 명세, 플로우 차트
• 테스트 계획
• 배포 전략

프로젝트 명세서를 읽고 개발을 잘 해내기 위해서는 다음고 같은 흐름으로 개발하는 것이 좋다.

1. 명세 확인
2. 문제 정의
3. 정의한 문제를 통해 요구사항 분석
4. 분석한 요구사항을 기반으로 대략적인 코드(ex: pseudo-code) 흐름 작성
5. 실제 코드 작성
6. 에러가 발생하면 2~4번에서 문제가 있는지 확인 후 5번을 다시 확인

퍼즐 게임 명세서를 읽고 무엇을 개발해야할지 살펴보기

퍼즐 게임 명세서를 살펴보면 페이지는 크게 두가지로 구성된다.

1. 게임 시작 버튼이 있는 메인 페이지
2. 조각난 퍼즐 이미지와 원본 이미지가 있는 게임 페이지

페이지에 나눠서 구현해야하는 세부 기능은 다음과 같다.

• 메인 페이지에서는 사용자가 게임을 시작할 수 있는 게임 시작 버튼을 구현
• 버튼을 클릭하면 게임 페이지 안으로 이동

• 게임 페이지에서는 퍼즐로 사용할 '조각난 이미지'와 '원본 이미지'를 로드하고 '이미지 교체 버튼' 구현
• '조각난 이미지'는 3*3 크기로 제공하며 마우스 클릭으로 선택한 이미지의 위치를 바꾸어 '원본 이미지'와 똑같이 맞추는 것이 목적
• '이미지 교체 버튼'을 통해 사용자가 진행중인 퍼즐의 이미지를 바꿀 수 있도록 해야하며 버튼을 클릭하면 새로운 `조각난 이미지` 퍼즐이 무작위로 섞여 나타나고 맞춰야 하는 '원본 이미지`가 나타남
• '조각난 이미지'와 '원본 이미지'는 반드시 같아야 함

'조각난 이미지' 상세 구현

• 9조각의 이미지 중 하나를 클릭하면 선택되어야 하고 선택된 이미지를 다시 클릭하면 선택 해제 되어야 함. 이때 조각난 이미지를 선택하면 선택된 이미지에 css 효과가 적용되고 다시 클릭하면 이는 해제
• 하나의 이미지를 선택한 상태에서 나머지 8개 이미지 중 하나를 선택하면 두 이미지의 위치가 바뀌어야 함
• 해당 페이지 접속 때마다 이미지를 랜덤하게 로드해야 함

퍼즐 게임 명세서 기반 실습