코덱스, 클로드 코드! 누가 더 기업 소개 랜딩 페이지를 잘 만들까?

Codex CLI와 Claude Code 양쪽에 같은 채용 랜딩페이지를 동시에 시켜보고, 어디까지 비슷하게 만들어내는지, 어디서 차이가 벌어지는지 비교해 본 작업기입니다. 골든래빗 출판사의 입문 편집자·마케팅 팀장·마케팅 팀원 채용 공고를 원페이지 사이트로 만드는 흐름을 따라가면서, 채용공고 MD 문서, 히어로 이미지, styles.refero.design의 디자인 레퍼런스까지 한 번에 컨텍스트로 밀어 넣는 방식을 보여드립니다. 단순히 "랜딩페이지 만들어줘"가 아니라, 어떤 자료를 어떻게 모아서 어떻게 떠먹여 줘야 좋은 결과가 나오는지에 대한 실전 노트로 봐주시면 좋겠습니다.

**디자인.md 사이트 : https://styles.refero.design

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 인사와 오늘의 콘셉트 - Codex CLI와 Claude Code 비교 작업
1:06 채용 랜딩페이지가 포트폴리오·회사 소개·1인기업에 쓰이는 이유
2:34 두 에이전트 환경 준비와 바이패스(권한 우회) 모드 셋업
4:03 채용공고 MD 문서 3종 작성 - 편집자, 마케팅 팀장, 팀원
6:31 히어로 섹션 이미지 프롬프트 설계 - 중앙을 비운 흰 배경
9:14 다양한 구성원 에셋과 파워퍼프걸 스타일 지정하기
12:31 한 번에 여러 장 받는 이미지 생성 시간 절약 팁
13:26 styles.refero.design에서 센터 정렬 위주 디자인 레퍼런스 고르기
16:13 "플레이풀 사이트 요구"를 이미지 컨텍스트로 함께 전달
18:07 동일 프롬프트로 양쪽 에이전트에 동시에 일 시키기
19:22 Next.js·Pretendard·Apple 카피 톤 등 세부 요구사항 정리
22:13 두 에이전트의 진행 방식 비교 관찰
23:13 Codex 결과물 점검과 카피·비율 수정 요청
27:39 Claude Code 결과물 분석과 공간 활용·애니메이션 차이
29:53 아이콘·일러스트 추가와 GPT 비전 기반 이미지 컨텍스트 활용
33:28 PNG 배경 투명화 처리로 일러스트를 자연스럽게 녹이기
36:04 두 에이전트 총평과 채용 랜딩페이지 활용 마무리

#코덱스CLI #CodexCLI #클로드코드 #ClaudeCode #바이브코딩 #vibecoding #AI코딩 #AI에이전트 #랜딩페이지 #채용페이지 #채용공고사이트 #NextJS #프리텐다드 #Pretendard #모빈 #Mobbin #이미지생성 #파워퍼프걸스타일 #프롬프트엔지니어링 #골든래빗 #포트폴리오 #1인기업 #스타트업 #프론트엔드 #웹개발