책장 — 우리 학교 전공서적 장터

비교가 전부인 거래를, 비교할 수 있게 만든 장터입니다. 카드 격자가 아니라 정렬선을 가진 목록이라 자릿수가 다른 가격이 1의 자리에서 맞춰지고, 담은 책의 한 학기 절약액이 아래 원장에 쌓입니다.

Quick Start

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

서버에 올릴 때는 폴더째 업로드하면 됩니다. S3 · CloudFront · Netlify · Vercel · GitHub Pages · nginx 어디든 정적 호스팅이면 그대로 뜹니다. 서비스 워커와 PWA 매니페스트는 http(s) 에서만 켜지므로, 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.

Folder Structure

stu-03-textbook-market/
├── index.html              장터 첫 화면 — 검색 · 학과 필터 · 최근 올라온 책 · 원장
├── pages/                  app/(목록 · 상세 · 등록 · 담은 책) · docs/(안전 거래 · FAQ)
│                           · legal/(방침 · 약관) · system/(404 · 오프라인)
├── styles/                 tokens · base · components · sections · theme (순서 고정)
├── scripts/                theme-init.js · main.js + logic/ledger.js(DOM 을 모르는 순수 계산)
├── assets/                 images · icons · fonts · data
├── contract/               백엔드 이관 계약 — 스키마 · 엔드포인트 · 컴포넌트 매핑
├── manifest.webmanifest    PWA
└── sw.js                   오프라인 캐시

스타일시트는 읽는 순서가 고정이고 @layer base, components, utilities, theme 로 층이 선언되어 있습니다. 그래서 theme.css 가 언제나 마지막에 이깁니다.

쪽마다 따로 붙는 스크립트는 없습니다. 열두 쪽 전부가 theme-init.js · logic/ledger.js · main.js 세 개만 읽습니다.

Customize

Brand colors

styles/tokens.css 의 :root 에서 아래 다섯을 덮어쓰는 것으로 시작하세요.

나머지 색은 전부 여기서 color-mix() 로 파생됩니다. 컴포넌트 안에 색값을 직접 적지 마세요 — 다크 모드와 대비 검사가 토큰을 기준으로 돌아갑니다. styles/theme.css 상단에 이 템플릿의 팔레트와 대비 실측표가 있으니, 색을 바꾸면 그 수치를 다시 재세요. 본문 4.5:1, 큰 글자 3:1 이 기준입니다.

Fonts

서체 파일은 전부 assets/fonts/ 안에 있고 외부 CDN 을 호출하지 않습니다. 선언은 assets/fonts/fonts.css 에 있습니다.

가격 · 정가 · 할인율 · 절약액 · ISBN 은 DM Sans 로 그립니다. 자릿수 폭이 같은 숫자(tabular figure) 를 가진 서체라 1의 자리가 세로로 한 줄에 섭니다. 이 서체를 바꾸실 때는 같은 성질을 가진 것으로 고르세요. 그러지 않으면 목록의 가격 비교가 무너집니다.

한글은 사용자 기기의 시스템 고딕으로 그립니다. 이유는 fonts.css 머리말에 적어 두었습니다.

Unique design

styles/theme.css 가 이 템플릿의 개성입니다. 활자 단계 · 형태 · 여백의 박자 · 레이아웃 골격 · 시그니처 인터랙션이 모두 여기 있고, 파일 안에 왜 그 값인지가 주석으로 적혀 있습니다. 공용 컴포넌트를 건드리지 않고 이 파일만 고쳐도 인상이 바뀝니다.

Data

책 목록의 각 줄은 정적 마크업입니다. 같은 내용의 사본이 assets/data/books.json 에 있으니 데이터를 바꾸실 때는 두 곳을 함께 고치세요. 백엔드를 붙일 때 정적 줄은 버립니다 (contract/README.md).

절약액 계산은 scripts/logic/ledger.js 한 파일에 모여 있습니다. DOM 을 모르는 순수 모듈이라 Node 에서 그대로 돌려 볼 수 있습니다.

Pages

Browser Support

Chrome · Edge · Safari · Firefox 최신 2개 버전. iOS Safari 16 이상.

이 템플릿이 기대는 것은 이렇습니다 — @layer 캐스케이드 레이어, color-mix(), padding-inline 같은 논리 속성, text-wrap, 접히는 절의 grid-template-rows: 0fr → 1fr 전환, 모달 뒷면(::backdrop)의 backdrop-filter, 그리고 상세 모달의 <dialog> + showModal().

상단 바는 일부러 불투명합니다. 촘촘한 목록이 아래로 지나갈 때 반투명 띠가 번지면 훑어 읽기가 끊깁니다.

color-mix() 를 모르는 브라우저에서는 색이 조금 밋밋해지고 몇몇 상태 표시가 덜 붙을 뿐, 목록과 가격은 그대로 읽힙니다. <dialog> 를 지원하지 않으면 상세 모달이 열리지 않는데, 서명 · 저자 · 정가 · 판매가 · 할인율 · 상태는 목록 줄에 이미 다 나와 있어 거래 판단에는 지장이 없습니다.

자바스크립트를 꺼도 목록과 가격은 그대로 읽힙니다 — 값이 정적 마크업에 들어 있고, 스크립트가 맡은 것은 검색 · 학과 필터 · 상세 모달 · 원장 누적입니다.

Accessibility

• 색 대비 — 본문 4.5:1 이상, 큰 글자 3:1 이상. 라이트·다크 양쪽에서 쟀습니다 (WCAG 2.2 AA)
• 다크 모드는 OS 설정을 따르고, 헤더의 전환 단추로 덮어쓸 수 있습니다. 선택은 저장됩니다
• 상태를 색만으로 전달하지 않습니다 — 글자나 기호가 늘 함께 붙습니다
• 터치 타깃 44×44px 이상
• 키보드 — Tab 순서, 상세 모달의 포커스 트랩과 Esc, 본문 건너뛰기 링크
• prefers-reduced-motion · prefers-reduced-data · prefers-contrast: more 대응
• 시맨틱 랜드마크와 ARIA 레이블
• 모든 이미지에 alt 와 명시적 width/height (레이아웃 이동 0)

이 템플릿이 하지 않는 것

• 등록 양식은 전송하지 않습니다. 서버가 없는 정적판이라 입력값 검증까지만 합니다. 붙이는 방법은 contract/endpoints.json 에 있습니다
• 원장은 서버로 가지 않습니다. 담은 책과 절약액은 이 브라우저의 localStorage 안에만 남습니다. 기기를 바꾸면 따라오지 않습니다
• 결제도 계정도 없습니다. 거래는 화면 밖에서, 판매자가 적어 둔 연락 수단으로 합니다

Credits / License

서체와 이미지의 출처·라이선스는 CREDITS.md, 템플릿 자체의 이용 범위는 LICENSE.md 를 보세요.

등장하는 책·판매자·학과·연락처는 전부 예시로 지어낸 것입니다. 배포 전에 실제 값으로 바꿔 주세요.

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

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

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

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

Built with Sogorox Factory