• date: 2016-02
• language: html, css, javascript
• tool: webstorm
• demo(desktop): https://projects.redgoose.me/2016/dq-artisee/web/render/publish-pages/web/view/intro.html
• demo(mobile):https://projects.redgoose.me/2016/dq-artisee/app/render/publish-pages/app/

카페 아티제라는 프랜차이즈가 베트남으로 진출하기 위하여 모바일 앱과 반응형 웹사이트를 작업하게 되었다.
모바일 앱은 하이브리드라서 html로 코딩작업을 수월하게 적업할 수 있는 인상이었지만 데스크탑 버전은 반응형이고, 비동기로 컨텐츠를 불러오는 컨텐츠도 보여서 백엔드 프로그래머와 연계를 어떻게 해야하는지 가장 걱정스러웠다.

모바일을 먼저 작업을 작업하고 그 후에 데스크탑 버전을 만드는식으로 진행했다.

Mobile version

모바일버전은 회사에서 맞춤식으로 진행한 첫 프로젝트였다.

작업 난이도 자체는 대단히 쉬웠지만 아무것도 없는 상태에서 작업환경을 구축하고, 요소들을 새로 만드는것들이 많아서 할일이 꽤 많았다.
무엇보다 백엔드 개발자가 많이 까다로워서 마크업을 어떻게 하고 자바스크립트를 어느정도로 작성해야할지 좀 불안했다.

일단은 디자인에 나온 형태로 마크업을 작성했다.
처음에는 scss로 작성을 했지만 회사의 분위기가 scss로 작성하지 않는것이 좋을거 같아서 어느정도 작성하고나서 css로 작성하는 형식으로 방향을 바꿨다.

Desktop version

데스크탑 버전은 모바일 작업하고나서 시간이 꽤 지난후에 진행하게 되었다.

이것이 반응형이라 많이 까다로워서 css는 scss로 작성하고, 스크립트들도 직접 만드는게 좋을거 같아 모두 작성하여 백엔드에겐 비동기 페이지를 불러오는 것을 가이드해주는 방향으로 작업을 진행했다.

이번 작업은 반응형, fullpage 형식의 인터랙션, 비동기 작업이 주를 이루어서 페이지 수 자체는 적지만 디테일함이 중요한 일이었다.

디자인은 한국 아티제 사이트랑 똑같이 넘어오고 페이지의 모습이나 인터랙션도 한국 사이트와 똑같이 만들어달라는 것이다.
이 부분에서 많이 기가막혔다. 한국 사이트 만든곳에다 베트남버전을 만드는게 더욱 쉬울거 같은데 어른들의 사정이 있을것이라고 생각을 해두고 기획자에게 정확한것은 물어보지 않았다.

html, css를 작성하고 반응형에 맞춰 조정작업을 한 후에 스크립트 작업에 들어갔다.

페이지 인터랙션에 사용된 벤더는 ScrollIt.js이라는 라이브러리를 사용했다. fullpage.js를 보통 사용하는데 기능이 너무 많고, 좀더 단순한 벤더를 원하고 있어서 이것을 사용하게 되었다.
gulp를 통하여 소스를 전부 합치고 패킹하는 과정을 자동화하는 환경을 구축하고 스크립트 개발을 시작했다.

각각 역할과 섹션을 나누어서 클래스를 나누었다.
아무래도 이벤트와 인터랙션, 애니메이션이 많이 들어가다보니 들어가는 스크립트 코드양이 많아졌다. 역할을 나누어 클래스를 나눈것이 아무래도 잘한 선택이었다.

End

데스크탑은 polarisdesign 사이트를 만들어본 경험이 있어서 크게 막히는 부분이 없어서 생각보다 금방 마무리를 할 수 있었다.
한국 아티제 사이트와 동일하게 만들어졌지만 나도 사람이라서 완전히 똑같이 만들수는 없었다. 문제있는 부분까지 다 배낄수는 없어서 문제가 있어 보이는것들은 개선을 하고 더 나아지게는 만들었다고 생각한다.

솔직히 즐겁게 작업했는데 단순히 마크업하는것보다 이런형태의 작업을 하는게 적성에 맞나보다.