휴대용 기기를 위해 사이트를 좀 더 최적화하기
작성자: Wesley 작성일:
내비게이션 막대에 제목을 붙이고 메뉴 안으로 언어 선택란이 들어갔습니다
지난 며칠 동안 사이트를 주시했다면 앞서 몇 가지 수정한 사항 외에도 추가적인 수정이 이루어졌다는 것을 눈치채셨을 것입니다. 가장 눈에 띄는 부분은 사이트 메뉴가 제대로 다중언어를 지원하도록 하부 코드를 고친 것인데, 이제 선택한 언어로만 메뉴 글귀가 나옵니다. 또한, 태그 표시 기능에 한국어 지원을 추가했습니다. 그런데 휴대용 기기 사용자들에게서 받은 몇몇 요청사항을 무시할 수 없어서 여기서 끝내지 않았습니다.
반응형 웹 디자인을 쓰게 되면 기본 내용 곁에 항상 붙어있던 옆줄 부분이 휴대용 기기로 대표되는 폭 좁은 화면에서 맨 아래로 밀려납니다. 그렇기 때문에 스마트폰으로 사이트를 보게 되면 이런 옆줄에 담긴 기능을 찾아보기 힘들게 됩니다.
저는 이 문제를 해소하기 위해 기본적인 디자인을 유지하면서 옆줄에 넣어두었던 요소 몇 가지를 사이트 상단으로 이동시키는 작업을 하기로 했습니다. 일단 언어 선택상자를 작업해보기로 했는데, 이리저리 실험을 해본 후 사이트 메뉴의 첫번째 항목으로 추가시켰습니다. 이렇게 하니 여기서 보시듯이 휴대기기용 화면의 내비게이션에서도 괜찮게 나타났습니다.
그러나 아쉽게도 내비게이션 막대 자체가 접힌 상태로 내용을 모두 숨기고 있을 때에는 여기서 사이트 언어를 바꿀 수 있다는 사실을 사용자가 알 수 없었습니다. 그래서 제목을 추가함으로서 첫 방문자도 인지할 수 있도록 했습니다.
다음은 배너 영역에 나타나는 검색상자를 보기로 했습니다. 새 테마에서 사용하고 있던 것은 내부적인 "퀵서치" 기능을 활용하는 방식이었는데, 찾던 글을 잘 정리해서 보여주기는 하지만 실제로는 무척 느리고 태그 기능과 잘 작동하지 않는다는 문제가 있었습니다. 그래서 이 부분을 원래 옆줄에 넣어두었던 구글 맞춤검색엔진으로 대체하기로 했습니다.
각 요소들이 새 위치에 자리잡은 뒤에는 옆줄에 중복으로 있던 요소를 제거했습니다. 지금은 이것으로 마무리하지만, 혹시 또 다른 제안을 하고 싶으시다면 덧글을 달아주세요.