2일차(3,4차시) 요청문 모음
남해고등학교 홈페이지를 설계하는 교육용 실습입니다. 아래 메뉴와 기능은 제작 제안이며 현재 공식 홈페이지의 기능을 확인한 목록이 아닙니다. 학교가 제공한 자료만 사용하고, 운영시간·요금·대상·정원·접수일·예약 규칙은 확인 전까지 “운영자료 확인 필요”로 표시합니다. 실제 개인정보 수집, 신청 접수, 예약 확정, 결제, 운영 DB 변경은 연결하지 않습니다. 기존 학교 사이트와 분리하고, 유료 서비스 사용·권한 확대·파일 삭제·외부 공개 전에는 담당자 확인을 받습니다.

1장 주소로 복습하는 홈페이지의 구조
chemion.kr: 제 홈페이지의 도메인
chemion-lab.chemsty-c23.workers.dev: 원래 주소
te.chemion.kr: 하위 도메인(남해고 AI 연수용)
서버 Server: 요청한 페이지·데이터를 보내 주는 컴퓨터·프로그램
호스팅 Hosting: 파일이나 앱을 인터넷에서 제공하는 서비스
도메인 Domain: 홈페이지 주소에 사용하는 이름
URL: 접속 방식·도메인·경로 등을 포함한 위치 주소
하위 도메인 Subdomain: 기존 도메인 앞에 이름을 붙인 주소. 예: te.chemion.kr
URL 예: https://te.chemion.kr/p?day=3#slide=1

3장 제작 흐름과 진행 보고
기획 Planning: 무엇을 누구를 위해 만들지 정하는 일
구현 Implement: 정한 화면·기능을 코드로 만드는 일
테스트 Test: 기대 동작과 실제 결과를 비교하는 확인
진행 보고 Status: 완료·진행 중·막힌 일을 구분해 알리는 것

남해고등학교 홈페이지 작업이야. 동아리 안내 홈페이지의 작업을 기획, 구현, 테스트, 최적화, 배포로 나눠 줘. 먼저 작업 폴더와 파일을 확인하고 수정 범위와 완료 기준을 제안해. 현재 단계, 완료한 일, 진행 중인 일, 막힌 이유와 다음 작업을 보고해. 아직 구현하지 않은 기능을 완료로 표시하거나 임의의 진행률을 만들지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 계획·구현·검증·공개를 구분해서 보고하는가?

4장 조사·분석·검토·검증 요청법
조사 Research: 공식 자료·사례를 찾아 출처와 사실을 모으기
분석 Analysis: 모은 자료의 차이·관계·원인을 해석하기
검토 Review: 현재 결과의 문제·영향·우선순위를 살피기
검증 Verify: 기준과 실제 자료·동작을 비교해 확인하기

남해고등학교 홈페이지 작업이야. 먼저 학교 공식 자료와 허용된 홈페이지 사례를 조사해 출처 URL·게시일·확인일·미확정 항목을 정리해 줘. 학교가 제공한 자료와 비교 분석해 차이와 근거를 설명해. 현재 사이트는 메뉴·동아리 신청 안내·모바일 화면을 검토해서 문제·영향·우선순위만 보고해. 조사·검토 단계에서는 파일을 수정하거나 배포하지 마. 내가 수정 범위를 승인한 뒤 구현하고, 완료 기준과 실제 화면을 비교해 검증해. 추정과 확인 사실을 분리하고 못 본 항목은 미확인으로 적어 줘. 교육용 실습 사이트라고 표시해. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 실제 확인한 결과와 미확인 항목을 구분해 알려 줘. 외부 공개 전 확인을 받아 줘.

확인: 자료 수집·판단·수정·확인을 각각 요청했는가?

5장 버전 번호와 알파·베타·RC
버전 번호 1.2.3: 팀 규칙 예: 큰 변경·기능 추가·오류 수정
알파 Alpha / 베타 Beta: 초기 내부 시험 / 기능을 갖춘 넓은 시험 단계
RC / 정식 Release: 출시 후보 / 검수·승인 후 공개하는 기준 버전
커밋 Commit / 태그 Tag: 변경 기록 / 특정 버전에 붙이는 기준 이름

남해고등학교 홈페이지 작업이야. 프로젝트에 기존 버전 규칙과 Git 저장소가 있는지 먼저 확인해. 이 실습에서는 큰 변경.기능 추가.오류 수정 형식으로 버전을 매기는 규칙을 제안해 줘. 0.1.0-alpha.1은 초기 시험, 0.9.0-beta.1은 넓은 시험, 1.0.0-rc.1은 공개 전 검수 후보, 1.0.0은 승인한 정식판의 예시야. 정식 후 공지 오타만 고치면 1.0.1, 호환을 유지하며 검색을 더하면 1.1.0, 기존 이용 방식과 호환되지 않는 큰 변화는 2.0.0 후보로 검토해. 변경 이유와 날짜를 CHANGELOG에 기록하고 태그·배포 주소를 대응시켜 줘. 커밋·태그·원격 푸시는 별도로 확인하고, 공개 승인을 받기 전 운영 배포하지 마. 교육용 실습 사이트라고 표시해. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 실제 확인한 결과와 미확인 항목을 구분해 알려 줘. 외부 공개 전 확인을 받아 줘.

확인: 화면의 버전·태그·배포 기록이 같은 결과물을 가리키는가?

6장 프로젝트 폴더와 파일 관리
프로젝트 루트 Root: 한 홈페이지 작업의 기준이 되는 폴더
src/ · public/: 소스 코드 / 공개 파일. 프로젝트 방식에 따라 다름
assets/ · docs/: 그림 등 자료 / 기획·운영·인수인계 문서
dist/ · 별도 백업: 빌드 결과 / 프로젝트 밖에 보관하는 복구 사본

남해고등학교 홈페이지 작업이야. 내가 선택한 남해고등학교-홈페이지/ 프로젝트 폴더 안에서만 작업해. 현재 경로와 파일 역할을 먼저 확인하고 다른 프로젝트는 건드리지 마. 기존 도구의 구조를 우선하되 소스 src/, 공개 파일 public/, 원본 자료 assets/, 문서 docs/, 빌드 결과 dist/의 역할을 초보자에게 설명해. 단일 HTML 프로젝트라면 이 폴더들을 무조건 만들지 마. 공개할 파일 목록과 index.html 위치를 확인하고 .env·.dev.vars·토큰·신청자 자료·내부 문서는 제외해. .gitignore와 실제 배포 설정을 각각 확인해. 기존 파일 이동·삭제·이름 변경·새 저장소 초기화는 먼저 물어봐. 복구용 백업은 별도 위치와 복구 방법을 정리해. 교육용 실습 사이트라고 표시해. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 실제 확인한 결과와 미확인 항목을 구분해 알려 줘. 외부 공개 전 확인을 받아 줘.

확인: 작업 폴더와 공개할 폴더, 복구용 사본을 구별하는가?

7장 ChatGPT Plus 사용량·토큰 관리
Plus 구독: 모델명이 아닌 이용 요금제. API 비용과 별도로 봅니다
토큰 Token: 요청·파일·대화 이력·응답을 처리하는 정보 단위
문맥 Context: 한 번에 참고하는 정보. 남은 구독 한도와 구별
사용량·회복 시각: 계정 화면의 한도와 리셋 시각을 확인하는 기준

남해고등학교 홈페이지 작업이야. ChatGPT Plus를 사용하는 교사의 홈페이지 실습을 도와줘. Plus는 모델명이 아닌 구독 요금제이고, 토큰은 요청·파일·대화 이력·응답 등을 처리하는 단위라는 점을 설명해. 일반 Chat의 모델·도구별 제한과 Work·Codex 사용량 화면은 구분해. 사용량은 모델·작업·추론·도구 등에 따라 달라지므로 내 계정의 잔여 한도·회복 시각을 AI가 추측하지 마. 먼저 오늘 만들 화면 한 개와 완료 기준을 정하고 관련 파일만 확인해. 답변은 필요한 설명과 변경점 중심으로 짧게 하고 전체 코드·이미지의 반복 재생성을 줄여. 일상 수정은 가능한 가벼운 모델·기본 추론부터, 복잡한 설계와 오류 원인 분석은 필요한 수준으로 제안해. 대화가 길어지면 목적·제약·현재 파일·결정·다음 작업을 짧게 인수인계 요약해. 새 대화는 구독 한도를 초기화하지 않는다고 알려줘. 한도 경고가 뜨면 현재 작업을 저장하고 화면의 회복 시각을 확인하도록 안내해. API 비용은 구독과 별도로 보고 추가 크레딧 구매·모델 변경·API 전환은 내 선택 없이 진행하지 마. 교육용 실습 사이트라고 표시해. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 실제 확인한 결과와 미확인 항목을 구분해 알려 줘. 외부 공개 전 확인을 받아 줘.

확인: 한도는 계정 화면 기준. 고정 월 토큰량·새 대화 무제한으로 설명하지 않습니다.

8장 GDWEB에서 레퍼런스 가져오기
레퍼런스 Reference: 원하는 분위기와 구성을 설명할 참고 사례
벤치마킹 Benchmarking: 좋은 구성의 이유를 비교해 우리 업무에 적용
와이어프레임: 색·사진보다 정보 배치에 집중한 화면 초안

남해고등학교 홈페이지 작업이야. GDWEB WEB 부문 선정작에서 관공서/학교·교육·복지/사회 분야를 살펴보고 학교 안내에 맞는 후보 2~3개를 찾아 줘. 선정작 상세와 연결된 실제 사이트를 열 수 있는 범위에서 확인하고 URL, 참고할 화면, 좋은 이유, 학교에 적용할 부분과 제외할 부분을 비교해 줘. 실제 확인한 후보와 열지 못한 후보를 구분해. 내가 고른 참고 사례의 메뉴 배치와 여백을 해석해 와이어프레임을 제안해. 로고·문구·사진·코드는 그대로 복제하지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 참고 URL과 적용할 요소, 제외할 요소가 기록됐는가?

9장 메뉴와 페이지 구조
정보 구조 IA: 센터 정보를 목적별로 묶는 설계
사이트맵 Sitemap: 메뉴와 하위 페이지를 정리한 지도
GNB: 사이트 전체에서 쓰는 주요 메뉴 묶음
섹션 Section: 한 페이지에서 주제별로 나눈 구역

남해고등학교 홈페이지 작업이야. 학교 소개와 이용 안내, 시설·공간, 프로그램, 공지·활동 갤러리·FAQ, 오시는 길로 정보를 묶은 사이트맵을 제안해 줘. 메뉴는 GNB, 한 페이지 안의 세부 주제는 섹션으로 구분해. 학생과 학부모가 동아리 신청 정보를 찾는 동선을 우선하고 수업 안내와 학교 행정을 구분하고 이용 대상별 메뉴를 정리해. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 같은 안내를 여러 메뉴에 중복해서 넣지 않았는가?

10장 메인 화면과 바로가기
히어로 Hero: 처음 방문했을 때 보이는 큰 소개 영역
배너 Banner: 모집·행사 등 소식을 강조하는 영역
CTA: 프로그램 보기처럼 다음 행동을 안내하는 요소

남해고등학교 홈페이지 작업이야. 메인 히어로, 모집 배너, 프로그램·시설 바로가기를 나눠 배치해 줘. 자료가 없는 배너는 준비 중으로 표시하고 실제로 연결되는 안내 페이지부터 만들어. 제공되지 않은 로고·전화번호·운영시간은 만들지 마. 신청 버튼은 실제 접수처럼 오해되지 않게 시연용으로 표시해. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 처음 온 사람이 원하는 정보를 바로 찾을 수 있는가?

11장 “고유의 색을 넣어줘”
브랜드 컬러: 학교의 정체성을 나타내는 기준 색
컬러 팔레트: 화면에서 함께 사용할 색의 조합
포인트 컬러: 중요 버튼과 강조에 제한해서 쓰는 색
대비 Contrast: 글자와 배경 등을 구별하는 밝기·색 차이

남해고등학교 홈페이지 작업이야. 센터의 고유의 색을 넣어줘. 공식 색상 자료가 있으면 기준으로 쓰고, 없다면 제안용 팔레트 2안을 보여 줘. 주색·보조색·포인트 컬러의 역할과 색상 코드, 버튼·링크·접수 상태에 적용할 규칙을 설명해. 담당자가 고른 안을 전체 페이지에 일관되게 적용하고 글자 대비와 선택 상태를 확인해. 상태는 색만으로 구별하지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 같은 의미에 같은 색을 쓰고 글자가 잘 읽히는가?

12장 배치·여백·글자 크기
그리드 Grid: 카드를 행과 열로 정돈하는 배치
패딩 Padding: 카드 테두리와 내용 사이의 안쪽 여백
갭 Gap: 카드나 버튼 등 항목 사이의 간격
타이포그래피: 제목·본문·보조 글자의 크기와 굵기 체계

남해고등학교 홈페이지 작업이야. 프로그램 카드의 그리드, 패딩, 갭과 글자 체계를 정리해 줘. PC 두 열, 휴대폰 한 열로 배치하고 제목이 길어도 자연스럽게 줄을 바꾸게 해. 구역 바깥 마진과 본문 행간도 통일해. 프로그램 문구와 날짜, 링크는 그대로 유지하고 작은 화면에서 가로 넘침을 확인해. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 긴 제목과 글자 확대에서도 겹침이나 잘림이 없는가?

13장 “칩으로 만들어줘”
칩 Chip: 짧은 항목을 선택·필터 등에 쓰는 작은 요소
배지 Badge: 모집 중 같은 상태·개수를 알려 주는 표시
카드 Card: 프로그램 사진·설명·행동을 묶은 콘텐츠 단위

남해고등학교 홈페이지 작업이야. 프로그램 대상 필터를 칩으로 만들어줘. 전체·학생·학부모 항목 중 하나를 선택하는 방식으로 하고 선택 상태와 선택 해제 기준을 분명히 해. 선택한 대상의 프로그램 카드만 보여 줘. 모집 중·마감은 클릭하지 않는 상태 배지로 표시해. 칩의 둥근 모양뿐 아니라 선택 동작과 키보드 조작도 확인해. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 칩을 눌렀을 때 할 일과 선택 해제 방법이 분명한가?

14장 드롭다운·단추·선택 메뉴
드롭다운 Dropdown: 눌러서 아래로 펼쳐 보이는 목록 형태
선택 메뉴 Select: 항목 중 값을 고르는 입력 요소
단추 메뉴 Menu button: 버튼을 눌러 동작·이동 목록을 여는 구성
탭 Tab: 같은 영역에서 관련 내용을 바꿔 보는 구성

남해고등학교 홈페이지 작업이야. 드롭다운 목록보기 형태의 대상 선택은 레이블이 있는 Select로 제안해 줘. 공유·인쇄 같은 동작은 더보기 단추 메뉴로 묶고, 시설 소개·이용 안내는 탭으로 전환하게 해. “단추 메뉴”가 항상 같은 기능을 뜻한다고 가정하지 말고 목적을 확인해. 가능하면 기본 HTML 요소를 사용하고 키보드 열기·선택·닫기와 포커스를 점검해. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 값 선택·동작 실행·내용 전환을 서로 구별했는가?

15장 하나 선택·여러 선택·켜고 끄기
라디오 Radio: 그룹 안에서 한 가지 값을 고르는 입력
체크박스 Checkbox: 여러 항목을 각각 선택하거나 해제하는 입력
토글 Toggle: 하나의 설정을 켜고 끄는 전환

남해고등학교 홈페이지 작업이야. 가상 신청 화면에서 참가 구분은 단일 선택 라디오, 관심 분야는 복수 선택 체크박스로 만들어 줘. 알림 설정 예시가 있으면 켜고 끄는 토글로 분리하되 실제 알림 전송은 연결하지 마. 각 입력에 이름과 선택 개수 안내를 붙이고 키보드로 선택과 해제가 되는지 확인해. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 몇 개를 고르는지와 현재 상태를 사용자가 아는가?

16장 학교 소개·시설·오시는 길
콘텐츠 Content: 학교 소개·이용 안내에 쓸 글과 사진
상세 페이지: 시설 한 곳의 정보를 자세히 보여 주는 화면
외부 링크: 공식 지도 등 다른 사이트로 이동하는 연결

남해고등학교 홈페이지 작업이야. 학교 소개·이용 안내, 시설 카드·상세, 오시는 길을 같은 정보 규칙으로 만들어 줘. 시설 사진·용도·이용 조건 순서를 통일해. 공유주방 등 공간 명칭과 현재 운영 여부는 학교 자료로 확인해. 지도는 승인된 외부 링크부터 제안하고 전화·주차·요금·운영시간을 임의로 생성하지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 시설 소개와 교실 예약 가능 여부를 구분했는가?

17장 동아리 목록과 동아리 신청 정보
카테고리 Category: 대상·활동 분야 등 프로그램의 분류
필터 Filter: 조건에 맞는 프로그램만 골라 보기
정렬 Sort: 마감일 등 기준으로 목록 순서를 바꾸기
정원 Capacity: 학교가 정한 참가 가능 인원

남해고등학교 홈페이지 작업이야. 프로그램 카드와 상세 화면에 대상·활동 내용·접수 기간·운영 일정·정원·준비물을 나눠 줘. 카테고리, 대상 칩 필터와 마감일 정렬을 연결하고 결과 없음·초기화를 제공해. 정원과 잔여 인원, 접수 마감과 참가 확정을 구분해. 선착순·추첨·승인 기준은 임의로 만들지 마. 일정은 모바일 목록 보기로도 제공해. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 조건을 바꾸거나 초기화해도 올바른 목록이 보이는가?

18장 공지·갤러리·자주 묻는 질문
게시판 Board: 공지의 목록과 상세 글을 관리하는 구조
썸네일 Thumbnail: 사진 목록에서 보이는 작은 대표 이미지
아코디언 Accordion: 질문 제목을 눌러 답을 펼치고 접는 구성

남해고등학교 홈페이지 작업이야. 공지 목록·상세에 제목·게시일·검색·상단 고정·페이지네이션을 만들어 줘. 활동 갤러리는 허락받은 사진만 썸네일로 쓰고 상세에서는 원본 비율과 적절한 대체 텍스트를 유지해. FAQ는 키보드로 여닫는 아코디언으로 구성해. 실제 학생 사진·이름·연락처를 임의로 가져오지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 지난 공지와 사진의 공개 범위를 확인했는가?

19장 신청폼과 시설 예약 시제품
필드 Field: 대상·시간처럼 이름을 붙인 정보 항목
유효성 검사: 필수 항목 누락·형식 오류를 확인하는 처리
시간 슬롯 Slot: 시설을 선택할 수 있도록 나눈 시간 단위
승인 대기: 담당자가 검토하기 전의 신청 상태

남해고등학교 홈페이지 작업이야. 빈 신청폼과 시설·시간 선택·검토 화면을 시제품으로 만들어 줘. 입력 필드와 필수·선택, 레이블과 오류 안내를 연결해. 시간 슬롯·승인 방식·취소 정책은 학교 확인 항목으로 남겨. 가상 데이터로 신청·승인 대기를 구분하고 동일 시간 중복과 동시 신청은 서버·DB 검토가 필요하다고 표시해. 실제 제출은 전송 없이 시연 완료로 끝내. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 시연 결과를 실제 신청·예약으로 오해하지 않는가?

20장 관리자 화면과 데이터 구조
CMS: 공지·프로그램 등 내용을 관리하는 시스템
데이터베이스 DB: 공지·신청 등 구조화된 자료의 저장소
API: 화면이 서버와 요청·응답을 주고받는 연결 규칙
임시 저장 Draft: 아직 공개하지 않은 편집 상태

남해고등학교 홈페이지 작업이야. CMS 시제품에서 공지 작성, 임시 저장, 미리보기, 게시 상태를 나눠 줘. 공지 한 건의 필드와 레코드를 예로 들어 프런트엔드·백엔드·DB·API가 하는 일을 설명해. CRUD 작업을 가상 데이터로만 시연하고 운영 DB 생성·이관·삭제는 하지 마. 브라우저 localStorage를 여러 기기에서 공유되는 운영 저장소처럼 설명하지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 저장·게시·배포가 서로 다른 처리임을 구분했는가?

21장 권한과 개인정보 보호
인증 Authentication: 접속한 사람이 누구인지 확인
인가 Authorization: 그 작업을 할 권한이 있는지 확인
역할 Role: 공지 담당·신청 담당처럼 권한을 묶은 구분
보유 기간: 학교가 목적과 기준에 따라 정한 정보 보관 기간

남해고등학교 홈페이지 작업이야. 공지 담당과 신청 정보 담당의 역할별 권한 표를 만들어 줘. 인증과 인가를 구별하고 서버가 매 요청의 권한을 확인하도록 운영 설계 항목을 적어. 실제 인증은 만들지 말고 가상 역할 화면만 시연해. 공개 필드와 비공개 신청 필드를 분리하고 수집 목적·항목·보유 기간·삭제·백업은 학교 검토 항목으로 남겨. 비밀번호·토큰·실제 개인정보는 공개 자료에 넣지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 공개 페이지·파일·API에 신청자 정보가 없는가?

22장 모바일 대응과 최적화
반응형 Responsive: 화면 폭에 맞춰 배치를 바꾸는 설계
최적화 Optimization: 동작을 유지하며 속도·용량 등을 개선하는 일
이미지 압축: 필요한 화질을 유지하며 파일 용량 줄이기
지연 로딩 Lazy loading: 바로 필요하지 않은 자원을 나중에 불러오기

남해고등학교 홈페이지 작업이야. 휴대폰에서 메뉴·프로그램·시설·공지 화면을 확인해. 가로 넘침과 긴 제목을 먼저 고친 뒤 사진 크기·용량과 첫 화면 로딩을 측정해 최적화해 줘. 화면에 맞는 이미지 크기와 압축, 화면 아래 사진 지연 로딩을 검토하되 첫 핵심 이미지까지 무조건 늦추지 마. 같은 조건의 수정 전후 결과와 회귀 확인을 보고해. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 같은 조건에서 개선을 확인하고 화면·동작을 유지했는가?

23장 미리보기·빌드·배포
미리보기 Preview: 변경한 결과를 확인하는 화면이나 환경
빌드 Build: 소스를 배포용 결과물로 만드는 과정
배포 Deploy: 확인한 결과물을 서비스 환경에 반영하기
도메인 Domain: 홈페이지 주소에 사용하는 이름

남해고등학교 홈페이지 작업이야. 로컬 미리보기에서 수정본을 확인한 뒤 빌드가 필요한지 알려 줘. 배포 계정·프로젝트·운영 또는 미리보기 환경·업로드 파일을 먼저 보여 줘. 정적 파일 직접 업로드라면 루트 index.html과 이미지 경로를 확인하고 .env·인증 파일·개인 문서를 제외해. 승인된 실습 공간에만 배포하고 실제 공개 주소에서 최신 화면을 확인해. 도메인 구매나 유료 가입은 하지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 승인한 주소에서 다른 기기로도 최신 화면이 열리는가?

24장 오류 수정과 회귀 검수
캐시 Cache: 전에 받은 파일을 다시 쓰는 임시 저장
콘솔 Console: 코드의 메시지와 오류를 확인하는 도구
회귀 Regression: 수정 뒤 기존 기능이 다시 깨지는 현상

남해고등학교 홈페이지 작업이야. [발생 단계]에서 [기대 결과] 대신 [실제 결과]가 나와. 비밀정보를 가린 오류는 [내용]이야. 주소·프로젝트·배포 파일·이미지 경로부터 비교하고 캐시·콘솔·네트워크 응답을 확인해. 최소 범위로 수정하고 메뉴, 칩 선택, Select, 모바일, 사진 경로, 키보드 포커스를 회귀 체크리스트로 검수해. 전체 캐시 해제·데이터 삭제·사이트 재작성을 임의로 하지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 통과·실패·미확인과 변경 파일을 구분해 보고하는가?

25장 인수인계와 다음 진행
README: 파일 역할·실행·배포 방법을 적은 안내 문서
백업 Backup: 복구를 위해 따로 보관하는 사본
롤백 Rollback: 문제가 생겼을 때 이전 정상 배포로 되돌리기

남해고등학교 홈페이지 작업이야. README에 메뉴 구조, 파일 역할, 실행·빌드·배포 방법, 공개 주소, 실제 동작과 시제품 기능을 구분해 적어 줘. 수정 이력, 백업 위치·복구 방법과 이전 배포 롤백 방법을 남겨. 화면 롤백과 DB 복구를 구별해. 완료·진행 중·확인 필요를 보고하고 다음 진행 범위와 운영 전 승인 항목을 제안해. 비밀번호·토큰·실제 개인정보는 문서에 남기지 마. 교육용 실습 사이트라고 표시해. 운영 정보는 제공 자료만 쓰고, 모르는 값은 “운영자료 확인 필요”로 남겨. 실제 접수·예약·개인정보 저장은 연결하지 마. 요청 범위 밖의 파일과 학교 운영 사이트는 유지해. 변경 파일과 확인 결과를 알려 주고, 외부 공개 전 확인을 받아 줘.

확인: 다음 담당자가 구조와 미완료 작업을 이해하는가?