OpenClaw로 예준이 돌잔치 초대장 사이트 만든 과정 정리

예준이 돌잔치 초대장을 AI랑 같이 하루 만에 사이트로 만들었음. 그냥 예쁜 시안 하나 만든 게 아니라 실제로 사진 붙이고, 모바일/폴드/데스크탑 대응하고, 갤러리 라이트박스까지 붙여서 배포까지 끝낸 기록.

왜 이걸 적어두나

가족 행사 초대장은 생각보다 손이 많이 간다.

• 어르신들도 보기 쉽게 글자가 커야 함
• 모바일에서 바로 잘 보여야 함
• 갤럭시 폴드 같은 애매한 화면에서도 안 깨져야 함
• 사진은 많이 넣고 싶음
• 지도 버튼 있어야 함
• 링크 하나로 바로 공유 가능해야 함

처음엔 그냥 간단한 모바일 청첩장 비슷한 느낌으로 빨리 만들까 했는데, 막상 하다 보니 요구사항이 계속 붙었음.
그래서 이번에는 혼자 손코딩으로만 밀지 않고 OpenClaw 세션 안에서 AI랑 대화하면서 하나씩 붙여봤다.
결론부터 말하면 꽤 쓸만했음. “AI랑 같이 웹 만드는 것”이 실제로 어떤 느낌인지 꽤 잘 보여준 사례였다.

최종 결과물

• 배포 주소: https://kimtoma.com/yejoon-first-birthday
• 들어간 요소
  • 메인 사진
  • 초대 문구
  • 일시 / 장소 / 식순
  • 지도 버튼 (티맵, 네이버지도, 카카오맵)
  • 추가 사진 갤러리
  • 사진 확대 라이트박스
  • 좌우 이동 / 모바일 스와이프
  • 메인 사진도 탭해서 확대 가능
  • fold / desktop 대응
  • alt text / aria-label 추가

처음엔 여기까지 올 줄 몰랐는데 하다 보니 거의 작은 마이크로 사이트 하나가 됨.

이번에 사용한 환경

런타임 / 하네스

이번 작업은 OpenClaw 메인 세션에서 진행했음.

• Runtime: agent=main
• Model: openai-codex/gpt-5.4
• Workspace: ~/.openclaw/workspace
• 실제 프로젝트 경로: /Users/macmini/Projects/kimtoma.com
• 배포 방식: Cloudflare Pages
• 빌드/배포 명령: npm run deploy

OpenClaw 안에서 한 건 그냥 채팅이 아니었고, 실제로 아래 작업을 계속 반복했다.

• 파일 읽기
• 코드 수정
• 이미지 복사
• Next.js 빌드
• Cloudflare Pages 배포
• 라이브 페이지 재확인
• git commit

즉, 말만 하는 AI가 아니라 실제 작업용 coding harness로 쓴 셈.

구현 흐름 요약

전체 흐름은 대충 이랬음.

1. 초대장 기본 페이지 생성
2. 장소 / 시간 / 식순 반영
3. 예준이 사진 1장 반영
4. 영문 표기 Yejun → Yejoon 수정
5. 주소를 /yejoon-first-birthday로 변경
6. 지도 버튼 추가
7. 어르신용으로 글자 크기 키움
8. 사진 갤러리 10장 추가
9. 사진 4장 더 붙여 총 14장 구성
10. 갤러리 라이트박스 구현
11. 메인 사진도 확대 가능하게 수정
12. 갤럭시 폴드 / 데스크탑 레이아웃 보정
13. alt text / aria-label 추가
14. 메인 사진을 왼쪽 상단으로 옮기고 장식 요소 제거

이 과정을 거의 전부 짧게 지시하고, 바로 수정하고, 빌드하고, 배포하고, 다시 확인하는 식으로 반복했음.

실제 프롬프트 흐름은 어땠나

이번 작업에서 재밌었던 건, 요청이 긴 스펙 문서 형태가 아니라 거의 다 짧은 말로 들어왔다는 점임.

예를 들면 이런 식.

• “예준이 사진을 넣어서 돌잔치 초대장을 사이트로 만들어줘”
• “예준이 영어 스펠링은 yejoon 이야 수정해서 배포해줘”
• “맨 밑에 멘트는 삭제하고 지도 버튼은 추가해줘”
• “어르신들한테도 드리는거라서 글자 크기를 2배 정도로 키워줘”
• “사진 탭하면 전체화면으로 볼수 있게 해줘”
• “갤럭시 폴드랑 데스크탑에서도 레이아웃이 깨지지 않고 잘 보이게 수정해줘”
• “메인사진도 탭하면 확대되게 해줘”
• “왼쪽 컬럼 하단에 붙어있는 메인 사진을 상단에 붙여서 보여줘”

즉 나는 디렉터처럼 짧게 말했고, AI는 그걸 코드 작업 단위로 해석해서 처리했음.

이번에 다시 느낀 건 이거였다.

좋은 AI 협업은 긴 프롬프트를 쓰는 능력보다, 짧은 피드백을 빠르게 반영하는 루프에서 힘이 나온다.

중간에 어떤 식으로 작업했나

이번 세션에서 AI는 한 번에 완성본을 내기보다 이런 식으로 움직였음.

1. 먼저 가장 작은 동작하는 버전부터 만듦

처음엔 사진 자리만 비워둔 상태로 페이지를 만들고 빌드함.
그 다음 실제 사진이 들어오자 바로 반영했음.

이게 좋았던 이유는, 디자인을 오래 붙잡지 않고 “일단 동작하는 상태”를 빨리 만들 수 있었기 때문임.

2. 변경사항마다 바로 배포함

각 수정 뒤에 거의 항상 다음 흐름이 있었음.

• 코드 수정
• npm run deploy
• Cloudflare Pages 반영
• 라이브 또는 preview 확인
• git commit

즉 문서상 설계보다 실제 배포 상태를 기준으로 계속 다듬었음.

3. 요청이 들어올 때마다 아주 국소적으로 수정함

예를 들어 사용자가 “글자 더 크게”, “멘트 삭제”, “지도 버튼 추가”를 말하면 그 부분만 바로 바꾸고 배포했다.

이건 AI랑 같이 일할 때 꽤 중요한 패턴 같음.

한 번에 완벽한 요구사항을 모으려 하지 말고, 바로 손댈 수 있는 단위로 쪼개서 피드백 루프를 짧게 유지하는 것.

실제 코드/배포 히스토리 예시

이번 작업 중 남은 대표적인 커밋들을 보면 흐름이 잘 보임.

• 82addc5 Add Yejun first birthday invitation page
• a381950 Rename Yejun invite asset to Yejoon
• a2cc1e5 Rename birthday invite route to yejoon
• 43b31d4 Add map links to Yejoon birthday invite
• af87a37 Update birthday invite map links for Pilgyeongjae
• d89c301 Increase birthday invite typography size
• 84fc358 Add gallery photos to Yejoon birthday invite
• d88305b Add more gallery photos to Yejoon birthday invite
• 0283346 Add lightbox gallery to Yejoon birthday invite
• e123414 Enable lightbox for main birthday photo
• f30471b Improve invite layout for fold and desktop
• b8c7f97 Move main photo to top of invite layout

결과적으로 하나의 큰 완성본이 아니라,
짧은 명령 → 작은 수정 → 배포 → 확인의 로그가 쌓이면서 결과물이 만들어졌음.

이런 로그를 보고 있으면, AI가 뭔가를 한 번에 “창조”했다기보다 사람 옆에서 계속 손을 보태며 속도를 올려주는 느낌이 더 강하다.

버전별 변화 스냅샷

이번에는 인터랙티브 스크롤텔링 대신, 실제 배포 과정에서 나온 버전들을 그대로 캡처해서 중간중간 넣는 방식으로 정리하기로 했다. 블로그 레이아웃을 유지하면서도 변화 포인트는 충분히 보여줄 수 있어서 이쪽이 더 자연스럽다.

1. 첫 버전, 초대장 기본 구조만 만든 상태

처음 커밋에서는 장소, 시간, 식순, 메인 사진이 들어간 가장 기본 구조만 있었다. 아직 하단 안내 문구가 남아 있고, 메인 사진은 왼쪽 컬럼 아래쪽에 배치되어 있었다.

2. 글자 크기를 키우고 읽기 쉽게 다듬은 버전

여기서 어르신도 보기 쉽게 타이포를 전반적으로 확 키웠다. 이 한 번의 수정으로 페이지 무드가 예쁜 카드보다 읽기 쉬운 초대장 쪽으로 확 넘어갔다.

3. 갤러리가 추가되면서 페이지 성격이 바뀐 버전

갤러리 사진이 붙기 시작하면서 이 페이지는 단순 초대장이 아니라, 예준이 사진을 함께 보는 작은 가족용 사이트처럼 변했다. 초대장에 감정선이 붙는 지점도 여기부터였다.

4. 라이트박스가 붙으면서 사진을 보는 흐름이 생긴 버전

갤러리 자체보다 중요한 건 사진을 눌렀을 때의 경험이었다. 라이트박스가 붙고 나서부터는 그냥 썸네일 목록이 아니라, 실제로 넘겨보는 뷰어가 됐다.

5. 메인 사진 위치와 전체 레이아웃이 정리된 최종 버전

마지막 단계에서는 메인 사진을 상단으로 끌어올리고 장식 요소를 덜어내서 훨씬 차분하게 정리했다. 폴드와 데스크탑 대응, 메인 이미지 확대, 접근성 보강까지 반영된 최종본이다.

중간 에러와 복구도 있었음

이런 작업에서 중요한 건 AI가 처음부터 안 틀리는 게 아니라, 틀렸을 때 얼마나 빨리 복구하느냐인 듯.

이번에도 실제로 에러가 있었다.

1. use client 와 metadata 충돌

라이트박스 갤러리를 붙이려고 페이지 자체를 client component로 바꾸는 과정에서 Next.js에서 metadata export와 충돌이 났음.

요약하면 이거임.

• client component에서 export const metadata는 허용되지 않음
• 해결 방식은 server page와 client component 분리

즉,

• src/app/yejoon-first-birthday/page.tsx 는 metadata를 가진 server component로 유지
• 인터랙션은 src/components/yejoon/YejoonBirthdayInviteClient.tsx 로 분리

결과적으로 이 구조가 관리도 더 편했음.

2. JSX 문법 오류

부분 치환으로 메인 사진 위치를 옮기다가 JSX가 한 번 깨졌음.
이건 patch를 조금씩 붙이는 것보다 통째로 다시 쓰는 게 더 낫다고 판단해서 관련 컴포넌트 파일을 아예 재작성해서 복구함.

이것도 꽤 중요한 포인트였음.

AI가 patch를 잘게 잘게 하다가 꼬이면, 그 블록은 과감히 전체 재작성하는 편이 더 안전하다.

디자인 쪽에서 의식한 점

이번 초대장은 일부러 너무 화려한 카드형 초대장 느낌으로 가지 않았다.
대신 아래 방향으로 정리했음.

• 따뜻한 톤의 배경
• 필경재 분위기에 맞는 차분한 색감
• 메인 사진 중심 구성
• 큰 타이포
• 어르신도 보기 쉬운 정보 우선 구조
• 지도 버튼 / 갤러리처럼 실용적인 기능 강화

특히 후반에는 “어르신들한테도 드리는 거라서 글자 크기를 크게”라는 요청이 들어와서, 가독성을 우선으로 밀어 올렸음.

가족 행사 사이트는 드리블보다 전달력이 더 중요하다는 걸 다시 느낌.

AI와 같이 만들면서 느낀 점

1. AI는 “초안 생성기”보다 “수정 파트너”로 쓸 때 더 강하다

처음 한 번에 완성본을 뽑아내는 용도도 좋지만, 이번처럼 실전에서는 오히려 반복 수정 쪽이 더 강했음.

• 사진 추가
• 문구 수정
• 경로 변경
• 지도 링크 수정
• 폰트 크기 수정
• 디바이스별 레이아웃 수정
• 라이트박스 추가

이런 잔수정은 사람이 직접 하면 꽤 귀찮은데, AI가 옆에서 바로 수정하고 배포하면 속도가 엄청 빨라진다.

2. “배포까지 되는 AI”는 느낌이 완전히 다르다

단순 코드 제안만 받는 것과, 실제로 배포해서 바로 확인하는 것은 차이가 큼.

이번엔 말 그대로 다음 루프가 가능했음.

• “사진 더 넣어줘”
• “글자 더 키워줘”
• “폴드에서도 안 깨지게”
• “메인사진도 확대되게”

그리고 몇 분 뒤 실제 URL에서 확인 가능했음.

이건 문서 작업형 AI보다 훨씬 생산적인 경험이었음.

3. 짧은 피드백이 제일 중요함

긴 PRD보다

• “이거 없애줘”
• “이건 위로 올려줘”
• “여긴 너무 작아”
• “이 링크 필경재로 맞춰줘”

같은 짧은 말이 훨씬 강력했음.

AI 시대엔 오히려 기획자의 역할이 모든 걸 먼저 정의하는 사람이라기보다, 계속 보고 판단하고 미세하게 방향을 조정하는 사람에 가까워지는 것 같음.

만약 다시 만든다면

다음엔 이런 것까지 해보고 싶다.

• 갤러리 사진 순서 자동 추천
• 얼굴/표정 기준 베스트컷 정렬
• 지도 링크를 장소 ID 기반으로 더 정교하게 연결
• RSVP / 연락 버튼 추가
• 행사 후엔 같은 페이지를 성장 앨범 페이지로 전환

즉 초대장 사이트를 일회성 링크가 아니라, 가족 이벤트를 기록하는 작은 마이크로 사이트로 확장할 수도 있겠다.

정리

이번 작업은 단순히 “AI가 예쁜 페이지 하나 만들어줬다”가 아니었음.

오히려 더 정확하게 말하면, 짧은 피드백을 기반으로 AI와 함께 실제 웹사이트를 점진적으로 설계하고 수정하고 배포한 과정에 가까웠다.

그리고 이 방식은 생각보다 실용적이었음.

특히 이런 작업에 잘 맞는다.

• 가족 행사 페이지
• 초대장 / 청첩장 / 돌잔치 사이트
• 임시 이벤트 랜딩페이지
• 사진 기반 마이크로 사이트
• 빠르게 만들고 계속 고치는 페이지

결국 중요한 건 AI가 한 번에 다 해주는 게 아니라, 사람이 방향을 잡고 AI가 그 속도를 극단적으로 끌어올려 주는 협업 구조인 것 같음.

오늘의 결론은 이거다.

가족 행사 초대장도 이제는 “프롬프트 + 배포”의 시대에 들어왔음.

추가로 적어둘 만한 것

이번 글은 100% AI가 통째로 쓴 글이라기보다, 내가 실제로 작업한 세션 로그와 커밋, 배포 흐름을 바탕으로 AI가 초안을 먼저 정리하고 내가 그 위에 손보는 방식으로 쓰고 있음.

그래서 이 글은 예전 블로그 글처럼 완전히 혼자 앉아서 처음부터 끝까지 쓴 방식과는 조금 다르지만, 그렇다고 AI 표시가 붙는 전형적인 자동 생성 글하고도 결이 좀 다름.

오히려 지금 내가 하고 싶은 건, AI를 이용해서 글을 대신 쓰게 하는 것보다 내가 실제로 한 작업을 더 빨리, 더 정확하게 기록하는 쪽에 가까움.