블로그 스팟(blogger)에 업로드 된 이미지를 간편하게 편집하는 12가지 방법에 대해 알아보겠습니다. 많은 Blogger 기능이 일반 사용자에게 숨겨져 있습니다. 그 중에서 가장 강력한 기능 중 하나는 블로그 게시물에 사용된 이미지를 사용자 지정하는 방법입니다. 이번 포스팅에서는 Blogger에 업로드 된 이미지에 적용할 수 있는 여러 유형의 최적화및 효과에 대해 이야기해 보겠습니다.
블로그 스팟(blogger) 플랫폼에 업로드 된 이미지는 Google App Engine에서 내부적으로 호스팅 되기 때문에 우린 강력한 구글 서버를 무료로 사용할 수 있을 뿐만 아니라, 구글이 제공하는 이미지 최적화 기능도 무료로 사용할 수 있습니다. Let’s start!
원본 이미지
지금부터 위에 있는 원본 이미지를 구글이 제공하는 이미지 파라미터를 이용해서 수정해 보겠습니다. 이 아래로 나타나는 이미지들은 편집툴을 사용하지 않고 이미지 파라미터만을 사용해서 수정된 이미지들입니다.
블로그 스팟(blogger)에 업로드된 이미지의 주소 형식 위 이미지의 주소는
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPSV314L3Vp37Cbd_bac28oZlHpIUR8hvvaJwIMAgrjLHgSCI0ZwY_wGATzQwrMKO2nLKPsJNp6QbLZn9zekhraw1Q2luS5v7Nnhdi56pAPwaNFxvslGvL_SCMSNREbxYkl_VioHCPs-GCCwkrcHUsOI0Jr91lRkxoKiS98qIl114K4xUBGbm0zNY2Ihv /w400-h400 /testimage.png
입니다.
우리가 눈 여겨 봐야 할 부분은 w400-h400 /testimage.png 입니다. testimage.png 은 이미지의 파일명입니다. 뒤에 다른 방법을 말하겠지만, 이미지 확장자명을 바꾸는 것 만으로 파일 형식을 바꿀 수 있습니다.
testimage.png 에서 확장자를 webp로 바꾸는 것만으로 우린 webp 이미지를 가져다 쓸 수 있습니다.
한 번 테스트 해 볼까요? 이 아래에 URL사용으로 이미지 삽입을 해보겠습니다.
삽입하는 이미지의 URL은
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPSV314L3Vp37Cbd_bac28oZlHpIUR8hvvaJwIMAgrjLHgSCI0ZwY_wGATzQwrMKO2nLKPsJNp6QbLZn9zekhraw1Q2luS5v7Nnhdi56pAPwaNFxvslGvL_SCMSNREbxYkl_VioHCPs-GCCwkrcHUsOI0Jr91lRkxoKiS98qIl114K4xUBGbm0zNY2Ihv /w400-h400 /testimage.webp
입니다. 원본 이미지의 주소에서 파일 확장자명을 webp로만 바꾼 것입니다.
확장자를 webp로 바꾼 이미지
위 이미지 위에 마우스를 올려 두시고, 마우스 오른쪽 클릭, 새 탭에서 링크 열기 또는 새 탭에서 이미지 열기를 해보세요. 그리고 주소창을 확인해보세요.
주소의 마지막 부분이 4xUBGbm0zNY2Ihv /w400-h400 /testimage.webp 이렇게 바뀐게 보이시나요? 새 탭에 나타난 이미지를 저장해 보세요. 파일 확장자명이 webp로 되어 있을 것입니다.
이렇게 구글 서버에 저장된 이미지의 url을 바꾸는 것 만으로 우린 파일형식을 바꿀 수 있었습니다. 그런데, 이건 새발의 피라는 것! (*￣3￣)╭ 더 강력한 기능들을 지금부터 소개하겠습니다.
이미지 크기 조정 및 자르기
지금부터 이미지 주소의 붉은 부분을 변경함으로써 이미지를 편집해 보겠습니다.
s0 (원본 이미지 크기) 블로그 게시물 내에서 업로드 된 이미지를 원래 크기로 표시해야 하는 경우가 많습니다. 이렇게 하려면 매개변수에 s0을 추가하기만 하면 됩니다.
/ s0 / testimage.png
s000 (가장 큰 치수의 000픽셀 이미지) 원본 이미지의 크기는 512×512입니다. 가로, 세로 둘 다 512픽셀이죠.
여기서 후회가 되네요. 예로 들, 원본이미지의 크기를 다른 걸 했어야 했는데~(>_<。)＼
아무튼, s000의 의미는 가로, 세로의 크기 중 더 큰 크기를 s000으로 맞춰서 조정하겠다는 뜻입니다.
예를 들어 512×1024의 이미지가 있고, s300을 적용하면,
1024의 크기를 300으로 바꾸고, 그에 맞게 이미지를 조정하겠다는 이야기입니다.
한번 테스트 해보겠습니다.
/ s150 / testimage.webp
w000 고정된 너비의 이미지를 사용하려면 w 매개 변수를 사용합니다. 예: /w250 /
h000 고정된 높이의 이미지를 사용하려면 w 매개 변수를 사용합니다. 예: /h250 /
예를 들어 너비와 높이를 모두 지정하는 경우 이미지의 가로 세로 비율을 유지하기 위해 height 매개 변수가 우선적으로 적용되고 width 매개 변수를 재정의합니다.
c (지정된 치수로 이미지 자르기) 간단한 이미지 자르기 매개 변수이며 너비 및 높이 매개 변수와 함께 사용됩니다.
/w230-h150-c/
cc (원형 이미지 자르기) 너비 및 높이 매개 변수도 제공되면 잘린 부분과 관련하여 후자가 우선합니다. 잘린 부분 바깥쪽 영역은 투명한 배경으로 반환됩니다.
/w230-h150-cc/
효과, 필터, 편집 fv (이미지 뒤집기 – 세로) 이미지를 세로로 뒤집으려면 이 옵션을 사용합니다. 원본 사이즈로 이미지를 세로로 뒤지어 보겠습니다.
/s0-fv/
제 블로그 테마 때문에 이미지가 자동 조정되는 부분이 있어, 지금부터 이미지 주소 링크로 대신하겠습니다. 귀찮으시겠지만, 링크를 클릭해서 이미지를 확인해 주세요.
fh (이미지 뒤집기 – 수평) /s0-fh/
r (이미지 회전) 90도, 180도 및 270도의 세 가지 회전 각도를 사용할 수 있습니다.
/s0-r90/
rj (JPG 변환) /s0-rj/
이미지의 주소에 표시되는 확장자는 webp이지만, 이미지를 저장해서 확인해보시면 JPG 파일입니다.
png, webp, gif 모두 같은 형식이며, 각 매개변수는 다음과 같습니다.
png: rp
webp: rw
gif: rg
rh(gif->mp4) gif파일을 mp4형식으로 가져오는 매개변수입니다. 저는 아직까지 사용해본 적이 없네요.
<video width=”480″ controls>
<source src=”https://xxxx/s0-rh/image.gif” type=”video/mp4″>
</video>
이런 식으로 사용이 가능하다고 합니다.
사용자 정의 테두리/프레임 설정 일반적으로 사용자 정의 테두리 또는 이미지 주위에 프레임을 적용하기 위해 CSS 규칙을 사용합니다. 하지만 CSS 코드를 사용하지 않고 그렇게 할 수 있다면 어떨까요?
다행히도 두 매개 변수의 조합을 통해 사용자 지정 테두리를 쉽게 얻을 수 있습니다. 첫 번째 매개 변수는 지정된 픽셀 두께의 테두리를 이미지에 추가합니다.
두 번째 매개 변수는 테두리 색상을 16진수 형식으로 지정하는 데 사용됩니다.
마무리 지금까지 12개의 매개변수를 이용하여, 블로그 스팟(blogger)에 업로드 된 이미지를 간편하게 편집하는 방법에 대해 알아보았습니다. 긴 글을 읽어 주셔서 감사합니다.
더 많은 매개변수를 확인하시려면 아래 github페이지를 참고하세요.
파비콘 이미지 무료로 퍼가세요: A to Z, 총202종, 개인제작
파비콘이란, 웹사이트나 블로그의 탭에 표시되는 작은 아이콘을 말합니다. 보통 알파벳 문자를 많이 사용하는 편입니다. 그게 가장 무난하죠. 그래서 이번에 제가 제작한 A부터 Z까지 총 202장의 파비콘 이미지들을 무료로 배포합니다. 누군가에게 도움이 되었으면 하는 바램입니다.
블로그 스팟에 복사 버튼이 있는 코드 상자를 추가하는 방법
블로그 스팟(Blogger)에 복사 버튼이 있는 코드 상자(Code Box)를 추가하는 방법에 대해 알아보겠습니다. Blogger는 워드프레스와 달리 플러그인이 존재하지 않기 때문에 원하는 기능을 직접 구현하는 수 밖에 없습니다.
