워드프레스 카덴스 테마 이미지 넣는 법 완벽 정리.zip
블로그 글을 작성 할 때, 가장 중요한 두가지 요소가 있다면 바로 글과 이미지입니다. 이 중 글은 바로 작성하시는데 비하여 카덴스 테마를 처음 설치한 경우 이미지를 넣는데 어려움이 많은 신 것 같아, 이 기회에 완벽하게 정리해보겠습니다.
본 포스팅을 설명한 유튜브 영상입니다. 같이 보시면 더 좋습니다! 🙂
카덴스 테마 이미지 블록 vs. 워프 기본 이미지 블록
먼저 카덴스 테마에서 이미지를 넣는 방법을 설명하기 전에 여러분이 꼭 구분해야할 것이 있습니다. 바로 워드프레스에서 기본적으로 제공하는 이미지 블록과 카덴스 테마에서 제공하는 이미지 블록입니다.
워드프레스 기본 이미지 블록
워드프레스에서 기본으로 제공하는 블록은 슬래쉬(/)를 입력했을 때 나오는 ‘이미지’ 블록입니다. 검정색 글씨로 표시되어 있습니다.
카덴스 테마에서 제공하는 이미지 블록
카덴스에서 제공하는 이미지 블록의 경우 영어로 Image(Adv) 라고 써있으며, 아이콘이 파란색입니다. 아래 그림을 보면 구분이 되실 것 입니다.
보통 화면을 캡쳐(윈도우 기준 Shift + Win + S키)해서 워드프레스 블록 편집기에 붙여넣으시면, 워드프레스 이미지 블록으로 포스트에 붙게 됩니다. 또한, 이미지 위에 표시되는 메뉴 역시도 살짝 다르죠.
이미지를 왼쪽 클릭 했을때 위에 보여지는 메뉴를 보고, 내가 지금 워프 이미지 블록을 사용하는지, 카덴스 이미지 블록을 사용중인지 판단할 수 있으시겠죠?


두 이미지 블록의 제공 메뉴 차이
저는 거의 대부분 이미지를 넣을 때, 카덴스 이미지 블록을 사용하는데요, 그 이유는 좀 더 세밀하게 이미지를 조정할 수 있기 때문입니다. 두 블록을 클릭 한 후, 오른쪽으로 보이는 세부 메뉴들을 보시면 확실한 차이가 보이실 것입니다.
워드프레스 기본 이미지 블록 메뉴
상대적으로 단순한 메뉴 구조를 가지고 있습니다. 그림 스타일과 대체 텍스트를 넣는 공, 그림 비율, 크기, 해상도 등을 조절하는 메뉴들이 있습니다.
카덴스 이미지 블록 메뉴
딱 보기에도 훨씬 복잡해보이죠? 그리고 보이는게 다가 아니라 서브메뉴들 선택하는 곳이 있어서 관련 메뉴가 3개의 서브 그룹에 걸쳐 있다고 생각하시면 됩니다. 아마 이미지 블록 메뉴만 설명하는데 40분은 족히 걸릴 것 같습니다. 그만큼 이미지를 섬세하게 넣을 수 있다는 점이 좋은 것 같습니다.

따라서, 이번 포스팅에서는 제가 워드프레스 블로그에 글을 쓸 때 어떠한 과정을 거쳐서 이미지를 넣는지 알려드리도록 하겠습니다.
카덴스 테마 이미지 넣는 법
1. 이미지 복붙하기
첫번째로 보통 저는 화면을 캡쳐하거나 그림 파일을 드래그 앤 드랍을 사용해서 넣습니다. 이렇게 하면 일단 그림 넣기가 편하고, png 파일로 캡쳐가 되지만 이는 문제되지 않습니다.
워플 초기 세팅에서 설치한 Image resize 플러그인인 jpg로 바꿔주기 때문에 걱정하지 않아도 됩니다. jpg로 바뀐 그림 파일은 litespeed cache 플러그인이 webp 파일로 변환해줄테니까요.
2. 카덴스 이미지 블록으로 변환
이미지를 복붙하게 되면, 자동으로 일반 이미지 블록 형태로 붙습니다. 이 상태에서 왼쪽 위에 뜨는 메뉴에서 이미지 아이콘을 누르게 되면 해당 블록을 어떤 오브젝트로 바꿀 것인가 선택하는 “다음으로 변형” 메뉴가 나옵니다.
위 그림과 같이 일반 이미지 블록을 카덴스 이미지 블록으로 바꿔주면 됩니다.
3. 크기와 해상도 설정
제일 먼저 수정하는 것은 그림의 크기와 해상도를 맞춰줍니다. 거의 모든 경우 가로로 긴 그림을 올립니다. 카덴스 이미지 블록에서는 4가지 사이즈를 제공합니다.
- 썸네일
- 미디엄
- 미디엄 라지 (추천)
- 원본 파일
저는 거의 대부분 미디엄 라지를 선택합니다. 페이지에 로딩되는 용량도 줄고, 대충 알아볼 정도의 사진을 올립니다.
4. 정렬 및 캡션, 대체 텍스트 설정
보통 미디엄 라지를 선택하면 가로너비가 다 차지 않습니다. 따라서 정렬을 가운데로 해주고, 캡션을 설정해줍니다.
또한, 오른쪽 메뉴에 대체 텍스트도 채워주세요! 시각 장애인들을 위한 이미지 설명을 넣어준다는 생각으로 작성하시면 됩니다. 코어 웹 바이탈 점수에 들어가는 사항입니다.

5. 박스 쉐도우 효과 넣기 (선택)
선택 사항이지만, 넣는 경우도 많은 것 같습니다. 오른쪽 메뉴의 Style 서브 메뉴를 선택하고, 아래쪽에 Box Shadow 버튼을 활성화 시켜줍니다.

이게 위 그림은 흰색 사진이라 효과가 확연하지만, 일반 사진의 경우 은은한 그림자라서 은근히 고급져 보입니다. 아래 두 그림 중에서 왼쪽은 없는 경우, 오른쪽은 쉐도우 효과를 준 경우입니다.


여러분의 취향에 맞기겠습니다.ㅎㅎ
6. 원본 파일 링크 연결 마무리 (중요)
이것은 애드센스 자동 광고 중 전면광고를 많이 띄우기 위한 설정입니다. 그림에 링크를 꼭 걸어주세요. 외부 링크도 좋고, 마땅한 외부링크가 없는 경우 원본 파일을 걸어주면 됩니다.
앞에서 왜 대충 알아볼 정도 파일을 넣는지 아시겠죠? 원본 그림 파일은 링크 삽입 버튼을 누르고, 미디어 파일을 선택하면 원본 파일에 연결이 됩니다. 즉, 그림을 선택하면 좀 더 좋은 해상도의 이미지가 뜨게 만드는 것이죠.
이렇게 해두면 전면광고 발동 조건이 되어서, 자신이 설정한 전면광고 새로고침 시간이 지난 경우 화면에 전면 광고가 표시됩니다.
마치며
워플에서는 워드프레스 블로그를 사용한 수익화하는 다양한 방법을 연구합니다. 워드프레스 카덴스 테마는 저의 최애 테마죠.ㅎㅎ 워드프레스 일반이나 카덴스 관련한 질문이 있다면 저희 워플 커뮤니티로 오세요! 🙂

온라인 수익화를 연구하는 워플과 데이터 분석을 연구하는 슬기로운통계생활의 창업자이며, 2021년 부터 온라인 사업을 운영해오고 있습니다. 500개가 넘는 영상을 제작했으며, 여러 회사들과 협업을 통해 강의를 판매하고 있습니다. 워플을 통해 워드프레스 웹사이트를 사용하여, 수익으로 이뤄지는 퍼널 만들기, SEO 및 커뮤니티 수익화를 연구하고 있습니다. 오래 지속가능한, 건전한 온라인 수익화를 추구합니다.