블로그 rss 꼭 써야할까? 티스토리와 블로그스팟 차이 ?alt=rss

이미지
📌 목차 1. rss란 무엇인가. 2. rss는 언제 필요할까. 3. rss가 구글 SEO에 미치는 영향 4. 티스토리, 블로그스팟에서 rss 주소 찾는 법 5. RSS 구독버튼 블로그에 넣는 법 6. 구글 서치콘솔에 RSS 제출하는 방법 7. 자주 묻는 질문 8. 마무리 티스토리와 블로그스팟에서 RSS 주소 찾는 방법부터 구독 버튼 넣는 법까지!  컴맹도 이해할 수 있는 쉬운 설명으로 블로그 방문자 늘리기. 블로그를 운영하면서 “내 글을 더 많은 사람들이 꾸준히 봤으면 좋겠다”는 생각, 다들 한 번쯤 해보셨죠?  하지만 요즘은 사람들이 일일이 블로그에 들어오지 않기 때문에, 고정 독자 확보 가 쉽지 않습니다.  이럴 때 도움이 되는 것이 바로 RSS 입니다.  이번 글에서는 티스토리와 블로그스팟 초보자도 이해할 수 있게 RSS란 무엇인지, 주소 찾는 방법, Atom과 RSS 2.0의 차이, RSS 리더기, 구글 서치콘솔에 등록 방법을  단계별로 안내합니다. 1. rss란 무엇인가. RSS 는 블로그에 새 글이 올라올 때마다 구독자에게 자동으로 알려주는 기능이에요. 쉽게 말해, 신문 배달부가 매일 신문을 집 앞에 가져다주는 것처럼 RSS는 새 글을 자동으로 배달 해주는 역할을 합니다. 2. rss 언제 필요할까. 왜 필요한가요? 구독을 위해 필요합니다. 블로그에 아무리 좋은 글을 써도 사람들이 들어오지 않으면 소용없습니다.  RSS 구독 버튼을 달아놓으면 한 번 구독한 사람들이 새 글을 놓치지 않고 읽게 됩니다.  특히, 티스토리·블로그스팟 블로그 는 RSS 주소가 기본 제공돼서 어렵지 않게 설정할 수 있어요. 3. rss가 구글 SEO에 미치는 영향 RSS는 검색순위에 직접적인 영향을 주지는 않아요. 구글은 이미 사이트맵(sitemap.xml)과 내부링크 구조 를 주요 크롤링 기준으로 삼습니다. RSS는 부가적인 크롤링 도움 도구 로 인식될 뿐입니다. RSS는...
댓글 쓰기

티스토리 모바일 버전에서 버튼 깨짐 현상 해결 방법 + 버튼코드 안내

📌 목차

1. 모바일 버전 버튼 깨짐의 원인
2. 반응형 디자인
3. 모바일 버전 버튼 깨짐이 있는 글의 수정 방법 두 가지
4. 모바일 화면 테스트
5. 마무리

당신의 블로그의 버튼, 모바일에서 깨지고 있는지도 모릅니다.


블로그를 운영하다 보면, PC 화면에서는 멀쩡한 버튼이 모바일 화면에서 깨져 보이거나 글자가 잘려 나가는 현상을 겪게 됩니다. 


특히 티스토리와 블로거(Blogger) 플랫폼을 함께 사용하는 운영자라면 이러한 문제로 고민한 경험이 한두 번이 아닐 것입니다. 


이번 글에서는 티스토리 모바일 버튼 깨짐 문제의 원인과 해결법을 알아보고, 초보 블로거도 손쉽게 적용할 수 있는 수정 방법을 소개합니다.


티스토리 모바일 버전 버튼 깨짐 해결법


1. 모바일 버전 버튼 깨짐의 원인

모바일 버튼 깨짐 현상은 주로 버튼 코드의 폭(width), 패딩(padding), 그리고 디스플레이(display) 방식 때문에 발생합니다.

  • PC에서는 충분한 여백 덕분에 버튼 안의 글자가 잘 보입니다.

  • 모바일에서는 화면 폭이 좁아지면서 버튼 안쪽 여백이 과도해지거나 고정된 폭 때문에 텍스트가 밀려 잘리게 됩니다.

  • 특히 <a style="..."> 방식으로 스타일을 직접 입력한 버튼들은 모바일 반응형 CSS 규칙과 충돌하여 문제가 더 잘 발생합니다.

이러한 문제를 방치하면 모바일 사용자들이 버튼을 클릭하기 불편해지고, 나아가 블로그의 사용자 경험(UX)과 애드센스 수익에도 부정적인 영향을 미칠 수 있습니다.


모바일 버전에서 버튼 깨짐 현상 예시


1-1) 폭 (width)이란?

버튼의 가로 길이를 말합니다.

예를 들어 width: 300px처럼 픽셀로 고정하면, PC 화면에선 괜찮지만 모바일에선 화면보다 넓거나 너무 좁아져 깨짐 현상이 생깁니다.


따라서 해결책으로는: width: 100%; max-width: 340px;

→ 폭을 화면에 맞게 자동 조절하면서 최대폭을 제한해요.


1-2) 패딩 (padding)이란?

버튼 안의 텍스트와 테두리 사이의 여백을 말합니다.

예를 들어, padding: 16px 80 px;

→ 이는 위아래 16px, 좌우 80px 여백을 뜻하는데, 모바일 화면에서는 좌우 여백이 너무 커서 버튼 글자가 밀리거나 잘립니다.


따라서 해결책으로는: padding: 14px 0; 

→ 이렇게 하여 좌우 여백을 없애고 위아래만 여백 주면 됩니다.


1-3) 디스플레이 (display)방식이란?

버튼 요소가 화면에 어떻게 배치될지 결정하는 속성을 말합니다.

기본 <a> 태그는 inline (한 줄에 쭉 나열) 방식이라 폭 조절이 안 됩니다.

따라서 해결책으로는: display: inline-block;

→ 이렇게 하여 폭과 높이 지정 가능하게 바꿔서 버튼처럼 보이게 하면 됩니다.


이것이 바로 반응형 디자인입니다!


2. 반응형 디자인

반응형 디자인은 PC, 태블릿, 스마트폰 등 화면 크기와 디바이스 종류에 따라 웹사이트 레이아웃과 요소들이 자동으로 조정되는 웹디자인 방식을 말합니다.

즉, 컴퓨터 모니터에서도 모바일에서도, 어떠한 기기에서도 최적화된 화면을 보여주는 것, 가령 버튼이 자연스럽게 나오도록 만드는 기술이 반응형 디자인 (Responsive web design)입니다.


  • 반응형 디자인은 기기 화면 크기에 따라 사이트 요소가 자동으로 재배치되도록 합니다.
  • 폭, 패딩, 디스플레이 속성을 반응형으로 설정하면 어떤 화면에서도 버튼이 깨지지 않습니다.

예를 들어,

PC에서는 글과 이미지가 가로 3열로 쭉 나열됩니다.
그런데 태블릿에서는 자동으로 2열로 줄어들고, 글자 크기도 조금 커집니다.
스마트폰에서는 한 줄씩 세로로 배치되어 화면에 맞추어 정렬됩니다.

이렇게 사용자가 화면을 확대, 축소하지 않아도 사이트가 알아서 화면 비율에 맞게 사이트 요소를 맞춰주는 것입니다.


2-1) 반응형 디자인이 왜 중요할까?


1. 우리가 글을 쓸 때는 PC 환경에서 써도 사용자환경은 모바일이 더 많습니다.

전체 웹 트래픽의 70% 이상이 스마트폰에서 발생합니다.


2. 구글 SEO 점수 반영

: 구글은 반응형 사이트를 우선적으로 노출시킵니다.


3. 유지보수 효율성

: 여러 버전을 만들 필요없이 한 번의 디자인으로 모든 기기가 지원됩니다.


2-2) 반응형 디자인 만드는 핵심 기술


1. 유동적인 그리드 시스템

px 대신 %, em, rem 으로 크기 설정합니다.

기존 px 단위는 고정된 크기입니다. 

예를 들어, 300px로 하면 큰 화면에서도 300px, 작은 화면에서도 300px로 나와서 

→ 작은 화면에서는 터져버릴 수 있습니다.


그래서 반응형 %, em, rem (비율 기반 크기) 등으로 만들면 화면 크기에 따라 비율로 조절이 되는 것입니다.

예를 들어, width: 50% 라고 설정하면 

→ 화면의 절반만 차지하여 큰 화면/작은 화면에 자동으로 맞추어지는 것이지요.



2. 미디어 쿼리 (CSS)

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}


이것은 화면 크기에 따라 다른 스타일을 적용하는 코드입니다.


즉, "화면 가로폭이 768px 이하이면, 글자 크기를 14px 로 바꿔라." 라고 명령하는 것입니다.

스마트폰이나 태블릿에서 글자가 커지지 않도록 맞출 수 있습니다.

화면이 좁아지면, 폰트, 버튼 크기, 여백 등 자동 조절이 가능해집니다.



3. 가변 이미지

: 이미지가 화면 폭에 맞춰 줄어들거나 늘어납니다.

img {
  max-width: 100%;
  height: auto;
}


이 뜻은 이미지가 화면 밖으로 삐져나가지 않도록 자동 줄어듭니다. 결과적으로 스마트폰에서도 이미지가 찌그러지지 않고 보여지게 됩니다.



2-3) 예시

✅ 문제 있는 버튼 (깨짐 예시)

<div style="text-align: center; margin: 20px;">

  <a style="background-color: #ff4d4f; color: black; padding: 16px 80px; text-decoration: none; font-weight: bold; font-size: 16px; border-radius: 6px;" href="#">예시 버튼</a>

</div>


문제: 고정된 padding: 16px 80px과 폭 설정이 모바일 화면에서 깨짐 현상을 유발합니다.


✅ 수정된 버튼 (정상 예시)

<div style="margin: 20px; text-align: center;">

  <a href="#" style="background-color: #ff4d4f; border-radius: 6px; color: black; font-size: 16px; font-weight: bold; padding: 14px 0; text-decoration: none; display: inline-block; width: 100%; max-width: 340px; box-sizing: border-box;">

    예시 버튼

  </a>

</div>


개선: 폭 자동조정 및 패딩 최적화로 모바일에서도 글자가 깨지지 않습니다.


패딩 최적화 

       padding: 14px 0; text-decoration: none; 

→ 위아래 (14px), 좌우 (0) 으로 지정하여 모바일에서 버튼 안 글자가 눌리지 않고 여백을 확보하게 됩니다.


 폭 최적화 

       display: inline-block; 

       width: 100%;           /* 화면 너비 100% 차지 (모바일 최적화) */

       max-width: 340px;      /* 최대폭 제한 (PC 화면에서 너무 넓어지지 않게) */

       box-sizing: border-box; /* 패딩과 테두리까지 포함해서 버튼 폭을 계산 */


3. 모바일 버튼 깨짐 현상이 있는 글의 수정 방법 두 가지

글이 100개가 넘었는데 뒤늦게 모바일에서 버튼 깨짐 현상이 있다는 것을 알게되었습니다.

이런 경우, 해결 방법은 두 가지가 있습니다.


1) html 버튼 코드를 일일이 수정하는 방법

글 수가 적은 경우에는 가능하겠지만, 글이 10개, 20개 이상만 있어도 사실 일일이 수정하기는 쉽지 않습니다.


<div style="margin: 20px; text-align: center;">

  <a href="#" style="background-color: orange; border-radius: 6px; color: white; font-size: 16px; font-weight: bold; padding: 14px 0; display: inline-block; width: 100%; max-width: 340px; box-sizing: border-box;">

    모바일 대응 버튼 예제

  </a>

</div>


2) CSS 로 한 방에 해결

이런 경우에는 CSS에 코드를 추가하여 전체 글에 적용이 되게 하면 됩니다.


경로는 다음과 같습니다.


티스토리 관리자 - 꾸미기 - 스킨편집 - CSS 


CSS 맨 아래에 다음의 코드를 추가해보세요.


.post-content a[style] {

  display: inline-block;

  width: 100%;

  max-width: 340px; /* 버튼 최대 폭 */

  text-align: center;

  padding: 14px 0 !important;

  border-radius: 6px;

  font-size: 16px;

  font-weight: bold;

  text-decoration: none;

  box-sizing: border-box;

}


/* 버튼 hover 효과 제거 */

.post-content a[style]:hover {

  background-color: inherit;

  color: inherit;

}


이 방법의 장점은 다음과 같습니다.

  • 기존 버튼 코드를 일일이 수정하지 않고 한 번에 적용할 수 있다.
  • 글이 많아도 일괄 수정이 가능하다.


4. 모바일 화면 테스트

수정 후에는 반드시 모바일 기기나 크롬 개발자 도구(F12) → "모바일 화면 보기" 기능을 사용해 버튼이 잘 나오는지 확인해야 합니다.

✅ 버튼 글자가 잘리지 않고 폭이 자동 조정되는지 확인하세요.



5. 마무리

블로그를 운영하면서 사용자들의 대부분이 모바일로 접속하는 시대입니다. 작은 화면에서도 버튼이 깔끔하게 나오도록 점검하는 것은 블로그의 신뢰도를 높이고 애드센스 승인에도 긍정적인 영향을 줍니다.

이제 여러분의 블로그 버튼은 모바일에서도 완벽하게 작동할 것입니다.



     이 블로그
조회수 높은
인기글 모음
확인하기
▲
맨위로
위치: Seoul, South Korea

댓글

댓글 쓰기

댓글은 예의 있게 남겨주세요 :)

이 블로그의 인기 게시물

Google Search Console 구글서치콘솔 등록시 sitemap 사이트맵 오류 해결 방법

이미지
📌 목차 1. 구글 서치콘솔,  꼭 등록해야 하는 이유 2. Sitemap.xml의 역할: 구글에 우리 블로그의 '목차'를 알리는 일 3. RSS 피드의 역할 4. sitemap.xml 제출 시 에러가 발생하는 이유 5. 해결 방법: sitemap 오류 발생 시 이렇게 하세요. (블로그스팟 기준) 6. 마무리 Google Search Console(서치콘솔)은 블로그 글이 검색엔진에 잘 노출되도록 도와주는 필수 도구입니다. 블로그스팟 (Blogger, 구글 블로거) 을 운영하면서도, 제대로 등록하고 설정하지 않으면 좋은 글을 써도 검색에 노출되지 않을 수 있습니다. 이 글에서는 실제 Blogspot 블로그스팟 블로그에서 겪은 사례를 바탕으로 sitemap 제출 시 발생하는 오류 원인과 해결방법, 그리고 RSS와 sitemap의 차이까지 함께 설명드리겠습니다. 1. 서치콘솔 등록, 꼭 등록해야 하는 이유 Blogspot 블로그스팟 블로그는 기본적으로 구글의 플랫폼입니다. 그럼에도 불구하고, 서치콘솔에 등록하지 않으면 내 블로그 글이 검색에 노출되는 속도가 매우 느려지거나 누락 될 수 있습니다. 서치콘솔을 등록하면 다음과 같은 효과를 기대할 수 있습니다: 블로그 전체 색인 상태 확인 가능 사이트맵 제출을 통한 빠른 글 노출 검색 유입 키워드 분석 구조화 데이터 오류 등 기술적 문제 확인 2. sitemap.xml이 하는 역할 sitemap.xml 은 말 그대로 내 블로그의 "지도"입니다. 검색엔진이 블로그의 구조를 빠르게 이해하고, 어떤 글이 있는지 확인하도록 도와줍니다. https://내 블로그주소.com/sitemap.xml sitemap에는 다음과 같은 정보가 담깁니다: 각 글의 주소(URL) 최종 수정일(dateModified) 우선순위(priority) 및 변경 빈도(changefreq)
자세한 내용 보기

블로그 글쓰기를 도와주는 무료 IT tool 툴 탑 10

이미지
📌 블로그 글쓰기를 도와주는 무료 툴 1. Grammarly 2. Notion 3. Canva 4. ChatGPT 5. Hemingway Editor 6. Google Docs 7. 네이버 맞춤법 검사기 8. Typora 9. Keyword Tool 10. Evernote 블로그 글쓰기를 도와주는 무료 IT 툴 TOP 10 블로그를 운영하다 보면 가장 많은 시간을 쓰게 되는 작업 중 하나가 바로 ‘글쓰기’입니다. 좋은 주제를 선정했다고 해도 실제로 글을 쓰는 과정에서 막히는 경우가 많고, 글의 흐름이 어색하거나 내용이 정리가 잘 안 되는 경우도 흔합니다. 이럴 때 유용하게 사용할 수 있는 것이 바로 글쓰기를 도와주는 무료 IT 툴 들입니다. 이 툴들은 글의 퀄리티를 높여주거나, 글쓰기 속도를 향상시키고, SEO까지 고려한 콘텐츠 작성을 가능하게 도와줍니다. 이번 포스팅에서는 실제로 블로그 운영자들이 많이 사용하는 무료 툴들을 엄선하여 소개합니다.  각 도구는 다양한 목적으로 활용되며, 초보자부터 숙련된 블로거까지 누구에게나 유용한 도구들입니다. 특히 애드센스를 목표로 하는 블로거라면, 콘텐츠 품질은 승인과 직결되기 때문에 꼭 활용해보시길 권장드립니다. 1. Grammarly (그래멀리) - 영어 문서 교정의 끝판왕 Grammarly는 영어로 블로그를 운영하거나, 글로벌 트래픽을 유도하기 위해 다국어 콘텐츠를 작성하는 경우 매우 유용한 도구입니다.  이 툴은 단순히 철자만 검사해주는 것이 아니라 문장 구조, 어투, 명확성까지 분석하여 수정 제안을 제공합니다. 장점: AI 기반의 고급 문법 교정, 문체 개선, 자동 제안 활용 팁: 한국어로 작성 후 DeepL로 번역 → Grammarly로 다듬기 자동 제안 문장이 의도와 다를 수 있으므로 최종 검토는 꼭 직접 하시기 바랍니다. DeepL은 세계적으로 많이 사용하는 AI 번역기입니다. 구글 번영보다 더 자연스럽고 정확한 문장 구조를 만들어주는 번역기로 평가받...
자세한 내용 보기

티스토리 글쓰기 모드 차이점 정리 - 기본모드 마크다운 html

이미지
목차 1. 기본모드 2. 마크다운 모드 3. html 모드 4. 어떤 모드를 사용하면 좋을까? 5. 마무리 티스토리를 처음 쓰는 분들이 가장 많이 헷갈려하는 것 중 하나가 글쓰기 화면에 있는 기본모드 / 마크다운 / HTML이라는 세 가지 편집 방식입니다. 처음에는 단순히 편집방식이 다르다고만 생각할 수 있지만, 이 모드에 따라 글의 구성 방식, 수정 가능 범위, 외부 코드 삽입 가능성 이 완전히 달라지므로 각 모드의 특성과 장단점을 정확히 이해하는 것이 매우 중요합니다. 이 글에서는 티스토리 블로그 운영 시 자주 사용하게 되는 글쓰기 모드 3가지의 개념과 차이점 , 그리고 상황에 따라 어떤 모드를 선택하면 좋은지 정리해 보았습니다. 1. 기본모드: 마우스로 편하게 글을 쓰는 위지윅 (WYSIWYG) 방식 ‘기본모드’는 마이크로소프트 워드나 네이버 블로그 에디터처럼 직관적인 편집 방식 입니다. ‘위지윅(WYSIWYG: What You See Is What You Get)’이라 불리는 방식으로, 눈에 보이는 대로 글을 쓰면 그대로 저장됩니다. ✅ 특징 마우스로 굵은 글씨, 링크, 정렬, 색상 등 손쉽게 적용 가능 표, 이미지, 목차 등 시각적 구성도 편리하게 만들 수 있음 코딩 지식이 없어도 누구나 쉽게 글 작성 가능 ❗ 한계 복잡한 레이아웃이나 애드센스 코드 삽입 등은 제약이 있음 디자인이나 정밀 제어가 어려움  추천 대상 블로그 글쓰기에 익숙하지 않은 초보자 정보성 글을 빠르게 작성하고 싶은 분 2. 마크다운 모드: 기호로 구성하는 간단한 문법 마크다운(Markdown)은 텍스트 기반의 글쓰기 포맷입니다. # , * , [링크] 등의 기호를 이용해 글의 제목, 굵은 글씨, 기울임 등을 표현할 수 있습니다. ✅ 장점 HTML보다 훨씬 간단한 문법으로 구조화된 글 작성 가능 개발자나 기술 블로거에게 유용 글 내용을 Markdown 포...
자세한 내용 보기