• date : 2015-03
• tools : html, css, javascript, php
• URL : http://polarisdesign.kr
• demo : https://projects.redgoose.me/2015/polarisdesign

* 이 사이트의 디자인은 Polaris Design에서 만들었다.

회사에서 첫 작업으로 회사 홈페이지를 리뉴얼하게 되었다.
첫 작업치고는 난이도가 너무 높았고, 크고많은 비쥬얼과 인터랙션이 들어가서 분량에 비해서 많은 코드가 들어가다보니 최적화에 많은 신경을 쓰게 되었다.
첫 화면에서 백경에 동영상이 들어간다는것이 인상적이다.

html/css

디자이너에게서 psd파일을 받아서 어떻게 코딩을 할까 고민을 한다.
복잡한 형태의 사이트에서 설계를 할때 깊게 생각하지 않고 제작해버리면 후반부에는 굉장히 복잡해져서 골치아픈 사태로 일어난다. 그래서 코딩 시작전에 javascript로 어떻게 구성할지와 어떤 외부 플러그인 프로그램을 사용할지에 대한 리서치와 검증작업을 한다.

어떻게 코딩할지에 대한 구조가 잡히면 사이트 껍데기에 대하여 html 코딩을 한다. 그리고나서 css 기본 엘리먼트 속성에 대해서만 작성하고 라이브러리나 컴포넌트에 대해서 기초작업을 시작한다.
작년부터 scss를 사용하기 시작하여 css도 구조화 할 수 있어서 설계가 대단히 중요해진다.

기본적인 부분을 코딩을 끝내면 이미지나 글꼴같은 리소스 준비작업을 한다.
웹폰트로 만들어야 하는 글꼴이 하나 있어서 그걸 만드느라 잠시 검색하고 여차여차 만들어서 설치한다.
이미지는 공통으로 들어가는 아이콘들만 잘라서 sprite 방식으로 이미지를 만들었다. 처음에는 웹폰트로 만들었지만 브라우저에 따라 안티알리어싱에 문제가 보여 이미지로 쓰게 되었다.

인트로 컨텐츠는 대부분 자바스크립트 작업이라 스크립트를 짜면서 css와 같이 작성하고 일반 페이지 부분은 Goose 프로그램을 연동하여 코딩했다.
가장 큰 사이즈일때로 디자인이 넘어오다보니 1024사이즈일때의 디자인을 다시 만들어달라고 하기엔 시간이 많이 걸릴거 같아서 반응형일때는 임의대로 간격과 사이즈를 조절했는데 역시 디자인에서 수정이 많이 와서 그것들을 일일히 수정하느라 많이드는 시간과 삽질을 하게 되었는데 정말 좋지못한 작업 프로세스를 맛보았다.

javascript

모습은 대단히 단순해보여도 작은 부분들의 이벤트나 인터랙션들을 꼼꼼하게 처리하는게 관건이어서 많은 이벤트와 동적인 액션처리들을 꼼꼼하게 스크립트를 작성해야했다. 플래시 작업할적에는 동영상 컨트롤을 어느정도 해봤지만 html에서의 동영상 컨트롤은 이번이 처음이어서 많은 시행착오가 있었으며 많은 공부를 하게됐다.

인트로에서 슬라이드를 위한 fullPage.js 플러그인이 사용되었다. 애니메이션을 위한 TweenMax 라이브러리가 사용되었으며 비디오 컨트롤을 위한 클래스는 별도로 제작하고, 인트로 페이지의 스크립트의 양이 많기 때문에 별도의 파일로 작성했다.
많은 이벤트가 있었고, 꼼꼼하게 컨트롤하느라 많은 시간을 들였다. 무엇보다 크로스 브라우징 이슈를 처리하느라 많은 시간과 노력이 필요했다.
jQuery로 애니메이션을 구현해보니 퍼포먼스가 심한 문제가 생겨서 적극적으로 css3 animation을 이용하고 css3가 지원하지 않는 환경이라면 애니메이션 없는 상태가 되도록 스크립트를 작성했다.

Final

몇페이지 되지않는 적은규모의 사이트 제작이었지만 제작 소요시간은 생각보다 많이 걸렸다.
엉망인 작업프로세스가 큰 몫을 차지했으며 적절한 타협없이 높은 수준의 기능을 넣으려고 하다보니 구버전 브라우저에서 탈이 날수밖에 없는데 국내 환경에서는 그걸 무시할 수 없어서 이런종류의 사이트는 국내에서 솔직히 만들기 불가능하다고 본다.
이것들을 다 대처하느라 작업시간이 많이 걸리며 코드가 많이 늘어나서 복잡한 구조와 무거운 프로그램이 되어버린다.

솔직히 이 작업은 별 고민없이 막 만들어내어서 잘만들어졌다고는 전혀 생각하지는 않는다.
멋진 기능을 넣는건 정말 멋지고 재미있는 작업이지만 그 이면인 구버전 브라우저에서의 문제에 대한 대처가 만만치 않다.

디자인이 멋져서 작업은 재미있게 했지만 좀더 현실적인 기능 기획을 한다면 자연스러우면서 멋진모습으로 사이트를 방문객에게 선보일 수 있지않을까 생각한다.