HTML 문서에서는 웹 브라우저가 해석하지 않는 주석(comment)을 작성할 수 있습니다. HTML 파일 안에 주석을 사용하는 목적은 자신이나 팀원들을 위해 코드를 간략하게 설명하고 문서화하는 것입니다.
HTML 주석 추가하는 기본 방법
HTML 문서에 주석을 추가하려면 시작 태그와 종료 태그인 <!--와 -->를 사용하고, 그 사이에 설명할 내용을 작성하면 됩니다. 예시는 다음과 같습니다:
<!-- 한 줄짜리 주석입니다 -->주석은 여러 줄에 걸쳐 작성할 수도 있습니다:
<!--
여기에 첫 번째 주석이 있습니다.
여기에 두 번째 주석이 있습니다.
-->참고: HTML 주석이 브라우저에 의해 '해석되지 않는다'는 말은, 웹사이트 방문자에게 주석이 화면에 보이지 않는다는 뜻입니다. 다만 페이지에서 마우스 오른쪽 버튼을 클릭해 '소스 보기(View Page Source)'를 선택하면 주석 내용을 확인할 수 있습니다. 따라서 비밀번호나 API 키 같은 민감한 정보는 절대 주석에 작성하지 않아야 합니다.
HTML 코드에 주석을 작성하는 것이 좋은 습관일까요?
누구에게 묻느냐에 따라 답은 달라집니다. 일부 개발자들은 코드 파일에 아예 주석을 달지 말라고 주장하기도 하는데, 그 근거는 코드 자체가 명확하고 스스로 설명이 되어야 한다는 것입니다. 하지만 저는 이 생각에 동의하지 않습니다. 무엇이 명시적이고 무엇이 암묵적인지에 대한 판단은 개발자마다 다르기 때문입니다.
저는 최대한 명확하게 만드는 쪽을 선호합니다. 설명이 조금 지나치다 느껴지더라도, 부족한 설명보다는 훨씬 낫습니다. 특히 학습 초기 단계에 있는 초보 개발자들은 친절한 주석 하나가 큰 도움이 됩니다.
주석 vs 페이지 로딩 성능
HTML 문서에 주석을 다는 것의 가장 큰 단점은 파일 공간을 차지한다는 점입니다. 이는 빌드 결과물의 크기를 늘리고 페이지 로딩 속도에 영향을 줄 수 있습니다. 하지만 이것은 어디까지나 이론적인 문제일 뿐입니다. 주석을 제거해서 성능이 눈에 띄게 향상된 웹사이트에 대해 들어본 적이 단 한 번도 없습니다. 주석이 차지하는 상대적인 용량은 너무 작아서 걱정할 필요조차 없습니다.
참고로 HTML 주석 100줄은 약 1KB 정도를 차지합니다. 게다가 이는 gzip 압축을 적용하기 전 기준으로, 실제 서비스 환경에서 gzip 같은 압축 방식을 사용하면 용량은 훨씬 더 줄어듭니다.
주석은 짧고 핵심적으로 작성하는 것이 좋습니다. HTML 주석 안에 소설을 집필할 계획이 아니라면 용량에 대해 걱정하지 않아도 됩니다.
오히려 진짜 신경 써야 할 부분은 사이트의 이미지 파일 압축입니다. 웹사이트의 이미지 하나만 더 효율적인 압축 방식으로 최적화해도, 수천 줄의 HTML 주석을 제거하는 것보다 페이지 로딩 속도를 더 크게 개선할 수 있습니다. 성능 최적화의 우선순위를 올바르게 잡는 데 도움이 되길 바랍니다.