일상 이야기

팬심 가득했던 웹 페이지 제작

효빈 2024. 7. 25. 19:51

대학교 3학년부터 개발을 했고 창업 후 회사에서 개발자로 일을 했지만,

지금은 퇴사 후 강의를 제작하고 책을 쓰는 등의 교육 일을 하고 있다.

 

혼자서 다양한 일을 조금씩 하고있는 만큼, 고정적인 수입이 있지 않기 때문에 외주를 함께 병행하고 있다. 외주로는 보통 데이터를 수집하는 웹 페이지나 이벤트 페이지를 제작하고 있다.

 

대상혁...

 

올해에는 특별한 웹 페이지 제작 요청이 왔는데, 바로 페이커 선수의 10주년 기념

'페이커 신전' 팝업 진행 시 사용될 이벤트 페이지였다.

 

개인적으로 T1 팬이라 정말 재미있게 작업을 했고, 내가 만든 페이지가

페이커 선수를 기념하는 팝업에서 사용된다고 하니 정말 영광이었다.

 

실제로 팝업에 놀러 가서 방문하신 분들이 사용하는 것을 보니 정말 뿌듯했다.

특히 페이커 선수가 직접 사용하는 영상을 봤을 땐... 감격스러웠다..!

 

실제로 사용하시는 모습을 보니 뿌듯했습니다

 

 

내가 제작한 건 레전드 플레이 8강 월드컵 페이지와 이벤트 상품을 추첨하는 룰렛 페이지인데

두 페이지가 간단해 보이지만 은근히 까다로운 포인트들이 있었다.

 

keycap 받으신 분들 축하드립니다..

 

현장에서 1개의 아이패드로만 사용을 했기 때문에 남은 상품들의 수와 현재까지 돌린 룰렛의 횟수등의 데이터는 localStorage를 사용해서 간단하게 개발할 수 있었다. 초기화를 하는 과정 또한 localStorage에 있는 count 값을 수정하면서 쉽게 개발을 진행했다.

 

룰렛은 캔버스를 사용해 개발을 했고, 360도 중 각각의 제품들이 차지하는 각도를 계산해 제품들을 알맞게 나타냈다. 그리고 각각의 제품에 맞는 확률값을 기준으로 상품이 랜덤 하게 당첨될 수 있도록 개발을 했다.

 

캔버스를 사용하는데 익숙하지 않아 약간의 어려움이 있었고, 회전을 시키고, 각도도 계산하고 확률을 계산해야 되다 보니 수학적(?)으로도 약간의 어려움이 있었다.. 

개인적으로는 세계선을 바꾼 플레이에 한표!

 

그다음 흔히 말하는 이상형 월드컵 제작이었다. 8강 월드컵이라 단순히 생각해 보면 개발하기 쉬워 보이지만, 무려 페이커님의 신전에 사용될 영상인 만큼, 고화질의 영상이기 때문에 버퍼링 혹은 로딩시간을 신경 써야 했다.

 

랜덤 하게 2개의 비디오를 나타낸 다음, 선택된 비디오들을 하나씩 배열에 담았다. 8강, 4강, 결승에 올라갈 때마다 점점 배열에 담긴 비디오들을 줄여나가는 식으로 개발을 하면 토너먼트 형식의 이상형 월드컵 웹 페이지는 쉽게 개발을 할 수 있다.

 

비디오는 로딩시간이 매우 짧아야 하고 왼쪽 영상과 오른쪽 영상이 동시에 플레이되지 않게 개발을 해야 했다. 처음엔 총 8개의 고화질 비디오를 무작정 플레이시켜봤지만, 역시나 로딩 시간이 매우 길었기 때문에 결국 비메오라는 서비스를 사용해서 개발을 해보려 했지만, 기본 요금제와 저렴한 요금제로는 원하는 기능을 사용할 수 없었다. 

 

이러한 문제는 영상이 8개밖에 없기도 하고,,, 제작 기간이 매우 짧아 빠르게 제작을 해야 했기 때문에 약간의 야매 기술로  웹 페이지 로딩 시 모든 영상을 플레이를 시켰고, 이 모든 영상들은 화면에 나타나지 않도록 숨김처리를 했다. 처음에 모든 영상을 플레이시켰기 때문에 실제로 화면에 나타난 영상들의 로딩 시간은 매우 짧았고 버퍼링도 비교적 없었다.

 

외주 작업은 금액과 기간에 맞게 제작해야 하기 때문에 유지보수 비용을 잘 고려해야 하고, 사용 목적에 맞게 알맞은 기술을 선택해서 빠르게 제작을 해야 한다. 되도록이면 저렴한 단가로, 하지만 부족함 없게 완벽한 웹 페이지들을 제작하고 있다.
(될 수 있으면 html, css, js만을 사용한다)

 

많은 외주 개발을 해왔지만, 너무나도 팬이었던 T1의 페이커 선수의 신전에 도움이 되는 웹 페이지를 제작할 수 있어어 너무 뿌듯했고 가장 기억에 남는 개발 작업이었던 것 같다.

'일상 이야기' 카테고리의 다른 글

인프콘🌱 후기  (0) 2024.08.06
프리랜서가 매일 매일 혼자 일하는 방법  (2) 2024.07.27