AI에게 "이런 화면을 만들어 줘"라고 하면 HTML 코드가 나옵니다. 문제는 그다음입니다.

코드는 손에 들어왔는데, 실제로 어떻게 생겼는지 보려면 어딘가에 넣어 실행해야 합니다. 코딩을 해 본 적 없는 분에게는 이 단계가 가장 높은 벽입니다.

방법 1. 컴퓨터에 파일로 저장하기

메모장을 열고 코드를 붙여넣은 뒤 이름.html로 저장하면 됩니다. 두 번 누르면 브라우저에서 열립니다.

단점 — 나만 볼 수 있습니다. 남에게 보내려면 파일을 보내야 하고, 받는 사람은 대개 열지 못합니다. 폰에서는 더 어렵습니다.

방법 2. 링크로 만들기

코드를 붙여넣고 「링크 만들기」를 누르면 주소가 나옵니다.

바로 가기

장점 — 내 폰에서도 열리고, 남에게 주소만 보내면 됩니다. 저장할 곳을 고민하지 않아도 됩니다.

AI에게 코드를 받을 때 요령

"한 파일로 만들어 줘"라고 말씀하십시오. 이 한마디로 대부분의 문제가 사라집니다.

AI는 종종 index.html, style.css, script.js를 나눠서 줍니다. 보기에는 깔끔하지만 링크로 올릴 때는 CSS와 JS가 빠져 밋밋한 화면이 됩니다.

같이 요청하면 좋은 것들입니다.

  • "CSS와 JS를 한 파일 안에 넣어 줘"
  • "외부 그림은 쓰지 말고, 필요하면 색과 도형으로 표현해 줘"
  • "폰에서도 잘 보이게 만들어 줘"

이렇게 쓰면 편합니다

1. AI에게 화면을 만들어 달라고 합니다 (한 파일로)

2. 코드를 복사합니다

3. 링크 생성기에 붙여넣습니다

4. 나온 주소를 폰으로 열어 확인합니다

5. 고칠 곳이 있으면 AI에게 말하고 3번부터 다시 합니다

고칠 때마다 링크가 새로 생깁니다. 자료는 5개까지 보관되니, 확정본만 남기고 중간본은 지우시면 됩니다.

알아 두실 것

그 화면 안에서 쿠키·저장소 기능은 동작하지 않습니다. AI가 "입력한 값을 저장해 두는 기능"을 넣어 줬다면 그 부분만 동작하지 않습니다. 안전장치 때문에 일부러 끊어 둔 부분입니다.

보여 주기가 목적이라면 문제가 없습니다.

정리

AI가 코드를 만들어 주는 시대에 남은 벽은 "그래서 이걸 어떻게 보지" 하나입니다.

붙여넣고 한 번 누르면 주소가 나옵니다. 그것으로 끝납니다.

바로 가기