LLMs 및 vibe 코더를 위한 웹 인터페이스 가이드라인 체크리스트!
발행: (2026년 1월 17일 오전 03:40 GMT+9)
9 min read
원문: Dev.to
Source: Dev.to
위에 제공된 링크 외에 번역할 텍스트가 포함되어 있지 않습니다. 번역이 필요한 전체 내용(마크다운 형식 포함)을 제공해 주시면 한국어로 번역해 드리겠습니다.
- 키보드가 모든 곳에서 작동함 (WAI‑ARIA 패턴)
- 명확한 포커스 링 (
:focus-visible) - 포커스 관리 (트랩, 이동, 반환)
- 시각적 및 클릭 대상 일치 (데스크톱 ≥ 24 px, 모바일 ≥ 44 px)
- 모바일 입력 폰트 ≥ 16 px
- 확대/축소 절대 비활성화 금지
- 하이드레이션 안전 입력
- 붙여넣기 차단 금지
- 로딩 중인 버튼은 표시기 + 원래 라벨 표시
- 최소 로딩 지속 시간 (150‑300 ms 지연, 300‑500 ms 최소)
- URL을 상태로 사용 (공유 가능, 새로 고침 가능)
- 롤백 가능한 낙관적 업데이트
- 추가 입력 및 로딩 상태에 대한 줄임표
- 파괴적 행동 확인
- 컨트롤에
touch-action: manipulation적용 -
-webkit-tap-highlight-color설정 - 넉넉한 클릭 대상, 예측 가능한 상호작용
- 첫 툴팁 지연, 동료 요소는 지연 없음
- 모달/드로어에
overscroll-behavior: contain적용 - 뒤로/앞으로 이동 시 스크롤 위치 유지
- 데스크톱에서 단일 입력 자동 포커스 (모바일은 드물게)
- 사각지대 없음 – 인터랙티브 요소가 인터랙티브하게 보임
- 모든 요소에 딥링크 적용 (필터, 탭, 패널)
- 깔끔한 드래그 상호작용 (선택 비활성화,
inert사용) - 링크는
<a>또는<button>(버튼/디브가 아님) - 비동기 업데이트 알리기 (
aria-live) - 로케일 인식 키보드 단축키
-
prefers-reduced-motion존중
애니메이션
- CSS > Web Animations API > JS 라이브러리를 선호
- GPU 가속 속성 (
transform,opacity) - 명확성 또는 즐거움을 위해서만 애니메이션 적용
- 이징은 주제에 맞게 선택
- 사용자 입력에 의해 중단 가능
- 자동 재생이 아니라 입력에 의해 구동
- 올바른
transform-origin사용 - 절대
transition: all사용 금지 (명시적인 속성만) -
<svg>래퍼에transform-box: fill-box와 함께 SVG 변환 적용
Layout
- 광학 정렬 (± 1 px 조정)
- 의도된 정렬 (그리드, 기준선, 가장자리, 중앙)
- 텍스트/아이콘 결합에서 대비 균형 맞추기
- 모바일, 노트북, 초광각 화면에서 테스트
- 안전 영역(노치, 인셋) 존중
- 과도한 스크롤바 금지
- 브라우저가 크기를 조정하도록 함 (JS보다 flex/grid 사용)
- 인라인 도움말을 먼저, 툴팁은 나중에
- 안정적인 스켈레톤이 최종 콘텐츠를 반영
- 정확한
<title>이 컨텍스트를 반영 - 막다른 길 없음(다음 단계 또는 복구)
- 모든 상태 설계(빈 상태, 희박, 밀집, 오류)
- 곱슬 따옴표(“ ”) 사용
- 고아/고아줄 방지
- 비교를 위한 표 형식 숫자 사용
- 중복 상태 표시(색상만 사용 금지)
- 아이콘에 텍스트 라벨 부여
- 라벨이 숨겨져 있어도 접근 가능한 이름 존재
- 줄임표 문자(
…) 사용, 세 개의 마침표는 사용하지 않음 - 헤딩에
scroll-margin-top적용 - 짧은, 보통, 긴 콘텐츠를 부드럽게 처리
- 로케일 인식 형식(날짜, 숫자, 통화)
- 언어는
Accept-Language로 판단, IP/GPS 사용 금지 - 정확한
aria-label,aria-hidden사용 - 아이콘 전용 버튼에
aria-label부여 - ARIA보다 시맨틱 우선(네이티브 요소 먼저)
- 계층적
<nav>+ 스킵 링크 - 로고 오른쪽 클릭으로 브랜드 리소스 제공
- 붙어 있는 용어에 비분리 공백(
⁠) 사용 - Enter 키로 제출(단일 입력 또는 마지막 컨트롤)
- 텍스트 영역: ⌘/⌃ + Enter 제출, Enter = 새 줄
- 모든 컨트롤에
<label>또는 연관성 부여 - 라벨 클릭 시 해당 컨트롤에 포커스
- 제출은 진행 중일 때까지 활성화(스피너 + 멱등 키)
- 타이핑을 차단하지 않음(검증은 하되 제한은 하지 않음)
- 사전 비활성화 제출 금지(표면 검증)
- 체크박스/라디오에 사각지대 없음
- 필드 옆에 오류 표시, 제출 시 첫 오류에 포커스
-
autocomplete및 의미 있는name설정 - 이메일, 코드, 사용자명에 대해 맞춤법 검사 비활성화
- 올바른
type및inputmode사용 - 플레이스홀더는 줄임표로 끝나고 예시 표시
- 저장되지 않은 변경 사항이 있을 때 네비게이션 전 경고
- 비밀번호 관리자 및 2FA 호환
- 인증이 아닌 필드에서 비밀번호 관리자를 트리거하지 않음
- 입력값의 뒤쪽 공백 제거
-
<input>에background-color와color설정
Performance
- iOS 저전력 모드 및 macOS Safari 테스트
- 프로파일링 시 확장 프로그램 비활성화
- 재렌더링 추적 (React DevTools, React Scan)
- 프로파일링 시 CPU/네트워크 제한
- 레이아웃 작업 최소화 (읽기/쓰기 배치)
-
POST/PATCH/DELETE<link rel="preload">자산/CDN 도메인용 - 중요한 폰트 사전 로드
- 폰트 서브셋(
unicode-range) 적용 - 무거운 작업을 Web Workers에서 수행
- 레이어드 그림자(ambient + direct)
- 선명한 테두리 + 그림자
- 중첩 반경(자식 ≤ 부모, 동심)
- 비중립 배경에서 색조 일관성 유지
- 색맹 친화적인 차트 팔레트
- 대비를 위해 WCAG 2보다 APCA 선호
- 상호작용 시 대비 증가
-
<meta name="color-scheme">설정 - 다크 테마를 위해
<html>에color-scheme: dark설정 - 텍스트 노드가 아니라 래퍼를 애니메이션(또는
translateZ(0)) - 그라디언트 밴딩 방지(배경 이미지 사용)
Copywriting & Content
- 능동태
- 헤딩/버튼: 타이틀 케이스 (시카고 스타일)
- 마케팅 페이지: 문장형 대소문자
- 명확하고 간결하게
- 적절할 때 “and”보다 “&” 사용
- 행동 지향 언어
- 명사는 일관되게 유지
- 2인칭 사용, 1인칭 금지
- 일관된 플레이스홀더 사용 (예:
YOUR_API_TOKEN_HERE,0123456789) - 개수는 숫자 사용
- 통화 형식 일관성 유지 (소수점 0자리 또는 2자리, 혼용 금지)
- 숫자와 단위 사이에 공백 (
10 MB, - 기본적으로 긍정적인 언어 사용
- 오류 메시지는 종료를 안내
- 모호성 방지 (구체적인 라벨 사용)