본문 이미지 정렬의 모든 것: 캡션 삽입과 테두리 효과로 전문성 높이기

본문 이미지 정렬의 모든 것 캡션 삽입과 테두리 효과로 전문성 높이기

이미지 정렬 완벽 가이드: 캡션 삽입과 테두리 효과로 블로그 전문성 3배 높이는 법

블로그에 이미지를 제대로 정렬하고, 캡션과 테두리 효과를 적용하면 글의 가독성과 신뢰도가 눈에 띄게 올라간다. 단순히 사진 한 장 올리는 것과, 정렬·캡션·테두리까지 신경 쓴 글은 독자 체류 시간부터 다르다.

나도 처음엔 그냥 이미지 올리고 끝냈는데, 어느 날 내 블로그랑 상위 노출된 블로그를 비교해보니 차이가 확 보이더라. 이미지 하나에도 신경 쓸 게 이렇게 많다는 걸 그때 알았다.

 

📋목차

• 이미지 정렬이 블로그에 미치는 영향
• HTML/CSS로 이미지 정렬하는 기본 방법
• 캡션 삽입으로 이미지 설명 추가하기
• 테두리 효과로 이미지 포인트 주기
• 티스토리 블로그에 바로 적용하는 법
• 자주 하는 실수와 해결 방법
• 마무리 및 추천 도구

📐 이미지 정렬이 블로그에 미치는 영향

"이미지 정렬"은 단순히 보기 좋은 문제가 아니다. 구글 SEO 관점에서도 이미지의 alt 태그, 위치, 크기는 검색 노출에 직접 영향을 준다. 사진이 삐뚤게 올라가거나 텍스트랑 겹쳐 있으면 독자 이탈률이 올라가고, 체류 시간이 줄어든다. 그 결과는 검색 순위 하락으로 이어진다.

정렬이 잘 된 이미지는 글의 흐름을 자연스럽게 이어준다. 특히 모바일 환경에서는 이미지 정렬이 더 중요한데, PC에서 멀쩡해 보여도 모바일에서 깨지는 경우가 생각보다 많다.

🖥️ HTML/CSS로 이미지 정렬하는 기본 방법

HTML에서 이미지를 정렬하는 방법은 크게 세 가지다. 왼쪽, 오른쪽, 가운데 정렬이다. 예전에는 align 속성을 썼지만 지금은 CSS float나 flexbox를 쓰는 게 표준이다.

가운데 정렬이 가장 기본이다. 이미지를 블록 요소로 만들고 margin을 auto로 설정하면 된다.

img {
display: block;
margin: 0 auto;
}

왼쪽이나 오른쪽으로 텍스트가 감싸는 형태를 원한다면 float를 쓴다.

img.left {
float: left;
margin: 0 15px 10px 0;
}
img.right {
float: right;
margin: 0 0 10px 15px;
}

float 사용 후에는 꼭 clearfix를 적용해야 레이아웃이 무너지지 않는다. 이걸 빠뜨리면 아래 콘텐츠가 이미지 옆으로 붙어버리는 현상이 생긴다.

.clearfix::after {
content: "";
display: table;
clear: both;
}

📝 캡션 삽입으로 이미지 설명 추가하기

"캡션 삽입"은 이미지 아래에 짧은 설명을 다는 작업이다. SEO 측면에서도 유리하고, 독자 입장에서도 이미지가 무엇을 의미하는지 바로 파악할 수 있어서 좋다.

HTML5에서는 figure와 figcaption 태그를 공식적으로 지원한다. 이게 가장 시맨틱하고 검색엔진 친화적인 방법이다.

이미지 설명을 여기에 적는다

figcaption에는 이미지 출처, 설명, 날짜 같은 정보를 자유롭게 넣을 수 있다. 다만 너무 길면 오히려 방해가 되니 1~2줄 이내로 간결하게 작성하는 게 포인트다.

CSS로 캡션 스타일을 꾸미면 훨씬 깔끔해 보인다.

figcaption {
text-align: center;
font-size: 13px;
color: #888;
margin-top: 6px;
}

🖼️ 테두리 효과로 이미지 포인트 주기

"테두리 효과"는 이미지에 border 속성을 적용해 시각적으로 구분감을 주는 방법이다. 전문적인 블로그나 포트폴리오 사이트에서 자주 쓰는 기술인데, 의외로 간단하다.

기본 테두리는 이렇게 준다.

img {
border: 2px solid #ddd;
border-radius: 8px;
}

여기에 box-shadow까지 더하면 이미지가 살짝 떠 있는 느낌을 줄 수 있다.

img {
border: 2px solid #e0e0e0;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

색상 테두리를 활용하면 강조 효과도 낼 수 있다. 블로그 메인 컬러에 맞춰 테두리 색상을 통일하면 일관성 있는 디자인이 완성된다.

🛠️ 티스토리 블로그에 바로 적용하는 법

티스토리는 스킨 편집 → HTML 탭에서 직접 코드를 수정할 수 있다. 이미지 관련 스타일은 보통 .tt_article_useless_p_margin img 같은 클래스에 담겨 있다.

전역으로 이미지 스타일을 적용하고 싶다면 스킨 CSS에 아래처럼 추가하면 된다.

.tt_article_useless_p_margin img {
display: block;
margin: 10px auto;
border: 1px solid #eee;
border-radius: 8px;
max-width: 100%;
}

max-width: 100%는 모바일 대응을 위해 반드시 넣어야 한다. 이게 없으면 모바일에서 이미지가 화면을 벗어나버린다.

글 작성 시 개별 이미지에 직접 스타일을 넣고 싶다면 HTML 편집 모드에서 style 속성을 직접 추가하면 된다.

⚠️ 자주 하는 실수와 해결 방법

이미지 정렬을 처음 적용할 때 가장 많이 하는 실수가 alt 속성 누락이다. alt가 없으면 SEO 점수가 깎이고, 시각 장애인용 스크린 리더에서도 정보를 제대로 전달하지 못한다. 귀찮더라도 이미지마다 alt 텍스트를 꼭 넣자.

두 번째 실수는 이미지 용량 최적화 없이 올리는 것이다. 고화질 이미지를 그대로 올리면 페이지 로딩 속도가 느려지고, 이는 Core Web Vitals 점수에 직접 영향을 준다. TinyPNG나 Squoosh 같은 무료 도구로 압축 후 업로드하는 걸 습관화하자.

세 번째는 float 사용 후 clearfix를 빠뜨리는 것. 이미지 아래 콘텐츠가 이상하게 붙어서 레이아웃이 무너지는 현상이 생긴다. float를 쓸 때는 항상 clearfix를 세트로 기억하면 된다.

✅ 마무리 및 추천 도구

이미지 정렬, 캡션 삽입, 테두리 효과 — 이 세 가지만 잘 챙겨도 블로그 퀄리티가 한 단계 달라진다. 처음에는 번거롭게 느껴질 수 있지만, 한 번 CSS에 스타일을 등록해두면 이후에는 클래스만 추가하면 되니까 생각보다 간단하다.

특히 티스토리에서 애드센스 승인을 목표로 하고 있다면 이미지 관련 최적화는 필수다. 이미지 alt 텍스트, 적절한 정렬, 모바일 대응 — 이 세 가지가 구글 품질 평가 기준에서 중요하게 작용한다.

추천 도구로는 TinyPNG(이미지 압축), Canva(썸네일 제작), Google PageSpeed Insights(성능 체크)를 활용하면 좋다.

---

출처 및 참고
- MDN Web Docs: https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure
- Google Search Central: https://developers.google.com/search/docs/appearance/google-images
- TinyPNG: https://tinypng.com