웹페이지 템플릿 안내

• ChatGPT: 답에 파일 단추(index.html)가 있으면 누르면 내려받아집니다. 코드 블록으로 답했으면 블록 오른쪽 위 「복사」를 누르세요. 오른쪽에 캔버스 창이 열렸으면 그 창의 「다운로드」나 「복사」를 누르세요.
• Claude: 오른쪽에 미리보기 창(아티팩트)이 열리면 창 위쪽의 「다운로드」를 누르세요. 창이 없고 코드 블록만 있으면 블록의 「복사」를 누르세요.
• Gemini: 코드 블록의 「복사」를 누르세요. 「캔버스」로 열렸으면 오른쪽 위 메뉴의 「내보내기」나 「복사」를 쓰세요.

내려받은 파일은 보통 「다운로드」 폴더에 생깁니다. 윈도우는 파일 탐색기 왼쪽의 「다운로드」, 맥은 Finder 왼쪽의 「다운로드」입니다.

윈도우 (메모장)

1. 시작 메뉴에서 「메모장」을 엽니다.
2. 붙여 넣기(Ctrl+V)를 합니다.
3. 「파일 > 다른 이름으로 저장」을 누릅니다.
4. 파일 이름에 index.html 을 적고, 「파일 형식」을 「모든 파일」로, 「인코딩」을 「UTF-8」로 고른 뒤 저장합니다.

맥 (텍스트 편집기)

1. 「응용 프로그램 > 텍스트 편집기」를 열고 새 문서를 만듭니다.
2. 붙여 넣기 전에 메뉴 「포맷 > 일반 텍스트로 만들기」를 누릅니다.
3. 붙여 넣기(Command+V)를 합니다.
4. 「파일 > 저장」에서 이름을 index.html 로 적고, 「일반 텍스트 인코딩」이 보이면 「유니코드(UTF-8)」를 고릅니다.
5. 「.html 을 사용할까요, .txt 를 사용할까요」라고 물으면 「.html 사용」을 누릅니다.

저장한 index.html 을 더블클릭하면 브라우저에서 열립니다. 내 가게 이름과 전화번호가 들어간 페이지가 보이면 됐습니다.

빌더의 새 프로젝트 입력창에 프롬프트를 붙여 넣고 보내세요. 미리보기가 뜨면 화면 위쪽의 「Publish」나 「Deploy」를 누르세요. 공개 주소가 생깁니다. 웹 빌더는 휴대폰 브라우저에서도 쓸 수 있습니다.

휴대폰에서도 챗 AI 앱에 붙여 넣어 결과를 볼 수 있습니다. 다만 파일을 저장해 열고 올리는 일은 컴퓨터에서 해야 합니다. 링크에는 입력한 내용이 담기지 않으니, 컴퓨터에서 같은 템플릿을 열고 「내 정보 넣기」부터 다시 해 주세요. 컴퓨터가 없으면 웹 빌더를 고르세요. 휴대폰에서도 공개 주소까지 만들 수 있습니다.

같은 대화창에 바꿀 것만 짧게 적어 보내세요. 예를 들면 이렇게 씁니다.

• 「영업시간을 화요일부터 일요일 낮 12시 ~ 저녁 8시로 바꿔 주세요. 나머지는 그대로요.」
• 「대표 메뉴에 '말차 라떼 6,000원'을 하나 더 넣어 주세요.」
• 「단추 색을 조금 더 진한 초록으로 바꿔 주세요.」

새 답이 오면 위와 같은 방법으로 다시 저장하고, 전에 저장한 index.html 을 덮어쓰세요. 고칠수록 디자인이 처음과 멀어지거나 엉뚱하게 바뀌면, 새 대화를 열고 프롬프트를 처음부터 다시 붙여 넣는 편이 빠릅니다.

사진 넣기

1. 사진 파일 이름을 영어로 바꿉니다(예: shop.jpg).
2. 그 사진을 index.html 과 같은 폴더에 둡니다.
3. 대화창에 사진을 첨부하고 「shop.jpg 를 가게 사진 자리에 넣어 주세요. 파일은 index.html 과 같은 폴더에 있습니다」라고 보냅니다.
4. 새 답을 다시 저장해 덮어씁니다. 올릴 때는 사진도 같은 폴더째 올립니다.

남에게 보여 주려면 파일을 인터넷에 올려 주소를 만들어야 합니다. 무료로 바로 되는 Netlify Drop 을 예로 듭니다.

1. 컴퓨터에 폴더를 하나 만들고(예: my-shop), 그 안에 index.html 과 사진 파일을 넣습니다.
2. 브라우저에서 app.netlify.com/drop 을 엽니다.
3. 가운데 상자에 그 폴더를 통째로 끌어다 놓습니다.
4. 잠시 뒤 무엇무엇.netlify.app 모양의 주소가 생깁니다. 그 주소를 눌러 페이지가 열리면 됐습니다.
5. 가입하지 않고 올린 페이지는 정해진 시간이 지나면 사라집니다. 계속 두려면 화면의 안내대로 이메일이나 구글 계정으로 가입하고 그 페이지를 내 계정에 붙입니다.

파일을 고쳤으면 같은 화면에서 새 폴더를 다시 끌어다 놓으면 됩니다.

• AI 가 파일 대신 긴 코드 글로 답했어요.

  정상입니다. 위 「복사로 받았을 때 파일로 저장하기」대로 저장하세요.

• AI 가 파일 여러 개나 React 로 답했어요.

  이렇게 다시 보내세요. 「HTML 파일 하나로 다시 만들어 주세요. 구조와 디자인은 그대로요.」

• 너무 길어서 붙여넣을 수 없다고 해요.

  「원본 파일 받기」로 index.html 을 받아 채팅창에 첨부하고, 「첨부용 짧은 프롬프트 복사하기」로 복사한 글을 붙여 넣어 보내세요.

• 디자인이 통째로 바뀌었어요.

  새 대화를 열고 프롬프트를 다시 붙여 넣으세요.

• 저장한 파일이 메모장이나 텍스트 편집기로 열려요.

  파일 이름 끝이 .txt 나 .rtf 일 수 있습니다. 윈도우는 파일 탐색기에서 「보기 > 표시 > 파일 확장명」을 켜고 끝의 .txt 를 지웁니다. 맥은 파일을 고르고 Command+I 로 정보 창을 열어 「이름 및 확장자」를 index.html 로 고칩니다.

• 글자가 깨져 보여요.

  저장할 때 인코딩이 UTF-8 이 아니었을 수 있습니다. 위 저장 순서대로 「UTF-8」을 골라 다시 저장하세요. 그래도 깨지면 AI 에게 「첫 줄에 meta charset utf-8 을 넣어 주세요」라고 보내세요.

• 복사 단추가 안 눌려요.

  프롬프트 미리보기를 펼쳐 글 전체를 길게 눌러 선택한 뒤 복사하세요.

템플릿이 깨져 보이면 알려 주세요. 템플릿 자체의 오류를 고칩니다.