추가 실습 · AI 포토카드 생성기

40~50분권장 실습 시간

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

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

0원워터마크 없이 완성

이 실습에서 만드는 것

AI 포토카드 생성기

해결할 문제 · 내 사진을 K-POP 앨범 포토카드처럼 꾸며주는 웹페이지를 제작합니다. 사진을 업로드하고, 이름과 소개를 입력하면 홀로그램 반짝이 테두리와 별·하트 장식이 달린 포토카드가 완성됩니다.

최종 사용자 · 게시된 URL을 받아 자기 사진으로 카드를 만드는 친구·팬 커뮤니티 멤버.

최종 모습 · 인스타그램 스토리, 팬 커뮤니티, 프로필 꾸미기에 바로 쓸 수 있는 포토카드를 PNG로 저장합니다.

준비물 · Claude 웹의 아티팩트(앱 및 웹사이트) 하나와 테스트용 사진 1장. 다섯 번째 실습이니, 3단계 과정이 이제 자연스럽게 몸에 붙었을 때입니다.

말하기요구사항 10개와 완성 조건 7개를 함께 적어 한 번에 요청합니다.

확인하기업로드·색상·비율·다운로드를 사람이 직접 8개 항목으로 확인합니다.

통제하기카드 뒷면과 애니메이션을 더한 뒤 처음부터 다시 검증합니다.

실습 흐름

단계별 실습

1단계

말하기

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

15~20분 · 펼치기⌄

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

AI 포토카드 생성기 웹페이지를 만들어줘. 요구사항: 1. 사진 업로드 (드래그앤드롭 또는 파일 선택) 2. 업로드된 사진을 포토카드 레이아웃에 배치 3. 이름과 한 줄 소개 입력 필드 4. 카드 디자인: 홀로그램 느낌 반짝이 테두리, 별/하트 장식 5. 테두리 색상 선택: 핑크 / 보라 / 파랑 6. 카드 크기: 정사각형(1:1) / 스토리용 세로형(9:16) 선택 7. 카드 하단에 "Made with AI ✨" 작은 문구 8. 다운로드 버튼으로 카드 이미지를 PC에 저장 9. K-POP 앨범 포토카드 느낌, 모던하고 화려한 톤 10. 한국어 UI, 반응형 (모바일 375px 정상) ★ 완성 조건 (전부 충족해야 완성): - 사진을 업로드하면 카드 안에 배치될 것 - 반짝이 테두리와 별/하트 장식이 보일 것 - 이름과 소개를 입력하면 카드에 표시될 것 - 테두리 색상 3종을 선택하면 실제로 변경될 것 - 1:1 / 9:16 크기 전환이 정상 동작할 것 - 다운로드 버튼을 누르면 이미지 파일이 저장될 것 - "Made with AI ✨" 문구가 카드 하단에 표시될 것

아티팩트에서 왼쪽과 같이 대화창에 요청한 작업을 수행하면, 오른쪽에 포토카드 생성기가 만들어진 것을 확인할 수 있습니다.

아티팩트 대화창의 요청으로 오른쪽에 만들어진 AI 포토카드 생성기 — 그림 1 · 왼쪽 대화창의 요청으로 오른쪽에 만들어진 포토카드 생성기

📌 NOTE — 사진 업로드가 서버 없이 되는 원리Claude가 만든 웹페이지는 FileReader나 브라우저의 임시 이미지 주소 기능을 이용해 선택한 사진을 화면에 표시할 수 있습니다. 어떤 방식을 사용했는지는 결과물에 따라 달라집니다. 중요한 것은 사진이 외부로 전송되지 않고 브라우저 안에서만 처리되도록 만드는 것입니다. Claude에게 '사진은 서버나 외부 API로 보내지 말고 브라우저 안에서만 처리해줘'라고 명확히 지시하고, 게시 전에 외부 전송 기능이 없는지 확인하게 합니다.

다음 단계로 넘길 것 · 만들어진 포토카드 생성기 아티팩트와 ★ 완성 조건 7개 → 2단계 확인하기

2단계

확인하기

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

10~15분 · 펼치기⌄

아티팩트가 나타나면 완성 조건을 하나씩 확인합니다. 완성 조건에 부합하지 않으면 수정하라고 합니다.

사진을 업로드하면 카드 안에 사진이 표시되는가?
반짝이 테두리와 별/하트 장식이 보이는가?
이름과 소개를 입력하면 카드에 표시되는가?
테두리 색상(핑크/보라/파랑)을 바꾸면 즉시 반영되는가?
1:1 / 9:16 크기 전환이 정상 동작하는가?
다운로드 버튼을 누르면 이미지 파일이 실제로 저장되는가?
"Made with AI ✨" 문구가 카드 하단에 표시되는가?
브라우저 창을 좁게 줄여도(또는 F12 → 모바일 뷰) 버튼이 겹치거나 잘리지 않는가?

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

3단계

통제하기

분위기를 바꾸고 카드 뒷면을 만든다

15~20분 · 펼치기⌄

실제 정보로 바꾸고, 디자인을 발전시켜달라고 요청합니다.

원하는 스타일을 말로 설명하면, 그에 맞춰 디자인을 즉시 새로운 분위기로 변형할 수 있습니다. 예를 들어 K-POP 스타일이 너무 화려하게 느껴진다면, "지금 K-POP 느낌 말고 90년대 레트로 필름 카메라로 찍은 것 같은 분위기로 바꿔줘. 테두리는 필름 프레임처럼, 색감은 따뜻한 빈티지 톤으로 해줘"와 같이 요청할 수 있습니다.

90년대 레트로 필름 분위기로 바뀐 포토카드 디자인 — 그림 2 · 말 한마디로 90년대 레트로 필름 분위기로 바꾼 결과

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

다음의 3가지 작업을 수행해줘. 디자인 컨셉을 유지하면서 수정 사항을 반영해줘. 작업1: 카드 정보를 다음으로 바꿔줘: 이름 "민수" 소개 "빛나는 순간을 담다 ✨" 작업2: 카드를 클릭하면 뒤집히면서 뒷면이 보이게 해줘. 뒷면에는 좋아하는 노래 제목과 MBTI를 입력할 수 있게 해줘 작업3: 카드 테두리에 반짝이는 애니메이션을 넣어줘. 별과 하트가 천천히 떠다니는 효과도 추가해줘

카드 앞면이 새로운 정보로 채워졌는지, 테두리의 애니메이션은 제대로 동작하는지 확인합니다.

카드 뒷면이 제대로 보이는지, 그리고 2단계의 확인 항목을 처음부터 다시 한 번 검증합니다.

📌 NOTE — 게시 전에 반드시 지울 것게시하기 전에는 테스트에 사용한 내 사진과 이름이 아티팩트의 기본 화면이나 코드에 남아 있지 않은지 확인하고, 빈 입력 화면이나 가상 예시 이미지로 초기화합니다. 친구에게는 자신이 촬영했거나 사용 허락을 받은 사진만 올리도록 안내하세요.

생성된 URL을 보내면 친구도 자신의 브라우저에서 포토카드를 만들 수 있습니다. 인스타그램 스토리에 올리거나, 팬 커뮤니티에서 서로 포토카드를 교환하는 데 쓸 수 있습니다.

완료 · URL 하나로 친구들도 각자의 포토카드를 만듭니다. 다만 재검증과 테스트 사진 정리 없이 게시하지 않는 것이 이 실습의 핵심입니다.

이 실습의 특별한 점

① 디자이너 없이, 비용 없이디자이너 없이, 비용 없이, K-POP 스타일의 포토카드를 만들었습니다.

② 워터마크 없이포토카드 제작 앱의 무료 플랜은 대부분 템플릿이 제한되거나 워터마크가 붙습니다. 이 실습의 포토카드에는 별도의 워터마크를 넣지 않았으며, Claude의 사용량 한도 안에서는 추가 제작 서비스 비용 없이 사용할 수 있습니다.

③ 1명이 만들면 10명이 쓴다게시한 URL을 친구들에게 공유하면 각자 자기 사진으로 포토카드를 만들 수 있습니다.

💡 TIP — 다운로드한 포토카드를 활용하는 법PNG로 저장한 포토카드는 인스타그램 스토리, 카카오톡 프로필, 트위터(X) 프로필 이미지로 바로 쓸 수 있습니다. 이미지 비율이 맞지 않으면 Claude에게 "인스타 스토리 비율(1080×1920)로 바꿔줘"라고 요청하세요. 하나의 포토카드 생성기로 용도별 사이즈를 모두 만들 수 있습니다.

💡 TIP — 포토카드 말고 다른 용도로도 쓸 수 있습니다"K-POP 포토카드"를 "팬미팅 입장권", "동아리 멤버 카드", "반려동물 프로필 카드", "커플 기념일 카드"로 바꿀 수 있습니다. 프롬프트에서 "K-POP 포토카드"를 "반려동물 프로필 카드"로만 바꾸면 됩니다. 입력 항목도 "반려동물 이름, 종, 생일"로 바꿔달라고 하면 됩니다. 디자인도 "홀로그램 반짝이"를 "따뜻한 수채화 스타일"로 바꿔달라고 하면 분위기가 완전히 달라집니다.