무료 · 한국어 · 독립형 HTML 웹 앱

HTML 파일 인덱스 생성기

폴더 안의 HTML 파일을 자동으로 찾아 정리하고, 클릭 가능한 index.html 파일을 바로 생성해 다운로드할 수 있도록 설계한 무료 웹 앱입니다. 설치 없이 브라우저에서 실행되며, 배포용 데모 폴더나 웹 앱 모음집을 빠르게 정리할 때 특히 유용합니다.

  • 간단함: 폴더를 선택하면 HTML 파일 목록을 자동 수집합니다.
  • 안전함: 서버 업로드 없이 브라우저 안에서 로컬 처리됩니다.
  • 실용성: 클릭 가능한 index.html을 생성하여 배포와 탐색을 쉽게 만듭니다.

지금 바로 index.html 생성하기

아래에서 HTML 파일이 들어 있는 폴더를 선택하면 파일 목록을 보여드리고, 클릭 가능한 인덱스 문서를 자동으로 만들어 드립니다.

브라우저가 폴더 선택을 지원해야 하며, 선택한 폴더 안의 .html 파일만 자동 추려집니다.

폴더를 선택하면 파일 수와 목록이 아래에 표시됩니다.

아직 폴더가 선택되지 않았습니다.

선택 후 여기에 HTML 파일 목록이 나타납니다.

이 도구가 유용한 이유

HTML 파일이 여러 개 있을 때 사용자는 어떤 파일부터 열어야 하는지 헷갈리기 쉽습니다. 이 웹 앱은 폴더 속 HTML 파일을 자동 정리하여 대표 진입점 역할을 하는 index.html을 생성합니다. 따라서 웹 앱 모음, 샘플 프로젝트, 교육 자료, 포트폴리오 데모, 오프라인 HTML 패키지, 배포용 정적 사이트 모음 등을 더 체계적으로 제공할 수 있습니다.

특히 한국어 사용자에게 익숙한 안내 문구와 간단한 동작 흐름으로 설계되어 초보자도 쉽게 사용할 수 있습니다. 또한 설치가 필요 없는 독립형 HTML 웹 앱이므로, 별도 프로그램 없이 바로 열어 사용할 수 있습니다.

핵심 기능

  • HTML 자동 탐색: 선택한 폴더에서 HTML 파일만 골라냅니다.
  • 자동 정렬: 파일명을 기준으로 보기 좋게 정렬합니다.
  • 즉시 다운로드: 생성된 index.html을 곧바로 저장할 수 있습니다.
  • 로컬 중심 처리: 서버 전송 없이 브라우저 내부에서 동작합니다.

자주 묻는 질문

이 웹 앱은 무료인가요?

네. 무료로 사용할 수 있는 브라우저 기반 HTML 도구입니다.

폴더 안의 모든 파일을 인식하나요?

아니요. 기본적으로 파일명 확장자가 .html인 항목만 인식합니다.

다운로드한 index.html은 어떻게 쓰나요?

같은 폴더 또는 배포 대상 폴더에 넣으면 방문자가 클릭 가능한 시작 페이지로 활용할 수 있습니다.

`; } folderInput.addEventListener('change', (event) => { const files = Array.from(event.target.files || []); htmlFiles = files .filter((file) => file.name.toLowerCase().endsWith('.html')) .map((file) => file.webkitRelativePath ? file.webkitRelativePath.split('/').pop() : file.name) .filter(Boolean) .sort((a, b) => a.localeCompare(b, 'ko')); if (htmlFiles.length) { fileCountDiv.textContent = `HTML 파일 ${htmlFiles.length}개를 찾았습니다.`; renderFileList(); setStatus('info', `${htmlFiles.length}개 파일로 index.html 생성 준비가 완료되었습니다.`); generateBtn.disabled = false; } else { fileCountDiv.textContent = '선택한 폴더에서 HTML 파일을 찾지 못했습니다.'; renderFileList(); setStatus('error', '선택한 폴더에 HTML 파일이 없습니다. 다른 폴더를 선택해 주세요.'); generateBtn.disabled = true; } }); generateBtn.addEventListener('click', () => { if (!htmlFiles.length) { setStatus('error', '먼저 HTML 파일이 들어 있는 폴더를 선택해 주세요.'); return; } const indexContent = buildIndexContent(htmlFiles); const blob = new Blob([indexContent], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = 'index.html'; document.body.appendChild(anchor); anchor.click(); anchor.remove(); URL.revokeObjectURL(url); setStatus('success', 'index.html 파일이 성공적으로 생성되어 다운로드되었습니다. 배포 폴더에 함께 넣어 사용하세요.'); }); resetBtn.addEventListener('click', resetUI); resetUI(); })();