학습 목표
- 버튼 문구는 누른 뒤의 결과를 예고합니다.
- 크기·초점·진행·실패까지 포함해야 실제로 쓰기 편한 버튼입니다.
- 실습의 완료 조건과 실패 시 회복 방법을 직접 확인합니다.
사전 지식
사용자가 이해하는 UI/UX 설계에서 기본 용어를 먼저 확인하세요. 예시는 기존 운영 서비스를 자동으로 바꾸는 설정이 아니라 별도 연습 화면·프로젝트에 적용하는 출발점입니다.
개념 이해
버튼은 화면의 장식이 아니라 사용자의 결정을 실행하는 약속입니다. 문구·우선순위·크기와 진행 상태를 함께 설계하면 실수와 중복 요청을 줄일 수 있습니다.
행동의 우선순위부터 정하기
한 작업 영역에서 가장 중요한 행동 하나를 기본 버튼으로 강조합니다. 저장과 취소가 같은 색·크기면 매번 판단해야 합니다. 보조 행동은 테두리나 텍스트로 낮추고, 삭제 같은 위험 행동은 진행에 꼭 필요한 순간에 분리해 배치하세요.
결과가 예상되는 문구
확인·진행보다 프로필 저장·초대 보내기처럼 대상과 행동을 씁니다. 아이콘만 있으면 접근 가능한 이름과 필요할 때 설명을 제공합니다. 다른 주소로 이동하면 링크, 현재 화면에서 저장·삭제·열기 등을 실행하면 button 요소를 사용합니다.
작은 로고와 실제 클릭 영역 구분
아이콘이 16px여도 클릭 영역은 넉넉하게 만들 수 있습니다. 실무에서는 44px 정도의 높이를 출발점으로 잡고 모바일에서 직접 눌러 봅니다. 이는 모든 상황의 법적 최소치라는 뜻이 아닙니다. 인접 버튼 사이 공간과 키보드 초점도 함께 확인합니다.
진행과 실패까지 하나의 버튼 상태
요청 중에는 저장 중이라는 상태를 알리고 중복 제출을 막습니다. 실패하면 실행 가능한 상태로 돌아와야 합니다. disabled 버튼은 초점을 받지 못할 수 있으므로 비활성 이유를 근처에 설명하고, 서버에는 별도로 중복 처리 방지와 권한 검사를 둡니다.
실제 사용 사례
서비스 등록 화면에서 주요 버튼을 등록하기로 통일하고 미리보기는 보조 행동으로 둡니다. 요청이 실패하면 입력 내용을 유지하고 다시 등록할 수 있게 합니다. 성공한 경우에만 상세 화면으로 이동합니다.
단계별 실습
- 화면마다 가장 중요한 행동 하나와 보조 행동을 적으세요.
- 기본·보조·위험 버튼의 문구와 색·크기를 규칙으로 정하세요.
- 대기·진행·성공·실패 상태를 같은 컴포넌트에서 표현하세요.
- 좁은 화면·키보드 Tab/Enter·긴 문구로 조작해 보세요.
- 느린 응답과 실패 후에도 중복 실행 없이 다시 시도되는지 확인하세요.
코드와 프롬프트
아래 예시는 브라우저의 HTML/CSS 연습 화면에 적용하는 예시입니다. 이벤트·서버 검증·운영 설정 전체를 대신하지 않습니다. 기존 코드와 설치 버전을 먼저 확인하세요.
<button type="submit" class="save-button">프로필 저장</button>
<p role="status" aria-live="polite"></p>
<style>
.save-button { min-height:44px; padding:10px 20px; border-radius:12px; }
.save-button:focus-visible { outline:3px solid #7147eb; outline-offset:3px; }
</style>대괄호를 실제 상황으로 바꿔 요청하세요. 비밀 값과 개인정보 원문은 넣지 마세요.
[화면]의 버튼을 주요·보조·위험 행동으로 정리해줘. 이동은 링크, 실행은 button으로 구현하고 로딩·실패·재시도·키보드 초점 상태를 포함해줘. 서버 성공 전 완료로 표시하지 말고 기존 제출 로직과 중복 방지를 확인해줘.자주 발생하는 문제와 해결
| 문제 | 해결과 확인 |
|---|---|
| 진행 표시가 계속 돌아간다 | finally에서 진행 상태를 해제하고 취소·타임아웃도 실패 경로로 정리합니다. |
| 색만으로 삭제를 구분한다 | 삭제라는 문구와 결과 설명을 함께 제공하고 되돌릴 수 없는 행동만 확인 단계를 둡니다. |
핵심 요약
- 버튼 문구는 누른 뒤의 결과를 예고합니다.
- 크기·초점·진행·실패까지 포함해야 실제로 쓰기 편한 버튼입니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 기능·제품 요금·법령은 변경될 수 있으므로 적용 시 공식 문서와 현재 시행일·설치 버전을 다시 확인하세요.