도구 목록으로 돌아가기
무료 도구 안내

HTML Live Studio

AI가 생성한 HTML·CSS·JavaScript 코드를 브라우저에서 빠르게 시험해 보는 로컬 테스트용 안내 페이지입니다. 현재 이 프로젝트 안에는 별도 실행 앱 파일이 포함되어 있지 않으므로, 이 페이지는 도구 소개와 사용 흐름을 정리한 연결 페이지로 구성했습니다.

어떤 용도로 쓰는 도구인가

목회용 웹앱, 행사 안내 페이지, 묵상 카드 HTML, 출결 페이지처럼 단일 HTML 파일을 자주 다루실 때 유용합니다. 특히 AI가 만들어 준 결과물을 바로 열어 보면서 구조를 점검할 때 적합합니다.

  • AI에게 HTML 코드를 생성하게 합니다.
  • 메모장이나 VS Code에 붙여 넣습니다.
  • 브라우저에서 열어 실제 화면을 확인합니다.
  • 콘솔 오류와 링크 연결 상태를 점검합니다.

권장 작업 방식

아래 순서로 작업하면 오류를 빨리 찾을 수 있습니다.

1) index.html 저장 2) 브라우저에서 열기 3) F12 → Console 확인 4) 링크 클릭 테스트 5) 모바일 화면 점검

지금 프로젝트에 맞는 팁

  • 상대경로는 현재 파일 위치 기준으로 확인합니다.
  • Firebase 연결 페이지는 브라우저 콘솔 에러를 꼭 함께 봅니다.
  • 정적 HTML 글과 Firestore 글을 함께 쓸 때는 연결 구조를 먼저 정리합니다.
  • 압축 배포 전에 없는 링크와 중복 파일부터 점검합니다.

다음 단계 제안

원하시면 다음 수정 때 이 페이지를 실제 실행형 HTML 코드 테스트 도구로 바꿔 드릴 수 있습니다. 예를 들어 좌측 코드 입력, 우측 미리보기, 저장, 전체화면, 오류 보기 기능까지 넣어 단일 파일 도구로 제작할 수 있습니다.