야근회피기동 ·
아스트라로 블로그 이미지 만들기, 다음 글에도 쓰는 피그마 템플릿
짠~ 이번 글에 쓴 이미지는 아스트라로 만들어봤어요.
블로그를 시작하면서 글에 들어갈 이미지도 같은 분위기로 맞추고 싶었어요. 그런데 글을 쓸 때마다 색과 글꼴, 배치를 새로 정하려면 손이 많이 갈 것 같더라고요.
그래서 이번에는 다음 글에도 꺼내 쓸 수 있는 틀을 만들어보기로 했어요. 한 장을 마음에 들게 만들어두고, 주제가 바뀌면 제목과 그림을 바꾸는 거예요. 맨 위에 있는 썸네일이 그렇게 만든 첫 번째 이미지예요.
작업은 아스트라(Astra)와 피그마(Figma)를 연결해서 했어요. 제가 원하는 모습을 말로 요청하면 피그마에 만들어주고, 결과를 보면서 다시 고치는 방식이에요. 어떤 요청을 했고 어떻게 다듬었는지 보여드릴게요 :)
01. 작업할 피그마 파일을 연결했어요
먼저 아스트라가 디자인을 만들 파일이 필요해요. 저는 Astra를 사용하는 Codex 작업 환경에 Figma 플러그인을 연결하고, 제가 편집할 수 있는 피그마 파일을 준비했어요.
같은 환경에서 따라 한다면 플러그인 메뉴에서 Figma를 설치하고 계정을 연결해 주세요. 새 대화에 피그마 파일 링크를 붙인 뒤, “이 파일을 읽고 수정할 수 있는지 확인해 줘”라고 요청하면 돼요.
연결을 확인했다면 이제 이 파일에 어떤 이미지를 만들지 알려줄 차례예요.
02. 계속 쓸 수 있도록 첫 장을 다듬었어요
저는 흰 배경에 차분한 초록색, 단순한 낙서 그림을 쓰고 싶었어요. 이 분위기를 정해두면 다음 이미지를 만들 때도 같은 기준으로 요청할 수 있거든요.
다만 처음부터 지금 모습이 나오지는 않았어요. 이미지 안에 설명을 많이 넣었더니 본문에서 할 이야기를 또 하고 있었고, 제목까지 손글씨로 쓰니 잘 읽히지 않았어요 😅
그래서 긴 설명은 본문으로 옮기고, 이미지에는 큰 제목과 그림만 남겼어요. 제목은 굵고 또렷한 글꼴로 바꾸고 손그림 느낌은 그림과 작은 서명에 살렸고요.
그렇게 다듬은 기준을 한 번에 전달할 수 있도록 요청문으로 정리했어요. 직접 써본다면 브랜드 이름과 제목, 색을 원하는 내용으로 바꿔주세요.
“이 피그마 파일에 블로그용 썸네일을 만들어 줘. 브랜드 이름은 야근회피기동이야. 크기는 1200×1200, 흰 배경에 초록색(#49624F)을 써 줘. 제목은 ‘카드뉴스도 매번 손으로?’야. 페이퍼로지 8 ExtraBold로 크게 넣어 줘. 카드가 겹쳐진 모습을 단순한 낙서 느낌으로 그려 줘. 긴 설명은 넣지 마. 글자와 도형은 수정할 수 있게 만들고, 기존 작업은 남겨둔 채 새 프레임에 만들어 줘.”
이 요청으로 만들고 수정한 썸네일을 피그마에서 열어본 화면이에요. 글자와 도형을 편집할 수 있게 만들어두니, 다음 주제로 바꿀 때도 이 파일에서 이어서 작업할 수 있어요.
03. 같은 틀로 다른 주제도 만들어봤어요
첫 장의 분위기가 잡혔으니, 이제 처음에 만들고 싶었던 ‘다음 글에도 쓰는 틀’이 되는지 볼 차례예요. 노션과 메일 초안을 주제로 이미지를 만들어봤어요.
노션에는 노트 그림을, 메일에는 편지 봉투를 넣었어요. 색과 글꼴은 유지하고 제목과 그림을 바꾸니, 같은 블로그의 이미지이면서도 어떤 글인지 구분이 되더라고요.
이때는 처음부터 디자인을 다시 설명할 필요 없이, 어떤 프레임을 복제하고 무엇을 바꿀지 알려주면 돼요. 예를 들어 노션 버전에서 메일 버전으로 바꿀 때는 이렇게 요청할 수 있어요.
“‘노션 시작하기’ 썸네일을 복제해 줘. 새 제목은 ‘메일 초안, 혼자 끙끙 말고.’야. 주제 표시는 ‘AI 써먹기’로, 노트 그림은 편지 봉투로 바꿔 줘. 색, 글꼴, 선 느낌, 여백과 브랜드 서명은 유지해 줘. 기존 버전은 남겨두고 새 프레임에 만들어 줘.”
아래 두 장을 나란히 보면 바뀐 부분과 유지한 부분이 더 잘 보여요.
04. 완성한 이미지를 블로그에 넣었어요
이제 만든 이미지를 파일로 저장하면 돼요. 저는 저장하기 전에 문구가 맞는지, 글자가 잘리거나 겹치지는 않는지 먼저 확인했어요. 이 점검과 저장도 함께 요청할 수 있어요.
“완성한 프레임에 오탈자, 잘린 글자, 겹친 요소가 있는지 확인해 줘. 이번 글에 사용할 이미지만 PNG로 내보내 줘.”
피그마에서 직접 저장하고 싶다면 아래 순서대로 해주세요.
① 저장할 프레임을 선택해 주세요.
② 오른쪽 패널의 ‘내보내기’에서 PNG를 확인해 주세요.
③ 바로 아래 프레임 이름이 적힌 내보내기 버튼을 눌러 주세요.
아래는 그 버튼이 있는 실제 화면이에요. 필요한 부분을 크게 잘라서, 눌러야 할 곳에 초록색 테두리를 둘렀어요.
저장한 이미지는 블로그에 넣고 휴대폰 크기로 한 번 더 봤어요. 피그마에서 크게 볼 때는 괜찮아도, 화면이 작아지면 제목이나 버튼이 잘 안 보일 수 있거든요. 설명용 캡처도 필요한 부분을 크게 보여주도록 다듬었어요.
이렇게 이번 글에 쓸 이미지와 다음 글에 다시 쓸 틀을 함께 만들었어요. 첫 장은 고칠 부분이 있었지만, 그때 정한 색과 글꼴, 그림 스타일을 다음 이미지에도 그대로 쓸 수 있었어요.
처음 해본다면 여러 장을 한꺼번에 만들기보다, 자주 쓰게 될 썸네일 하나부터 만들어보셔도 좋겠어요. 마음에 드는 한 장이 생기면 다음 글에서는 제목과 그림을 바꿔보는 거예요. 저도 이 틀로 다음 글의 이미지를 이어서 만들어보려고 해요.
참고한 공식 안내 • 플러그인 설치·연결: https://learn.chatgpt.com/docs/plugins • 모델 선택과 사용 환경: https://learn.chatgpt.com/docs/model-selection
※ 이 글은 Astra를 사용하는 Codex 작업 환경과 Figma 플러그인으로 진행한 사례예요. 모델·플러그인 사용 가능 여부는 계정과 환경에 따라 다르고, 메뉴는 업데이트에 따라 달라질 수 있어요. 요청문은 실제 작업 방식을 따라 하기 쉽게 정리한 예시예요.
오늘도 무사히 퇴근해요.
← 다른 기록 보기