cmshom.com 무료 웹디자인 에디터에서 받은 ZIP 파일은 압축만 풀면 index.html을 더블클릭해서 바로 열어볼 수 있습니다. 다만 이건 내 컴퓨터에서만 보이는 상태이고, 다른 사람도 주소를 쳐서 들어올 수 있게 하려면 호스팅에 파일을 올려야 합니다. 그 과정을 정리했습니다.
압축을 풀면 다음과 같은 구조로 되어 있습니다. 애니메이션을 썼다면 js 폴더 안에 파일이 더 들어 있을 수 있습니다.
index.html
css/style.css
js/script.jsindex.html 안에서 css나 js 파일을 불러올 때는 이런 식으로 상대 경로를 씁니다.
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>css/style.css라는 경로는 index.html 기준으로 css 폴더 안에 style.css가 있다는 뜻입니다. 폴더 구조를 무시하고 파일들을 전부 한 줄로 섞어서 올리면, 브라우저가 이 경로를 찾지 못해 디자인이 통째로 깨진 페이지만 보이게 됩니다. 올릴 때는 폴더째로, 있는 그대로 올리는 게 중요합니다.
호스팅 서비스에 따라 FTP 프로그램으로 접속해서 올리거나, 웹 화면의 파일 관리자에서 직접 업로드하는 방식을 씁니다. 어느 쪽이든 원리는 같습니다. 압축 푼 폴더 안의 index.html, css 폴더, js 폴더를 웹사이트가 열리는 최상위 폴더(흔히 public_html이나 www로 불립니다)에 그대로 옮겨 놓으면 됩니다. 폴더를 압축 파일째로 올리는 게 아니라, 폴더 안의 내용물을 최상위에 맞춰 올린다는 점만 헷갈리지 않으면 됩니다.
리눅스 기반 호스팅은 파일명의 대소문자를 구분합니다. 코드에서는 css/style.css로 불러오는데 실제 폴더명이 CSS로 되어 있으면, 로컬에서는 잘 열려도 서버에 올렸을 때는 파일을 찾지 못하는 경우가 있습니다. 업로드 전에 폴더명과 파일명이 코드에 적힌 경로와 정확히 같은지 한 번 더 확인해두면 이런 실수를 줄일 수 있습니다.
업로드가 끝나면 실제 도메인 주소로 접속해서 디자인이 로컬에서 보던 것과 똑같이 나오는지 확인합니다. 글자만 나오고 디자인이 안 입혀져 있다면 css 폴더 경로가 어긋났을 가능성이 크니, 파일 위치를 다시 확인해보시면 됩니다.
호스팅 업로드까지 직접 하기 번거로우시면 AI 홈페이지 3분 개설(/ai-start)이나 10만원 제작 문의로 넘겨주셔도 됩니다.