개요
핵심 요약
- 도아(DOA)는 서울 서초구에 위치한 종합광고대행사로 IMC 전략부터 콘텐츠 제작, 디지털 마케팅, UI/UX·이커머스 구축까지 다룬다.
- 히어로는 ‘DO A DIFFERENT ON ALL LEVELS’ 슬로건과 곡선형 그래픽 오브제로 구성된다.
- VALUE POINTS 구획은 협업 브랜드 80개 이상, 누적 프로젝트 350건, 고객 재선택률 95%를 카운팅 애니메이션으로 보여준다.
- PORTFOLIO 구획은 월드비전, 데상트, 노스페이스 등 17건 이상의 작업물을 클라이언트 로고와 함께 나열한다.
- twitter:title 메타에는 ‘Practical UX VinylC’라는 무관한 문구가 남아 있다.
도아(DOA)는 서울 서초구에 위치한 종합광고대행사로, 브랜드 전략부터 콘텐츠 제작, 디지털 마케팅, UI/UX·이커머스 구축까지 다루는 IMC 대행사다. 첫 화면은 검정 배경에 ‘DO A DIFFERENT’, ‘ON ALL LEVELS’라는 대형 타이포와 곡선형 그래픽 오브제가 채운다. 이어 ‘모두가 더 크고, 더 화려하고, 더 좋은 것을 얘기할 때 [도아]는 남들과 다른 것을 생각합니다’라는 소개 문단이 이어진다.
스크롤을 내리면 IMC&STRATEGY·CREATIVE&PRODUCTION·DIGITAL MARKETING·DESIGN&UX 네 영역으로 나눈 WHAT WE DO 구획, 월드비전·데상트·노스페이스·한화손해보험 등 실제 클라이언트 로고와 작업물을 나열한 PORTFOLIO 구획, 그리고 협업 브랜드 80개·누적 프로젝트 350건·고객 재선택률 95% 같은 수치를 카운팅 애니메이션으로 보여주는 VALUE 구획이 이어진다. 이번 리뷰에서는 이 실적 증명형 구조를 살펴본다.
브랜드 & 메시지
브랜드 화법의 핵심은 ‘다름의 선언’이다. ‘당연한 것에 의문을 갖고 고정관념을 경계하며, 문제의 원인을 남다르게 고민해 더 나은 기회를 모색합니다’라는 문장으로 대행사로서의 태도를 먼저 제시하고, ‘하이테크 시대에 하이터치의 해법을 찾는 솔루셔니스트’라는 표현으로 AI 기술과 사람 중심 해법을 함께 다룬다는 포지션을 명시한다.
시각 언어는 검정 배경에 빨간·보라 계열 그라디언트 오브제, Bebas Neue 서체의 대형 타이포를 조합한 강렬한 구성이다. AI SOLUTION 구획에서는 Figma·Runway·Suno 같은 실제 AI 도구 로고를 나열해, 슬로건에 그치지 않고 실제 사용 도구를 구체적으로 제시한다. PORTFOLIO 구획은 피레티·제주관광공사·데상트·노스페이스·마이클코어스 등 클라이언트 로고를 상단에 먼저 배치해, 텍스트 설명 이전에 신뢰를 시각적으로 전달한다.
UX/UI 관점
강점은 다섯 가지다. 첫째, WHAT WE DO 구획을 IMC&STRATEGY·CREATIVE&PRODUCTION·DIGITAL MARKETING·DESIGN&UX 네 카드로 나누고 각 카드 아래 구체적 서비스명(브랜드 전략, 키비주얼, SNS 운영, UI/UX 디자인 등)을 함께 제시해, ‘무엇을 하는 회사인가’를 한 화면에서 파악하게 했다. 둘째, PORTFOLIO 구획에 17건 이상의 작업물을 나열하면서 각각 IMC 캠페인·UI/UX 리뉴얼·이커머스 운영·AI 콘텐츠 같은 태그를 붙여, 방문자가 관심 분야별로 사례를 훑을 수 있게 했다.
셋째, VALUE POINTS 구획에서 협업 브랜드 80+, 누적 프로젝트 350+, 고객 재선택률 95%, 광고 도달률 120%, 연간 콘텐츠 제작 5,000건 이상을 스크롤 진입 시 카운팅 애니메이션으로 보여줘, 정적인 숫자 나열보다 강한 인상을 남긴다. 넷째, OUR PROCESS 구획을 인사이트-전략-크리에이티브-실행-퍼포먼스 5단계로 구조화해, 대행사 업무 프로세스를 방법론처럼 제시한다. 다섯째, 하단 CONTACT INFO에 전화·팩스·주소·이메일을 모두 텍스트로 노출해 문의 진입 장벽을 낮췄다.
IA·SEO 전략
title은 ‘(주)도아 종합광고대행사’, description은 ‘브랜드 목표 달성을 위해 홈페이지·쇼핑몰 구축부터 마케팅·영상제작까지 ONE-STOP 솔루션을 제공하는 종합광고대행사’로 업종과 서비스 범위를 함께 담는다. og:title·og:description·twitter 메타가 모두 설정돼 있지만, twitter:title에는 ‘Practical UX VinylC’라는 페이지 성격과 무관한 문구가 남아 있어 다른 프로젝트에서 쓰던 값이 정리되지 않은 것으로 보인다.
포트폴리오 항목 각각에 클라이언트명과 작업 태그가 텍스트로 포함돼 있어 초기 HTML 단계에서부터 검색엔진이 읽을 수 있는 정보량은 준수하다. 다만 h1을 별도로 확인하기 어렵고, 포트폴리오 개별 작업물이 상세 페이지 없이 카드형으로만 제시돼 있어, ‘월드비전 IMC 캠페인’처럼 프로젝트 단위로 검색될 여지가 사이트 안에서 만들어지지 않는다.
성능·접근성
Figma·Runway·Suno 등 AI 도구 로고 애니메이션, 클라이언트별 작업물 이미지 17건 이상, 스크롤 연동 카운팅 애니메이션까지 인터랙션 요소가 많은 구조다. jQuery, jQuery Migrate, Swiper, AOS, GSAP ScrollToPlugin 등 여러 자바스크립트 라이브러리를 함께 로드하고 있어, 스크립트 로딩 순서와 중복 여부를 점검할 필요가 있다. 포트폴리오 이미지가 다수인 만큼 지연 로딩 적용 여부도 함께 확인할 만하다.
접근성 측면에서는 검정 배경 위 흰 텍스트 대비는 전반적으로 양호하지만, VALUE POINTS의 옅은 보조 텍스트나 태그 라벨처럼 작은 글자에서는 대비를 별도로 확인해야 한다. 카운팅 애니메이션과 스크롤 연동 효과가 많은 만큼, 모션에 민감한 사용자를 위한 축소 옵션을 함께 고려하면 좋다.
자주 묻는 질문
도아(DOA)는 어떤 서비스를 제공하는 회사인가요?
브랜드 전략, IMC 캠페인, 콘텐츠 제작, 디지털 마케팅, 웹사이트·이커머스 구축까지 아우르는 종합광고대행사입니다. 월드비전, 데상트, 노스페이스 등 다양한 브랜드와의 협업 사례를 포트폴리오로 공개하고 있습니다.
광고대행사 홈페이지에 실적 수치를 넣으면 효과가 있나요?
효과가 있습니다. 도아처럼 협업 브랜드 수, 누적 프로젝트 건수, 고객 재선택률을 구체적으로 제시하면 잠재 광고주가 신뢰도를 빠르게 판단할 수 있습니다. 다만 수치는 실제와 일치해야 하며, 정기적으로 갱신하는 것이 좋습니다.
포트폴리오 중심 홈페이지는 어떤 구조가 검색에 유리한가요?
카드형으로 요약만 보여주기보다, 프로젝트별 상세 페이지를 만들어 클라이언트명과 작업 내용을 독립된 URL로 노출하는 것이 유리합니다. 그래야 특정 브랜드나 캠페인을 검색했을 때 해당 사례가 발견될 수 있습니다.
홈페이지 메타 태그에 다른 프로젝트의 문구가 남아 있으면 어떤 문제가 생기나요?
소셜 공유나 검색 결과에 실제 페이지와 무관한 제목·설명이 노출될 수 있어 신뢰도에 영향을 줍니다. 새 프로젝트를 배포하기 전에 메타 태그 전체를 점검해 이전 값이 남아 있지 않은지 확인하는 것이 기본입니다.
디지털 파트너 더블루캔버스
광고대행사·크리에이티브 회사의 홈페이지는 포트폴리오 자체가 영업 자산이다. 하지만 카드형으로만 나열된 작업물은 화면에서는 인상적이어도, 검색엔진 입장에서는 개별 프로젝트로 구분되지 않는 경우가 많다. 잠재 광고주가 특정 브랜드나 캠페인 사례를 검색했을 때 그 사례가 발견되지 않는다면, 포트폴리오의 가치가 검색 밖에서만 머무는 셈이다.
The Blue Canvas(더블루캔버스)는 포트폴리오 중심 홈페이지를 만들 때 각 작업물을 독립된 페이지와 구조화 데이터로 분리해, 시각적 완성도와 검색 발견 가능성을 함께 설계한다. 메타데이터 정합성을 정기적으로 점검하는 절차도 이 작업에 포함된다.
마무리와 다음 스텝
도아의 사이트는 ‘다름의 선언’이라는 브랜드 화법을 강렬한 타이포와 카운팅 애니메이션으로 일관되게 구현했다. 4영역 서비스 카드와 17건 이상의 포트폴리오, 5단계 프로세스 시각화는 대행사가 무엇을 어떻게 하는지를 설득력 있게 전달한다.
실행 제안은 셋이다. 첫째, twitter:title에 남아 있는 무관한 문구를 정리해 메타데이터 정합성을 맞춘다. 둘째, 주요 포트폴리오 항목에 개별 상세 페이지를 만들어 프로젝트 단위 검색 유입을 확보한다. 셋째, 다수의 자바스크립트 라이브러리 로딩 순서를 점검해 초기 렌더링 속도를 개선한다.
