Auto Focus

폼이 페이지의 주된 목적인 곳에서는 첫 폼 요소에 autoFocus를 걸어 사용자가 진입 직후 바로 입력을 시작할 수 있게 합니다.

클릭·터치 한 단계를 생략하는 작은 UX입니다.

1. 적용 기준

✅ 폼 중심 페이지 — 로그인, 회원가입, 게시글 쓰기, 검색 전용 페이지 등. 다중 필드 폼이어도 첫 필드에만 걸면 충분합니다.

❌ 콘텐츠를 스크롤로 소비하는 페이지 — 검색 결과, 피드, 기사 + 하단 댓글 폼 등. 재진입 시 복원된 스크롤을 input 포커스가 가로채 탐색 흐름이 깨집니다.

2. HTML autoFocus 속성

HTML 표준 속성 하나로 끝납니다. 별도 구현이 필요 없습니다.

<form>
  <Input autoFocus placeholder="이메일" />
  <Input placeholder="비밀번호" type="password" />
  <button type="submit">로그인</button>
</form>

실험 중 — 탭 복귀 시 재포커스

다른 탭/앱에 갔다가 돌아왔을 때도 해당 input에 다시 포커스를 주면 더 편할 것 같아 시도해봤습니다. window의 focus 이벤트에서 [autofocus] 요소를 재포커스하는 방식이고, 이 페이지 상단 데모에서 실제로 동작합니다.

useEffect(() => {
  function handleFocus() {
    const element = document.querySelector<HTMLElement>('[autofocus]');
    element?.focus();
  }

  window.addEventListener('focus', handleFocus);
  return () => window.removeEventListener('focus', handleFocus);
}, []);

발견한 엣지 케이스

• 로그인처럼 여러 필드가 있는 폼에서 password 필드로 이동한 뒤 다른 탭에 다녀오면, 포커스가 첫 필드인 email로 되돌아가 사용자가 진행하던 위치를 잃습니다.

• 검색 결과 페이지처럼 스크롤로 소비하는 곳에서는 다른 탭에 다녀왔을 때 스크롤이 input 위치로 튑니다.

좁힌 적용 조건

아래를 모두 충족할 때만 재포커스:

• 페이지 내 [autofocus] 요소가 1개

• 그 요소의 부모 <form> 안에 <input> / <textarea> 총 갯수가 1개

• 복귀 시점의 스크롤이 최상단

그럼에도 아직 고려하지 못한 다른 엣지 케이스가 있을 것 같아, 실제 프로덕션 도입은 보류 중입니다.