본문 바로가기
카테고리 없음

군대에서 만든 3D 자기소개 웹 사이트

by Naker 2022. 4. 18.

군대에서 제작한 3D 자기소개 사이트

나의 첫 3D 웹 사이트

대한민국 수많은 남자들이 겪게 되는 군대에서 그저 주어진 자유시간을 흘려보내기보다는 사회로 나올 준비를 어느 정도 해놓고 싶었습니다. 그래서 군대에서 가볍게 몇 가지 프로젝트를 진행했는데, 그중 하나가 바로 3D 자기소개 웹 사이트입니다. 군대 사이버 지식 정보방에서 진행을 할 수 있을 정도로 세팅이 간편하고 쉬워야 했기 때문에 서버 작업이 따로 필요 없게 온라인 코딩 사이트에서 개발을 진행했습니다. 또한 백엔드보다 프론트엔드에 집중해서 비교적 단순한 프로젝트를 진행하고 싶어서 프론트 엔드로만 작업을 한 프로젝트입니다. 평소 가벼운 3D, 카드 모양의 요소를 약간의 3D 공간에 배치된 것처럼 보이게 만드는 작업은 해본 적 있었지만, 웹 페이지 내용의 대부분이 3D로 구성된 프로젝트는 해본 적이 없었습니다. 그 때문에 3D로 어떤 작업을 할 수 있을까 생각을 하게 됐고, 첫 3D 프로젝트였기 때문에 복잡한 도형을 다루기보단 단순한 텍스트들을 3D 공간에 배치해서 보여주는 것이 지루하지도 않고 3D 공간 또한 잘 표현할 수 있을 거라고 생각했습니다.

그래서 어떻게 만들어졌는가

다른 라이브러리 없이 순수 HTML, CSS, Vanila javascript를 사용해서 3D 공간에서 텍스트들 사이를 이동하는 웹 사이트를 만들었습니다. 미리 입력해 놓은 텍스트들을 z 축으로 일정 간격만큼 띄워서 배치하고, x축과 y축은 javascript 로딩 시에 랜덤으로 설정해서 배치했습니다. x축과 y축 같은 경우에는 javascript로딩 때마다 새로 랜덤 값을 받아오기 때문에 첫 텍스트를 제외한 다른 텍스트들은 매번 다른 위치에 배치되도록 해서 지루하지 않도록 했습니다.

첫 개발 단계에서는 스크롤로 z 축을 이동해서 텍스트들 사이를 오가는 느낌을 구상했지만, 막상 스크롤로만 z 축을 이동하다 보니 다음 텍스트의 좌표로 정확히 이동하는 부분을 컨트롤하는 데에 어려움이 있었습니다.

스크롤로 z축 이동시에 발생하는 문제점

이런 문제 때문에 페이지 하단 부분에 스크롤 방향에 따라 다음 텍스트로 바로 이동시켜주도록 스크롤이 작동하는 버튼, 그리고 처음 개발했던 일반 스크롤 이동 버튼 이렇게 두 버튼을 만들어서 사용자가 편한 방식으로 선택해서 콘텐츠를 즐길 수 있도록 구성을 했습니다. 그리고 내용과 인터페이스가 너무 단순하다는 생각과, 나중에 외국인들도 볼 수 있지 않을까라는 기대를 가지고 화면 왼쪽에 한국어와 영어 버전을 선택할 수 있는 버튼 또한 만들어져 있습니다.

첫 3D 웹 사이트를 완성하고

페이지를 완성한 뒤에 처음 들었던 감정은 물론 뿌듯함이었습니다. 군대에서 이런 작업을 결국 해내는구나 라는 생각이 들기도 했고, 3D 프로젝트를 시작하기 위해 투자했던 시간과 비용들이 헛되지 않았다는 생각이 들기도 했습니다. 내용 구성이 3D 공간에 배치되어있는 웹 페이지는 처음 제작해보는 것이었고 그만큼 감회가 새로웠습니다. 다만 3D 공간에 표현할만한 문구들이 어떤 것이 있을까라는 생각을 하다가 결국 아무 말이나 적기 시작했고 나중에 찾아서 읽어보니 약간 부끄러운 느낌이 들기도 했습니다.

또 아쉬운 부분은 퍼포먼스가 좋지 않다는 점입니다. 로컬 환경에서는 큰 문제없이 작동하는 모습을 확인했지만 나중에 서버에 올리고 확인을 해보니 버벅거리는 부분이 굉장히 많았습니다.

일반 스크롤로 작동하는 버전에서도 아쉬움이 있었는데요. 바로 다음 텍스트의 좌표로 정확히 이동하는 부분을 방치하고 다른 버튼을 추가함으로써 스크롤 문제를 해결하려 했던 부분입니다. 처음에는 사용자에게 다양한 선택지를 제공하는 거라고 생각했지만, 사실상 스크롤 이슈를 회피한 제 모습을 반영하고 있었죠.

그럼 리뉴얼

그래서 생각한 것이 해당 웹 페이지를 리뉴얼하는 것입니다. 현재 Ramble, '두서없이 지껄이다'라는 뜻의 타이틀을 가지고 제 웹 사이트에 올라와있는데 퍼포먼스가 상당히 안 좋은 부분을 확인하실 수 있습니다. 내용도 내용이지만 이 퍼포먼스가 안 좋은 심각한 문제를 해결하고, 그 외에 아쉬웠던 사용성과 내용 같은 부분들 또한 개선하고 수정하기 위해 해당 웹 페이지를 리뉴얼할 생각인데요. 그 리뉴얼을 하는 과정과 결과, 그리고 기회가 된다면 기술 블로그다운 기술적인 부분도 글로써 남길 수 있도록 노력을 해볼 생각입니다.

댓글0