1단계를 통해 워드프레스의 글들을 블로그스팟으로 무사히 가져왔다면, 이제 가장 중요한 이미지 정리 작업을 할 차례입니다.

글 본문은 잘 들어왔지만, 이미지 주소(URL)는 여전히 예전 클라우드웨이즈 서버를 바라보고 있습니다. 이 상태에서 클라우드웨이즈 서버를 해지해 버리면 글 속의 이미지가 모두 X 표시로 깨져버리게 됩니다.

따라서 이미지를 구글 자체 서버로 다시 올려주고, 이미지 크기가 보기 좋게 맞춰지도록 설정하는 방법을 차근차근 알아보겠습니다.

2단계: 이미지 구글 서버 이전 및 자동 크기 조절 설정

1. 글 속 이미지 구글 서버로 다시 올리기

어려운 프로그램이나 복잡한 과정 없이, 글 수정 창에서 복사해서 붙여넣기만 해주시면 구글 서버로 자동 업로드됩니다.

진행 순서

1. 블로그스팟 관리자 페이지에서 [포스트]로 들어가 수정할 글을 엽니다.

2. 글에 들어가 있는 이미지를 마우스 우클릭한 뒤 [이미지 복사]를 누릅니다.

3. 원래 있던 기존 이미지를 클릭해 삭제(Backspace 또는 Delete)합니다.

4. 이미지가 있던 자리에 마우스 우클릭 후 [붙여넣기] (또는 Ctrl + V)를 합니다.

이렇게 붙여넣기를 하면 이미지가 구글의 이미지 저장소 서버로 새롭게 올라가면서 주소가 구글 서버용으로 깔끔하게 바뀝니다.

💡 확인하는 방법:

새로 붙여넣은 이미지를 클릭해 주소를 확인했을 때 blogspot.com 이나 googleusercontent.com 형식으로 시작한다면 구글 서버로 안전하게 들어간 것입니다.

2. 올린 이미지가 자동으로 본문 폭 100%에 맞춰지도록 설정하기

블로그스팟은 이미지를 넣었을 때 원본 크기로 작게 나오거나 한쪽으로 치우치는 경우가 있습니다. 매번 글을 쓸 때마다 '크게' 버튼을 누르지 않아도, 올려둔 이미지가 본문 너비에 맞춰 자동으로 꽉 차게 나오는 CSS 설정 방법입니다.

CSS 등록 순서

1. 블로그스팟 관리자 화면 좌측 메뉴에서 [테마]를 클릭합니다.

2. [맞춤설정] 옆에 있는 ▼ 화살표 아이콘을 누르고 [HTML 편집]으로 들어갑니다.

3. 편집창 안을 한 번 클릭한 뒤, 키보드 Ctrl + F를 눌러 </head>를 검색합니다.

4. </head> 바로 위쪽(또는 기존 </style> 바로 위)에 아래 코드를 그대로 복사해서 붙여넣습니다.

5. 우측 상단의 저장(💾) 아이콘을 눌러 마칩니다.

<style>
  /* 블로그스팟 본문 이미지 100% 자동 정렬 및 크기 맞춤 */
  .post-body .separator img,
  .post-body img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 15px auto !important;
  }
  .post-body .separator {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
</style>

이렇게 설정을 해두면 모바일이나 PC 화면에 맞춰 이미지가 자동으로 예쁜 크기로 줄어들고 늘어나서 글을 읽기가 훨씬 편해집니다.

다음 포스팅 안내: 이미지가 깨지지 않도록 구글 서버로 잘 옮기셨다면, 다음 단계에서는 방문자가 hwp, pdf 등의 파일을 안심하고 받아갈 수 있도록 외부 저장소를 연결하는 3단계 과정으로 넘어가시면 됩니다!