📝 EDITOR GUIDE

홈페이지를 직접 수정하는 방법

이 페이지에서 홈페이지 수정 방법을 안내해 드립니다.
수정 후 Publish 탭에서 배포하면 공식 링크에 바로 반영됩니다.

① 배포하기 — 수정 내용을 공식 링크에 반영
미리보기에서 확인한 내용을 실제 공개 URL에 올리는 과정입니다
1
🖥️ 화면 오른쪽 상단 "Publish" 탭 클릭
GenSpark 편집 화면 우측 상단에 있는 Publish 버튼을 찾아 클릭합니다.
2
⚡ "게시하기" 또는 "Deploy" 버튼 클릭
Publish 탭 안에서 배포 버튼을 누르면 약 1~2분 내로 공식 링크에 반영됩니다.
3
🔗 공식 링크 확인
배포 완료 후 나타나는 URL이 공식 링크입니다. 링크를 복사해 공유하세요.
주의: 미리보기 화면의 내용과 실제 배포 링크(https://zctwzhwt.gensparkspace.com)는 별개입니다.
수정 후 반드시 Publish 탭에서 재배포해야 공식 링크에 반영됩니다.
현재 공식 링크: https://zctwzhwt.gensparkspace.com
배포 후 이 주소로 접속하면 최신 내용이 보입니다.
② 빠른 수정 — 자주 바꾸는 항목
아래 항목을 수정하고 저장하면 AI 에이전트가 파일을 자동 업데이트합니다
⚡ 핵심 정보 빠른 수정
수정 후 "AI에게 적용 요청" 버튼을 누르면 채팅창에 요청 메시지가 자동 생성됩니다
③ 수정 방법 — 3가지 선택지
상황에 맞는 방법을 선택하세요
AI 채팅으로 수정 요청하기 (가장 쉬운 방법)
코딩 지식 없이도 됩니다. 원하는 내용을 자연어로 말씀해 주세요.
1
GenSpark 채팅창에 수정 요청 입력
아래처럼 원하는 내용을 입력하면 됩니다:
💬 예시 메시지
접수 마감일을 2026년 5월 10일에서 5월 20일로 변경해줘
FAQ에 새로운 질문 추가해줘: Q. 외국인도 참가할 수 있나요? A. 네, 외국인도 참가 가능합니다.
연락처 전화번호를 055-860-8610으로 바꿔줘
공모전 소개 페이지에서 심사위원 명단에 홍길동(디자인학과 교수)을 추가해줘
2
AI가 자동으로 파일 수정
잠시 후 AI가 해당 파일을 수정하고 미리보기에서 확인할 수 있습니다.
3
Publish 탭에서 배포
미리보기에서 확인 후 Publish 탭을 클릭해 공식 링크에 반영하세요.
HTML 파일 직접 수정하기 (중급)
기본적인 HTML 지식이 필요합니다. 수정 전 내용을 메모장에 백업해두세요.
1
GenSpark에서 수정할 파일 선택
좌측 파일 목록에서 수정할 *.html 파일을 클릭합니다.
2
텍스트 직접 변경
파일 내용에서 변경하고 싶은 텍스트를 찾아 수정합니다.
<div class="footer-contact-item">📞 1577-7020</div> <div class="footer-contact-item">📞 055-860-8610</div>
3
저장 후 미리보기 확인 → Publish 배포
변경 후 우측 미리보기에서 확인하고, Publish 탭에서 배포합니다.
자주 수정하는 내용의 파일 위치
수정 항목 파일 찾을 텍스트 (Ctrl+F)
접수 기간 index.html 04.14 ~ 05.10
전화번호 contact.html 1577-7020
이메일 contact.html [email protected]
총 상금 index.html 1,500만원
심사 기준 guidelines.html 심사기준
FAQ 질문 faq.html faq-item
수상작 정보 awards.html award-card
공지사항 admin.html 관리자 패널에서 직접 추가
CMS 디자인 편집 패널 사용하기
색상·폰트·텍스트를 코드 없이 슬라이더·입력창으로 변경할 수 있습니다.
1
CMS 패널 접속
cms.html에 접속합니다.
2
원하는 항목 수정
좌측 메뉴에서 항목 선택 후 값을 변경합니다.
변경 시 우측 미리보기에 즉시 반영됩니다.
3
AI에게 코드 적용 요청
CMS 패널 우측 상단의 "코드 내보내기" 버튼을 클릭 후, 생성된 메시지를 AI 채팅에 붙여넣으세요.
④ 다운로드 파일 관리 — 공고문 · 신청서 · 가이드 교체
참가자에게 제공할 HWP/PDF 파일을 직접 업로드하고 교체하는 방법
현재 등록된 다운로드 파일
파일 용도현재 파일명노출 위치상태
📄 공고문 downloads/1-공고문-뚀즈2026.pdf 공모 요강 페이지 ✅ 업로드 완료
📝 참가신청서 downloads/2-참가신청서-뚀즈2026.pdf 공모 요강 · 접수하기 ✅ 업로드 완료
📋 정보가이드 downloads/3-정보가이드-뚀즈2026.pdf 공모 요강 페이지 ✅ 업로드 완료
파일 업로드 방법 (단계별)
파일은 GenSpark 편집 화면에서 직접 업로드할 수 있습니다. 아래 단계를 따라주세요.
1
GenSpark 편집 화면 좌측 패널에서 "Files" 탭 클릭
화면 왼쪽의 파일 탐색기 패널을 엽니다. 현재 프로젝트의 모든 파일이 트리 형태로 보입니다.
2
downloads 폴더를 찾아 클릭
파일 트리에서 downloads/ 폴더를 찾아 클릭합니다.
3
파일 업로드 버튼 클릭 → HWP/PDF 선택
파일을 정확한 이름으로 저장해서 업로드해야 합니다:
📄
공고문 파일명
1-공고문-뚀즈2026.pdf ✅ 업로드됨
📝
참가신청서 파일명
2-참가신청서-뚀즈2026.pdf ✅ 업로드됨
📋
정보가이드 파일명
3-정보가이드-뚀즈2026.pdf ✅ 업로드됨
4
Publish 탭에서 재배포
업로드 후 반드시 Publish → 배포를 눌러야 실제 사이트에 반영됩니다.
HWP vs PDF — 어떤 형식이 좋을까요?
✅ PDF 추천
  • 모든 기기·OS에서 동일하게 열림
  • 스마트폰에서도 바로 열림
  • 내용 수정 불가 → 공식 문서에 적합
  • 용량이 작아 다운로드 빠름
⚠️ HWP 주의사항
  • 한글 뷰어 설치 필요 (Windows)
  • Mac·iOS에서 안 열릴 수 있음
  • 참가신청서처럼 작성이 필요한 경우 사용
  • 가능하면 HWP + PDF 동시 제공 권장
권장: 공고문·정보가이드는 PDF, 참가신청서는 HWP + PDF 둘 다 올리는 것이 가장 좋습니다.
파일명 변경 시 — AI에게 링크 수정 요청
위 파일명과 다른 이름으로 업로드했다면 아래 메시지를 복사해 AI 채팅창에 붙여넣고 파일명을 적어주세요.
다운로드 파일 링크를 수정해줘: - 공고문: downloads/1-공고문-뚀즈2026.pdf - 참가신청서: downloads/2-참가신청서-뚀즈2026.pdf - 정보가이드: downloads/3-정보가이드-뚀즈2026.pdf
⑤ 파일 안내 — 어디를 수정해야 하나요?
각 파일이 어떤 페이지를 담당하는지 확인하세요
파일명 담당 페이지 주요 내용
index.html 메인 홈 히어로 배너, 카운트다운, 일정, 상금, 기념품 세계 섹션
about.html 공모전 소개 공모 개요, 시상 내역, 진행 타임라인, 심사위원
guidelines.html 공모 요강 참가 자격, 제출 형식, 심사 기준, 제출 방법
apply.html 온라인 접수 접수 폼, 파일 업로드, 동의서, 접수 확인
awards.html 수상작 소개 2025 제1회 수상작, 2026 제2회 수상작 (발표 전)
notice.html 공지사항 공지 목록 (admin.html에서 관리)
faq.html FAQ 자주 묻는 질문 답변
contact.html 문의하기 전화·이메일·주소·지도
news.html 홍보/이벤트 홍보 게시물, 이벤트 안내
admin.html 관리자 패널 공지사항·접수작·홍보 게시물 CRUD
cms.html CMS 편집 패널 색상, 폰트, 텍스트 시각적 편집
css/style.css 전체 스타일 색상 변수, 폰트, 레이아웃 전역 CSS
⑥ 자주 묻는 질문
수정·배포 관련 자주 발생하는 문제와 해결법
수정했는데 공식 링크에 반영이 안 돼요
미리보기와 실제 배포 링크는 별개입니다.
수정 후 반드시 Publish 탭 → 게시하기를 눌러야 공식 링크에 반영됩니다.
배포 후 브라우저 캐시 때문에 안 보일 수 있으니 Ctrl+F5 (강제 새로고침)를 해보세요.
배포를 눌렀는데 "배포 실패"라고 나와요
주요 원인은 다음과 같습니다:

1️⃣ 파일 크기 초과 — 대용량 파일이 포함된 경우 (이전에 ref/german-village.html 417KB 파일이 원인이었음. 이미 해결됨)
2️⃣ HTML 문법 오류 — 태그가 닫히지 않은 경우. AI에게 "문법 오류 확인해줘" 요청
3️⃣ 서버 일시 오류 — 잠시 후 다시 시도

문제가 지속되면 AI 채팅창에 "배포 오류 확인하고 수정해줘"라고 입력하세요.
이미지를 교체하고 싶어요
이미지 교체 방법:

1. AI 채팅에 "images/ 폴더에 [파일명]으로 이미지 업로드하고 [어느 위치]에 표시해줘"라고 요청
2. 또는 이미지 URL(외부 링크)이 있으면: "히어로 포스터 이미지를 [URL]로 교체해줘"

현재 사용 중인 이미지는 images/ 폴더에 있습니다.
접수 마감일이 지났을 때 어떻게 하나요?
AI에게 다음처럼 요청하세요:

"접수가 마감되었습니다. index.html의 '접수 진행 중' 배지를 '접수 마감'으로 바꾸고, apply.html 접수 버튼을 비활성화해줘"

또는 단순히 "접수 기간을 종료 상태로 변경해줘"라고 요청해도 됩니다.
수상작이 발표됐을 때 어떻게 추가하나요?
AI에게 다음처럼 요청하세요:

"awards.html에 2026 수상작을 추가해줘. 대상: [작품명], [작가명], [작품 설명]. 최우수상: [작품명], [작가명], [작품 설명]..."

이미지가 있으면 이미지 URL도 함께 제공해주세요.
페이지 전체 색상을 바꾸고 싶어요
css/style.css 파일 맨 위의 CSS 변수를 변경하면 됩니다:

--orange: #F5860A; → 원하는 색상 코드로 변경

또는 AI에게 "메인 색상을 파란색 계열로 바꿔줘"라고 요청하세요.
지금 바로 시작하세요 🚀
수정 → 미리보기 확인 → Publish 탭 배포 순서로 진행하세요
홈페이지 미리보기 관리자 패널 디자인 편집