디자인 아틀라스
EN
❝ UX 라이팅

문장식 표기

Sentence Case

"Save Your Changes Now"처럼 단어마다 대문자로 시작하는 Title Case 대신, 문장 맨 앞만 대문자로 쓰는 방식.

다른 이름: Title Case vs Sentence case
···
html
<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <div class="col"><button class="btn ghost" id="b1"></button><button class="btn ghost" id="b2"></button></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <div class="col"><button class="btn solid" id="g1"></button><button class="btn solid" id="g2"></button></div>
    <p class="why" id="gw"></p></div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:16px 14px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.col{display:flex;flex-direction:column;gap:8px;width:90%}
.btn{padding:8px 14px;border-radius:8px;font:700 clamp(10px,2.6vmin,13px)/1 -apple-system,sans-serif;text-align:center}
.ghost{background:var(--bg);border:1px solid var(--line);color:var(--fg)}
.solid{background:var(--accent-3);border:0;color:#fff}
.why{margin:0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted);text-align:center}
js
const b1 = document.getElementById('b1'), b2 = document.getElementById('b2'), bw = document.getElementById('bw');
const g1 = document.getElementById('g1'), g2 = document.getElementById('g2'), gw = document.getElementById('gw');
const L = {
  ko: { b1: '저장하기', b2: 'SAVE', bw: '한 화면에서 어미·표기가 뒤섞임', g1: '저장하기', g2: '취소하기', gw: '어미를 화면 전체에서 통일' },
  en: { b1: 'Save Your Changes Now', b2: 'CANCEL', bw: 'Title Case and all-caps mixed on one screen', g1: 'Save your changes', g2: 'Cancel', gw: 'sentence case, consistent everywhere' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  b1.textContent = t.b1; b2.textContent = t.b2; bw.textContent = t.bw;
  g1.textContent = t.g1; g2.textContent = t.g2; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2600);

Sentence case는 문장의 첫 글자만 대문자로 쓰고 나머지는 소문자로 두는 영문 표기법입니다. 단어마다 대문자를 넣는 Title Case("Save Your Changes Now")보다 읽는 속도가 빠르고 소리치는 느낌이 덜합니다 — Material Design·GOV.UK 등 주요 디자인 시스템이 UI 텍스트 기본값으로 채택한 이유입니다.

한국어는 대소문자가 없어 이 규칙이 그대로 적용되진 않지만, 같은 문제의식은 남습니다 — **한 화면 안에서 문말 표기를 일관되게 유지하는 것**입니다. 어떤 버튼은 "저장하기", 어떤 버튼은 "저장", 어떤 버튼은 "SAVE"처럼 표기 방식이 섞이면 Title Case를 남용한 영문 UI와 같은 산만함을 만듭니다.

데모는 영문 버튼에서 Title Case와 Sentence case를 대조하고, 같은 화면에서 한글 표기가 뒤섞인 예도 함께 보여줍니다.

언제 쓰나

버튼·헤딩·메뉴 라벨을 쓸 때 영문이면 Sentence case를 기본으로, 한글이면 어미(-하기/-함/영문 대문자)를 화면 전체에서 통일하세요.