어느 날 오후, 회사 슬랙 수다방에 재밌는 내용의 쓰레드가 내 멘션과 함께 업로드 되었다.
놀랍게도 웹 어워드 코리아와 지디웹 디자인 어워드에서 내가 제작했던 사이트가 수상을 했다는 내용이었다.
완전히 개발자로 전향하기 전, 학생 때의 나는 웹 디자인 쪽으로도 무척 관심이 많아 디자인 영감을 얻기 위해 여러가지 서비스를 이용했다.
그 중 한 곳이 지디웹 디자인이었는데, 그런 서비스에 내가 기여한 웹 페이지가 수상을 했다는 것이 지금도 굉장히 신기하고 묘한 감정을 전해준다.
(이제 우리가 다른 분들의 “쟤네처럼 만들어보자”의 “쟤네”가 될 수 있다는 느낌? 😅)
간단한 소개
페이지 구현을 위해서 Next.js, swiper, i18next, tailwindcss 등의 기술 스택이 사용되었다.
웹 페이지에 접속하면 처음 볼 수 있는 화면은 뷰티셀렉션의 다양한 브랜드를 소개하는 영역으로, 모션 그래픽과 브랜드에 대한 소개를 볼 수 있고 아래로 스와이프하여 다른 브랜드들을 확인할 수 있다.
이후 일반 스크롤 방식으로 전환되어 회사에 대한 더 자세한 내용들을 확인할 수 있는 구조다.
아래에는 History와 News를 확인할 수 있는 영역이 있는데, 사내 PR Manager님이 게시할 내용을 편하게 관리하고 싶다는 요청 사항이 있으셔서 Notion 관련 라이브러리를 사용하여 (거의) 실시간으로 업데이트 될 수 있도록 하였다.
어려웠던 부분들
페이지를 제작하며 어려웠던 부분은 크게 2가지 정도로 나뉘었다.
1. 자연스럽게 전환되어야 하는 스크롤
브랜드 소개 영역의 Swiper 이후 자연스럽게 웹의 일반적인 스크롤로 전환되어야하는데, 이 부분을 구현하는데에 다소 어려움이 있었다.
- 기기 별 다른 조작 방식
- 마우스 휠, 클릭 이벤트, 터치 이벤트 등
- Swiper.js의 복잡한 동작 방식과 콜백 이벤트
2. 너무나도 많은 페이지 리소스
작성하고 있는 현재도 그렇지만, 페이지에 접속하면 사용자들은 페이지를 구성하고 있는 많은 이미지와 모션 그래픽 영상을 다운로드 해야 한다. 그 리소스는 약 88mb에 이른다.
초기 기획 시에는 회사 소개 페이지의 특성상 유저 재방문율이 적어 페이지 로딩이 느리더라도 유저에게 제대로 된 우리의 아이덴티티를 전달하자는 목표가 정해져 다른 부분에 더 공수를 들였다.
하지만 페이지가 IR, PR 등에 사용되기 시작하면서 웹 페이지는 더 빠르게 동작해야 했고 다운로드 리소스를 어떻게 관리할 것 인가에 대한 연구가 필요했다.
이 부분은 앞으로도 계속 고민해야할 숙제일 것 같다.