모바일 버튼 라벨이 바뀔 때 레이아웃이 밀리는 이유

# 모바일 버튼 라벨이 바뀔 때 레이아웃이 밀리는 이유

버튼이 눌릴 때마다 살짝 밀리면 사용자는 기능보다 불안정함을 먼저 봅니다.

제가 먼저 보는 건 애니메이션이 아니라 문자열입니다. "Save", "Saving...", "Saved"는 영어에선 별 차이 없어 보여도 한국어, 독일어, 포르투갈어로 가면 길이가 확 달라집니다. 모바일에서는 그 차이가 바로 줄바꿈, 아이콘 밀림, 버튼 높이 변화로 보입니다.

이 문제를 CSS만의 문제로 보면 자주 놓칩니다. 사실은 상태 설계, 번역 문자열, 버튼 width 정책, loading affordance가 같이 만든 버그에 가깝습니다.

## 먼저 재현을 고정합니다

브라우저에서 대충 눌러보고 "조금 튄다"로 끝내면 수정이 흔들립니다. 저는 먼저 상태별 라벨을 다 적습니다.

| 확인 지점 | 봐야 할 것 |
|---|---|
| 가장 긴 상태 라벨 | 로딩, 완료, 오류, 재시도 문구까지 포함 |
| 아이콘 유무 | 상태마다 아이콘이 사라지거나 생기는지 |
| 최소 너비 | 가장 긴 라벨 기준으로 고정됐는지 |
| 줄바꿈 | 320px 폭에서도 버튼 높이가 튀지 않는지 |
| 폰트 로딩 | 웹폰트 적용 전후 width가 달라지는지 |
| 접근성 라벨 | 시각 라벨과 `aria-label`이 따로 흔들리는지 |

테스트 폭은 최소한 `320px`, `360px`, `390px` 정도를 봅니다. 데스크톱에서 멀쩡한 버튼은 별 의미가 없습니다. 이 버그는 좁은 화면에서 드러납니다.

## 흔한 원인

가장 자주 보는 원인은 네 가지입니다.

| 원인 | 화면 증상 | 확인 방법 |
|---|---|---|
| 라벨 길이 변화 | 버튼 width가 매 상태마다 바뀜 | 상태별 text를 강제로 넣어보기 |
| 아이콘 conditional render | 텍스트 시작점이 좌우로 움직임 | icon slot을 항상 유지 |
| loading spinner 삽입 | 버튼 높이나 gap이 바뀜 | spinner 크기와 line-height 확인 |
| 번역 문자열 미검증 | 특정 언어에서만 줄바꿈 | longest label fixture 만들기 |

여기서 중요한 건 "가장 긴 라벨 하나"만 보면 부족하다는 점입니다. 오류 상태가 더 길 수 있고, 권한 요청 상태가 더 길 수도 있습니다. 버튼이 실제로 가질 수 있는 모든 상태를 넣어야 합니다.

## 안정적인 버튼 구조

저는 보통 버튼 안을 세 칸으로 봅니다.

```html
<button class="action-button" data-state="loading">
  <span class="action-button__icon" aria-hidden="true"></span>
  <span class="action-button__label">저장 중입니다</span>
  <span class="action-button__meta" aria-hidden="true"></span>
</button>
```

아이콘이 없는 상태에서도 icon slot은 남겨둡니다. 그래야 텍스트 시작점이 바뀌지 않습니다.

CSS는 이런 식으로 시작합니다.

```css
.action-button {
  display: inline-grid;
  grid-template-columns: 1rem minmax(0, max-content) 1rem;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  min-block-size: 2.5rem;
  min-inline-size: var(--button-min-width, 9rem);
  max-inline-size: 100%;
}

.action-button__label {
  overflow-wrap: anywhere;
  line-height: 1.2;
}

@media (max-width: 360px) {
  .action-button {
    inline-size: 100%;
  }
}
```

항상 이 코드가 정답이라는 뜻은 아닙니다. 핵심은 icon slot과 label 영역의 기대치를 고정하는 겁니다. 상태가 바뀌어도 버튼의 뼈대가 바뀌지 않아야 합니다.

## `min-width`만으로는 부족한 경우

`min-width: 120px` 같은 고정값은 영어에서는 잘 버티지만 번역이 들어가면 쉽게 깨집니다. 그래서 제품 UI에서는 실제 문자열 fixture를 기준으로 custom property를 잡는 편이 낫습니다.

예를 들면 디자인 QA에서 이런 fixture를 둡니다.

```js
const buttonLabels = {
  idle: '저장',
  loading: '저장 중입니다',
  done: '저장되었습니다',
  retry: '다시 시도해 주세요',
  permission: '권한을 확인해 주세요',
};
```

그 다음 Storybook이나 Playwright에서 상태별 screenshot을 찍습니다. 버튼 하나 보려고 과한 것 같지만, 결제·저장·삭제처럼 실수 비용이 큰 버튼은 이 정도가 싸게 먹힙니다.

## 접근성 쪽에서 놓치는 부분

시각적으로는 "저장 중입니다"라고 바뀌는데 스크린리더에는 계속 "저장"으로 남아 있으면 상태 변경을 일부 사용자만 알게 됩니다.

반대로 `aria-live`를 너무 공격적으로 쓰면 버튼 누를 때마다 상태를 과하게 읽습니다. 저는 보통 버튼 라벨 자체는 안정적으로 두고, 필요한 경우 근처 status 영역에 짧게 알립니다.

```html
<button class="action-button" aria-describedby="save-status">
  <span class="action-button__label">저장</span>
</button>
<p id="save-status" role="status">저장 중입니다</p>
```

이 방식은 화면 레이아웃과 보조기술 알림을 분리할 수 있어서 안전합니다.

## 제 기준의 수정 완료 조건

수정했다고 말하려면 최소한 이 정도는 봅니다.

- 320px 폭에서 상태별 버튼 높이가 불필요하게 변하지 않는다.
- 가장 긴 번역 문자열에서도 텍스트가 버튼 밖으로 나가지 않는다.
- loading/icon 상태가 바뀌어도 label 시작점이 크게 흔들리지 않는다.
- 키보드 focus ring이 spinner나 icon 때문에 잘리지 않는다.
- 스크린리더 상태 알림이 시각 상태와 어긋나지 않는다.

저는 이런 버그를 CSS 한 줄로만 보지 않습니다. 상태 문자열 테스트가 빠진 UI 버그에 가깝습니다. 특히 번역이 있는 제품이면 라벨 샘플을 먼저 모아야 합니다. 버튼은 작지만, 사용자는 이런 작은 흔들림에서 제품이 단단한지 먼저 느끼거든요.

모바일 버튼 라벨이 바뀔 때 레이아웃이 밀리는 이유

// COMMENTS

ON THIS PAGE