지표 중심 마케터 미니멀 이력서 — 성과 결산 리포트

퍼포먼스 마케터가 매달 광고주에게 내는 결산 리포트의 어법으로 만든 1페이지 이력서입니다. 자기소개문이 아니라 표지 · 핵심 지표 · 캠페인 대장 · 판권 줄로 짜여 있고, 흑백과 회색만 씁니다.

이 템플릿의 중심에는 규칙이 하나 있습니다 — 근거를 갖춘 지표만 값이 오릅니다. 기준값 · 측정 기간 · 측정 도구 · 담당 범위 넷을 다 적은 지표만 표지에서 카운트업이 돌고, 하나라도 비면 값이 처음부터 그대로 섭니다.

Quick Start

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

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

Folder Structure

stu-02-metrics-resume/
├── index.html                  결산 표지 — 루트의 유일한 HTML
├── pages/
│   ├── work/index.html         캠페인 대장 12건 (표)
│   ├── work/case.html          캠페인 한 건 전문
│   ├── about.html              이력 · 학력 · 이수
│   ├── contact.html            연락 · 면접 준비 자료
│   ├── docs/glossary.html      용어 일곱 개
│   ├── legal/{privacy,terms}.html
│   └── system/{404,offline}.html
├── styles/
│   ├── tokens.css              디자인 토큰          ← 색을 바꾸는 곳
│   ├── base.css                리셋 · 조판 · 레이아웃 기본
│   ├── components.css          버튼 · 진입 모션
│   ├── sections.css            빈 상태 · 인쇄
│   └── theme.css               이 템플릿의 개성
├── scripts/
│   ├── main.js                 배선 (IIFE 하나)
│   └── logic/metric-claim.js   판정 규칙 — DOM 을 모른다
├── assets/
│   ├── images/                 사진 (.webp)
│   ├── fonts/                  자급 서체 (.woff2) + fonts.css
│   ├── icons/pwa/              앱 아이콘
│   └── data/resume.json        인라인 JSON 의 내려받기용 사본
├── contract/                   Next.js 이관 계약서 4종
├── manifest.webmanifest        PWA 매니페스트
└── sw.js                       서비스 워커 (오프라인)

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

Customize

Brand colors

styles/tokens.css 가 기본값을, styles/theme.css §1 이 이 템플릿의 색을 갖습니다. 흑백 아홉 값이 전부입니다.

색을 넣고 싶으면 --color-primary 하나만 바꾸십시오. 강조가 색이 아니라 크기와 굵기로 서 있기 때문에 나머지는 그대로 두어도 무너지지 않습니다.

Fonts

assets/fonts/fonts.css 에 두 서체가 자급으로 들어 있습니다 — 표제의 Playfair Display 와 본문·숫자의 Inter 입니다. 외부 CDN 을 호출하지 않습니다. 한글 글리프는 두 파일에 없습니다. 한글은 운영체제의 기본 고딕이 그리며, 그 폴백 순서는 theme.css §2 의 --font-ko-sans 에 적혀 있습니다.

prefers-reduced-data: reduce 를 켠 방문자에게는 서체를 내려보내지 않고 시스템 서체로 떨어집니다.

Unique design

styles/theme.css 가 이 템플릿의 정체입니다. 일곱 블록으로 나뉘어 있고, 바꿀 만한 곳은 아래 셋입니다.

데이터 바꾸기

값의 원본은 index.html 안의 <script type="application/json" id="resume-data"> 하나입니다. 화면의 표와 목록은 거기서 옮겨 적은 사본이므로, 값을 고칠 때는 두 곳을 함께 고치십시오. 같은 내용의 사본이 assets/data/resume.json 에도 있습니다. 형식은 contract/schema.json 에 적혀 있습니다.

지표를 다섯 개 이상 넣으면 표지에는 앞의 네 개만 섭니다. 지표 배열을 비우면 "핵심 지표를 아직 적지 않았습니다" 가 그 자리에 놓입니다.

Pages

이 템플릿이 실제로 하는 것

README 에 적은 것만 들어 있습니다. 없는 기능은 적지 않았습니다.

없는 것 — 다크 모드(흑백 미니멀 의도로 넣지 않았습니다), 문의 양식, 로그인, 차트·그래프.

Browser Support

text-wrap: pretty 와 animation-timeline 은 Firefox 에서 아직 동작하지 않지만, 없으면 기본 줄바꿈으로 떨어질 뿐 지면이 깨지지 않습니다.

Accessibility

• 색 대비 — 본문 21:1, 캡션 7.56:1. APCA(Lc) 로도 교차 검증했습니다
• 터치 타겟 44×44px 이상. 좁은 화면에서 내비 링크도 44px 로 커집니다
• Tab 순서가 문서 순서와 같고, 첫 Tab 에 "본문으로 건너뛰기" 가 나옵니다
• prefers-reduced-motion: reduce — 카운트업과 막대가 즉시 최종값이 됩니다
• 모든 이미지에 alt 와 명시적 width/height 가 있어 화면이 밀리지 않습니다
• 표는 <th scope> 와 <caption> 을 갖습니다

Credits / License

서체와 이미지의 출처는 CREDITS.md, 이용 범위는 LICENSE.md 에 있습니다. 표본 이름과 회사, 이메일(example.com)은 전부 가공입니다.

Built with Sogorox Factory

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

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

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