01The two-file language pack

Keys from ko.json and en.json fan out into matching rows, and a key that exists on one side only leaves an empty slot that instantly catches the eye.

Best forSetting up a multilingual site for the first time, or adding a new locale file

@keyframes scan-down같은 구조 원칙키 펼쳐 보기

<main class="stage is-demo">
  <div class="pack">
    <section class="file">
      <header class="file__head"><span class="file__name">ko.json</span></header>
      <ul class="file__rows">
        <li class="row" style="--i:0"><span class="row__key">"title"</span><span class="row__val" data-t="내 서비스"></span></li>
        <li class="row" style="--i:1"><span class="row__key">"cta"</span><span class="row__val" data-t="Get started"></span></li>
        <li class="row" style="--i:2"><span class="row__key">"nav.home"</span><span class="row__val" data-t="홈"></span></li>
        <li class="row" style="--i:3"><span class="row__key">"footer.contact"</span><span class="row__val" data-t="문의하기"></span></li>
      </ul>
      <span class="scan"></span>
    </section>
    <section class="file">
      <header class="file__head"><span class="file__name">en.json</span></header>
      <ul class="file__rows">
        <li class="row" style="--i:0"><span class="row__key">"title"</span><span class="row__val" data-t="My Service"></span></li>
        <li class="row" style="--i:1"><span class="row__key">"cta"</span><span class="row__val" data-t="Get started"></span></li>
        <li class="row" style="--i:2"><span class="row__key">"nav.home"</span><span class="row__val" data-t="Home"></span></li>
        <li class="row row--miss" style="--i:3"><span class="row__key">"footer.contact"</span><span class="row__val row__val--empty"></span><span class="miss-badge">!</span></li>
      </ul>
      <span class="scan"></span>
    </section>
    <p class="pack__note">1 key unmatched</p>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;      // 2s — 키 짝 맞추기 한 주기
$easing: $ease-out;
$color: $subject-cream;    // 파일 카드

@include stage($stage-ink);

.pack {
  width: min(440px, 94vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: $sp-3;
  row-gap: $sp-2;
}

.file {
  position: relative;
  border-radius: $r-card;
  background: $color;
  box-shadow: $shadow-raised;
  overflow: hidden;
}

.file__head {
  padding: $sp-1 $sp-2;
  border-bottom: 2px solid rgba($subject-ink, .12);
}

.file__name {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(10px, 2.4vw, 13px);
  font-weight: 700;
  color: $subject-ink;
}

.file__rows {
  list-style: none;
  margin: 0;
  padding: $sp-1 $sp-2 $sp-2;
  display: grid;
  row-gap: $sp-1;
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: $sp-1;
  border-radius: $r-xs;
  padding: 0 $sp-1;
  min-height: clamp(18px, 6vw, 28px);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(8.5px, 2vw, 12px);
}

.row__key { color: $subject-blue-deep; font-weight: 700; white-space: nowrap; }   // 크림 면 위 파란 글자 — 5.98:1
.row__val { color: $subject-ink; white-space: nowrap; }
.row__val::before { content: attr(data-t); }

.row__val--empty {
  flex: 1;
  min-height: 14px;
  border: 2px dashed rgba($error, .55);
  border-radius: $r-xs;
}

.miss-badge {
  position: absolute;
  right: -$sp-1;
  top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: $error;
  color: #fff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  box-shadow: $shadow-press;
}

.pack__note {
  grid-column: 1 / -1;
  margin: 0;
  justify-self: center;
  border-radius: $r-pill;
  background: $error-soft;
  color: $subject-ink;   // $error 글자는 note-in 애니메이션의 낮은 opacity 에서 3.22:1 로 깨진다 — 잉크로
  font-size: clamp(10px, 2.4vw, 13px);
  font-weight: 700;
  padding: $sp-1 $sp-3;
}

// 스캔 줄 — 카드 높이와 같은 오버레이에 그라데이션 한 줄을 넣고 위치만 이동
.scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0 calc(50% - 8px),
    rgba($subject-blue, .28) calc(50% - 8px) calc(50% + 8px),
    transparent calc(50% + 8px) 100%);
  background-size: 100% 220%;
  opacity: 0;
}

.stage.is-demo .scan { animation: scan-down $duration $easing infinite; }
.stage.is-demo .row { animation: row-flash $duration linear infinite; animation-delay: calc(var(--i) * .12s); }
.stage.is-demo .row--miss .row__val--empty { animation: empty-alarm $duration $easing infinite; }
.stage.is-demo .miss-badge { animation: miss-pop $duration $easing infinite; }
.stage.is-demo .pack__note { animation: note-in $duration $easing infinite; }

@keyframes scan-down {
  0%   { opacity: 1; background-position: 0 -130%; }
  55%  { opacity: 1; background-position: 0 130%; }
  60%, 100% { opacity: 0; background-position: 0 130%; }
}
@keyframes row-flash {
  0%, 4%  { background: transparent; }
  13%     { background: rgba($subject-blue, .24); }
  27%, 100% { background: transparent; }
}
@keyframes empty-alarm {
  0%, 42%  { background: transparent; }
  50%      { background: rgba($error, .30); }
  60%      { background: rgba($error, .10); }
  68%      { background: rgba($error, .30); }
  76%      { background: rgba($error, .10); }
  84%, 100% { background: rgba($error, .24); }
}
@keyframes miss-pop {
  0%, 42%  { transform: scale(0); opacity: 0; }
  50%      { transform: scale(1.3) rotate(0deg); opacity: 1; }
  56%      { transform: scale(1) rotate(0deg); }
  66%      { transform: scale(1) rotate(7deg); }
  72%      { transform: scale(1) rotate(-7deg); }
  78%      { transform: scale(1) rotate(4deg); }
  84%, 96% { transform: scale(1) rotate(0deg); opacity: 1; }
  100%     { transform: scale(.5); opacity: 0; }
}
@keyframes note-in {
  0%, 48% { transform: translateY(6px); opacity: 0; }
  58%, 94% { transform: translateY(0); opacity: 1; }
  100%    { transform: translateY(6px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .scan,
  .stage.is-demo .row,
  .stage.is-demo .row--miss .row__val--empty,
  .stage.is-demo .miss-badge,
  .stage.is-demo .pack__note { animation: none; }
  .scan { opacity: 0; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.pack {
  width: min(440px, 94vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 8px;
}

.file {
  position: relative;
  border-radius: 16px;
  background: #fff7e6;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  overflow: hidden;
}

.file__head {
  padding: 4px 8px;
  border-bottom: 2px solid rgba(23, 20, 26, 0.12);
}

.file__name {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(10px, 2.4vw, 13px);
  font-weight: 700;
  color: #17141a;
}

.file__rows {
  list-style: none;
  margin: 0;
  padding: 4px 8px 8px;
  display: grid;
  row-gap: 4px;
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 4px;
  border-radius: 4px;
  padding: 0 4px;
  min-height: clamp(18px, 6vw, 28px);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(8.5px, 2vw, 12px);
}

.row__key {
  color: #0a4fe8;
  font-weight: 700;
  white-space: nowrap;
}

.row__val {
  color: #17141a;
  white-space: nowrap;
}

.row__val::before {
  content: attr(data-t);
}

.row__val--empty {
  flex: 1;
  min-height: 14px;
  border: 2px dashed rgba(194, 54, 26, 0.55);
  border-radius: 4px;
}

.miss-badge {
  position: absolute;
  right: -4px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: #c2361a;
  color: #fff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
}

.pack__note {
  grid-column: 1/-1;
  margin: 0;
  justify-self: center;
  border-radius: 999px;
  background: #ffe0d8;
  color: #17141a;
  font-size: clamp(10px, 2.4vw, 13px);
  font-weight: 700;
  padding: 4px 12px;
}

.scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0 calc(50% - 8px), rgba(47, 109, 246, 0.28) calc(50% - 8px) calc(50% + 8px), transparent calc(50% + 8px) 100%);
  background-size: 100% 220%;
  opacity: 0;
}

.stage.is-demo .scan {
  animation: scan-down 2s ease-out infinite;
}

.stage.is-demo .row {
  animation: row-flash 2s linear infinite;
  animation-delay: calc(var(--i) * 0.12s);
}

.stage.is-demo .row--miss .row__val--empty {
  animation: empty-alarm 2s ease-out infinite;
}

.stage.is-demo .miss-badge {
  animation: miss-pop 2s ease-out infinite;
}

.stage.is-demo .pack__note {
  animation: note-in 2s ease-out infinite;
}

@keyframes scan-down {
  0% {
    opacity: 1;
    background-position: 0 -130%;
  }
  55% {
    opacity: 1;
    background-position: 0 130%;
  }
  60%, 100% {
    opacity: 0;
    background-position: 0 130%;
  }
}
@keyframes row-flash {
  0%, 4% {
    background: transparent;
  }
  13% {
    background: rgba(47, 109, 246, 0.24);
  }
  27%, 100% {
    background: transparent;
  }
}
@keyframes empty-alarm {
  0%, 42% {
    background: transparent;
  }
  50% {
    background: rgba(194, 54, 26, 0.3);
  }
  60% {
    background: rgba(194, 54, 26, 0.1);
  }
  68% {
    background: rgba(194, 54, 26, 0.3);
  }
  76% {
    background: rgba(194, 54, 26, 0.1);
  }
  84%, 100% {
    background: rgba(194, 54, 26, 0.24);
  }
}
@keyframes miss-pop {
  0%, 42% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(0deg);
    opacity: 1;
  }
  56% {
    transform: scale(1) rotate(0deg);
  }
  66% {
    transform: scale(1) rotate(7deg);
  }
  72% {
    transform: scale(1) rotate(-7deg);
  }
  78% {
    transform: scale(1) rotate(4deg);
  }
  84%, 96% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes note-in {
  0%, 48% {
    transform: translateY(6px);
    opacity: 0;
  }
  58%, 94% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(6px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .scan,
  .stage.is-demo .row,
  .stage.is-demo .row--miss .row__val--empty,
  .stage.is-demo .miss-badge,
  .stage.is-demo .pack__note {
    animation: none;
  }
  .scan {
    opacity: 0;
  }
}

import type { CSSProperties } from "react";
import styles from "./LanguagePackJson.module.scss";

export type LanguagePackJsonProps = {
  duration?: number;
  easing?: string;
  color?: string;
  note?: string;
};

const KO_ROWS = ["내 서비스", "시작하기", "홈", "문의하기"];
const EN_ROWS = ["My Service", "Get started", "Home", ""];
const KEYS = ["title", "cta", "nav.home", "footer.contact"];

export default function LanguagePackJson({
  duration = 2000,
  easing = "ease-out",
  color = "#fff7e6",
  note = "짝이 안 맞는 키 1개",
}: LanguagePackJsonProps) {
  const vars: CSSProperties = { "--duration": `${duration}ms`, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <div className={styles.stage} style={vars} aria-label="언어팩 두 파일 비교 데모" role="img">
      <div className={styles.pack}>
        <section className={styles.file}>
          <header className={styles.head}><span className={styles.name}>ko.json</span></header>
          <ul className={styles.rows}>
            {KEYS.map((k, i) => (
              <li key={k} className={styles.row} style={{ "--i": i } as CSSProperties}>
                <span className={styles.key}>&quot;{k}&quot;</span>
                <span className={styles.val}>{KO_ROWS[i]}</span>
              </li>
            ))}
          </ul>
          <span className={styles.scan} />
        </section>
        <section className={styles.file}>
          <header className={styles.head}><span className={styles.name}>en.json</span></header>
          <ul className={styles.rows}>
            {KEYS.map((k, i) => (
              <li
                key={k}
                className={`${styles.row} ${i === 3 ? styles.rowMiss : ""}`}
                style={{ "--i": i } as CSSProperties}
              >
                <span className={styles.key}>&quot;{k}&quot;</span>
                {EN_ROWS[i]
                  ? <span className={styles.val}>{EN_ROWS[i]}</span>
                  : <span className={`${styles.val} ${styles.valEmpty}`} />}
                {i === 3 && <span className={styles.miss}>!</span>}
              </li>
            ))}
          </ul>
          <span className={styles.scan} />
        </section>
        <p className={styles.note}>{note}</p>
      </div>
    </div>
  );
}

Open in a new tab

01 The two-file language pack — Measured area 46.337% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · i18n JSON Checks: 9 Ways to Catch Missing Keys

The post this demo lives in

i18n JSON Checks: 9 Ways to Catch Missing Keys - preview of all 9 demos

i18n JSON Checks: 9 Ways to Catch Missing Keysi18n JSON files break quietly: a key missing from en.json leaves a button empty, and a stray {name} placeholder ships wi See all demos in this post

01The two-file language pack

The post this demo lives in

If you like this effect - similar demos