HTML (HyperText Markup Language)

🤔 혹시 인터넷을 하면서 이런 생각해 본 적 없나요?

우리가 매일 숨 쉬듯이 쓰는 인터넷이지만, 자세히 들여다보면 신기한 점 투성이입니다.

• "왜 어떤 글자는 마우스를 올리면 손가락 모양👆으로 바뀌고, 어떤 건 그대로일까?"
• "똑같이 '구매하기'라고 써 있는데, 왜 어떤 건 버튼이고 어떤 건 그냥 글자일까?"
• "구글 검색 로봇은 어떻게 우리 사이트의 수많은 글 중에서 '제목'만 쏙 뽑아내서 보여줄까?"

이 모든 미스터리의 정답, 그리고 디지털 마케팅 데이터의 시작점은 바로 HTML이라는 녀석에게 있습니다.

🔑 HTML, 한마디로 뭘까요?

어렵게 생각할 필요 없습니다. HTML은 웹페이지에게 보내는 '작업 지시서'입니다.

우리가 보는 예쁜 웹사이트 뒤에는, 브라우저(크롬, 사파리 등)에게 "이건 제목이야", "이건 이미지야", "이건 버튼이야"라고 하나하나 명령을 내리는 HTML 코드가 숨어 있습니다.

🏢 첫 번째 비유: 짓다 만 건물 (골조)

가장 유명한 비유부터 시작해볼까요? 웹사이트를 하나의 집이라고 상상해 보세요.

집을 지을 때 벽지(CSS)를 바르거나 가구(JavaScript)를 배치하기 전에 무엇을 먼저 하나요? 바로 철근과 콘크리트로 뼈대를 세우는 일입니다.

• "여기는 안방이 될 공간이야"
• "여기는 창문이 뚫릴 자리야"
• "여기는 현관문이 달릴 거야"

HTML이 바로 이 건물의 뼈대(골조) 역할을 합니다. 아무리 예쁜 디자인도 튼튼한 뼈대가 없으면 무너져 내리듯이, HTML 없이는 웹페이지 자체가 존재할 수 없습니다.

🏷️ 두 번째 비유: 이삿짐 박스의 '라벨(Post-it)'

조금 더 쉬운 비유를 들어볼게요. 여러분이 이사를 갔는데, 짐 박스 100개가 거실에 쌓여 있다고 칩시다. 박스에 아무것도 안 써져 있다면 어떨까요?

어떤 박스가 그릇인지, 옷인지 알 수가 없겠죠? 그래서 우리는 박스 겉면에 라벨(견출지)을 붙입니다.

HTML이 바로 이 '라벨'입니다. 컴퓨터는 멍청해서 우리가 말해주지 않으면 이게 '제목'인지 그냥 '낙서'인지 모릅니다. 그래서 HTML이라는 라벨을 딱 붙여주는 거죠.

• "브라우저야, 이 글자는 제목(h1)이야!"
• "이 줄은 클릭하면 넘어가는 링크(a)야!"

이렇게 라벨을 붙여주면, 브라우저가 그걸 읽고 우리가 보는 화면처럼 예쁘게 정리해서 보여주는 것입니다.

⚙️ 그래서 HTML은 어떻게 생겼나요?

HTML은 '태그(Tag)'라고 부르는 꼬리표를 사용합니다. 생김새는 아주 단순해요. 내용물의 앞뒤에 꺽쇠 괄호 < >를 샌드위치처럼 감싸주면 됩니다.

비포 & 애프터로 확인해보기

만약 HTML 태그가 없다면 브라우저는 이렇게 인식합니다.

“

우리 회사 신제품 출시! 놀라운 기능의 신제품을 지금 바로 만나보세요. 더 알아보기

그냥 줄글이죠? 어디가 제목인지 눈에 띄지 않습니다. 하지만 HTML 태그를 붙이면 달라집니다.

<h1> 태그를 붙이니 제목처럼 커졌고, <a> 태그를 붙이니 클릭할 수 있는 링크가 되었습니다. 이것이 HTML의 마법입니다.

💡 이걸 알면 마케터에게 뭐가 좋을까요?

"전 코딩할 줄 모르는데 꼭 알아야 하나요?"라고 물으신다면, "직접 짤 필요는 없지만, 읽을 줄 알면 신세계가 열린다"고 말씀드리고 싶습니다.

1. 개발자와의 대화가 편해집니다.

개발자 또는 Ai에게 요청할 때, 모호한 표현 대신 정확한 용어를 쓸 수 있습니다.

• ❌ 잘못된 요청: "저기 맨 위에 큰 글씨 좀 바꿔주세요."
• ⭕ 명확한 요청: "상단 h1 태그(메인 제목) 문구를 이번 프로모션 문구로 교체해 주세요."

👉 개발자가 여러분을 보는 눈빛이 달라질 겁니다. "오, 좀 아시는데요?" 하고 말이죠.

2. 데이터 추적(GA4, GTM)의 원리가 보입니다.

마케터가 가장 힘들어하는 '태그 매니저'나 '데이터 분석 툴' 세팅. 사실 원리는 간단합니다. "HTML 태그 중에 <a>라고 라벨 붙은 녀석을 누가 클릭하면 숫자를 세어줘!" 라고 명령하는 것이거든요. HTML 구조를 알면, "아, 이 버튼은 <a> 태그가 아니라 <button> 태그로 되어 있어서 클릭 집계가 안 됐구나!" 하고 문제의 원인을 스스로 찾을 수 있게 됩니다.

3. 검색엔진 최적화(SEO)의 고수가 됩니다.

네이버나 구글 검색 로봇은 이미지를 보지 못합니다. 오직 HTML 코드만 읽죠. 우리가 중요한 키워드를 <h1> (제목 태그)에 넣어뒀는지, 그냥 <span> (아무 의미 없는 태그)에 넣어뒀는지에 따라 검색 노출 순위가 달라집니다. HTML을 알면 우리 사이트가 검색엔진에게 친절한지 아닌지 진단할 수 있습니다.

💼 마케터가 HTML을 직접 여는 순간들

배워두면 좋다는 말보다, 실제로 언제 쓰게 되는지 보는 편이 빠릅니다.

뉴스레터 링크가 깨졌을 때

이메일 마케팅 툴로 뉴스레터를 보냈는데, 특정 버튼의 링크가 잘못 걸린 것을 발송 후에 발견하는 경우가 있습니다. 에디터 화면에서는 어디가 문제인지 보이지 않을 때, HTML 편집 모드로 전환하면 <a href="..."> 부분에서 잘못된 주소를 바로 찾을 수 있습니다. href 속성 하나만 읽을 줄 알아도 다음 발송 전에 스스로 점검할 수 있습니다.

붙여넣은 글의 서식이 계속 깨질 때

워드나 노션에서 작성한 글을 블로그 에디터에 붙여넣으면 글자 크기가 제멋대로가 되거나 이상한 여백이 생기는 일이 잦습니다. 원인은 눈에 보이지 않는 HTML 태그가 함께 복사되기 때문입니다. HTML 보기 모드에서 불필요한 태그를 지우거나, 제목이 <h2> 태그로 제대로 지정됐는지 확인하면 해결됩니다. 화면을 꾸미는 쪽 원리는 CSS 클래스에서 이어집니다.

AI에게 랜딩 페이지를 만들어달라고 했을 때

요즘은 마케터도 AI 코딩 도구로 이벤트 페이지를 직접 만듭니다. 이때 결과물이 HTML 파일로 나오는데, 제목이 <h1>에 들어갔는지, 버튼에 링크가 제대로 걸렸는지 확인하는 것은 우리 몫입니다. 태그를 읽을 줄 알면 AI에게 "두 번째 <h2> 아래 문단을 수정해줘"처럼 정확하게 요청할 수 있습니다. 브라우저가 이 태그들을 어떻게 다루는지는 DOM 클래스에서 확인할 수 있습니다.

📋 30초 요약

1. HTML은 웹페이지의 뼈대이자 작업 지시서입니다.
2. 컴퓨터에게 "이건 제목, 이건 이미지"라고 알려주는 라벨(Tag) 역할을 합니다.
3. 직접 코딩은 못 해도 괜찮습니다. 하지만 이 구조(라벨)를 볼 줄 알면, 데이터 분석과 개발자와의 협업 능력이 레벨업 됩니다.

이제 웹사이트를 볼 때 그냥 그림으로 보이지 않고, 숨겨진 뼈대가 느껴지시나요? 그게 바로 좋은 눈을 가진 디지털 일잘러의 시야입니다!