웹 표준을 통한 사이트 향상 팁 5가지

웹 표준을 따르는 것으로 사이트의 성능을 향상 시킬 수 있는 몇 가지 팁을 소개합니다.

웹페이지(HTML, 자바스크립트, CSS 등)의 인코딩으로 UTF-8을 쓰기

아직도 많은 한글 웹페이지가 EUC-KR등의 오래된 방식으로 인코딩 되어있는 경우가 많은데요, 표준이 아닌 관계로 여러 OS나 브라우저 환경에서 제대로 페이지가 나타나지 않는 경우가 있습니다.

한글이 euc-kr로 인코딩 되어 있어 글자가 깨지는 경우

한글이 euc-kr로 인코딩 되어 있어 글자가 깨지는 경우

UTF-8은 현재 가장 보편화된 국제 표준이고 거의 모든 OS와 브라우저에서 지원하기 때문에 글자가 깨지는 것을 걱정하지 않아도 됩니다.

가능하면 콘텐츠를 관리하는 관련 데이터베이스의 내용도 UTF-8로 전환하는 것을 권장합니다.

HTTP Content-Type 헤더에서 Charset 매개변수를 써서 인코딩을 명시적으로 표시하기

HTTP를 통해 텍스트로 된 리소스(text/*)를 보낼 때, HTTP의 Content-Type 헤더에 다음과 같이 charset 매개변수를 포함하여 해당 텍스트가 어떤 인코딩으로 되어있는지 명시해주면 브라우저가 더 빠르게 페이지를 렌더링할 수 있게 됩니다.

Content-Type: text/html; charset=utf-8

만약 이 작업이 어렵다면, HTML의 태그에 charset 메타 정보를 넣어주는 것이 좋습니다. 그리고 이 정보는 최대한 파일의 선두에 가까운 곳에 표시할 수록 도움이 됩니다.

<html lang="ko">
<head>
<meta charset="UTF-8">
...

모든 HTML 문서에 “lang”을 써서 해당 문서가 어떤 언어로 이루어져 있는지 표기하기

HTML 정보가 시작됨을 알리는 태그에 lang 값을 넣어주어 언어를 넣어주면, 브라우저가 글꼴을 선택하는 작업을 도와주기 때문에 경우에 따라 페이지 표시가 더 빨라지고, 검색 엔진처럼 기계적으로 HTML 문서를 읽는 경우 문서가 어느 언어로 이루어져있는지 쉽게 파악하여, 문서가 더 알맞게 다루어질 수 있게 도움을 줍니다.

<html lang="ko">

만약 페이지가 여러 언어로 이루어져있는 경우 가장 보편적인 언어를 html 태그에서 표기하고, 해당 부분의 태그에 마찬가지로 lang 값을 넣어주는 일이 가능합니다.

<html lang="ko">
<body>
...
<p lang="fr">Ceci est un paragraphe.</p>
...

글꼴 지정을 할 때, 맨 마지막에 CSS generic family를 지정해주기

CSS나 <style> 태그 내에서 글꼴을 지정할 때, 맨 마지막에 CSS generic family를 지정해주면, 페이지를 보는 사용자의 환경에 혹시 해당 글꼴이 존재하지 않더라도, 브라우저가 비슷한 글꼴을 사용하여 페이지를 실제 의도된 모양에 가깝게 표시하는 데 도움을 줍니다.

예 1) font-family: "Times New Roman", Garamond, serif;
예 2) font-family: Courier, monospace;

페이지가 의도한 디자인에 가깝게 표시되기 위해선 구체적인 글꼴과 generic family가 어울리는 것이어야 합니다. 가장 많이 사용되는 generic family와, 각각의 대표적인 글꼴은 다음과 같습니다.

  • serif: Times New Roman, Garamond
  • sans-serif: Arial, Helvetica
  • monospace: Courier, Consolas
  • HTML로 충분히 만들 수 있는 내용을 PDF/HWP/Office 등의 파일로 올리지 않기

    내용이 PDF, HWP, MS Office등의 파일로 되어있는 경우 검색 엔진이 내용을 이해하는 데 어려울 수도 있으며, 사용자의 환경에 따라 파일을 열람할 수 없는 경우도 있습니다. HTML로 구현 가능한 내용은 최대한 HTML로 구현하는 것이 사이트 성능이나 사용자 경험 측면에서 더 낫습니다. 최근에는 워드프레스나 XE 등, 사용자 친화적인 CMS가 많이 있어서, 마치 워드프로세서 프로그램을 이용하는 것처럼 내용을 구현할 수 있을 것입니다.

    This entry was posted in 웹마스터 도움말 and tagged , , , . Bookmark the permalink.

    One Response to "웹 표준을 통한 사이트 향상 팁 5가지"

    Leave a Reply

    Your email address will not be published. Required fields are marked *


    *