검색창에 커서를 기본으로 놓기

이 글에서 소개한 결정은, “검색창에 커서를 기본으로 놓지 않기”라는 글을 통해 정정했습니다. 반드시 같이 보세요.

——

레프트21 웹마스터는 기술도 중요하지만, 기획을 꼼꼼히 생각해야 합니다. 그래서 웹기획에 관한 책을 많이 읽고 있어요. 물론 기술서적도 많이 봅니다만.

최근에는 교보문고에 갔다가 《웹기획, 사용자를 배려하는 합리적인 생각》이라는 책을 발견했죠. 그래서 이쁘게 사진으로 표지를 찍은 후 도서관에서 책을 빌렸답니다. ^^

가볍게 읽을 수 있는 내용들로 구성돼 있고, 기본적인 것들이지만 놓치기 쉬운 부분들에 대해 지적을 해 주고 있었어요.

회원가입이나 로그인 등에 대해서도 잘 이야기를 하고 있었는데, 레프트21에는 회원가입 기능이 없기 때문에 적용할 만한 것은 없었고요, 검색 부분에서 적용해야겠다 싶은 게 있었습니다.

검색창에 커서를

책에 나온 것을 부분인용해 보죠.</p>

포털 서비스 못지않게 사람들이 많이 방문하는 뉴스 사이트의 경우 화면상에서 쭉 훑어보며 기사를 읽지만, 필요한 뉴스는 검색을 통해서 찾기도 한다. 하지만 국내 유수의 뉴스 사이트들 중 그 어느 곳에서도 검색창에 커서가 기본값으로 설정되어 있는 곳을 찾을 수가 없었다. 그렇다고 해서 이런 사이트들이 로그인을 자주 해야 하는 사이트라 그렇게 해둔 것도 아니고, 검색 사용성이 향상될 수 있는데 모두 되어 있지가 않다.

위의 책, 95페이지

이 말을 듣고 보니 그렇죠. 레프트21에서 뭔가 입력하는 곳은, 메일링 리스트를 받는 곳, 정기구독과 후원. 여기밖에 없습니다. 가장 많이 사용하는 입력은 바로 검색이죠.

그래서 ‘국내 유수의 뉴스 사이트들 중 그 어느 곳에서도 검색창에 커서가 기본값으로 설정되어 있는 곳을 찾을 수가 없었’다고 하는데, 그 ‘국내 유수의 뉴스 사이트들’이 하지 못한 걸 어제 레프트21이 했습니다. ㅋㅋㅋ

화면에 보시면 알겠지만, 사이트 들어가자마자 커서가 검색창에서 깜빡거리고 있는 것을 볼 수 있을 것입니다.

소스

이 부분은 개발 소스 부분입니다. 관심 없는 분은 읽지 않으셔도 됩니다.

커서를 입력창에 놓는 것을 포커스를 준다고 표현하죠.

자바 스크립트 명령어도 같습니다. 레프트21에서는 아래와 같이 표현했습니다.

$('#defaultSearch input.text').focus();

어익후… 예로 들고 나니 이거 jQuery를 사용할 줄 알아야 이해할 수 있는 게 섞여 있군요.

그냥 아래처럼 하셔도 됩니다.

document.getElementById('inputIdName').focus();

그럼 이만…