KakaoPage Web Design Analysis

분석 대상: https://page.kakao.com/
분석일: 2026-07-07 KST
범위: 카카오페이지 웹 홈, 주요 내비게이션, 추천 피드, 작품 상세 화면

1. 제품 성격

카카오페이지는 웹툰, 웹소설, 책, 요일연재 콘텐츠를 탐색하고 이어서 소비하게 만드는 엔터테인먼트 콘텐츠 플랫폼이다. 첫 화면의 목표는 설명이 아니라 발견이다. 사용자는 이미 읽을거리를 찾으러 들어왔기 때문에, UI는 브랜드 메시지보다 작품 커버, 이벤트, 랭킹, 무료 혜택, 이어보기 진입을 우선한다.

핵심 UX 방향은 다음과 같다.

콘텐츠 이미지가 화면의 주인공이어야 한다.
내비게이션은 얇고 조용해야 한다.
추천, 랭킹, 이벤트, 무료 혜택을 짧은 칩과 레일로 빠르게 전환하게 한다.
상세 화면에서는 탐색보다 첫 화 보기, 회차 목록, 무료 여부, 댓글/반응을 우선한다.
라이트/다크 모드를 모두 지원하는 토큰 기반 색상 체계를 전제로 한다.

2. 정보 구조

2.1 글로벌 내비게이션

상단 내비게이션은 kakao page 로고와 5개 주요 탭으로 구성한다.

추천
웹툰
웹소설
책
요일연재

오른쪽에는 검색, 보관함, 선물함, 내 정보로 이어지는 아이콘 액션을 둔다. 검색은 입력창 형태로 노출하되, 데스크톱에서는 제목, 작가를 입력하세요.처럼 즉시 검색 의도를 드러낸다. 모바일에서는 공간 제약이 커서 검색 입력창보다 아이콘 액션으로 축약하는 편이 자연스럽다.

2.2 홈 하위 탭

추천 홈에는 2차 탐색 칩을 둔다.

지금핫한
실시간 랭킹
오늘신작
이벤트
남성인기
완결추천
완전판
여성인기
TV속 작품
브랜드

선택된 칩은 검정 배경과 흰 글자, 보조 아이콘으로 강하게 표시한다. 나머지 칩은 흰 표면, 연한 테두리, 검정 텍스트로 처리한다. 칩은 페이지 전환보다 콘텐츠 필터 전환에 가깝게 느껴져야 하므로 높이는 낮고 반응은 빠르게 유지한다.

2.3 콘텐츠 상세

상세 화면은 좌측 작품 요약 패널과 우측 회차/정보 패널의 2열 구조가 기본이다.

좌측 패널:

커버 이미지
제목
작가명
장르 태그
조회/인기 지표
별점
연재 주기
관심/좋아요
기본 CTA: 첫 화 보기
선물 대여권 등 혜택 카드

우측 패널:

홈 / 정보 / 소식 탭
전체 회차 수
정렬: 첫화부터 또는 최신순
회차 목록
무료/유료 상태
추천작 및 댓글 영역

2.4 요일연재

요일연재 화면은 특정 요일에 업데이트되는 작품을 빠르게 비교하는 그리드형 탐색 화면이다. 구조는 요일 탭 -> 콘텐츠 타입 필터 -> 정렬 -> 카테고리 컬럼 -> 작품 카드 순서로 읽힌다.

상단 요일 탭:

콘텐츠 타입 필터:

전체
카웹Zone
웹툰
웹소설

정렬:

페이지 추천순

본문 그리드:

카웹Zone
웹툰
웹소설

각 카테고리 컬럼은 내부적으로 2열 포스터 그리드를 사용한다. 데스크톱에서는 3개 컬럼이 한 화면에 나란히 보이고, 모바일 웹에서는 서비스 원형 기준으로 넓은 그리드를 유지해 가로 스크롤이 발생한다.

3. 레이아웃 원칙

3.1 데스크톱

데스크톱 홈은 중앙 고정 폭 컨테이너를 사용한다. 상단 헤더는 화면 전체에 걸치되, 실제 콘텐츠는 약 930-960px 안쪽에서 정렬한다. 카카오페이지의 현재 웹은 넓은 화면에서도 콘텐츠 폭을 과하게 늘리지 않고, 작품 포스터와 캐러셀 비율을 안정적으로 유지한다.

권장 구조:

Header: 높이 64-72px
Primary nav: 로고 옆 수평 탭
Utility actions: 우측 검색 및 아이콘 버튼
Secondary chips: 헤더 아래 44-56px 영역
Hero carousel: 대형 이미지 중심
Content rails: 섹션 제목 + 가로 카드 리스트
Footer: 정책, 고객센터, 사업자 정보

3.2 모바일

모바일에서는 상단 탭과 칩이 가로 스크롤 영역으로 유지된다. 콘텐츠 플랫폼의 특성상 모든 탭을 햄버거 메뉴 안에 숨기기보다, 사용자가 옆으로 밀어 빠르게 탐색하도록 두는 편이 낫다.

주의점:

390px 폭 관찰 기준, 일부 콘텐츠 레일은 앱형 고정 폭을 유지하면서 가로 넘침이 발생한다.
모바일 웹에서는 의도된 가로 레일과 페이지 전체의 불필요한 horizontal overflow를 구분해야 한다.
본문 전체가 옆으로 밀리는 느낌이 나지 않도록 body 기준 overflow는 막고, 레일 단위에만 overflow-x: auto를 준다.
헤더 아이콘 버튼은 최소 44px 터치 영역을 확보한다.
요일연재처럼 3개 컬럼이 의미 단위인 화면은 모바일에서도 카드 폭을 과하게 줄이지 말고, 그리드 래퍼 내부에서만 가로 스크롤되게 한다.

4. 비주얼 시스템

4.1 색상

카카오페이지의 핵심 인상은 흰 바탕, 검정 텍스트, 노란 CTA, 작품 이미지의 고채도 색감이다. UI 자체는 매우 절제하고, 감정과 장르는 콘텐츠 썸네일이 담당한다.

권장 토큰:

:root {
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-surface-raised: #ffffff;
  --color-text-primary: #111111;
  --color-text-secondary: rgba(17, 17, 17, 0.62);
  --color-text-tertiary: rgba(17, 17, 17, 0.42);
  --color-border: rgba(0, 0, 0, 0.08);
  --color-brand: #ffcf00;
  --color-brand-pressed: #f2c200;
  --color-inverse: #000000;
  --color-on-inverse: #ffffff;
}

[data-theme="dark"] {
  --color-bg: #111111;
  --color-surface: #1d1d1d;
  --color-surface-raised: #242424;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: rgba(245, 245, 245, 0.66);
  --color-text-tertiary: rgba(245, 245, 245, 0.44);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-brand: #ffcf00;
  --color-brand-pressed: #e8bb00;
  --color-inverse: #ffffff;
  --color-on-inverse: #000000;
}

4.2 타이포그래피

한글 콘텐츠명이 길고 장르명이 짧기 때문에, 제목은 굵게, 메타 정보는 낮은 대비로 분리한다.

Font family: system sans-serif 또는 Pretendard, Apple SD Gothic Neo, Noto Sans KR
Header tab: 15-16px, 700
Chip: 13-14px, 600
Section title: 16-18px, 700
Card title: 13-15px, 600
Metadata: 11-13px, 400-500
Detail title: 22-28px, 700
Episode title: 14-16px, 500-600

긴 작품명은 1-2줄 클램프를 기본으로 하고, 리스트에서는 말줄임을 허용한다. 단, 상세 제목은 가능한 한 줄바꿈을 허용해 작품명을 온전히 보여준다.

4.3 형태와 밀도

카드 반경: 8-12px
대형 캐러셀 이미지 반경: 12-16px
칩 반경: pill 형태
아이콘 버튼: 시각 크기 24px, 터치 영역 44px 이상
섹션 간격: 32-48px
카드 간격: 8-12px
상세 화면 패널 간격: 8-12px

카카오페이지 스타일의 핵심은 UI 장식이 아니라 콘텐츠 표지의 밀도다. 카드에 과한 그림자나 보더를 넣지 말고, 이미지, 제목, 메타만으로 빠르게 스캔되게 한다.

5. 핵심 컴포넌트

5.1 Header

역할: 서비스 전체의 현재 위치와 개인 액션을 제공한다.

규칙:

로고는 좌측 고정.
1차 탭은 로고 옆에 배치한다.
선택 탭은 하단 2px 선 또는 굵기 변화로 표시한다.
검색은 데스크톱에서 입력 필드, 모바일에서 아이콘 중심으로 축약한다.
보관함, 선물함, 내 정보는 아이콘 버튼으로 유지한다.

접근성:

로고 링크에는 카카오페이지 홈으로 이동 수준의 명확한 레이블을 둔다.
탭에는 선택됨, 총 n개 중 m번째 정보를 스크린 리더용 텍스트로 제공한다.
아이콘 단독 버튼에는 반드시 aria-label을 둔다.

5.2 Filter Chip

역할: 추천 피드의 관점 전환.

상태:

Default: white surface + border + primary text
Active: black fill + white text
Hover: subtle gray fill
Pressed: slight scale or darker fill, layout 이동 없음
Focus: 2px outline

권장 크기:

Height: 36-40px
Horizontal padding: 16-18px
Gap: 8px

5.3 Hero Carousel

역할: 이벤트, 신작, 인기작 등 가장 강한 프로모션을 전달한다.

구조:

상단 프로모션 라벨
중앙 대형 이미지
좌우 보조 이미지 일부 노출
이전/다음 원형 버튼
현재 위치 / 전체 개수 인디케이터
이미지 하단 텍스트 오버레이

규칙:

이미지가 핵심이므로 텍스트 오버레이는 1-2줄로 제한한다.
오버레이 텍스트는 흰색 + 그림자 또는 그라데이션 스크림으로 대비를 확보한다.
자동 재생이 있다면 멈춤/수동 조작을 제공하고, prefers-reduced-motion을 존중한다.

5.4 Content Card

역할: 작품을 빠르게 비교하고 진입하게 한다.

구성:

커버 이미지
제목
콘텐츠 유형: 웹툰, 웹소설, 책
장르 또는 혜택 배지
조회/인기 숫자

규칙:

카드 전체를 클릭 영역으로 둔다.
커버 이미지는 고정 비율을 유지한다.
이미지 로딩 전 skeleton 또는 배경색으로 레이아웃 점프를 막는다.
제목은 1-2줄, 메타는 1줄로 제한한다.

5.5 Weekday Grid

역할: 요일별 업데이트 작품을 카테고리 단위로 비교하게 한다.

구성:

요일 탭: 월, 화, 수, 목, 금, 토, 일
타입 필터: 전체, 카웹Zone, 웹툰, 웹소설
정렬 버튼: 페이지 추천순
카테고리 헤더: 카웹Zone, 웹툰, 웹소설
작품 포스터 카드
상태 배지: 연재무료, UP, 신작, 기다무, 3다무, 19세 완전판 등
작품명
작가/제작자명

데스크톱 규칙:

본문은 3개 카테고리 컬럼을 같은 너비로 배치한다.
각 컬럼 내부는 2열 포스터 그리드를 사용한다.
컬럼 헤더는 어두운 배경 위 흰 텍스트로 구분한다.
포스터 카드 사이 간격은 2-4px 수준으로 촘촘하게 유지한다.
작품명과 작가명은 포스터 하단 오버레이로 표시한다.
배지는 포스터 좌상단에 배치하고, UP, 연재무료, 신작처럼 짧은 텍스트로 의미를 직접 표시한다.

모바일 규칙:

원본 서비스처럼 전체 그리드 폭을 유지할 수 있다.
단, 구현 시 페이지 전체가 가로 스크롤되지 않도록 weekday-grid 같은 전용 래퍼에만 overflow-x: auto를 준다.
요일 탭과 타입 필터는 각각 독립된 가로 스크롤 영역으로 유지한다.
카드 최소 폭을 보장해 포스터 비율과 하단 텍스트 가독성을 지킨다.

권장 CSS 구조:

.weekday-grid {
  overflow-x: auto;
}

.weekday-grid-inner {
  min-width: 900px;
}

.weekday-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.weekday-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

5.6 Detail Summary Panel

역할: 작품의 정체성과 첫 소비 행동을 만든다.

규칙:

커버 뒤에 블러 처리된 배경 이미지를 깔아 작품 분위기를 확장한다.
CTA는 노란색 브랜드 버튼으로 강하게 둔다.
첫 화 보기는 상세 화면의 유일한 1차 CTA로 취급한다.
선물 대여권/이벤트 혜택은 CTA 아래 보조 액션으로 둔다.

5.7 Episode List

역할: 회차를 안정적으로 소비하게 한다.

구성:

회차 썸네일
회차 제목
회차 번호
날짜
무료/대여/소장 상태

규칙:

리스트 행 높이는 72-88px 수준으로 유지한다.
무료 배지는 작지만 명확해야 한다.
정렬은 우측 상단에 두고, 현재 정렬 상태를 텍스트로 보여준다.
회차가 많은 작품은 virtualization 또는 incremental loading을 고려한다.

6. 인터랙션 원칙

탭/칩 전환은 150-250ms 안에 끝낸다.
카드 hover는 이미지 확대보다 약한 밝기/오버레이 변화 정도로 제한한다.
터치에서는 hover 의존 정보를 만들지 않는다.
캐러셀 이동 버튼은 이미지 위에 뜨더라도 44px 이상 클릭 영역을 확보한다.
검색은 입력 즉시 추천어/최근 검색을 보여주되, 엔터 검색도 지원한다.
뒤로가기는 탭 상태, 정렬 상태, 검색어를 보존해야 한다.

7. 접근성 체크리스트

필수:

모든 아이콘 버튼에 텍스트 레이블 제공
선택된 탭/칩 상태를 시각과 보조 텍스트 모두로 표현
본문 텍스트 대비 4.5:1 이상
대형 이미지 오버레이 텍스트 대비 4.5:1 이상
키보드 탭 순서: 로고 -> 주요 탭 -> 검색 -> 유틸 액션 -> 하위 탭 -> 콘텐츠
캐러셀 이전/다음 버튼에 명확한 레이블 제공
자동 캐러셀이 있다면 pause 또는 reduced motion 대응

권장:

콘텐츠 카드 이미지에 작품명을 포함한 alt 제공
무료/이벤트/랭킹 상태를 색상만으로 표현하지 않기
스크린 리더용 총 n개 중 m번째 패턴 유지
모바일에서 고정 헤더가 콘텐츠를 가리지 않도록 safe-area 반영

8. 성능 원칙

카카오페이지형 UI는 이미지가 많기 때문에 성능 설계가 곧 UX다.

포스터 이미지는 WebP/AVIF 우선.
모든 커버 이미지에 width, height, aspect-ratio 지정.
첫 화면 캐러셀 이미지만 우선 로드하고, 아래 레일은 lazy loading.
긴 작품 레일과 회차 목록은 가상화 또는 페이지 단위 로딩.
이미지 실패 시 회색 박스가 아니라 제목을 포함한 fallback 카드 제공.
skeleton은 이미지 비율과 동일한 크기로 표시해 CLS를 막는다.

9. 구현 시 피해야 할 것

히어로 영역을 마케팅 문구 중심으로 만들기
카드마다 그림자, 보더, 배경색을 과하게 넣기
작품 이미지 비율을 제각각 두어 레일 높이가 흔들리게 만들기
모바일에서 전체 페이지가 가로 스크롤되게 두기
요일연재 그리드를 모바일 폭에 억지로 1열로 접어 카테고리 비교성을 잃게 만들기
선택 탭을 색상만으로 표시하기
아이콘 버튼에 접근성 레이블을 생략하기
상세 화면에서 CTA를 여러 개 같은 강도로 배치하기

10. 참고 관찰

공식 웹 HTML과 렌더링 화면에서 1차 탭은 추천, 웹툰, 웹소설, 책, 요일연재 5개로 확인된다.
우측 유틸리티는 검색, 보관함, 선물함, 내 정보 흐름으로 구성된다.
계정 패널에는 캐시 충전, 알림, 캐시 PASS VIP, 캐시 내역, 이용권 내역, 댓글 내역, 공지사항, 고객센터, 쿠폰 등록, 설정, 다크 모드가 포함된다.
홈 추천 화면에는 지금핫한, 실시간 랭킹, 오늘신작, 이벤트, 남성인기, 완결추천, 완전판, 여성인기, TV속 작품, 브랜드 하위 탭이 렌더링된다.
요일연재 화면은 월부터 일까지의 요일 탭, 전체, 카웹Zone, 웹툰, 웹소설 타입 필터, 페이지 추천순 정렬, 그리고 카웹Zone, 웹툰, 웹소설 3개 컬럼 그리드로 구성된다.
요일연재의 각 카테고리 컬럼은 2열 포스터 그리드를 사용하며, 모바일에서도 서비스 원형 기준으로 넓은 그리드를 유지해 가로 스크롤이 발생한다.
상세 화면은 작품 요약 패널과 회차 목록 패널을 나누며, 첫 화 보기를 주요 CTA로 사용한다.