Free: 작품대장 — 졸업 전시 등록 대장 | Sogorox

Back to TemplatesGraduate Gallery

Graduate Gallery

UI Skeleton

작품대장 — 졸업 전시 등록 대장

Name: 작품대장 — 졸업 전시 등록 대장
Brand: Sogorox
Availability: InStock

서림대학교 디자인대학 졸업 작품 등록 아카이브 — 스물네 점의 실치수를 축척 그대로 옮겨 적은 대장

0.0/0 ratings

Authored by Sogorox Labs

Live Preview

Select a Plan

Select a plan on the left to review order details and complete your purchase on the right.

Selected

Free

Free to use. Footer credit link required.

Community support

Order Summary

Selected Item

Free

Free to use. Footer credit link required.

Subtotal$0

Total$0

Free During Beta · Attribution Required

Footer credit preview

Built with Sogorox

This link will appear in your site footer. Remove with Pro license.

Readme

졸업 전시회 온라인 갤러리

Quick Start

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

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

Folder Structure

stu-06-graduation-gallery/
├── index.html              첫 화면
├── pages/                  나머지 모든 쪽
├── styles/                 tokens · base · components · sections · theme (순서 고정)
├── scripts/                main.js + logic/(순수 계산 · DOM 을 모른다)
├── assets/                 images · icons · fonts · data
├── contract/               백엔드 이관 계약 — 스키마 · 엔드포인트 · 컴포넌트 매핑
├── manifest.webmanifest    PWA
└── sw.js                   오프라인 캐시

Customize

Brand colors

styles/tokens.css 의 CSS 변수만 바꾸면 전체 색이 따라옵니다. styles/theme.css 상단 §1 에 이 템플릿의 팔레트와 대비 실측표가 있습니다. 색을 바꿀 때는 그 표의 수치를 다시 재세요 — 본문 4.5:1, 큰 글자 3:1 이 기준입니다.

Fonts

assets/fonts/fonts.css 에서 바꿉니다. 서체 파일은 전부 이 폴더에 들어 있고 외부 CDN 을 호출하지 않습니다.

Unique design

styles/theme.css 가 이 템플릿의 개성입니다. 레이아웃 골격 · 형태 · 밀도 · 시그니처 인터랙션이 모두 여기 있고, 파일 안에 왜 그 값인지가 주석으로 적혀 있습니다.

Pages

쪽	용도
`index.html`	작품 등록 대장 — 등록번호·출품자·매체로 훑는 첫 화면
`pages/work/index.html`	등록 색인 — 전체 목록을 분야·연도로 좁혀 본다
`pages/work/artwork.html`	작품 낱장 — 등록번호 한 건의 도판과 작업 노트
`pages/work/artist.html`	출품자 명부 — 사람 기준으로 다시 세운 목록
`pages/about.html`	전시 개요 — 회차·기간·장소와 관람 안내
`pages/docs/glossary.html`	용어 — 대장에 쓰인 매체·기법 낱말 풀이
`pages/docs/rights.html`	저작권 안내 — 도판 사용 범위와 문의 절차
`pages/legal/privacy.html`	개인정보 처리방침
`pages/legal/terms.html`	이용약관
`pages/system/404.html`	없는 쪽
`pages/system/offline.html`	연결 없음 (서비스 워커 대체 화면)

Browser Support

Chrome · Edge · Safari · Firefox 최신 2개 버전.

이 템플릿이 의존하는 것 (실측 — 실제로 쓰는 것만 적었습니다):

기능	쓰는 자리	하한	없으면
`<dialog>`	작품 낱장 도판 확대	Chrome 37 · Safari 15.4 · Firefox 98	도판이 제자리에서 커집니다
`popover` 속성	등록 색인의 좁히기 판	Chrome 114 · Safari 17 · Firefox 125	판이 항상 펼쳐진 채로 섭니다
`:has()`	고른 항목에 따른 줄 강조	Chrome 105 · Safari 15.4 · Firefox 121	강조만 빠지고 값은 그대로입니다
`color-mix()`	도판 위 겹침 색	Chrome 111 · Safari 16.2 · Firefox 113	사다리의 고정값으로 떨어집니다
`@layer`	공용 CSS 와 이 지면의 우선순위	Chrome 99 · Safari 15.4 · Firefox 97	필수입니다
`aspect-ratio`	도판 자리 예약 (CLS 0)	Chrome 88 · Safari 15 · Firefox 89	도판이 뜰 때 줄이 밀립니다
`text-wrap`	표제 줄바꿈 다듬기	Chrome 114 · Safari 17.4 · Firefox 121	줄바꿈 자리만 달라집니다
`100svh`	모바일 주소창 아래 높이	Chrome 108 · Safari 15.4 · Firefox 101	`vh` 로 떨어집니다
IntersectionObserver	진입 모션·색인 따라가기	전 브라우저 (IE 제외)	모션 없이 바로 보입니다

컨테이너 쿼리(@container)와 animation-timeline 은 쓰지 않습니다.

색 모드: 양쪽 (라이트·다크. prefers-color-scheme 을 따르고 밝기 단추로 덮어씁니다)

Accessibility

색 대비 — 본문 4.5:1 이상, 큰 글자 3:1 이상. 라이트와 다크 양쪽에서 쟀습니다 (실측)
터치 타깃 44×44px 이상, 인접 컨트롤은 간격까지 포함해 판정
키보드 — Tab 순서, 모달 포커스 트랩, 본문 건너뛰기 링크
prefers-reduced-motion · prefers-reduced-transparency · prefers-reduced-data 대응
모든 이미지에 alt 와 명시적 width/height (레이아웃 이동 0)

Credits / License

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

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

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

파일	내용
`LICENSE.md`	pro 에디션 이용 약관 — 재배포·재판매 범위가 여기 있습니다
`CREDITS.md`	서체와 이미지의 출처·라이선스
`CHANGELOG.md`	이 템플릿의 변경 이력
`.cursorrules`	AI 편집기(Cursor · Claude Code · Cline)가 읽는 편집 규칙 — 디자인 토큰만 쓰기, BEM 이름, WCAG 2.2 AA 기준을 어시스턴트가 따릅니다
`.provenance.json`	빌드 출처와 지문 (저작권 증빙용. 지워도 템플릿은 그대로 동작합니다)
`assets/preview.webp`	맨 위의 첫 화면 캡처

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

Built with Sogorox Factory