테크레시피

구글 검색 결과 페이지 다음 버튼 관련 버그 원인은…

여러 IT 기업을 설립한 리 강(Li Kang)이 구글 검색결과 페이지 하단에 표시되는 다음 텍스트가 일부 언어에서 제대로 표시되지 않는 버그 원인을 분석했다.

그는 몇 달 전 이 버그를 발견했지만 설치된 크롬 확장 프로그램 중 하나가 원인일 것이라 생각하고 그대로 뒀다. 이후 새로운 브라우저 프로필을 설정해 문제를 재현해보니 사이트 자체에 문제가 있다는 것을 발견했다.

구체적인 버그 내용은 다음과 같다. 구글 검색결과 페이지 최하단에는 > 표시와 다음 텍스트로 다음 페이지로의 링크가 표시된다. 이 표시와 텍스트의 배치는 브라우저 너비에 따라 배열이 변하지만 중국어 다음에 해당하는 ‘下一页’ 텍스트가 이상하게 줄바꿈된다.

그가 자세히 조사한 결과 이른바 CJK(중국어, 일본어, 한국어)는 텍스트 렌더링에 있어 영어와는 다른 특성이 있다는 것을 발견했다. > 표시 옆에 글자를 표시할 너비가 없는 경우 글자는 완전히 아래로 내려간다. 하단에 글자를 표시할 공간이 충분해도 > 표시 옆에 한 글자 분량 너비가 있으면 글자가 위로 올라가버린다.

이 버그는 중국어에서 발생했지만 너비에 따라 일본어에서도 같은 문제가 발생한다. 반면 영어에서는 단어 중간에서 줄바꿈이 발생하지 않는다. > 표시 옆에 충분한 너비가 있으면 모든 텍스트가 표시 옆으로 이동한다.

구글과 같이 사용자가 많은 사이트에서 이 버그가 오랫동안 수정되지 않은 이유에 대해 그는 영어 외 언어 고유 동작으로 테스트에서 발견되기 어려움, CJK 특유의 줄바꿈 규칙, 특정 표시 너비에서만 버그가 발생함 등을 언급했다.

이번 버그 수정을 위해서는 > 표시 float 설정을 삭제하거나 텍스트 span 태그에 clear: left를 설정하면 된다고 한다.

또 그는 글자 높이가 일치하지 않는 문제도 지적했다. 이는 라틴계 언어와 그 외 언어 font-family 불일치가 원인이며 font-family를 일치시키거나 line-height를 통일하면 수정할 수 있다고 한다. 관련 내용은 이곳에서 확인할 수 있다.

추천기사