마이크로카피는 필드 라벨, 도움말, 오류 안내처럼 인터페이스 안의 짧은 문장입니다. 실패 이유와 회복 방법을 함께 알리면 사용자가 막힌 지점에서 다시 진행할 수 있습니다.
데모는 막연한 오류를 수정 가능한 안내로 바꾸고 입력 필드가 다시 정상 상태로 돌아오는 과정을 보여줍니다. 실제 오류 원인과 맞는 문구여야 합니다.
언제 쓰나
폼 오류와 빈 상태, 결제·가입의 대기 화면을 점검할 때 쓰세요.
마이크로카피
Microcopy
입력·오류·대기 같은 작은 순간에 다음 행동을 안내합니다.
···
<div class="form"><label>Work email</label><div class="field">mira@studio<span>.com</span></div><div class="bad">Something went wrong.</div><div class="good">Add your domain after @ to continue.</div><div class="status">READY TO CONTINUE</div></div>.form{box-sizing:border-box;width:min(82%,470px);padding:clamp(12px,3vmin,26px);border:1px solid var(--line);background:var(--surface);font-family:sans-serif}.form label{display:block;font:850 clamp(10px,max(2vmin,1vw),16px) sans-serif}.field{margin-top:clamp(6px,1.5vmin,12px);padding:clamp(8px,2vmin,15px);border:2px solid var(--accent);font:750 clamp(13px,3vmin,25px) sans-serif}.field span{animation:type 5s infinite}.bad,.good{margin-top:clamp(7px,1.7vmin,14px);font:700 clamp(10px,max(2vmin,1vw),17px) sans-serif}.bad{color:var(--accent);animation:hide 5s infinite}.good{color:var(--fg);animation:show 5s infinite}.status{margin-top:clamp(8px,2vmin,16px);padding:.7em;background:var(--accent);color:white;text-align:center;font:900 clamp(10px,max(1.7vmin,1vw),14px) sans-serif;animation:show 5s infinite}@keyframes hide{0%,25%{opacity:1}45%,85%{opacity:0}100%{opacity:1}}@keyframes show{0%,25%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}@keyframes type{0%,25%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}