[이전 포스팅](https://www.chanstory.dev/blog/post/22)에서는 ROIT API KEY를 활용해서 발로란트 유저 순위표를 구현했습니다.
이번 포스팅은 발로란트 가이드 페이지를 만드는 포스팅이며 ROIT API와는 관련이 없습니다.
 

## 🤔 가이드 페이지를 제작하는 이유

FPS 게임에서 가장 중요한 요소는 플레이어의 실력, 즉 에임이 가장 중요합니다.
하지만 발로란트에서는 다양한 캐릭터가 존재하고 캐릭터마다 고유한 기술들을 가지고 있으며 이를 잘 활용한다면 교전에서 훨씬 유리한 상황을 가져올 수 있습니다.

 

실제로 많은 유저들이 캐릭터 기술과 관련된 정보를 찾기 위해 노력합니다.
그리고 대부분의 정보는 유튜브에서 찾을 수 있으며 저도 대부분의 정보를 유튜브를 활용해 찾습니다.
유튜브를 참고하는 것도 좋은 방법이지만 이 방법에는 단점이 있습니다.
정보가 모두 분산되어 있어서 특정 기술을 찾기위해 먼저 영상을 검색해서 찾고 해당 영상에서 필요한 부분을 찾기 위해 일정 시간대를 찾아 확인해야합니다.

 

위와 같은 불편함을 느끼고 필요한 정보들이 모여있는 서비스가 있으면 좋겠다고 생각하여 가이드 페이지를 제작해보기로 결정했습니다.

 
 

## ✏ 가이드 페이지 기획
가이드 페이지는 제가 실제로 플레이하면서 불편함을 느꼈던 부분을 참고하여 기획했습니다.
예를들어 유트브의 기술 가이드 영상을 참고하게 되면 플레이에 앞서 혼자 연습하며 기술이나 팁을 사용하기 위한 조건(위치, 조준선, UI 등)을 암기해야합니다.
그런데 이 기술이나 팁을 많이 암기하면 실제 플레이에서 조금씩 잊어버리는 부분이 발생할 수 밖에 없고 플레이중에 다시 영상을 검색하고 특정 시간대를 찾아 내는 것은 너무 불편하죠.

 

이런 불편함을 해결하기 위해 아래와 같은 기능들을 기획했습니다.

 

1. **캐릭터, 기술별로 나누어진 가이드 영상**
 원하는 캐릭터, 원하는 맵, 원하는 기술을 쉽게 찾을 수 있도록 카테고리화된 영상을 제공합니다.
2. **기술을 사용하기 위한 조건(에임 위치, UI 위치)에 대한 참고 사진**
 기술 사용을 위한 조건을 잊어버렸을 때 영상을 다시 볼 필요 없이 사진을 참고하여 기억날 수 있도록 돕습니다.
3. **기술을 사용하기 위한 조건(점프, 앉기와 같은 동작)에 대한 팁**
 기술 사용을 위한 조건을 잊어버렸을 때 영상을 다시 볼 필요 없이 사진을 참고하여 기억날 수 있도록 돕습니다.

 
모든 기능은 플레이중에 모바일로 동시에 확인할 수 있도록 어색함 없는 반응형 디자인을 제공해야합니다.

 
 

## 🛠 가이드 페이지 기능 구현
먼저 가이드 영상은 youtube를 활용하기로 했습니다.
동영상 클라우드에 영상을 저장하고 서비스를 구현하는 것이 커스터마이징, 성능 최적화 등의 장점이 있는 것은 알고 있지만 클라우드 서비스는 비용이 발생하는 반면 youtube는 비용이 발생하지 않습니다. 또한 youtube에 업로드한 영상을 통해 웹서비스를 알게되는 사용자도 생길 수 있습니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/cefa0427-de48-4ba7-bc00-d59c8f7ac300/public)

플레이어는 '[react-player](https://www.npmjs.com/package/react-player)' 라이브러리를 사용했고 DB에 유튜브 링크 정보를 담아 클라이언트에서 필요한 영상을 재생할 수 있도록 했습니다.

 

참고 사진과 팁은 이미지와 텍스트로 간단하게 보여주도록 구현했으며 참고 사진은 여러장이 보여지는게 가능하도록 flex display를 사용했고 클릭시 확대된 이미지가 모달로 나오도록 구현했습니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/b1c9d3bb-2f7a-45dd-c9d5-21fe99995600/public)

 

각 가이드의 타이틀은 h2 태그로 작성했고 원하는 가이드의 위치를 쉽게 찾을 수 있도록 h2 태그 내의 텍스트들을 모아서 목록으로 보여주는 UI를 구현했습니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/e77c39fd-cb3e-41aa-ed75-884efe868900/public)


또한 편의성을 위해 목록에서 가이드를 클릭하면 해당 가이드의 위치로 스크롤이 이동하도록 했습니다.

 
 


## 🖥 Static Site Generator를 이용해 백엔드 사용량 줄이기
가이드 페이지는 데이터의 변화가 적습니다.
가이드가 작성되거나 수정되는 주기가 길기 때문에 사용자는 항상 같은 데이터로 이루어진 같은 화면을 보는 상황이 대부분입니다.
 
같은 화면만 보여주는 페이지를 사용자가 방문할 때마다 api를 호출하여 백엔드 사용량을 늘리는 것은 불필요하다고 생각해서 가이드 페이지를 Next.js 프레임워크의 SSG(Static Site Generator)를 이용해 프로젝트 빌드 시, 혹은 일정 주기(하루)에 한번만 api를 호출해 데이터를 확인하고 정적 페이지로 생성하도록 구현했습니다.

 
 

## 마치며
현재는 웹사이트 이용자가 없기 때문에 어느점이 불편한지 알 수가 없어 개선하지 않고 있지만 일단 저는 잘 쓰고 있습니다..😂
완성된 가이드 기능은 [여기](https://valin2.kr/guide)에서 확인할 수 있습니다.
 
신기하게 업로드 외에 아무것도 안하고 있는 [유튜브](https://www.youtube.com/channel/UCnESNDLPYehOJY3n5j0c5NQ)는 2000 조회수에 구독자가 6명이네요...
설명란에 웹사이트 주소도 적어 놓긴 했지만 다들 모바일로 봐서 설멸란이 안보이나봅니다😭

[이전 포스팅](https://www.chanstory.dev/blog/post/22)에서는 ROIT API KEY를 활용해서 발로란트 유저 순위표를 구현했습니다.
이번 포스팅은 발로란트 가이드 페이지를 만드는 포스팅이며 ROIT API와는 관련이 없습니다.

[VALIN2.KR #3] 발로란트 가이드 만들기