2022 12 14
- 기종 : 저어는 오늘 9시 40분에 일어났습니다
- 세연: ZEP 초성퀴즈 1등 기분 좋네여
- 정욱: 저는 50분쯤에 ZEP들어가서 돌아다니고있었습니다
- 종찬 : 장판 안틀고 자서 으슬으슬합니다
- 기술적인 고민들 문서화
- 각종 리팩토링
- 상수 관련 리팩토링
- 부제목 오브젝트 리팩토링
- 기술적인 고민 문서화
- 안쓰는 의존성 & 에셋 삭제, 로고 이미지 webp로 바꾸기
- 기술적인 고민 문서화
- 리팩토링 조금
- 기술적인 고민 문서화
- SSE를 이용한 로딩 프로그레스바 구현기
- 인덱스를 활용한 효율적인 쿼리
- 부하테스트 시도
-
서버가 터지기 전에 노션 api가 먼저 사용제한 걸림
-
200개까지는 서버가 터지지 않는 건 확인했으나, 트랜잭션 관련 이슈가 있었음
147개는 성공한듯? (타임아웃 30초)
“/api/gallery/create” (단독생성시 3초)
-
- 6주차 : 프로젝트 마무리 및 발표 준비, 문서화
- 월 : 버그 수정 및 리팩토링
- 화 : 기술적인 고민 문서화
- 수 : 데모 영상 및 발표 대본, 영상 제작
- 목 : 최종 버그 수정 및 배포
오늘은 네트워킹데이를 위해 준비해야 하는 영상에 대해 안내합니다. 12월 14일(수)까지 두 가지를 추가 제출해주세요. - 시연 영상: 주요 기능 시연 녹화본 (1분 내외)
- 발표 영상: “프로젝트에서 어떤 기술적인 경험을 했는가?”에 대한 발표 녹화본 (10분 내외) 각 팀별 프로젝트 소개 페이지의 '속성'에 영상 링크를 추가해주세요.
- 데모 영상에 무엇이 들어가는가?
- 시각화 소개
- 섬 배치, 워드클라우드, 제목 말풍선, 부제목 돌, 키워드 구름, 사진 파편
- 메인페이지→노션시각화→노션 페이지가 저렇게 변경됨→인터랙션
- 시각화 소개
- 발표 영상에 무엇이 들어가는가?
-
1사람당 2분동안 기술적인 도전들?
-
간략한 프로젝트 소개(1분)
- 목차
- 팀 소개
- 프로젝트 소개
- 서비스 플로우
- 여기도 좀 정해야할듯
- 프로젝트 기술적 목표
- 어떻게 하면 3D 환경에서 더 쾌적한 경험을 제공할지
- 프레임률 50~60FPS
- 이건 생각했다가 1시쯤에 공유합시다
노션 데이터를 3D로 시각화해서 기록에 대한 동기부여 해주기
-
가상공간 표현? : 기존의 방식인 2D에 비해 사용자에게 시각적으로 더 풍부한 경험 제공
-
셰이더를 이용한 렌더링 최적화?
-
그리드 페이지네이션
⇒ 오픈월드 좌표상에서 어떻게 페이지네이션 할 지
-
이정욱 대본
(1번 슬라이드)
그리드 페이지네이션: 오픈월드 자표상에서 어떻게 페이지네이션을 하는가?
메인 페이지는 3D 오픈월드와 같은 모양새이며, 사용자는 플레이어의 움직임을 통해 상호작용을 하게 됩니다. 메인 페이지의 오브젝트는 서버 응답으로 받아온 정보를 통해 렌더링되는 구조이며, 오픈월드 형식의 3D맵에 한번에 대량의 물체를 렌더링하는 것은 불필요한 요청이 많아질 뿐만 아니라 성능 측면에서도 문제가 발생하게 됩니다. 따라서, 무한 스크롤이나 페이지네이션과 같이 데이터를 쪼개고 필요에 의해 렌더링 및 요청을 하기 위한 방안으로 '그리드 페이지네이션' 을 설계하였습니다.
(2번 슬라이드)
먼저, 전체 맵을 크기 50 x 50의 그리드로 쪼갭니다. 이후, 플레이어가 올라서 있는 그리드 기준 8방향의 그리드를 포함한 총 9개의 그리드가 렌더링 영역에 포함됩니다. 각 그리드마다 한 번의 API요청이 발생하게 되며 응답으로는 최대 15개의 오브젝트 정보를 받습니다. 따라서 하나의 그리드에 렌더링 될 오브젝트의 개수는 최대 15개이며 렌더링 영역에 포함될 수 있는 오브젝트의 최대 개수는 135개가 됩니다.
(3번 슬라이드)
하지만, 초기 메인 페이지 진입 시에도 9개의 그리드가 포함된 렌더링 영역을 모두 그려주려면 각 그리드마다 요청이 발생해야 하므로 총 9번의 API요청을 보내야 합니다. 이를 해결하기 위해서 그리드를 map으로 관리하도록 하고 그리드에 방문하였을 때에만 요청을 보내고 렌더링하도록 하여 그리드 당 한 번의 API요청만 발생할 수 있도록 하였습니다.
정리하자면, 플레이어 주변 9개의 그리드가 선택적으로 렌더링 영역이 됩니다. 이 때 9개의 그리드를 모두 렌더링하는 것이 아닌 방문한 적이 있어 데이터를 가지고 있는 (캐시된) 그리드에 대해서 렌더링을 진행합니다. 따라서 9개의 그리드가 모두 렌더링 되려면 해당 그리드들을 모두 방문한 상태여야만 합니다.
이러한 그리드 페이지네이션을 위한 알고리즘을 이용하면 사용자는 플레이어를 움직일 때마다 데이터가 계속 바뀌어 마치 오픈월드 게임을 하는 것과 같은 경험을 할 수 있으며 방문한 그리드에 대한 요청만 보내기 때문에 서버에 부담을 덜 주게 됩니다. 또한, 초기 렌더링 성능 저하를 일으키지 않습니다.
-
-
-
노션 페이지 시각화: 어떻게 빠르게, 그러면서도 사용자에게 부담되지 않게 보여주면서 빠르게 프로세스를 할 수 있는가? 사용자 경험을 증대시키기 위함
-
노션에서 데이터 불러오는거 어떻게 최적화했는지 (Promise.all)
⇒ 2분이나 걸리면 답답해요
-
갤러리 생성같이 오래 걸리는 건 얼마나 진행되고... (SSE)
⇒ 얼마나 걸릴 지 모르면 답답해요
-
-
렌더링 최적화(셰이더)
-
사용자 경험 최적화(SSE)
-
로딩 최적화(무한 페이지네이션)
-
로딩 최적화2(gzip) -
기종: 고오-급 기술 셰-이더
-
세연: gzip 어제 썼던거 조금 말하면 될듯 -
종찬: SSE 할까나요
-
정욱: 무한 페이지네이션?
-
-
https://vrew.voyagerx.com/ko/
- 브류 앱을 사용해서 영상편집을 하자
- 목표(왜했는지)→구현→성과 or 장점(수치 넣으면 좋음)
- 데모 영상 및 발표 대본, 영상 제작
