개요
핵심 요약
- 크림(CREAM)은 더크림유니언의 디지털 크리에이티브 브랜드로, 2004년부터 활동해 왔다고 명시한다.
- 사이트 전면 주제는 AI 네이티브 조직으로의 전환이며, 대표 카피는 ‘함께, AI로 나아갑니다’다.
- 역량은 Brand Experience, UX/UI, Campaign, Content, Operation, AI Transformation 여섯 갈래로 제시된다.
- 실적 지표로 Since 2004, 142+, 105+, AI Native Workflow 네 항목을 나란히 배치한다.
- 자체 AI 도구로 CREAM NAVI VISION, Cream WIKI, Cream CLI를 소개하며, 구조화 데이터에 음성 검색용 speakable 지정까지 포함돼 있다.
크림(CREAM)은 20년 넘게 활동해 온 디지털 크리에이티브 에이전시다. 사이트는 검은 화면에 금빛 물결로 시작한다. 어두운 수면 위를 나아가는 조정 보트 영상 위에 ‘함께, AI로 나아갑니다’가 놓인다. 여럿이 노를 맞춰 젓는 이미지와 AI 전환이라는 주제를 겹친 화면인데, 기술 전환을 개인의 역량이 아니라 조직의 호흡으로 규정하는 메시지로 읽힌다.
이후 구성은 정체성 → 실적 → 작업 → AI 방법론 → 자체 도구 → 소식 → 채용 → 문의로 이어진다. 다크와 라이트를 교대로 배치해 구간을 구분하고, 각 구간마다 서로 다른 성격의 증거를 배치한다. 이번 리뷰에서는 ‘AI로 전환했다’는 선언을 화면에서 증명하는 방식과, 에이전시 사이트로서 눈에 띄는 검색 설계를 살펴본다.
브랜드 & 메시지
정체성 선언은 다크 구획에서 이루어진다. ‘크림은 2004년부터 브랜드와 사용자가 만드는 디지털 경험을 설계해온 크리에이티브 파트너입니다.’ 여기에 여섯 개의 역량이 그리드로 붙고, 그 아래 Since 2004, 142+, 105+, AI Native Workflow 네 개의 지표가 나란히 놓인다. 연혁·규모·전환 상태를 한 줄로 압축한 배치다.
AI 전환에 대한 태도는 중간 구획에서 분명해진다. ‘AI를 지휘합니다’라는 제목 아래 지휘자의 손 이미지가 놓이고, ‘기존 업무에 AI를 하나 더 얹는 방식이 아닙니다’라는 문장이 이어진다. AI 도입을 도구 추가가 아니라 작업 방식의 재편으로 규정하는 화법이다. 이 주장을 뒷받침하는 것이 자체 도구 세 가지 — CREAM NAVI VISION, Cream WIKI, Cream CLI — 이고, 이름을 붙인 도구를 공개하는 행위 자체가 ‘우리는 실제로 만들었다’는 증거로 기능한다. 채용 구획에서 손그림 얼굴 수백 개를 배치해 ‘함께 진화할 다음 얼굴을 찾습니다’로 마무리하는 구성도, AI 전환이 인력 대체가 아니라는 메시지를 은근히 담는다.
UX/UI 관점
강점은 여섯 가지다. 첫째, 역량을 여섯 칸 그리드로 정리해 서비스 범위를 한 화면에 담았다. 에이전시 사이트에서 방문자가 가장 먼저 확인하는 정보를 스크롤 한 번 안에 처리한다. 둘째, 지표 네 개를 나란히 두되 마지막 칸을 숫자가 아닌 ‘AI Native Workflow’로 채웠다. 정량 지표 사이에 상태 선언을 끼워 넣어, 이 회사가 강조하고 싶은 것이 무엇인지 드러낸다.
셋째, Featured Works를 크기가 다른 카드로 구성해 대표작과 나머지를 시각적으로 구분했다. 넷째, AI 방법론 구획에서 세 개의 카드로 접근 방식을 나눠 설명하고, 그 아래 요약 문단을 배치해 훑는 사람과 읽는 사람을 모두 대응했다. 다섯째, 자체 도구를 별도 구획으로 독립시켜 ‘AI를 쓴다’와 ‘AI를 만든다’를 구분했다. 여섯째, 인사이트 목록을 카테고리·날짜·제목의 세 열로 정리해 목록 밀도를 낮췄다. 마지막 CTA ‘새로운 프로젝트를 준비하고 있다면, 크림과 이야기해보세요’는 문의 버튼을 자연스러운 문장 끝에 배치해, 강매 없이 전환으로 연결한다.
IA·SEO 전략
검색 설계는 이번 리뷰 대상 중 앞선 축에 속한다. 제목과 설명이 ‘cream 4.0, CREAM × AI UNION’과 ‘AI Creative Tech’로 브랜드의 현재 포지션을 담고 있고, canonical과 3개 언어 hreflang이 설정돼 있다. 구조화 데이터도 Organization, WebPage, Place, PostalAddress, GeoCoordinates, ContactPoint까지 다층으로 적용됐다.
특히 눈에 띄는 것은 speakable 지정이다. 페이지의 어떤 부분을 음성 비서가 읽어야 하는지 지정하는 항목으로, 국내 사이트에서 실제로 적용된 사례는 드물다. AI 답변 엔진과 음성 검색을 염두에 둔 설정이며, 에이전시로서 자기 사이트에 최신 스펙을 먼저 적용해 보인다는 의미도 있다. 남은 과제는 페이지 단위다. 여섯 개 역량과 사례들이 홈 안에 머물러 있는데, ‘브랜드 경험 설계’, ‘디지털 캠페인 대행’ 같은 검색어를 받으려면 역량별 페이지가 필요하다. 사례도 개별 URL로 열어 클라이언트·산업·과제를 텍스트로 담으면, 유사 프로젝트를 찾는 담당자의 검색에 직접 걸린다.
성능·접근성
영상 요소가 여러 개 사용되고 이미지 사용은 적은 편이다. 시각 자산 대부분이 영상이라면 첫 화면 로딩 관리가 핵심이다. 히어로 영상에는 poster를 지정하고, 하단 영상은 뷰포트 진입 시 로드하며, 모바일에서는 정지 이미지로 대체하는 분기를 두는 것이 좋다. 다크 톤 영상은 비트레이트를 낮추면 밴딩이 두드러지므로, 해상도와 압축 설정을 별도로 조정할 필요가 있다.
접근성 측면에서는 다크와 라이트가 교대되는 구조에서 각 구간의 텍스트 대비를 개별적으로 확인해야 한다. 특히 금빛 텍스트를 어두운 영상 위에 얹는 히어로는 영상 프레임에 따라 대비가 크게 흔들린다. 지표 숫자처럼 정보 가치가 높은 요소는 배경과 무관하게 읽히도록 처리하는 편이 안전하다. 자체 도구 이름처럼 고유명사가 많은 사이트에서는 첫 등장 시 한 줄 설명을 붙이는 것이 이해도와 검색 양쪽에 도움이 된다.
자주 묻는 질문
에이전시 홈페이지에서 실적은 어떻게 보여주는 것이 좋은가요?
연혁·규모·현재 상태를 한 줄로 압축하는 방식이 효과적입니다. 크림처럼 설립 연도와 프로젝트 수, 그리고 지금의 작업 방식을 나란히 배치하면 축적과 변화를 동시에 전달할 수 있습니다.
AI 전환을 강조하는 회사는 그것을 어떻게 증명할 수 있나요?
자체 도구를 이름과 함께 공개하는 것이 가장 강력합니다. ‘AI를 활용합니다’라는 문장은 누구나 쓸 수 있지만, 이름 붙은 도구는 실제로 만들었다는 증거가 됩니다.
speakable 구조화 데이터는 무엇이고 왜 넣나요?
페이지에서 음성 비서가 읽어야 할 부분을 지정하는 항목입니다. 음성 검색과 AI 답변 엔진이 어떤 문장을 인용할지에 영향을 줄 수 있어, 답변 엔진 최적화를 준비하는 사이트에서 적용을 검토할 만합니다.
에이전시 사이트에서 사례를 개별 페이지로 만들어야 하나요?
그래야 합니다. 담당자는 ‘금융 앱 리뉴얼 사례’처럼 자기 과제와 비슷한 조건으로 검색합니다. 사례마다 산업·과제·역할을 텍스트로 담은 페이지가 있어야 그 검색에 걸립니다.
디지털 파트너 더블루캔버스
에이전시 사이트는 스스로가 포트폴리오다. 그래서 화면에는 힘이 들어가는데, 정작 검색에서는 자기 업종의 키워드를 놓치는 경우가 많다. 역량과 사례가 모두 홈 한 페이지에 담겨 있으면, 어떤 검색어로도 상위에 오르기 어렵기 때문이다.
The Blue Canvas(더블루캔버스) 역시 같은 시장에서 일하는 회사로서 이 문제를 구조로 다룬다. 역량과 사례를 문서 단위로 나누고, 각 문서에 검색어와 구조화 데이터를 배치하고, 그 문서들이 AI 답변에 인용될 수 있는 형태로 정리한다. 화면의 인상과 검색의 성과는 별개의 작업이며, 둘을 같은 설계 안에서 다뤄야 결과가 남는다.
마무리와 다음 스텝
크림의 사이트는 ‘우리는 달라졌다’는 어려운 선언을 설득력 있게 처리했다. 20년이라는 시간과 프로젝트 수라는 축적을 먼저 보여주고, AI를 도구 추가가 아닌 방식 재편으로 규정한 뒤, 자체 도구 이름으로 그 주장을 뒷받침한다. 채용 구획을 사람 얼굴로 채워 마무리한 구성도 메시지의 균형을 잡는다.
실행 제안은 셋이다. 첫째, 여섯 개 역량을 각각 독립 페이지로 열어 서비스 검색어를 받는다. 원페이지 구조에서 가장 큰 기회 손실 지점이다. 둘째, 사례를 개별 URL로 열고 산업·과제·역할을 텍스트로 담는다. 셋째, 다크·라이트 교대 구간의 텍스트 대비를 개별 점검하고 영상 자산의 로딩 순서를 정리한다. 구조화 데이터에 speakable까지 적용한 사이트인 만큼, 페이지 단위만 나누면 검색 성과가 빠르게 따라올 여지가 있다.