티스토리 블로그 글쓰기 기본모드 마크다운 HTML모드 차이점

티스토리 글쓰기 화면에서 보이는 "기본모드", "마크다운", "HTML" 모드.

 

처음엔 뭔지 몰라 헷갈릴 수 있습니다.

 

이 글에서는 각 모드가 무엇이고, 어떤 상황에서 쓰면 좋은지 자세히 알려드리겠습니다.

목차

1. 기본모드
2. 마크다운
3. HTML 모드
4. 세 가지 모드는 서로 변환이 가능할까?
5. 마무리

 

기본모드, 마크다운, html모드 차이점

 

 

1. 기본모드

 

기본모드란 WYSIWYG (위지윅) 방식을 말합니다. 기본모드는 티스토리의 대표적인 ‘비전문가용’ 편집기입니다. 마치 워드(Word)나 네이버 블로그 에디터처럼, 글을 쓰면서 버튼 클릭만으로 굵게, 색상, 정렬, 링크, 이미지 삽입 등이 가능합니다.

 

What you see is what you get.

 

 

눈에 보이는 대로 편집하면, 그대로 저장됨을 의미합니다. 

 

전부 마우스로 클릭하고 눈으로 보면서 작업이 가능합니다.

 

실제 발행될 블로그 화면과 거의 유사하게 보여서 html이나 마크다운을 몰라도 쉽게 글을 작성할 수 있습니다.

장점	단점
마우스로 모든 편집 가능 (직관적)	복잡한 디자인/맞춤 스타일을 적용하기 어렵다
특별한 코딩 지식 없어도 OK	HTML 코드 수정이 제한적이다
대부분의 사용자에게 가장 편리함

 

추천 대상: 글쓰기에 익숙하지 않거나 편하게 타자 치면서 단순한 정보성 글을 빠르게 작성하고 싶은 분

 

 

2. 마크다운 (Markdown)

 

마크다운(Markdown)은 글을 쓰는 사람을 위해 만들어진 아주 간단한 텍스트 기반 문법입니다.

 

HTML처럼 태그를 쓰지 않아도 글의 구조를 #, *, - 같은 간단한 기호만으로 제목, 목록, 글씨 등을 표현할 수 있고, 자동으로 웹 페이지용 HTML로 변환됩니다.

 

즉, 웹에서 보기 좋은 구조를 간단한 기호를 이용하여 기본모드처럼 글 쓰듯이 적을 수 있는 포맷입니다.

 

2-1) 기호 기반 문법

마크다운은 단축키가 아니라 기호 기반 문법입니다.

아래와 같이 글자 앞이나 앞 뒤로 기호를 붙여서 표현하는 방법을 마크다운 방식이라고 합니다.

 

단축키처럼 ctrl+B를 눌러서

굵은 글씨를 표현하는 것이 아니라

**단어** (단어 앞뒤로 **을 입력)를 직접 쓰는 것입니다.

표현하고 싶은 형식	마크다운 문법	실제 출력 결과
제목	# 제목 (# 띄어쓰고 제목 입력)	제목1 (h1)
소제목	## (## 뒤에 띄어쓰고 제목 입력)	소제목 (h2)
굵은 글씨	**굵게**	굵게
기울임	*기울임*	기울임
링크	[링크]	링크 (파랑색)

 

 

위의 표에 나와있는 방식으로  입력을 하면 마크다운 모드에서 다음과 같이 보입니다.

마크다운으로 입력한 모습

 

 

이걸 html모드로 보면 다음과 같이 적용되었음을 알 수 있습니다.

마크다운에서 글을 쓰고 html로 확인한 모습

 

 

2-2) 마크다운의 한계 - 표 만들기

마크다운에서도 표를 만들 수는 있지만 매우 단순한 구조입니다.

 

예시) 다음과 같이 마크다운 모드에서 입력하면, 테두리가 없습니다.

마크다운으로 표를 만든 모습

 

미리 보기를 하면 다음과 같이 보입니다. 

테두리가 없이 나온 표의 모습

 

 

따라서 디자인이 들어간 표가 필요하면, html모드로 작성하고 html 모드에서만 수정하는 것이 좋습니다.

표를 html 로 만들고, 기본모드로 확인한 모습

 

위의 같은 표를 마크다운 모드로 확인한 모습

 

2-3) 마크다운의 장점과 단점

장점	단점
html보다 훨씬 간단하게 구조화된 글 작성 가능	문법을 외워야 하므로 초보자에겐 다소 불편
깔끔한 코드 기반의 작성	글 내용만 보여주기 때문에 실시간 편집 결과를 보기 어려움
기술 블록, 개발제에게 많이 사용됨

 

추천 대상: 기술 문서, 깔끔한 서식 정리가 필요한 콘텐츠 작성자

 

 

 

3. html 모드란?

HTML 모드는 티스토리 글의 내부 구조인 HTML 코드 전체를 직접 수정할 수 있는 전문가용 모드입니다. CSS, 자바스크립트 등도 삽입할 수 있어 글에 광고, 버튼, 다양한 위젯을 넣고 싶은 경우 꼭 필요합니다.

 

<p><strong>이 문장은 굵게 표시됩니다.</strong></p>

이 문장은 굵게 표시됩니다.

 

장점	단점
자유도 최고: 원하는 대로 디자인 가능	HTML 지식이 없으면 어려울 수 있음
외부 코드 삽입 가능 (애드센스 광고, iframe 등)	코드 작성 시 오류가 나면 화면에 이상하게 표시됨
마크다운이나 기본모드로 표현 못 하는 스타일 구현 가능

 

추천 대상: 웹코딩 가능자, 고급 사용자, SEO/광고 등 전문 작업이 필요한 블로거

 

 

4. 세 가지 모드는 서로 변환이 가능할까?

마크다운 → HTML: 변환 가능 (내부적으로 HTML로 바뀜)

 

HTML → 마크다운: 불가능하거나 불완전

 

기본모드 ↔ HTML: 가능. 간혹 코드 충돌 시 깨질 수도 있음.

 

 

5. 마무리

모드	특징	난이도	추천대상
기본모드	버튼 클릭으로 편집, 직관적	★☆☆☆☆	일반 사용자
마크다운	기호 기반 텍스트 작성, 간결함	★★☆☆☆	기술 블로그
HTML	직접 코딩, 고급 기능 자유도 최고	★★★★☆	전문가, 광고 삽입

 

초보자는 기본모드, 디자인을 더 다루고 싶다면 마크다운, 고급 스타일이 필요하다면 html을 활용해 보세요.

 

필요에 따라 적절히 조합하면, 당신의 티스토리 블로그는 더 멋지고 효과적인 공간이 될 것입니다.