워드프레스 기본 이미지 블록 vs 카덴스 이미지 블록 완벽히 이해하기

안녕하세요. 워플의 이삭입니다

오늘의 주제는 이미지를 넣는 방법입니다. 저희 워플에서는 지금 워플 올백 테마를 밀고 있죠

그래서 카덴스 테마를 여러분한테 설치를 하고 세부 조정을 해놓은 차이 테마인 올백 테마를 여러분에게 추천을 해드리고 있습니다

그런데 이 카덴스 테마가 제공하는 블록들 중에 가장 중요한 블록 중에 하나죠. 이미지 블록이 있어요

이 이미지 블록을 오늘은 어떻게 쓰는지 쭉 정리를 해봤습니다. 그래서 이거 교재 링크 제가 올려놓을 테니까 이거 보시면서 오늘 쭉 따라오시면 될 것 같아요

제일 처음에 저희가 이야기를 해야 될 것은 카덴스 테마 이미지 블록이랑 워프 기본 이미지 블록 이 두 개를 구분하는 것을 먼저 해보도록 하겠습니다

워드프레스 기본 이미지 블록 같은 경우에는 이 슬래시를 입력을 했을 때 이미지가 이렇게 나오는 그 블록이고 기본적으로 검정색으로 표시가 된다라고 써 있죠

워드프레스 기본 이미지 블록을 한번 볼게요. 자 지금 보시면은 이렇게 블록 편집기를 열었는데 type slash to choose a block 이라고 이렇게 되어 있죠

그래서 이 말인즉슨 뭐냐면은 이 슬래시라는 것을 우리가 입력을 하면 이 자리에다가 입력할 수 있는 여러가지 메뉴들이 뜨게 됩니다

그래서 이걸 한번 해볼게요. 슬래시로 한번 입력을 하면 이렇게 뜨죠. 그 중에서 가장 처음으로 나오는 요거

요게 바로 워드프레스에서 제공하는 기본 이미지 블록입니다. 그래서 요거를 한번 클릭을 해보면은 이런 식으로 이미지 이렇게 떠있고 입력하는 방법이 세가지가 나오네요

첫번째는 내 파일을 로컬에서 업로드를 하는 방법. 그리고 이미 서버에 있는 그림을 선택을 해서 집어 넣는 미디어 라이브러리

그리고 마지막으로 외부에 있는 링크를 그대로 삽입해서 url을 사용해가지고 이미지를 입력하는 방법

이렇게 세가지가 있습니다. 자 이렇게 지금 이 이미지 자리에다가 제가 미디어 라이브러리를 누르고 그 다음에 지금 서버에 있는 요거 네번째 거 한번 클릭을 해보겠습니다

클릭을 한 다음에 선택을 한번 눌러볼게요. 자 선택을 누르시면은 요 자리에 그림이 들어갔죠

요걸 딱 누르면 두가지의 메뉴가 뜨게 됩니다. 첫번째는 바로 그 메뉴 그림 바로 위에 있는 메뉴

그리고 두번째는 오른쪽에 있는 메뉴. 이 오른쪽에 있는 메뉴는 어떻게 키냐면 여러분은 만약에 안 보이신다�

요 위에 있는 요 파란색 요 버튼 있죠? 요거 버튼 누르시면은 해당 블록 메뉴가 오른쪽에 뜨게 됩니다

지금 요 그림에 해당하는 메뉴가 세부 메뉴는 오른쪽에 그리고 요 위에는 간편 메뉴가 있는 뜨는 상태겠군요

요거가 WordPress 이미지 블록이라고 했었죠? 요거랑 카덴스테마에서 제공하는 이미지 블록 요게 이제 뭔지를 알아야 됩니다

이 카덴스테마에서 제공하는 이미지 블록은 방금 전에 봤던 이미지 블록하고는 뭐가 다르냐

요 위에 검정색 이미지가 요거를 한번 버튼을 누르게 되면 다음으로 변형이라고 하는 메뉴가 뜨면�

첫 번째 이미지 한 다음에 가로 치고 어드밴스드라고 하는 요 가로 안에 ADV라고 입력하는 게 있습니다

얘를 이제 눌러보면은 지금 현재 기본 이미지 블록이 카덴스에서 제공하는 이미지 블록으로 나는 바꾸겠다라고 하는 뜻이에요

그래서 요거를 클릭을 해보면 이제 바뀌었죠? 뭐가 바뀌었냐? 첫 번째 요기가 이제 파란색 아이콘으로 바뀌었습니다

그리고 두 번째 요기에 있는 얘가 바뀌었습니다. 세부적인 메뉴가 훨씬 더 복잡하게 바뀌었다라고 생각하시면 좋겠습니다

그래서 저희는 워프 기본 이미지 블록이 아니라 앞으로 여러분은 카덴스 이미지 블록을 사용해서 입력을 할 건�

제일 처음에 기본적으로 설정하는 방법 한번 해볼게요. 지금 보시면은 기본적으로 이미지 블록이 제공되는 위에 이미지�

그 다음에 카덴스 이미지에서 제공하는 위에 이미지가 살짝 바뀌었습니다. 일반 이미지에서는 요게 있�

카덴스 이미지에서는 요게 있네요. 요것도 한번 나중에 어떻게 사용하는지 한번 보도록 하겠습니다

아무튼 요렇게 차이가 있다. 그리고 이제 차이가 나는 게 요렇게 선택을 했을 �

여기 지금 오른쪽에 이렇게 3가지가 선택을 할 수가 있거든요. 첫 번째가 제너럴 패널이라고 할까요

이 패널에 보면은 이미지 넣는 거, 이미지 사이즈, 그 다음에 이미지 비�

그 다음에 최대 너비, 그 다음에 대체 텍스트 이런 거 넣는 게 있�

링크는 또 여기서 이제 링크를 설정을 할 수가 있겠죠. 이 그림을 클릭했을 때 나는 어디로 보내고 싶은�

그리고 두 번째는 스타일 패널입니다. 요거 그림에 대해서 이제 백그라운드 컬러, 보더는 어떻게 할 건�

보더 라리어스, 그리고 그림자는 그림자 효과를 줄 건지 그리고 마스크 세팅, 캡션 세팅 너무 많죠

이거를 사실 다 하기에는 상당히 시간이 많이 걸립니다. 여러분이 하나씩 하나씩 한번 해보시면�

어떻게 변하는지 이렇게 한번 보시는 것도 아마 재밌을 거예요. 그리고 마지막으로 어드밴스는 그림 주변에 패딩을 어떻게 줄 것인�

마디진을 어떻게 줄 것인지 이런 것들을 세부적으로 싹다다 조정을 할 수가 있다

그래서 카덴스 이미지 블록은 상당히 고급 기능이 되게 많이 있고 원하는 여러 가지 기능들을 사용할 수 있다라고 하는 게 장점이겠네요

자 그러면 오늘은 제가 이걸 다 설명하지는 못하고 제가 보통 블로그에 그림을 넣을 때 작업하는 방법에 대해�

이야기를 한번 해보도록 하겠습니다. 자 카덴스테마의 이미지 넣는 법 첫 번째, 이미지를 복붙을 합니다

방금 전에 제가 이렇게 그림 이렇게 넣었잖아요. 이거는 이미지가 이미 서버에 있는 경우에 미디어 라이브러리 가서 넣는 거�

그게 아니라 글 같은 거 쓸 때 이런 캡처를 보통 많이 합니다

그래서 윈도우 같은 경우에는 컨트롤 쉬프트 S를 누르면 이렇게 화면을 캡처하는 부분이 생기�

제가 이렇게 화면 부분을 클릭을 하면 이런 식의 캡처 화면이 뜬단 말이죠

여기다가 저희가 이 부분을 주목을 하라, 이런 식으로 했다라고 하면 제가 또 다시 이 부분을 캡처를 해가지고 이렇게 떠 보도록 하겠습니다

그래서 이런 식으로 뭔가 그림을 만들었다면 그냥 이 상태에서 여기에다가 클릭을 하�

슬래시 칠 필요 없이 그냥 복사 붙여넣기 합니다. 컨트롤 V를 누릅니다. 컨트롤 V를 누르면 가장 처음에 기본 이미지 블록으로 붙겠죠. 당연하죠

얘를 이 이미지를 눌러서 이미지 어드밴스로 해서 카덴스 이미지로 변경을 합니다. 카덴스 이미지로 변경을 하면 얘는 이제 좋은 점�

이미지 사이즈를 원래 기본 블록은 3개로 크기를 조정할 수 있는데 얘는 4가지 크기를 지정을 할 수가 있어�

저는 보통 미디엄 라지를 설정하는 편입니다. 그래서 미디엄 라지를 설정을 하고 그 다음에 이 위에 정렬이라고 하는 부분을 눌러�

가운데 정렬, 중앙 정렬을 해줍니다. 그리고 오른쪽에 캡션 추가 눌러서 이미지 캡션을 넣자

이렇게 캡션을 넣고요. 그 다음에 이 그림을 설명해줄 수 있는 대체 텍스트�

여기 오른쪽에 이걸 클릭했을 때 뜨는 세부 메뉴에 가가지고 넣어줍니다. 이 알트 텍스트라고 하는 대체 텍스트는 꼭 입력을 해주셔야 되는�

이게 도대체 무슨 소용이냐 이렇게 생각하시는 분들 있죠. 이 대체 텍스트는 시각장애인 분들이 우리의 블로그를 들어왔을 �

이미지를 볼 수가 없지 않습니까? 그 이미지 대신에 그분들이 쓰시는 어떤 프로그램�

이 알트 텍스트에 있는 내용을 읽어준다고 생각하시면 좋겠습니다. 그래서 구글의 입장에서는 블로그가 이런 알트 텍스트라고 하는 것들을 잘 써놨을 때 점수를 더 많이 줘요

왜냐? 사회적 약자 계층을 다 배려하는 블로그이기 때문에 좀 더 많은 사람한테 보여줄 수 있다라고 하는 논리가 생깁니다

그래서 이거는 꼭 써주시기 바라고 랭크맷스에서도 키워드 선택하는 거에 따라서 그 키워드가 알트 텍스트에 꼭 들어가야 되는 그런 게 있었죠

그래서 이것도 한번 짚고 넘어가 보도록 하겠습니다. 이렇게 해서 알트 텍스트까지 했으�

저는 보통 여기는 이제 넘어가는 것 같아요. 근데 내가 만약에 이걸 클릭을 했을 때 어떤 홈페이지로 보내고 싶다

예를 들어서 이거 클릭을 하면 저는 krplaybook이라고 하는 곳으로 보내고 싶다라고 하�

여기에다가 링크 세팅 가셔가지고 krplaybook.com이라고 이렇게 입력을 한 다음에 여기 Submit이라고 하는 이 화살표 있죠

엔터 표시죠? 엔터 표시를 눌러보도록 하겠습니다. 방금 전에 제가... 그러면 다시 자 이 링크 입력을 할 때 https라고 하는 �

생략 안 하시고 넣어 주셔야지 잘 작동을 하는 것 같습니다. 방금 전에 그냥 krplaybook.com 누르면�

이렇게 Not Found로 가죠? 지금 보시면은 이런 식으로 링크가 생성이 된 걸 확인할 수가 있는�

이게 아니라 우리는 https까지 저희가 싹 다 복사를 해서 여기서부터 이만큼 꼭 https를 넣어 줘야지 된다

그래서 지우고 엑스 표시 눌러야지 지워지거든요. 이 상태에서 https까지 하고 Submit을 해야�

보면은 잘 가지는 걸 확인할 수가 있습니다. 그래서 링크 넣는 것까지 했네요

링크 넣는 것까지 하고 저는 보통 스타일은 하나 정도 건드리는 것 같은데 어떤 걸 건드냐

이 Box Shadow라고 하는 거 이거 하나 켜줍니다. 지금 보시면은 Box Shadow 여기 지금 이 효과 보이시죠

있고 없고가 그래도 조금 차이가 나거든요. 그래서 저는 이런 거 정도 하나 켜주는 정도인 것 같�

혹시나 여러분이 Border 같은 거를 조정하고 싶다고 하면 얘는 이 정도로 조정해서 원하는 색 하�

Radius라고 하는 것은 여기 사진의 끝에를 끝 마무리를 동그랗게 만들어 주는 겁니다

그래서 20 하면 지금 여기 동그랗게 됐죠? 이렇게 20, 20, 20 이렇게 주�

해주면은 이런 식으로 살짝 동그라지면서 그림자 효과 살짝 들어간 그런 식의 그림을 만들 수도 있다

근데 저는 Border랑 이런 건 안 하고 그냥 Box Shadow 하나만 딱 켜주는 것 같아요

그래서 이 정도 해서 그림을 입력을 해가지고 여러분이 글을 쓰시면 된다. 여기까지 오늘은 그림 이미지 블럭에 대해�

어떻게 넣는지 알려드렸습니다. 아 그리고 제가 한 가지 빼먹은 게 있는데 왜 그냥 복사 붙여넣기를 해도 되는가에 대한 이야기를 해볼게요

저희가 이 복사해서 붙여넣기 하는 요거를 붙여넣으면 사실 PNG라고 하는 파일이 저희 서버에 들어가게 됩니다

그런데 그 PNG라고 하는 파일을 리사이즈 이미지라고 하는 플러그인이 JPG로 바꿔주죠. 지금 현재 저희 초기 세팅을 쭉 따라오셨으�

그리고 그 JPG 바꾼 것을 라이스피드 캐시라고 하는 그 오강에서 저희가 설정한 캐시 플러그인�

WEBP로 바꿔줘가지고 블로그에는 상당히 크기가 작은 WEBP 파일이 보여지기 때문에 그냥 안심하시고 복사 붙여넣기를 하시면 된다

여기까지 해서 오늘은 이미지 블럭에 대한 이야기 마치도록 하겠습니다. 빠빠이 앞으로도 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많이 많�