📝 한줄 요약
링커리어 공고에 올릴 상세페이지 이미지, Figma도 디자이너도 없이 Claude Code로 5분 만에 만들었습니다.
바쁘시면 이것만 읽어도 돼요:
URL과 프로그램 내용만 전달했더니 브랜드 컬러까지 맞춘 디자인이 자동으로 나왔다
HTML + 이미지 변환 도구를 Claude Code가 알아서 설치하고 처리했다
Figma, PPT, 디자이너 요청 없이 5분 만에 PNG 이미지 완성
"화질 개선해줘" 한 마디로 해상도까지 자동 조정됐다
디테일 수정까지 원하면 더 걸리겠지만, 빠르게 퀄리티 있는 결과물이 필요할 때 최고
🎯 이런 분들께 도움돼요
디자인 툴을 잘 못 쓰는데 홍보물을 만들어야 하는 마케터
채용/홍보 담당자인데 공고 상세페이지를 빠르게 만들어야 하는 분
스타트업이나 소규모 팀에서 혼자 여러 업무를 처리하는 분
디자이너에게 맡기기엔 애매한 소소한 홍보물이 자꾸 생기는 분
😫 문제 상황 (Before)
저희 팀은 링커리어에 AI 스터디 모집 공고를 올리고 있는데,
일감이 많다 보니 공고를 올릴 때마다 텍스트만 대충 채워 넣는 게 반복됐습니다.
상세페이지의 퀄리티를 올리는 것만으로도 신뢰감을 올리고 전환율을 올릴 수 있음을 알고 있지만,
내 부에 해당 리소스를 대응해줄 디자이너나 그 정도의 워크타임을 뺄 수 없었는데요.
이번에 링커리어 새 공고를 올리면서 Claude Code로 해결해봤습니다.
🛠️ 사용한 도구
도구: Claude Code
모델: Claude Sonnet 4.6 / Playwright
특이사항: 코딩 지식 없이 대화만으로 진행
🔧 작업 과정
URL만 던졌더니 알아서 파악하려 했다
처음엔 그냥 사이트 URL 두 개만 던졌습니다. "이 사이트 내용 기반으로 상세페이지 만들어줘"라고요.
사본
우리 회사가 모집하는 무료 ai 스터디 사이트야 https://avpn.gpters.org/
링커리어 공고 사이트야 (xxx)
사이트의 내용을 기반으로 상세페이지 같은 걸 붙여넣을 수 있는 형태로 만들어줘
추가 정보를 위해 제가 직접 사이트 스크린샷과 내용을 텍스트로 정리해서 전달하기도 했습니다.
정보를 주니까 브랜드 컬러까지 맞춰서 디자인이 나왔다
사본
🧑🎓대학생 & 주니어 트랙
매주 목요일 9~11PM (Zoom 필수참석)
이런 분들에게 추천해요: 취업 준비 중인 대학생, 경력 3년 이하 주니어...
결과물: 자기소개서, 포트폴리오, 면접 스크립트, AI 수료증
일정: 3/19 이력서 → 3/26 포트폴리오 → 4/2 면접 → 4/9 취업 완성
프로그램 내용을 정리해서 보내고 사이트 스크린샷도 함께 전달했습니다. 그러자 Claude Code가 알아서 GPTers의 브랜드 컬러(오렌지 계열)를 읽어내서 디자인에 반영했습니다.
어떻게 이미지를 만들었을까요? Claude Code는 HTML과 CSS라는 웹페이지 제작 언어로 상세페이지 레이아웃을 만들고, 그걸 Playwright라는 도구(웹페이지를 자동으로 스크린샷 찍는 프로그램)를 통해 PNG 이미지 파일로 변환했습니다. 마치 웹페이지를 화면에 띄워놓고 캡처하는 방식이라고 생각하면 됩니다. 이 모든 도구 설치부터 실행까지 Claude Code가 알아서 처리했습니다.
완성된 이미지 구성:
다크 배경에 "AI와 함께 커리어를 다시 설계하세요" 히어로 배너
전액 무료 / Zoom 수업 / 4주 실습 / 30만원 상당 혜택 강조 블랙 배너
대학생 트랙 초록 하이라이트 박스
추천 대상 / 결과물 / 4주 커리큘럼 / 전체 일정 섹션
"화질 개선해줘" 한 마디로 해상도까지 자동 조정
1차 결과물이 나왔는데 화질이 조금 아쉬웠습니다.
사본
용량에 맞추느라 화질이 별로 안 좋은 것 같아.
신청링크 부분은 빼도 될 것 같고
화질을 개선해줘
Claude Code가 이미지 캡처 설정에서 해상도 배율을 2.5배로 높이는 방식으로 해결했습니다. 결과적으로 파일 크기가 515KB에서 1.7MB로 늘어나면서 훨씬 선명한 이미지가 완성됐습니다. 링커리어 업로드 제한(10MB)에도 여유 있게 맞았고요.
✅ 결과
GPTers 브랜드 오렌지 컬러가 적용된 1.7MB 고화질 PNG 이미지. 7개 섹션이 담긴 세로 형태 상세페이지로, 링커리어 공고에 바로 업로드 가능한 형태로 완성됐습니다.
Before
After
결과물
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
URL만 주지 말고 내용도 직접 붙여주기 — 동적 사이트는 AI가 자동으로 못 읽을 수 있어요. URL 실패하면 스크린샷이나 텍스트로 보완하면 됩니다
원하는 분위기의 레퍼런스(스크린샷)를 함께 주기 — "이 사이트랑 비슷하게"라고 이미지를 같이 보내면 디자인 방향이 훨씬 잘 맞습니다
한 번에 완벽하게 하려 하지 않기 — "화질 개선해줘", "이 섹션 빼줘" 같이 피드백을 주면서 수정해 나가는 게 훨씬 빠릅니다
이렇게 하면 안 돼요
처음부터 완벽한 결과 기대하기 — 1차 결과물은 70~80점이라고 생각하고, 수정 요청 1~2번은 당연하게 여기는 편이 좋아요
모호하게 요청하기 — "예쁘게 만들어줘"보다는 "오렌지 계열 색상으로, 세로 형태 이미지로 만들어줘"처럼 구체적일수록 결과가 좋습니다
🌍 다른 업무에 적용한다면?
이 방식은 상세페이지 이미지 외에도 다양하게 활용할 수 있습니다:
행사 안내 포스터 — 이벤트 정보 주면 PNG 포스터로 변환
이메일 뉴스레터 헤더 — 브랜드 컬러 맞춘 배너 이미지 제작
SNS 카드뉴스 초안 — 내용 주면 카드 형태 이미지로 만들기
제안서 표지 이미지 — 회사 브랜드에 맞는 커버 이미지 제작
디자인 감각이 없어도, Figma를 몰라도, URL이나 텍스트로 내용만 전달하면 이미지가 나옵니다.
🚀 깨알 홍보
GPTers는 유료 스터디외에 무료 프로그램도 운영하고 있어요!
AI를 활용해 이력서·포트폴리오를 직접 만들어보는 4주 과정으로, 취업 준비 중인 분들에게 특히 추천합니다.
위 링크에서 신청하실 수 있습니다.
