AI로 만든 웹페이지, 코딩 몰라도 링크로 공유하는 법

준비물

• 컴퓨터 (휴대폰만으로는 파일 저장 단계가 어렵습니다)
• Claude 무료 계정, 또는 ChatGPT 무료 계정
• 방법 2를 쓸 경우 Netlify 무료 계정 (구글 계정으로 가입 가능)

이런 결과가 나옵니다

카톡이나 인스타에 붙여넣으면 누구나 열 수 있는 인터넷 주소. 이 사이트의 다른 레시피(청첩장, 게임, 테스트, 메뉴판)로 만든 결과물에 그대로 씁니다.

따라 하기

1. 1

   먼저 어떤 방법을 쓸지 고르기

   내 사진이나 신청 폼이 없는 페이지(게임, 성향 테스트, 간단한 소개)라면 방법 1로 끝납니다. 내 사진이 들어간 청첩장이나 응답을 받아야 하는 신청서라면 방법 2로 가세요.

2. 2

   방법 1. Claude에서 만들기

   claude.ai 에 들어가 로그인합니다. 대화창에 만들고 싶은 것을 적어 보내면(각 레시피의 프롬프트를 복사해 붙여넣으면 됩니다) 화면 오른쪽에 결과물 창이 따로 열립니다.

   이렇게 되면 성공오른쪽 창에서 게임이나 페이지가 실제로 움직이면 성공입니다.

   팁ChatGPT에서 이미 만들었다면 코드를 복사해 Claude에 "이 코드를 그대로 보여줘"라고 붙여넣어도 됩니다.

3. 3

   방법 1. Publish 눌러 링크 복사

   결과물 창 오른쪽 위에 있는 "Publish"(게시) 버튼을 누릅니다. 공개 링크가 만들어지면 복사 버튼을 눌러 카톡에 붙여넣습니다.

   이렇게 되면 성공받은 사람이 Claude에 가입하지 않아도 링크를 눌러 바로 열 수 있습니다.

   팁회사 계정(Team, Enterprise)으로 만들면 회사 사람만 열 수 있습니다. 개인 계정으로 만드세요.

4. 4

   방법 2. 코드를 파일로 저장하기

   먼저 만든 대화창에 아래 프롬프트를 보내 파일 하나로 정리받습니다. 그다음 답변에 있는 코드 상자 오른쪽 위 "복사" 버튼을 누릅니다. 윈도우는 메모장, 맥은 텍스트 편집기를 열어 붙여넣습니다. 바탕화면에 새 폴더를 하나 만들고 그 안에 "index.html" 이라는 이름으로 저장합니다.

   붙여넣을 프롬프트프롬프트 복사

   방금 만든 페이지를 친구에게 링크로 보내려고 해.
   파일 하나로 열 수 있게 정리해줘.
   사진은 내가 따로 넣을 거니까 photo1.jpg, photo2.jpg 같은 이름으로 불러오게 해줘.
   카톡으로 보냈을 때 미리보기에 제목과 설명이 뜨게 해줘.

   내 것으로 바꿀 곳

   • 사진이 없으면 둘째 줄은 지워도 됩니다.

   이렇게 되면 성공저장한 파일을 더블클릭했을 때 인터넷 창에서 페이지가 열리면 성공입니다.

   팁윈도우 메모장은 저장할 때 "파일 형식"을 "모든 파일", "인코딩"을 "UTF-8"로 바꿔야 합니다. 그대로 저장하면 이름이 index.html.txt가 되거나 한글이 깨집니다.

5. 5

   방법 2. 사진을 같은 폴더에 넣기

   페이지에 들어갈 사진을 같은 폴더에 넣고 이름을 photo1.jpg, photo2.jpg처럼 바꿉니다. 프롬프트에서 정한 이름과 똑같아야 합니다.

   이렇게 되면 성공index.html을 다시 열었을 때 사진이 보이면 성공입니다.

6. 6

   방법 2. Netlify Drop에 폴더 끌어다 놓기

   인터넷 창에서 app.netlify.com/drop 에 들어갑니다. 화면 가운데 점선 상자에 바탕화면의 폴더를 통째로 끌어다 놓습니다. 파일 하나가 아니라 폴더째 놓아야 합니다.

   이렇게 되면 성공몇 초 뒤 "○○○.netlify.app" 으로 끝나는 주소가 화면에 나타납니다.

7. 7

   방법 2. 무료 가입하고 공개하기

   방금 생긴 주소는 처음엔 임시 비밀번호로 잠겨 있어 다른 사람이 열 수 없습니다. 화면 안내에 따라 무료로 가입(구글 계정으로 가능)하면 잠금이 풀립니다. 사이트 설정의 "Change site name"에서 주소 앞부분을 원하는 영어 이름으로 바꿀 수 있습니다.

   이렇게 되면 성공휴대폰 데이터로(와이파이 끄고) 주소를 열어봤을 때 비밀번호 없이 열리면 성공입니다.

8. 8

   카톡 미리보기 확인하고 보내기

   카톡 "나와의 채팅"에 주소를 먼저 보내봅니다. 제목과 설명이 미리보기로 뜨는지 확인한 뒤 친구에게 보냅니다.

   팁미리보기가 예전 내용으로 뜨면 카톡이 저장해둔 것입니다. 주소 끝에 ?v=2 를 붙여 보내면 새로 읽어옵니다.

막히면

다음에 해볼 것

• 내 도메인(예: wedding-junho.com)을 쓰고 싶으면 Netlify 사이트 설정의 Domain 메뉴에서 연결합니다. 도메인은 보통 연 1~2만 원대입니다.

여기 쓰인 기능

다른 레시피