얼마 전 진행한 젠스파크 일잘러 경진대회, 기억하세요?
사실 이 대회는 제작과 운영을 100% AI에게 맡겨서 치렀어요.
이벤트 페이지 디자인, 쿠폰 발급 기능, 어드민, 매뉴얼 영상, 안내 메일, 상장, 1차 심사까지요.
제가 한 일은 방향 잡고, 결과 보고, 고쳐 달라고 말한 것뿐이에요. (그래도 그게 제일 어렵더라고요 🤣)
처음 시작은 카톡 대화였어요.
영상 공개에 맞춰 젠스파크 담당자님이 카톡으로 이벤트 제안을 주셨어요.
굿즈, 크레딧, 50% 할인 쿠폰까지 지원해 주신다는 내용이었죠!
카톡이 온 건 이 영상 때문이었어요.
9월 28일, 젠스파크 공식 채널에서 파워유저 스토리 Ep.5로 제 편이 공개됐어요.
영상에서 저는 완벽주의 때문에 계획만 해 두던 일이 많았는데, AI에 일단 던져 보고 엉망인 결과를 고치다 보면 결국 일이 진행되더라는 얘기를 했어요.
말만 하고 끝내면 안 되니까요. 이 대회를 '일단 던지고 고치기'로 직접 굴려 봤습니다.
여기서부터 18단계를 순서대로 보여드릴게요. 캡처 속 빨간 네모가 눌러야 하거나 눈여겨볼 곳이에요.
1. 논의 카톡 캡처를 그대로 던져서 기획서를 만들었어요.
젠스파크 AI 워크스페이스 6.0에 카톡 캡처를 붙이고, 홍보 채널만 적어서 보냈어요.
커넥터에서 노션을 켜 두면 기획서를 제 노션 페이지에 바로 써 줍니다.
개요, 특전, 이벤트 구성까지 정리된 기획서가 노션에 바로 생겼어요.
이 기획서로 담당자님과 조율해서 할인 쿠폰은 10개에서 50개로 늘었고요. (감사합니다 🎉)
2. 랜딩 페이지 만들 차례, 디자인에는 가이드 피그마 파일을 적용했어요.
젠스파크 측에서 'Genspark Genius' 브랜딩 피그마 파일을 공유해 주셨어요.
로고, 컬러, 폰트, 워드마크 규칙이 다 들어 있는 파일이에요. 이걸 사람이 보고 따라 그리는 대신, AI가 읽을 수 있는 '디자인 시스템'으로 바꿨어요.
3. 젠스파크 디자인에 디자인 시스템부터 등록했어요.
젠스파크 디자인에서 '새 디자인 시스템'을 누르고, 브랜드 설명을 적고, 피그마 파일을 올리면 끝이에요.
이걸 먼저 해 두면 그다음부터는 '이벤트 페이지 만들어줘' 한 줄에도 브랜드 규칙이 지켜져요.
4. 피그마 파일 하나가 디자인 시스템이 됐어요.
타이포 스케일, 컬러 팔레트, 컴포넌트, 다운로드용 핸드오프 패키지까지 만들어졌어요.
라임, 크림, 잉크, 블루. 이 네 가지 색이 이후 모든 결과물에 그대로 쓰였어요.
5. 이벤트 페이지는 이 프롬프트로 요청했어요.
디자인 시스템을 선택하고, 노션 기획서의 경품 내역을 참고하라고 적어서 보냈어요.
(이때는 선착순 30명으로 적었는데, 기획서로 조율한 뒤 50개로 늘었어요. 스킬은 이후 앰배서더 Pick 5개와 AI 슬라이드 Pick 7개, 모두 12개로 정리됐고요)
이 프롬프트는 이렇게 짜여 있어요.
길어 보이지만 뜯어 보면 다섯 가지예요. 이 틀은 다른 이벤트 페이지에도 그대로 쓸 수 있어요.
| 구성 | 프롬프트 속 문장 | 왜 넣었나 |
|---|---|---|
| ① 목적 한 줄 | 이벤트 페이지 만들어줘 | 무엇을 만드는지 먼저 정해요 |
| ② 최우선 원칙 | 초보자도 쉽게 참여할 수 있게 하는 것이 중요해 | AI가 애매할 때 고를 기준을 줘요 |
| ③ 단계별 동선 | 1. 영상 댓글 → 2. 계정 확인 → 3. 출품 | 참여자가 위에서 아래로 따라오게 해요 |
| ④ 단계마다 넣을 요소 | 영상 임베딩, 경품, 폼 항목 4개, 출품 주소 | 빠뜨리면 안 되는 사실을 고정해요 |
| ⑤ 참고 자료 위치 | 노션 경품 내역, 스킬 페이지 링크 7개 | AI가 지어내는 대신 찾아 읽게 해요 |
디자인 얘기는 한 줄도 없어요. 디자인은 디자인 시스템이 맡고, 프롬프트는 내용과 동선만 맡는 거예요.
그리고 ④번처럼 경품 개수, 폼 항목, 마감 주소 같은 '틀리면 안 되는 사실'은 꼭 프롬프트에 박아 두세요. 이런 건 AI가 그럴듯하게 지어내거든요.
첫 결과를 보고 이렇게 고쳐 달라고 했어요.
수정 프롬프트는 이 세 가지 패턴으로 썼어요.
• 전체 지시 한 줄: 'AI 말투 다 바꿔'처럼 페이지 전체에 걸리는 기준을 맨 위에 둬요.
• 원문 붙이고 > 로 고칠 내용: 고칠 문장을 그대로 복사해 붙이고 아래에 바꿀 문장을 적어요. 어디를 고치는지 헷갈릴 일이 없어요.
• >> 로 감정 섞인 피드백: '이게 뭐야' 같은 말도 그냥 써요. 왜 별로인지가 같이 전달되더라고요 🤣
6. 결과는 이렇게 나왔어요.
전체 페이지는 꽤 길어서 한 장으로 펼쳐 봤어요. 영상 댓글 → 계정 확인 → 출품 → 경품 → FAQ 순서예요.
7. 클로드 디자인으로도 만들어 봤어요.
클로드 디자인에도 같은 디자인 시스템을 넣고, 젠스파크 라이브 상세페이지를 요청해 봤어요.
클로드 디자인도 디자인 시스템부터 만들고 시작하는 기능이라 개념은 똑같아요. 그런데 같은 기능이어도 젠스파크 쪽이 오류가 적고 결과가 더 좋더라고요. 젠스파크는 제 프롬프트를 한 번 더 다듬고, 작업을 잘게 나눠 알맞은 모델에 나눠 맡기거든요. 그리고 클로드 디자인은 이미지를 생성해서 넣어 달라고 할 수가 없어요. 경품 사진, 배너처럼 이미지가 계속 필요한 이벤트 페이지는 이 차이가 커요.
클로드 디자인으로도 충분히 되는데, 젠스파크 디자인이 더 좋은 퀄리티를 더 빠르게 뽑아줘서 이번엔 젠스파크를 썼어요.
8. '빌드하기'를 누르면 코드로 넘어가요.
디자인이 끝나면 오른쪽 위 '빌드하기'를 눌러요. 그러면 젠스파크 코드(바이브코딩 툴)로 넘어가서 실제로 동작하는 웹사이트가 돼요.
9. 개인정보를 넣으면 쿠폰이 나오는 기능을 붙였어요.
카톡에서 받은 50% 할인 쿠폰 링크(대회 기간 한정)를 선착순으로 한 명에게 하나씩 나눠 줘야 했어요.
젠코드에 쿠폰 링크 목록을 붙이고 이렇게만 말했어요.
폼 입력 → 발급 → 마감 안내까지 화면이 한 번에 나왔어요.
10. 어드민 페이지도 알아서 만들어 줬어요.
발급 현황, 남은 쿠폰, 차단 건수를 한눈에 보는 관리자 화면이에요.
같은 IP로 여러 번 신청하면 막는 것까지 들어가 있어서, 쿠폰이 한 사람에게 몰리는 일이 없었어요. CSV로 내려받아서 이후 안내 메일 명단으로 그대로 썼고요.
11. 클로드코드 + Aside로 매뉴얼 영상도 만들었어요.
"스킬을 어떻게 쓰는지 모르겠어요"라는 질문이 나올 게 뻔했어요.
그래서 스킬 사용법 매뉴얼 영상을 만들었는데, 이건 클로드코드로 했어요.
클로드코드를 Aside CLI랑 연결해서 클로드코드가 직접 Aside AI 브라우저를 조종하게 했어요. 이 방법은 이 뉴스레터를 참고하세요.
실제로는 네 번에 나눠 보냈는데, 한 번에 보내도 되게 하나로 모아 봤어요.
이 프롬프트도 짚어 볼게요.
| 구성 | 프롬프트 속 문장 | 왜 넣었나 |
|---|---|---|
| ① 무엇을 | CASE 01, CASE 02 + 각 주소 | 실습할 화면을 AI가 직접 찾아가게 해요 |
| ② 꼭 전할 말 | 5개 중 1개 골라서, Standard와 Ultra 차이 | 영상 안 안내 문구를 고정해요 |
| ③ 만드는 방법 | aside cli로 실습, 모션그래픽 + 자막 + 화살표 + 효과음 | 도구와 표현 방식을 정해요 |
| ④ 디자인 | 페이지 메인 디자인 톤앤매너를 차용 | 이벤트 페이지와 같은 색, 폰트로 맞춰요 |
| ⑤ 마지막 행동 | CTA 문구 + 경품 이미지 | 보고 나서 할 일을 정해 줘요 |
| ⑥ 배포까지 | 일부 공개 업로드 + 캡션 내용 | 올리는 일까지 한 번에 맡겨요 |
제일 효과가 컸던 건 ④번이에요. '톤앤매너를 차용해서' 한 마디에 이벤트 페이지의 블루, 라임, 크림 색과 폰트가 영상 전체에 입혀졌거든요.
결과는 30장면, 3분 51초짜리 영상이에요. 내레이션 없이 자막, 화살표, 줌, 효과음으로 안내해요.
12. 게시 메뉴에서 배포 주소를 받았어요.
젠코드의 '게시' 탭에서 업데이트를 누르면 젠스파크 호스팅에 바로 올라가요. 서버 걱정이 없어요.
13. 젠코드로 트래킹 코드까지 심었어요.
배포 주소를 젠코드 데스크톱 앱에 넣고 측정 세팅을 통째로 맡겼어요.
14. 운영 메일은 젠메일에게 맡겼어요.
쿠폰을 발급받은 분들께 마감 전 출품 리마인드 메일을 보내야 했어요.
어드민에서 받은 명단을 붙이고 젠메일에 요청했어요.
15. 수상, 참가상, 크레딧 안내 메일도 전부 이렇게요.
참가상 안내, 우수상 축하, 크레딧 수령 정보 요청까지 메일이 줄줄이 나갔어요.
참가자마다 출품작 이름을 넣어서 한 통씩 따로 썼어요.
그리고 가장 좋았던 점은 메일 발송에서 착오나 실수가 한 번도 없었다는 거예요.
예전에는 고객 관리를 수동으로 하고, 누가 어떤 상을 받았는지 착오가 생겨 실수가 생기곤 했는데 AI에 다 맡겨버리니 실수할 일 자체가 없더라고요.
16. 커뮤니케이션은 클로드코드가 구글 시트에 쌓아 가며 관리했어요.
누구에게 언제 무슨 메일을 보냈는지, 누가 회신했는지, 굿즈 배송 정보는 받았는지.
이걸 기억으로 관리하면 꼭 하나씩 빠지거든요. 그래서 클로드코드가 진행 상황을 구글 시트에 한 줄씩 쌓게 했어요.
17. 상장도 젠스파크 디자인으로 만들었어요.
3번에서 만든 디자인 시스템을 그대로 써서 상장 템플릿을 만들고, 수상자 이름과 출품작만 바꿔 PDF로 보냈어요. 이벤트 페이지와 같은 색, 같은 폰트예요.
18. 1차 심사는 AI가, 그다음은 사람이 했어요.
출품작이 올라온 쇼케이스 링크를 모아서 AI에게 1차 채점을 맡겼어요.
기준은 실무 적용성 30, 스킬 활용도 25, 완성도 25, 과정 공유 20, 그리고 유튜브 댓글 인증 가산점 5점이에요.
AI가 출품작 링크를 하나씩 열어 보고 점수와 근거를 적었어요. 점수 순서는 참고만 하고, 최종 수상작은 제가 직접 열어 보고 정했어요.
한 장으로 정리하면 이래요.
| 단계 | 이번에 쓴 도구 | 클로드로 한다면 |
|---|---|---|
| 카톡 → 기획서 | 젠스파크 워크스페이스 6.0 + 노션 커넥터 | 클로드 앱 + 노션 커넥터 |
| 디자인 시스템, 이벤트 페이지, 상장 | 젠스파크 디자인 | 클로드 디자인 |
| 쿠폰 발급, 어드민, 배포 | 젠스파크 코드 + 젠스파크 호스팅 | 클로드코드 + 별도 DB·배포 |
| 트래킹 코드 | 젠코드 데스크톱 | 클로드코드 + 브라우저 도구 |
| 운영 메일 | 젠메일 | 클로드 앱 + 지메일 커넥터 |
| 매뉴얼 영상, 시트 관리 | 클로드코드 + Aside | (이건 원래 클로드코드로 했어요) |
| 1차 심사 | AI 채점 → 사람 최종 결정 | 같은 방식 |
클로드로도 전부 할 수 있어요. 그래도 제가 젠스파크를 주로 쓰는 이유는 단순해요. 더 좋은 퀄리티를 더 빠르게 뽑아줘서예요.
특히 디자인이랑 메일은 손볼 곳이 확실히 적었어요. (영상이랑 시트 관리는 아직 클로드코드가 손에 익어서 그쪽으로...)
📎 함께 보면 좋은 링크
5. 퇴근후AI 오픈단톡방
의견을 남겨주세요