• date: 2018-11
• work position: web version develop
• url: https://bbuzzshow.bbuzzart.com

bbuzzart 에서 깁작스럽게 서울에서 전시를 한다고 하여 랜딩페이지를 만들게 되었다.
서비스에 들어가는 모습이 아니고 독립적인 사이트이기 때문에 디자인부터 새로 만들어지게 되어 새로운 기분으로 만들 수 있을거리는 기대감이 생긴다.

개발시작을 위한 준비

디테일한 기획 미팅에 참여하지 않았기에 곧장 디자인 결과물을 받는것부터 시작하게 되었다.

이번에는 반응형이 아닌 디스크탑 버전과 모바일 버전이 따로 존재한다. (컨텐츠가 전부 똑같아서 이게 의미가 있나 싶다.)
불행하게도 개발할 수 있는 시간이 부족해서 혼자서 모바일과 데스크탑 버전을 모두 개발하기는 힘들다고 느껴서 나는 데스크탑 버전을 개발하고 개발자 동료는 모바일 버전을 맡아서 디바이스에 따라 페이지가 출력되는 지점을 분기처리를 해두고 각자 맡은 영역을 작업했다.

마크업과 스타일시트 작성

프로그램이나 컨트롤이 필요한 부분이 거의 들어가지 않기 때문에 일반적인 html으로 코드를 작성해도 상관없지만 nuxt.js를 경험해보자는 차원에 nuxt.js프레임워크에서 작업을 시작했다.

디자인에서의 기초적인 형태는 최대한 빠르게 만들고나서 디테일하게 인터랙션이나 애니메이션들을 다듬는것을 목표를 삼고 html 마크업과 css 작업은 최대한 빠르게 작성했다.
페이지 하나에서 메뉴를 누르면 스크롤로 이동하는 방식이라 1페이지 사이트나 다름없으며 무엇보다 반응형 디자인이 아니라서 부담없이 작업할 수 있었다.

컨트롤과 인터랙션 작업

기능상 가장 신경을 써줘야하는 부분은 다음과 같다.

• 첫번째 섹션의 심볼 등장 씬
• 작가 그림을 누르면 작품과 그림이 달라지는 부분
• 이미지 슬라이더

먼저 내용에 크게 지장이 있고, 작업양이 많은 부분은 Artists 섹션 부분인데 vue의 기능을 활용하다보니 대단히 쉽게 구현이 가능했다.
기본적으로 사용할 수 있는 데이터 바인딩을 이용하면 어려운 일이 아니고 썸네일 이미지들을 만들고 값들의 트리를 만드는게 가장 큰 작업일 뿐이다.

이미지 슬라이더는 생각보다 까다로웠는데 양 옆의 슬라이드는 반이 잘려져 있는 형태이다보니 이런 방식을 지원하는 이미지 슬라이더 라이브러리는 별로 없었다.
운좋게도 라이브러리를 하나 찾을 수 있어서 적용을 하면서 다른 작은 부분들을 다듬었다.

첫번째 섹션의 모습은 어두운 배경이미지가 화면 전체에 가득차 있고, 심볼은 중앙에 배치돠어 있는 모습인데 뭔가 애니메이션을 넣는게 좋을거 같아 보여서 페이지가 열릴때 간단하게 등장하는 애니메이션을 만들어 보았다.
그리고 화면에 가득차있는 첫번째 씬에서 아래에 컨텐츠가 존재하는지 모를 가능성이 있기 때문에 아래로 향하는 화살표 버튼을 넣고 계속 움직이는 애니메이션을 넣어 보았다.

모바일과의 데이터 관리

개발을 따로 했지만 모바일과의 내용은 완전이 똑같기 때문에 다 만들어놓고 데이터를 통합할 필요가 있었다.
만약 내용 수정이 생기면 빠르고 번거로운 일을 줄이기 위하여 데이터 통합 작업은 필수가 되는 일이다.

End

개발기간이 짧은 편이다보니 디자인이나 제작 난이도가 그리높은 편은 아니었지만 간만에 신선한 작업을 할 수 있었다는 부분에서 재미있게 작업을 할 수 있었다.
아무래도 오랜 시간동안 서비스 사이트 운영만 해오다보니 작지만 새로운 작업에 몰입할 수 있었다고 생각한다.

사이트를 오픈하고, 홍보하고, 전시회까지 무사히 끝낼 수 있었다.

나중에는 서비스에서 특정 작가들만 추려내어 온라인에서 전시하는 사이트도 개발해봤으면 좋겠다고 생각도 들었다.