티스토리 이미지 안 잘리게 넣는 방법｜모바일 화면에 맞게 표시하는 HTML 설정

티스토리에 이미지를 올렸는데 PC에서는 정상적으로 보이지만 스마트폰에서는 이미지 오른쪽이 잘리거나 화면 밖으로 튀어나오는 경우가 있습니다.

특히 직접 만든 배너, 가로로 긴 캡처 화면, 표를 이미지로 저장해 올렸을 때 이런 현상이 나타나기 쉽습니다.

이럴 때 무조건 이미지를 다시 만들 필요는 없습니다.

이미지가 본문 영역보다 커지지 않도록 가로폭을 제한하고, 세로 크기는 원본 비율에 맞춰 자동으로 조절되도록 설정하면 모바일에서도 훨씬 안정적으로 표시할 수 있습니다.

이번 글에서는 티스토리 이미지가 모바일에서 잘리는 이유부터 HTML에서 확인할 부분, 실제 적용 방법, 그래도 해결되지 않을 때 점검할 부분까지 순서대로 정리해보겠습니다.

✓ 티스토리 이미지가 모바일에서 잘리는 이유

먼저 원인을 구분해야 합니다.

대표적인 원인은 다음과 같습니다.

이미지에 고정된 가로 크기가 지정되어 있는 경우

원본 이미지가 지나치게 가로로 긴 경우

티스토리 스킨의 본문 영역보다 이미지가 큰 경우

이미지 태그에 반응형 크기 설정이 적용되지 않은 경우

스킨 CSS가 이미지 크기를 별도로 지정하고 있는 경우

따라서 처음부터 스킨 HTML이나 CSS를 수정하기보다는 문제가 발생한 이미지부터 확인하는 것이 좋습니다.

✓ 가장 먼저 모바일 화면에서 확인하세요

PC 화면에서 정상적으로 보인다고 해서 스마트폰에서도 반드시 정상적으로 보이는 것은 아닙니다.

글을 발행하거나 미리보기 한 뒤 실제 스마트폰에서 확인해보세요.

이미지 오른쪽이 잘리는지

본문 영역 밖으로 튀어나오는지

이미지 비율이 찌그러지는지

이미지 안의 글자가 너무 작아지는지

좌우 여백이 지나치게 넓지는 않은지

이 부분을 먼저 확인하면 어떤 문제를 해결해야 하는지 판단하기 쉬워집니다.

[이미지 위치 ① : PC에서는 정상인데 모바일에서 이미지가 잘려 보이는 화면]

✓ 모바일 이미지에서 가장 중요한 두 가지 설정

이미지가 모바일 화면보다 커지지 않게 만들 때 기본적으로 알아두면 좋은 CSS 속성은 다음 두 가지입니다.

max-width: 100%;

height: auto;

각각 역할이 다릅니다.

max-width:100%는 이미지가 자신을 담고 있는 영역보다 커지는 것을 제한합니다.

height:auto는 이미지의 가로 크기가 변경될 때 세로 크기도 원본 비율에 맞게 자동으로 조절되도록 합니다.

두 가지를 함께 사용하면 화면이 작은 모바일에서도 이미지가 본문 영역을 벗어나는 문제를 줄일 수 있습니다.

✓ 티스토리 HTML에서 확인하는 방법

티스토리 글쓰기 편집기에서 HTML 모드로 전환하면 게시글을 구성하는 코드를 확인할 수 있습니다.

이미지가 들어간 부분에서는 img 태그를 찾을 수 있습니다.

기본적인 예시는 다음과 같습니다.

<img src="이미지주소">여기에서 이미지가 화면보다 커지지 않도록 스타일을 적용하는 기본 형태는 다음과 같습니다.

<img src="이미지주소" style="max-width:100%; height:auto;">여기서 주의할 점이 있습니다.

실제 게시글에 위 코드의 ‘이미지주소’라는 글자를 그대로 입력하는 것이 아닙니다.

티스토리에 이미지를 업로드하면 실제 이미지 주소와 편집기에 필요한 여러 정보가 자동으로 생성될 수 있습니다.

따라서 기존 이미지 코드를 통째로 삭제하기보다는 기존 정보는 유지하면서 필요한 크기 설정을 확인하는 방식이 안전합니다.

[이미지 위치 ② : 티스토리 글쓰기에서 HTML 모드로 전환하는 화면]

✓ 기존 이미지 코드 전체를 바꾸지 마세요

HTML에 익숙하지 않다면 이 부분이 중요합니다.

티스토리에 이미지를 업로드하면 단순한 img 태그 외에도 이미지 표시와 편집에 필요한 정보가 함께 들어갈 수 있습니다.

따라서 인터넷에서 찾은 간단한 img 코드를 복사해서 기존 코드 전체를 교체하는 방식은 권하지 않습니다.

기존 이미지가 정상적으로 업로드되어 있다면 이미지 주소와 티스토리가 만든 정보는 그대로 두고 필요한 스타일 부분만 확인하거나 수정하는 것이 좋습니다.

수정하기 전 원래 HTML을 메모장 등에 복사해두면 문제가 생겼을 때 다시 되돌리기도 쉽습니다.

[이미지 위치 ③ : 기존 이미지 HTML 코드에서 img 태그를 확인하는 화면]

✓ width:100%와 max-width:100% 차이

두 설정은 비슷해 보이지만 의미가 다릅니다.

width:100%는 이미지 가로폭을 부모 영역의 100%에 맞추는 방식입니다.

따라서 원래 크기가 작은 이미지도 본문 영역 전체 폭으로 확대될 수 있습니다.

반면 max-width:100%는 이미지가 본문 영역보다 커지는 것을 제한하는 방식입니다.

원본 이미지가 본문 영역보다 작다면 무조건 전체 폭으로 확대할 필요가 없습니다.

따라서 단순히 ‘모바일에서 이미지가 화면 밖으로 나가지 않게 하고 싶다’는 목적이라면 max-width:100%와 height:auto 조합을 먼저 확인해볼 수 있습니다.

✓ 고정된 width 값이 있는지도 확인하세요

이미지 HTML을 살펴봤을 때 가로폭이 숫자로 고정되어 있을 수 있습니다.

예를 들어 설명을 위한 단순한 형태로 보면 다음과 같습니다.

<img src="이미지주소" width="900">이처럼 900px 등의 고정된 가로 크기가 적용되어 있고 스킨에서 이를 모바일 화면에 맞게 조절하지 못한다면 이미지가 잘려 보일 수 있습니다.

이럴 때는 원본 이미지를 무조건 다시 만들기 전에 해당 이미지에 고정된 크기가 있는지 먼저 확인합니다.

필요한 경우 화면 크기를 넘지 않도록 다음과 같은 반응형 설정을 적용할 수 있습니다.

<img src="이미지주소" style="max-width:100%; height:auto;">단, 실제 티스토리 이미지 코드에는 다른 속성이 함께 들어 있을 수 있으므로 코드 전체를 위 예제로 바꾸는 것은 피하는 것이 좋습니다.

✓ 이미지 가운데 정렬까지 하고 싶다면

이미지 크기를 모바일 화면에 맞추면서 가운데에 배치하고 싶을 수도 있습니다.

기본적인 HTML 예시는 다음과 같습니다.

<img src="이미지주소" style="display:block; max-width:100%; height:auto; margin:0 auto;">각 속성의 역할은 다음과 같습니다.

display:block

이미지를 블록 요소처럼 표시합니다.

max-width:100%

이미지가 본문 영역보다 커지는 것을 제한합니다.

height:auto

가로 크기가 달라져도 원본 이미지 비율을 유지합니다.

margin:0 auto

좌우 여백을 자동으로 설정해 가운데 배치하는 데 사용할 수 있습니다.

다만 티스토리 편집기에서 이미 가운데 정렬을 적용했다면 굳이 같은 설정을 중복해서 넣을 필요는 없습니다.

[이미지 위치 ④ : 이미지가 본문 가운데 정상적으로 표시되는 모바일 화면]

✓ 이미지가 안 잘리는데 글자가 너무 작다면?

HTML 설정을 적용한 뒤 이미지 전체가 화면 안으로 들어왔는데 이미지 속 글자가 너무 작아질 수도 있습니다.

이것은 HTML 문제가 아니라 원본 이미지 구성의 문제일 가능성이 높습니다.

예를 들어 PC 화면을 가로로 길게 캡처해 한 장으로 올렸다면 모바일에서는 전체 이미지를 작은 화면 안에 표시해야 하기 때문에 글자도 함께 작아집니다.

이럴 때는 긴 이미지 한 장을 고집하기보다 중요한 부분을 나누는 것이 좋습니다.

가로로 긴 캡처 한 장

→ 중요한 부분을 2~3장의 이미지로 나누기

내용이 많은 표 이미지

→ 핵심 항목별로 나누기

설정 화면 전체 캡처

→ 실제로 눌러야 할 메뉴 중심으로 잘라서 사용하기

모바일에서는 독자가 이미지를 확대하지 않아도 내용을 알아볼 수 있는 정도가 좋습니다.

✓ 표가 잘리는 문제는 이미지와 다릅니다

HTML로 작성한 표가 모바일에서 잘리는 경우도 있습니다.

하지만 표와 이미지는 해결 방법이 완전히 같지는 않습니다.

이미지는 max-width:100%를 이용해 화면에 맞게 축소할 수 있지만, 열이 많은 HTML 표는 내용 자체의 가로폭이 모바일 화면보다 넓을 수 있습니다.

이때 글자를 지나치게 작게 만드는 것보다는 표의 항목을 줄이거나 여러 부분으로 나누거나 모바일에서 읽기 좋은 문장 형태로 바꾸는 방법도 고려하는 것이 좋습니다.

따라서 이미지에 사용하는 설정을 표에 그대로 적용하면 모든 문제가 해결된다고 생각하면 안 됩니다.

✓ 원본 이미지도 함께 확인하세요

HTML 설정이 정상인데도 모바일에서 이미지가 보기 불편하다면 원본 파일 자체도 살펴보세요.

이미지에 불필요한 좌우 여백이 많은지

가로로 지나치게 긴 이미지인지

이미지 안의 글씨가 너무 작은지

중요한 글자나 그림이 가장자리에 붙어 있는지

업로드 후 화질이 지나치게 떨어지는지

특히 제목 이미지나 카드뉴스를 만들 때 중요한 글자와 그림을 이미지 끝부분에 너무 가깝게 배치하지 않는 것이 좋습니다.

모바일 환경에서는 화면 크기와 표시 방식이 달라질 수 있기 때문에 중요한 요소 주변에 어느 정도 여백을 두는 편이 안정적입니다.

✓ HTML을 수정했는데도 이미지가 잘린다면?

max-width와 height를 확인했는데도 문제가 계속된다면 다음 순서로 점검합니다.

첫째, 해당 이미지에 고정된 width 값이 있는지 확인합니다.

둘째, max-width:100%와 height:auto가 실제 이미지에 적용됐는지 확인합니다.

셋째, 티스토리 편집기에서 이미지 크기를 별도로 지정했는지 확인합니다.

넷째, 다른 게시글의 이미지에서도 같은 문제가 발생하는지 확인합니다.

다섯째, 여러 글에서 동일한 현상이 반복된다면 사용하는 스킨의 이미지 관련 CSS를 확인합니다.

특정 이미지 하나만 문제가 있다면 해당 이미지나 이미지 태그를 먼저 살펴보는 것이 좋습니다.

반대로 여러 게시글의 이미지가 모두 같은 방식으로 잘린다면 스킨 설정의 영향을 의심해볼 수 있습니다.

✓ 스킨 HTML·CSS 수정은 마지막에 하세요

이미지 한 장이 잘린다는 이유로 처음부터 티스토리 스킨 HTML이나 CSS를 수정하는 것은 피하는 것이 좋습니다.

스킨 CSS는 한 게시글이 아니라 블로그 전체에 영향을 줄 수 있기 때문입니다.

잘못 수정하면 정상적으로 표시되던 다른 게시글의 이미지나 본문 레이아웃까지 달라질 수 있습니다.

따라서 다음 순서로 접근하는 것이 안전합니다.

문제가 있는 이미지 확인

→ 해당 이미지 HTML 확인

→ 고정된 크기 확인

→ 반응형 크기 설정 확인

→ 실제 모바일에서 확인

→ 여러 글에서 동일한 문제가 있을 때 스킨 CSS 확인

스킨을 직접 수정해야 한다면 변경 전에 기존 코드를 반드시 별도로 보관해두는 것이 좋습니다.

✓ HTML 수정 전 꼭 백업하세요

코드를 직접 수정할 때 가장 간단하면서 중요한 방법입니다.

변경하기 전에 해당 이미지 주변 HTML을 복사해 메모장 등에 저장해두세요.

수정 후 이미지가 사라지거나 배치가 이상해지면 기존 코드를 다시 확인할 수 있습니다.

HTML에 익숙하지 않을수록 한 번에 여러 부분을 바꾸지 말고 하나씩 수정한 뒤 결과를 확인하는 것이 좋습니다.

✓ 실제로 따라 하는 순서

티스토리 이미지가 모바일에서 잘린다면 아래 순서대로 확인해보세요.

1. 문제가 있는 게시글을 엽니다.

2. 실제 스마트폰에서 이미지가 어떻게 보이는지 확인합니다.

3. 티스토리 글쓰기에서 해당 게시글의 HTML을 확인합니다.

4. 문제가 있는 이미지의 img 태그를 찾습니다.

5. 고정된 width 값이 적용되어 있는지 확인합니다.

6. 필요한 경우 max-width:100%와 height:auto 설정을 확인하거나 적용합니다.

7. 저장한 뒤 실제 모바일 화면에서 다시 확인합니다.

8. 이미지가 정상적으로 표시되면 다른 코드는 건드리지 않습니다.

9. 여러 게시글에서 동일한 문제가 반복될 때만 스킨 CSS를 추가로 점검합니다.

[이미지 위치 ⑤ : 수정 전과 수정 후 모바일 이미지 비교]

✓ 자주 하는 실수

이미지가 잘린다고 원본 이미지를 무조건 작게 다시 만드는 경우가 있습니다.

하지만 원인이 고정된 width나 스킨 CSS라면 이미지를 다시 만들어도 같은 문제가 반복될 수 있습니다.

또 width:100%와 max-width:100%를 완전히 같은 설정으로 생각하기 쉽습니다.

작은 이미지까지 본문 전체 폭으로 확대할 필요가 없다면 두 설정의 차이를 알고 사용하는 것이 좋습니다.

기존 이미지 HTML 전체를 삭제하고 예제 코드를 그대로 붙여 넣는 것도 피하는 것이 좋습니다.

마지막으로 PC 화면만 보고 수정이 끝났다고 판단하지 마세요.

모바일 최적화가 목적이라면 실제 스마트폰 화면에서 최종 확인하는 과정이 필요합니다.

✓ 자주 묻는 질문

Q. 모든 이미지에 HTML 코드를 직접 넣어야 하나요?

아닙니다. 사용하는 티스토리 스킨에서 이미지가 정상적으로 반응형으로 표시되고 있다면 모든 이미지마다 코드를 수정할 필요는 없습니다. 문제가 발생하는 이미지부터 확인하는 것이 좋습니다.

Q. max-width:100%만 넣으면 되나요?

가로폭을 제한하는 데 도움이 됩니다. 이미지의 가로 크기가 변경될 때 세로 비율을 자연스럽게 유지하기 위해 height:auto도 함께 사용하는 경우가 많습니다.

Q. width:100%를 사용하면 안 되나요?

사용할 수 있습니다. 다만 부모 영역의 전체 폭을 기준으로 이미지 크기를 지정하기 때문에 작은 이미지도 크게 표시될 수 있습니다. 단순히 화면 밖으로 나가는 것을 막는 목적이라면 max-width와의 차이를 알고 선택하는 것이 좋습니다.

Q. 이미지를 수정했는데도 계속 잘립니다.

특정 이미지가 아니라 여러 게시글에서 같은 문제가 발생한다면 스킨 CSS에서 이미지 폭이나 본문 영역을 별도로 지정하고 있는지 확인해볼 필요가 있습니다.

Q. 모바일에서 이미지 전체는 보이는데 글자가 너무 작습니다.

가로로 긴 원본 이미지가 축소되면서 글자까지 작아진 경우가 많습니다. 긴 캡처나 표 이미지를 여러 장으로 나누어 올리는 방법이 더 읽기 편할 수 있습니다.

Q. HTML을 잘못 수정하면 어떻게 하나요?

수정하기 전에 기존 코드를 복사해두는 것이 가장 안전합니다. 문제가 생겼다면 변경한 부분을 되돌리고 원래 코드와 비교해보세요.

✓ 최종 체크리스트

모바일에서 이미지가 본문 밖으로 나가는지 확인

이미지에 고정된 width 값이 있는지 확인

max-width:100% 적용 여부 확인

height:auto 적용 여부 확인

width:100%와 max-width:100% 차이 확인

기존 티스토리 이미지 코드를 통째로 삭제하지 않기

이미지 안의 글자가 모바일에서도 읽히는지 확인

가로로 긴 캡처는 필요한 부분별로 나누기

PC와 실제 스마트폰 화면 모두 확인

특정 이미지인지 블로그 전체 문제인지 구분

스킨 CSS 수정은 마지막에 진행

스킨이나 HTML 수정 전 기존 코드 백업

✓ 핵심 정리

티스토리 이미지가 모바일에서 잘린다면 이미지를 무조건 다시 만들기보다 먼저 이미지의 크기 설정을 확인하는 것이 좋습니다.

기억해두면 좋은 기본 설정은 다음 두 가지입니다.

max-width: 100%;

height: auto;

이미지가 본문 영역보다 커지는 것을 제한하면서 원본 비율을 유지하는 데 사용할 수 있습니다.

다만 티스토리가 자동으로 생성한 기존 이미지 코드를 예제 코드로 통째로 바꾸기보다는 필요한 속성만 확인하고 수정하는 것이 안전합니다.

특정 게시글의 이미지부터 확인한 뒤 여러 게시글에서 같은 문제가 반복될 때 스킨 CSS까지 점검하는 순서로 진행하면 불필요한 수정을 줄일 수 있습니다.

📌 한 줄 요약

티스토리 이미지가 모바일에서 잘린다면 고정된 이미지 폭부터 확인하고, max-width:100%와 height:auto를 이용해 본문 영역을 넘지 않도록 설정한 뒤 실제 스마트폰에서 최종 확인하세요.