스니펫, 마크다운, HTML 소스 차이: 예시와 비교표로 한 번에 정리

스니펫(snippet)은 전체에서 잘라 낸 짧은 코드나 텍스트 조각이고, 마크다운(Markdown)은 #, ** 같은 기호로 서식을 표시하는 간단한 문법, HTML 소스는 브라우저가 직접 읽는 태그로 된 원본이에요. 마크다운과 HTML은 어떤 문법으로 썼는지를 말하고, 스니펫은 얼마만큼 잘라 왔는지를 말해요. 그래서 "HTML 스니펫", "마크다운 스니펫"처럼 함께 쓸 수 있어요.

웹디자인 일을 하면서 AI한테 받은 글을 블로그에 옮기거나 에디터에서 '소스 보기'를 누를 때마다 헷갈렸던 세 단어를 예시와 함께 정리했어요.

---

스니펫, 마크다운, HTML 소스는 무엇이 다른가요?

세 단어는 같은 기준으로 비교할 수 없어요. 가리키는 기준이 서로 다르거든요.

• 마크다운: 문법(형식)의 이름이에요. 사람이 읽기 쉬운 간이 서식이에요.
• HTML: 문법(형식)의 이름이에요. 웹페이지를 만드는 표준 마크업 언어예요.
• 스니펫: 크기와 용도를 가리키는 말이에요. 어떤 언어로 썼든 "가져다 쓰는 한 조각"이면 스니펫이에요.

셋의 관계는 이렇게 이어져요.

마크다운으로 쓴 글이 → HTML로 변환되어 → 브라우저에 보여요. 이 과정 어디서든 일부를 잘라 내면 그게 스니펫이에요.

---

스니펫(Snippet)이란?

스니펫은 바로 복사해서 쓸 수 있는 짧은 코드나 텍스트 조각이에요. 영어 snippet의 원래 뜻도 '작은 조각'이에요.

// 자바스크립트 스니펫: 오늘 날짜를 YYYY-MM-DD 형식으로
const today = new Date().toISOString().slice(0, 10);

이 두 줄은 프로그램 전체가 아니라, 필요한 곳에 끼워 넣는 부품이에요. 이런 조각이 스니펫이에요.

스니펫이라는 말이 쓰이는 곳

• 코드 에디터 스니펫: VS Code에서 log만 입력해도 console.log()가 통째로 완성되는 템플릿
• 검색 결과 스니펫: 구글 검색 결과에서 제목 아래에 보이는 두세 줄짜리 본문 미리보기
• 설치용 스니펫: 구글 애널리틱스나 애드센스가 "<head> 안에 붙여 넣으세요" 하고 주는 짧은 코드

세 경우 모두 '전체 중 일부를 떼어 낸 조각'이라는 뜻은 같아요.

---

마크다운(Markdown)이란?

마크다운은 기호 몇 개로 제목, 목록, 굵은 글씨 같은 서식을 표시하는 간단한 문법이에요. 2004년 존 그루버(John Gruber)가 애런 스워츠(Aaron Swartz)와 함께 만들었고, 서식 기호가 그대로 보여도 읽기 편한 글을 목표로 했어요.

마크다운 기본 문법

쓰는 법	결과
## 제목	제목(h2)
**굵게**	굵게
*기울임*	기울임
- 항목	글머리 기호 목록
[글자](주소)	링크
백틱 세 개로 감싸기	코드 블록

예를 들어 아래처럼 써요.

## 오늘의 할 일

- **블로그 글** 마무리하기
- [올리브 블로그](https://www.oliveves.blog) 점검하기

마크다운은 브라우저에서 바로 보이나요?

아니요. 브라우저는 마크다운을 직접 해석하지 못해요. 화면에 보여 주려면 HTML로 바꾸는 과정이 필요해요. 깃허브, 노션, 그리고 이 블로그도 내부에서 마크다운을 HTML로 바꿔서 보여 줘요.

AI는 왜 마크다운으로 답할까요?

ChatGPT나 Claude 같은 AI가 답변을 마크다운으로 쓰는 이유는 세 가지예요. 기호가 적어서 가볍고, 변환 전 상태로도 사람이 읽기 편하고, 어느 서비스에서든 HTML로 바꾸기 쉽기 때문이에요.

---

HTML 소스란?

HTML(HyperText Markup Language)은 웹페이지의 구조를 <태그>로 표시하는 언어로, 1991년 팀 버너스리(Tim Berners-Lee)가 처음 공개했어요. 브라우저는 HTML을 직접 읽고 화면을 그려요.

HTML 소스는 이 태그들이 그대로 드러난 원문을 말해요. 웹페이지에서 마우스 오른쪽 버튼을 눌러 '페이지 소스 보기'를 하면 나오는 화면, 블로그 에디터의 'HTML 모드'나 '소스 보기'가 모두 HTML 소스를 보여 줘요.

같은 내용을 HTML로 쓰면 어떻게 될까요?

위의 마크다운 예시를 HTML로 바꾸면 이래요.

<h2>오늘의 할 일</h2>
<ul>
  <li><strong>블로그 글</strong> 마무리하기</li>
  <li><a href="https://www.oliveves.blog">올리브 블로그</a> 점검하기</li>
</ul>

내용은 같지만 더 길고, 사람이 읽기에는 덜 편해요. 대신 훨씬 세밀하게 꾸밀 수 있어요. 클래스 이름 붙이기, 이미지 크기 지정, 글자 색 바꾸기, 새 창에서 열리는 링크처럼 마크다운 기호로는 표현할 수 없는 것도 HTML로는 할 수 있어요.

---

스니펫, 마크다운, HTML 소스 비교표

구분	스니펫	마크다운	HTML 소스
정체	크기·용도 (조각)	문법 (간이 서식)	문법 (웹 표준 마크업)
생김새	어떤 언어든 가능	#, -, ** 같은 기호	<h2>, <p> 같은 태그
사람이 읽기	내용에 따라 다름	아주 편함	다소 불편함
브라우저가 바로 해석	내용에 따라 다름	아니요 (변환 필요)	네
표현 범위	내용에 따라 다름	기본 서식 위주	거의 모든 것
주로 쓰는 곳	코드 공유, 자동완성, 검색 미리보기	블로그, 문서, README, AI 답변	웹페이지 자체, 에디터 소스 모드

---

블로그 글을 쓸 때 셋은 어디서 만나나요?

요즘 블로그 글은 대부분 편집기로 써요. 네이버 블로그, 티스토리, 워드프레스, 노션 모두 버튼으로 제목·굵게·표를 넣고, 결과를 바로 보면서 쓰죠. 그래서 마크다운이나 HTML을 직접 쓸 일은 거의 없어요.

다만 편집기 뒤에서는 이 둘이 계속 쓰이고 있어서, 아래 네 가지 상황에서는 알아 두면 편해요.

1. AI 답변을 옮길 때: AI는 마크다운으로 답해요. 마크다운을 읽는 편집기는 붙여 넣으면 서식이 바로 살아나고, 아니면 ##, ** 같은 기호가 글자 그대로 남아요.
2. 단축 입력을 쓸 때: 노션 같은 편집기는 줄 앞에 ## 나 - 를 치면 제목·목록으로 바꿔 줘요. 이게 바로 마크다운 문법이에요.
3. 서식이 깨졌을 때: 'HTML 모드'나 '소스 보기'로 열면 복사하면서 딸려 온 불필요한 태그가 보여서 원인을 찾기 쉬워요.
4. 외부 코드를 넣을 때: 애드센스·애널리틱스 같은 스니펫은 HTML 모드에 붙여요. <script>가 들어 있는 조각은 페이지에서 실제로 실행되니까, 출처가 확실한 것만 넣어요.

이 블로그도 편집 화면에서 버튼으로 쓰지만, 저장될 때는 마크다운(정확히는 MDX)으로 남아요.

---

---