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: 완료·진행 중·막힌 일을 구분해 알리는 것
함께 알아둘 말
요구사항: 만들거나 바꿔야 할 내용을 적은 조건
수정 범위 Scope: 이번에 바꿀 화면·메뉴·파일의 경계
완료 기준: 담당자가 결과를 받아들일 구체적 확인 조건
HTML / CSS / JavaScript: 웹 문서 구조 / 표현 규칙 / 동작을 만드는 언어

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


5장 버전 번호와 알파·베타·RC
버전 번호 1.2.3: 팀 규칙 예: 큰 변경·기능 추가·오류 수정
알파 Alpha / 베타 Beta: 초기 내부 시험 / 기능을 갖춘 넓은 시험 단계
RC / 정식 Release: 출시 후보 / 검수·승인 후 공개하는 기준 버전
커밋 Commit / 태그 Tag: 변경 기록 / 특정 버전에 붙이는 기준 이름
함께 알아둘 말
MAJOR / MINOR / PATCH: SemVer의 호환 불가 변경 / 호환 기능 추가 / 호환 오류 수정 구분
프리릴리스 Prerelease: 1.0.0-rc.1처럼 정식판 전 단계임을 붙인 식별자
릴리스 노트: 이용자에게 변경점·주의점·알려진 문제를 안내하는 기록

6장 프로젝트 폴더와 파일 관리
프로젝트 루트 Root: 한 홈페이지 작업의 기준이 되는 폴더
src/ · public/: 소스 코드 / 공개 파일. 프로젝트 방식에 따라 다름
assets/ · docs/: 그림 등 자료 / 기획·운영·인수인계 문서
dist/ · 별도 백업: 빌드 결과 / 프로젝트 밖에 보관하는 복구 사본
함께 알아둘 말
소스 Source: 직접 수정하는 기준 코드와 자료
산출물 Output: 빌드·내보내기로 만들어진 결과 파일
.gitignore: Git이 새로 추적하지 않을 파일·폴더 규칙
환경 파일 .env: 서비스 설정·비밀값을 담을 수 있어 공개에서 제외할 파일

7장 ChatGPT Plus 사용량·토큰 관리
Plus 구독: 모델명이 아닌 이용 요금제. API 비용과 별도로 봅니다
토큰 Token: 요청·파일·대화 이력·응답을 처리하는 정보 단위
문맥 Context: 한 번에 참고하는 정보. 남은 구독 한도와 구별
사용량·회복 시각: 계정 화면의 한도와 리셋 시각을 확인하는 기준
함께 알아둘 말
컨텍스트 윈도: 한 번의 처리에서 참고할 수 있는 문맥 용량
사용량 한도: 요금제·모델·도구 등에 따라 적용되는 이용 제한
리셋 Reset: 표시된 주기에 따라 사용량 제한이 회복되는 것
인수인계 요약: 새 대화에 넘길 목적·제약·현황·다음 작업의 핵심 기록

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


9장 메뉴와 페이지 구조
정보 구조 IA: 센터 정보를 목적별로 묶는 설계
사이트맵 Sitemap: 메뉴와 하위 페이지를 정리한 지도
GNB: 사이트 전체에서 쓰는 주요 메뉴 묶음
섹션 Section: 한 페이지에서 주제별로 나눈 구역
함께 알아둘 말
헤더 Header: 센터 이름과 주요 메뉴가 있는 상단 영역
푸터 Footer: 학교 정보와 보조 링크가 있는 하단 영역
브레드크럼: 홈부터 현재 페이지까지 보여 주는 위치 안내

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


11장 “고유의 색을 넣어줘”
브랜드 컬러: 학교의 정체성을 나타내는 기준 색
컬러 팔레트: 화면에서 함께 사용할 색의 조합
포인트 컬러: 중요 버튼과 강조에 제한해서 쓰는 색
대비 Contrast: 글자와 배경 등을 구별하는 밝기·색 차이
함께 알아둘 말
디자인 토큰: 색·간격·글자 크기 같은 공통 스타일 값의 이름

12장 배치·여백·글자 크기
그리드 Grid: 카드를 행과 열로 정돈하는 배치
패딩 Padding: 카드 테두리와 내용 사이의 안쪽 여백
갭 Gap: 카드나 버튼 등 항목 사이의 간격
타이포그래피: 제목·본문·보조 글자의 크기와 굵기 체계
함께 알아둘 말
마진 Margin: 요소나 구역의 바깥쪽 여백
행간 Line height: 글의 줄과 줄 사이 높이

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


14장 드롭다운·단추·선택 메뉴
드롭다운 Dropdown: 눌러서 아래로 펼쳐 보이는 목록 형태
선택 메뉴 Select: 항목 중 값을 고르는 입력 요소
단추 메뉴 Menu button: 버튼을 눌러 동작·이동 목록을 여는 구성
탭 Tab: 같은 영역에서 관련 내용을 바꿔 보는 구성
함께 알아둘 말
레이블 Label: 입력칸이 무엇인지 설명하는 연결된 이름
세그먼트 선택: 소수의 선택값을 붙은 단추 형태로 나란히 보여 주는 구성

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


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

17장 동아리 목록과 동아리 신청 정보
카테고리 Category: 대상·활동 분야 등 프로그램의 분류
필터 Filter: 조건에 맞는 프로그램만 골라 보기
정렬 Sort: 마감일 등 기준으로 목록 순서를 바꾸기
정원 Capacity: 학교가 정한 참가 가능 인원
함께 알아둘 말
접수 상태: 접수 예정·모집 중·마감 등 현재 단계
캘린더 Calendar: 프로그램 운영 일정을 날짜별로 보여 주는 화면

18장 공지·갤러리·자주 묻는 질문
게시판 Board: 공지의 목록과 상세 글을 관리하는 구조
썸네일 Thumbnail: 사진 목록에서 보이는 작은 대표 이미지
아코디언 Accordion: 질문 제목을 눌러 답을 펼치고 접는 구성
함께 알아둘 말
페이지네이션: 글 목록을 여러 페이지로 나눠 보여 주기
대체 텍스트 Alt: 이미지가 전달하는 내용을 설명하는 글

19장 신청폼과 시설 예약 시제품
필드 Field: 대상·시간처럼 이름을 붙인 정보 항목
유효성 검사: 필수 항목 누락·형식 오류를 확인하는 처리
시간 슬롯 Slot: 시설을 선택할 수 있도록 나눈 시간 단위
승인 대기: 담당자가 검토하기 전의 신청 상태
함께 알아둘 말
중복 검사: 같은 시설·시간의 이용이 겹치는지 확인
동시성: 여러 요청이 겹쳐 처리되는 상황
취소 정책: 누가 언제 어떻게 취소할지 정한 학교 운영 기준

20장 관리자 화면과 데이터 구조
CMS: 공지·프로그램 등 내용을 관리하는 시스템
데이터베이스 DB: 공지·신청 등 구조화된 자료의 저장소
API: 화면이 서버와 요청·응답을 주고받는 연결 규칙
임시 저장 Draft: 아직 공개하지 않은 편집 상태
함께 알아둘 말
프런트엔드: 사용자가 보고 조작하는 화면 부분
백엔드: 검증·저장·권한 등을 처리하는 서버 부분
레코드 Record: 공지 한 건처럼 묶인 데이터
CRUD: 만들기·읽기·수정·삭제의 기본 처리
게시 Publish: 검토한 콘텐츠를 이용자 화면에 공개하는 처리

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


22장 모바일 대응과 최적화
반응형 Responsive: 화면 폭에 맞춰 배치를 바꾸는 설계
최적화 Optimization: 동작을 유지하며 속도·용량 등을 개선하는 일
이미지 압축: 필요한 화질을 유지하며 파일 용량 줄이기
지연 로딩 Lazy loading: 바로 필요하지 않은 자원을 나중에 불러오기
함께 알아둘 말
뷰포트 Viewport: 브라우저에서 내용을 보여 주는 영역
브레이크포인트: 화면 배치 규칙을 바꾸는 조건의 경계

23장 미리보기·빌드·배포
미리보기 Preview: 변경한 결과를 확인하는 화면이나 환경
빌드 Build: 소스를 배포용 결과물로 만드는 과정
배포 Deploy: 확인한 결과물을 서비스 환경에 반영하기
도메인 Domain: 홈페이지 주소에 사용하는 이름
함께 알아둘 말
호스팅 Hosting: 파일이나 앱을 인터넷에서 제공하는 서비스
운영 Production: 실제 이용자에게 제공되는 서비스 환경

24장 오류 수정과 회귀 검수
캐시 Cache: 전에 받은 파일을 다시 쓰는 임시 저장
콘솔 Console: 코드의 메시지와 오류를 확인하는 도구
회귀 Regression: 수정 뒤 기존 기능이 다시 깨지는 현상
함께 알아둘 말
404: 요청한 자원을 찾지 못했음을 나타내는 응답 코드
체크리스트: 결과를 통과·실패·미확인으로 점검하는 목록

25장 인수인계와 다음 진행
README: 파일 역할·실행·배포 방법을 적은 안내 문서
백업 Backup: 복구를 위해 따로 보관하는 사본
롤백 Rollback: 문제가 생겼을 때 이전 정상 배포로 되돌리기
함께 알아둘 말
수정 이력 Changelog: 무엇을 언제 왜 바꿨는지 남기는 기록