CTKCLIP 웹사이트 해부: K-Beauty OEM/ODM 플랫폼의 디자인 토큰 & 인터랙션 전략

첫인상: CTKCLIP.COM을 처음 열었을 때

페이지를 열면 흰 배경에 하늘색 그라데이션 히어로 섹션이 펼쳐진다. “Your Idea Today / Becomes Tomorrow’s Beauty Brand With CTKCLIP.COM” — 영어 헤드라인이 중앙 정렬로 크게 자리를 잡는다. 한국 화장품 OEM/ODM 플랫폼이지만 글로벌 고객을 1순위로 상정한 구성이다.

스크롤을 내리면 sec1 → sec2 → sec3.contents-swiper → sec4 → sec5.easy-simple-section → sec6 순서로 섹션이 이어진다. 섹션마다 네비게이션 바가 sticky하게 붙어 있어, 풀페이지 스크린샷에서도 네비게이션이 여러 번 반복 노출된다. 이 sticky 전략은 CTK가 네비게이션 클릭을 핵심 전환 경로로 보고 있다는 신호다.

기술 스택 해부

프레임워크 & 번들링 전략

__NEXT_DATA__, __NUXT__, /_astro/ 중 어떤 시그니처도 감지되지 않았다. 스크립트 경로가 /static/js/app.js?v=1773201249354 형태로, 버전 쿼리스트링(v=타임스탬프)으로 캐시 버스팅을 직접 구현하는 자체 빌드 파이프라인이다.

body 클래스가 desktop no-touch body--light로 설정된다. JS가 UA 감지 또는 pointer event 지원 여부를 판단해서 desktop/mobile, touch/no-touch 클래스를 동적으로 주입하는 패턴이다. 프레임워크 내장 반응형 대신 CSS 클래스 분기로 레이아웃을 제어한다는 뜻이다.

// 추정 구현 — body 클래스 주입 패턴
const isTouch = window.matchMedia('(pointer: coarse)').matches;
const isMobile = window.innerWidth < 768;
document.body.classList.add(isMobile ? 'mobile' : 'desktop');
document.body.classList.add(isTouch ? 'touch' : 'no-touch');
document.body.classList.add('body--light'); // 기본 라이트 테마

Froala Editor CSS(froala-editor@latest)가 로드되는 것으로 보아 CMS 에디터를 내장하고 있다. 인사이트 포스트나 공지 등 콘텐츠 편집 기능이 플랫폼 내부에 있을 가능성이 높다.

CDN & 호스팅

미디어 자산 전체가 d18khqjaxnxujq.cloudfront.net에서 서빙된다. AWS CloudFront를 글로벌 미디어 CDN으로 사용하는 전형적인 K-startup 아키텍처다. 한국 → 동남아 → 미국 고객을 상대하는 글로벌 B2B 플랫폼답게 레이턴시 최적화를 CDN으로 해결했다.

정적 에셋(/static/css/, /static/js/)은 동일 오리진 서버에서 직접 서빙한다. 이미지/동영상 같은 대용량만 CloudFront, 코드 번들은 오리진 — 비용과 복잡도 균형을 맞춘 결정이다.

분석 도구 스택 — 6종 멀티 어트리뷰션

Groobee(groobee.io)는 국내 이커머스에서 쓰이는 AI 상품 추천 SDK다. 이걸 B2B OEM 플랫폼에 도입했다는 건, 플랫폼 내 제품 탐색 경험을 개인화하겠다는 의도다. 소량 MOQ 특성상 여러 제품을 비교 탐색하는 바이어 패턴에 적합한 선택이다.

추정 프로젝트 구조

graph TD
    ROOT["ctkclip.com/"] --> STATIC["static/"]
    ROOT --> PAGES["페이지 라우트"]
    ROOT --> CDN["CloudFront CDN"]

    STATIC --> CSS["css/ — reset.css, app.css"]
    STATIC --> JS["js/ — app.js, vendors"]
    STATIC --> IMAGES["images/ — 로고, 히어로 이미지"]

    PAGES --> HOME["/ — 메인"]
    PAGES --> PLP["plp/ — 제품 목록"]
    PAGES --> SOLUTION["solution/ — 클립 솔루션"]
    PAGES --> INSIGHTS["insights/ — 인사이트"]
    PAGES --> WITH_YOU["with-you/ — 가이드"]
    PAGES --> AUTH["login/ join/ — 인증"]
    PAGES --> MYPAGE["mypage/ — 마이페이지"]

    CDN --> PRODUCTS["productTrans/ — 제품 이미지"]
    CDN --> CONTENTS["link_content/ — 콘텐츠 썸네일"]
    CDN --> FAVICON["user/favicon/ — 파비콘 세트"]

    style ROOT fill:#067EFB,stroke:#0558c9,color:#fff
    style STATIC fill:#7048E8,stroke:#5c39c0,color:#fff
    style CDN fill:#0AAFC9,stroke:#089ab3,color:#fff

인터랙션 레이어 해부

GSAP, Framer Motion, Lottie — 없다. CTKCLIP은 별도 JS 애니메이션 라이브러리 없이 순수 CSS 트랜지션으로 인터랙션 전체를 처리한다. 이건 절제된 선택이다. B2B 플랫폼에서 시선을 끄는 인터랙션보다 로딩 속도와 안정성이 우선이기 때문이다.

CSS 트랜지션 duration 체계

6가지 duration이 구체적으로 감지됐다:

transition-property로 감지된 항목: background-color, transform, opacity, height, border-color, color, width, background, bottom, top, left — 레이아웃 관련 프로퍼티(height, width, top, left)가 포함된 점이 눈에 띈다. Accordion이나 사이드 패널 같은 레이아웃 전환 인터랙션이 있다는 방증이다.

제품 호버 이미지 스왑

이 사이트의 핵심 인터랙션은 제품 카드 hover 시 이미지가 교체되는 패턴이다. DOM을 보면 각 제품마다 두 개의 이미지 URL이 존재한다:

• main_0_1997c4e1 — 기본 제품 이미지
• over_0_061143380 — 호버 시 노출 이미지 (다른 각도 또는 사용 예시)

/* 제품 카드 호버 이미지 스왑 패턴 (추정) */
.product .img-default { opacity: 1; transition: opacity 0.4s; }
.product .img-hover   { opacity: 0; position: absolute; inset: 0; transition: opacity 0.4s; }

.product:hover .img-default { opacity: 0; }
.product:hover .img-hover   { opacity: 1; }

이커머스 표준 패턴이지만, OEM/ODM 플랫폼에 적용한 이유가 있다. 바이어가 제품을 탐색할 때 용기 형태와 실제 제형 텍스처를 한 번에 비교하게 하려는 의도다.

Swiper 카루셀

sec3.contents-swiper와 sec5.easy-simple-section 두 섹션에서 Swiper가 쓰인다. 자동 추출된 사이트 유형이 scroll(일반 스크롤)로 나온 걸 보면, 전체 페이지를 Swiper 수직 슬라이드로 제어하지는 않는다. 섹션 내부의 수평 카루셀에만 국한해서 Swiper를 사용하는 절제된 구성이다.

디자인 시스템 분석

컬러 팔레트

CSS 변수에서 추출한 브랜드 컬러와 토큰 체계:

CSS 변수 네이밍이 두 레이어로 나뉜다. --color-blue, --color-purple 같은 의미 토큰과 --color-gray-10 ~ --color-gray-98 같은 스케일 토큰이 공존한다. 스케일 숫자가 10, 25, 35, 50, 65, 75, 85, 90, 92, 95, 98 — 10단계가 아닌 명도 기반 불규칙 간격으로 정의되어 있다. 실무에서 디자이너가 “이 회색이 약간 더 밝았으면” 같은 피드백을 수용하면서 토큰이 추가되는 과정에서 나온 형태다.

타이포그래피

Wanted Sans를 선택한 이유는 맥락이 있다. 원티드랩의 HR 플랫폼과 유사한 B2B SaaS 느낌을 연출하면서, 한국어-영어 혼용 텍스트에서 모두 자연스러운 웨이트 분포를 보여준다. 화장품 브랜드지만 CTKCLIP은 뷰티보다 테크 플랫폼 정체성을 강조하는 방향을 택했고, 폰트 선택이 그 방향을 반영한다.

레이아웃 & 반응형

sec1 ~ sec6의 섹션 명명 규칙이 의도적이다. 컴포넌트 이름이 아니라 순서 번호로 섹션을 구분하는 건, 랜딩 페이지 특성상 섹션 재배치 빈도가 높아서 숫자 ID가 더 실용적이라는 판단으로 보인다.

모바일에서 body 클래스가 mobile touch로 전환되고, viewport에 user-scalable=no가 적용된다. 핀치 줌을 막는 한국 모바일 앱식 처리다. 접근성 측면에서는 논쟁 여지가 있지만, 제품 이미지 스왑 같은 터치 이벤트 처리가 핀치 줌과 충돌하는 걸 막는 현실적 선택이다.

UX 패턴 깊이 파기

네비게이션

4개 메인 메뉴: CREATE YOUR PRODUCT · CLIP SOLUTIONS · INSIGHTS · CTKCLIP WITH YOU. 각 메뉴가 플랫폼의 핵심 기능 흐름을 반영한다. 제품 만들기 → 솔루션 탐색 → 인사이트 학습 → 커뮤니티 참여 — 바이어가 브랜드를 론칭하기까지의 여정 순서다.

우측 상단에 위시리스트(하트), 언어/지역 전환(글로브 아이콘), 로그인 버튼이 배치된다. 글로브 아이콘의 존재가 다국어 지원을 암시하며, 제목 태그의 한국어-영어 병기도 같은 맥락이다.

정보 구조

/ (랜딩)
├── /plp/formula     → 제품 목록 (포뮬라 기준)
├── /solution/main   → CLIP 솔루션
├── /insights/       → 인사이트 & 블로그
│   └── /inspiration
├── /with-you/guide  → 가이드 & 커뮤니티
└── /mypage/wishlist → 위시리스트 (로그인 필요)

/plp/formula — PLP(Product List Page)에 formula라는 패싯이 URL에 노출된다. 포뮬라 외에도 패키지, 카테고리 등 다른 패싯이 있을 가능성이 높다. URL 구조만으로 제품 필터링 아키텍처를 역설계할 수 있다.

SEO & 웹 표준

squirrel audit 기준 전체 점수 40점(F등급). 카테고리별로 보면 편차가 크다:

H1 태그가 비어있는 문제도 있다. 시각적으로 크게 보이는 “Becomes Tomorrow’s Beauty Brand” 텍스트가 실제로는 h2로 마크업되어 있다. 검색 엔진이 페이지 주제를 파악하는 주요 시그널 중 하나를 놓치고 있다.

배울 점 & 아쉬운 점

참조할 만한 기술

1. 정교한 CSS 변수 스케일 시스템

--color-gray-10부터 --color-gray-98까지 숫자를 밝기 기준으로 설계한 방식은 실무에서 바로 쓸 수 있다. 색상 이름이 아닌 밝기 수치로 토큰을 정의하면 디자이너-개발자 간 커뮤니케이션이 단순해진다.

/* 참조 패턴: 밝기 기준 그레이 스케일 토큰 */
:root {
  --color-gray-10: #121212;  /* 거의 검정 */
  --color-gray-50: #707070;  /* 중간 회색 */
  --color-gray-95: #EFEFEF;  /* 거의 흰색 */
  --color-gray-98: #F7F7F7;  /* 배경용 */
}

2. body 클래스 기반 디바이스 분기

Tailwind의 반응형 접두사(md:, lg:) 대신 body.desktop/body.mobile 클래스로 CSS를 분기하는 방식은 복잡한 터치/비터치 인터랙션 차이를 처리할 때 유효하다. 단, JS 로드 전 깜빡임(FOUC)을 막으려면 SSR 또는 <head> 인라인 스크립트로 초기값을 설정해야 한다.

3. 제품 이미지 이중화 패턴

main_0 + over_0 URL 컨벤션으로 이미지를 서버에 저장하고, CSS로 호버 스왑을 처리하는 방식. 별도 JS 없이 구현 가능하고, 스크린 리더가 대체 이미지를 alt로 인식할 수 있어 접근성 친화적이다.

개선 여지

• SEO: H1 비어있음 — 히어로 헤드라인을 h1으로 올리고 제목 태그를 60자 이내로 정리하는 것만으로도 Core SEO 점수를 크게 올릴 수 있다
• 폰트 중복 로딩 — Wanted Sans CSS가 두 번 <link>로 삽입되어 있다. 번들 설정 점검이 필요하다
• 6개 분석 도구 → 초기 로딩 페이지 — TikTok Pixel 2개를 포함한 분석 스크립트들이 메인 스레드를 점유한다. async/defer 또는 GTM으로 통합 관리하면 Performance 점수를 개선할 수 있다
• Legal Compliance 44점 — GDPR/개인정보보호법 기준 쿠키 동의 UX 보완이 필요하다. 특히 EU 고객 대상 K-beauty 플랫폼이라면 우선순위를 높여야 한다

배울 점: 개발자가 가져갈 기술적 인사이트

B2B 플랫폼의 인터랙션 절제 원칙 — GSAP·Framer Motion 없이 CSS 트랜지션만으로 인터랙션을 처리한 건 의도된 절제다. 바이어가 제품 정보를 탐색하는 맥락에서 화려한 애니메이션은 오히려 집중을 방해한다. 애니메이션 라이브러리를 추가하기 전에 CSS 트랜지션으로 충분한지 먼저 물어볼 것.

분석 도구를 제품 전략 신호로 읽는 법 — Mixpanel(퍼널 분석) + Groobee(AI 추천) 조합은 이 팀이 바이어의 제품 탐색 흐름을 데이터로 개선하고 있다는 신호다. 어떤 분석 도구를 선택했는지가 곧 팀의 성장 전략을 보여준다.

CloudFront CDN 분리 전략 — 코드 번들은 오리진, 미디어만 CloudFront로 분리하는 패턴은 CDN 비용을 최적화하면서 글로벌 레이턴시를 관리하는 현실적 선택이다. 이미지 많은 이커머스 플랫폼에서 바로 적용할 수 있는 아키텍처 패턴이다.

자주 묻는 질문 (FAQ)

Q. CTKCLIP이 Next.js 같은 SSR 프레임워크를 쓰지 않은 이유는?

외부 관찰만으로 확정할 수는 없지만, /static/ 경로의 커스텀 번들과 body 클래스 JS 주입 패턴을 보면 자체 빌드 파이프라인을 오랫동안 유지해온 레거시일 가능성이 높다. 초기 MVP를 커스텀 스택으로 빠르게 런칭한 뒤, 리팩토링 비용이 커져 현재 구조를 유지하는 흔한 패턴이다.

Q. Wanted Sans vs Pretendard — 왜 Wanted Sans를 선택했을까?

두 폰트 모두 한국어-영어 혼용에 강하다. Pretendard가 더 얇고 중립적인 느낌이라면, Wanted Sans는 획이 굵고 테크 스타트업 정체성이 뚜렷하다. CTKCLIP이 화장품 제조 플랫폼임에도 불구하고 B2B SaaS 이미지를 구축하려 한다면, Wanted Sans가 더 적합한 선택이다.

Q. 분석 도구가 6개인데 성능에 영향은 없을까?

영향이 있다. Performance 점수가 65점인 원인 중 하나다. TikTok Pixel 2개는 각각 main.js를 동기 로딩한다. 이를 GTM 하나로 통합하고 async 로딩으로 전환하면 초기 렌더 블로킹을 줄일 수 있다.

📚 관련 글 더 읽어보기

핸들리(Handly) 웹사이트 해부: 노코드 빌더로 만든 B2B SaaS 랜딩의 한계와 가능성

핸들리(Handly)의 디자인 시스템, 기술 스택, UX 패턴을 심층 분석합니다. imweb 노코드 플랫폼 위에서 B2B SaaS 랜딩을 어떻게 구현했는지, 그리고 어떤 트레이드오프가 존재하는지 살펴봅니다.

읽어보기 →

한컴AI 웹사이트 해부: GSAP과 Swiper로 만든 기업형 풀스크린 인터랙션

한컴AI(ai.hancom.com)의 디자인 시스템, 기술 스택, UX 패턴을 심층 분석합니다. Vanilla JS + GSAP + Swiper 조합의 풀스크린 스크롤 전략부터 다국어 대응, 다크 테마 브랜딩까지.

읽어보기 →

DRAFT.X 웹사이트 해부: Framer 기반 하이엔드 에이전시 웹 패턴 분석

DRAFT.X(드래프트엑스)의 디자인 시스템, 기술 스택, UX 패턴을 심층 분석합니다. 프레이머 기반의 No-code 아키텍처와 시각적 퍼포먼스의 트레이드오프를 확인하세요.

읽어보기 →

RightBrain(라이트브레인) 웹사이트 해부: WordPress + Slider Revolution으로 완성한 UX 에이전시의 자기표현

대한민국 대표 UX 컨설팅 에이전시 라이트브레인(rightbrain.co.kr)의 디자인 시스템, 기술 스택, UX 패턴을 심층 분석합니다. BeTheme + Slider Revolution 6의 풀스크린 시네마틱 히어로, 커스텀 폰트 시스템, 포트폴리오 중심 정보 설계까지.

읽어보기 →