Blogger 사용법

 Blogger를 처음 써보는 입장에서 차근차근 어떻게 에디터를 사용하면 되는지에 대해 작성하고자 한다.

티스토리 클럽이라는 블로그를 보고 정리하여 작성하였다. 아래 링크를 누르면 나오는 블로그에서 배운 지식들을 바탕으로 추가적으로 공부하며 정리하였다.

<Blogger 사용법 관련 블로그>

1. 단락 형식으로 글 작성

  블로그에서 글을 작성할때 문단 간격을 줄 때 일부러 엔터를 한 번 더 치는 사람이 있는데 이와 같이 하면 구글이 크롤링을 할 때 안 좋은 영향이 있다고 한다. 글이 작성되다가 의문의 빈 공간이 인지되어 이상한 글로 잡힐 수 있다는 것 같다.

2. 글의 스타일 지정

   본 테마는 포스트의 제목이 H1이라고 한다. 글을 작성할때 주 제목, 제목, 부제목, 소제목, 단락 형식으로 구분할 수 있는데 이때 H1이 주 제목이다. 따라서 글 안에서는 제목을 H2로 시작해서 점차 제목을 H3, H4로 줄여야 한다. 본 테마의 링크는 아래에 달았다.

<Ezzy Blogger Template>

3. HTML 가독성 있게 변경 필요

   글을 작성하다가 글을 HTML 보기로 했을시 글을 엔터로 잘 구분했어도 결국 한줄로 쭉 나오게 된다. 이는 아래 링크를 누르면 나오는 사이트에서 변환해서 넣으면 된다.

<가독성 있는 HTML 코드 만들기>

4. 글의 포인트 바꾸기

   F12를 누르면 개발자도구가 나온다. 이때 ctrl + shift + c를 누른 후, 왼쪽 글에서 마우스커서를 올릴때 해당 영역의 HTML, Style 코드가 오른쪽에 표시된다. 이때 본문에 커서를 올려보면 해당 글의 폰트가 나온다. 이를 변경하기 위해서는 HTML코드에서 변경하거나 CSS코드를 변경하면 된다.

a. CSS에서 변경

   CSS를 변경하기 위해서는 Blogger에서 테마를 누른 후 현재 지정되어 있는 Custom 테마의 맞춤설정 버튼을 눌러준다. 그러면 현재 테마를 수정할 수 있다. 컬러나 CSS코드를 수정 가능하다. CSS 수정을 위해서는 좌측 아래 고급 버튼을 누르고 Theme Colors로 되어있는 것을 눌러서 CSS 추가로 변경해준다. 그리고 폰트 사이즈에 해당하는 CSS 코드를 입력해주면 같은 속성을 한번 더 정의하여 최종적으로 정의한 것으로 사이즈가 변경된다.

b. HTML에서 변경

   HTML에서 변경을 하려면 인라인 스타일로 변경하거나 내부 스타일을 변경하는 방법이 있다.

  <!-- ✅ 인라인 스타일 방식 -->
  <p style="font-size: 16px; line-height: 1.7em;">
    이 문장은 인라인 스타일로 설정된 문장입니다.
  </p>

  <!-- ✅ 내부 스타일 방식 -->
  <style>
    .custom-text {
      font-size: 16px;
      line-height: 1.7em;
    }
  </style>

  <p class="custom-text">
    이 문장은 내부 스타일(class)로 설정된 문장입니다.
  </p>
  

5. 코드 넣기

    HTML에 코드를 삽입하기 위해서는 Color Scripter라는 웹서비스를 사용한다. 아래 링크를 누르면 나오는 사이트에서 원하는 코드를 입력하고 HTML로 복사를 누르면 된다.

<HTML에 각종 코드 삽입하기>

    아니면 간단하게는 내부 스타일 변경을 해서 code-box class를 정의하고, html 하이라이터를 사용하기 위해 <header>에 Prism 관련 CSS & JS 추가를 해주면 된다.

6. 그림과 동영상 넣기

   그림은 구글포토를 사용하면 편하다. 구글 포토에서 블로그에 업로드하고 싶은 사진들을 앨범으로 만들어서 두면 바로 Blogger에서 연동하여 업로드가 가능하다. 동영상은 좀 불편하지만 구글 포토에서 내 컴퓨터에 다운받아서 업로드하는 과정을 거쳐야하는 것 같다.

   근데 구글포토 사용하면 나중에 그 이미지가 만료되거나 삭제했을때 블로그에서도 사라질 것이다. 따라서 다운 받아서 직접 올리는 것이 좋을 듯 하다.

   하지만 실제로 테스트 해보니 이미지삽입에서 구글포토로 넣어도 blogger.googleusercontent.com링크로 넣어지는 것을 보니 blogger 자체 서버에 이미지가 복사되어서 존재하므로 구글포토에서 삭제해도 문제없는 것 같다. 그리고 blogger자체 서버는 용량 제한이 없어서 드라이브 대용으로도 사실상 사용가능하다고 한다. 하지만 구글포토에서의 링크를 임베딩하는건 문제가 될 것 같긴하다. 그건 구글포토 사진을 삭제하면 임베딩된 링크가 사라질 것이기 때문이다. 동영상의 경우에는 100MB만 각각 안넘으면 무제한으로 올릴 수 있는듯하다. 하나의 영상의 용량이 100MB 넘는다면 유튜브에 업로드해서 올리는 것으로 하면 된다.

   사진과 동영상을 넣을때 픽셀값이 너무 작은 값으로 고정되어서 올라가는 문제가 있다. 이를 해결하기 위해서는 몇가지 방법들이 있다. 직접 하나하나 수정하는 방식이 있고, 아래 링크처럼 CSS를 수정하거나 일괄 사진 크기 수정하는 방법이 있는 듯 하다.

<사진, 동영상 크기 수정>

   사진은 우선 올릴 때 모두 원본 레이아웃으로 올리는 것이 좋을 듯 하다. 어떤 테마를 쓰느냐에 따라 다르겠지만 보통 CSS에서 이미지의 원본 크기가 너무 크면 "max-width : 100%"가 될 것이다. 어차피 모든 사진들은 업로드된 원본 이미지를 보려면 href를 타고 들어가면 된다. 

   동영상은 CSS에서 width, height설정을 해놓으면 글 작성에서 어떤식으로 비율과 크기를 만들더라도 고정된 크기로 들어간다. width를 90%, 100% 중 하나로 하여 고정하는 것이 좋은 듯 하다. 너무 큰 용량의 동영상은 유튜브를 통해 하던지 모든 동영상을 유튜브로 올리던지 하면 된다. 동영상 화질은 다양하게 선택하여 플레이하면 된다. 하지만 유튜브로 올린것은 모든 화질이 가능한데 컴퓨터 업로드는 최대 720p까지만 제공하는 것 같다. 

(우선 급하게 글을 작성한다면 레이아웃 상관안하고 올려놓은 후, 원본은 모두 클라우드에 저장되어있으니 나중에 사진과 동영상 레이아웃을 수정해도 된다.)

  하나 더 중요한 것은 시각 장애인분들을 위한 대체 텍스트 입력이다. 우선 나는 대체 텍스트와 동일하게 제목 텍스트, 전환 텍스트도 입력하였다. 글 쓰기에서 그림을 클릭하면 하단에 톱니바퀴와 A모양을 눌러 입력 가능하다.

7. 블로그 메뉴 설정

    태그는 하지 못하는 계층적인 관계성을 메뉴를 통해 만들려고 한다. Blogger는 카테고리는 없고 태그만 존재한다. 태그는 계층적인 것을 만들지 못한다. 모든 태그들은 수평적인 관계이다. 나의 경우 "여행, 아이슬란드" 태그를 가진 글 여러개와 "여행, 네팔" 태그를 가진 글 여러개를 넣는다면 아이슬란드를 눌렀을때 이것이 여행에 속하는 것인지 명시적으로 표시할 수 없다. 그래서 메뉴에 여행을 만들고 그 안에 _아이슬란드, _네팔이라고 하여 각 태그의 링크를 넣으면 어느정도 해소된다.

8. 블로그 테마 복사

    다른 블로그 사이트를 이용해본 적이 없어서 잘은 모르겠지만 쓰던 테마를 그대로 틀을 복사하는 과정이 쉽진 않나보다. Blogger는 그냥 HTML만 복사하면 쉽게 틀이 복사 된다고 한다. 내가 잘 써먹을 기능인지는 모르겠다.

9. 광고 넣기

    리더 보드에 배너형 광고를 넣을 수 있다. HTML에서 애드센스 광고 코드를 붙여줘야한다. 현재 나는 수익 창출을 하지 않기에 이정도로만 정리한다.

10. 글 드래그 방지

    드래그 방지는 글의 무분별한 복제를 방지하는 방법이다. 지금의 나는 굳이 안해도 되긴하는데 어떻게 하는 것인지 알아보기 위해서 찾아봤다. CSS와 HTML에 각각 코드를 몇줄씩 넣어주면 되는데 이는 구글 서치로 금방 찾을 수 있다. 아래는 하나의 예시 블로그이다.

<드래그 방지 소스코드>

11. 온라인 HTML 편집기

    티스토리 클럽 블로그에서 구글 블로그의 에디터가 좋지 않기에 2개의 온라인 편집기를 추천하였다. 여기서 글을 작성한 후 그대로 복사하면 된다고 한다. HTMLG, TINY 두가지가 있다.

헌데 지금 유료로 사용해야하는 것 같아서 다른 두개를 추천하겠다. html-online, html5-editor. 둘 다 유사한 기능과 UI를 가진 것으로 보임

<html-online> <html5-editor>

    짧은 글 위주의 경우엔 그대로 Blogger 에디터를 사용해도 되지만 글이 조금이라도 길어지면 우선 온라인 편집기에서 작성을 하고, 그림을 마지막에 넣어주는 것이 좋다고 한다. 구글 블로그 편집기로 할 시 백스페이스를 한번 잘못 눌러서 문단으로 정리하던 글이 문단이 아닌 것으로 바뀌어 있는 불상사가 생길 수 있기 때문이라고 한다.

12. 애드센스 신청

    글이 어느정도 쌓이면 애드센스를 신청한다고 한다. 나의 경우는 아직 때가 아니기에 굳이 더 찾아보지는 않는다.

13. 검색 엔진 등록

    네이버나 다음에 블로그가 검색되고 싶다면 각각의 검색엔진에 등록하는 과정이 필요하다. 자세한 내용은 아래의 링크를 들어가서 확인할 수 있다. 예시로 네이버는 "네이버 서치어드바이저"라는 곳에서 등록한다.

<검색 엔진 등록>

14. 모바일 앱 사용 시도

    Blogger 모바일 앱을 다운 받아서 편의성을 살펴보았다. 우선 매우 간단하게 글을 수정하는 정도만 가능하다. 동영상은 일단 넣지 못한다. 사진은 넣을 수 있지만 넣게되면 HTML에서 링크가 매우 길게 형성되고, 썸네일과 하이퍼링크가 없어서 웹에서 수정하고자 할때 어떤 이미지인지 보이지 않는다. 되도록이면 앱에서는 간단한 글만 수정하는게 좋다.