브라우저 기본 동작을 존중하기

왜 기본 동작을 건드리지 않나

사람은 디지털 시스템에게 거부당했다고 느낄 때도 실제 사람에게 따돌림당한 것처럼 화와 무력감을 느낀다(사이버볼 실험). 웹에서 그 "거부"는 익숙하던 조작이 갑자기 통하지 않을 때 생긴다.

스크롤바, 선택 강조색, 글자 크기 설정은 웹사이트가 아니라 OS와 브라우저의 인터페이스다. 모든 앱에서 같은 모양으로 같은 일을 한다. 이것을 외부 일관성(external consistency)이라 한다. 벽 스위치를 누르면 어느 집에서나 불이 켜지는 것과 같다. 하드웨어·OS·브라우저·웹페이지·모달이라는 층을 구분하지 못하는 사용자에게는 이 일관성이 유일한 기준점이다. 사이트가 이것을 바꾸면 그 기준점이 사라진다.

기능별 원칙

기능	하지 말 것	대신 할 것
스크롤바	색·모양을 바꾸거나 JS로 스크롤바를 다시 만든다	OS 기본을 둔다. 꼭 맞춰야 하면 `scrollbar-color`로 색만 바꾸고 대비를 확인한다
스크롤 동작	스크롤 양과 이동 거리를 바꾸는 스크롤재킹(scrolljacking)	스크롤에 맞춰 콘텐츠가 바뀌는 스크롤리텔링은 괜찮다. 스크롤 자체는 건드리지 않는다
선택 강조색	`::selection`으로 브랜드색을 덮어 대비를 낮춘다	사용자가 OS에서 고른 강조색을 둔다
글자 크기	자체 "글자 크기 조절" 위젯을 만든다	기본 글자를 충분히 키우고, `rem`·단위 없는 `line-height`로 브라우저 설정을 따르게 한다
고대비	디자이너가 정한 "고대비 테마" 하나를 준다	기본 대비부터 고친다. 테마를 준다면 여러 개를 주고, OS 강제 색 모드(`forced-colors`)를 깨지 않는다
키보드 포커스	`autofocus`로 첫 입력칸에 옮기고, `tabindex`로 순서를 바꾼다	사용자가 요청할 때만 옮긴다(예: 모달을 열면 모달 안으로). 시각 순서대로 HTML을 쓴다
클립보드	복사를 막거나 복사한 내용에 문구를 덧붙인다	건드리지 않는다
방문 기록	뒤로 가기를 가로챈다	브라우저에 맡긴다. SPA는 URL과 기록을 실제 화면과 맞춘다

글자 크기 위젯이 나쁜 이유

브라우저의 글자 크기 설정은 모든 사이트에서 같은 단축키로 동작하고, 다음 방문에도 유지된다. 사이트 위젯은 그 사이트에서만, 그 사이트 방식대로 동작한다. 큰 글자가 필요한 사람이 장애인만도 아니다. 흐린 회의실 프로젝터 앞에서는 누구나 필요하다. 좋은 브랜드는 글자 크기가 바뀌어도 흐름·타이포그래피·문장의 힘으로 드러난다.

키보드 포커스 팁

상호작용 요소(a, button, input, select, summary, textarea)에 tabindex를 붙이지 않는다.
양수 tabindex로 순서를 바꾸지 않는다. 화면 순서대로 마크업하면 DOM 순서가 곧 탭 순서가 된다. 모바일 우선으로 마크업하면 자연히 맞는다.
제목과 랜드마크를 갖춰 보조 기술 사용자가 원하는 곳으로 뛰어갈 수 있게 한다(시맨틱 HTML).

기본 위에 더하는 것은 괜찮다

"맨 위로" 버튼은 기본 동작을 바꾸지 않고 선택지를 하나 더한다. 노트북에는 Home 키가 없고, iOS의 상태 표시줄 탭은 잘 알려져 있지 않으니 쓸모가 있다. 다만 다음을 지킨다.

항목	내용
움직임 줄이기	`prefers-reduced-motion`이면 부드러운 스크롤 대신 바로 이동한다. 긴 거리를 빠르게 움직이면 어지럼을 일으킬 수 있다
포커스도 이동	화면만 올리지 말고 키보드 포커스도 문서 맨 위로 옮긴다
가리지 않기	확대한 상태에서도 버튼이 콘텐츠를 덮지 않는지 본다
고정 요소 충돌	챗봇·플로팅 버튼과 같은 자리를 다투지 않게 한다

이 버튼이 자주 눌린다면 페이지가 너무 길다는 신호다. 정보 구조부터 다시 본다.

정리

스크롤바·강조색·글자 크기·포커스·클립보드·방문 기록은 사용자의 것이다.
외부 일관성이 깨지면 익숙하지 않은 사용자부터 밀려난다.
바꾸고 싶은 시간에 대비와 기본 글자 크기를 고친다.
포커스는 사용자가 요청할 때만 옮기고, 탭 순서는 마크업 순서로 정한다.
기능을 더할 수는 있지만 기본을 덮지는 않는다. 가끔은 가만히 두는 것이 최선이다.

버그 제보