블로그 디자인, 이미지 캡션 폰트.컬러 변경하기

블로그의 콘텐츠는 주제에 따라 텍스트, 이미지, 멀티미디어 중심의 다양한 형태로 작성된다. 보편적으로 텍스트 형태가 주류를 이루고 있지만, 텍스트 중심의 콘텐츠도 보다 돋보이고, 독자에게 내용의 이해와 시각적인 즐거움을 제공하기 위해 관련 이미지를 첨부하는 성향이 두드러지고 있다.

텍스트만 있는 콘텐츠라고 해서 가치가 절하되거나 블로그 디자인에 영향을 주는 것은 결코 아니다. 하지만 이왕이면 다홍치마라고 보기좋은 떡이 먹기도 좋은 까닭이다. 관련 이미지가 첨부되면 일단 독자에게 시각적으로 볼거리가 제공하고, 콘텐츠 집중도를 높이며 한걸음 나아가 블로그 디자인에도 좀 더 생기를 띄게 만드는 시너지 효과를 발휘하게 된다.

이미지 캡션 폰트, 컬러 변경이 적용된 블로그 디자인

가급적이면 가로.세로 500~600픽셀(Pixel)을 넘지 않는 다수의 이미지 첨부가 검색엔진 최적화(S.E.O)에도 좋은 효과를 기대할 수 있다는 비공식 보고도 있지만, 실제로 블로그 운영에 접목시켜 보면 상당히 좋은 결과를 나타내 보이기도 했다. 그냥 관련 이미지만 첨부해선 좋은 효과를 기대하긴 힘들다. 이미지를 읽지 못했을 때 보일 대체 텍스트와 해당 이미지를 설명하는 자막, 즉 캡션을 적절히 활용해야 한다.

티스토리 편집모드, 대체 텍스트, 이미지 캡션 입력

티스토리의 경우, 글에 이미지를 첨부하고 해당 이미지를 클릭하면 우측 패널에 이미지 크기를조정하는 너비, 대체 텍스트, 이미지 하단 설명을 적는 자막 입력 패널이 보이게 된다. 너비는 이미지의 가로 기준 크기를 지정하게 되고, 대체 텍스트는 해당이미지에 문제가 있을 때, 이미지를 대체해서 보여주는 텍스트로 검색엔진에 반영된다. 자막은 해당 이미지의 부연 설명을 담당하는 기능을 하게 된다.

본론으로 들어가서, 블로그 콘텐츠 작성에 있어 이미지 첨부도 중요하지만 대체 텍스트와 자막(Caption)을 잘 활용하면 콘텐츠가 깔끔하게 정리되어 독자들이 보기 좋은 콘텐츠로 한결 돋보이게 만들 수 있다. 일반적으로 대체 텍스트와 자막(Caption)을 입력하면 style.css에서 본문과 Caption 항목에 정의된 폰트와 컬러로 표현되어 잘 구분되지 않거나 본문에 묻혀 지나가는 경우가 많다. 하지만 이것을 좀 더 돋보이는 자신만의 폰트와 컬러로 변경해 해당 콘텐츠 관련 이미지에 집중도를 높이고, 전체적인 블로그 디자인을 돋보이는 효과를 얻을 수 있는 방법을 알아 보려는 것이다.

먼저 첨부 이미지 자막(Caption)의 폰트와 컬러를 변경하기 위해서 블로그 관리자 모드로 접속해 [스킨 > HTML/CSS 편집]을 선택한 다음 skin.html 아래 style.css 창으로 이동을 한다. 그리고 아래로 스크롤 해 /* 이미지 아래 캡션 스타일 */이란 주석문을 찾고 그 아래 스타일 정의를 변경하면 된다.

style.css의 이미지 캡션 스타일 위치

HTML이나 CSS에 관한 지식이 있는 블로거라면 어렵지 않게 변화를 줄 수 있지만, 일반 블로거라면 쉽지 않는 부분이고, 잘못하면 블로그 전체가 엉망이 되기도 하므로 조심스러울 수밖에 없어 아예 변화를 줄 생각을 가지지 않기도 한다. 이제부터 간단한 아래 설명을 참고해 자신의 블로그 콘텐츠를 한결 돋보이게 만들어 보길 바란다.

이미지 캡션 기본 CSS 정의

일반적인 티스토리의 경우, 위의 그림과 같이 이미지 자막(caption)의 컬러와 정렬에 대해서만 정의가 되어 있다. 이것을 자신이 원하는 스타일로 변경하면 되는데, CSS에 대해 익숙하지 않은 사용자를 위해 폰트와 컬러, 다른 브라우저를 감안한 대체 폰트 등을 어떻게 정의를 해야 하는지 아래의 샘플 이미지를 통해서 설명한다.

이미지 자막(caption) CSS 정의 예제

먼저  '.cap1'은 이미지 자막을 지정하는 것이므로 그대로 두고 컬러로 마킹한 부분만 참고하여 수정하면 된다. 보라색 부분은 폰트의 크기를 지정한 것이고, 핑크색은 자막의 폰트를 지정한 부분인데 여기서 우리새봄은 웹폰트를 사용하지 않으면 '돔움'이나, '맑은 고딕'으로 변경하면 무난하다. 그리고 이어지는 영문폰트는 사파리 브라우저와 파이어폭스 유저를 감안한 대체폰트의 나열이다. 블루부분은 자막의 색상을 정의한 것이며, 연두색 컬러부분은 자막의 위치정렬을 정의한 것이다.

앞서 설명한 이미지 캡션 CSS스타일을 적용했을 때, 위의 이미지 하단의 자막(Caption) 처럼 지정한 폰트와 폰트 크기, 컬러가 적용된 결과로 나타난다.

참고로 표준폰트 기준 이미지 자막 css 정의 코드를 아래에 작성해 놓아 티스토리 사용자를 위한 복사 후 기존의 캡션 스타일에 붙여넣기하여 쓸 수 있도록 했다.
(폰트크기-12픽셀, 폰트-맑은 고딕, 돋움, 애플고딕 외, 컬러-블루, 자막정렬- 중앙)

 /* 이미지 아래 캡션 스타일 */
    .cap1   { font:12px/1.7 Malgun Gothic, Dotum, AppleGothic, Arial, Verdana, Sans-serif; color:#00F; text-align:center;}

위의 내용을 참고해 이미지 자막의 폰트와 컬러를 변경한 다음 저장하게 되면 자신이 지정한 폰트, 폰트 크기 그리고 컬러로 모든 콘텐츠 첨부 이미지의 자막(caption)변경된 것을 확인할 수 있게 된다. 단순한 작업이기도 하지만 몰랐을 때는 아쉬운 부분이고, 그렇게 비중있는 과정은 아니지만 최소한 블로그를 운영하면서 자신의 글을 시각적으로 편하고 보다 돋보이는 콘텐츠를 제공하려는 노력은 독자들을 위한 성의있는 배려이자 팬 서비스 차원으로 생각하면 좋지 않을까 싶다. 이로써 블로그 디자인에 관심있는 블로거에게 조금이나마 도움이 되었으면 하는 바람이다.