배경
영상 : 이전 홈페이지의 모습
2015년, DNA라는 서비스와 함께 시작한 데이블은 이후 wheres와 TicketBoost 등 여러 프로덕트를 출시하며 광고 네트워크 전반을 아우르는 AI 솔루션 회사로 성장했습니다. 하지만 홈페이지는 그 변화가 반영되지 않은 채로 오랫동안 유지되었고, 지금의 데이블과 점점 멀어졌습니다.
그뿐만 아니라 업데이트하기 번거로운 구조 탓에, 새로운 소식이 생겨도 제때 반영하기가 어려웠고 시간이 지날수록 괴리는 더 벌어졌습니다. 이런 불편을 해결하고자 올해 초, 대대적인 홈페이지 리뉴얼 프로젝트 ‘Dable: Home coming’ 가 시작되었습니다.
구현
영상 : 리뉴얼 된 홈페이지의 모습
지금까지 리뉴얼이 미뤄진 가장 큰 이유는 개발 리소스였습니다. 홈페이지를 새로 만들려면 그만큼의 개발이 필요한데, 그 리소스를 확보하기가 쉽지 않았기 때문입니다. 하지만 바이브 코딩이 발전하며 개발의 많은 부분을 AI로 구현할 수 있게 되었고, 기획과 함께 구축까지 맡는 도전을 해주신 세환님 덕분에 프로젝트를 시작할 수 있었습니다.
구현 방식을 정할 때 가장 신경 쓴 건 앞으로의 편집이었습니다. 앞으로 교체할 이미지도, 새로 올릴 소식도 많을 텐데 그때마다 개발 리소스가 필요하다면 예전처럼 방치될 수 있기 때문입니다. 그래서 노션에서 콘텐츠를 수정하면 홈페이지에 그대로 반영되도록 연동 시스템을 만들었습니다.
덕분에 이미지를 바꿀 때마다 파일을 따로 아카이브에 올려야 한다거나 텍스트를 고치려고 해도 섹션마다 들어가 새로운 내용을 붙여 넣고 스타일을 맞춰야 했던 일은 먼 과거가 되었습니다. 리뉴얼 이후에는 그 모든 게 노션 문서 하나를 고치는 일이 되었고, 편집이 훨씬 가볍고 빨라졌습니다.
브랜딩 컨셉
프로젝트를 시작하고 나니, 데이블을 어떤 모습으로 보여줄지가 가장 큰 고민이었습니다. AI 네이티브 회사로 나아가는 지금 기술력을 앞세우는 게 맞을지, 아니면 실제로 운영 중인 솔루션을 구체적으로 보여주는 게 맞을지 쉽게 정해지지 않았습니다.
이미지 : 키비주얼 테스트를 위해 제작했던 시안들
많은 시행착오와 논의 끝에, 데이블의 여러 프로덕트를 하나로 묶는 공통 지점에서 출발해 브랜드를 설명하자는 쪽으로 가닥이 잡혔습니다.
1.
데이블
데이블은 현재 DNA, wheres, RMP 세 개의 프로덕트를 운영하고 있습니다. 셋은 각각 다른 영역을 맡고 있고, 그 영역들이 합쳐지면 웹과 앱을 아우르는 광고 네트워크 전반이 됩니다. 하나의 브랜드가 각 영역마다 그에 맞는 솔루션을 제공하고 있다는 것, 이 점이 데이블을 설명하는 핵심이라고 봤습니다.
이 핵심을 전달하려면 분위기를 만드는 추상적인 이미지보다는 서비스의 흐름이 보이는 구체적인 일러스트가 필요하다고 생각했습니다. 광고 네트워크라는 개념 자체가 처음 보는 사람에게 한 번에 와닿기는 어려운 영역이라, 분위기만 남기면 데이블이 무슨 일을 하는 회사인지는 끝내 전달되지 않을 것 같았습니다. 그래서 데이블의 프로덕트가 실제로 작동하는 장면을 보여주기로 했고, 표현 방식도 인포그래픽에 가깝게 잡았습니다.
영상 : 메인 페이지를 위한 모션 그래픽 영상
2.
일러스트
이미지 : 각 프로덕트별 일러스트
각 프로덕트별로 일러스트를 만들면서도, 모두 같은 규격의 플레이트 위에서 여러 요소들이 배치되고 움직이도록 공통된 컨셉을 잡았습니다. 위에 놓인 요소들은 저마다 다르지만 바탕이 되는 플레이트의 형태는 동일하기 때문에, 하나씩 따로 보더라도 결국 같은 기반 위에 놓여 있다는 인상을 주도록 기획했습니다.
또한 이 플레이트는 데이블의 로고를 떠올릴 수 있도록 육각형으로 만들었습니다. 형태를 통해 기존 브랜드와 이어지는 지점을 남겨두고 싶었기 때문입니다.
DNA
DNA는 광고주와 매체사 양쪽을 잇는 광고 플랫폼입니다. 그렇기 때문에 어느 한쪽만 보여주기보다는 양쪽을 오가는 흐름 전체가 드러나야 한다고 봤습니다. 광고 지면을 제공하는 SSP와 광고를 입찰하는 DSP, 그리고 둘을 중계하는 애드 익스체인지까지 네트워크의 모든 요소들이 한 번에 보이도록 구성했습니다.
wheres
wheres는 캠페인의 맥락에 따라 알맞은 고객을 찾아내는 솔루션입니다. 그래서 고객을 찾는 과정을 시각적으로 보여주고 싶었고, 여러 유저 가운데 조건에 맞는 대상을 좁혀가는 형태로 장면을 구성했습니다.
TicketBoost
TicketBoost는 리테일 미디어 안에 광고 플랫폼을 구축해, 유저가 관심 가질 만한 상품을 추천하는 RMP 계열의 솔루션입니다. DNA와 마찬가지로 네트워크 구조를 살리면서도, 리테일 미디어라는 특징을 표현할 수 있는 요소들을 넣어 특징을 부각했습니다.
일러스트의 스타일은 인포그래픽 작업에서 자주 볼 수 있는 아이소메트릭으로 설정하되, 데이블만의 느낌을 주기 위해 3D로 제작했습니다. 이후 모션을 주거나 시점을 바꾸는 추가 작업을 고려할 때도 3D 작업 방식이 용이할 거라고 생각했습니다. 다만 입체감을 그대로 살리지는 않았습니다. 그림자와 깊이가 살아나면 구조도보다는 일종의 풍경처럼 인식될 가능성이 있어서, 명암 대비를 최대한 낮춰 2D 그래픽에 가깝게 눌렀습니다.
이미지 : 그래픽 톤 테스트를 위해 제작한 시안들
최종 일러스트 (1)
최종 일러스트 (2)
3.
색상
색상은 기존 데이블의 팔레트를 기반으로 확장했습니다. 예전의 색을 그대로 쓰면 화면은 새것이어도 인상은 예전에 머무르고, 그렇다고 완전히 새로운 색으로 갈아타면 세련돼 보이더라도 동일한 브랜드라는 느낌을 주기 어려울 것 같았습니다. 그래서 기존 색상 팔레트를 고려하면서도, 조금 더 차갑고 중립적인 톤을 더하는 쪽으로 사용 범위를 넓혔습니다. 기술 회사로서의 인상과 AI 네이티브 컴퍼니라는 정체성을 색상에서도 느껴지게 하고 싶었기 때문입니다.
4.
레이아웃
3D 인포그래픽 일러스트가 홈페이지의 첫인상을 만드는 만큼, 나머지 요소도 같은 톤을 따라가야 했습니다. 문제는 기존에 쓰던 사진 이미지와 3D 목업이었습니다. 그대로 쓰려고 하니 밀도와 질감이 달라 일러스트와 어긋나 보였습니다.
그래서 이미지들도 라인을 살려 2D 그래픽처럼 정리하고, 홈페이지의 레이아웃 스타일도 이 기조에 맞췄습니다. 라인이 주된 그래픽 톤이 된 만큼, 섹션마다 라인으로 구분되도록 기획해 화면 전체가 하나의 문법을 공유하도록 했습니다.
.png&blockId=3b15bbc0-e5c2-8037-bac3-f02e6ab373f7)
이미지 : 새롭게 제작된 레이아웃 시스템(1)
.png&blockId=3b15bbc0-e5c2-8059-92d3-d29a7edb3db1)
이미지 : 새롭게 제작된 레이아웃 시스템(2)
회고
홈페이지를 리뉴얼하게 되면 근사한 결과물을 금방 만들어낼 수 있을 줄 알았는데, 실제로 진행해 보니 예상과 다른 지점을 많이 마주했습니다. 특히 가장 크게 깨달은 건, 보여주고 싶은 모든 특징을 한 번에 보여줄 수는 없다는, 어떻게 보면 당연한 사실이었습니다.
이 사실을 받아들이고 무엇에 집중할지 선택하는 과정에서, 각 프로덕트가 어떤 일을 하는지에 대한 이해도 자연스럽게 깊어졌습니다. 결국 컨셉을 좁혀가는 일이 데이블을 다시 들여다보는 기회가 된 것입니다.
덕분에 하반기에는 이렇게 깊어진 이해를 바탕으로 할 수 있는 프로젝트를 기획하고 있습니다. 마침 리뉴얼을 진행하며 만들어진 일러스트와 아이콘 세트도 홈페이지 밖에서 쓸 수 있는 자산으로 남았으니, 이번 리뉴얼에서 얻은 것들을 또 어디에 활용할 수 있을지 찾아보려고 합니다.
작성자
관련된 글 더 보기
