구글 블로그, 블로그 스팟 이용하여 고용량 움짤(gif) 올리고 퍼오는 방법 (+ 이미지 필터)

얼마 전 이용하는 커뮤니티에서 아이린의 이쁜 움짤을 보고 핸드폰에 저장을 했는데, 용량이 무려 50MB가 넘길래 이런 고용량 움짤은 어떻게 올리는 건지 궁금해 찾아보니.. 블로그 스팟이라고 불리는(?) 구글 블로그에 고용량 움짤을 올리고 이미지 주소만 따와 HTML 이미지 태그로 올리면 되는 간단한 방법이길래.. 이미지 태그 사용 시 적용 가능한 이미지 필터들 정리한 거를 나중에 잊지 않기 위하여 올려봅니다.

cloudup 같은 클라우드는 용량 제한이 있는 거 같은데, 블로그 스팟은 용량 제한이나 그런 부분은 없는 거 같습니다.

구글 블로그는 구글 계정만 있으면 누구나 다 쉽게 만들 수 있고, 블로그 만드는 방법은 네이버에서 구글 블로그 만들기 또는 블로그 스팟 만들기 검색하면 많이 나오니 건너뜁니다 :)

제가 다운로드했던 아이린 고용량 움짤을 올릴까 하다, 데이터가 많이 나가니 그냥 스샷으로 올려봅니다.

▲ 블로그를 만들었으면 움짤을 올리기 위하여 글쓰기 버튼을 클릭합니다.

▲ 제목을 입력하고 사진 아이콘을 클릭합니다.

▲ 파일 선택을 클릭해 이미지를 선택합니다.

▲ 이미지를 선택하면 업로드가 됩니다.

※ 참고로 이미지 파일명은 한글보다 영문이나 숫자로 해야 이미지 주소가 길어지지 않고 본인이 알아보기 쉽습니다.

▲ 이미지 업로드가 완료되면 파란 테두리가 나타나도록 해당 이미지 선택 후 좌측 하단 선택한 이미지 추가 버튼을 클릭해줍니다.

▲ 레이아웃을 선택하라는 화면이 보이면 가운데 정렬과 원본 크기를 선택 후 좌측 하단 확인 버튼을 클릭해줍니다.

▲ 그러면 이렇게 업로드된 움짤 주소가 포함된 태그가 나타납니다.

▲ https://bp.blog spot.com....로 시작해 gif로 끝나는 이미지 주소를 복사해 메모장에 옮겨 놓습니다.

▲ 만약 이미지 업로드 시 레이아웃 선택하는 화면이 안 나타났으면 글쓰기 버튼을 클릭해줍니다.

▲ 이미지를 좌측 마우스로 클릭하면 속성이 나타납니다. 이곳에서 원본 크기가 선택되어 있지 않으면 원본 크기로 선택해줍니다.

▲ 블로그 스팟은 비공개 글을 작성하는 기능이 따로 있지 않습니다. 다른 사람이 볼 수 없도록 비공개 글처럼 작성하는 방법은 저장 클릭 - 닫기 버튼을 클릭하면 글쓰기가 종료되고 임시 글로 저장됩니다.

※ 다른 사람이 블로그에 들어와 봐도 상관없다면 그냥 저장 버튼 좌측에 있는 게시 버튼으로 글쓰기를 완료해도 됩니다.

▲ 이렇게 임시 글로 저장됩니다.

▲ 이미지 태그는 <img src="이미지주소"> 입니다.

블로그나 자신이 이용하는 커뮤니티에 글을 쓸 때는 아까 메모장에 옮겨둔 이미지 주소를 위 이미지 태그 이미지 주소 부분에 넣어주고 HTML 체크 후 작성하면 됩니다.

■ 아래는 이미지 태그 작성 시 활용 가능한 html 이미지 필터입니다. 참고하실 분은 참고하세요.

<img src="https://4.bp.blogspot.com......./s1600/iu02.gif">

일반적인 이미지 태그 방법

티스토리 썸네일 치환자처럼 좌우 위아래 자르고(크롭) 원하는 해상도 크기로 가져올 수 있습니다.

s1600을 원하는 크기로 수정후 뒤에 -c를 붙여주면 됩니다.

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif">

이미지 자르고 테두리 둥글게 하기

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 10%">

이미지 자르고 원형으로 만들기

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 50%">

원형 + 원하는 이미지 해상도 적용

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" width="200" height="auto" style="border-radius: 50%">

원하는 이미지 해상도 적용

<img src="https://4.bp.blogspot.com......./s1600/iu02.gif" width="200" height="auto">

이미지 테두리 둥글게 만들고 테두리 색상 넣기

<img src="https://4.bp.blogspot.com......./s1600/iu02.gif" style="border-radius: 35px; border: 5px solid #f2b8ba">

이미지 자르고 + 테두리 둥글게 + 테두리 색상

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 10%; border: 5px solid #f2b8ba">

이미지 자르고 + 원형 + 테두리 색상

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 50%; border: 5px solid #f2b8ba">

이미지 자르고 + 원형 + 원하는 해상도 + 테두리 색상

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" width="200" height="auto" style="border-radius: 50%; border: 5px solid #f2b8ba">

이미지 자르고 + 원하는 해상도 + 블러처리

<img src="https://4.bp.blogspot.com......./s250-c/iu02.gif" width="250" height="250" style="-webkit-filter: blur(3px); filter: blur(3px)">

이미지 자르고 + 원형 + 밝기조정

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 50%; -webkit-filter: brightness(150%); filter: brightness(150%)">

이미지 자르고 + 원형 + 흑백효과

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 50%; -webkit-filter: grayscale(65%); filter: grayscale(65%)">

이미지 자르고 + 원형 + 반전효과

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 50%; -webkit-filter: invert(80%); filter: invert(80%)">

이미지 자르고 + 원형 + 투명도 효과

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 50%; -webkit-filter: opacity(30%); filter: opacity(30%)">

이미지 자르고 + 원형 + 색조효과

<img src="https://4.bp.blogspot.com......./s400-c/iu02.gif" style="border-radius: 50%; -webkit-filter: hue-rotate(75deg); filter: hue-rotate(75deg)">

이미지 자르고 + 원형 + 원하는 해상도 + 그림자 효과

<img src="https://4.bp.blogspot.com......./s250-c/iu02.gif" style="border-radius: 50%; -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222)">

이렇게 한 개의 이미지 주소로 여러 가지 필터효과를 줄 수 있습니다.

지금 당장은 사용할 일이 많지 않은데, 나중에 사용하려고 하면 막상 잘 생각도 나지 않고 찾아보기도 쉽지 않아 정리해둡니다.

설명으로 사용한 움짤은 움짤 안에 적힌 곳이 출처입니다.

19.11.27 추가

방명록 상단에 드디어 활용함 :)