학습 목표
- 일관된 규칙과 명확한 정보 위계가 완성도를 높입니다.
- 접근성은 색·마우스 외의 방식으로도 사용할 수 있는지 확인하는 일입니다.
- 실습의 완료 조건과 실패 시 회복 방법을 직접 확인합니다.
사전 지식
사용자가 이해하는 UI/UX 설계에서 기본 용어를 먼저 확인하세요. 예시는 기존 운영 서비스를 자동으로 바꾸는 설정이 아니라 별도 연습 화면·프로젝트에 적용하는 출발점입니다.
개념 이해
미니멀한 화면은 정보를 흐리게 지운 화면이 아닙니다. 일관된 여백과 글자 위계, 읽을 수 있는 대비, 확실한 초점이 있어야 단순하면서도 사용하기 편합니다.
작은 디자인 규칙 만들기
여백을 4·8·12·16·24·32처럼 작은 눈금으로 관리하고 제목·본문·설명·버튼 크기를 공통 변수로 정합니다. 모든 카드에 다른 그림자와 반경을 주기보다 같은 역할에는 같은 규칙을 사용합니다. 굵기와 크기를 조금씩 모두 바꾸는 것보다 두세 단계의 위계가 읽기 쉽습니다.
연한 회색과 보라색도 읽을 수 있게
본문·설명·비활성 상태를 색 하나로 판단하지 않습니다. 배경 위 실제 색 조합을 대비 도구로 측정합니다. WCAG AA의 일반 텍스트 기준은 4.5:1이고 큰 글자는 별도 조건이 있으므로 크기·굵기와 함께 확인합니다. 중요한 상태는 문구나 아이콘도 함께 제공합니다.
키보드 순서와 팝업
시각적 순서와 DOM 읽기 순서를 맞춥니다. 팝업을 열면 초점을 안으로 보내고 닫으면 실행 버튼으로 돌려줍니다. 모달에서는 배경 조작을 막고 Esc·닫기 버튼을 제공합니다. 브라우저의 기본 dialog를 사용해도 이름·초점·열기와 닫기를 실제로 확인해야 합니다.
확대·움직임·작은 화면
글자를 확대해도 버튼과 설명이 겹치지 않게 만듭니다. 고정 높이로 본문을 가두지 말고 긴 한국어와 영어 단어가 흐르게 합니다. prefers-reduced-motion을 존중하고 애니메이션이 없을 때도 상태 변화를 이해할 수 있게 합니다.
실제 사용 사례
프로필 편집 페이지의 두 카드를 같은 반경과 여백으로 맞추되 제목은 공통 페이지 제목 규칙을 따릅니다. 모바일에서는 읽기 순서대로 세로로 쌓고 저장 버튼이 내용이나 키보드에 가려지지 않게 합니다.
단계별 실습
- 현재 화면의 글자·여백·모서리 규칙을 목록으로 뽑으세요.
- 역할이 같은 값은 공통 토큰으로 통합하세요.
- 본문·링크·오류·버튼의 실제 대비를 측정하세요.
- Tab·Shift+Tab·Enter·Esc로 주요 흐름을 수행하세요.
- 200% 확대와 동작 줄이기 설정에서 겹침·잘림을 확인하세요.
코드와 프롬프트
아래 예시는 브라우저의 HTML/CSS 연습 화면에 적용하는 예시입니다. 이벤트·서버 검증·운영 설정 전체를 대신하지 않습니다. 기존 코드와 설치 버전을 먼저 확인하세요.
:root { --space-unit: 4px; --card-radius: 16px; --text-secondary: #625c70; }
.card { padding: calc(var(--space-unit) * 6); border-radius: var(--card-radius); }
button:focus-visible, a:focus-visible { outline: 3px solid #7147eb; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }대괄호를 실제 상황으로 바꿔 요청하세요. 비밀 값과 개인정보 원문은 넣지 마세요.
[화면]의 여백·글자 위계를 기존 디자인 시스템과 맞춰줘. 대비를 실제 조합으로 확인하고 키보드·팝업 초점 복귀·200% 확대·동작 줄이기를 점검해줘. 장식용 영문 라벨이나 불필요한 애니메이션은 추가하지 말아줘.자주 발생하는 문제와 해결
| 문제 | 해결과 확인 |
|---|---|
| 미니멀하게 하려다 설명이 읽히지 않는다 | 색을 더 흐리게 하기보다 정보 양과 여백을 조정합니다. |
| 팝업을 닫으면 초점이 사라진다 | 열기 전 실행 요소를 기억하고 정상적인 닫기 시 초점을 복귀시킵니다. |
핵심 요약
- 일관된 규칙과 명확한 정보 위계가 완성도를 높입니다.
- 접근성은 색·마우스 외의 방식으로도 사용할 수 있는지 확인하는 일입니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 기능·제품 요금·법령은 변경될 수 있으므로 적용 시 공식 문서와 현재 시행일·설치 버전을 다시 확인하세요.