Frudy
6k
2020-10-21 22:10:47 작성 2020-10-21 22:21:10 수정됨
2
1017

웹 페이지 포커스 컨트롤하기.


제가 지키고 있는 규칙을 사례별로 작성할게요.


1. 페이지 첫 로딩시 포커스 시킬 요소가 있는지 살펴보기



네이버 이메일 작성폼이에요.

여기 페이지에 들어오는 사용자의 목적은, 이메일을 작성하는거에요.



네이버 로그인 페이지에요.

마찬가지로 여기 페이지 오는 사용자는, 로그인하러 온 사용자에요.


둘 다 공통점은, 페이지 로딩되고나서 알아서 입력창에 focus가 되있어요.

사용자가 마우스나 Tab키같은걸로 움직여서 저 입력창에 포커스를 맞추는 수고를 덜었죠.


https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/autofocus


이것은, html input의 autofocus attribute로 손쉽게 구현할 수 있어요.


그래서 저는, 웹 페이지를 개발할 때,

입력박스를 쓸 일이 있으면 autofocus를 사용해야하는 웹페이지인지 한번씩 고민해봐요.


네이버 홈페이지는 처음 웹페이지 로딩시 검색창에 포커스가 가있는데,

글쎄요 저라면 안할거같긴하지만..



2. 입력을 완료한 다음에 포커스 줄 요소가 있는지 살펴보기


네이버는, 로그인폼에서 아이디 입력박스에서 뭔가 입력하고 엔터치면,

비밀번호 입력창으로 포커스를 주도록 구현되어있어요.


사용자는 입력을 완료했다는 의도로 엔터키를 누른다고 생각해요.

https://en.wikipedia.org/wiki/Enter_key


그래서, 저는 네이버처럼 똑같이 비밀번호 입력박스로

무조건 포커스를 이동시키는게 더 좋은지 까지는 모르겠지만,

(아이디 양식이 틀리면 포커스를 아이디에 머무르게 구현하는 편이에요)


어쩄든 입력요소에서 엔터쳤을 때 포커스 다음으로 이동시켜줄게 있는지 고려를 해보는 편이에요.



3. 모달이 뜬 다음에 포커스를 줄 요소가 있는지 살펴보기


이것은 1번과 연장선인대요,


모달이 떴는데 모달에 뭔가 입력하는게 있으면,


"모달이 뜨고 난 다음에" 입력 요소에 포커스를 주게되면

1번과 동일한 이유로 사용자가 편할거에요.


그래서 이경우에도 고려를 한번씩 해보고있어요.



생각보다 기본적이고 해주면 사용자가 편한데,

제가 이런것도 모르고 프론트앤드 개발을 해왔다는게... ㅠㅠㅠ

(저 3가지 지키게 된지 얼마 안됬어요)


혹시 또 저 3가지 경우 말고도 포커스 제어를 해주면 사용자가 편한경우가 또 있는지,

아시는분이 계시면 공유 부탁드립니다.

0
  • 댓글 2

  • webmajm
    472
    2020-10-22 09:52:09
    tabindex 도 고려해서 구성하면 더 좋죠~
  • Frudy
    6k
    2020-10-22 12:56:42

    오........

    안그래도 제가 몰라서못하고있는 포커스 컨트롤 방법이었는데


    이런게 있었다는걸 처음알았어요.


    어떻게하면 웹페이지를 키보드만으로 이용이 가능하게 할수있을지 도무지몰랐거든요.


    그중 하나가 tabindex네요. 사용법 익혀보겠습니다.

    지식나눠주셔서 감사합니다.

  • 로그인을 하시면 댓글 을 등록할 수 있습니다.