카카오톡 채널 홈

D-목업-카카오-채널홈

언제 쓰는가

채널 운영 제안에서 채널 홈의 프로필, 버튼, 카드뷰, 소식 구성을 보여줄 때. 화면 1개, 카드 2장, 소식 2건. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 버튼 3개 이내(노란 버튼 1개 고정). 카드 2장, 소식 2건.

참고

카카오 채널홈 개편 안내(kakaocorp.com/page/detail/10632), 카카오비즈니스 채널 관리자센터 가이드, 채널홈 기능 해설(byline.network/2023/09/21-297). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mkkch">
  <div class="lf">
    <div class="fr">
      <div class="ph mock "><div class="sb"><span>9:41</span><i></i></div><div class="g" style="height:50px;border-radius:0">홈 배경</div>
<div class="pd col" style="gap:4px;margin-top:-24px"><span class="av" style="width:44px;height:44px;border:3px solid #fff"></span><div class="fx"><p class="t13 bd">숲길핏</p><span class="vf">✓</span><span class="t9 mu">친구 12,480</span></div><p class="t10" style="color:#444">집에서 하는 필라테스, 30일 체험 진행 중</p>
<div class="fx" style="gap:5px;margin-top:3px"><span class="yb">채널 추가</span><span class="gb">1:1 채팅</span><span class="gb">체험 신청</span></div></div>
<div class="pd col" style="gap:6px;padding-top:4px"><p class="t10 bd">카드뷰</p><div class="fx" style="gap:8px;align-items:stretch"><div class="cd"><div class="g" style="height:50px;border-radius:0">카드 이미지</div><p class="t10 bd" style="padding:5px 7px 6px;line-height:1.3">10월 체험 쿠폰</p></div><div class="cd"><div class="g" style="height:50px;border-radius:0">카드 이미지</div><p class="t10 bd" style="padding:5px 7px 6px;line-height:1.3">설치 공간 안내</p></div></div></div>
<div class="pd col" style="gap:5px;padding-top:2px"><p class="t10 bd">소식</p><div class="fx sp"><p class="t10">오전반 신규 개설 안내</p><span class="t9 mu">2일 전</span></div><div class="fx sp"><p class="t10">접는 법 30초 영상</p><span class="t9 mu">9일 전</span></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">카카오 · 톡채널 홈</p>
    <h3>프로필, 버튼, 카드뷰, 소식</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>카카오톡 검색, 비즈보드, 매장 QR, 카카오싱크에서 도착하는 채널 첫 화면. 주소 뒤 /friend 는 친구 추가 팝업 직행</dd></div>
      <div><dt>과금 방식</dt><dd>광고 지면이 아닌 보유 채널 화면. 친구 확보 광고와 메시지 발송에서 과금 발생</dd></div>
      <div><dt>소재 규격</dt><dd>프로필 이미지 640×640, 카드뷰 최대 40장, 웰컴 메시지 버튼 최대 2개. 소식이 1개 이상이어야 소식 카드 노출</dd></div>
      <div><dt>운영 포인트</dt><dd>인증 배지, 채널 홈, 웰컴 메시지, 자동응답 순 세팅. 카드뷰는 현재 핵심 정보, 소식은 누적 기록, 시즌마다 갱신</dd></div>
    </dl>
  </div>
</div>

스타일

.dk-mkkch{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center}
.dk-mkkch .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mkkch .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mkkch .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mkkch .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mkkch .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mkkch .rt .dk-lb{margin:0 0 4px}
.dk-mkkch .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mkkch .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mkkch .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-mkkch .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mkkch .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mkkch .rt.tight dl div{padding:10px 0;grid-template-columns:76px minmax(0,1fr);gap:var(--s3)}
.dk-mkkch .rt.tight dd{font-size:var(--f-sm)}
.dk-mkkch .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-mkkch .ph.n{width:232px}
.dk-mkkch .ph.s{width:190px}
.dk-mkkch .ph.xs{width:150px;height:316px;border-width:4px;border-radius:18px;font-size:10px}
.dk-mkkch .ph.dkm{background:#242424;color:#fff}
.dk-mkkch .ph>*{flex:none}
.dk-mkkch p{margin:0}
.dk-mkkch .ph b,.dk-mkkch .pc b,.dk-mkkch .tv b{color:inherit;font-weight:700}
.dk-mkkch .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mkkch .xs .sb{padding:5px 12px 2px;font-size:9px}
.dk-mkkch .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mkkch .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px;text-align:center}
.dk-mkkch .gd{background:#3a3a3a;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:9px;text-align:center}
.dk-mkkch .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mkkch .pr{display:block;height:9px;border-radius:3px;background:#c9c4bf}
.dk-mkkch .fx{display:flex;align-items:center;gap:6px}
.dk-mkkch .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mkkch .sp{justify-content:space-between}
.dk-mkkch .f1{flex:1;min-width:0}
.dk-mkkch .t8{font-size:8px}
.dk-mkkch .t9{font-size:9px}
.dk-mkkch .t10{font-size:10px}
.dk-mkkch .t12{font-size:12px}
.dk-mkkch .t13{font-size:13px}
.dk-mkkch .bd{font-weight:700}
.dk-mkkch .mu{color:#8b8f94}
.dk-mkkch .hr{height:6px;background:#f0f1f3}
.dk-mkkch .pd{padding:8px 12px}
.dk-mkkch .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mkkch .ic.o{border-radius:50%}
.dk-mkkch .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}
.dk-mkkch .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none;white-space:nowrap}
.dk-mkkch .rel{position:relative}
.dk-mkkch .pin{position:absolute;z-index:6;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;line-height:1;letter-spacing:0}
.dk-mkkch .nw{white-space:nowrap}

.dk-mkkch .yb{background:#fee500;color:#191919;border-radius:6px;padding:6px 0;text-align:center;font-size:10px;font-weight:700;flex:1;position:relative}
.dk-mkkch .gb{background:#f2f3f5;border-radius:6px;padding:6px 0;text-align:center;font-size:10px;font-weight:600;flex:1;position:relative}
.dk-mkkch .cd{flex:1;border:1px solid #ececec;border-radius:8px;overflow:hidden}
.dk-mkkch .vf{width:13px;height:13px;border-radius:50%;background:#3d7bf7;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;flex:none}