프로젝트 무료 상담 신청 킹콩애드 - UX/UI 리뷰 | The Blue Canvas
UX/UI Review

킹콩애드 Website Design Review

2026-04-13·브랜드/웹 리뷰

우주복을 입은 고릴라 캐릭터와 King Kong moves your brand라는 헤드라인으로 광고대행사의 신뢰 문제를 풀어낸 킹콩애드 웹사이트. 스토리텔링 원페이지의 웹디자인과 FAQ, 문의 폼으로 이어지는 전환 설계를 UX/UI 관점에서 짚었다.

협업 문의 및 자세히 보기

개요

킹콩애드는 그로스 마케팅과 바이럴 마케팅을 다루는 광고대행사다. 그런데 웹사이트 첫 화면은 광고 회사보다 만화책에 가깝다. 우주선 조종석 창밖으로 로켓이 솟아오르는 일러스트 위에 "King Kong moves your brand."라는 둥글고 굵직한 헤드라인이 떠 있고, 스크롤을 내리면 우주복을 입은 고릴라가 손을 흔들며 등장한다. 광고대행사 홈페이지의 흔한 공식 — 성과 숫자 나열, 고객사 로고 그리드 — 을 버리고 하나의 우주 서사로 페이지 전체를 밀고 나간 선택이 흥미롭다. 이번 리뷰는 이 캐릭터 중심 웹디자인이 '광고 업계 불신'이라는 업종 고유의 장벽을 어떻게 넘는지, 그리고 FAQ와 문의 폼까지 이어지는 전환 동선이 실제로 작동하는 구조인지 살핀다.

킹콩애드 웹사이트 메인 스크린샷

브랜드 & 메시지

"King Kong moves your brand." — 브랜드를 '움직인다'는 동사와 킹콩이라는 상호가 한 문장 안에서 맞물리고, 헤드라인 옆으로 솟구치는 붉은 로켓이 네이비 화면에 유일한 강조색을 찍는다. 이어지는 크림색 섹션은 화면을 가득 채우는 붉은 세리프로 A QUANTUM JUMP를 외치고, 그 한가운데 고릴라 우주비행사가 배지처럼 박혀 있다. 네이비·크림·레드를 축으로 한 팔레트가 페이지 끝까지 안정적으로 이어진다.

재치만 있는 사이트는 아니다. Market Overview 섹션의 카피 "숫자가 말해주는 현실, 광고는 이제 '운'으로 할 수 없습니다"는 일러스트의 유쾌함과 정반대의 진지한 톤으로 균형을 잡고, FAQ의 "믿을 수 있는 광고, 명확한 답변에서 시작됩니다"는 이 회사가 어떤 불신을 상대하는지 정확히 안다는 신호다. 네비게이션은 ABOUT·SERVICE·CONTACT 세 항목과 문의 버튼으로 극단적으로 압축했다. 원페이지 구조에서 이 정도 절제는 오히려 미덕이다.

UX/UI 관점

화면에서 확인한 강점은 뚜렷하다. 첫째, 세계관의 일관성. 조종석, 스페이스셔틀, 식물이 자라는 'AD' 캡슐 온실까지 모든 섹션 일러스트가 한 명의 손에서 나온 듯 톤이 통일돼 있다. 둘째, 섹션마다 배경색을 네이비→크림→네이비→그린으로 교차시켜 긴 스크롤에도 구획이 명확하고 지루하지 않다. 셋째, FAQ가 고객의 언어로 쓰였다. "광고 사기를 당한 적이 있어요", "확신도 없는데 1년 계약하라고 합니다", "자꾸 전화 영업으로 괴롭혀서 너무 힘들어요" — 업계의 아픈 곳을 그대로 아코디언 제목으로 올린 배짱이 신뢰를 만든다. 넷째, 유쾌한 일러스트 사이에 57% 파이 차트와 시장 데이터 카드를 끼워 넣어 감성과 근거를 오간다. 다섯째, 문의 폼의 입력 부담 설계. 그로스/바이럴을 라디오로 먼저 고르게 하고 업종은 식음료·건설/부동산·교육 같은 칩 버튼 클릭으로 끝낸다. 타이핑을 최소화한 폼은 전환율에 직접 기여한다. 여기에 클립보드를 든 고릴라 마스코트가 폼 옆에서 안내자 역할까지 맡는다.

키워드: 일관된 우주 세계관, 컬러 리듬, 고객 언어 FAQ, 데이터로 잡는 균형, 저마찰 문의 폼

IA·SEO 전략

원페이지 스토리텔링의 대가는 검색 표면적이다. 그로스 마케팅과 바이럴 마케팅이라는 두 서비스가 한 URL에 묶여 있으면 '업종별 광고대행', '바이럴 마케팅 대행' 같은 구체적 검색어를 받아낼 페이지가 없다. SERVICE를 앵커가 아닌 독립 URL로 분리하고, 문의 폼의 업종 칩(식음료, 교육, 건설/부동산 등)을 업종별 사례 페이지로 확장하면 지금의 세계관을 유지한 채 검색 유입 경로를 여러 갈래로 늘릴 수 있다. FAQ 아코디언은 이미 질문-답변 구조를 갖췄으니 FAQPage 구조화 데이터를 얹기에 최적의 소재다. 검색 결과에 질문이 그대로 노출되면 "광고 사기를 당한 적이 있어요"라는 문장은 광고주 검색자에게 강력한 클릭 유인이 된다. 일러스트 안에 텍스트가 갇히지 않도록 핵심 카피를 실제 HTML 텍스트로 유지하는 것도 홈페이지 제작 단계에서 챙겨야 할 기본기다.

성능·접근성

이 사이트의 자산이자 부담은 풀스크린 일러스트다. 섹션마다 대형 이미지가 깔리는 구조라 WebP/AVIF 전환과 뷰포트 밖 이미지의 지연 로딩만으로도 체감 속도가 달라진다. 히어로 일러스트는 반대로 지연 없이 프리로드해 LCP를 지키고, 모든 이미지에 명시적 크기를 부여해 스크롤 중 레이아웃 밀림을 막아야 한다. HOVER ME 인디케이터가 암시하는 스크롤 인터랙션이 있다면 메인 스레드 점유를 측정해 저사양 모바일에서도 프레임이 유지되는지 확인할 필요가 있다. 접근성에서는 네이비 배경 위 작은 회색 본문의 명도 대비, FAQ 아코디언의 키보드 조작과 aria-expanded 상태, 폼 라디오·칩 버튼의 레이블 연결이 점검 포인트다. 캐릭터 일러스트에는 의미 있는 대체 텍스트를, 장식 요소에는 숨김 처리를 적용하면 스크린리더 사용자에게도 서사가 전달된다.

디지털 파트너 더블루캔버스

킹콩애드 사례가 보여주듯, 광고·마케팅처럼 불신이 기본값인 업종에서는 웹사이트가 곧 첫 영업사원이다. 캐릭터와 세계관으로 기억에 남고, 데이터와 FAQ로 신뢰를 쌓고, 저마찰 폼으로 문의를 받아내는 구조 — 이런 웹사이트 제작은 디자인, 카피, 전환 설계가 처음부터 한 몸으로 기획돼야 나온다. The Blue Canvas는 브랜드 성격에 맞는 홈페이지 제작부터 검색엔진최적화(SEO), 퍼포먼스 마케팅까지 하나의 흐름으로 설계한다. 에이전시, 병원, 브랜드몰 등 신뢰 기반 업종의 UX/UI와 전환 구조를 고민하고 있다면 지금 상담해 보길 권한다.

The Blue Canvas 바로가기

마무리와 다음 스텝

킹콩애드 웹사이트는 캐릭터 세계관, 고객 언어로 쓴 FAQ, 입력 부담을 덜어낸 문의 폼이라는 세 축으로 '기억되고 신뢰받는' 광고대행사 홈페이지의 한 전형을 보여준다. 다음 스텝은 세 가지다. 첫째, FAQ에 FAQPage 구조화 데이터를 적용하고 서비스별 독립 페이지를 만들어 검색 표면적을 넓힐 것. 둘째, 일러스트 이미지를 차세대 포맷으로 전환하고 히어로만 프리로드하는 로딩 전략으로 초기 속도를 다질 것. 셋째, 지금은 시장 통계가 맡고 있는 신뢰 근거를 실제 캠페인 성과 사례로 교체해 설득의 마지막 조각을 채울 것. 세계관은 이미 완성돼 있다. 남은 일은 그 세계로 들어오는 문을 늘리는 것이다.