영상제작 사이트 리뉴얼 프로젝트였습니다. 디자인을 제외한 1인 작업으로, 그누보드 기반에 테마로 반응형 구현했습니다.

기존 하드코딩 사이트에서 관리자 페이지를 통한 관리가 가능하도록 서비스를 구현했습니다.

이런 부분에 신경썼어요😎

다양한 애니메이션

Link hover, Click animation

마우스 hover / click

업체 특성 상 창의적인 / 감각적인 느낌을 주기위해 다양한 애니메이션을 적용했습니다.

작업 전 디자이너에게 참고 하기 좋은 사이트를 함께 전달했습니다. 디자이너와 계속해서 커뮤니케이션하며 디테일을 수정하면서 작업했습니다.

• 링크 호버 시 마우스가 커지는 애니메이션과 클릭 시 물결이 퍼지는 듯한 애니메이션으로 사용자에게 재미를 주었습니다

Scroll Load animation

Image loading

• 비동기 AJAX로 데이터를 가져와 시차를 두고 흘러나오는 애니메이션을 구현했습니다. Masonry와 imagesload.js 를 사용해 탭 클릭시 필터링과 이미지 로딩을 체크하여 애니메이션이 작동되게 했습니다.
• 무한 스크롤 방식으로 컨텐츠 개수를 js 동적 추가해서 우측 페이징으로 화면 내 이동할 수 있게 하였습니다.

사이트 관리 개선

기존 페이지를 추가를 위해선 HTML 파일을 새롭게 만들어야 하는 하드코딩 방식이었습니다. 그래서 영상팀이 아닌 IT팀에서 사이트를 관리했지만, 개발자가 아닌 사람들도 관리 가능한 사이트로 개선해야 했습니다.

디자인은 그누보드 테마로 화면을 구현했으며, 게시판 기능으로 포트폴리오 기능을, 내용 기능으로 Cantact Us및 Client정보를 수정할 수 있게 함으로 사이트 관리가 용이하게 개선했습니다.

후기

다양한 라이브러리를 사용해 볼 수 있던 프로젝트였습니다. 내부 요청으로 포트폴리오 상세페이지를 제작하지 않아, 개인적으로 아쉬웠던 기억이 있습니다.