8e3cdb0d3b
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.
226 lines
12 KiB
HTML
226 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Pulsegate · 전 세계 서버 응답 모니터링</title>
|
|
<meta
|
|
name="description"
|
|
content="전 세계 28개 지점에서 같은 엔드포인트를 10초마다 확인하고, 지점별 응답 시간을 한 표로 보여 주는 가상 모니터링 서비스입니다."
|
|
/>
|
|
<meta property="og:title" content="Pulsegate · 전 세계 서버 응답 모니터링" />
|
|
<meta property="og:description" content="지점별 DNS·TLS·첫 바이트 응답 시간을 한 표에서 비교하는 엣지 모니터링 서비스." />
|
|
<meta property="og:type" content="website" />
|
|
<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=Do+Hyeon&family=Gothic+A1:wght@400;700;800&display=swap"
|
|
/>
|
|
<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='%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">본문으로 건너뛰기</a>
|
|
|
|
<header class="site-head">
|
|
<div class="wrap head-inner">
|
|
<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">
|
|
<h1 id="hero-h">28개 지점에서<br />10초마다 점검</h1>
|
|
<div class="hero-side">
|
|
<p class="lead">
|
|
서울부터 프랑크푸르트까지 모든 지점에서 같은 <code>GET /health</code> 요청을 보내고,
|
|
응답이 기준보다 늦은 지점만 빨간색으로 표시합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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">
|
|
<div class="section-head">
|
|
<h2 id="wiring-h">점검 방식</h2>
|
|
<p>각 지점이 요청을 보내면 판정 엔진이 응답을 평가하고, 결과를 지금 쓰는 모니터링 도구로 보냅니다.</p>
|
|
</div>
|
|
<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-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="pricing" class="section" aria-labelledby="pricing-h">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<h2 id="pricing-h">요금은 지점 수 기준입니다</h2>
|
|
<p>요금제마다 점검 간격, 보관 기간, 내보내기 기능이 다르고 판정 규칙은 같습니다.</p>
|
|
</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>
|
|
</main>
|
|
|
|
<footer class="site-foot">
|
|
<div class="wrap foot-inner">
|
|
<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 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>
|