여행 다녀오면 사진은 10장씩 남는데 정작 올릴 Instagram 여행 캐러셀은 미루게 되죠. 오늘은 `photos` 폴더에 사진 10장 넣고, Codex가 `index.html` 미리보기랑 `caption.txt`까지 뽑게 해볼 겁니다. 첫 결과는 5분 안에 뜨고, 화면으로 바로 보여서 이거 진짜 되네 싶을 거예요.
지난번엔 시세 에이전트처럼 숫자 쪽으로 갔으니 이번엔 좀 더 가볍게 갑니다. 결과물이 눈으로 보이면 손이 빨라지거든요.
하나만 골라서 가면 됩니다
Claude 쓰는 분은 같은 프롬프트를 Claude Code에 붙이면 되고, Codex 쓰는 분은 터미널에서 `codex`만 켜면 됩니다. 둘 중 하나만 있으면 되고, 아래 흐름은 Codex 기준으로 적을게요. 요즘 Codex는 사진을 같이 읽을 수 있고, 폴더의 `AGENTS.md`도 자동으로 챙기고, `/review`로 따로 검수도 해줘서 이런 작업이 꽤 편해졌습니다.
일단 화면부터 띄웁시다
1
규칙 메모랑 첫 화면 같이 만들기
AI에게 보낸 프롬프트
이 폴더에 AGENTS.md를 먼저 만들고 그 규칙을 읽어서 Instagram 여행 캐러셀 초안을 만들어줘.
규칙:
- 한국어 문구만 사용
- cover 문구는 12자 이내
- photos 폴더의 사진 10장을 모두 사용
- 각 장 문구는 18자 안팎
- 과장 말투 금지
- 결과물은 index.html 하나와 caption.txt 하나
- 모바일 세로 화면에서 바로 보기 좋게
왜 이렇게 시켰나: 이거 안 넣으면 Codex가 장수도 늘리고 문구도 길게 씁니다. 처음엔 예쁘게보다 덜 흔들리게가 먼저예요.
이렇게 나오면 OK: 브라우저에 `index.html`을 열었을 때 커버 1장, 사진 10장 흐름, 마지막 한 줄 정리가 보이면 됩니다.
⚠여기서 이렇게 하면 안 돼요: Step 1에서 애니메이션, 공유 버튼, 배경음악까지 한 번에 달라 하면 결과가 퍼집니다.
2
사진 순서를 사람처럼 다시 묶기
AI에게 보낸 프롬프트
지금 만든 Instagram 여행 캐러셀에서 사진 순서만 다시 다듬어줘.
비슷한 구도는 붙이지 말고, 첫 장 다음에는 분위기 컷, 중간에는 음식이나 디테일 컷, 끝에는 돌아오는 느낌으로 정리해줘.
파일 이름은 유지하고 문구만 짧게 다시 써줘.
왜 이렇게 시켰나: 여행 사진은 잘 찍는 것보다 순서가 더 중요하거든요. 비슷한 컷이 붙으면 갑자기 덜 재밌어집니다.
이렇게 나오면 OK: 넘겨볼 때 장소 소개, 현장 분위기, 디테일, 마무리 흐름이 자연스럽게 이어지면 됩니다.
⚠여기서 이렇게 하면 안 돼요: 사진을 다시 고르라고만 하면 Codex가 멋있는 기준으로 바꾸려 들 수 있어요. 우리는 순서만 손보는 게 목적입니다.
3
다음 여행에도 다시 쓰게 틀 고정하기
AI에게 보낸 프롬프트
지금 결과를 다음에도 바로 쓰게 정리해줘.
index.html 안에는 문구 길이가 길면 자동으로 줄어들게 하고, caption.txt는 복붙하기 쉽게 줄바꿈만 정리해줘.
README.txt도 5줄 이하로 만들어서 다음엔 사진만 바꾸면 어디를 수정하면 되는지 적어줘.
왜 이렇게 시켰나: 한 번 쓰고 끝나면 귀찮음이 다시 이깁니다. 사진만 바꿔도 다시 돌릴 수 있어야 진짜 편해져요.
이렇게 나오면 OK: 다음 여행 때 `photos`만 갈아끼우고 문구 몇 줄만 고치면 다시 올릴 수 있는 상태면 충분합니다.
⚠여기서 이렇게 하면 안 돼요: README를 길게 쓰게 하면 또 안 읽습니다. 다섯 줄이면 딱 됩니다.
4
리뷰어 한 번 따로 붙이기
AI에게 보낸 프롬프트
/review 모바일에서 글자 넘침, 사진 잘림, 빈 이미지, 마지막 장 문구 어색함만 봐줘
왜 이렇게 시켰나: 작업하던 세션은 자기가 만든 걸 좀 관대하게 봅니다. 리뷰어를 따로 돌리면 깨지는 부분을 더 잘 잡아요.
이렇게 나오면 OK: 수정할 게 2~3개 이하로 정리되거나, 그대로 올려도 된다는 답이 나오면 끝입니다.
⚠여기서 이렇게 하면 안 돼요: 디자인 전체 평가를 시키면 다시 일이 커집니다. 오늘은 모바일 깨짐만 잡으면 됩니다.
5
지적받은 것만 짧게 고치기
AI에게 보낸 프롬프트
리뷰에서 나온 내용만 반영해줘.
새 기능 추가하지 말고 문구 길이, 카드 간격, 마지막 장 문장만 손봐줘.
왜 이렇게 시켰나: 마지막에 욕심내면 다시 길어집니다. 이 단계는 고치는 척하면서 늘리지 않는 게 중요해요.
이렇게 나오면 OK: 커버 문구가 짧고, 각 장이 두 줄 안쪽에서 끝나고, `caption.txt`를 그대로 인스타에 붙일 수 있으면 됩니다.
⚠여기서 이렇게 하면 안 돼요: 검수 끝났는데 색 바꾸고 레이아웃 뒤집으면 다시 처음으로 갑니다.
여기서 막히는 셋
문구가 너무 오글거릴 때. 결과에 여행 광고 문구처럼 과장된 말이 섞여 나오기도 합니다. 원인은 `AGENTS.md`에 금지 말투가 없어서예요. `담백하게`, `과장 금지`, `느낌 있음 같은 표현 금지`를 적고 Step 1 프롬프트를 다시 보내면 바로 차이가 납니다.
사진이 비어 보이거나 순서가 꼬일 때. 브라우저를 열었는데 이미지 몇 장이 빠져 있으면 파일명이나 경로를 잘못 읽은 경우가 많습니다. 특히 폴더를 옮긴 뒤 상대 경로가 틀어지면 이런 일이 생깁니다. `photos 폴더 상대 경로만 사용하고 절대 경로는 쓰지 마`를 추가하고, 실제 파일명이 맞는지 한 번만 보면 금방 풀립니다.
모바일에서 글자가 넘칠 때. 데스크톱에선 멀쩡한데 휴대폰 비율에선 마지막 두 단어가 튀어나오는 경우가 자주 있어요. 이유는 cover 문구와 각 장 문구 길이를 숫자로 안 묶어놨기 때문입니다. cover 12자, 본문 18자 안팎, 마지막 장 2줄 제한을 다시 적고 `/review`를 한 번 더 돌리면 대부분 정리됩니다.
다음엔 여기 한 장만 더 붙이면 됩니다
한 걸음 더
다음엔 Google Maps 캡처 한 장을 같이 넣어서 마지막 슬라이드에 여행 루트 카드까지 붙여보세요. 그러면 Instagram 여행 캐러셀에서 끝나지 않고 주말 일정 페이지 쪽으로도 바로 이어집니다.
사진 10장을 그냥 앨범에 두느니, Codex로 Instagram 여행 캐러셀 한 번 뽑아두는 쪽이 훨씬 덜 아깝거든요.
