크롬브라우져에서 워드프레스 사용 시 한글에 콜론(:)이 생길 때

by Jinn

크롬브라우져에서 사용 시 특정테마에서 한글에 콜론이 나타날 때

유료테마 또는 특정테마를 사용할 때 한글이 들어간 부분에 콜론(:) 이 나타나는 현상이 있습니다. 유료테마를 사용해 본 적이 없어 실제 겪어 보지는 못했지만, 워드프레스의 기본테마인 twenty twelve 테마가 위의 그림처럼 이러한 문제를 가지고 있습니다.

twenty twelve 테마를 기준으로 아래와 같이 원인과 해결책을 나열해 봅니다. 원인은 관련 이슈에 대한 여러 검색 결과를 토대로 결론 내린 것임을 참고하세요.

크롬브라우져의 버그

짐작이긴 하지만, 트위터 같은 특정 사이트에서도 관련 현상이 크롬브라우져에서만 나타나며, 그 외의 브라우져에서는 전혀 볼 수 없습니다.

크롬브라우져에서 트위터 페이지를 볼 때 한글에 나타나는 콜론

테마의 style.css 의 코드 수정

아래와 같은 부분을 테마의 style.css 파일에서 찾습니다.

// style.css
text-rendering: optimizeLegibility;

아래의 코드로 대체하거나 삭제 또는 비활성화합니다.

text-rendering: auto;
/* auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit; */

text-rendering에 대한 좀 더 상세한 내용이 알고 싶으시면 아래의 링크나 검색을 통해 얻으세요.

text-rendering

댓글 20

  2. 유료테마를 실무에 많이 적용하고 있는데요. 워드프레스 버전업이나 브라우저 및 디바이스가 버전업이 되면 유료테마의 경우도 업버전이 올라오고 해서 다시 다운받고 하는 편입니다. 최근 자주 버전업이 되면서 다시 다운받은 테마들이 한글깨짐 현상이 나타나는 경우가 많네요. 특히 sns 공유하기쪽에서 깨짐현상이 있는것 같습니다.

    1. ‘유료’라는 전제가 붙어 있다면 사용의 효율과 여러 이점이 있어야 하는데, 워드프레스에서는 그 의미가 퇴색된 걸까요? 워드프레스에 익숙한 분들이나 그렇지 못한 분들 모두 일정 부분 고충을 겪는 것으로 보입니다. 글로벌한 워드프레스인데… 2바이트 유저들에겐 관대하지 못한것 같네요.^^

      이런생각이 듭니다.
      ‘실무’라는 전제 조건이 붙는다고 해서 반드시 유료테마를 사용하거나, 새로운 테마를 제작해서 소비자에게 결과물을 제공해야 한다는 기준을 모든 사람이 가지고 있다면, 워드프레스가 전세계에서 가장 많이 사용 되는 ‘제작의 도구’가 되지 않았을 것으로 생각됩니다.

      관련 지식이 있다는 가정하에서
      기본테마 하나로 다양한 유형(업종)의 style.css 파일을 만들어 놓고, 그 유형에 맞는 템플릿(post-format과 같은)과 루프(목록, 리스트)를 사전에 만들어 놓는다면 실제 웹사이트 제작 시 효율성을 높일 수 있을 뿐 아니라, 업데이트와 같은 관리의 부담을 줄일 수 있지 않을까 합니다.
      물론, 소비자의 다양한 요구에 맞추려면 또 다른 요소가 필요할 것입니다.

      눈이 내리기 시작하네요.
      찾아주셔서 감사합니다.

  3. 안녕하세요 ㅠㅠ 우선 글 감사합니다. 그런데 저는 유료테마를 구매한후 그 테마의 style.css 에 들어가봐도 text-rendering이라는 코드가 없습니다. ㅜㅜ 혹시 도와주실수 있으신가요..벌써몇일째 잠도못자고 이걸 계속 만지는중입니다….ㅠㅠ

  10. 크롬을 쓰면서 항상 궁금하던 점 이었는데 알려주셔서 정말 감사합니다. ^^