03{placeholder} mismatches
A {name} chip inside the sentence highlights like a marker pen as each locale is swept, and a sentence missing it gets a warning badge shaking into place.
Best forWhen the greeting drops the user's name in one language, or a quantity or date variable leaks out raw
content: attr(data-t)집합 비교치환 누락
<main class="stage is-demo">
<div class="stack">
<section class="card">
<div class="lines">
<p class="line line--ko"><span class="ph" style="--i:0">{name}</span><span class="txt" data-t="님, 주문이 "></span><span class="ph" style="--i:1">{count}</span><span class="txt" data-t="건 접수되었습니다"></span></p>
<p class="line line--en"><span class="ph" style="--i:0">{count}</span><span class="txt" data-t=" orders placed for "></span><span class="ph" style="--i:1">{name}</span></p>
</div>
<span class="verdict verdict--ok">match</span>
</section>
<section class="card">
<div class="lines">
<p class="line line--ko"><span class="ph" style="--i:0">{date}</span><span class="txt" data-t="에 환불이 완료되었습니다"></span></p>
<p class="line line--en"><span class="txt" data-t="Refund completed"></span><span class="ph ph--ghost" style="--i:0">{date}</span></p>
</div>
<span class="verdict verdict--ng">mismatch</span>
</section>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop; // 2s — 형광펜 한 주기
$easing: $ease-out;
$color: $subject-blue; // 자리표시자 칩
@include stage($stage-orange);
.stack {
width: min(440px, 94vw);
display: grid;
row-gap: $sp-3;
}
.card {
position: relative;
border-radius: $r-card;
background: $subject-cream;
box-shadow: $shadow-raised;
padding: $sp-2 $sp-3;
display: grid;
row-gap: $sp-1;
}
.line {
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: $sp-1;
row-gap: $sp-1;
font-size: clamp(9.5px, 2.4vw, 13.5px);
font-weight: 600;
color: $subject-ink;
}
.line--ko { font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; }
.line--en { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.txt::before { content: attr(data-t); }
.ph {
border-radius: $r-xs;
background: $color;
color: #fff;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-weight: 700;
font-size: clamp(9px, 2.2vw, 12.5px);
padding: 0 $sp-1;
min-height: 16px;
display: inline-flex;
align-items: center;
}
.ph--ghost {
background: transparent;
color: rgba($subject-ink, .72); // .38 은 크림 면 위 2.41:1 이었다 — AA 4.5
border: 2px dashed rgba($error, .6);
}
.verdict {
position: absolute;
top: -$sp-2;
right: $sp-2;
border-radius: $r-pill;
font-size: clamp(9px, 2.2vw, 12px);
font-weight: 800;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: $sp-1 $sp-2;
box-shadow: $shadow-press;
}
.verdict--ok { background: #50a384; color: $subject-ink; } // 흰 글자는 3.40:1 — 잉크로 5.36:1
.verdict--ng { background: $error; color: #fff; }
// 형광펜이 칩을 차례로 짚는다
.stage.is-demo .ph { animation: mark $duration $easing infinite; animation-delay: calc(var(--i) * .2s); }
.stage.is-demo .ph--ghost { animation-name: mark-ghost; }
.stage.is-demo .verdict--ok { animation: ok-in $duration $ease-pop infinite; }
.stage.is-demo .verdict--ng { animation: ng-in $duration $easing infinite; }
@keyframes mark {
0%, 8% { filter: brightness(1); transform: scale(1); }
16% { filter: brightness(1.45); transform: scale(1.14); }
26%, 92%{ filter: brightness(1); transform: scale(1); }
100% { filter: brightness(1); transform: scale(.9); }
}
@keyframes mark-ghost {
0%, 36% { transform: scale(1); opacity: .55; }
46% { transform: scale(1.14); opacity: 1; }
56%, 92%{ transform: scale(1); opacity: 1; }
100% { transform: scale(.9); opacity: .55; }
}
@keyframes ok-in {
0%, 30% { transform: scale(0) rotate(0deg); opacity: 0; }
38% { transform: scale(1.2) rotate(0deg); opacity: 1; }
44%, 94%{ transform: scale(1) rotate(0deg); opacity: 1; }
100% { transform: scale(.5); opacity: 0; }
}
@keyframes ng-in {
0%, 46% { transform: scale(0) rotate(0deg); opacity: 0; }
54% { transform: scale(1.25) rotate(0deg); opacity: 1; }
60% { transform: scale(1) rotate(0deg); }
68% { transform: scale(1) rotate(9deg); }
76% { transform: scale(1) rotate(-9deg); }
84% { transform: scale(1) rotate(5deg); }
90%, 96%{ transform: scale(1) rotate(0deg); opacity: 1; }
100% { transform: scale(.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.stage.is-demo .ph,
.stage.is-demo .verdict--ok,
.stage.is-demo .verdict--ng { animation: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ff4d1f;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.stack {
width: min(440px, 94vw);
display: grid;
row-gap: 12px;
}
.card {
position: relative;
border-radius: 16px;
background: #fff7e6;
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
padding: 8px 12px;
display: grid;
row-gap: 4px;
}
.line {
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 4px;
row-gap: 4px;
font-size: clamp(9.5px, 2.4vw, 13.5px);
font-weight: 600;
color: #17141a;
}
.line--ko {
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.line--en {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.txt::before {
content: attr(data-t);
}
.ph {
border-radius: 4px;
background: #2f6df6;
color: #fff;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-weight: 700;
font-size: clamp(9px, 2.2vw, 12.5px);
padding: 0 4px;
min-height: 16px;
display: inline-flex;
align-items: center;
}
.ph--ghost {
background: transparent;
color: rgba(23, 20, 26, 0.72);
border: 2px dashed rgba(194, 54, 26, 0.6);
}
.verdict {
position: absolute;
top: -8px;
right: 8px;
border-radius: 999px;
font-size: clamp(9px, 2.2vw, 12px);
font-weight: 800;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: 4px 8px;
box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
}
.verdict--ok {
background: #50a384;
color: #17141a;
}
.verdict--ng {
background: #c2361a;
color: #fff;
}
.stage.is-demo .ph {
animation: mark 2s ease-out infinite;
animation-delay: calc(var(--i) * 0.2s);
}
.stage.is-demo .ph--ghost {
animation-name: mark-ghost;
}
.stage.is-demo .verdict--ok {
animation: ok-in 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}
.stage.is-demo .verdict--ng {
animation: ng-in 2s ease-out infinite;
}
@keyframes mark {
0%, 8% {
filter: brightness(1);
transform: scale(1);
}
16% {
filter: brightness(1.45);
transform: scale(1.14);
}
26%, 92% {
filter: brightness(1);
transform: scale(1);
}
100% {
filter: brightness(1);
transform: scale(0.9);
}
}
@keyframes mark-ghost {
0%, 36% {
transform: scale(1);
opacity: 0.55;
}
46% {
transform: scale(1.14);
opacity: 1;
}
56%, 92% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.55;
}
}
@keyframes ok-in {
0%, 30% {
transform: scale(0) rotate(0deg);
opacity: 0;
}
38% {
transform: scale(1.2) rotate(0deg);
opacity: 1;
}
44%, 94% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
100% {
transform: scale(0.5);
opacity: 0;
}
}
@keyframes ng-in {
0%, 46% {
transform: scale(0) rotate(0deg);
opacity: 0;
}
54% {
transform: scale(1.25) rotate(0deg);
opacity: 1;
}
60% {
transform: scale(1) rotate(0deg);
}
68% {
transform: scale(1) rotate(9deg);
}
76% {
transform: scale(1) rotate(-9deg);
}
84% {
transform: scale(1) rotate(5deg);
}
90%, 96% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
100% {
transform: scale(0.5);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.stage.is-demo .ph,
.stage.is-demo .verdict--ok,
.stage.is-demo .verdict--ng {
animation: none;
}
}import type { CSSProperties } from "react";
import styles from "./PlaceholderMismatch.module.scss";
export type PlaceholderMismatchProps = {
duration?: number;
easing?: string;
color?: string;
okLabel?: string;
ngLabel?: string;
};
export default function PlaceholderMismatch({
duration = 2000,
easing = "ease-out",
color = "#2f6df6",
okLabel = "일치",
ngLabel = "불일치",
}: PlaceholderMismatchProps) {
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.stack}>
<section className={styles.card}>
<div className={styles.lines}>
<p className={`${styles.line} ${styles.lineKo}`}>
<span className={styles.ph} style={{ "--i": 0 } as CSSProperties}>{"{name}"}</span>
<span className={styles.txt}>님, 주문이 </span>
<span className={styles.ph} style={{ "--i": 1 } as CSSProperties}>{"{count}"}</span>
<span className={styles.txt}>건 접수되었습니다</span>
</p>
<p className={`${styles.line} ${styles.lineEn}`}>
<span className={styles.ph} style={{ "--i": 0 } as CSSProperties}>{"{count}"}</span>
<span className={styles.txt}> orders placed for </span>
<span className={styles.ph} style={{ "--i": 1 } as CSSProperties}>{"{name}"}</span>
</p>
</div>
<span className={`${styles.verdict} ${styles.ok}`}>{okLabel}</span>
</section>
<section className={styles.card}>
<div className={styles.lines}>
<p className={`${styles.line} ${styles.lineKo}`}>
<span className={styles.ph} style={{ "--i": 0 } as CSSProperties}>{"{date}"}</span>
<span className={styles.txt}>에 환불이 완료되었습니다</span>
</p>
<p className={`${styles.line} ${styles.lineEn}`}>
<span className={styles.txt}>Refund completed</span>
<span className={`${styles.ph} ${styles.ghost}`} style={{ "--i": 0 } as CSSProperties}>{"{date}"}</span>
</p>
</div>
<span className={`${styles.verdict} ${styles.ng}`}>{ngLabel}</span>
</section>
</div>
</div>
);
}03 {placeholder} mismatches — Measured area 6.635% · moving frames 22/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 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
