개인 프로젝트 / Demuu (Portfolio)
포트폴리오, 프로젝트 갤러리, 그리고 블로그 등을 한데 모은 통합 웹입니다.
이 웹사이트는 단순한 이력서와 포트폴리오 이상으로, 저를 보다 풍부하게 소개하고자 만들게 되었습니다.
포트폴리오, 프로젝트, 블로그 등 저와 관련된 모든 정보를 한 곳에서 확인할 수 있습니다.
웹 개발을 처음 공부했을 때부터 제작하고 싶었던 동적인 요소들이 풍부한 인터랙티브 웹을 디자인했습니다.
사용자가 웹을 탐색하는 동안 저만의 작업물과 이야기에 몰입할 수 있는 환경을 조성할 수 있을 것이라고 생각합니다.
호스팅 초기에는 다양한 동적 요소들로 인해 트래픽이 급증하면서 정상적인 동작이 어려울 정도로 렉이 발생했습니다.
메인 페이지는 동적 요소가 많아 스크롤 시 한 섹션씩 이동하도록 구현했으며,
현재 보고 있는 섹션을 제외한 다른 섹션들은 정지 상태로 유지하도록 최적화했습니다.
이미지의 경우, 해상도를 한 단계 낮추고 압축 후 webp 확장자로 변환하여 용량을 약 60% 이상 줄였습니다.
특히 Gallery 페이지는 기기에 가장 큰 부하를 주는 페이지였으며, 프로젝트 배너 중 수많은 DOM을
회전시켜 구현한 애니메이션을 동영상으로 교체했습니다.
또한 중앙 배너를 제외한 다른 배너의 애니메이션은 작동을 중지시켜 부하를 줄였습니다.
아쉬운 점으로는 성능이 낮은 기기에서 여전히 렉이 발생해 입체감을 위해 추가했던 반사 효과를 삭제해야 했습니다.
추가로 Home과 Gallery 페이지를 PC 및 Mobile 전용으로 분리 제작하여 로딩 속도를 개선했습니다.
이러한 최적화 작업을 통해 페이지 로딩 시간을 단축하고, 낮은 사양의 기기에서도 원활하게 사용할 수 있도록 개선했습니다.
이 프로젝트를 통해 기술적인 부분뿐만 아니라 서버 렌더링과 트래픽 최적화에 대한 다양한 방법을 학습할 수 있었습니다.
처음에는 가벼운 마음으로 시작했지만, 예상보다 많은 시간이 소요되었습니다.
특히 인터랙티브 웹을 처음 구축하면서 성능이 낮은 기기에서도 원활하게 작동해야 한다는 점을 충분히 고려하지 않았던 것이 문제였습니다.
다양한 기기에서 테스트를 진행하며 여러 문제가 드러났고, 이에 대한 최적화 작업을 프로젝트 후반에야 본격적으로 시작하게 되었습니다.
결과적으로 프로젝트 진행 기간은 계획보다 지연되었지만,
이를 통해 최적화의 중요성과 렌더링 지연 및 부하가 발생하는 지점을 심층적으로 이해할 수 있었습니다.
향후 프로젝트에서는 이러한 문제를 미리 예방하기 위해 초기 설계 단계부터 최적화를 고려하는 개발 방식을 적용할 계획입니다.