티스토리 글쓰기 모드 완벽 정리ㅣ기본·마크다운·HTML 모드 비교 총정리

블로그를 운영하다보니, 글쓰기 모드가 세 종류가 있다는 것을 확인했습니다. 기본 모드에서 글을 작성 하다보니, 글을 완료하고 나서 확인을 하면, 문단 구성의 행이 자꾸 뒤죽박죽 엉망이 되어 정렬된 모양이 처음 설정해 놓은대로 보이지 않고 다르게 보이더군요.

 

그래서 또 기본모드 외에 마크다운과 HTML에 대해 알아보았습니다. 각각의 장단점이 있으니, 글의 성격과 블로그 속성에 따라 각각의 필요한 모드를 적용해서 글을 쓰면 될 것 같습니다.

 

티스토리 글쓰기 모드 완벽 비교｜기본·마크다운·HTML 어떤 게 좋을까?

티스토리는 콘텐츠를 발행하는 플랫폼이자, 개인 브랜딩과 수익화를 실현할 수 있는 블로그입니다. 그 중심에 있는 건 바로 '글쓰기'죠. 하지만 티스토리에서는 세 가지 글쓰기 모드를 제공하는 만큼, 초보자들은 어떤 모드로 써야 할지 고민이 많습니다. 이번 글에서는 티스토리의 기본 모드, 마크다운 모드, HTML 모드를 특징, 추천 대상, 활용 예시로 정리해 드릴게요.

 

티스토리 블로그 글쓰기에서 제공하는 기본 모드와 마크다운 모드는 글을 작성하는 방식에 차이가 있으며, 직접 적용을 해서 테스트를 해보니, 각각의 장단점이 분명합니다. 아래에서 정확하고 실용적으로 비교해드릴게요.

 

1. 기본 모드 – 직관적인 WYSIWYG 편집

기본 모드는 마치 워드프로세서처럼 보이고 작동합니다.
굵게, 기울임, 글자 색, 정렬 등을 시각적으로 조작할 수 있어 초보자에게 매우 친숙합니다.

글자를 굵게 하고 싶으면 버튼을 클릭해서 굵게 만듭니다.

사진을 넣을 땐 드래그 앤 드롭하거나 ‘사진 첨부’ 버튼 클릭을 합니다.

 

추천 대상:

• 처음 티스토리를 시작한 초보 블로거
• 텍스트 + 사진 위주의 감성 브이로그, 여행기, 일상글 작성자
• 디자인 툴 없이도 꾸민 글을 쓰고 싶은 경우

장점:

• 미리보기처럼 편집 결과가 즉시 보임
• 다양한 서식 버튼 제공 (표 삽입, 색상 변경 등)

단점:

• 불필요한 HTML 태그가 자동 생성될 수 있어 페이지가 무거워질 수 있음
• 마크다운/HTML 전환 시 코드 깨짐 발생 가능

2. 마크다운 모드 – 구조 중심, 간결한 글을 원한다면

마크다운은 #, *, []() 같은 간단한 문법으로 제목, 리스트, 링크, 강조 등 글의 구조를 정리할 수 있는 텍스트 기반 모드입니다.

# 제목입니다 

**굵은 글씨**   
*기울임 글씨*   
[링크 텍스트] https://example.com

- 리스트 항목 1 
- 리스트 항목 2

 

추천 대상:

• 기술 블로그, 정보 정리형 콘텐츠 작성자
• 깔끔하고 정돈된 글 구성을 선호하는 사람
• 노션, 깃허브 등에서 마크다운을 이미 활용해 본 사용자

장점:

• HTML보다 간편하고 빠름
• 웹페이지에 잘 어울리는 가독성 높은 구조 제공
• 모바일에서도 무너짐 없이 안정적인 표시

단점:

• 미리보기 결과를 바로 보기 어려움
• 감각적인 꾸미기에는 한계가 있음
• 코드에 익숙하지 않으면 초반 적응이 필요함

3. HTML 모드 – 완전한 자유를 원할 때

HTML 모드는 글의 구조, 스타일, 구성 요소를 직접 코딩해서 제어할 수 있는 모드입니다. 웹페이지를 만드는 데 쓰이는 HTML 태그를 이용해서 텍스트, 이미지, 링크, 버튼, 구간 분할 등 다양한 요소를 자유롭게 편집할 수 있어요.

 

HTML 모드는 글의 구조와 스타일을 직접 코드로 제어할 수 있는 전문가용 모드입니다.
티스토리를 마치 웹페이지처럼 활용하고 싶은 사용자에게 꼭 필요한 기능이에요.

 

추천 대상:

• 블로그 수익화를 위해 애드센스, 쿠팡파트너스 광고 삽입하는 분
• 유튜브, 지도, 아이프레임 등 외부 콘텐츠 삽입 필요자
• 디자인이나 웹 퍼블리싱에 능숙한 고급 사용자

장점:

• 완벽한 커스터마이징 가능 (폰트, 색상, 여백 등 세밀 조정)
• 외부 서비스 연동에 강력함 (<iframe>, <script> 등 사용 가능)

단점:

• 코드 실수 시 페이지가 깨지거나 표시 오류 발생
• 보안 정책에 따라 일부 스크립트 삽입 불가

반응형

HTML 모드가 필요한 경우

상황ㅣHTML 모드 사용 이유

 

✅ 맞춤 디자인이 필요할 때	텍스트 색상, 간격, 폰트, 배경 등 상세 스타일 지정 (<span style="">)
✅ 유튜브 영상, 지도, 광고 코드 삽입	<iframe> 또는 <script> 코드 삽입 가능
✅ 테이블, 레이아웃 커스터마이징	<table>, <div> 등으로 복잡한 구조 구현
✅ 반응형 콘텐츠 구성	모바일+PC 레이아웃을 따로 제어할 수 있음 (@media)
✅ SEO 최적화를 위한 구조 제어	<h1>, <meta>, <alt> 태그를 정확히 설정 가능
✅ 외부 스타일/스크립트 연결	CDN 방식 폰트, 아이콘, JS 기능 등 자유롭게 삽입 가능

 

 HTML 모드를 쓸 때 주의할 점

항목ㅣ설명

 

자동 태그 삭제 현상	티스토리는 일부 <script>, <style> 태그를 자동 제거하기도 함
보안 정책 제한	외부 JS, 일부 iframe은 보안상 삽입이 막힐 수 있음
모바일 반응형 확인	HTML 코드 작성 후 모바일에서 미리보기 필수
코드 백업 필요	코드 수정 시 실수로 전체 레이아웃이 망가질 수 있음 → 꼭 복사해두세요!

 

HTML 모드 추천 사용자

• 블로그 수익화를 위해 애드센스, 제휴 마케팅 등을 세밀하게 넣고 싶은 분
• 디자인에 민감한 블로거 (글자 크기, 여백, 배경색, 폰트 등 커스터마이징)
• 포트폴리오나 강의 콘텐츠처럼 시각적으로 구성된 정리형 페이지 제작자
• 티스토리를 웹페이지처럼 활용하고 싶은 고급 사용자

모드 선택 팁 요약

목적ㅣ추천 모드

  

쉽게 쓰고 예쁘게 꾸미고 싶다	기본 모드
정돈된 정보 정리를 하고 싶다	마크다운 모드
HTML 코드나 광고 삽입이 필요하다	HTML 모드

 

Tip: 한 글 안에서는 모드를 혼용하지 않는 것이 좋습니다.
변환 시 서식이 깨질 수 있으니, 처음부터 하나의 모드로 쭉 작성하는 것이 안정적입니다.

 

티스토리 글쓰기 모드 비교

구분ㅣ기본 모드ㅣ마크다운 모드

 

작성 방식	워드처럼 직접 편집 (글꼴/색상/정렬 등 시각적 조작)	간결한 문법으로 구조 표현 (텍스트 기반)
UI 특징	상단 도구바 사용 (B/I/링크/표 등)	마크다운 문법으로 입력 (#, *, []() 등)
초보자 적합성	매우 쉬움 (직관적 클릭 방식)	초보자에겐 다소 생소할 수 있음
레이아웃 제어	복잡한 구조도 시각적으로 손쉽게 편집 가능	명확한 구조지만 복잡한 디자인 제어엔 불리함
호환성	글자 크기나 정렬 등 웹 브라우저마다 다르게 보일 수 있음	구조 중심이라 대부분 브라우저에서 동일하게 보임
속도/경량성	불필요한 HTML 태그가 자동 생성될 수 있음	코드가 간결하고 빠름
추천 대상	블로그 글 꾸미기 위주, 감성 사진+문장 콘텐츠에 적합	기술 문서, 깔끔한 글 구성 선호자에게 적합

 

언제 어떤 모드를 써야 할까?

사용 상황ㅣ추천 모드

      

감성 브이로그, 사진 중심, 꾸미기 위주 콘텐츠	기본 모드
기술 정보, 정리형 글, 글의 구조가 중요한 경우	마크다운 모드
모바일에서도 빠르게 로딩되는 글이 필요한 경우	마크다운 모드
블로그 글을 복사해 재활용할 일이 많을 때	마크다운 모드 (재편집 용이)

 

팁

• 초보 블로거라면 우선 기본 모드로 시작해서 편집에 익숙해진 뒤,
  글의 구조 정리를 원할 때 마크다운을 시도해보는 게 좋아요.
• 혼합 사용 불가! 티스토리에서는 작성 도중 모드 전환 시,
  작성했던 내용이 사라질 수 있으니 주의하세요!

HTML 모드는 티스토리에서 비교적 고급 사용자들이 활용하는 기능으로,
기본 모드나 마크다운 모드로는 표현하거나 제어하기 어려운 요소들을
정밀하게 조작할 수 있게 해줍니다.

 

마무리

 

글쓰기 모드를 잘 선택하면 글의 완성도 + 검색 최적화 + 독자의 가독성이 모두 달라집니다. 자신의 콘텐츠 성격과 목적에 따라 기본 → 마크다운 → HTML 순으로 익혀나가는 것을 추천드려요.

이 글이 조금이라도 유용한 정보가 되었다면 아래 공감 버튼 꾹 눌러주세요~~^^

감사합니다!

👀 함께 보면 좋은 글

 

티스토리 블로그 시작할 때 필요한 정보 총정리(+꿀팁 정보)

 

티스토리 카드형 이미지 적정 사이즈｜블로그 디자인 팁

 

티스토리 블로그 SEO 최적화 가이드(+초보자도 따라하는 설정법)