추가 실습 · 모바일 초대장 제작

30~40분권장 실습 시간

3단계말하기·확인하기·통제하기

6개사람이 직접 확인할 항목

1개공유 가능한 URL

이 실습에서 만드는 것

모바일 초대장 웹페이지

해결할 문제 · 결혼식이 잡히면 청첩장부터 고민입니다. 업체는 비싸고, 무료 템플릿은 다 비슷하고, 내가 원하는 사진과 문구는 안 들어갑니다. 이 실습에서 만드는 건 그 모든 제약이 없는, 세상에 하나뿐인 내 초대장입니다.

최종 사용자 · 카카오톡으로 링크를 받아 휴대폰에서 여는 하객·참석자.

최종 모습 · 생일파티, 가족행사, 결혼식, 돌잔치 초대장을 웹페이지로 만듭니다. 카카오톡으로 URL을 보내면 수백 명이 열어봅니다. 3단계 과정을 한 번 더 반복하는 두 번째 핵심 실습입니다.

준비물 · Claude 웹의 아티팩트(앱 및 웹사이트) 하나. 설치도, 코딩도 필요하지 않습니다.

말하기요구사항과 완성 조건을 함께 적어 한 번에 요청합니다.

확인하기AI의 완료 보고가 아니라 사람이 직접 6개 항목을 눌러봅니다.

통제하기디자인과 내용을 말로 바꾸고, 확인 항목을 처음부터 다시 검증합니다.

실습 흐름

단계별 실습

1단계

말하기

요구사항과 완성 조건을 함께 말한다

10~15분 · 펼치기⌄

아티팩트에서 “앱 및 웹사이트”를 새로 만듭니다. 다음의 프롬프트를 대화창을 통해서 실행합니다.

모바일 초대장 웹페이지를 만들어줘. 요구사항: 1. 행사 종류: 생일파티 (다른 행사로 쉽게 바꿀 수 있게) 2. 포함 정보: 행사명, 날짜, 시간, 장소, 간단한 메시지 3. 장소 이름을 누르면 지도 링크로 이동하게 4. "구글 캘린더에 일정 추가" 버튼 포함 5. 참석 여부를 "참석 / 불참" 버튼으로 선택할 수 있게 6. 디자인: 따뜻하고 축하하는 분위기, 파스텔톤 7. 모바일에서 보기 좋게 반응형으로 8. 한국어로 만들어줘 ★ 완성 조건 (전부 충족해야 완성): - "구글 캘린더에 추가" 버튼을 누르면 구글 캘린더 일정 추가 화면이 열릴 것 - "참석" 버튼을 누르면 시각적 피드백(색상 변경 등)이 있을 것 - 모바일 화면(375px)에서 글자가 잘리거나 버튼이 겹치지 않을 것 - 행사 정보(이름, 날짜, 시간, 장소)가 모두 한눈에 보일 것 - 장소를 빈칸으로 두어도 에러가 나지 않을 것

아티팩트에서 왼쪽과 같이 대화창에 요청한 작업을 수행하면, 오른쪽에 모바일 초대장이 만들어진 것을 확인할 수 있습니다.

아티팩트 대화창에서 요청한 모바일 초대장이 오른쪽 화면에 생성된 모습 — 그림 1 · 왼쪽 대화창의 요청으로 오른쪽에 만들어진 모바일 초대장

📌 NOTE — "구글 캘린더에 추가" 버튼의 원리이 버튼은 커넥터와 무관합니다. Claude가 구글 캘린더용 추가 링크 주소(https://calendar.google.com/calendar/render?action=TEMPLATE&text=...)를 HTML 코드로 자동 생성합니다. 이 링크를 누르면 구글 캘린더의 일정 추가 화면이 열리고 행사명·날짜·시간·장소가 미리 입력됩니다. 친구가 내용을 확인하고 저장하면 자신의 캘린더에 일정이 추가됩니다. 링크를 게시하기 전에는 행사 날짜와 시작·종료 시간, 한국 시간대가 정확히 반영되는지 직접 눌러 확인하세요. 구글 계정에 로그인하지 않은 사람에게는 먼저 로그인 화면이 나타날 수 있습니다. 만든 사람의 캘린더와는 관련이 없습니다.

다음 단계로 넘길 것 · 만들어진 초대장 아티팩트와 ★ 완성 조건 5개 → 2단계 확인하기

2단계

확인하기

완성 조건을 사람이 직접 눌러본다

10분 · 펼치기⌄

아티팩트가 나타나면 완성 조건을 하나씩 확인합니다.

초대장 정보(행사명, 날짜, 시간, 장소)가 모두 보이는가?
"구글 캘린더에 추가" 버튼을 누르면 구글 캘린더 화면이 열리는가?
"참석" 버튼을 누르면 시각적 피드백이 있는가?
브라우저 창을 좁게 줄여도(또는 F12 → 모바일 뷰) 예쁘게 나오는가?
장소를 빈칸으로 두어도 에러가 나지 않는가?
장소 이름을 누르면 지도 링크로 이동하는가?

다음 단계로 넘길 것 · 통과한 항목과 고쳐야 할 항목의 목록 → 3단계 통제하기

3단계

통제하기

디자인과 정보를 원하는 대로 바꾼다

15분 · 펼치기⌄

원하는 스타일을 말로 설명하면, 그에 맞춰 디자인을 즉시 새로운 형태로 변형할 수 있습니다. 예를 들어 앞서 제작한 디자인이 다소 장난스럽고 캐주얼한 분위기였다면, 이번에는 “최고급 호텔에서 진행되는 행사처럼 품격 있고 우아한 느낌의 초청장 디자인으로 만들어줘. 폰트 역시 고급스럽고 세련된 분위기에 어울리는 스타일이면 좋겠어. 화려한 색감보다는 절제된 우아함이 느껴지는 디자인을 원해” 와 같이 요청할 수 있습니다.

말로 요청해 품격 있고 우아한 분위기로 바뀐 초대장 디자인 — 그림 2 · 말 한마디로 캐주얼한 디자인을 우아한 초청장으로 바꾼 결과

실제 정보를 바꾸고 기능을 개선하기 위해서 다음의 프롬프트를 대화창을 통해서 실행합니다.

다음의 3가지 작업을 수행해줘. 디자인 컨셉을 유지하면서 수정 사항을 반영해줘. 작업1: 행사 정보를 다음으로 바꿔줘: 행사명 "민수의 30번째 생일파티" 날짜 "2026년 7월 15일 수요일" 시간 "오후 6시" 작업2: 상단에 생일 케이크 이모지와 폭죽 이모지를 넣어줘. 배경에 색종이 날리는 애니메이션도 추가해줘. 작업3: 하단에 "with love 💕"라고 적어줘.

개선 초대장을 보면, 카드 상단에 자연스럽게 추가된 케이크와 폭죽 이미지가 있습니다. 하단에는 은은하게 "with love 💕" 문구도 있습니다. 그리고 카드 주변에 색종이가 날리는 효과가 있어서, 초대장이 심심하지 않도록 합니다.

케이크·폭죽 이모지와 색종이 애니메이션이 추가된 완성 초대장 — 그림 3 · 정보와 연출까지 반영된 완성 초대장

2단계의 확인 항목들도 처음부터 다시 한 번 검증해야 합니다. 특히 모바일 화면에서 깨지지 않는지 꼭 확인합니다. 마음에 들면 게시합니다. 생성된 URL을 카카오톡 단체방에 보내면 됩니다.

완료 · 게시된 URL 하나로 수백 명에게 초대장을 보낼 수 있습니다. 다만 재검증 없이 게시하지 않는 것이 이 실습의 핵심입니다.

이 실습의 특별한 점

① URL 하나로 배포완성된 URL을 카카오톡으로 보내 여러 사람에게 초대장을 보여줄 수 있습니다.

② 게시 전 다중 기기 확인실제 접속 가능 범위와 사용량 한도는 Claude의 게시 정책과 서비스 상태에 따라 달라질 수 있으므로, 중요한 행사라면 미리 여러 기기에서 링크가 열리는지 확인하세요.

③ 뼈대를 바꾸면 무엇이든초대장의 뼈대는 '날짜·장소·사진·인사말'입니다. 이걸 바꾸면 동호회 모임 공지, 가게 오픈 안내, 강연 신청 페이지가 됩니다. Claude에게 "결혼식 대신 북클럽 모임 공지로 바꿔줘"라고만 하면 됩니다.

💡 TIP — 장소 링크를 정확히 넣으려면스마트폰에서 카카오맵(또는 네이버 지도)을 열고, 해당 장소의 "공유" 버튼을 눌러 URL을 복사하세요. 그 URL을 Claude에게 이렇게 요청합니다: "장소 링크를 이걸로 바꿔줘: https://place.map.kakao.com/12345678" Claude가 알아서 정확한 지도 URL을 따오기는 어렵습니다. 직접 복사해서 넣는 것이 확실합니다.

💡 TIP — 생일파티 말고 다른 용도로도 쓸 수 있습니다돌잔치, 결혼식, 동창회, 팀 회식, 워크숍, 세미나 — 초대장이 필요한 모든 행사에 쓸 수 있습니다. 프롬프트에서 "생일파티"를 "워크숍"으로만 바꾸면 됩니다. 디자인도 "축하 분위기"를 "전문적인 분위기"로 바꿔달라고 하면 됩니다.