UI 가이드요소
포커스 링Focus Ring
포커스 링은 키보드로 화면을 이동할 때 지금 어느 요소에 있는지 보여주는 테두리입니다. 마우스 없이 쓰는 사람에게 커서 역할을 하며, 없애면 키보드 사용자가 길을 잃습니다.
- 이렇게 생겼습니다
- Tab 키를 누르면 버튼이나 입력창 둘레에 생기는 파란 테두리.
- 프롬프트에 쓰는 이름
- Focus Ring · 다른 이름: 포커스 표시, Focus Indicator, 아웃라인, outline, 포커스 스타일
키보드에는 마우스 커서가 없습니다. 대신 포커스라는 보이지 않는 위치가 있고, 포커스 링은 그 위치를 눈에 보이게 그린 것입니다. Tab 으로 다음 요소, Shift+Tab 으로 이전 요소, Enter·Space 로 실행. 이 세 가지만으로 화면 전체를 쓸 수 있어야 합니다.
폼 안을 한 번 클릭한 뒤 Tab 을 눌러 보세요. 키보드로 옮길 때만 링이 그려지고, 마우스로 누를 때는 안 그려집니다.
언제 쓰나요
항상 있어야 합니다. 이것은 넣을지 말지 정하는 요소가 아니라 지우면 안 되는 요소입니다. 브라우저가 기본으로 그려 주는데, 디자인이 "지저분하다"며 outline: none 으로 지우는 것이 가장 흔한 사고입니다.
깔끔하게 만드는 방법은 지우는 것이 아니라 마우스 클릭 때는 안 보이고 키보드 때만 보이게 하는 것입니다. CSS :focus-visible 이 그 구분을 해 줍니다. 이 사이트는 액센트 색 2px 링을 요소 밖으로 5px 띄워 그립니다.
AI에게 시키기
사이트 전체의 포커스 링을 정리해줘.
- outline: none 으로 지운 곳이 있으면 전부 되돌려
- :focus-visible 에서만 보이게 (마우스 클릭 시엔 안 보이고, 키보드 이동 시엔 보이게)
- 링은 브랜드 액센트 색 2px, 요소 밖으로 2px 띄우고, 어두운 배경 위에서도 보이게 대비 확인
- Tab 순서가 화면 순서와 같은지 확인하고, 모달이 열리면 포커스가 모달 안으로 들어가게
"포커스 테두리 없애줘"라는 요청은 받아 주면 안 됩니다. 대신 :focus-visible 로 바꿔 달라고 합니다.
혼동 주의
- 호버(Hover): 마우스를 올렸을 때의 상태입니다. 포커스는 키보드 위치입니다. 둘은 동시에 다른 요소에 있을 수 있습니다.
- 선택(Selected)·활성(Active): 탭이나 목록에서 "지금 고른 것"입니다. 포커스는 "지금 키보드가 있는 곳"이고, 고른 것과 다를 수 있습니다.
:focus와:focus-visible: 전자는 클릭해도 켜지고, 후자는 브라우저가 "키보드로 왔다"고 판단할 때만 켜집니다. 링은 후자에 겁니다.- 포커스 트랩(Focus Trap): 모달이 열렸을 때 Tab 이 모달 밖으로 새지 않게 가두는 것입니다. 링과 짝을 이룹니다.