정적 사이트 배포 가이드
CDSADROP은 HTML·CSS·JS로 만든 결과물을 서버 지식 없이 공개 URL로 바꿔주는 교육용 호스팅 도구입니다. 처음 사용하는 수강생도 5분 안에 자기 작업물을 인터넷에 올릴 수 있도록 순서대로 정리했습니다.
1. 로그인부터 시작합니다
배포한 결과물을 나중에 수정하거나 삭제하려면 소유자 확인이 필요합니다. 그래서 CDSADROP은 구글 로그인 또는 이메일·비밀번호 로그인을 먼저 요구합니다. 로그인하면 어떤 기기에서 접속하든 "내 배포" 목록이 그대로 따라옵니다. 강의장 PC에서 올린 과제를 집 노트북에서 이어서 수정할 수 있다는 뜻입니다.
2. 올릴 파일을 정리합니다
CDSADROP은 빌드를 하지 않는 정적 호스팅입니다. 즉, 브라우저가 바로 읽을 수 있는 파일만 올리면 됩니다. 최상위에 index.html이 있어야 첫 화면이 제대로 열립니다.
- 폴더 통째로 드래그하거나, 폴더를 압축한 ZIP 파일을 올립니다.
- 이미지·폰트·CSS·JS 등 하위 폴더 구조는 그대로 유지됩니다.
- React·Vue처럼 빌드가 필요한 프로젝트는
dist또는build폴더 안의 결과물을 올려야 합니다. - 경로는 대소문자를 구분하니 파일명을 정확히 맞춰 주세요.
3. 클래스 코드로 제출합니다
강의에서 사용할 때는 강사가 발급한 클래스 코드를 입력합니다. 코드를 입력하면 연결된 코스명이 자동으로 표시되고, 제출물이 해당 클래스로 분류됩니다. 강사는 강사 대시보드에서 자기 클래스 수강생의 제출물만 모아 확인하고, 필요하면 파일을 대신 교체해 줄 수 있습니다.
4. 드래그앤드롭 한 번으로 배포합니다
파일을 드롭존에 놓으면 업로드와 동시에 /s/슬러그 형태의 공개 주소가 발급됩니다. 별도의 도메인 구입, FTP 설정, 깃허브 저장소 연결이 필요 없습니다. 발급된 주소는 그대로 복사해 카카오톡·메일·LMS 어디에나 붙여 넣을 수 있습니다. 공개 저장소가 있는 경우에는 GitHub 저장소 주소를 입력해 정적 파일을 그대로 가져올 수도 있습니다.
5. PIN으로 접근을 제한합니다
작업물을 아직 공개하고 싶지 않다면 4자리 PIN을 걸어 두세요. 주소를 알아도 PIN을 모르면 볼 수 없습니다. 사내 자료나 평가 전 과제를 올릴 때 유용합니다. PIN은 언제든 해제할 수 있고, 강사는 담당 클래스의 PIN을 확인할 수 있습니다.
6. 같은 주소로 계속 업데이트합니다
수정한 파일을 다시 올리면 주소는 그대로 두고 내용만 교체됩니다. 발표 자료 링크를 이미 공유했더라도 새 주소를 다시 안내할 필요가 없습니다. 브라우저 캐시 때문에 이전 화면이 보인다면 강력 새로고침(Ctrl/Cmd + Shift + R)을 하면 됩니다.
자주 겪는 문제
- 빈 화면이 뜬다 — 최상위에
index.html이 있는지, 압축할 때 폴더가 한 겹 더 감싸지지 않았는지 확인하세요. - 이미지가 깨진다 — 절대경로(
/img/a.png) 대신 상대경로(./img/a.png)를 사용하세요. - 글꼴이 안 나온다 — 폰트 파일을 함께 업로드했는지, CDN 주소가 https인지 확인하세요.