개요
더씨앤엠(The CNM)은 온·오프라인 콘텐츠 제작과 마케팅, 라이브 커머스로 브랜드 성장을 만드는 크리에이티브 에이전시다. 사이트에 들어서면 회사 설명보다 캐릭터가 먼저 말을 건다. 픽셀 선글라스를 낀 흰 마스코트가 화면을 가득 채운 CNM 레터링 위에 앉아 있고, 초록과 노랑 스퀴글 라인이 베이지 배경을 가로지른다. 레터링 위에 아치로 얹힌 "Creative And More"가 사명의 유래까지 첫 화면에서 해결한다. 이번 리뷰는 이 유쾌한 첫인상이 UX/UI 설계와 에이전시의 실력 증명으로 어떻게 이어지는지, 그리고 웹사이트 제작 관점에서 다음 단계는 무엇인지 살핀다.
브랜드 & 메시지
스크롤을 내리면 "더씨앤엠은 독창적인 크리에이티브로 온, 오프라인 컨텐츠 제작 및 마케팅, 라이브 커머스를 통해 브랜드의 성장을 이끌어 갑니다"라는 문장이 국문·영문 병기로 등장한다. 무엇을 하는 회사인지 한 문장으로 끝냈고, 글로벌 클라이언트를 의식한 영문 카피까지 붙였다. 네비게이션은 About·Highlights·Atl·Btl·Contact 다섯 개로 절제되어 있는데, ATL/BTL이라는 광고 업계 용어를 메뉴명으로 그대로 쓴 선택은 양날이다. 대행사를 비교 검토 중인 실무자에게는 정확한 분류지만, 처음 외주를 알아보는 브랜드 담당자에게는 암호처럼 읽힌다. 톤앤매너는 레트로 카툰으로 일관한다. 러버호스 스타일 마스코트가 핑크·그린·옐로·오렌지로 변주되며 섹션마다 다른 역할을 맡고, CTA조차 "스크롤해서 씨앤엠 알아가기" 같은 말풍선 화법이다. 실질적인 전환 장치는 하단에 모여 있다. "Click Here and Get Newsletter" 바와 회사소개서 다운로드 버튼이 그것이다.
UX/UI 관점
이 사이트의 웹디자인 강점은 뚜렷하다. 첫째, 캐릭터 시스템의 일관성. 마스코트가 히어로에서는 간판으로, 중반에서는 스크롤 가이드로, "마우스를 대보세요!" 말풍선 옆에서는 인터랙션 힌트로, Client and Partners 섹션에서는 네 컬러의 앙상블로 등장한다. 페이지 전체가 하나의 세계관으로 묶인다. 둘째, 마이크로카피가 UI를 대신한다. 버튼 대신 "Click!", 안내문 대신 말풍선. 조작법을 배우는 과정 자체가 브랜드 경험이 된다. 셋째, 포트폴리오를 보드게임 맵으로 풀었다. "WELCOME! THE CNM WORLD!" 아래 트랙 위에 The North Face, New Balance, ISOI, 네스프레소 매장이 늘어선 구성은 로고 그리드보다 훨씬 오래 기억에 남는 사회적 증거다. 넷째, 색의 절제. 베이지 단일 캔버스에 블랙 타이포를 깔고, 포인트 컬러는 스퀴글과 캐릭터에만 허락했다. 덕분에 HIGHLIGHT 블랙 필 버튼의 대비가 정확히 시선을 고정한다. 다섯째, 타이포 위계. 하프톤 패턴을 채운 초대형 아웃라인 CNM과 손글씨풍 The의 대비가 강한 인상을 만들고, 본문은 작고 조용하게 물러나 있다.
IA·SEO 전략
에이전시 사이트의 검색 유입은 대부분 "라이브커머스 대행", "콘텐츠 제작 대행" 같은 서비스 키워드에서 온다. 지금처럼 원페이지 흐름 중심이면 이 키워드를 받아낼 지면이 부족하다. Highlights의 프로젝트들을 고유 URL과 개별 title·description을 가진 케이스스터디 페이지로 독립시키면, 클라이언트명 검색과 서비스 키워드 검색을 동시에 흡수할 수 있다. Atl·Btl 메뉴도 URL 슬러그와 페이지 헤딩에서는 브랜드 캠페인, 오프라인 프로모션 같은 풀네임으로 보강하는 편이 검색과 이해 양쪽에 유리하다. 보드게임 맵은 사람에게는 매력적이지만 크롤러에게는 빈 공간이므로, 클라이언트명을 텍스트 리스트로도 병기해야 The North Face 같은 레퍼런스가 검색 자산이 된다. 뉴스레터는 별도 랜딩 페이지를 두고 구독 성과를 측정할 수 있게 만드는 것이 다음 수순이다.
성능·접근성
일러스트와 인터랙션이 많은 사이트인 만큼 자원 관리가 체감 품질을 좌우한다. 캐릭터 에셋은 래스터 이미지 대신 SVG나 Lottie로 관리하면 고해상도 화면에서도 가볍고 선명하다. 히어로의 초대형 레터링이 LCP 요소라면 이미지보다 웹폰트와 CSS로 그리는 쪽이 초기 로딩에 유리하다. "마우스를 대보세요!"처럼 호버에 기대는 인터랙션은 터치 기기에서 무의미해지므로 탭 대체 동작이 필요하고, 움직임이 많은 화면 특성상 prefers-reduced-motion 대응도 갖춰야 한다. 맵과 캐릭터 이미지에는 명시적 width·height와 지연 로딩을 적용해 스크롤 중 레이아웃 밀림을 막고, 장식용 일러스트는 대체 텍스트에서 제외해 스크린리더 사용자의 피로를 줄이는 것이 좋다.
디지털 파트너 더블루캔버스
더씨앤엠처럼 캐릭터와 세계관으로 승부하는 홈페이지 제작은 일러스트 실력만으로 완성되지 않는다. 개성을 유지하면서 검색엔진이 읽을 수 있는 구조를 깔고, 인터랙션이 성능을 갉아먹지 않게 조율하고, 유쾌한 첫인상을 문의와 계약으로 잇는 전환 설계까지 한 호흡으로 가야 한다. The Blue Canvas는 브랜드 사이트의 기획·웹디자인부터 SEO 검색엔진최적화, 퍼포먼스 마케팅까지 이 전 과정을 통합해 설계한다. 에이전시, 스튜디오, 브랜드몰처럼 개성이 곧 상품인 업종의 홈페이지 제작을 고민하고 있다면, 보이는 것과 검색되는 것과 전환되는 것을 함께 다루는 파트너와 시작하는 편이 빠르다.
마무리와 다음 스텝
더씨앤엠 웹사이트는 캐릭터 하나로 브랜드 정체성, 내비게이션 안내, 포트폴리오 연출까지 해내는 드문 사례다. 베이지 캔버스 위 절제된 컬러 운용과 보드게임 맵의 발상은 에이전시의 크리에이티브 역량을 말이 아닌 화면으로 증명한다. 다음 스텝은 세 가지다. Highlights 프로젝트를 개별 케이스스터디 페이지로 독립시켜 검색 지면을 확보할 것, 보드게임 맵의 클라이언트를 텍스트로도 병기해 호버·모바일·크롤러 어디서든 접근 가능하게 만들 것, 뉴스레터와 회사소개서 다운로드에 측정 체계를 붙여 이 사이트가 만들어내는 리드를 숫자로 확인할 것. 세계관은 이미 완성됐으니, 이제 그 세계로 들어오는 길을 넓힐 차례다.