닷밀 리브랜딩③ – 공식 홈페이지 리뉴얼
공식 홈페이지 리뉴얼 과정에 대한 회고
리브랜딩을 통해 리뉴얼 된 닷밀 공식 홈페이지가 '2023 지디웹(GDWEB) 디자인 어워드'에서 디지털 에이전시 부문 'GOLD PRIZE'를 수상하게 되었습니다. 처음 경험한 웹사이트 제작임에도 불구하고, 2023년 최고의 웹사이트 중 하나로 선정되어 매우 기쁘고 놀랍고 감사한 마음입니다. 그래서 많이 (정말 많이) 늦어졌지만, 2023년이 지나기 전에 ‘닷밀 리브랜딩 - 닷밀 공식 홈페이지 제작기’를 작성하여 이렇게 공유하고자 합니다.
출처 : GDWEB홈페이지 리뉴얼, 디자인 방향성 정립
리브랜딩을 통해 완성된 닷밀의 핵심가치는 ‘Encounter : 사람과 공간을 만나게 해주는 것’, ‘Fantasy : 신비로운 세상을 만들어 내는 것’, ‘Public : 전세대가 향유할 수 있는 것’ 이상 세가지 입니다.
관련글 : 닷밀 리브랜딩① – 브랜딩 전략 (BX)
닷밀의 핵심 가치세 가지의 핵심가치를 중점에 두고 홈페이지 디자인에 대한 고민을 시작하였습니다. 먼저 ‘Encounter : 사람과 공간을 만나게 해주는 것’의 표현을 위하여 그래픽 모티브 ‘큐브’를 적극 활용하였습니다. 닷밀의 그래픽 모티브가 가진 특성인 ‘시각적 특성에 따라 변화하는 무한한 가능성의 사각 프레임’은 닷밀이 정의하는 ‘공간’을 가장 명확하게 표현하는 매개체이기 때문입니다.
관련글 : 닷밀 리브랜딩② – 로고와 그래픽 모티브
닷밀의 그래픽 모티브 '큐브'‘Fantasy : 신비로운 세상을 만들어 내는 것’은 항상 새롭고 더 환상적인 결과물을 만들어내고자 하는 닷밀의 지향점이라고 할 수 있습니다. 그렇기에 닷밀의 홈페이지 역시 흔한 ‘템플릿’ 형태를 벗어난 디자인으로 완성시키고자 하였습니다. 다양한 인터랙션 요소를 활용하여 더욱 입체적인 표현이 가능하도록 하였고, 높은 수준의 심미적 완성도를 추구하였습니다.
마지막으로 ‘Public : 전세대가 향유할 수 있는 것’을 표현하기 위해 보다 직관적인 IA(Information Architecture, 정보구조도)를 설계하였습니다. 모든 메뉴를 전면에서 확인할 수 있도록 하였으며, ‘로딩’이 생기지 않도록 인터랙션 요소를 절제하였습니다. 또한 채용 부분은 인사팀의 원활한 관리 및 분리를 위해 아웃링크를 활용하는 등 접근성을 높이기 위해 노력하였습니다.
웹사이트 제작사와 커뮤니케이션 하기
닷밀 홍보팀은 웹사이트 제작 경험이 전무한 상황이었기에 홈페이지 디자인과 큐브 그래픽 작업은 닷밀 내부에서, 제작은 외주업체를 활용해야만 했습니다. 우리가 원하는 디자인 방향성은 명확했고, 분명 쉬운 난이도의 작업은 아니었기에 업체 선정은 매우 중요한 부분이었습니다. 제작을 시작하기 전에 ‘완벽하게 구현해낼 수 있다는 확답’, ‘제작 기간’, ‘추가 금액 없는 확정 제작비’를 정확하게 얘기할 수 있는 파트너를 찾기 위해서는, 매우 명확한 커뮤니케이션 수단이 필요했습니다.
Adobe XD를 활용한 샘플 영상 제작
가장 빠르고 완벽한 커뮤니케이션 방법은 ‘시각적으로 보여주는’ 것입니다. 그렇기에 우리가 원하는 홈페이지의 모습을 샘플 영상으로 제작하여 전달, ‘이 홈페이지를 만들어주세요’라고 요청하는 것이 가장 효율적인 방식이라 판단하였습니다. 말 그대로 '샘플'이었기에, 경험이 부족한 '피그마'나 '스케치'와 같은 툴보다는 가장 익숙한 어도비 계열 프로그램 'Adobe XD'를 활용해 샘플 영상을 제작하였습니다. XD를 통해 복잡한 인터랙션 요소를 표현하는 것은 어려웠기에, 해당 부분에 대해서는 레퍼런스를 최대한 첨부하고 설명하는 과정을 거치기로 결정했습니다.
웹사이트 제작사 리스트 정리
사실 리스트를 만들던 당시에는, 웹사이트 전문 사이트의 존재를 알지 못했습니다. 그래서 포털사이트에 홈페이지 제작 업체를 검색하고, 사이트를 하나하나 검색하며 괜찮은 업체를 엑셀로 정리하는 과정을 거쳤는데요. 홈페이지 제작을 마치고 나서야 지디웹, 디비컷 등의 종합사이트를 알게 되었습니다. 두 사이트에서는 수많은 웹사이트 데이터와 국내 최고의 제작 업체들의 리스트까지 확인할 수 있습니다. 저희처럼 고생하시지 말고, 해당 사이트들을 통해 업체를 찾아보시는 것을 추천드립니다.
사진 : 지디웹 (GDWEB)최종 제작사 선정 및 완성
수 십여 업체의 포트폴리오를 확인하고, 함께 하고 싶은 9곳의 제작사에 샘플 영상과 몇 가지 사항들을 작성하여 메일을 보냈습니다. 놀랐던 부분은, 실력 있는 제작사들을 선별하여 메일을 보냈음에도 무려 5곳(!)의 제작사에게 높은 난이도로 인해 제작이 불가능하다는 답변을 받았다는 것입니다. 한 곳은 터무니 없는 금액을 제시하였고, 나머지 두 곳도 ‘완벽하게 구현해낼 수 있다는 확답’, ‘제작 기간’, ‘추가 금액 없는 확정 제작비’에 대한 명확한 답변을 주지 못하였습니다.
다행이도 종합 에이전시 ‘소이정’ 단 한 곳에서 모든 부분에 대한 확답을 주었고 그렇게 홈페이지 작업을 시작할 수 있었습니다. 소이정에서는 가장 어려운 이슈였던 메인 큐브를 Tree.js 기술을 활용해 구현해냈고, 모바일버전 등 처음 약속했던 모든 부분을 문제없이 완성시켜줬습니다. 소이정의 적극적인 협업 덕분에 홈페이지 리뉴얼을 성공적으로 마쳤고, 긴 시간 동안의 닷밀 리브랜딩도 마침표를 찍을 수 있었습니다.
