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

안녕하세요?

오늘은 제가 티스토리 블로그를 시작하면서 궁금했던 모든 내용을 총정리 해봤습니다.

혹시 저처럼 처음 시작하신 분들에게 유용한 정보가 되길 바라는

마음으로 자료를 공유할게요. 

 

아쉽게도 저는 티스토리 블로그를 2014년 무렵에 운영을 했었는데,

다음 블로그가 티스토리로 전환되는 과정에서 블로그 백업 기회를 

놓치게 되었습니다. 그 이유는 사업적 문제로 바쁜 일정을 보내다보니,

한참 지난 후에 이 사실을 알게 되었어요. 그래서 백업 하려고 했더니,

기간이 지나서 블로그는 없어지고 글만 겨우 다운로드 받을 수 있었답니다.

 

그 후 네이버 블로그를 운영하며 집중하다가 티스토리는 그냥 방치한 상태에서

2022년 11월에 블로그만 만들어놓고 운영을 하지 않았어요.

그런데 어제 이 블로그를 운영하려고 들어와보니, 너무 익숙하지 않아서 많이

어렵게 느껴졌습니다. 메뉴 편집부터 개념 이해가 되지 않아서 모든 것이 하나하나

다시 배우는 느낌으로 적응을 하며 겨우 학습 과정을 마쳤습니다.

 

제가 다시 배우는 느낌으로 알게 된 내용을 여러분들께 공유를 해드릴 테니,

혹시 티스토리 처음으로 시작하신 분들께 조금이나마 도움이 되었으면 합니다.

 

블로그의 첫인상은 블로그 소개글이 좌우한다고 해도 과언이 아닙니다.
방문자에게 블로그의 목적, 주제, 방향성을 명확히 알려주는 소개글은

신뢰를 쌓고 구독을 유도하는 중요한 요소예요.

팁: 좋은 블로그 소개글을 쓰는 5가지 포인트

1. 왜 블로그를 시작했는지 목적을 간단히 적어주세요.
2. 어떤 주제를 다루는지 명확하게 제시하세요.
3. 당신만의 색깔이나 스타일을 녹여서 개성을 보여주세요.
4. 방문자에게 바라는 점 (예: 댓글, 구독, 피드백 등)을 자연스럽게 안내하세요.
5. 문체는 자연스럽고 진심 어린 느낌이 좋습니다. 너무 포멀하게 쓸 필요는 없어요.

블로그 이름과 닉네임도 중요해요.

그냥 아무 생각없이 이름을 만들고 블로그를 운영한 사람도 있겠으나,

블로그 이름과 도메인 주소를 만들 때 중요한 요소이기도 하니까

신중하게 생각하고 이름과 닉네임을 정하는 게 좋습니다.

저도 오래 전 만들어 놓고 이제 와서 블로그를 운영하려다보니,

도메인 주소와 이름이 일치하지 않는 요소를 경험하게 되었습니다.

그래서 처음부터 블로그를 만들 때 이러한 요소까지 고려해서 

블로그 이름, 닉네임, 도메인 주소를 생성하는 것이 좋습니다.

블로그 이름과 닉네임은 기억하기 쉽고, 주제와 분위기를 반영하며,

자신만의 개성을 담는 것이 중요해요.

팁: 블로그 이름 정할 때 고려할 것

1. 블로그 주제와 톤이 일치하는 이름을 고르세요.(에세이면 감성적으로, IT면 기술적으로!)
2. 너무 길지 않게, 최대 6~10자 내외가 기억하기 좋아요.
3. 중복이 적은 이름이면 검색 시에도 유리해요.
4. SNS나 도메인도 함께 쓸 수 있는지 생각해보세요. 통일감이 중요하니까요.

블로그 편집을 하다보니, 아이콘과 파비콘 설정하는 것이 나오더라고요.

이것이 뭔지 몰라서 혼자 많이 헤매다가 알게 된 정보도 알려드릴게요.

아이콘은 블로그의 이름의 분위기를 반영하면서 어울리는 이미지를 추천합니다.

어울리는 이미지 제작도 중요하지만, 사이즈도 아주 중요합니다.

저도 만들어놓고 업로드가 되지 않아 다시 사이즈를 설정하고 업로드를 했습니다.

로고/아이콘 제작 팁

• 컬러 추천:
  • 블로그 이름과 어울리는 분위기와 느낌의 색을 추천
  • 예를 들면 제 블로그 미래의 지성 아이콘 예시
  • 네이비/딥블루: 지성, 안정감
  • 실버/화이트: 미래적이고 깔끔한 느낌
  • 민트/퍼플: 창의성과 진보적인 이미지
• 스타일:
  • 너무 복잡한 그림보다 심플한 실루엣 또는 아이콘 스타일이 블로그와 잘 어울림
  • 텍스트와 결합해 로고처럼 쓸 수 있도록 세로보다 가로형 아이콘 배치 추천

팁: 무료로 아이콘 제작/다운로드 할 수 있는 사이트

사이트                        특징

 

Flaticon	키워드 입력 후 다양한 스타일 선택 가능
Iconscout	AI, 교육, 뇌, 미래 등 테마별로 찾기 쉬움
Canva	로고 제작 템플릿 활용 가능, 블로그 타이틀과 함께 디자인 가능

🎯 티스토리 아이콘(로고)의 기본 특징

기본 로고 이미지

• 형태: 말풍선 모양의 아이콘
• 디자인 요소:
  • 말풍선 내부에 ‘T’자가 들어가 있어요
  • 이 말풍선은 ‘이야기를 나누는 공간’, 즉 블로그를 상징합니다
• 색상:
  • 오렌지색이 대표 컬러입니다
  • 일부 흑백/모노톤 버전도 사용되지만, 기본적으로는 강렬한 주황색이 메인입니다

예시 이미지 (설명용)

🔸 말풍선 안에 하얀색 T 글자 (기본 로고)

🔸 주황 배경에 흰색 T가 들어가 있는 형태가 대표적입니다

 

로고가 의미하는 바

요소의미

말풍선	생각을 나누는 공간, 콘텐츠 발행과 커뮤니케이션의 상징
‘T’ 글자	Tistory의 앞글자이자, 개인 브랜드의 시작점 역할
오렌지색	활발하고 창의적인 느낌을 전달. 블로거의 활동성과 독창성을 상징

 

팁: 티스토리 블로그에 로고 적용 시 주의할 점

1. 공식 로고를 상업적으로 사용하는 것은 제한될 수 있습니다.
   👉 블로그 커버나 소개 영역에서 단순 언급 또는 플랫폼 표현 정도로만 사용하는 것이 안전해요.
2. 직접 만든 블로그 로고에 티스토리 로고를 조합할 경우:
   👉 티스토리의 공식 로고 가이드라인을 따르는 것이 바람직합니다.
3. 로고 다운로드 원할 때:
   👉 티스토리 공식 페이지나 검색 시 "티스토리 로고 PNG" 등으로
4. 찾아보면 벡터 파일 또는 고화질 로고를 찾을 수 있어요.

티스토리 블로그의 이미지/로고/썸네일 등 각 영역별 사이즈 구성은

디자인 퀄리티와 가독성에 매우 중요합니다.
아래에 티스토리 블로그에 자주 사용되는 이미지 영역별

권장 사이즈 가이드를 정리해드릴게요.

티스토리 블로그 이미지 사이즈 가이드

 

  용도권장                                  사이즈 (px)                                비고

블로그 로고	250 x 80 또는 300 x 100	가로로 긴 형태 추천, PNG 형식 사용 시 투명 배경 가능
대표 이미지 (썸네일)	1200 x 630	SNS 공유 시도 포함한 가장 일반적인 비율 (16:9)
커버 이미지 (헤더 이미지)	1200 x 400 ~ 1600 x 500	스킨에 따라 달라짐, 너무 높지 않게 설정
본문 삽입 이미지	750 ~ 1000px 너비	모바일/PC 양쪽 호환, 가로폭 1000px 이내가 안정적
프로필 이미지	300 x 300	정사각형, 원형으로 잘리는 경우 많음
파비콘(Favicon)	32 x 32, 48 x 48	브라우저 탭 아이콘으로 사용됨, ICO 또는 PNG

 

추가 팁: 사이즈 구성 시 고려할 점

반응형 스킨을 쓸 경우

• 가로 사이즈는 1000px 이하로 유지하는 것이 모바일 최적화에 좋습니다.
• 너무 고해상도 이미지는 로딩 속도를 떨어뜨릴 수 있으니, 최적화 필수!
  👉 TinyPNG 같은 이미지 압축 사이트 활용 추천

로고/아이콘 삽입 시

• 배경이 투명한 PNG 파일을 사용하면 더 깔끔한 느낌을 줍니다.
• 글자나 심볼은 가독성 좋은 색상 대비를 유지하세요.

커버 이미지 활용 시

• 이미지 안에 텍스트를 삽입할 경우, 중앙 정렬 + 최소 20px 이상 여백 확보
• 너무 많은 정보를 넣기보다 메시지를 간결하게 전달하는 것이 중요

다음은 파비콘에 대한 정보입니다. 처음 접하신 분들은 파비콘이 뭔지 궁금하실 거예요.

저도 이게 뭐지? 궁금해서 찾아보다가 알게 되었어요.

파비콘이 뭐야?

파비콘(Favicon)은 웹사이트의 정체성을 작게 나타내는 아주 중요한 요소입니다.
작지만 방문자에게 큰 인상을 줄 수 있어요.

파비콘(Favicon)이란?

"Favorite Icon"의 줄임말로, 웹 브라우저의

탭, 즐겨찾기 목록, 북마크바, 검색창 옆 등에

표시되는 작은 아이콘을 말합니다.

예를 들어, 유튜브는 빨간 ▶️, 구글은 G, 티스토리는 주황색 T 말풍선이죠.

파비콘이 표시되는 위치 예시

• 브라우저 탭 상단
• 모바일 브라우저의 URL 왼쪽
• 북마크나 즐겨찾기 목록
• 검색 결과 썸네일 (일부 플랫폼)

파비콘 기본 사양

항목내용

권장 사이즈	32x32px (기본), 16x16px, 48x48px, 64x64px 도 고려 가능
파일 형식	.ico, .png, .svg (가장 많이 쓰이는 것은 .ico 또는 .png)
용량	작을수록 좋음 (보통 50KB 이하)
배경	투명 PNG 사용 시 여러 테마에 자연스럽게 어울림

 

팁: 파비콘 제작 및 적용 시 유의사항

1. 심플한 디자인: 32px 이하의 작은 크기에서도 인식이 잘 되도록 선명하고 간단한 아이콘이 좋아요.
2. 배경 없음(투명 PNG): 다양한 배경색에서 잘 어울리도록!
3. ico 변환 툴: 아래 사이트에서 .png → .ico로 쉽게 변환할 수 있어요
   👉 https://favicon.io/
   👉 https://convertico.com/

티스토리에서 파비콘 설정하는 방법

1. 티스토리 관리자 페이지 접속
2. [스킨 편집] > [고급 설정]으로 이동
3. 파비콘 업로드 항목에서 .ico 또는 .png 파일 선택
4. 저장하고 블로그 새로고침!

다음은 이제 글을 쓰고 셈네일을 디자인 하는 방법입니다.

간단하게 만드는 방법은 미리캔버스나 캔바에서 직접 디자인해서 적용하면 됩니다.

티스토리 블로그용 썸네일 디자인 예시는 다음과 같은 스타일이 일반적으로 사용됩니다.

 

1. 텍스트 중심형 썸네일

• 특징: 배경에 흐릿한 이미지 + 굵은 한글 텍스트
• 용도: 정보성 글, 꿀팁, 후기 등
• 예시 설명:
  • 배경: 관련 이미지 (예: 노트북, 책상, 카페)
  • 텍스트: "2024 티스토리 수익 공개!"
  • 폰트: 나눔스퀘어, 배민체 등 시원한 느낌
  • 색상: 흰색 텍스트 + 어두운 배경 or 반대로 강조

2. 일러스트 + 텍스트 조합형

• 특징: 일러스트 또는 아이콘 + 핵심 키워드
• 용도: 가이드, 사용법, 리뷰 등
• 예시 설명:
  • 왼쪽: 캐릭터 일러스트 or 아이콘 (예: 돋보기, 검색창)
  • 오른쪽: "티스토리 블로그 시작 가이드"
  • 컬러톤: 파스텔 or 브랜드 컬러에 맞게 조정

3. 사진 강조형 (미니멀)

• 특징: 사진에 작은 텍스트만 삽입
• 용도: 여행, 음식, 일상 기록
• 예시 설명:
  • 배경: 제주도 바다 사진
  • 텍스트: "제주도 2박 3일 여행기"
  • 폰트: 얇고 깔끔한 서체 (예: 산돌고딕, Spoqa Han Sans)
   

반응형

 

이제 블로그의 첫 인상을 주는 이미지,

바로 스킨 변경을 하고 싶은 분들은 참고하시기 바랍니다.

저도 스킨을 캔바에서 제작하고 스킨 편집을 하려고 했더니,

갑자기 파일 유형을 제한하고 있어서

또 막힌 바람에 어렵게 적용해서 스킨 편집을 했습니다.

 

이미지 파일을 index.xml, skin.html, style.css

이런 유형의 파일로 바꾸려면 어떻게 해야 해?

 

1. 썸네일 이미지를 티스토리 스킨에 넣고 싶다면

즉, style.css, skin.html, index.xml 안에 이미지를 활용해서

디자인에 반영하고 싶을 경우, 아래처럼 하면 됩니다.

🔹 A. style.css에 이미지 배경으로 사용

css

 

.thumbnail { background-image: url('https://your-image-url.com/thumbnail.jpg'); background-size: cover; width: 300px; height: 200px; }

🔹 B. skin.html에 이미지 태그 직접 삽입

html

 

<div class="thumbnail"> <img src="https://your-image-url.com/thumbnail.jpg" alt="썸네일 이미지"> </div>

🔹 C. index.xml에는 주로 설정값이나 정보만 들어가므로, 이미지 URL을 저장하는 정도만 가능합니다.

2. 이미지를 실제로 .xml, .html, .css 파일로 '변환'하고 싶다면?

이미지 파일을 직접 .html, .css, .xml 파일로 "변환"하는 건 불가능합니다.
그러나 Base64 인코딩 방식을 이용하면 이미지 데이터를 코드 형태로 변환하여

직접 CSS나 HTML 안에 삽입할 수 있습니다.

🔹 예: Base64로 이미지 넣기 (CSS 예시)

css

 

.thumbnail { background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...'); }

🔹 사용법

1. https://www.base64-image.de/ 같은 사이트에서 이미지 업로드
2. Base64 인코딩된 문자열 복사
3. style.css나 skin.html에 삽입

정리하면:

• 이미지를 직접 .html이나 .css로 변환하는 건 불가능하지만
• 이미지 경로(URL) 또는 Base64 방식으로 HTML/CSS 파일에서 사용할 수 있습니다.

제가 캔바에서 스킨 제작을 하여 직접 스킨 편집을 하는 과정입니다.

Canva 이미지 링크를 티스토리 블로그의 스킨(HTML/CSS)에 썸네일 배경 이미지 등으로

설정하려면 아래와 같은 방식으로 할 수 있습니다.

 

1. Canva 이미지 링크를 직접 사용하기 전에 해야 할 일

제가 캔바 공유 링크를 가져와서 바로 설정을 하려고 했더니 적용이 안 되었어요.

현재 주신 링크는 Canva의 디자인 공유 페이지입니다.
👉 이 링크는 실제 이미지 주소가 아니기 때문에, HTML/CSS에서 바로 사용할 수 없습니다.

해결 방법: 이미지를 다운로드해서 실제 이미지 URL 확보하기

1. Canva 링크 열기
   → 디자인을 열고, 오른쪽 상단의 [공유] > [다운로드] 클릭
   → 형식은 JPG 또는 PNG 선택 후 다운로드
2. 티스토리 이미지 업로드하기
   방법 1: 새 글 작성 화면에서 이미지 업로드 후, URL 복사
   방법 2: 티스토리 스킨 편집 > 파일 업로드 탭에서 이미지 업로드
3. 업로드한 이미지 주소를 확인 (예: https://blog.kakaocdn.net/dn/xxx.jpg) 오른쪽 마우스 클릭하여 링크 주소 확인.

 2. HTML 또는 CSS에 이미지 적용하기

예시: 티스토리 글 목록 썸네일로 배경 이미지 넣기

▶ HTML (skin.html)

html

 

<div class="custom-thumbnail"> <p>블로그 썸네일</p> </div>

▶ CSS (style.css)

css

 

.custom-thumbnail { width: 100%; height: 200px; background-image: url('https://blog.kakaocdn.net/dn/xxx.jpg'); background-size: cover; background-position: center; border-radius: 12px; margin-bottom: 16px; }

3. 적용 위치 팁

• skin.html 파일에서 <article>, <section> 등 글 목록을 출력하는 위치에 넣으면 됩니다.
• style.css는 티스토리 스킨 편집 > HTML/CSS 편집 > style.css 파일에 추가하면 적용됩니다.

티스토리 스킨에 Canva 이미지를 배경처럼 적용하는 작업, 구체적으로 정리해서 아래처럼 진행하면 됩니다.

최종 목표

Canva에서 만든 이미지를 티스토리 스킨의 배경이나 특정 섹션에 삽입
→ HTML + CSS 편집을 통해 skin.html과 style.css에 반영

 1단계: Canva 이미지 준비

1. 이미지 링크 Canva 디자인을 엽니다:(본인 이미지 링크 주소)
2. 오른쪽 상단에서 [공유] → [다운로드] 클릭
   • 형식: PNG 또는 JPG
3. 티스토리 스킨 편집으로 이동
   • [티스토리 블로그 관리] → [스킨 편집] → [HTML 편집] → 파일 업로드 탭에서 방금 받은 이미지 업로드
4. 업로드한 이미지 주소 복사 (예: https://blog.kakaocdn.net/dn/xxx.jpg)

2단계: 이미지 HTML에 적용 (skin.html)

예를 들어 블로그 상단 배경에 삽입하려면:

html

 

<div class="custom-header-banner"> <h1>내 블로그 제목</h1> </div>

3단계: CSS 스타일 적용 (style.css)

css

 

.custom-header-banner { background-image: url('https://blog.kakaocdn.net/dn/xxx.jpg'); background-size: cover; background-position: center; height: 300px; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em; font-weight: bold; }

 4단계: 적용 확인 및 저장

• [미리보기]로 확인 후, 이상 없으면 [저장] 클릭!

요약

작업 항목                       설명

 

Canva 이미지	다운로드 후 티스토리에 업로드
HTML 위치	skin.html 내 원하는 위치에 <div class="custom-header-banner"> 삽입
CSS 적용	style.css에 .custom-header-banner 클래스의 스타일 추가

 

티스토리 스킨에 이미지를 넣는 법을 아주 쉽게 설명드릴게요.
기본적으로는 이미지를 업로드 → HTML에 코드 추가 → CSS로 스타일링 하면 됩니다.

티스토리 스킨에 이미지 넣는 방법 (3단계)

🔹 1단계: 이미지 업로드하기

1. 티스토리 블로그 → 관리 > 꾸미기 > 스킨 편집으로 이동
2. 오른쪽 상단 HTML 편집 클릭
3. 왼쪽 메뉴에서 [파일 업로드] 클릭
4. 이미지(.jpg, .png 등)를 업로드
5. 업로드 후 생긴 주소 복사 (예: https://blog.kakaocdn.net/dn/xxxxx.jpg)

🔹 2단계: HTML에 이미지 넣기

1. 왼쪽에서 skin.html 파일 클릭
2. <body> 태그 안에 아래 코드 추가:

html

 

<div class="custom-image"> <img src="https://blog.kakaocdn.net/dn/xxxxx.jpg" alt="내 이미지"> </div>

※ 위 주소는 본인이 업로드한 이미지 주소로 바꾸세요.

🔹 3단계: CSS로 꾸미기

1. 왼쪽에서 style.css 클릭
2. 맨 아래에 다음 코드 추가:

css

 

.custom-image img { width: 100%; max-width: 800px; display: block; margin: 20px auto; border-radius: 12px; }

적용 결과

• 이미지가 블로그 상단이나 원하는 위치에 삽입됨
• 반응형으로 크기가 자동 조절됨
• 깔끔하게 정중앙 정렬됨

보너스: 배경으로 넣고 싶을 경우

html

 

<div class="banner-area"> <!-- 안에 텍스트도 넣을 수 있음 --> </div>

 

css

 

.banner-area { background-image: url('https://blog.kakaocdn.net/dn/xxxxx.jpg'); background-size: cover; background-position: center; height: 300px; }

 

 

이상으로 티스토리 블로그 운영에 필요한 정보를 요약하여 정리해 봤습니다.

자주 접하지 않은 내용이라 조금은 어렵고 복잡하게 느껴질 수 있는데 천천히 차분하게

하나씩 하나씩 그대로 따라하면 적용이 되어 성취감을 분명 느낄 수 있을 거라 확신합니다.

 

티스토리 블로그의 운영 환경에 초보자도 빨리 익숙해져서

원활하게 블로그를 운영할 수 있도록 함께 응원해 봅니다.

그럼 모두 파이팅 하시고, 조금이라도 도움이 되셨다면,

👇 아래 공감 버튼 눌러주세요!

 

긴 글 읽어주셔서 감사합니다!

비가 오는 주말이지만 가족들과 행복한 주말 되시길 바랄게요~~^^

👀 함께 보면 좋은 글

 

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

 

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

 

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

 

 

 

#사이즈설정 #사이즈설정 태그 삭제 #티스토리에서파비콘설정하는방법

#티스토리블로그로고설정시주의할점 #닉네임정할때고려할점

#좋은블로그소개글을쓸때주의할점5가지