The Haberdashers development review
Client
해버데셔스 디스트리뷰션은 프래피 문화를 전파하며 다양한 라이프스타일 브랜드를 기반으로 하는 상품의 디스트리뷰션 및 브랜드의 크리에이티브 에이전시와 마케팅 서비스를 제공하는 회사. 이미 해버데셔스와 프랩 쇼핑몰이 운영중이며, 회사 대표 웹사이트를 새롭게 제작하게 되었다.
Initiation
초기에 간단한 메뉴 및 컨텐츠 설명과 샘플 사이트, 그리고 클라이언트 측에서 자신이 원하는 디자인을 직접 제작해 보내주었다 (짱!). 모든 자료를 참고하여 시안을 제작했다. 시안 제작에 포토샵은 사용되지 않았으며, HTML, CSS, jQuery, PHP 등으로 한두가지 핵심적인 서브페이지를 포함한 실제 동작하는 사이트를 제작했다.
여담으로, 누군가 웹사이트 시안에 포토샵만을 사용한다면, 그 사람이 완전한 웹디자인 전문가가 아닌 이상 뜯어말리길 바란다. 과거 정적(static)인 웹사이트를 제작할 땐 포토샵이 훌륭한 도구가 되었다. 하지만 오늘날 웹사이트는 동적(dynamic)이고 반응형(responsive)으로 진화해왔다. 따라서 크기가 고정된 판(canvas)에 디자인할 수 밖에 없는 포토샵의 한계가 개선되지 않는 이상, 디자인이 훌륭할지라도 개발 단계에서 어려움을 겪을 수 밖에 없다.
Building Blocks
몇가지 커다란 구성단위로 나누어 디자인했다. 이는 개발 속도를 높이고 훗날 관리에도 효과적인 방법이다.
- 먼저 첫페이지와 서브페이지들은 서로 독립적이다. 대부분의 CSS도 마찬가지다. 이로인해 웹사이트의 얼굴인 첫페이지에 유연성을 갖추었다.
- 모든 서브페이지는 세개의 층으로 구성되었다. 첫째는 사용자에게 보이는 표면적인 이미지와 텍스트 등이고, 둘째는 관리자가 컨텐츠를 등록하거나 수정/삭제 하는데 필요한 관리자 전용 기능이 있으며, 셋째는 데이터베이스와 연동하여 컨텐츠를 구워삶는 핵심층이 있다.
- 따로 관리자 모드를 만들지 않고 각 페이지에 직접 관리자 기능을 넣은 이유는, 어디에 어떤 내용을 넣을지는 직접 가보는게 낫기 때문이다. 예를들어 NEWS 메뉴에 글을 등록하고 싶다면 NEWS에 가서 CREATE 버튼을 누르면 된다. 마치 모든 메뉴가 게시판 workflow를 따르는 모양새이므로 직관적이고 관리하기 편하다.
Media Implementation
해버데셔스 디스트리뷰션은 단순히 옷과 악세사리만 판매하는 회사가 아니다. 프래피 문화 자체를 알리고자 사진전, 콘서트 등 다양한 문화 행사를 함께 진행하고 있다. 따라서 당연히 비디오와 사진들을 웹사이트에 손쉽게 등록할 수 있도록 했다.
Admin only CREATE menu
해당 메뉴에서 CREATE 버튼을 누르면 Feature Image와 Feature Video 필드가 있다. Feature Image에 이미지를 업로드 하던지 Feature Video에 YouTube, Vimeo, Dailymotion 또는 Vine에 등록된 비디오의 URL을 넣으면 끝이다. 나머지는 아까 말했던 핵심층에서 알아서 처리한다.
본문을 작성할 때도 마치 워드프로세서를 사용하듯 비디오나 이미지(Drag&Drop도 가능)를 얼마든지 삽입할 수 있으며, 이 또한 SAVE 버튼을 누르는 순간 알아서 처리된다.
BRANDS & CATALOGUES
유통과 브랜딩이 핵심인 해버데셔스 디스트리뷰션의 대표 웹사이트인 만큼 BRANDS 메뉴에 심혈을 기울였다. 역시 관리자가 브랜드와 카탈로그를 얼마든지 만들고 수정할 수 있도록 했다.
Lookbook (Catalogue) page flip animation
특히 카탈로그는 여러장의 이미지로 구성되어 있는 한권의 책을 그대로 표현했다. 모바일 기기에선 쓸어넘기는(swipe) 동작으로, PC에선 마우스를 드래그해서 한장한장 넘겨보거나 좌우의 버튼을 눌러 넘겨볼 수 있도록 했다. 또한 테두리에 원목 텍스쳐를 둘러 한층 고급스럽고 친숙한 사용자 경험을 이끌어내려 했다.
Admin only Lookbook final touch
관리자 모드 또한 직관적이고 단순하다. 총 두단계를 거쳐 카탈로그를 등록하는데, 첫번째 단계에서 제목, 날짜, 썸네일과 각 페이지에 들어갈 이미지를 통째로 입력한다. 두번째 단계에서 이미지들을 원하는 순서대로 드래그하여 배치하거나 필요없는 이미지를 삭제한다.
이렇게만 해놓으면 핵심층에서 알아서 세로로 긴 이미지가 연속되면 한페이지에 좌우로 배치하고 가로로 긴 이미지는 한페이지 전체에 배치한다.
Conclusion
총 한달간 작업했으며 이 중 순수 제작에 열흘이 소요됐다. 나머지 기간동안 클라이언트와 함께 테스트 했으며, 문제가 생기면 바로잡았다. 여태 작업했던 웹사이트 중 가장 흥미로운 프로젝트였고 그만큼 시도한 것도, 배운 것도 많았다. 최대한 단순한, 하지만 멋진 사용자(방문자 및 관리자) 경험을 끌어내고자 많은 노력을 했다. 클라이언트 또한 굉장히 적극적이었고 따라서 작업을 순조롭게 마무리하는데 커다란 도움이 되었다.
오~ 댜긔 멋쟁이 ㅋㅋ
ㅋㅋㅋㅋ