개요
쿠키런 크리에이터 패밀리(CookieRun Creator Family)는 게임 쿠키런의 팬 콘텐츠를 만드는 창작자와, 그 창작자를 응원하는 후원자를 한자리에 모으는 크리에이터 지원 프로그램입니다. 히어로 바로 아래에는 우리 모두를 위한 따뜻한 베이킹 프로그램이라는 문장이 걸려 있어, 쿠키·오븐이라는 IP 세계관을 마케팅 언어로 자연스럽게 끌어옵니다. 후원자는 크리에이터가 올린 쿠키런 콘텐츠를 보고 마음에 드는 창작자를 후원하고, 그 활동이 다시 패밀리 전체의 혜택으로 돌아오는 순환 구조가 이 사이트가 파는 핵심 가치입니다.
이번 UX/UI 리뷰에서는 세 가지를 봅니다. 게임 IP 특유의 컬러와 캐릭터 자산을 웹사이트 제작에 어떻게 녹였는가, 참가 자격에서 신청, 포인트, 보상으로 이어지는 정보 흐름이 처음 온 방문자에게 얼마나 잘 읽히는가, 그리고 신청 전환(크리에이터·후원자 등록)을 화면 어디에서 밀어붙이는가입니다. 아래는 리뷰 대상 메인 페이지 전체 화면입니다.
브랜드 & 메시지
브랜드의 첫인상은 히어로에서 결정됩니다. 다크 네이비에서 보랏빛으로 번지는 무대 조명 배경 위에 COOKIERUN CREATOR FAMILY가 대문자 디스플레이로 놓이고, CREATOR의 O 자리에는 쿠키 캐릭터가 앉아 로고 타이포 자체를 하나의 일러스트로 만들었습니다. 게임 브랜드가 흔히 저지르는 캐릭터를 그냥 크게 얹는 방식과 달리, 글자와 캐릭터를 한 덩어리로 붙여 브랜드 각인을 노린 점이 좋았습니다.
톤앤매너는 시종일관 말랑합니다. 연보라 배경, 둥근 카드, 손그림 톤의 쿠키 캐릭터가 따뜻한 베이킹이라는 카피와 정확히 맞물립니다. CTA는 보라색 필(pill) 버튼으로 통일돼 화면 어디에 있어도 눌러야 할 것이 한눈에 구분됩니다. 다만 히어로 버튼의 문구가 다소 밋밋해, 크리에이터로 신청하기처럼 대상과 행동이 분명한 라벨로 바꾸면 첫 전환을 더 끌어올릴 여지가 있습니다. 상단 글로벌 네비게이션은 패밀리 가이드·캠페인·로그인 정도로 항목 수를 절제해, 게임 커뮤니티형 사이트에 잘 맞는 단순함을 지켰습니다.
UX/UI 관점
실제 화면을 뜯어보면 이 웹디자인이 잘한 지점이 분명합니다.
- 반복되는 섹션 헤더 규칙 — 참가 방법 & 지원 자격 안내, 혜택 안내, 이렇게 함께 해요까지 모든 섹션이 쿠키런 크리에이터 패밀리 + 컬러 소제목의 2단 구성으로 반복돼, 스크롤 내내 리듬이 일정합니다.
- 스텝 넘버링의 시각화 — 01·02 참가 조건과 STEP1~STEP5 참여 흐름을 번호 배지로 끊어, 복잡한 프로그램 규칙을 한 스텝씩 소화하게 만듭니다.
- 플랫폼 자격 배지 — 유튜브·트위치·틱톡 등 채널별 최소 구독자 기준을 아이콘과 숫자(100·1,000 등) 배지로 즉시 확인시켜, 자격 판단에 드는 인지 비용을 크게 줄였습니다.
- 혜택의 4분할 카드 — 리워드 포인트 지급, 후원자 결제 포인트 적립, 포인트 상점, 콘텐츠 제작 지원을 아이콘 카드 네 장으로 병렬 배치해, 참여하면 무엇을 얻는지 3초 안에 스캔됩니다.
- 캐릭터 일러스트의 기능화 — 셀카봉을 든 쿠키, 오븐 앞 쿠키처럼 캐릭터가 단순 장식이 아니라 콘텐츠를 만든다는 맥락을 그림으로 설명합니다.
- 3단 컬러 위계 — 흰 카드, 연보라 배경, 진보라 CTA의 대비로 정보 카드와 행동 버튼이 절대 헷갈리지 않습니다.
IA·SEO 전략
크리에이터 프로그램 사이트의 SEO는 일반적인 브랜드 홈페이지 제작과 결이 다릅니다. 로그인·신청 뒤편 콘텐츠(DevPlay 계정 연동, 포인트 상점, 크리에이터 대시보드)는 검색에 노출되지 않으므로, 공개 영역인 참가 안내·혜택·캠페인 리스트 페이지가 유입의 관문이 됩니다. 각 캠페인 카드가 개별 상세 URL을 갖도록 설계하고, 그 페이지마다 캠페인명·기간·보상을 담은 고유 <title>과 meta description을 부여하면 쿠키런 크리에이터 컵 같은 이벤트 검색을 그대로 흡수할 수 있습니다.
구조화 데이터도 이 사이트 유형에 잘 맞습니다. 캠페인에는 Event 스키마를, 프로그램 소개에는 조직·멤버십 정보를 붙여 리치 스니펫 가능성을 열어 두는 것이 좋습니다. 히어로의 대문자 로고 타이포는 시각적으로 강력하지만 그 자체가 H1 텍스트로 잡히는지 반드시 확인해야 합니다. 이미지로만 처리돼 있다면 쿠키런 크리에이터 패밀리라는 핵심 키워드가 크롤러에게 통째로 사라집니다. 캠페인 썸네일마다 서로 다른 OG 이미지를 지정해, 공유했을 때 어떤 캠페인인지 링크 카드에서 구분되게 하는 것도 커뮤니티 확산에 직접 작용합니다.
성능·접근성
이 페이지는 캐릭터 일러스트와 카드가 촘촘한 이미지 중심 레이아웃입니다. 그만큼 성능의 무게추는 이미지에 실립니다. 투명 배경 쿠키 캐릭터는 PNG로 나가기 쉬운데, 알파가 필요 없는 배경 요소는 WebP/AVIF로 교체하고 캐릭터만 선별적으로 투명 PNG를 유지하면 초기 로딩 용량을 눈에 띄게 줄일 수 있습니다. 히어로의 대형 배경과 첫 화면 캐릭터는 지연 로딩 대상에서 빼고 우선 로드해 LCP를 지키고, 화면 아래 캠페인·스텝 일러스트에만 lazy load를 적용하는 이원화가 적절합니다.
접근성 측면에서는 배지 안의 숫자(구독자 기준)와 STEP 라벨이 이미지가 아니라 실제 텍스트여야 스크린리더와 확대 사용자 모두에게 전달됩니다. 연보라 배경 위 옅은 회색 워터마크 타이포는 분위기용으로는 훌륭하지만, 본문으로 오해되지 않도록 aria-hidden 처리를 권합니다. 보라색 CTA는 흰 글자와의 대비가 충분해 보이나, 연보라 배경 위의 연한 보조 텍스트는 WCAG 대비 기준을 한 번 측정해 볼 값입니다.
디지털 파트너 더블루캔버스
쿠키런 크리에이터 패밀리처럼 IP·캐릭터·커뮤니티가 얽힌 브랜드 사이트는 예쁜 화면 한 장으로 끝나지 않습니다. 신청 퍼널, 캠페인 상세, 포인트와 보상 로직, 크리에이터 대시보드가 한 몸으로 굴러가야 하고, 그 위에서 검색 유입과 전환까지 설계돼야 합니다. The Blue Canvas(더블루캔버스)는 바로 이 지점, 브랜드 홈페이지 제작부터 캠페인 랜딩, SEO 검색엔진 최적화, 퍼포먼스 마케팅까지를 하나의 흐름으로 잇는 디지털 파트너입니다.
게임·브랜드 커뮤니티, 창작자 모집 플랫폼, 이벤트 캠페인 페이지의 웹사이트 제작을 고민 중이라면, 기획·웹디자인·개발·데이터 실험을 한 팀에서 반복 개선하는 방식이 결과의 질을 바꿉니다. 첫 화면의 카피 한 줄부터 신청 버튼의 위치, 캠페인 URL 구조, 공유 카드 이미지까지 전환을 염두에 둔 UX/UI로 설계합니다.
마무리와 다음 스텝
쿠키런 크리에이터 패밀리는 게임 IP의 자산을 낭비 없이 쓰면서, 복잡한 크리에이터 프로그램 규칙을 스텝과 카드로 잘게 썰어 소화시키는 웹사이트입니다. 캐릭터와 로고 타이포를 붙인 히어로, 일관된 섹션 리듬, 플랫폼 배지 같은 디테일은 이미 상위권입니다. 다음 세 가지만 손보면 완성도가 한 단계 올라갑니다.
- 히어로 CTA 재문구화 — 밋밋한 버튼 라벨을 크리에이터로 신청하기 / 후원자로 참여하기처럼 대상과 행동이 분명한 문구로 나눠 첫 전환을 끌어올리기.
- 캠페인 페이지의 SEO 독립 — 캠페인마다 고유 URL·메타·OG 이미지·Event 스키마를 부여해 이벤트 검색과 공유 유입을 흡수하기.
- 이미지 성능·접근성 정리 — 배경 이미지 포맷 최적화, 히어로 우선 로드, 배지·스텝 텍스트화와 장식 요소 aria-hidden 처리로 속도와 접근성을 동시에 확보하기.