feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.
This commit is contained in:
Yun Chan 2026-10-06 16:55:50 +09:00
parent 88c11682b1
commit 8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions

View file

@ -1,276 +1,165 @@
<!doctype html>
<html lang="en">
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pulsegate · Edge Monitoring Workflow</title>
<title>Pulsegate · 전 세계 서버 응답 모니터링</title>
<meta
name="description"
content="An illustrative workflow for checking an endpoint from distributed edge locations. It does not create probes or provide a live service."
/>
<meta property="og:title" content="Pulsegate · Edge Monitoring Workflow" />
<meta
property="og:description"
content="An illustrative edge-monitoring flow with endpoints, locations, and reporting fields."
content="전 세계 28개 지점에서 같은 엔드포인트를 10초마다 확인하고, 지점별 응답 시간을 한 표로 보여 주는 가상 모니터링 서비스입니다."
/>
<meta property="og:title" content="Pulsegate · 전 세계 서버 응답 모니터링" />
<meta property="og:description" content="지점별 DNS·TLS·첫 바이트 응답 시간을 한 표에서 비교하는 엣지 모니터링 서비스." />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#0B0E12" />
<meta property="og:image" content="./og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="theme-color" content="#ffd23a" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Gothic+A1:wght@400;700;800&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230B0E12'/%3E%3Cpath d='M6 17h6l3-8 4 14 3-6h4' fill='none' stroke='%236CA3EE' stroke-width='2'/%3E%3C/svg%3E"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23FFD23A'/%3E%3Crect x='8' y='5' width='16' height='22' rx='2' fill='%23141414'/%3E%3Cpath d='M8 16h16' stroke='%232D2D2D'/%3E%3Cpath d='M12 11h8M16 11v12' stroke='%23FFD23A' stroke-width='2.4'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<a class="skip" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#main">pulsegate<span class="wordmark-dot">.</span></a>
<nav class="nav" aria-label="Sections">
<a href="#wiring">Wiring</a>
<a href="#numbers">Numbers</a>
<a href="#pricing">Pricing</a>
</nav>
<a class="wordmark" href="#main"><span class="wordmark-flap" aria-hidden="true">P</span>Pulsegate</a>
<a class="btn btn-head" href="#plan-free">무료로 시작</a>
</div>
</header>
<div class="scope-note">
<p class="wrap">가상 모니터링 서비스의 쇼케이스입니다. 지점·응답 시간·요금은 예시이며, 이 페이지는 실제 점검을 실행하지 않습니다.</p>
</div>
<main id="main">
<section class="hero" aria-labelledby="hero-h">
<div class="wrap hero-grid">
<div class="hero-text">
<h1 id="hero-h" class="reveal">
Understand an edge<br />check at a glance
</h1>
<p class="lead reveal" style="--delay: 80ms">
This page illustrates how one endpoint can be checked from several
edge locations and reported with the same fields. Locations,
timings, plans, and results are examples; no probe runs from this page.
<h1 id="hero-h">28개 지점에서<br />10초마다 점검</h1>
<div class="hero-side">
<p class="lead">
서울부터 프랑크푸르트까지 모든 지점에서 같은 <code>GET /health</code> 요청을 보내고,
응답이 기준보다 늦은 지점만 빨간색으로 표시합니다.
</p>
<dl class="probe-proof reveal" style="--delay: 110ms">
<div>
<dt>example endpoint</dt>
<dd><code>GET /health</code></dd>
</div>
<div>
<dt>example origin</dt>
<dd>Seoul</dd>
</div>
<div>
<dt>example cadence</dt>
<dd>10 s · 28 locations</dd>
</div>
</dl>
<div class="hero-actions reveal" style="--delay: 140ms">
<a class="btn btn-primary" href="#pricing">View example plans</a>
<a class="link-quiet" href="#wiring">See the check flow</a>
</div>
<div class="workflow-command">
<div class="command reveal" style="--delay: 200ms">
<span class="command-prompt" aria-hidden="true">$</span>
<code>GET /health → inspect the response</code>
</div>
<p class="hero-note reveal" style="--delay: 240ms">
Illustrative workflow only — this page does not create an account,
run a check, or collect a destination URL.
</p>
</div>
</div>
</div>
</section>
<figure class="instrument reveal" style="--delay: 160ms">
<figcaption class="instrument-head">
<span>ILLUSTRATIVE LATENCY FRAME · P99 · 24H</span>
<span>example 10s interval</span>
</figcaption>
<svg
viewBox="0 0 560 264"
role="img"
aria-label="Illustrative 24-hour p99 latency chart with example locations and timings; it is not live monitoring data."
>
<g class="chart-grid">
<line x1="0" y1="8" x2="560" y2="8" />
<line x1="0" y1="70" x2="560" y2="70" />
<line x1="0" y1="132" x2="560" y2="132" />
<line x1="0" y1="194" x2="560" y2="194" />
<line x1="0" y1="256" x2="560" y2="256" class="chart-axis" />
<line x1="70" y1="0" x2="70" y2="264" />
<line x1="140" y1="0" x2="140" y2="264" />
<line x1="210" y1="0" x2="210" y2="264" />
<line x1="280" y1="0" x2="280" y2="264" />
<line x1="350" y1="0" x2="350" y2="264" />
<line x1="420" y1="0" x2="420" y2="264" />
<line x1="490" y1="0" x2="490" y2="264" />
</g>
<polyline
class="series series-faint"
points="0,96 35,94 70,97 105,92 140,95 175,93 205,88 210,74 215,60 220,74 225,90 260,95 280,93 315,96 350,94 385,97 420,93 455,96 490,94 525,97 560,95"
/>
<polyline
class="series series-muted"
points="0,224 35,222 70,225 105,221 140,224 175,223 210,226 245,222 280,224 315,223 350,226 385,222 420,225 455,223 490,226 525,223 560,225"
/>
<polyline
class="series series-accent"
points="0,243 35,242 70,244 105,242 140,243 175,244 210,242 245,243 280,244 315,242 350,243 385,244 420,243 455,242 490,244 525,243 560,243"
/>
</svg>
<div class="instrument-rows" role="group" aria-label="Illustrative location readings, p99 over one example frame">
<div><span>ICN-01 · Seoul</span><span class="num">14.2 ms</span></div>
<div><span>NRT-02 · Tokyo</span><span class="num">28.6 ms</span></div>
<div><span>SIN-01 · Singapore</span><span class="num">34.0 ms</span></div>
<div><span>SJC-04 · San Jose</span><span class="num">88.4 ms</span></div>
<div><span>LHR-02 · London</span><span class="num">126.8 ms</span></div>
<div><span>FRA-01 · Frankfurt</span><span class="num">142.1 ms</span></div>
</div>
</figure>
<section id="board" class="board" aria-labelledby="board-h">
<div class="wrap">
<div class="board-head">
<h2 id="board-h">지점별 응답 시간</h2>
<p>p99 · 최근 24시간 · 10초 간격 · 단위 ms</p>
</div>
<div class="table-wrap">
<table class="board-table">
<caption class="sr-only">지점별 응답 시간: DNS, TLS, 첫 바이트, 24시간 p99와 판정</caption>
<thead>
<tr>
<th scope="col">지점</th>
<th scope="col">도시</th>
<th scope="col" class="num">DNS</th>
<th scope="col" class="num">TLS</th>
<th scope="col" class="num">첫 바이트</th>
<th scope="col" class="num">p99</th>
<th scope="col">판정</th>
</tr>
</thead>
<tbody>
<tr><th scope="row" data-flap>ICN-01</th><td class="city">서울</td><td class="num" data-flap>1.8</td><td class="num" data-flap>6.4</td><td class="num" data-flap>14.2</td><td class="num" data-flap="alt">15.9</td><td class="verdict">정상</td></tr>
<tr><th scope="row" data-flap>NRT-02</th><td class="city">도쿄</td><td class="num" data-flap>2.1</td><td class="num" data-flap>7.1</td><td class="num" data-flap>28.6</td><td class="num" data-flap="alt">31.2</td><td class="verdict">정상</td></tr>
<tr><th scope="row" data-flap>SIN-01</th><td class="city">싱가포르</td><td class="num" data-flap>2.4</td><td class="num" data-flap>8.2</td><td class="num" data-flap>34.0</td><td class="num" data-flap="alt">37.5</td><td class="verdict">정상</td></tr>
<tr><th scope="row" data-flap>SJC-04</th><td class="city">새너제이</td><td class="num" data-flap>3.0</td><td class="num" data-flap>9.6</td><td class="num" data-flap>88.4</td><td class="num" data-flap="alt">94.7</td><td class="verdict">정상</td></tr>
<tr><th scope="row" data-flap>LHR-02</th><td class="city">런던</td><td class="num" data-flap>4.0</td><td class="num" data-flap>11.2</td><td class="num" data-flap>126.8</td><td class="num" data-flap="alt">133.0</td><td class="verdict">정상</td></tr>
<tr><th scope="row" data-flap>FRA-01</th><td class="city">프랑크푸르트</td><td class="num" data-flap>4.2</td><td class="num" data-flap>11.8</td><td class="num" data-flap>142.1</td><td class="num" data-flap="alt">151.8</td><td class="verdict verdict-warn">주의 · 150 초과</td></tr>
<tr class="row-more"><td colspan="7">나머지 22개 지점은 모두 기준 이내라서 접어 두었습니다.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="wiring" class="section" aria-labelledby="wiring-h">
<div class="wrap">
<h2 id="wiring-h" class="reveal">How an edge check is mapped</h2>
<p class="lead reveal" style="--delay: 80ms">
The diagram separates an endpoint, distributed checking locations,
and the metrics returned to a monitoring system. It is a conceptual
route, not a map of operating facilities.
</p>
</div>
<div class="wrap wiring-diagram reveal" style="--delay: 120ms">
<svg viewBox="0 0 1120 220" role="img" aria-label="Illustrative workflow diagram: locations check an endpoint, an engine evaluates responses, and fields flow to a monitoring system.">
<path
class="trace"
d="M 40 60 H 300 M 40 110 H 300 M 40 160 H 300 M 300 110 H 470 M 650 110 H 820 M 820 60 V 160 M 820 60 H 1010 M 820 160 H 1010"
/>
<g class="station">
<rect x="40" y="44" width="14" height="14" />
<rect x="40" y="94" width="14" height="14" />
<rect x="40" y="144" width="14" height="14" />
<text x="66" y="55">ICN · NRT · SIN …</text>
<text x="66" y="105">FRA · LHR · AMS …</text>
<text x="66" y="155">SJC · IAD · ORD …</text>
</g>
<g class="station">
<rect x="470" y="88" width="180" height="44" />
<text x="478" y="106">assertion engine</text>
<text x="478" y="124" class="mono-note">http · grpc · tcp · dns</text>
</g>
<g class="station">
<rect x="1010" y="46" width="70" height="26" />
<rect x="1010" y="146" width="70" height="26" />
<text x="1006" y="38" text-anchor="end">Prometheus</text>
<text x="1006" y="192" text-anchor="end">OpenTelemetry</text>
</g>
<g class="flow-label">
<text x="310" y="100">every 10 s</text>
<text x="660" y="100">p50 · p99 · jitter</text>
</g>
</svg>
</div>
<div class="wrap wiring-notes">
<div class="wiring-note reveal">
<h3>Check from the edge</h3>
<p>
A useful check identifies where it ran and which part of the
response was measured, so results can be compared fairly.
</p>
<div class="section-head">
<h2 id="wiring-h">점검 방식</h2>
<p>각 지점이 요청을 보내면 판정 엔진이 응답을 평가하고, 결과를 지금 쓰는 모니터링 도구로 보냅니다.</p>
</div>
<div class="wiring-note reveal" style="--delay: 80ms">
<h3>Check the response, not only reachability</h3>
<p>
A useful workflow can compare response content, status, certificate
expiry, and timing instead of treating a reachable address as success.
</p>
<div class="wiring-diagram">
<svg viewBox="0 0 1120 220" role="img" aria-label="배선도: 세 묶음의 지점이 엔드포인트를 확인하고, 판정 엔진이 응답을 평가해 Prometheus와 OpenTelemetry로 필드를 보냅니다.">
<path class="trace" d="M 40 60 H 300 M 40 110 H 300 M 40 160 H 300 M 300 60 V 160 M 300 110 H 470 M 650 110 H 820 M 820 60 V 160 M 820 60 H 1010 M 820 160 H 1010" />
<g class="station">
<rect x="40" y="44" width="14" height="32" rx="2" />
<rect x="40" y="94" width="14" height="32" rx="2" />
<rect x="40" y="144" width="14" height="32" rx="2" />
<text x="66" y="52">ICN · NRT · SIN</text>
<text x="66" y="102">FRA · LHR · AMS</text>
<text x="66" y="152">SJC · IAD · ORD</text>
</g>
<g class="station">
<rect class="box" x="470" y="80" width="180" height="60" />
<text x="486" y="106">판정 엔진</text>
<text x="486" y="128">http · grpc · tcp · dns</text>
</g>
<g class="station">
<rect x="1010" y="44" width="70" height="32" rx="2" />
<rect x="1010" y="144" width="70" height="32" rx="2" />
<text x="1000" y="36" text-anchor="end">Prometheus</text>
<text x="1000" y="200" text-anchor="end">OpenTelemetry</text>
</g>
<g class="flow-label">
<text x="316" y="100">10초마다</text>
<text x="666" y="100">p50 · p99 · 지터</text>
</g>
</svg>
</div>
<div class="wiring-note reveal" style="--delay: 160ms">
<h3>Keep the reporting fields consistent</h3>
<p>
The example keeps endpoint, location, time, and response fields
together so they can be handed to an existing monitoring workflow.
</p>
<div class="wiring-notes">
<div class="wiring-note">
<h3>측정 지점을 함께 기록합니다</h3>
<p>지점 코드가 빠진 응답 시간은 비교할 수 없습니다. 모든 행은 공항 코드와 번호로 시작합니다.</p>
</div>
<div class="wiring-note">
<h3>응답 내용까지 확인합니다</h3>
<p>상태 코드, 본문 내용, 인증서 만료일, 응답 시간을 함께 확인합니다. 접속만 된다고 정상으로 판정하지 않습니다.</p>
</div>
<div class="wiring-note">
<h3>같은 형식으로 내보냅니다</h3>
<p>엔드포인트·지점·시각·응답 시간을 한 묶음으로 보내므로, 받는 쪽 대시보드에서 형식을 다시 맞출 필요가 없습니다.</p>
</div>
</div>
</div>
</section>
<section id="numbers" class="section band" aria-labelledby="numbers-h">
<div class="wrap">
<h2 id="numbers-h" class="reveal">One example frame, many locations</h2>
<p class="lead reveal" style="--delay: 80ms">
This table shows how an endpoint, DNS, TLS, response time, and a
percentile can be read together. Its values and locations are illustrative.
</p>
<div class="table-wrap reveal" style="--delay: 120ms">
<table>
<caption class="sr-only">
Illustrative location readings: DNS, TLS, TTFB, and p99 over one example frame
</caption>
<thead>
<tr>
<th scope="col">POP</th>
<th scope="col">City</th>
<th scope="col" class="num">DNS</th>
<th scope="col" class="num">TLS</th>
<th scope="col" class="num">TTFB</th>
<th scope="col" class="num">p99 / 24h</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">ICN-01</th><td>Seoul</td><td class="num">1.8</td><td class="num">6.4</td><td class="num">14.2</td><td class="num">15.9</td></tr>
<tr><th scope="row">NRT-02</th><td>Tokyo</td><td class="num">2.1</td><td class="num">7.1</td><td class="num">28.6</td><td class="num">31.2</td></tr>
<tr><th scope="row">SIN-01</th><td>Singapore</td><td class="num">2.4</td><td class="num">8.2</td><td class="num">34.0</td><td class="num">37.5</td></tr>
<tr><th scope="row">SJC-04</th><td>San Jose</td><td class="num">3.0</td><td class="num">9.6</td><td class="num">88.4</td><td class="num">94.7</td></tr>
<tr><th scope="row">LHR-02</th><td>London</td><td class="num">4.0</td><td class="num">11.2</td><td class="num">126.8</td><td class="num">133.0</td></tr>
<tr><th scope="row">FRA-01</th><td>Frankfurt</td><td class="num">4.2</td><td class="num">11.8</td><td class="num">142.1</td><td class="num">151.8</td></tr>
<tr class="row-more"><td colspan="6">…22 more illustrative locations in the same example frame</td></tr>
</tbody>
</table>
</div>
<p class="measure-note reveal" style="--delay: 160ms">
Illustrative 24-hour frame · 10 s example interval · milliseconds shown
for DNS, TLS, TTFB, and p99.
</p>
</div>
</section>
<section id="pricing" class="section" aria-labelledby="pricing-h">
<div class="wrap pricing-grid">
<div class="pricing-text">
<h2 id="pricing-h" class="reveal">Example plan structure</h2>
<p class="lead reveal" style="--delay: 80ms">
These rows show how interval, retention, and export options can be
compared. They are not offers, prices, or an account signup flow.
</p>
<div class="wrap">
<div class="section-head">
<h2 id="pricing-h">요금은 지점 수 기준입니다</h2>
<p>요금제마다 점검 간격, 보관 기간, 내보내기 기능이 다르고 판정 규칙은 같습니다.</p>
</div>
<div class="pricing-rows reveal" style="--delay: 120ms">
<div class="price-row">
<div>
<h3>Example Free</h3>
<p>3 probes · 60 s interval · 7-day retention</p>
</div>
<div class="price-val">
<span>Example $0</span>
<a class="btn btn-primary" href="#pricing">View the example</a>
</div>
</div>
<div class="price-row">
<div>
<h3>Example Pro</h3>
<p>Unlimited probes · 10 s interval · 13-month retention · OTel export</p>
</div>
<div class="price-val">
<span>Example $0.40 <em>per probe-month</em></span>
<a class="link-quiet" href="#pricing">Example only</a>
</div>
</div>
<div class="table-wrap">
<table class="price-table">
<caption class="sr-only">요금제별 지점 수, 간격, 보관 기간과 요금(예시)</caption>
<thead>
<tr>
<th scope="col">요금제</th>
<th scope="col">지점 · 간격 · 보관</th>
<th scope="col">요금(예시)</th>
</tr>
</thead>
<tbody>
<tr id="plan-free"><th scope="row">무료</th><td>지점 3개 · 60초 간격 · 7일 보관</td><td class="price">0원</td></tr>
<tr><th scope="row">프로</th><td>지점 무제한 · 10초 간격 · 13개월 보관 · OTel 내보내기</td><td class="price">지점당 550원 <small>/ 월</small></td></tr>
</tbody>
</table>
</div>
</div>
</section>
@ -278,23 +167,60 @@
<footer class="site-foot">
<div class="wrap foot-inner">
<p>pulsegate — illustrative edge-monitoring workflow</p>
<p class="foot-meta">no live probes, accounts, prices, or operating locations</p>
<a class="foot-cta" href="#plan-free">
<span class="foot-cta-label">무료로 시작하기</span>
<span class="foot-cta-sub">지점 3개까지 0원, 60초 간격으로 7일 보관합니다.</span>
</a>
<div class="foot-meta">
<p class="foot-brand">Pulsegate</p>
<p>엣지 응답 모니터링 · designpaca 쇼케이스</p>
</div>
</div>
</footer>
<script>
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (!e.isIntersecting) continue;
e.target.classList.add("is-in");
io.unobserve(e.target);
}
},
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
);
for (const el of document.querySelectorAll(".reveal")) io.observe(el);
// 플랩: 셀 글자를 낱장으로 나눈다. 원래 글자는 화면 낭독용으로 남긴다.
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
const POOL = "0123456789ABCDEFGHJKLMNPRSTUVWXYZ";
const flaps = [];
for (const cell of document.querySelectorAll("[data-flap]")) {
const text = cell.textContent.trim();
const sr = document.createElement("span");
sr.className = "sr-only";
sr.textContent = text;
const row = document.createElement("span");
row.className = cell.dataset.flap === "alt" ? "flaps flaps-alt" : "flaps";
row.setAttribute("aria-hidden", "true");
for (const ch of text) {
const flap = document.createElement("span");
flap.className = ch === " " ? "flap is-space" : "flap";
flap.textContent = ch;
row.append(flap);
if (ch !== " " && ch !== "." && ch !== "-") flaps.push({ el: flap, final: ch });
}
cell.replaceChildren(sr, row);
}
// 첫 로드에 한 번만 넘긴다. 멈춘 값이 곧 표의 값이며, 값 자체를 지어내지 않는다.
if (!reduced) {
flaps.forEach(({ el, final }, i) => {
const stopAt = 260 + (i % 7) * 70;
const started = performance.now();
el.classList.add("is-flipping");
let n = i;
const tick = (now) => {
if (now - started >= stopAt) {
el.textContent = final;
el.classList.remove("is-flipping");
return;
}
n = (n + 7) % POOL.length;
el.textContent = POOL[n];
setTimeout(() => requestAnimationFrame(tick), 60);
};
requestAnimationFrame(tick);
});
}
</script>
</body>
</html>