거창한 계측 도구가 없어도, 상태를 눈으로 직접 펼쳐 보는 것만으로 많은 문제가 드러납니다. CSS만으로 상태를 흉내 내고, 한 화면에 모아 보고, 잘못된 자리를 밝게 비추는 방법을 코드로 보겠습니다. 손으로 만져 보는 것이 곧 테스트입니다.
31.1 클릭만으로 상태 흉내 내기
펼침이나 켜짐 같은 상태를 확인하려고 매번 스크립트를 붙일 필요는 없습니다. 체크박스와 :checked 로 상태 전환을 흉내 낼 수 있습니다.
<input type="checkbox" id="t" class="toggle">
<label for="t">패널 열기</label>
<div class="panel">내용</div>
.panel { display: none; }
.toggle:checked ~ .panel {
display: block;
}
라벨을 누르면 숨은 체크박스가 켜지고 :checked 선택자가 패널을 펼칩니다. 자바스크립트 없이도 열림과 닫힘 두 상태를 그 자리에서 눈으로 확인할 수 있습니다.
31.2 주소로 특정 상태 열어 두기
에러가 뜬 순간이나 특정 단계를 매번 재현하기는 번거롭습니다. :target 을 쓰면 주소만으로 그 상태를 바로 열 수 있습니다.
.modal { display: none; }
.modal:target {
display: flex;
}
<a href="#dialog">대화상자 미리보기</a>
<div class="modal" id="dialog">...</div>
주소 끝에 #dialog 가 붙으면 그 요소가 :target 이 되어 대화상자가 열립니다. 링크 하나로 특정 상태를 재현해 두고 점검할 수 있으니, 검수할 때 아주 편합니다.
31.3 모든 상태를 한 화면에 늘어놓기
버튼 하나도 기본, 호버, 눌림, 비활성, 포커스처럼 여러 얼굴을 가집니다. 이 얼굴들을 한자리에 모아 두면 빠진 상태가 한눈에 보입니다.
<div class="gallery">
<button class="btn">기본</button>
<button class="btn is-hover">호버</button>
<button class="btn is-active">눌림</button>
<button class="btn" disabled>비활성</button>
</div>
.gallery {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
실제 상태를 흉내 내는 is-hover 같은 클래스로 각 얼굴을 나란히 세워 두면, 어느 상태가 어색한지나 아예 스타일이 빠진 곳이 대번에 드러납니다. 이 상태 갤러리 한 장이 든든한 점검표가 됩니다.
31.4 탭 영역을 눈에 보이게 그리기
버튼이 손끝에 비해 너무 작은지는 눈짐작으로는 잘 모릅니다. 실제 눌리는 영역에 외곽선을 둘러 보면 크기가 그대로 보입니다.
.debug-tap * {
outline: 1px solid red;
}
.debug-tap button,
.debug-tap a {
outline: 2px solid magenta;
}
바깥 요소에 debug-tap 클래스만 잠깐 걸면 모든 요소의 경계가 드러나고, 누를 수 있는 것엔 짙은 선이 둘러집니다. 손가락 기준인 44px보다 작은 표적이 있으면 바로 눈에 띕니다.
31.5 포커스가 보이는지 점검하기
키보드로만 쓰는 사용자는 지금 어디에 있는지를 포커스 표시로 압니다. 이 표시가 잘 보이는지 일부러 도드라지게 켜서 확인합니다.
.audit :focus-visible {
outline: 3px solid #16a34a;
outline-offset: 2px;
}
audit 를 걸고 Tab 키로 화면을 훑으면 초록 외곽선이 요소를 차례로 짚습니다. 이때 선이 안 나타나는 요소가 있다면 어디선가 포커스 스타일을 지워 버린 것이니, 그 자리를 손봐야 합니다.
31.6 색 대비를 흑백으로 점검하기
글자와 배경의 대비가 충분한지는 색에 눈이 팔려 놓치기 쉽습니다. 화면을 잠시 흑백으로 돌려 보면 대비만 도드라집니다.
.audit-contrast {
filter: grayscale(1) contrast(1);
}
색을 걷어 내면 오직 밝기 차이만 남아, 흐린 회색 위 흰 글자처럼 대비가 모자란 곳이 그대로 드러납니다. 색으로만 정보를 구분한 자리도 흑백에서 뭉개지니 함께 찾아낼 수 있습니다.
31.7 움직임 줄이기 설정 시험하기
애니메이션이 불편한 사용자는 기기에 움직임 줄이기를 켜 둡니다. 이 설정을 존중하는지 CSS로 대비를 걸어 시험합니다.
.slide {
transition: transform .3s ease;
}
@media (prefers-reduced-motion: reduce) {
.slide {
transition: none;
}
}
기기 설정에서 움직임 줄이기를 켠 뒤 화면을 다루면, prefers-reduced-motion 블록이 켜져 전환이 사라집니다. 설정을 켰는데도 여전히 화면이 출렁인다면 그 애니메이션은 이 조건 밖에 있는 것입니다.
31.8 극단값으로 무너지는 곳 찾기
짧고 예쁜 예시 데이터로만 보면 실제로 긴 이름이나 빈 값이 들어왔을 때 화면이 깨지는 걸 놓칩니다. 일부러 극단값을 넣어 흉내 내 봅니다.
<div class="card">
<h3>김</h3>
</div>
<div class="card">
<h3>아주아주긴이름이줄바꿈없이한없이이어지는경우테스트</h3>
</div>
.card h3 {
overflow-wrap: break-word;
}
한 글자짜리와 끝없이 긴 값을 나란히 두면, 줄바꿈이 안 되어 상자를 뚫고 나가는 문제가 그 자리에서 보입니다. overflow-wrap: break-word 로 긴 글자를 접어 무너짐을 막습니다.
31.9 좁은 화면을 강제로 시험하기
넓은 화면에서 멀쩡하던 레이아웃이 좁은 폭에서 삐져나오는지 보려면, 미리보기 틀을 좁게 고정해 두면 편합니다. 폭을 못 박아 시험합니다.
.preview-320 {
width: 320px;
border: 1px dashed #94a3b8;
resize: horizontal;
overflow: auto;
}
미리볼 화면을 320px 틀에 넣어 두면 가장 좁은 기기에서의 모습을 바로 확인할 수 있습니다. resize: horizontal 을 주면 모서리를 끌어 폭을 넓혀 가며 어느 지점에서 레이아웃이 바뀌는지도 눈으로 짚어 볼 수 있습니다.
31.10 정리
사용성 점검은 값비싼 도구가 아니라 상태를 눈으로 펼쳐 보는 습관에서 시작합니다. CSS로 상태를 흉내 내고, 모든 얼굴을 한 화면에 늘어놓고, 잘못된 자리를 밝게 비추는 이 소박한 방법만으로도 큰 함정은 대개 드러납니다. 완벽한 검사보다 자주 들여다보는 눈이 화면을 지킵니다. 상태를 숨겨 두지 말고 늘 꺼내 볼 수 있게 두는 습관 하나가, 나중에 사용자가 겪을 당황을 미리 걷어 냅니다.