한국대학교 중고장터 · 캠퍼스 중고 거래 보드

같은 학교 학생끼리 교재와 생활용품을 주고받는 게시판 한 벌. 분류와 학과, 예산, 검색어로 쪽지를 좁히면 남은 묶음의 값 범위와 평균 할인율이 그 자리에서 다시 계산되고, 쪽지마다 정가보다 얼마나 싼지가 값 옆에 붙어 있습니다.

Quick Start

index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다. Node 도 npm 도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.

서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는 http(s) 에서만 켜지므로 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.

Folder Structure

stu-08-secondhand-board/
├── index.html                  판 (표지 · 거르개 · 쪽지 25장 · 등록 안내 · 거래 수칙)
├── pages/
│   ├── items.html              전체 목록 표
│   ├── register.html           등록 항목 사전과 사진 규격
│   ├── safety.html             거래 수칙과 금지 품목
│   ├── legal/                  개인정보 · 이용 조건
│   └── system/                 404 · 오프라인
├── styles/
│   ├── tokens.css              디자인 토큰 + 다크 모드   ← 브랜드 색은 여기
│   ├── base.css                리셋 · 조판 · 레이아웃 기본
│   ├── components.css          버튼 · 폼 · 칩 · 대화상자 · 모션
│   ├── sections.css            빈 상태 · 인쇄
│   └── theme.css               ★ 이 템플릿만의 디자인
├── scripts/
│   ├── theme-init.js           첫 페인트 전 테마 확정
│   ├── logic/board.js          거르기 · 할인 계산 · 해시 (DOM 무관, Node 실행 가능)
│   └── main.js                 화면 배선
├── assets/
│   ├── images/                 사진 (.webp)
│   ├── icons/                  분류 그림과 PWA 아이콘
│   ├── fonts/                  woff2 3종 + fonts.css
│   └── data/items.json         쪽지 데이터 사본
├── contract/                   백엔드 이관 계약 4종
├── manifest.webmanifest        PWA 매니페스트
└── sw.js                       서비스 워커 (오프라인)

스타일시트는 순서가 고정돼 있고 CSS 레이어(base → components → utilities → theme) 를 쓰므로 theme.css 가 언제나 마지막에 이깁니다.

Customize

Brand colors

styles/theme.css 의 @layer theme 첫 블록에서 아래 다섯 개만 바꾸면 학교 색으로 갈아입습니다. 나머지 색은 전부 이 다섯 개의 잉크 단이라 따로 손댈 것이 없습니다.

--color-primary 인 주황 #FF6B35 는 글자를 얹을 수 없는 값입니다. 흰 글자로 2.84:1, 검은 글자로도 인지 대비가 모자랍니다. 그래서 이 색은 글자가 얹히지 않는 자리(압정 점, 고른 분류 탭의 밑줄, 예산 슬라이더)가 맡고, 채움 버튼은 같은 색상각을 두 단 내린 --color-cta #C2410C 에 흰 글자를 얹습니다(5.18:1). 학교 색으로 바꿀 때도 이 두 가지를 따로 잡으세요 — 진한 색이면 --color-cta 를 그 색 그대로 쓰면 됩니다.

Fonts

assets/fonts/fonts.css 에 woff2 세 개가 선언돼 있습니다. 패밀리를 바꾸려면 파일을 갈아 끼우고 styles/theme.css 의 --font-display · --font-body · --font-num 을 고칩니다. 한글은 사용자 기기의 시스템 고딕이 그립니다.

숫자 서체(--font-num)는 unicode-range 로 숫자와 부호만 그리게 좁혀 두었습니다. 고정폭이 한글에 걸리면 자간이 벌어지기 때문입니다.

쪽지 갈아 끼우기

index.html 안의 <script type="application/json" id="board-data"> 가 원본입니다. 화면의 쪽지 25장은 거기서 옮겨 적은 사본이고, 스크립트가 꺼져도 읽히도록 정적 HTML 로 박아 두었습니다. 항목의 뜻과 고를 수 있는 값은 pages/register.html 에 표로 있고, 기계가 읽을 형태는 contract/schema.json 에 있습니다.

Unique design

styles/theme.css 에 이 템플릿의 성격이 들어 있습니다. 반경 사다리(8 · 13 · 19 · 알약), 선 두께 사다리(1 · 2 · 3), 간격 리듬(8 · 12 · 20 · 24 · 92), 왼쪽 기둥 골격, 쪽지가 꽂이에 떨어져 앉는 연출이 전부 이 한 파일에 있습니다. 각 값이 왜 그 값인지는 파일 머리말과 블록 주석에 적어 두었습니다.

Pages

Browser Support

실측: Chromium 에서 320 · 390 · 640 · 768 · 960 · 1024 · 1280 · 1440 · 1920 · 2560px 열 폭으로 라이트와 다크 양쪽을 확인했습니다. 가로 넘침 0, 콘솔 오류 0 입니다.

하한: Chrome · Edge 121+, Firefox 121+, Safari 17+, iOS Safari 17+. 이 숫자는 아래 표의 기능별 하한을 합친 값이고, 낮은 판에서는 해당 줄만 조용히 빠집니다.

Internet Explorer 는 지원하지 않습니다.

Accessibility

• 본문 대비 4.5:1 이상, 큰 글자 3:1 이상을 라이트와 다크 양쪽에서 확인했습니다
• 모든 컨트롤이 키보드로 닿습니다. 대화상자는 네이티브 <dialog> 라 초점이 갇히고 Esc 로 닫히며, 닫히면 열었던 쪽지로 초점이 돌아갑니다
• 본문 건너뛰기 링크가 첫 탭에 잡힙니다
• 터치 대상 44×44px 이상, 나란히 붙는 컨트롤은 간격까지 함께 확보했습니다
• prefers-reduced-motion 에서 쪽지가 떨어져 앉는 연출이 꺼지고 그 자리에 바로 섭니다
• prefers-reduced-data 에서 웹폰트를 받지 않고 시스템 서체로 떨어집니다
• prefers-contrast: more 에서 틴트와 얕은 괘선을 걷고 선을 세웁니다
• 표는 <caption> 과 scope 를 갖고, 좁은 화면에서 제 컨테이너 안에서 가로로 굴립니다

Credits / License

서체와 그림의 출처는 CREDITS.md, 사용 조건은 LICENSE.md 에 있습니다. 화면의 학교명, 물품, 닉네임, 연락처는 모두 예시이며 실제 사람이나 상점을 가리키지 않습니다. 이메일 주소는 전부 example.com 을 씁니다.

이 템플릿의 일부는 AI 의 도움을 받아 만들었습니다.

이 압축 파일에 함께 들어온 것

템플릿 소스 외에 패키징 단계에서 넣은 파일입니다.

이 템플릿은 일부 과정에 AI 를 썼습니다. 코드와 카피는 사람이 검수했습니다.

Built with Sogorox Factory