Loading...
Back to TemplatesPortfolio
Portfolio
UI Skeleton
정수아 작업 기록 — AI 협업 증명 포트폴리오
AI가 쓴 줄과 제가 고친 줄을 나눠서 적어 두었습니다
0.0/0 ratings
S
Authored by Sogorox LabsTags
#ui-skeleton#template#developer portfolio template
7Downloads
33Views
1
Select a Plan
Select a plan on the left to review order details and complete your purchase on the right.
Selected
Free
$0
Free to use. Footer credit link required.
Free to use. Footer credit link required.
Community support
2
Order Summary
Selected Item
Free
$0
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
AI 역량 증명 인터랙티브 포트폴리오
AI 역량 증명 인터랙티브 포트폴리오
Quick Start
index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다 —
Node 도 npm 도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.
서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는
http(s) 에서만 켜지므로, 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.
Folder Structure
stu-01-ai-portfolio/
├── 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/case.html | 작업 상세 여섯 건. 프롬프트 원문 · AI 출력 · 고친 것이 3단으로 |
pages/about.html | 어떻게 배웠는가. 스물두 달의 기록과 접은 작업 둘 |
pages/contact.html | 연락과 자료 |
pages/glossary.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> + showModal() | 작업 상세 모달 (index.html) | 표의 ‘열기’ 가 pages/work/case.html 로 이동합니다. 같은 내용이 정적으로 있습니다 |
position: sticky | 넓은 화면의 왼쪽 채점 영역 색인 | 색인이 본문 위에 그냥 서 있습니다 |
IntersectionObserver | 진입 모션 · 색인의 현재 위치 표시 | 모든 요소가 처음부터 보입니다 |
@layer | CSS 우선순위 (tokens → theme) | 미지원 브라우저에서는 선언 순서를 따릅니다 |
논리 속성 (inline-size · border-block-end) | 전체 | — |
clamp() 유동 타이포 | 제목 · 본문 · 여백 | — |
navigator.clipboard | 프롬프트 복사 | ‘글자를 직접 선택해 주세요’ 안내가 나옵니다 |
| Service Worker | 오프라인 열람 | 온라인에서만 열립니다. file:// 에서는 아예 등록하지 않습니다 |
| WebP | 도판 한 칸 | — |
prefers-color-scheme 는 쓰지 않습니다 | — | 지면 기본값이 다크이고 라이트는 사용자가 고를 때만 켜집니다 |
컨테이너 쿼리 · animation-timeline · popover · CSS 네이티브 중첩 ·
scripts/modules/ · 글래스모피즘(backdrop-filter)은 쓰지 않았습니다.
공용 토큰 파일(styles/tokens.css)이 파생 상태색에 color-mix() 를 쓰지만
이 템플릿의 디자인은 그 값에 기대지 않습니다.
색 모드: 양쪽 — 기본은 다크이고 푸터의 ‘화면 밝게’ 로 라이트로 바꿉니다. 선택은 이 기기에 저장됩니다. OS 설정으로는 바뀌지 않습니다.
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 를 썼습니다. 코드와 카피는 사람이 검수했습니다.