Color Your Life, CYL

01_About the Project

대한민국의 직장인들은 피곤합니다. 사내에서 능력을 인정 받는 직장인도 정작 여가 시간은 잘 활용하지 못하는 경우가 많죠. 회색빛 삶을 사는 직장인에게 컬러풀한 일상의 가이드가 있다면? CYL은 한화의 이러한 생각들이 모여 ‘직장인 여가 프로젝트’로 만들어진, 새로운 형태의 온라인 사회공헌입니다. ‘일상의 즐거움을 발견하여 회색빛 세상에 컬러를 더한다’는 의미를 지닌 CYL(Color Your Life)은, 25세부터 40세까지의 직장인을 타깃으로 합니다. 휴가, 한강 라이프, 야구 등 친숙한 테마를 매월 선정하여, 각 주제에 맞는 직장인의 여가와 생활팁으로 채워진 콘텐츠를 제공합니다. 더즈는 CYL의 의미를 사용자들에게 쉽게 전달하기 위한 디자인 작업부터 신규 회원가입 및 로그인 시스템 개발까지 총체적인 구축 작업을 진행했습니다.

02_Mission

Life Style Meets Hanwha

CYL, Color Your Life라는 브랜드를 방문하는 대부분의 사람들이 모를 수 밖에 없기 때문에 브랜딩을 하는 것이 중요했습니다. 어떻게 하면 CYL 브랜드를 쉽고 간단하게 알릴 수 있을지 많은 고민을 했으며, 단순히 소개 메뉴 같은 곳에서 전하기 보다는 사이트의 구조와 콘텐츠를 이용해서 천천히 사용자들에게 다가갈 수 있도록 구성해 보았습니다. 매달 업데이트 되는 콘텐츠들의 테마를 월별 로고와 컬러, 이미지 등을 이용해서 전체 분위기를 계속 바꿔주면서 CYL이 하나의 브랜드, 매거진 처럼 느껴질 수 있도록 방향을 잡았습니다.

03_Strategy

수많은 회의와 아이디어, 의견을 거치면서 플랫폼의 제작 방향과 컨셉이 수정되었습니다. 몇 개월 간의 논의와 시행착오를 거쳐 결정된 구축 전략은 ‘매거진’이었습니다. CYL 사이트 어디에도 매거진이라는 말은 없지만, 매월 다른 테마의 콘텐츠들로 업데이트 되며 매월 매거진이 꽂혀 책장이 채워지듯 플랫폼에 아카이빙 될 수 있는 그런 매거진이 CYL 플랫폼의 핵심 컨셉이었습니다.

04_Design

초기 시안

초기 단계의 디자인은 1년 내내 다채로운 일상을 제공한다는 메인 컨셉 아래, 기존의 네 가지 키워드(Joy, Energy, Hope, Love)를 주제로 작업을 진행하였습니다. 1년 내내 진행된다는 연속성과 함께 네 가지 키워드가 잘 보여질 수 있도록 여러 컬러를 사용하여 시안을 제작했습니다.

중간 과정 시안

시기별로 콘텐츠가 나오며 1년간의 타임라인을 배치하여 아카이빙 되는 구조를 배치하는 디자인입니다. 매거진 컨셉이 확정적인 단계는 아니었지만, 현재와 과거의 콘텐츠가 한 화면에서 보여지는 구조, 그리고 사용자들의 SNS 콘텐츠로 같이 보여질 수 있는 구조 등으로 다양한 시험을 했던 디자인입니다.

월별 테마에 대한 연구

매달 다른 테마로 콘텐츠를 제작해서 업데이트 하며, 캠페인 역시 테마에 맞춰 진행하기로 결정이 되었습니다. 월별 테마를 보여주는 것이 중요해지면서 그에 대한 여러 가지 디자인을 제작했습니다. 테마 오브제에 더욱 집중할 수 있는 디자인으로 방향을 정하면서 배경을 단순화 하거나 혹은 오브제만을 부각시키는 등의 여러 방법을 고민했습니다.

이후 시즌별 캠페인을 더 잘게 나누어, 일상에 한층 가까운 테마의 월간 콘텐츠로 기획이 달라졌습니다. 시안의 구성도 전면적으로 아티클 영역을 메인에 위치시키고, 매월 추가되는 기사 콘텐츠들을 유저가 쉽게 접근할 수 있도록 아카이빙하는 데 포인트를 두었습니다. 또 GNB의 경우 새로운 메시지인 CYL을 인지할 수 있도록, 사이트 어느 곳에 접속해 있어도 로고가 보일 수 있도록 했습니다.

Theme Visual

사용자가 CYL의 매월 새로운 콘텐츠들이 업데이트 되었음을 인지할 수 있도록, 커버가 바뀌듯 메인 이미지들이 변경될 수 있도록 제작했습니다. 메인 상단의 테마 키비주얼은 최근의 트렌드인 BBI를 따르면서 감성적인 부분을 살리고자 하였고, 매월 통일성 있는 디자인을 위해 스튜디오에서 직접 촬영하여 진행했습니다.

05_Features

Archive

매월 새롭게 추가되는 콘텐츠의 아카이브를 구축하고 쉽게 확인할 수 있도록, Monthly CYL에 LNB를 구성했습니다. 간단히 연월 정보와 테마명을 선택하면 한눈에 해당 월의 콘텐츠의 타이틀을 한 번에 볼 수 있도록 했습니다. 또한 ’월별 커버 보기’와 ‘해시태그 보기’라는 별도 메뉴를 통해 이전 콘텐츠를 포함한 전체 콘텐츠에 테마 이미지와 관심 태그로 접근할 수 있는 장치를 마련했습니다. 뿐만 아니라, Monthly CYL의 각 콘텐츠 하단에 추천 콘텐츠란을 마련해 관련된 기사로 바로 이동할 수 있도록 제작했습니다.

Mobile

기획된 웹의 구조를 그대로 모바일로 옮긴다면 모바일 유저의 편의는 물론, 전달하고자 하는 콘텐츠의 가시성이 떨어지고 이벤트 참여에 도달하기 어려운 이슈가 있었습니다. 모바일의 편의를 고려, 웹과 별개의 디자인으로 제작하기엔 웹과 모바일의 통일성 또한 놓칠 수 없는 부분이었습니다. 많은 고민 끝에 모바일에서는 이벤트를 메인 이미지로 활용하여 참여를 높이고, 모바일에서도 쉽게 내용을 확인할 수 있는 카드 형태의 디자인으로 콘텐츠 리스트를 제작했습니다. 웹과의 통일성은 상단에 고정된 GNB와 로고의 컬러로 유지했고, GNB는 스크롤 방향에 따라 가시성을 달리했습니다. 즉, 유저가 콘텐츠를 확인하는 스크롤 다운 시에는 숨김 처리 되었다가, 상단으로 이동하면 다시 나타나도록 실질적인 이용에 불편을 겪지 않도록 했습니다. 한편, 콘텐츠를 열거하며 인지하기 어려워진 월별 테마는 우측 하단의 회전하는 플로팅 버튼을 활용해 소소한 재미와 실용성을 보강했습니다.

05_Output

Main

Monthly CYL

Event

Notifications

Mobile

06_Result

CYL은 오픈 당일에만 페이스북 광고와 그룹사 내부 배너만으로 약 3,300명의 신규 가입자를 얻는 200% 이상의 성과를 얻었습니다. 이후 오픈 3주차에, 직전에 진행한 캠페인 대비 6배에 달하는 약 3만 명의 이벤트 참여가 이루어졌습니다.

CYL은 이처럼 대한민국 직장인들의 일상을 컬러풀하게 물들이는 새로운 형태의 플랫폼입니다. 주말에 무엇을 할지 고민하는 직장인이라면 이번 주는 CYL에서 새로운 아이디어를 얻어 보는 것, 어떨까요?