#11-1. 마케터에 필요한 HTML 이해
■ HTML과 인터넷
인간 사용자가 컴퓨터나 인터넷으로 작업을 할 경우에는 사람과 기계가 모두 이해 가능한 공통의 언어를 사용한다. 즉 0과 1의 이진법으로 컴퓨터가 모든 정보를 이해함에도 불구하고, 인간의 이해 가능성을 높이기 위하여 컴퓨터만의 언어도 사람이 이해하고 작성할 수 있도록 보통 ‘프로그램’화된 언어를 통하여 코딩을 하게 된다. 우리가 흔히 알고 있는 프로그래밍 랭귀지인 C++, 파이손, 자바 스크립트 등이 여기에 해당된다. 이중에서 웹페이지를 제작할 때 사용하는 언어는 HTML(Hyper-text Markup Language)이라고 부른다. 일상 속에서 접하게 되는 거의 모든 인터넷 사이트들은 이를 이용하여 구성되어 있을 것이다. HTML이 웹사이트에서 어떻게 사용되고 있는지 확인하는 것은 간단하다. 아무 웹사이트에 가서 F12 키를 누를 경우 해당 사이트의 HTML 코드를 보여주며, 마우스 오른쪽 클릭 버튼 메뉴의 하단에 ‘검사’를 선택하면 해당 HTML를 보여준다.
웹 프로그래머나 웹 디자이너는 HTML을 완전히 이해하지 않은 상태에서 웹 사이트를 구축하기는 어렵다. 웹 구축을 도와주는 다양한 웹빌더 플랫폼들이 있지만, 웹 사이트의 세밀한 수정이나 시각적인 최적화를 위해서는 코딩이 필요하기 때문이다. 다만, 디지털 마케터나 퍼포먼스 마케터가 이들 프로그래머와 같은 수준의 HTML 코딩이나 태깅(tagging) 능력을 갖추는 경우는 많지 않다. HTML이 배우기 쉬운 언어라고는 하나, 업무의 전문화와 차별성 확보라는 측면에서 HTML 학습을 위하여 시간과 노럭을 투입하기 보다는 다른 마케팅 역량을 키우는 것이 효율적이기 때문이다. 1인 기업이나 스타트업에서는 다재다능한 역량이 초기에 필요할지 모르지만, 이들 기업도 이후 규모가 성장하면 업무가 분화되고 전문화될 것이다.
그럼에도 불구하고 디지털 마케터나 콘텐츠 마케터는 기본적인 HTML 코드를 이해할 필요성은 있다. 퍼포먼스 향상을 위한 필수적인 도구인 구글 어낼리틱스나 온라인 광고 플랫폼에서의 활동을 위하여 기초적인 HTML을 이해할 필요성 역시 커지고 있으며, 특히 블로그나 웹사이트 최적화인 SEO (search engine optimization) 작업을 위해서는 기초적인 태그 이해가 필요하기 때문이다. 일예로 GA에서 추적 트랙킹 코드를 삽입하거나 이벤트 추적, A/B 테스트 진행등을 할 때마다 프로그래머에게 일일이 협조를 구하거나 부탁하면서 진행하는 것은 업무 효율성이 떨어질 것이다. 기본적인 HTML 용어와 문법을 이해하는 것만으로도 마케터는 자신의 업무를 보다 자주적으로 진행할 수 있다.
■ HTML 기본 형태의 이해
HTML은 태그(tag) 단위로 구성되어 있으며, 한 태그 안의 수많은 소스 코드를 프로그래밍함으로서 웹사이트를 완성한다. 태그는 < >안에 있는데, < >를 열린 태그, < / >를 닫힌 태그라고 부르며, 웹사이트의 소스들은 열린 태그와 닫힌 태그 사이의 소스 코드로 구성된다.
HTML의 필수요소인 <html>, <head>, <body> 태그부터 이해가 필요하다. 우선 <html>은 HTML 문서의 시작과 끝을 지정하는 태그이며, 작성된 문서가 HTML 기반의 문서임을 나타낸다. 이후 <html> 태그 내에서 <head>, <body>와 같은 다른 태그가 적재적소에 위치하게 된다.
<head>안의 코드는 실제로 화면에 직접 출력되지는 않지만, 웹브라우저가 알아야 할 중요한 정보들이 들어 있다. 일예로 구글 어낼릭틱스의 트래킹코드는 <head> 바로 밑에 삽입되어야 작동하지만, 작동하는 과정이 시각적으로 보여지지는 않는다. <head>는 문서 제목, 제작자, 문서 정보 등 주로 문서에 관한 기본적 정보를 포함하고 있으며, 웹 브라우저는 이 정보를 입력받아 활용한다.
반면에 <body> 안의 코드는 인간 이용자에게 보여주기 위하여 존재하는 코드이며, 실제 화면에 나타나는 내용들을 기술해주고 있다. 즉 이용자가 웹 브라우저상에서 제공하고 싶어하는 내용들을 다양한 태그들을 활용하여 구성하며, 웹 문서의 대부분은 <body> 태그가 차지한다. 폰트, 색상, 여백 등을 결정하는 다양한 종류의 <body> 태그들이 있지만, 퍼포먼스 마케팅과 관련하여 자주 사용하는 <body> 태그는 링크(link)와 관련된 태그이다. 즉 <body> 태그 안에서 <a>는 앵커(anchor)를 의미하며, <a> 태그는 기본적으로 이동할 페이지 주소(url)와 함께 사용된다. 구글 태그 매니저 등에서 태그 관리할 때 자주 사용되며, <a> 태그가 있는 경우 url 링크가 있음을 의미한다.
이 외에 주석 태그가 있는데, 주석은 화면 상에는 표시되지 않지만, 코드 소스상에서만 확인하며, HTML 소스를 작성할 때 문서의 정보, 수정사항, 태그에 대한 설명등을 보기 편하기 이한 주석 기능으로 사용한다. 주석은 <!-->이며, 즉 <!---(내용)--->처럼 사용한다.
다양한 HTML 태그와 소스에 대한 이해는 콘텐츠 및 웹 등 디지털 마케팅 작업을 보다 손쉽게 이해하고 도와줄 수 있으며, 개발자에 대한 마케터의 의존도를 줄여줌으로서 보다 자유롭고 신속하게 마케팅 활동을 할 수 있도록 도와준다는 점에서 의의가 있으며, 이에 기본적인 HTML 이해를 높이기 위한 노력이 필요하다.