워드프레스로 블로그를 운영하며 포스팅을 할 때, 어떤 방법으로 포스팅 이미지를 만드시나요?
혹여 그냥 기본으로 나타나게끔 그냥 두시거나
귀찮아서 파워포인트로 대충 만들어서 (제가 그랬음ㅎ) 사용하신다면
여기 방법을 따라서 해보시면 좋겠습니다.^^
저는 기존에 이런 식으로 파워포인트를 이용해서 사각형 생성하고 그 내부에 글씨를 넣는 방식을 이용했습니다.
이유는 그냥 제일 간단하니까 이렇게 했습니다.
그런데 이제는 조금 신경을 써보려고 합니다.
이를 위해서 Figma를 이용하는 방식을 소개하겠습니다.
위 아이콘을 누르면 Figma 로 바로 이동이 가능합니다.
Figma 에서는 구글 계정을 통해 무료로 계정 생성 및, 프로젝트 1개를 생성 가능합니다.
무사히 프로젝트를 생성하여 디자인 파일로 들어오셨다면 다음과 같은 화면을 마주하게 됩니다.
여기서는 화면 상단 좌측에 있는 부분을 주목해주면 되는데요.
바로 이 부분입니다.
여기서 척 봐도 네모난 무언가를 생성할 수 있는 아이콘이 보이죠?
네모를 클릭해서 대충 드래그를 해줍시다.
대충 드래그를 하면 이렇게 드래그를 한 영역만큼의 사각형이 생성됩니다.
이 사각형의 이름은 왼쪽 사이드에서 변경이 가능한데요.
‘대충 드래그’ 라고 지정을 하겠습니다.
또한 이 생성된 사각형을 클릭하면, 오른쪽 사이드에서 디자인 세부 설정을 조정 가능하게 됩니다.
이 오른쪽 사이드에서 값을 조절하겠습니다.
W를 1600, H를 900 으로요.
사각형의 너비와 높이를 조정했다면, 이번에 다시 도구 영역을 볼까요?
T 라고 되어 있는 텍스트 삽입 도구를 클릭해주고, 사각형 영역 안으로 드래그를 해줍시다.
이후 아무 글자나 좋으니 대충 타이핑을 해주세요.
이런 느낌으로 되셨나요?
마찬가지로 텍스트 영역도 W, H 값 조절이 가능합니다.
글꼴은 “Nanum Pen” 으로 했습니다.
이번에는 글씨와 사각형을 하나로 묶어줄 것입니다.
이를 위해서 사각형과 글씨가 하나의 영역 내로 올 수 있도록 드래그를 한 이후, 마우스 우측 버튼을 눌러줍시다.
여기서 “Auto Layout” 또는 쉬프트 + A 키를 눌러 Frame 으로 이 둘이 묶일 수 있도록 합니다.
다음은 이 Frame을 선택하고 마우스 우측 버튼을 눌러줍시다.
이후 “Create Component” 버튼을 누르거나, “컨트롤 + ALT + K” 버튼을 통해서 컴포넌트로 만들어주면 됩니다.
그러면 위 동영상과 같이 테두리가 보라색으로 변경이 되면서 이 박스가 특별한 컴포넌트가 될 겁니다.
이것을 포스팅_서식 이라고 지정하죠.
저는 이제 이 컴포넌트를 “제작틀”로써 사용하려 합니다.
해당 컴포넌트를 복사해서, 내가 원하는 내용을 채우는 거죠.
그럼 해당 컴포넌트를 “컨트롤 + C” 하고 “컨트롤 + V” 를 통해서 복사를 해볼까요?
“컨트롤 + ALT + C” 를 누른 상태로 해당 컴포넌트를 누르고 드래그하면 손쉽게 복사도 가능합니다.
위와 같이 포스팅_서식을 복사해서 내가 원하는 내용으로 교체를 했습니다.
뒷 배경이 마음에 들지 않나요?
한 번 색깔을 변경해보겠습니다.
위처럼 우리가 사각형을 클릭하고 오른쪽 디자인 섹션에서 “Fill” 이라는 부분의 색상을 조절하면 됩니다.
요거를 바로 사용하고 싶다면 디자인 섹션의 하단 부분을 보면 됩니다.
Export 라는 섹션이 있죠?
이곳에서 PNG, SVG 등 다양한 형태로 해당 이미지를 다운로드 가능합니다.
저는 이것을 PNG 파일로 추출하겠습니다.
물론 이 정도로도 나쁘지는 않으나, 조금 더 멋지게 꾸미고 싶다면 또한 간단한 방법이 있습니다.
AI 덕에 세상이 참 좋아졌죠?
간단한 명령어를 이용해서 포스팅 썸네일로 사용할 만한 배경 이미지를 생성 가능합니다.
저 이미지를 다운로드 받아주시고요.
위와 같이 기존 배경에 있던 색깔 대신 이미지를 넣어주면 됩니다.
다운로드를 받았던 이미지를 넣고, 해당 이미지의 색상 등을 따로 조절이 가능하죠.
저는 불투명도를 75% 로 설정하고, 노출도와 대비도를 낮추어 이미지를 어둡게 설정하였습니다.
배경을 어둡게 하고, 텍스트를 흰색으로 변경하여 텍스트가 더 눈에 띄게 만들 생각이죠.
요런 식으로 이제 완성이 되었습니다.
위에서 설명했던 것과 같이 다운로드를 받아주죠.
저는 PNG 파일로 다운로드를 받을 겁니다.
워드프레스 어드민 창으로 오고, 왼쪽 대쉬보드에서 POST 페이지로 넘어오면
현재 내가 작업 진행 중인 포스팅이 보일 겁니다.
제작한 썸네일을 등록하고 싶은 포스팅으로 들어가 줍시다.
포스팅을 들어가면 대충 이런 구조로 되어 있네요.
참고로 저는 “Hello Elementor” 테마를 사용하고 있습니다.
테마에 따라서 약간의 구조 차이는 있을 수 있습니다만, 대부분 오른쪽 대쉬보드에 여러 세팅 섹션이 있습니다.
위와 같이 포스팅 세팅 화면에서 오른쪽 대쉬보드를 보시면 “Featured image” 라는 섹션이 있습니다.
여기서 Set Featured Image 를 클릭해주면 파일 선택이 가능합니다.
Figma에서 다운로드 했던 PNG 파일을 업로드 해주시면 완료가 됩니다.
요런 식으로 제가 기존에 사용하던 주먹구구 썸네일 방식과는 차원이 다른 퀄리티가 되었습니다.
아주 간단한 몇 가지 도구를 이용하는 것만으로 이 만큼의 퀄리티 상승을 노릴 수 있다니..
참으로 좋은 시대에 살고 있는 것 같네요.^^
여기까지 읽어주신 분들 정말 감사합니다.