헤더 검색 — 아이콘과 검색 시트
히어로 검색창이 화면 밖으로 나가면 헤더에 돋보기 아이콘이 나타납니다. 누르면 검색 시트가 열립니다. 데스크톱·태블릿·모바일 모두 같은 방식이고, 폭에 따라 시트의 크기만 다릅니다.
데스크톱 헤더
위 — 맨 위에 있을 때 · 아래 — 히어로가 화면 밖으로 나간 뒤
헤더는 스크롤해도 위에 붙어 있습니다. 아이콘은 처음부터 두지 않고 히어로가 벗어난 뒤에 나타납니다 — 맨 위에서는 바로 아래 큰 검색창이 있어 같은 것이 둘이 되기 때문입니다. 나타날 때 헤더에 옅은 그림자가 함께 생겨 페이지가 스크롤된 상태임을 알려 줍니다.
데스크톱 검색 시트
아이콘을 누른 뒤 · 640px 카드
최근에 찾아봤어요
지금 많이 찾는
4
무명연대장–
입력칸은 열리자마자 바로 칠 수 있는 상태입니다. 아직 아무것도 안 쳤을 때는 최근 검색과 「지금 많이 찾는」 다섯을 보여줍니다 — 홈의 검색 랭킹과 같은 데이터라 새로 만들 것이 없고, 빈 시트를 마주하지 않게 합니다. ESC 나 바깥을 누르면 닫힙니다.
모바일
헤더 두 상태와 전체 화면 시트
모바일 헤더에는 입력칸을 넣지 않았습니다. 390px 안에 로고·햄버거가 이미 있어 셋 다 옹색해지고, 어차피 눌러야 키보드가 올라오기 때문입니다. 아이콘과 햄버거 모두 44px 입니다.
최근에 찾아봤어요
지금 많이 찾는
4
무명연대장–
시트에서 정한 것
- 모바일은 전체 화면입니다. 반쯤 덮는 시트로 만들면 키보드가 올라왔을 때 남는 높이가 너무 작습니다.
- 가짜 키보드는 그리지 않았습니다. 실제 기기에서는 아래쪽에 진짜 키보드가 올라와 목록을 가립니다 — 그래서 최근 검색을 위쪽에 뒀습니다.
- 닫기는 데스크톱 ESC · 바깥 누르기, 모바일 「취소」 입니다. 뒤로 가기로도 닫히게 하는 편이 좋습니다.
- 최근 검색 줄의 X 는 그 기록만 지웁니다. 모바일에서는 44px 로 키웠습니다.
- 글자를 치기 시작하면 이 두 목록 자리에 자동완성 결과가 들어옵니다. 그 화면은 아직 그리지 않았습니다.