[AI 활용법 10] 모바일 퍼스트와 접근성 — AI에게 _기본값_ 으로 시키는 법

시리즈 10편. 모바일과 접근성은 나중에 추가 가 아니라 처음부터의 기본값 이다. 명시하지 않으면 LLM은 둘 다 빼먹는다.

모바일 퍼스트 — 320px가 기준

프로토타입이 1280px로 시작되면 모바일 대응이 리팩터링 이 된다. 반대로 320px부터 시작하면 큰 화면 대응은 확장 이다.

CSS 단위는 고정 픽셀을 남용하지 않는다. rem, em, %, vw, clamp()를 적극.

/* bad — breaks on small screens */
.heading { font-size: 32px; }

/* good — scales naturally */
.heading { font-size: clamp(1.25rem, 2.5vw + 1rem, 2rem); }

터치 영역 — 44 × 44px

WCAG 2.5.5, Apple HIG, Material 모두 44 × 44px(Material은 48dp) 을 권장한다. 작은 아이콘 버튼이 그림은 16px 이라도 누를 수 있는 영역 은 44px 이상이어야 한다.

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  44px;
  height: 44px;
}

손가락은 마우스 커서 보다 훨씬 두껍다.

Safe area — 노치, 홈 인디케이터

iOS 노치, 안드로이드 동작 인디케이터를 피해 컨텐츠를 배치:

.app-shell {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

<meta name="viewport" content="…, viewport-fit=cover">도 잊지 않는다.

가로 스크롤 금지

의도치 않은 가로 스크롤은 모바일에서 가장 쉬운 사고. 원인 두 가지:

• 너비가 부모 보다 큰 자식 (특히 긴 단어, URL)
• width: 100vw로 잡았는데 스크롤바 너비를 빼지 않음

body { overflow-x: hidden; }
img, table, pre { max-width: 100%; }
.text { word-break: break-word; overflow-wrap: anywhere; }

접근성 — 시맨틱 HTML 우선

ARIA를 쓰기 전에, 시맨틱 HTML 을 쓴다. 가장 많이 깨지는 패턴:

<!-- bad -->
<div class="btn" onclick="...">Save</div>

<!-- good -->
<button type="button" onclick="...">Save</button>

<button>은 포커스 가능, Enter/Space로 활성, 스크린 리더 발음, disabled 상태 가 모두 무료. <div onclick>은 이 모두를 직접 만들어야 한다 — 거의 항상 빠진다.

키보드만으로 다 되는가

마우스 없이 Tab 만으로 모든 핵심 인터랙션을 할 수 있는가? 다음 점검:

• 모든 인터랙티브 요소가 Tab 순서에 들어가는가
• 포커스 링이 제거되지 않았는가 (outline: none 단독 금지)
• 모달이 열리면 포커스가 그 안으로 가는가, 닫히면 트리거로 돌아가는가
• 단축키와 시각적 라벨이 일치하는가

가장 좋은 a11y 테스트는 마우스를 빼는 것. 5분만 해 봐도 80%의 문제가 보인다.

색 대비 — WCAG AA

본문 텍스트 대 배경 4.5:1 이상 (큰 텍스트는 3:1). 이 한 숫자만 통과해도 절반은 끝난다.

색상으로만 정보 전달하지 마라. 빨강 = “에러”는 색맹이 못 본다. 색 + 아이콘 + 텍스트 조합.

prefers-reduced-motion

전정 신경계 민감자에게 모션은 고통 이다. CSS 미디어 쿼리로 존중:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

LLM이 만든 화려한 transition을 자동으로 죽여 준다.

폰트 크기 — 사용자 설정 존중

px로 절대 크기를 박지 마라. 사용자가 브라우저에서 글자 크기를 키우면 그게 적용 되어야 한다. 본문은 1rem 이상, 작은 텍스트도 0.875rem 이상.

i18n — 하드코딩 금지

사용자 노출 문자열은 코드에 박지 마라. 키 + 사전 분리.

// bad
<button>저장</button>

// good
<button>{t("common.save")}</button>

Date/숫자/통화는 Intl.DateTimeFormat, Intl.NumberFormat. 영어로 만들고 나중에 번역 하지 말고, 처음부터 번역 가능한 구조 로.

검증 체크리스트 — AI에게 보내는 한 줄

작업 끝났을 때 LLM에게 다음을 명시적으로 시킨다:

[검증]
- 320px / 768px / 1280px 세 뷰포트에서 깨지지 않는가
- 키보드만으로 핵심 인터랙션 완수되는가
- 색만으로 정보 전달하지 않았는가
- 본문 대비 4.5:1 이상인가
- prefers-reduced-motion 존중하는가
- 모든 사용자 노출 문자열이 i18n 가능한가

이걸 응답 마지막에 자체 점검 으로 출력하게 만들면, 빠진 항목이 보이게 된다.

한 줄 요약

모바일과 접근성은 마지막에 추가하는 비용 이 가장 비싼 항목들. 처음부터 기본값으로.

다음 편: AI 활용법 11 — 보안과 시크릿 관리 이전 편: AI 활용법 9 — UI의 5가지 상태