본문 바로가기

티스토리

티스토리 글쓰기, '마크다운(Markdown)'으로 깔끔하게 하는 법

반응형
티스토리 마크다운 작성법 완벽 가이드 2025 | 깔끔한 블로그 글쓰기

티스토리 글쓰기, '마크다운(Markdown)'으로 깔끔하게 하는 법

안녕하세요! 티스토리로 블로그를 운영하시면서 "내 글이 왜 이렇게 투박하고 정돈되지 않아 보이지?"라는 고민을 해보신 적이 있으실 것입니다. 수많은 블로거들이 겪는 공통적인 문제인데요, 바로 서식 정리의 어려움 때문입니다. 마크다운(Markdown) 문법을 활용하면 이런 고민을 한방에 해결할 수 있습니다. 복잡한 HTML 코딩 지식 없이도 전문적이고 깔끔한 블로그 글을 작성할 수 있는 방법을 지금부터 상세히 알려드리겠습니다.

1. 마크다운이란 무엇인가?

마크다운(Markdown)은 2004년 존 그루버(John Gruber)가 개발한 경량 마크업 언어입니다. 일반 텍스트 문서에 간단한 문법을 사용해서 서식을 지정할 수 있도록 만들어진 것으로, 현재 전 세계 개발자들과 블로거들이 가장 많이 사용하는 문서 작성 도구 중 하나입니다.

마크다운을 사용한 깔끔한 문서 작성 화면
마크다운으로 작성된 깔끔하고 구조화된 문서

💡 마크다운의 핵심 장점

가독성: 일반 텍스트로도 충분히 읽기 쉬운 형태를 유지합니다

단순함: 복잡한 HTML 태그 대신 직관적인 기호를 사용합니다

호환성: 다양한 플랫폼과 도구에서 지원됩니다

효율성: 키보드만으로 빠르게 서식을 적용할 수 있습니다

마크다운의 가장 큰 매력은 '글쓰기에 집중할 수 있다'는 점입니다. 복잡한 서식 메뉴를 찾아 헤매거나 마우스로 일일이 클릭할 필요 없이, 키보드 타이핑만으로 전문적인 문서를 완성할 수 있습니다. 특히 블로그 글쓰기에서는 이런 효율성이 더욱 중요하게 작용합니다.

2. 티스토리에서 마크다운 활용하기

안타깝게도 티스토리는 네이티브 마크다운 에디터를 제공하지 않습니다. 하지만 걱정하지 마세요! 마크다운을 HTML로 변환하는 방법을 통해 똑같은 효과를 얻을 수 있습니다.

2.1 티스토리 에디터 설정하기

먼저 티스토리 관리자 페이지에서 '환경설정 → 기본정보 → 에디터 설정'으로 이동합니다. 여기서 '기본 에디터'를 'HTML 편집기'로 변경해주세요. 이렇게 설정하면 HTML 코드를 직접 입력할 수 있어 마크다운으로 작성한 내용을 쉽게 적용할 수 있습니다.

티스토리 HTML 에디터 설정 화면
티스토리에서 HTML 에디터로 변경하는 과정

2.2 마크다운 변환 도구 활용하기

마크다운을 HTML로 변환해주는 온라인 도구들을 활용하면 됩니다. 대표적인 도구로는 다음과 같은 것들이 있습니다:

도구명 특징 장점 링크
Dillinger 실시간 미리보기 직관적인 인터페이스 방문하기
StackEdit 클라우드 동기화 다양한 내보내기 옵션 방문하기
Typora 데스크톱 앱 WYSIWYG 편집 방문하기

🔧 추천 작업 프로세스

1. 마크다운 에디터에서 글 작성

2. HTML로 변환 (자동 변환 또는 복사)

3. 티스토리 HTML 에디터에 붙여넣기

4. 최종 검토 후 발행

이런 방식으로 작업하면 마크다운의 편리함과 티스토리의 기능을 모두 활용할 수 있습니다. 처음에는 번거롭게 느껴질 수 있지만, 익숙해지면 글쓰기 효율성이 크게 향상됩니다.

3. 필수 마크다운 문법 마스터하기

이제 본격적으로 마크다운 문법을 배워보겠습니다. 모든 문법을 외울 필요는 없고, 자주 사용하는 핵심 문법들만 익히면 충분합니다.

3.1 제목(Headers) 만들기

제목은 마크다운에서 가장 기본이 되는 요소입니다. # 기호를 사용해서 6단계까지 제목을 만들 수 있습니다.

# 대제목 (H1) ## 중제목 (H2) ### 소제목 (H3) #### 작은제목 (H4) ##### 더작은제목 (H5) ###### 가장작은제목 (H6)

티스토리에서 SEO를 고려할 때, H1은 글 제목으로 한 번만 사용하고, 본문에서는 H2부터 사용하는 것이 좋습니다.

3.2 문단과 줄바꿈

마크다운에서 문단을 나누려면 빈 줄을 하나 두면 됩니다. 단순한 줄바꿈은 줄 끝에 스페이스를 두 번 입력하거나, HTML의 <br> 태그를 사용합니다.

마크다운 문법을 학습하는 모습
체계적으로 마크다운 문법을 익혀나가는 과정

3.3 강조와 스타일링

글의 특정 부분을 강조하고 싶을 때 사용하는 문법들입니다:

*이탤릭체* 또는 _이탤릭체_ **볼드체** 또는 __볼드체__ ***볼드+이탤릭*** 또는 ___볼드+이탤릭___ ~~취소선~~ `인라인 코드`

3.4 목록 만들기

순서가 있는 목록과 없는 목록을 쉽게 만들 수 있습니다:

순서 없는 목록: - 항목 1 - 항목 2 - 하위 항목 2-1 - 하위 항목 2-2 - 항목 3 순서 있는 목록: 1. 첫 번째 항목 2. 두 번째 항목 3. 세 번째 항목

목록은 블로그 글에서 정보를 체계적으로 정리할 때 매우 유용합니다. 특히 콘텐츠 구성에서 중요한 역할을 합니다.

4. 고급 기능으로 글을 더욱 풍성하게

기본 문법에 익숙해졌다면, 이제 더 고급스러운 기능들을 배워봅시다. 이런 기능들을 활용하면 글의 완성도가 한층 높아집니다.

4.1 링크와 이미지 삽입

링크와 이미지는 블로그 글에서 빠질 수 없는 요소입니다. 마크다운에서는 다음과 같이 간단하게 삽입할 수 있습니다:

[링크 텍스트](https://example.com "툴팁 텍스트") [내부 링크](/category/tips) ![이미지 대체 텍스트](https://example.com/image.jpg "이미지 제목") ![로컬 이미지](./images/photo.jpg)

이미지의 경우 alt 텍스트를 반드시 포함해야 합니다. 이는 접근성뿐만 아니라 SEO에도 도움이 됩니다.

4.2 표(Table) 만들기

복잡한 정보를 정리할 때는 표가 매우 유용합니다. 마크다운에서 표를 만드는 방법은 다음과 같습니다:

| 구분 | 장점 | 단점 | 추천도 | |------|------|------|--------| | 마크다운 | 간편함 | 학습 필요 | ⭐⭐⭐⭐⭐ | | HTML | 강력함 | 복잡함 | ⭐⭐⭐ | | WYSIWYG | 직관적 | 제한적 | ⭐⭐⭐⭐ |

표에서 정렬을 조정하고 싶다면 헤더 구분선에서 콜론(:)을 사용합니다:

| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 | |:----------|:-----------:|-----------:| | 내용1 | 내용2 | 내용3 |
구조화된 표와 데이터를 보여주는 화면
마크다운 표 기능으로 정보를 체계적으로 정리

4.3 코드 블록과 문법 하이라이팅

기술 블로그나 튜토리얼 글을 작성할 때 코드 블록은 필수입니다. 마크다운에서는 백틱(`) 세 개를 사용해서 코드 블록을 만들 수 있습니다:

```javascript function sayHello(name) { console.log(`안녕하세요, ${name}님!`); } sayHello("마크다운"); ``` ```python def calculate_average(numbers): return sum(numbers) / len(numbers) scores = [85, 92, 78, 96, 88] average = calculate_average(scores) print(f"평균 점수: {average}") ```

언어를 명시하면 해당 언어에 맞는 문법 하이라이팅이 적용됩니다. 지원하는 언어로는 javascript, python, java, css, html, sql 등이 있습니다.

4.4 인용구와 주석

다른 사람의 말을 인용하거나 중요한 내용을 강조할 때 인용구를 사용합니다:

> 단순함이 최고의 정교함이다. > - 레오나르도 다 빈치 > 여러 줄로 된 > 인용구도 이렇게 > 작성할 수 있습니다.

인용구는 블로그 글에서 권위를 높이고 신뢰성을 더하는 효과가 있습니다. 특히 권위 있는 글쓰기에서 중요한 역할을 합니다.

⚡ 프로 팁: 마크다운 치트시트

자주 사용하는 문법들을 정리한 치트시트를 만들어 두세요. 처음에는 자주 참고하게 되지만, 몇 번 사용하다 보면 자연스럽게 외워집니다. 가장 중요한 것은 완벽함보다는 꾸준한 연습입니다.

5. 실전 활용 팁과 주의사항

마크다운 문법을 익혔다면, 이제 실제 티스토리 블로그에서 효과적으로 활용하는 방법을 알아봅시다. 이론만으로는 부족하고, 실제 경험에서 나오는 노하우들이 중요합니다.

5.1 티스토리 특화 최적화 방법

티스토리에서 마크다운을 사용할 때 알아두면 좋은 실전 팁들입니다:

이미지 최적화: 티스토리는 이미지 업로드 시 자동으로 리사이징을 해주지만, 미리 적절한 크기로 조정해서 올리는 것이 좋습니다. 권장 크기는 가로 800픽셀 내외이며, 파일 크기는 100KB 이하로 유지하는 것이 로딩 속도에 유리합니다.

SEO 친화적 제목 구조: H1은 글 제목에만 사용하고, 본문에서는 H2부터 순차적으로 사용하세요. 검색엔진이 글의 구조를 더 잘 이해할 수 있습니다.

SEO 최적화된 블로그 글 구조
검색엔진 최적화를 고려한 체계적인 글 구조

5.2 가독성 향상 전략

마크다운으로 작성한 글의 가독성을 높이는 구체적인 방법들을 소개합니다:

문단 길이 조절: 한 문단은 3-4문장을 넘지 않도록 합니다. 모바일 환경을 고려하면 더욱 중요한 원칙입니다. 긴 내용은 여러 문단으로 나누어 작성하세요.

시각적 구분: 중요한 내용은 인용구나 강조 문법을 사용해서 시각적으로 구분합니다. 하지만 남용하지 말고, 정말 중요한 부분에만 사용해야 효과적입니다.

목록 활용: 복잡한 설명보다는 목록으로 정리할 수 있다면 목록을 사용하세요. 독자가 내용을 빠르게 파악할 수 있습니다.

요소 권장 사용법 피해야 할 것 효과
제목 계층적 구조 유지 H1의 중복 사용 구조화된 읽기
강조 핵심 키워드만 과도한 볼드 처리 중요도 구분
링크 자연스러운 연결 무분별한 외부링크 신뢰성 향상
이미지 내용과 연관성 장식용 과다 삽입 이해도 증진

5.3 흔히 하는 실수와 해결책

마크다운을 사용하면서 자주 발생하는 실수들과 이를 해결하는 방법을 정리했습니다:

문법 혼재: 마크다운과 HTML을 섞어 쓸 때 발생하는 오류입니다. 가능하면 마크다운 문법으로 통일하고, 꼭 필요한 경우에만 HTML을 사용하세요.

띄어쓰기 누락: 마크다운에서는 기호 다음에 반드시 공백이 있어야 합니다. 예를 들어 #제목이 아니라 # 제목으로 써야 합니다.

특수문자 이스케이프: 마크다운에서 특별한 의미를 가진 문자들(*, _, #, [ 등)을 일반 텍스트로 사용하려면 앞에 백슬래시(\)를 붙여야 합니다.

이런 실수들을 방지하기 위해서는 마크다운 미리보기 기능이 있는 에디터를 사용하는 것이 좋습니다. 마크다운 에디터 추천 글에서 더 자세한 정보를 확인하실 수 있습니다.

🎯 성공적인 마크다운 활용을 위한 체크리스트

✅ 일관성 있는 문법 사용

✅ 계층적 제목 구조 유지

✅ 적절한 강조와 시각적 구분

✅ 모바일 친화적인 문단 길이

✅ 의미 있는 링크와 이미지 사용

❓ 자주 묻는 질문

마무리

티스토리에서 마크다운을 활용한 글쓰기 방법에 대해 상세히 알아보았습니다. 처음에는 번거롭게 느껴질 수 있지만, 한 번 익숙해지면 글쓰기 효율성이 크게 향상됩니다. 가장 중요한 것은 완벽한 문법보다는 꾸준한 연습입니다. 오늘부터 간단한 제목과 목록 문법부터 시작해서 점차 고급 기능들을 익혀나가시기 바랍니다. 여러분의 블로그가 더욱 전문적이고 읽기 쉬운 형태로 발전하는 데 이 글이 도움이 되기를 바랍니다.

반응형