ABCDEFGHIJKLMNOPQRSTUVWXYZ
1
우선순위진행상태
2
우선순위 최상
(필수)		진행 예정
3
우선순위 상진행중
4
우선순위 중완료
5
우선순위 하진행하지 않음
6
우선순위 최하
7
회의중
8
9
Product Backlog
10
번호분류스토리세부 구현우선순위진행 상태담당자
11
1개발 환경프론트엔드 개발 환경을 구성한다.1-1 번들링 툴을 이용하여 react 프로젝트를 구성한다. (개발, 배포버전 관리가능)공통
12
1-2 Babel을 추가하고 ES2017로 트랜스파일링되는 것을 확인한다.
13
1-3 Sass를 추가하고 SCSS가 잘 컴파일되어 번들링되는 것을 확인한다.공통
14
1-4 Typescript를 세팅한다.공통
15
1-5 ESLint를 세팅하고, 이를 적용시킨다.공통
16
1-6 react three fiber, drei 추가세연
17
1-7 three.js 캔버스에 정육면체를 렌더링한다.세연
18
1-8 three.js 캔버스에 조명을 추가한다.세연
19
1-9 three.js 캔버스에 카메라를 추가한다.세연
20
1-10 three.js 캔버스에 분홍색 그라데이션 배경을 추가한다.세연
21
2백엔드 개발 환경을 구성한다.2-1 Node.js express 서버를 구성한다.공통
22
2-2 MongoDB 클라우드 서비스를 사용하여 데이터베이스를 생성한다.공통
23
2-3 mongoose를 이용하여 서버와 DB연결을 확인한다.공통
24
2-4 Python FastAPI 자연어 처리 서버를 구성한다.공통
25
2-5 Python 서버와 Node.js 서버 간 통신을 테스트한다.공통
26
2-6 .env 파일을 서브모듈로 관리한다.
27
3배포 환경 (CI / CD)Github Action과 Docker 연동3-1 Node.js 서버와 Python 서버의 Dockerfile을 작성한다.공통
28
3-2 Dockerfile로 이미지가 정상 생성되는 지 확인한다.공통
29
3-3 github action .yml을 작성해 컨테이너 이미지를 자동 생성한다.공통
30
3-4 생성한 이미지를 docker hub에 push한다.공통
31
4Github Action과 클라우드 서버 연동4-1 클라우드 서버 인스턴스를 생성한 후 docker를 설치한다.공통
32
4-2 클라우드 서버에서 docker hub에 로그인한다.공통
33
4-3 github action으로 클라우드 서버에 ssh 정상 연결을 확인한다.공통
34
4-4 3번에서 생성한 이미지를 실행하게 끔 .yml을 작성한다.공통
35
4-5 배포한 서버가 정상 연결되는 지 확인한다.공통
36
5Https 적용하기5-1 각 이미지마다 서버를 띄우고 해당 서버 연결 확인종찬
37
5-2 서버 간 통신 정상 작동 확인종찬
38
5-3 프론트 서버와 Express 서버간 https 연결 구축 (CORS 때문에 필요할 듯..? )종찬
39
5-4 github action로 해당 설정 자동화 하기 ( 이 부분도 더 알아봐야 함 )종찬
40
6Kubernetes 설정6-1 nCloud Kubernetes 서비스를 생성한다.종찬
41
6-2 Docker 이미지를 사용해 Kubernetes 상에서 정상 작동이 되는 지 확인한다.
42
7Github Action과 Kubernetes 연동7-1 github action와 Kubernetes 연결이 되는 지 확인한다.
43
7-3 github action으로 Kubernetes에서 Docker 이미지를 pull 해와서 장착하는 로직을 구성한다.
44
7-4 Kubernetes 상에서 서버가 정상 작동이 되는 지 확인한다.
45
7-5 기존 로직과 합쳐 배포 자동화를 구축한다.
46
8셰이더셰이더를 구현한다.8-1 부들부들한 플라스틱같은 모뉴먼트 밸리 같은 셰이더를 구현한다.기종
47
9상단 바상단 바 상호작용9-1 타이틀이 클릭되면 메인 화면으로 이동된다.정욱
48
9-2 우측 메뉴에 로그인 여부를 확인할 수 있도록 유저 정보를 표시한다.정욱
49
10하단 바배경 음악이 재생된다.10-1 테마별 분위기에 맞는 음악을 넣는다.정욱
50
11우측 재생(재생 중지)버튼을 클릭한다.11-1 배경 음악을 재생하거나 중지한다.정욱
51
12우측 전체화면 버튼을 클릭한다.12-1 전체화면 버튼은 토글 상태를 가진다.(토글: 전체화면 전환<->해제)정욱
52
13스크린 샷 버튼을 클릭한다.13-1 스크린샷 버튼을 클릭하면 three.js에서 현재 렌더링 중인 화면이 저장된다.기종
53
13-2 three.js 캔버스 렌더러의 상태를 일시적으로 false로 변경 후 true로 변경해야 한다.기종
54
14Monument Gallery 깃허브 링크를 클릭한다.14-1 깃허브 링크를 클릭하면 우리 소스코드를 볼 수 있는 깃허브 레포지토리로 이동한다.정욱
55
15캐릭터 이동마우스, 키보드로 캐릭터 이동을 할 수 있다.15-1 wasd 및 화살표 방향키를 입력할 수 있다.세연, 기종
56
15-2 캐릭터 이동 시 카메라가 정 중앙의 플레이어를 비추도록 한다.(메인 화면의 경우)세연, 정욱, 기종
57
15-3 캐릭터 이동 시 카메라가 전후좌우로 이동한다.(1인칭 내부 공간의 경우)세연, 기종
58
15-4 캐릭터는 idle 애니메이션을 가지며, 이 애니메이션은 항시 재생되어야 한다.세연, 정욱, 기종
59
15-5 캐릭터가 방향을 변경하면 자연스럽게 바라보고 있는 방향으로 회전이 이루어져야 한다.세연, 정욱, 기종
60
15-6 캐릭터가 움직이면 움직이는 방향으로 플레이어가 앞으로 기울어져야 한다.세연, 정욱, 기종
61
16카메라 이동마우스, 키보드로 카메라 이동 상태를 조작할 수 있다.16-1 카메라 이동 모드 ON(PointerLockControl) 상태에서 특정 키를 누르면 OFF세연, 기종
62
16-2 카메라 이동 모드 OFF(OrbitControl) 상태에서 특정 키를 누르면 ON세연, 기종
63
17마우스 드래그로 카메라를 이동할 수 있다.17-1 OrbitControl 상태에서 캔버스를 드래그하면 카메라가 회전한다.세연, 기종
64
181인칭 UI1인칭 상태에서 UI 출력 여부는 카메라 이동 상태에 따라 달라진다.18-1 카메라 이동 모드 ON(PointerLockControl) 상태면, UI 출력 모드 OFF세연, 기종
65
18-2 카메라 이동 모드 OFF(OrbitControl) 상태면, UI 출력 모드 ON세연, 기종
66
19메인렌더링 된 작품탑들을 볼수있다.19-1 사용자 공간 데이터는 랜덤하게 10개가 불러와지며,
사용자가 공간을 벗어나면 다른 데이터를 불러온다.		종찬
67
19-2 동적으로 사용자의 공간 데이터를 불러올 때, 이미 로드된 데이터가 불러와지면 안 된다.종찬
68
19-3 사용자 공간 데이터들을 이용해 작품탑들을 렌더링한다.세연,정욱
69
19-4 작품탑은 캐릭터 주변 랜덤한 위치에 렌더링되며, 겹쳐질 수 없다.정욱
70
19-5 작품탑의 텍스처로 키워드 통계, 사진 썸네일이 보여진다.세연
71
19-6 작품탑 위에 소유자 이름이 보여진다.세연
72
19-7 작품탑이 있는 바닥에 해당 공간의 방문자 수가 렌더링된다.
73
19-8 작품탑이 처음에 생성되면 뿅하고 솟아오르는 바운싱 애니메이션으로 생성된다.
74
20다른 사용자의 작품탑들에 이동 &
작품탑 내부로 이동할 수 있다.		20-1 방향키로 이동해서 각 사용자들의 작품탑으로 이동할수 있다.세연, 정욱, 기종
75
20-2 작품탑 앞 패널에 플레이어가 위치하면 해당 작품탑의 내부 공간으로 이동한다.세연
76
20-3 작품탑 내부 공간으로 이동시 해당 공간의 방문자 수가 1 추가된다.정욱
77
21메인화면 하단에 있는 업로드 버튼을 클릭한다.21-1 업로드 버튼을 렌더링한다.정욱
78
21-2 로그인이 되어 있지 않다면, 업로드 버튼을 렌더링한다.정욱
79
21-3 로그인이 되어 있다면, 내 공간 이동 버튼을 렌더링한다.정욱
80
21-4 업로드 버튼이 클릭되면 OAuth 로그인 모달을 띄우도록 한다.공통
81
21-5 갤러리 생성 모달을 표시할 때, 기존에 저장된 갤러리가 존재한다면
기존 갤러리 입장을 선택할 수 있도록 한다.		기종
82
21-6 로그인 상태 확인 API 호출 로딩을 적용한다.정욱
83
21-7 갤러리 생성 페이지에서 캔버스에 샘플 페이지를 랜더링한다.정욱
84
21-7 생성하기 클릭 후, 데이터 베이스 저장 시까지 로딩을 적용한다.정욱
85
22내부 공간조작 모드를 변경할 수 있고 그에 따라 UI 보기/숨기기를 할수 있다.22-1 E키를 누르면 모드가 PointerLockControl/OrbitControl로 스위칭된다.세연,정욱,기종
86
22-2 모드가 PointerLockControl로 변경되면 UI를 숨기고, 그렇지 않으면 UI를 펼친다.세연,정욱,기종
87
23플레이어는 공간 바깥으로 나갈 수 없다.23-1 플레이어가 각 공간 바깥으로 가지 않도록 충돌 체크를 구현한다.
88
23-2 플레이어 RigidBody와 카메라의 위치를 동기화하고, 방향키를 누르면 RigidBody가 움직이도록 한다.정욱, 기종
89
24가상의 공간에서 중앙 거석 & 페이지 별 거석들을 볼 수 있다.24-1 바닥 요소를 구성한다.기종
90
24-2 3~5개의 키워드를 기준으로 페이지들을 분류하여 맵을 구성한다.종찬
91
24-3 페이지 생성 시간 정보를 이용하여 최근에 생성한 페이지일수록 가깝게 보이도록 한다.종찬
92
25중앙 거석으로 이동한다.25-1 거석 표면에는 전체 글 키워드 통계를 보여준다.기종
93
25-2 거석 가까이 이동하면 키워드들이 공중에서 둥둥 떠다니는 것이 보여지도록 한다.기종
94
25-3 키워드는 빌보드 방식을 이용하여 렌더링되며,
어느 각도에서 보든 동일한 정면을 바라보게 한다.		기종
95
26페이지 비석으로 이동한다.26-1 가장 큰 비석 표면에는 페이지 제목을 보여준다. 정욱
96
26-2 주변 비석 표면에는 소제목을 보여준다.세연
97
26-3 공중에는 페이지에서 추출한 키워드와 사진의 파편들이 떠다니도록 한다. 기종
98
26-4 키워드 클릭 시 해당 키워드를 쓴 부분을 보여준다.
99
26-5 사진 파편 클릭 시 사진 조립해서 보여준다.기종
100
26-6 빈도가 높은 키워드일수록 크게 보이도록 한다.기종