부산디자인진흥원에서 진행하는 치안리빙랩에서 부산TG팀의 퍼실리테이터를 맡았습니다. 이번에 기획한 캠페인이 30, 40대 타겟이다 보니 랜딩페이지가 필요하겠다 싶어 직접 AI와 함께 제작했습니다.
캠페인은 부산TG 팀이 준비한 「부모님 안심운전, 자녀가 응원해효(孝)」이고, 완성된 페이지는 busan-tg-cheer.vercel.app에서 볼 수 있어요.
클로드 코드와 코덱스(GPT-6 Astra)에게 나눠 맡겼는데요, 어떤 일을 어느 쪽에 맡겼고 무엇을 입력했는지, 결과를 받고 제가 무엇을 골랐는지 단계별로 적었어요.
어떤 일을 어떤 AI에게 맡겼나요?
| 단계 | 맡긴 도구 | 제가 정한 것 |
|---|---|---|
| 회의록에서 할 일 정리, 신청서 원고 | 코덱스 | 분기 없는 단순한 폼으로 가기 |
| 신청서 생성과 공개 | 코덱스 + Aside CLI + Tally AI 생성 | 개인정보 안내 값 입력, 공개 시점 |
| 캠페인 이름과 소개 문구 | 클로드 코드 | 후보 중 응원해효 선택 |
| 참고 사례 20곳 조사 | 코덱스 (GPT-6 Luna·Sol·Astra) | 20곳을 열어 보고 2곳 선택 |
| 시안 3종과 통합 페이지 | 코덱스 | 합칠 방향, 아버지 이야기 |
| 웹툰·부착 예시·공유 이미지 | 코덱스 이미지 생성 | 스티커 위치, 이미지 속 문구 |
| 문구 피드백 반영 | 코덱스 | 지울 문구와 바꿀 문장 (세 번) |
| 배포 | 코덱스 + Vercel | 배포 요청 |
오른쪽 칸은 AI에게 넘기지 않고 제가 직접 정한 것들이에요.
회의록에서 신청서까지는 코덱스가 이어 줬어요!
코덱스에게 프로젝트 폴더를 확인하게 한 뒤, 마지막 회의에서 제가 맡은 일부터 뽑아 달라고 했어요.
마지막 회의록에서 내가 하기로 한거 정리해줘.돌아온 목록에 신청 폼과 피드백 설문 폼, 캠페인 랜딩페이지 제작이 있었는데요, 폼은 바로 원고로 받았습니다.
설문폼 각각 MD로 생성해줘. TALLY로 각각 만들거야. 복잡하게 분기까지 할 필요는 없어.마크다운 원고가 나오자 Tally 화면에서 하는 일도 코덱스에게 넘겼어요.
ASIDE CLI로 TALLY에서 질문지 생성하는데 AI로 생성하기 해서 저 MD를 넣어서 하도록 해. 그리고 링크 배포까지 해서 링크를 줘.코덱스는 Aside CLI로 브라우저를 움직여 Tally의 Create with AI 입력창에 원고를 넣었어요. 신청 폼은 첫 생성이 오류로 멈춰서 같은 AI 대화에서 다시 요청했고, 두 번째에 문항이 만들어졌다고 해요. 원고와 프리뷰를 대조하는 검수까지 코덱스가 했습니다.
공개는 바로 하지 않았어요. 코덱스는 개인정보 안내의 수집 주체와 보관 기간을 미확정 표시로 둔 채 저에게 값을 물었고, 제가 채운 뒤에 신청 폼을 공개해 랜딩페이지 맨 아래에 넣었습니다. 피드백 설문 폼은 만들어 두고 아직 공개하지 않았어요.
사례 조사는 모델별로 나눠서 시켰어요!
레퍼런스 조사는 계획부터 코덱스에게 맡겼어요. 요청에는 조건만 적었는데요, 모바일 전용에 인터랙티브하고 위트 있는 페이지, 최근 6개월, 국내외 20곳, 공공과 민간 무관, 참여와 바이럴이 목표라는 조건을 주고 업무 배분은 알아서 하라고 했습니다.
코덱스가 짠 계획에서 후보 수집과 사이트별 정리는 빠른 모델인 GPT-6 Luna가, 실제 화면 확인은 GPT-6.1 Sol이, 비교와 적용 판단과 근거 감사는 GPT-6 Astra가 맡았어요. 결과는 국내 8곳과 해외 12곳이었어요.
보고서에는 390px 화면과 실제 휴대폰 동작은 확인하지 못했다는 단서가 적혀 있었어요. 20곳은 제가 하나씩 열어 봤고, 코덱스의 추천 5곳에 없던 두 곳을 골라 다시 분석을 맡겼습니다.
아래 2가지 랜딩페이지를 각각 분석하고 이번 랜딩페이지의 레퍼런스로 삼자. 각 모델별로 업무 배분해서 분석하자.
분석 결과에서 코덱스는 Crodino의 넓은 배경색과 큰 버튼 하나, Sky Gardening의 생활 속 상황에서 실천으로 이어지는 순서를 가져오고, 점수 경쟁 게임과 긴 퀴즈는 빼자고 했어요.
팀 디자이너가 만든 일러스트레이터 원본도 코덱스에게 열게 했는데요, 아트보드를 300dpi 투명 PNG로 뽑아 주었고 페이지에는 AI가 다시 그린 그림 대신 이 PNG만 쓰게 했습니다.
시안 세 개와 웹툰은 이렇게 요청했어요
레퍼런스 참고해서 치안리빙랩 프로젝트를 3가지 버전으로 랜딩페이지 목업 만들어보자.
1. 직관적인 스타일
2. 스토리텔링 스타일
3. 마치 캐릭터가 말을 건네는 것 같은 스타일
세 시안은 색과 글꼴, 버튼과 카드 모서리까지 따로 정의한 디자인 시스템으로 나왔어요. 하나를 고르는 대신 첫 화면은 직관형, 프로젝트 소개는 스토리텔링형의 편지, 궁금증 해소는 캐릭터형의 채팅 방식으로 합쳐 달라고 했습니다.
합칠 때 이미지 생성도 함께 맡겼어요.
지금 우기 캐릭터를 바탕으로 이미지 생성해서 스토리 텔링식으로 이미지와 텍스트를 스토리텔링 식으로 보여주면 좋을거 같아.
이야기는 제 아버지 경험을 그대로 적어 넘겼고, 코덱스가 확정된 우기 캐릭터를 참조해 웹툰 세 컷을 생성했어요.
스티커를 차에 부착한 예시도 이미지 생성으로 만들었는데요, 첫 결과를 보고 뒷유리 스티커는 오른쪽 위, 하단 문구 스티커는 차 가운데로 다시 생성하게 했어요. 실제 사진이 아니라서 이미지 아래에 AI로 만든 예시라는 안내를 붙였습니다.
AI가 쓴 문구는 이렇게 걸러냈어요!
통합 버전을 보고 준 첫 피드백 11가지 중 다섯 개는 문구를 지우라는 요청이었어요. 짚은 그대로 옮기면 이렇습니다.
마음은 조수석에 같이 타고 있어요! 히어로 이거 삭제
02 / 마음을 담은 선물 SAFETY CHEERING KIT 이런 EYEBROWN은 다 삭제하자.
첫 화면 문장은 제가 써서 줬어요. 「우리 부모님이 부산 거주 만 65세 이상 운전자라면」으로 시작해 신청하는 자녀가 읽는 문장이 됐습니다.
이 피드백은 코덱스가 제 글쓰기 규칙 저장소에도 원문으로 기록했어요. 장식 라벨이나 같은 조건을 두 번 쓰는 문장을 다음에 AI가 랜딩 카피를 쓸 때 피하도록 규칙 파일 한 곳에 사례로 남겨 둔 거예요.
배포와 공유 이미지, 작업 기록까지 맡겼어요
VERCEL에 배포하자. PLAN에 변경사항 반영하고.
PLAN.md는 이 프로젝트의 작업 기록 파일이에요. 코덱스와 클로드 코드 모두 작업을 시작할 때 이 파일을 읽고 끝날 때 갱신하도록 규칙을 정해 뒀어요. 배포 기록과 바뀐 내용도 이 파일에 함께 남습니다.
카카오톡 공유 이미지는 우기 이미지와 캠페인 이름만 넣으라고 하면서 한 줄을 붙였어요.
쓸데없는 말은 필요없어.
코덱스는 우기 PNG를 참조해 이미지를 생성해 반영했고, 카카오 개발자 도구에서 이전 미리보기 캐시를 지운 뒤 새 이미지가 뜨는지까지 확인했습니다.
AI와 랜딩페이지를 만든다면 이 순서로 해보세요!
이틀 동안 코드와 이미지, 폼과 배포는 대부분 AI가 맡았어요. 레퍼런스 두 곳, 세 시안을 합칠 방향, 지울 문구, 개인정보 안내 값, 공개 시점은 제가 정했고요.
랜딩페이지를 AI와 만드신다면 회의록과 시안을 한 폴더에 모아 두고 시작해 보세요. 폼은 마크다운 원고로 먼저 받고, 조사는 모델별로 나눠 맡기고, 시안은 여러 개 받아 좋은 부분만 합치면 됩니다. 피드백은 지울 문구를 그대로 짚어 주는 것으로 충분했어요!
함께 읽으면 좋은 글
코덱스·클로드로 만든 결과물
① GPT-6 Astra로 구현한 웹사이트 7가지 사례와 프롬프트
② AI와 함께 일본 후쿠오카 여행짜고 부모님께 공유하기
Aside 브라우저 자동화
③ ASIDE로 AI 업무 자동화, 블로그 자동화부터 슬랙봇 세팅까지
랜딩페이지·홈페이지 만들기
⑤ AI, 바이브코딩으로 만든 홈페이지는 왜 다 비슷해질까?
⑥ 클로드 코드 원데이클래스 6기, 랜딩페이지 배포부터 업무 자동화까지
