PageSourceSearch

https://tabtalk.co.kr/

html tabtalk.co.kr collected 2026-10-02 01:59:07 UTC 43,489 bytes, 657 lines download raw bytes

1<!doctype html>
2<html lang="ko">
3  <head>
4    <!-- Google Tag Manager -->
5    
5<script>
vendor: 343 bytes, lines 5-9
5(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
6    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
7    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
8    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
9    })(window,document,'script','dataLayer','
9GTM-52G86BP5
vendor: 3 bytes, line 9
9');
9</script>
9
10    <!-- End Google Tag Manager -->
11    <meta charset="UTF-8" />
12    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
13    <title>TabTalk · 톡이와 함께하는 집중 타이머</title>
14    <link rel="canonical" href="https://tabtalk.co.kr/" />
15    <meta name="description" content="원하는 시간을 정해 집중하는 웹 타이머예요. 25분 집중할 때마다 톡이 화분이 자라고, 카메라나 확장 프로그램을 연결하면 자리·시선이나 다른 탭 이동도 챙길 수 있어요." />
16    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
17    <link rel="stylesheet" as="style" crossorigin
18      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
19    <!-- 디자인 토큰(색·모양) — 앱·블로그·가이드에서도 같은 파일을 쓴다 -->
20    <link rel="stylesheet" href="/tokens.css" />
21    <style>
22      @font-face {
23        font-family: "GmarketSans";
24        src: url("/assets/gmarket-bold-latin.woff2") format("woff2");
25        font-weight: 700;
26        font-style: normal;
27        /* optional: 서체가 제때 도착하면 쓰고, 늦으면 이번 화면은 그냥 기본 서체로 둔다.
28           swap으로 두면 늦게 도착한 서체가 로고 폭을 바꿔 헤더 전체가 밀린다(0.0075 → 0.0803).
29           preload로 같은 출처에서 미리 받으므로 거의 항상 제때 도착하고, 한 번 받으면 캐시된다. */
30        font-display: optional;
31      }
32      /* 색은 tokens.css의 토큰이 단일 출처다. 아래는 기존 이름을 토큰에 이어붙인 것 —
33         화면 곳곳의 var(--blue) 같은 호출을 그대로 두면서 값만 토큰을 따르게 한다.
34         새로 쓰는 규칙은 --color-* 토큰을 직접 쓴다. */
35      :root {
36        --blue: var(--color-primary);
37        --blue-dark: var(--color-primary-strong);
38        --blue-soft: var(--color-primary-soft);
39        --gray900: var(--color-text-strong);
40        --gray700: #4e5968;              /* 본문 강조 — body와 strong 사이 */
41        --gray600: var(--color-text-body);
42        --gray200: var(--color-border);
43        --gray100: #f2f4f6;
44        --bg: var(--color-bg-page);
45        --white: var(--color-surface);
46        --radius: var(--radius-card);
47        --shadow: var(--shadow-card);
48      }
49      /* iOS·인앱 브라우저가 본문 글자를 임의로 키우는 것을 막는다 */
50      html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
51      button, input, textarea, select { font: inherit; }
52      * { box-sizing: border-box; margin: 0; padding: 0; }
53      body {
54        font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
55        color: var(--gray900); background: var(--bg); line-height: 1.6;
56        -webkit-font-smoothing: antialiased;
57        word-break: keep-all; /* 한글이 단어 중간에서 끊기지 않고 어절 단위로 줄바꿈 */
58        overflow-wrap: break-word;
59      }
60      h1, h2, .feature-card h3 { text-wrap: balance; }
61      p, li, .mascot .desc { text-wrap: pretty; }
62      /* 짧은 안내 문단은 balance로 — 줄 길이를 고르게 맞춰 어절이 어정쩡하게 끊기지 않게 */
63      .feature-summary { text-wrap: balance; }
64      a { text-decoration: none; color: inherit; }
65      .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
66      /* ── 버튼: 역할별 세 종류만(Primary / Secondary / Tertiary) ──
67         규격은 공통, 색만 역할이 정한다. 같은 중요도면 화면이 달라도 같은 색이다.
68         모드별(보라·민트)로 버튼 색을 바꾸지 않는다. */
69      .btn {
70        display: inline-flex; align-items: center; justify-content: center;
71        gap: var(--btn-gap);
72        min-height: var(--btn-height); padding: 0 var(--btn-padding-x);
73        border: 1px solid transparent; border-radius: var(--radius-btn);
74        font-family: inherit; font-size: var(--btn-font-size); font-weight: var(--btn-font-weight);
75        line-height: 1.2; cursor: pointer; white-space: nowrap;
76        transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
77      }
78      .btn svg, .btn img { width: var(--btn-icon-size); height: var(--btn-icon-size); flex: 0 0 auto; }
79      /* 포커스는 색이 아니라 링으로 알린다 — 키보드 사용자에게만 보이게 */
80      .btn:focus-visible, .kakao-ch:focus-visible {
81        outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring);
82      }
83      .btn:disabled, .btn[aria-disabled="true"] {
84        background: var(--color-disabled); border-color: transparent; color: #fff;
85        cursor: not-allowed; pointer-events: none;
86      }
87      /* Primary — 주요 행동에만 */
88      .btn-primary { background: var(--color-primary-strong); color: #fff; }
89      .btn-primary:hover { background: var(--color-primary-hover); }
90      .btn-primary:active { background: var(--color-primary-active); }
91      /* Secondary — 보조 행동 */
92      .btn-secondary {
93        background: var(--color-surface); border-color: var(--color-border);
94        color: var(--gray700);
95      }
96      .btn-secondary:hover { border-color: var(--color-border-hover); color: var(--color-text-strong); }
97      .btn-secondary:active { background: var(--color-primary-soft); }
98      /* 큰 CTA — 히어로·마무리처럼 화면의 주 행동 자리에만. 역할·색은 Primary 그대로 */
99      .btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
100      /* Tertiary — 배경·테두리 없음, hover에서만 연한 파랑 */
101      .btn-tertiary { background: none; border-color: transparent; color: var(--gray700); }
102      .btn-tertiary:hover { background: var(--color-primary-soft); color: var(--color-primary-strong); }
103      .btn-tertiary:active { background: var(--color-primary-soft); color: var(--color-primary-active); }
104
105      /* nav */
106      /* 스크롤바 자리 상시 예약 — 앱과 동일. 페이지를 오갈 때 스크롤바 유무로
107         헤더 로고가 좌우로 튀지 않는다 */
108      html { scrollbar-gutter: stable; }
109      @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
110      .nav { position: sticky; top: 0; z-index: 20; background: rgba(247,249,251,.85);
111        backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--gray200); }
112      .nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px;
113        max-width: 1120px; /* 헤더 폭 — 전 페이지 공통(앱과 동일 1120px + 좌우 24px) */ }
114      .brand { display: flex; align-items: center; gap: 8px; font-size: 20px;
115        font-family: "GmarketSans", "Pretendard Variable", Pretendard, sans-serif;
116        font-weight: 700; letter-spacing: -0.031em; color: #191f28;
117        line-height: 1.2; /* 로고 행간 — 전 페이지 공통(앱과 동일) */ }
118      /* 헤더 로고 아이콘 — 파비콘과 같은 그림을 써서 탭↔헤더 인지를 잇는다 */
119      .brand-mark { width: 24px; height: 24px; border-radius: 7px; object-fit: contain; flex: 0 0 24px; }
120      .brand .dot { width: 30px; height: 30px; border-radius: 9px; background: var(--blue);
121        color: #fff; display: grid; place-items: center; font-size: 16px; }
122      /* 헤더 우측 — 집중 가이드 페이지와 동일: 담백한 텍스트 링크(간격 18px). */
123      .nav-links { display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 700; }
124      .nav-links a { color: var(--gray600); }
125      .nav-links a:hover { color: var(--gray900); }
126      /* 카카오톡 채널 추가 — 공식 로고는 브랜드 규정상 노란색 예외. */
127      .kakao-ch { display: inline-flex; align-items: center; justify-content: center;
128        width: 44px; height: 44px; border-radius: 12px;
129        cursor: pointer; transition: background .15s ease; }
130      .kakao-ch:hover { background: var(--gray100); text-decoration: none; }
131      .kakao-ch img { width: 30px; height: 30px; display: block; }
132      /* 인스타그램 — 카카오 채널과 같은 규격의 아이콘 링크. 공식 로고라 원색 그대로 쓴다. */
133      .insta-ch { display: inline-flex; align-items: center; justify-content: center;
134        width: 44px; height: 44px; border-radius: 12px;
135        cursor: pointer; transition: background .15s ease; }
136      .insta-ch:hover { background: var(--gray100); text-decoration: none; }
137      .insta-ch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
138      .insta-ch img { width: 30px; height: 30px; display: block; border-radius: 8px; }
139      /* 아이콘 버튼은 누르기 편하도록 44px 히트 영역을 유지한다. 그런데 안에 든 로고는
140   30px이라 좌우로 7px씩 '보이지 않는 여백'이 생겨, 눈에는 아이콘↔아이콘 32px·
141   아이콘↔글자 25px로 벌어져 보인다(글자끼리는 18px). 그만큼 음수 여백으로 당겨
142   아이콘 두 개는 한 묶음으로 붙이고(10px), 글자와는 리듬을 맞춘다(16px).
143         히트 영역은 그대로라 접근성(최소 44px)에는 영향이 없다. */
144      .insta-ch { margin-right: -22px; }
145      .kakao-ch { margin-right: -9px; }
146      /* 의견 보내기 — 링크와 같은 서체·색의 버튼(테두리·배경 없음) */
147      .nav-feedback { border: 0; background: none; padding: 0; font-family: inherit;
148        font-size: inherit; font-weight: inherit; line-height: inherit;
149        color: var(--gray600); cursor: pointer; white-space: nowrap; }
150      .nav-feedback:hover { color: var(--gray900); }
151      /* 좁은 폭(카카오 인앱브라우저 등): 헤더가 한 줄에 안 들어가면 '집중 가이드'가
152         두 줄로 쪼개지며 눌린다. 간격·패딩을 줄이고 링크를 nowrap로, CTA를 작게 한다. */
153      @media (max-width: 560px) {
154        .wrap { padding: 0 16px; }
155        /* 집중 가이드 페이지와 동일 — 좁아도 한 ì
155¤„에 들어간다 */
156        .nav-links { gap: 12px; font-size: 14px; }
157      }
158      /* 헤더 CTA를 뺀 뒤로는 카카오 채널·집중 가이드·의견 보내기 셋이 360px까지 한 줄에 들어간다
159         (필요 337px). 345px 아래에서만 '집중 가이드'를 감춘다 — 가이드는 히어로 아래 카드와
160         푸터에서도 갈 수 있다. */
161      @media (max-width: 344px) {
162        .nav-links > a[href="/blog"] { display: none; }
163      }
164
165      /* hero */
166      .hero { padding: 72px 0 40px; }
167      .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
168      .eyebrow { display: inline-block; background: var(--blue-soft); color: var(--blue-dark);
169        font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 999px; margin-bottom: 20px; }
170      .hero h1 { font-size: 46px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
171      .hero h1 .accent { color: var(--blue); }
172      .hero p.lead { margin: 18px 0 12px; font-size: 18px; color: var(--gray700); max-width: none; }
173      .hero-body { margin: 0 0 24px; font-size: 15px; color: var(--gray600); line-height: 1.7; max-width: none; }
174      /* 히어로 CTA — 제목 옆이 아니라 읽는 흐름대로 기능 설명 아래에 세로로 둔다.
175         (제목 옆에 붙이면 제목 일부처럼 읽히고 흐름이 끊긴다)
176         absolute·transform·임의 margin 없이 일반 문서 흐름에 그대로 놓는다. */
177      .hero-cta { display: inline-flex; min-height: 48px; min-width: 176px;
178        padding: 0 26px; font-size: 16px; font-weight: 600; border-radius: var(--radius-btn); }
179      .hero-cta .btn-ico { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; }
180      /* 눌림은 크기가 아니라 색·미세 이동으로 — 레이아웃이 흔들리지 않게 */
181      .hero-cta:active { transform: translateY(1px); }
182      .hero-note { margin-top: 14px; font-size: 13.5px; color: var(--color-text-body); }
183
184      .hero-visual { position: relative; display: grid; place-items: center; }
185      /* 캐릭터 카드: 색을 맡는 건 캐릭터 이미지다. 카드는 최대한 중립으로 두어
186         장식이 캐릭터와 경쟁하지 않게 한다 — 흰 배경 · 공통 회색 테두리 · 기능 카드와 같은 그림자. */
187      .hero-card {
188        background: var(--color-surface); border: 1px solid var(--color-border);
189        border-radius: var(--radius-card); box-shadow: var(--shadow-card);
190        padding: 36px; width: 100%; max-width: 360px; text-align: center;
191      }
192      /* 톡이 4명이 함께 담긴 이미지라 작으면 표정이 안 보인다. 배경이 불투명이라 라운드로 카드와 맞춘다.
193         이미지 둘레에 컬러 테두리·그라데이션은 두지 않는다. */
194      .hero-card img { display: block; margin: 0 auto; width: 240px; height: 240px; object-fit: contain; border-radius: 12px; }
195      .hero-card .chip { display: inline-block; background: var(--color-primary-soft); color: var(--color-primary-strong);
196        font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-pill); margin: 14px 0 10px; }
197      .hero-card .timer-sub { font-size: 14px; color: var(--color-text-body); }
198      .hero-card-msg { font-size: 14px; color: var(--gray600); margin: 12px 0 18px; line-height: 1.55; }
199      .hero-card-btn { width: 100%; }
200
201      /* sections */
202      section.block { padding: 56px 0; }
203      .section-head { text-align: center; margin-bottom: 40px; }
204      .section-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
205      /* 줄바꿈을 <br>로 박지 않는다 — 폭에 따라 자연스럽게 흐르게 max-width만 준다 */
206      /* 폭 제한은 .wrap(1080px)이 맡는다 — ch는 숫자 0의 폭 기준이라 한글에선
207         체감보다 훨씬 좁아(68ch ≈ 544px) 문장이 억지로 접혔다. */
208      .section-head p { margin: 10px auto 0; color: var(--color-text-body); font-size: 16px; }
209
210      /* ── 기능 카드 3장 ──
211         큰 카드 1개 + 그 안의 연한 설명 상자 1개. 항목마다 상자를 만들지 않는다.
212         높이는 고정값 없이 grid stretch + flex로 맞춘다 — 내용이 달라도 끝선이 같다. */
213      .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
214        gap: 20px; align-items: stretch; }
215      .feature-grid > * { min-width: 0; }
216      .feature-card { display: flex; flex-direction: column; height: 100%;
217        background: var(--color-surface); border: 1px solid var(--color-border);
218        border-radius: var(--radius-card); box-shadow: var(--shadow-card);
219        padding: 24px; }
220      .feature-card__header { margin-bottom: 18px; }
221      .feature-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
222      /* 카테고리 색이 쓰이는 곳 ①아이콘 */
223      .feature-icon { display: inline-flex; align-items: center; justify-content: center;
224        width: 32px; height: 32px; border-radius: 10px; flex: 0 0 32px; }
225      .feature-icon svg { width: 18px; height: 18px; }
226      .feature-card--timer .feature-icon { background: var(--color-primary-soft); color: var(--color-primary-strong); }
227      .feature-card--care  .feature-icon { background: var(--color-care-soft); color: var(--color-care); }
228      .feature-card--usage .feature-icon { background: var(--color-usage-soft); color: var(--color-usage); }
229      /* 카테고리 색이 쓰이는 곳 ②배지 */
230      .tag { display: inline-block; font-size: 12px; font-weight: 700;
231        padding: 4px 10px; border-radius: var(--radius-pill); }
232      .tag.web { background: var(--color-primary-soft); color: var(--color-primary-strong); }
233      .tag.care { background: var(--color-care-soft); color: var(--color-care); }
234      .tag.usage { background: var(--color-usage-soft); color: var(--color-usage); }
235      /* 대표 제목 — 기능명이 가장 먼저 읽히게. 색은 세 카드 모두 같은 진한 색 */
236      .feature-card h3 { font-size: 22px; font-weight: 800; color: var(--color-text-strong);
237        margin-bottom: 6px; line-height: 1.35; }
238      .feature-summary { font-size: 14px; line-height: 1.6; color: var(--color-text-body); }
239      /* 3열일 때 요약이 1줄인 카드가 있어 헤더 높이가 어긋났다(타이머만 1줄).
240         고정 px 대신 2줄 자리를 em으로 확보해 설명 상자 시작선을 맞춘다.
241         1열에서는 필요 없으므로 아래 미디어쿼리에서 푼다. */
242      @media (min-width: 900px) { .feature-summary { min-height: calc(1.6em * 2); } }
243      /* 내부 설명 상자 — 아주 연한 회색. 남은 높이를 채워 세 카드 끝선을 맞춘다 */
244      .feature-card__details { flex: 1; background: var(--gray100);
245        border-radius: 12px; padding: 16px 18px; }
246      .feature-card__details ul { list-style: none; }
247      .feature-card__details li { display: grid; grid-template-columns: 16px 1fr;
248        column-gap: 8px; row-gap: 2px; margin-top: 14px; }
249      .feature-card__details li:first-child { margin-top: 0; }
250      /* 카테고리 색이 쓰이는 곳 ③체크 표시 */
251      .feature-card__details li::before { content: "✓"; font-weight: 900; font-size: 13px;
252        grid-column: 1; grid-row: 1; line-height: 1.6; }
253      .feature-card--timer .feature-card__details li::before { color: var(--color-primary-strong); }
254      .feature-card--care  .feature-card__details li::before { color: var(--color-care); }
255      .feature-card--usage .feature-card__details li::before { color: var(--color-usage); }
256      /* 제목·본문 색은 카드가 달라도 동일 */
257      .feature-card__details li b { grid-column: 2; grid-row: 1;
258        font-size: 14px; font-weight: 700; color: var(--color-text-strong); }
259      .feature-card__details li .fd { grid-column: 2; grid-row: 2;
260        font-size: 13.5px; line-height: 1.6; color: var(--color-text-body); }
261      .fd-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border);
262        font-size: 12.5px; line-height: 1.55; color: var(--color-text-body); }
263
264      /* mascots */
265      .mascots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
266      .mascot { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
267        padding: 26px; display: flex; gap: 18px; align-items: flex-start; text-align: left; }
268      .mascot img { width: 84px; height: 84px; object-fit: contain; flex: 0 0 84px; }
269      .mascot .name { font-weight: 800; font-size: 18px; }
270      .mascot .role { font-size: 13px; color: var(--blue-dark); font-weight: 700; margin-top: 3px; }
271      .mascot .desc { font-size: 13.5px; color: var(--gray600); line-height: 1.62; margin-top: 9px; }
272
273      /* 광고 자리 (카카오 애드핏 300x250)
274         ins의 display 제어는 SDK 몫이라 여기서 건드리지 않는다. 바깥 div만 잡아 가운데 정렬. */
275      /* 광고(300x250)가 늦게 뜨거나 안 떠도 푸터가 밀리지 않도록 자리를 미리 잡는다 */
276      .ad-slot { display: flex; justify-content: center; align-items: center;
277        min-height: 250px; margin: 8px 0 40px; }
278
279      /* 사업자 정보 — 카카오 비즈니스 채널 심사에서 사업자↔채널 연관성 확인에 쓰인다 */
280      .biz-info { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: var(--color-text-body); }
281      .biz-info .sep { margin: 0 6px; opacity: .5; }
282      /* 푸터 고객센터 링크 — 사업자 정보와 같은 톤, 굵기만 한 단계 */
283      .biz-link { color: var(--gray700); font-weight: 700; }
284      footer { padding: 40px 0 60px; text-align: center; color: var(--color-text-body); font-size: 13.5px; }
285      footer a { color: var(--gray600); font-weight: 700; }
286      footer .sep { margin: 0 8px; opacity: .5; }
287
288      /* 899px 이하 1열 — 이때는 높이를 맞추지 않고 각 카드의 자연 높이를 쓴다 */
289      @media (max-width: 899px) {
290        .feature-grid { grid-template-columns: 1fr; gap: 16px; }
291        .feature-card { height: auto; }
292      }
293      @media (max-width: 820px) {
294        .hero-grid { grid-template-columns: 1fr; gap: 28px; }
295        .hero { padding: 44px 0 20px; }
296        .hero h1 { font-size: 34px; }
297        /* 모바일: 콘텐츠 영역 폭을 꽉 채운다(좌우 여백은 .wrap이 지킨다) */
298        .hero-cta { display: flex; width: 100%; }
299        .hero p.lead { max-width: none; }
300
301        .mascots { grid-template-columns: 1fr; }
302      }
303
304      /* 광고 안전 가드 — 화면을 덮는 형식 차단 + 가로 넘침 방지 (앱과 동일 규칙) */
305      ins.adsbygoogle[data-anchor-status],
306      ins.adsbygoogle[data-vignette-loaded],
307      .adsbygoogle[style*="position: fixed"],
308      .adsbygoogle[style*="position:fixed"] { display: none !important; }
309      ins.adsbygoogle, .adsbygoogle { max-width: 100% !important; overflow: hidden !important; }
310      .hero ins.adsbygoogle, .hero-cta ins.adsbygoogle { display: none !important; }
311      ins.adsbygoogle { margin-block: 24px !important; }
312    </style>
313    <!-- Favicon -->
314    <link rel="icon" type="image/png" href="/assets/tabtalk_icon.png" />
315    <link rel="apple-touch-icon" href="/assets/tabtalk_icon.png" />
316    <!-- Open Graph / SNS 공유 -->
317    <meta property="og:type" content="website" />
318    <meta property="og:site_name" content="TabTalk" />
319    <meta property="og:title" content="TabTalk · 톡이와 함께하는 집중 타이머" />
320    <meta property="og:description" content="원하는 시간을 정해 집중하는 웹 타이머예요. 25분 집중할 때마ë
320‹¤ 톡이 화분이 자라고, 카메라나 확장 프로그램을 연결하면 자리·시선이나 다른 탭 이동도 챙길 수 있어요." />
321    <meta property="og:url" content="https://tabtalk.co.kr/" />
322    <meta property="og:image" content="https://tabtalk.co.kr/assets/og-image.png" />
323    <meta property="og:image:width" content="1200" />
324    <meta property="og:image:height" content="630" />
325    <meta property="og:locale" content="ko_KR" />
326    <meta name="twitter:card" content="summary_large_image" />
327    <meta name="twitter:title" content="TabTalk · 톡이와 함께하는 집중 타이머" />
328    <meta name="twitter:description" content="원하는 시간을 정해 집중하는 웹 타이머예요. 25분 집중할 때마다 톡이 화분이 자라고, 카메라나 확장 프로그램을 연결하면 자리·시선이나 다른 탭 이동도 챙길 수 있어요." />
329    <meta name="twitter:image" content="https://tabtalk.co.kr/assets/og-image.png" />
330
331      <!-- 로고 전용 서체(GmarketSans Bold(700)) — 직접 호스팅한다.
332         구글 폰트로 불러왔더니 서체가 늦게 도착하며 로고 폭이 바뀌어 헤더가 밀렸다
333         (레이아웃 이동 0.0075 → 0.0803). 같은 출처에서 미리 받아 두면 그 흔들림이 없다.
334         라틴 문자만 담아 15KB다 — 로고 한 단어에만 쓰므로 이걸로 충분하다. -->
335    <link rel="preload" href="/assets/gmarket-bold-latin.woff2" as="font" type="font/woff2" crossorigin />
336      
336<script type="application/ld+json">
337{
338  "@context": "https://schema.org",
339  "@graph": [
340    {
341      "@type": "Organization",
342      "@id": "https://tabtalk.co.kr/#org",
343      "name": "TabTalk",
344      "url": "https://tabtalk.co.kr/",
345      "logo": "https://tabtalk.co.kr/assets/tabtalk_icon.png"
346    },
347    {
348      "@type": "WebSite",
349      "name": "TabTalk",
350      "alternateName": "TabTalk 톡이와 함께하는 집중 타이머",
351      "url": "https://tabtalk.co.kr/",
352      "inLanguage": "ko",
353      "publisher": {
354        "@id": "https://tabtalk.co.kr/#org"
355      }
356    }
357  ]
358}
359    </script>
359
360      <!-- Google AdSense — 사이트 연결·심사용 공통 스니펫 (승인 전에는 광고가 표시되지 않는다) -->
361    
361<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6390883506772920" crossorigin="anonymous"></script>
361
362  </head>
363  <body>
364    <!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 364-365
364
365    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
365GTM-52G86BP5
vendor: 91 bytes, lines 365-367
365"
366    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
367    
367<!-- End Google Tag Manager (noscript) -->
368    <nav class="nav">
369      <div class="wrap nav-in">
370        <a class="brand" href="/"><img class="brand-mark" src="/assets/tabtalk_icon.png" width="24" height="24" alt="" />TabTalk</a>
371        <!-- 순서: 카카오톡 채널 · 집중 가이드 · 의견 보내기.
372             헤더에는 주요 행동(Primary)을 두지 않는다 — 앱으로 가는 길은 아래 모드 카드가 맡는다. -->
373        <div class="nav-links">
374          <!-- 카카오톡 채널 추가 — 공식 채널 로고. 앱키 있으면 followChannel, 없으면 채널 홈으로 폴백 -->
375          <a class="insta-ch" href="https://www.instagram.com/tabtalk_official/" target="_blank" rel="noopener noreferrer"
376             aria-label="TabTalk 인스타그램" title="TabTalk 인스타그램">
377            <img src="/assets/instagram_logo.png" width="30" height="30" alt="" />
378          </a>
379          <a class="kakao-ch" id="kakaoChannelBtn" href="javascript:;" aria-label="카카오톡 채널 추가" title="카카오톡 채널 추가">
380            <img src="/assets/kakao_channel_logo.png" width="30" height="30" alt="카카오톡 채널 추가" />
381          </a>
382          <a href="/blog">집중 가이드</a>
383          <button type="button" class="nav-feedback feedback-open">의견 보내기</button>
384        </div>
385      </div>
386    </nav>
387
388    <header class="hero">
389      <div class="wrap hero-grid">
390        <div>
391          <span class="eyebrow">집중을 함께하는 4명의 톡이</span>
392          <h1>오늘도 <span class="accent">톡이들</span>과<br />시작해볼까요?</h1>
393          <p class="lead">정중이, 다정이, 차분이, 열정이가 오늘의 목표를 함께 응원할게요.</p>
394          <p class="hero-body">집중할 시간을 정하고 타이머를 켜보세요. 25분마다 톡이 화분이 자라요.<br />카메라나 확장 프로그램을 연결하면 자리·시선이나 다른 탭 이동도 톡이가 챙겨줘요.</p>
395          <a class="btn btn-primary hero-cta" href="/app">
396            <svg class="btn-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3" /></svg>
397            집중 시작하기
398          </a>
399          <p class="hero-note">설치 없이 바로 시작 · 무료</p>
400        </div>
401        <div class="hero-visual">
402          <div class="hero-card">
403            <img src="assets/tabtalk_family.png" alt="TabTalk 톡이 4명 — 정중이·다정이·차분이·열정이" />
404            <span class="chip">집중 중</span>
405            <div class="timer-sub">톡이가 옆에서 함께할게요</div>
406          </div>
407        </div>
408      </div>
409
410    </header>
411
412    <!-- 기능 소개 — 요약 카드와 상세 설명을 하나로 합친 3장.
413         시작(타이머) → 유지(집중 케어) → 확인(사용량) 순서로 역할이 바로 읽히게 한다.
414         카드 안에는 버튼을 두지 않는다(진입은 헤더·하단 CTA가 맡는다). -->
415    <!-- 기능 소개 — 큰 기능 카드 1개 + 내부 연한 설명 상자 1개.
416         정보 순서는 세 카드 모두 같다: 아이콘·배지 → 대표 제목 → 한 줄 요약 → 설명 상자.
417         카테고리 색(파랑·보라·민트)은 아이콘·배지·체크 표시에만 쓰고 본문에는 쓰지 않는다. -->
418    <section class="block" id="features">
419      <div class="wrap">
420        <div class="section-head">
421          <h2>집중에 필요한 세 가지 기능</h2>
422          <p>타이머로 시간을 정해 집중하고, 집중 케어로 흐트러진 순간을 알아차리고, 사용량에서 브라우저를 가볍게 관리해요. 집중한 시간은 톡이 화분으로 자라요.</p>
423        </div>
424        <div class="feature-grid">
425          <article class="feature-card feature-card--timer">
426            <header class="feature-card__header">
427              <div class="feature-card__meta">
428                <span class="feature-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8" /><path d="M12 9v4l2.5 2.5" /><path d="M9 2h6" /></svg></span>
429                <span class="tag web">가볍게 시작</span>
430              </div>
431              <h3>타이머</h3>
432              <p class="feature-summary">집중할 시간을 정하고 바로 시작해요. 웹과 확장 프로그램 어디에서 시작해도 같은 시간이 이어집니다.</p>
433            </header>
434            <div class="feature-card__details">
435              <ul>
436              <li><b>15·30·45·60분 또는 직접입력</b><span class="fd">원하는 시간을 고르거나 최대 600분까지 직접 입력할 수 있어요.</span></li>
437              <li><b>함께할 톡이 선택</b><span class="fd">정중이·다정이·차분이·열정이 중 한 명을 골라 함께 집중해요.</span></li>
438              <li><b>목표 달성과 달성 카드</b><span class="fd">목표를 채우면 톡이의 응원 영상이 재생되고, 함께한 톡이가 담긴 달성 카드를 이미지로 저장할 수 있어요.</span></li>
439              <li><b>톡이 화분과 토마토 시계</b><span class="fd">
43925분 집중할 때마다 화분이 한 칸씩 자라고, 4칸이 차면 토마토 시계를 받아요. TabTalk에서 모은 토마토 시계는 함께한 톡이의 선반에 쌓이고, 톡이가 편지를 남겨요.</span></li>
440              </ul>
441            </div>
442          </article>
443
444          <article class="feature-card feature-card--care">
445            <header class="feature-card__header">
446              <div class="feature-card__meta">
447                <span class="feature-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3" /><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" /></svg></span>
448                <span class="tag care">집중 흐름 지키기</span>
449              </div>
450              <h3>집중 케어</h3>
451              <p class="feature-summary">카메라와 확장 프로그램을 함께 사용해 집중 상태를 더 꼼꼼하게 확인해요. 필요한 기능만 선택해서 사용할 수도 있어요.</p>
452            </header>
453            <div class="feature-card__details">
454              <ul>
455              <li><b>카메라: 화면을 보고 있는지 확인</b><span class="fd">영상은 기기 안에서 처리하며 저장하거나 전송하지 않아요.</span></li>
456              <li><b>확장: 집중 탭에 머물고 있는지 확인</b><span class="fd">지정한 집중 탭을 벗어나면 확장 프로그램이 감지해요.</span></li>
457              <li><b>둘 다 사용: 두 조건이 맞을 때 집중 시간으로 기록</b><span class="fd">화면을 보면서 집중 탭에 있을 때만 집중 시간으로 인정돼요.</span></li>
458              <li><b>시선이 멀어지거나 딴짓 탭으로 이동하면 톡이가 안내</b><span class="fd">다시 집중할 타이밍을 톡이가 알려줘요.</span></li>
459              </ul>
460            </div>
461          </article>
462
463          <article class="feature-card feature-card--usage">
464            <header class="feature-card__header">
465              <div class="feature-card__meta">
466                <span class="feature-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l3 8 4-16 3 8h4" /></svg></span>
467                <span class="tag usage">브라우저 정리</span>
468              </div>
469              <h3>사용량</h3>
470              <p class="feature-summary">확장 프로그램을 연결하면 오늘 사용한 사이트와 열린 탭, 기기 메모리 상태를 한눈에 확인할 수 있어요.</p>
471            </header>
472            <div class="feature-card__details">
473              <ul>
474              <li><b>사이트별 사용 시간</b><span class="fd">오늘 어떤 사이트를 얼마나 오래 사용했는지 확인할 수 있어요.</span></li>
475              <li><b>열린 탭과 오래 열린 탭</b><span class="fd">현재 열린 탭과 오래 열어둔 탭을 확인하고 집중 전에 정리할 수 있어요.</span></li>
476              <li><b>기기 메모리 상태</b><span class="fd">기기 전체 메모리 사용 상태를 확인해 브라우저가 무거워진 상황을 살펴볼 수 있어요.</span></li>
477              <li><b>집중·딴짓 사이트 설정</b><span class="fd">사이트를 집중용·비집중용으로 분류해 딴짓 탭 감지 기준을 정할 수 있어요.</span></li>
478              </ul>
479            <p class="fd-note">사용량은 확장 프로그램 연결이 필요해요.</p>
480            </div>
481          </article>
482        </div>
483      </div>
484    </section>
485
486    <section class="block">
487      <div class="wrap">
488        <div class="section-head"><h2>4명의 집사, 톡이들</h2><p>나와 잘 맞는 톡이를 골라보세요. 말투도 응원하는 방식도 모두 달라요.</p></div>
489        <div class="mascots">
490          <div class="mascot">
491            <img src="assets/concierge.png" alt="정중이" />
492            <div class="mascot-text">
493              <div class="name">정중이</div>
494              <div class="role">예의 바른 집중 집사</div>
495              <p class="desc">흐트러진 집중을 다시 잡아줘요. 재촉하지 않고 다시 시작할 수 있도록 정중하게 알려주는 집사예요.</p>
496            </div>
497          </div>
498          <div class="mascot">
499            <img src="assets/secretary.png" alt="다정이" />
500            <div class="mascot-text">
501              <div class="name">다정이</div>
502              <div class="role">따뜻한 응원 집사</div>
503              <p class="desc">짧게 집중해도 잘했다고 먼저 알아봐 줘요. 지칠 때 부담 주지 않고 옆에서 다정하게 힘을 보태는 집사예요.</p>
504            </div>
505          </div>
506          <div class="mascot">
507            <img src="assets/coach.png" alt="차분이" />
508            <div class="mascot-text">
509              <div class="name">차분이</div>
510              <div class="role">침착한 페이스 집사</div>
511              <p class="desc">호들갑 없이 필요한 말만 딱 해줘요. 흐름이 끊겨도 차분하게 다시 페이스를 잡아주는 집사예요.</p>
512            </div>
513          </div>
514          <div class="mascot">
515            <img src="assets/manager.png" alt="열정이" />
516            <div class="mascot-text">
517              <div class="name">열정이</div>
518              <div class="role">열정 폭발 집사</div>
519              <p class="desc">미루고 싶을 때 힘부터 팍 올려줘요. 시작할 땐 누구보다 우렁차고, 목표를 끝내면 더 신나게 축하하는 집사예요.</p>
520            </div>
521          </div>
522        </div>
523      </div>
524    </section>
525
526    <!-- 집중 가이드(블로그) 최신 글 — /blog에서 최신 3개를 런타임에 불러와 자동 표시한다.
527         새 글을 추가하면 여기도 자동으로 갱신된다(홈은 따로 손대지 않아도 됨).
528         JS로 채우기 전엔 hidden — 실패 시 빈 섹션이 뜨지 않게. -->
529    <style>
530      #guide-block .guide-cards { list-style: none; margin: 24px 0 0; padding: 0;
531        display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
532      #guide-block .guide-card a { display: flex; flex-direction: column; gap: 8px; height: 100%;
533        padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border);
534        border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-decoration: none;
535        transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
536      #guide-block .guide-card a:hover { box-shadow: var(--shadow-card-hover);
537        border-color: var(--color-border-hover); transform: translateY(-2px); }
538      #guide-block .guide-card a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
539      #guide-block .guide-card .tag { align-self: flex-start; font-size: 12px; font-weight: 700;
540        color: var(--color-primary-strong); background: var(--color-primary-soft);
541        padding: 3px 10px; border-radius: var(--radius-pill); }
542      #guide-block .guide-card h3 { margin: 2px 0 0; font-size: 16px; font-weight: 700;
543        color: var(--color-text-strong); line-height: 1.4; }
544      #guide-block .guide-card p { margin: 0; flex: 1; font-size: 13.5px;
545        color: var(--color-text-body); line-height: 1.55; }
546      #guide-block .guide-card .meta { margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }
547      #guide-block .guide-more-wrap { margin-top: 20px; text-align: center; }
548      #guide-block .guide-more { display: inline-flex; align-items: center; gap: 6px;
549        font-size: 14px; font-weight: 700; color: var(--color-primary-strong); text-decoration: none; }
550      #guide-block .guide-more:hover { text-decoration: underline; }
551      @media (max-width: 860px) { #guide-block .guide-cards { grid-template-columns: 1fr; } }
552    </style>
553    <section class="block" id="guide-block" hidden>
554      <div class="wrap">
555        <div class="section-head">
556          <h2>집중 가이드</h2>
557          <p>진짜 집중하는 법, 짧게 읽어보세요.</p>
558        </div>
559        <ul class="guide-cards" id="homeGuideList"></ul>
560        <div class="guide-more-wrap">
561          <a class="guide-more" href="/blog">가이드 전체 보기 <span aria-hidden="true">→</span></a>
562        </div>
563      </div>
564    </section>
565
566    <!-- 카카오 애드핏 — 랜딩 하단 (300x250)
567         등록한 매체 URL(tabtalk.co.kr)에 광고가 없으면 심사에서 '미설치'로 반려된다.
568         ins의 display:none은 SDK가 광고를 받으면 직접 해제하므로 건드리지 말 것. -->
569    <div class="wrap">
570      <div class="ad-slot">
571        <ins class="kakao_ad_area" style="display:none;"
572          data-ad-unit="DAN-LYUbgFKJdCiZGb9g"
573          data-ad-width="300"
574          data-ad-height="250"></ins>
575      </div>
576    </div>
577
578    <footer>
579      <div class="wrap">
580        © 2026 TabTalk
581        <span class="sep">·</span><a href="/privacy">개인정보처리방침</a><span class="sep">·</span><a href="/terms">이용약관</a>
582        <span class="sep">·</span><button type="button" class="link-btn" id="feedbackOpen">의견 보내기</button>
583        <div class="biz-info">
584          서비스명 : 탭톡(TabTalk) <span class="sep">·</span> 상호 : 이노브(INNOVE) <span class="sep">·</span> 대표 : 김효진<br />
585          사업자등록번호 : 333-32-01588<br />
586          주소 : 서울특별시 강남구 영동대로 602, 6층 z226호(삼성동, 삼성동 미켈란107)<br />
587          고객센터 : <a class="biz-link" href="https://pf.kakao.com/_lhxcfX" target="_blank" rel="noopener">카카오톡 문의</a>
588        </div>
589      </div>
590    </footer>
591
592    <!-- GA 이벤트 추적 (GTM dataLayer로 전송) -->
593    
593<script>
594      function ttTrack(name, params) {
595        (window.dataLayer = window.dataLayer || []).push(Object.assign({ event: name }, params || {}));
596      }
597      document.addEventListener("click", function (e) {
598        var el = e.target.closest("a, button");
599        if (!el) return;
600        // 확장 프로그램 다운로드는 이제 랜딩이 아니라 집중 케어 화면에만 있다
601        // (앱 쪽 app.js가 같은 이름으로 추적한다).
602        if (el.matches('a[href*="/app"]')) {
603          var m = (el.getAttribute("href") || "").match(/[?&](?:mode|view)=([a-z]+)/);
604          ttTrack("app_cta_click", { destination: m ? m[1] : "app" });
605        }
606      }, true);
607
608      // 홈 하단 '집중 가이드' — /blog에서 최신 글 3개를 가져와 카드로 표시.
609      // 블로그 목록이 단일 출처라, 새 글을 추가하면 홈도 자동으로 갱신된다.
610      (function loadHomeGuide() {
611        var host = document.getElementById("homeGuideList");
612        var sec = document.getElementById("guide-block");
613        if (!host || !sec) return;
614        fetch("/blog", { credentials: "same-origin" })
615          .then(function (r) { return r.ok ? r.text() : Promise.reject(new Error(r.status)); })
616          .then(function (html) {
617            var doc = new DOMParser().parseFromString(html, "text/html");
618            var cards = Array.prototype.slice.call(doc.querySelectorAll(".post-list .post-card > a")).slice(0, 3);
619            if (!cards.length) return;
620            var frag = document.createDocumentFragment();
621            cards.forEach(function (a) {
622              var pick = function (sel) { var n = a.querySelector(sel); return n ? n.textContent.trim() : ""; };
623              var li = document.createElement("li");
624              li.className = "guide-card";
625              var link = document.createElement("a");
626              link.href = a.getAttribute("href") || "/blog";
627              link.innerHTML = '<span class="tag"></span><h3></h3><p></p><span class="meta"></span>';
628              link.querySelector(".tag").textContent = pick(".tag");
629              link.querySelector("h3").textContent = pick("h2");
630              link.querySelector("p").textContent = pick("p");
631              link.querySelector(".meta").textContent = pick(".meta");
632              li.appendChild(link);
633              frag.appendChild(li);
634            });
635            host.appendChild(frag);
636            sec.hidden = false;
637          })
638          .catch(function () { /* 실패 시 섹션 숨김 유지 */ });
639      })();
640    </script>
640
641
642    <!-- 애드핏 SDK — 페이지당 한 번만 로드한다 -->
643    
643<script type="text/javascript" src="//t1.kakaocdn.net/kas/static/ba.min.js" async></script>
643
644    
644<script src="/feedback.js" defer></script>
644
645    <!-- 카카오톡 채널 추가 버튼 —
646         SDK → 앱키(런타임 주입) → 채널 로직 순서로 로드한다. defer라 이 순서대로 실행된다.
647         앱키가 없거나 SDK가 막히면 kakao-channel.js가 채널 홈 링크로 폴백한다. -->
648    
648<script
649      src="https://t1.kakaocdn.net/kakao_js_sdk/2.8.1/kakao.min.js"
650      integrity="sha384-OL+ylM/iuPLtW5U3XcvLSGhE8JzReKDank5InqlHGWPhb4140/yrBw0bg0y7+C9J"
651      crossorigin="anonymous"
652      defer
653    ></script>
653
654    
654<script src="/api/kakao-config" defer></script>
654
655    
655<script src="/kakao-channel.js" defer></script>
655
656  </body>
657</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.