브이로그 포트폴리오 (면접용 단일 파일 HTML)
산출물은 index.html 하나입니다: 모든 이미지는 base64로 인코딩되어 내장되며, 더블 클릭으로 열 수 있고, 위챗/이메일로 면접관에게 바로 보낼 수 있습니다. 구조는 7개 섹션으로 고정되어 있으며, "생활 타임라인"으로 연결됩니다; 카피는 장점만 쓰고, 모든 숫자는 계정 메인 페이지와 일치해야 합니다.
사용 시점
- 사용자가 자신의 크리에이터 계정을 지원 자료로 만들고 싶을 때 (뉴미디어 / 콘텐츠 운영 / 브랜드 PR 직군)
- 사용자가 다른 크리에이터를 위해 동일한 페이지를 만들고 싶을 때 (페르소나, 데이터 변경, 디자인 재작성 불필요)
- 사용자가 이미 예전 버전의 포트폴리오를 가지고 있으며, 색상, 구조, 성적표를 업데이트해야 할 때
산출물 형태
portfolio/
├── index.html ← 유일한 산출물
├── data.json ← 데이터 소스 (노트, 분기별, 브랜드, 신원)
└── assets/ ← 커버 이미지 + 프로필 사진 (빌드 시 인라인됨)
7개 섹션 (번호 테마는 변경 가능, references/theming.md 참조):
| 섹션 | 내용 | 핵심 요구사항 |
|---|---|---|
| 12:00 오프닝 | 제목 + 소개 + 5개 데이터 바 | "내가 무엇을 만들었는지" 한 문장으로 요약 가능 |
| 12:15 작품 | TOP1 단일 분해 + TOP2–5 상시 표시 + TOP6–9 접힘 | 커버는 본인이 직접 출연한 원본 사진이어야 함 |
| 12:40 데이터 | 분기별 좋아요 곡선 + 공유율/저장율 비율 바 | 곡선 부드럽고, 그라데이션 영역 및 선 애니메이션 포함 |
| 13:00 경험 | 서사 + 2×2 성적표 + 팬 인구통계 + 요약 | 숫자는 3단계: 규모/폭발/상업화 |
| 13:20 방법 | 4가지 원칙, 각각 숫자 증거 포함 | 데이터가 없는 원칙은 쓰지 마세요 |
| 13:40 강점 | 4장의 능력 카드 (큰 숫자 + 태그 + 증거) | 강점이지 회고가 아닙니다, 문제와 계획은 절대 쓰지 마세요 |
| 14:00 소개 | 마무리 한 문장 + 사실표 (위치/학교/계정/이메일) | 면접관이 연락처를 쉽게 복사할 수 있도록 |
사전 의존성 (0단계, 데이터 수집 전 필수)
데이터 수집에는 샤오홍슈 CLI가 필요합니다. CLI가 이미 이 스킬에 내장되어 있습니다 (vendor/redbook/, 상류 MIT),
따라서 전체 스킬 디렉토리를 상대방에게 복사하기만 하면 되며, npm i -g가 필요하지 않습니다.
bash scripts/doctor.sh # 검사: node / CLI 출처 / 쿠키 / 로그인 상태
| 검사 항목 | 요구사항 | 불만족 시 |
|---|---|---|
| node | ≥ 22 | node 설치 후 다시 시도, 내장 복사본도 이걸로 실행 |
| CLI | 전역 redbook 또는 vendor/redbook/dist/cli.js 둘 중 하나 | vendor를 누락했거나 npm i -g @lucasygu/redbook 필요 |
| 로그인 상태 | ~/.redbook/cookies.json 유효 | bash scripts/redbook.sh auth save, 실패 시 data-collection 문서 끝의 CDP 방식 참조 |
모든 데이터 수집 명령은 런처 bash scripts/redbook.sh <서브명령>을 통해 실행합니다: 전역 버전을 우선 사용하고 (npm 업그레이드 가능),
없으면 내장 복사본으로 폴백하여 REDBOOK_COOKIE_FILE을 자동으로 설정합니다. 다른 사람의 머신에 redbook이 존재하지 않을 수 있습니다.
다른 사람에게 공유:
blogger-portfolio/디렉토리 전체를 패키징하면 됩니다 (vendor/포함, 약 1MB). 상대방이 직접 해야 할 일은 두 가지뿐: Node ≥22 설치, 자신의 샤오홍슈 계정으로 한 번 로그인. 용량을 줄이려고vendor/redbook/을 삭제하지 마세요 — 삭제하면 "먼저 npm 패키지를 설치해야 함"으로 퇴화됩니다. CLI 업그레이드:npm i -g @lucasygu/redbook@latest후 새dist/ node_modules/를vendor/redbook/에 동기화.
프로세스
1. 데이터 수집
공개 데이터는 내장된 샤오홍슈 CLI로 수집합니다 (노트 목록, 좋아요/저장/공유, TOP9 커버, 분기별 분포):
RB="bash scripts/redbook.sh"
$RB whoami # 먼저 로그인 상태 확인
$RB search "<계정 닉네임>" --json # 디지털 샤오홍슈 ID → userId + xsec_token 획득
$RB user-posts <userId> --xsec-token '<t>' --xsec-source pc_search --all --delay 3000 --json > posts.json
조회수, 팬 인구통계, 브랜드 수, 거래액 등은 사용자에게 직접 물어봐야 합니다.
전체 명령어, 중복 제거 및 집계 스크립트, 쿠키 만료 복구, 댓글 수집의 안티 봇 대응은
references/data-collection.md를 참조하세요. 수집은 반드시 직렬 + 3초 간격으로 진행하고, 댓글에서 CAPTCHA가 나타나면 즉시 중지하세요.
2. 페르소나 및 테마 설정
먼저 세 가지를 명확히 알아야 합니다: 계정 포지셔닝 (생활/홈/육아/반려동물/맛집 탐방…), 목표 직무, 본인 출연 여부.
그런 다음 references/theming.md에 따라 타임라인 은유, 색상 팔레트, 장식을 선택합니다.
기본값은 밝은 종이 느낌 (아이보리 #fbf6ee + 살구 오렌지 #d9744f); 생활 크리에이터는 항상 밝은 색상을 사용합니다.
3. data.json 작성
demo/data.json에서 복사하여 수정합니다 (demo/는 바로 빌드 가능한 예시: 가상 인물 + 플레이스홀더 커버):
{
"site": {"title","meta","name","tagline","handle","profile_url","collected_at","start","avatar"},
"hero": {"clock","h1","lead","roles"},
"ledger":[{"value","label","hl"}], // 5개, 첫 번째 hl:true
"facts": [{"k","v"}], // 소개 페이지 오른쪽 사실표 (위치/학교/계정/이메일)
"notes": [{"rank","title","date","like","collect","share","comment","url","brand","img"}],
"quarters": [["24Q3", 1, 260]], // [분기, 게시물 수, 좋아요 합계], 6–12개 모두 가능
"brands":[{"name","cat"}]
}
notes는 9개면 충분 (TOP1 + TOP2–5 + TOP6–9); img는 상대 경로, 빌드 시 자동으로 인라인.
숫자는 플랫폼 원래 표기 유지 ("7.6만"), 페이지의 toN/fmt가 통일 변환.
h1 및 lead에는 HTML 포함 가능 (<br>, <span class="mark">, <em>).
4. 빌드
python3 scripts/build.py --data portfolio/data.json --out portfolio/index.html
스크립트는 이미지 인라인, 플레이스홀더 채우기를 담당하며, 플레이스홀더가 모두 채워지지 않으면 오류와 함께 종료, 마지막에 수정해야 할 예시 카피 개수를 출력합니다.
5. 예시 카피 수정 (건너뛸 수 없음)
템플릿에는 완전한 "차량 침대 낮잠" 예시가 포함되어 있으며, 빌드 후 표시된 대로 하나씩 수정합니다:
<!--EDIT:works--> 작품 섹션 제목/소개 + TOP1 세 가지 분해
<!--EDIT:featured--> TOP1 하이라이트 카드 (서문 + 인기 이유)
<!--EDIT:datahead--> 데이터 섹션 제목 + 세 가지 비율 설명
<!--EDIT:experience--> 경험: 서사 + 성적표 + 팬 인구통계 + 요약
<!--EDIT:method--> 방법 네 가지
<!--EDIT:strengths--> 강점 네 가지
<!--EDIT:about--> 소개 + 사이드바 사실표
작문 규칙, 섹션 공식, 금지 목록, 각 카드가 어떤 면접 질문에 해당하는지는 references/copy-playbook.md를 참조하세요.
작성 전에 먼저 읽으세요, 그렇지 않으면 회고가 되기 쉽습니다.
순서 제안: 먼저 build, 그다음 HTML에서 카피 수정; 이후 data.json을 변경해야 하면 다시 빌드하면 수동 수정 내용이 덮어쓰기되니 주의하세요.
6. 검증
npm i playwright-core # 임시 디렉토리에 한 번 설치
node scripts/verify.js portfolio/index.html
세 가지 뷰포트 (1440 / 768 / 390) 각각 검사: 콘솔 오류, 표시된 이미지 로딩, 수평 오버플로, 스크롤 시 나타나는 애니메이션 완료, 곡선 생성, 비율 바 너비 0 아님, 본문 대비 ≥4.5. 심각한 문제가 있으면 종료 코드가 0이 아닙니다.
사용자에게 스크린샷을 보내지 마세요, 숫자 결론만 보고; 사용자가 명시적으로 요청할 때만 스크린샷을 찍습니다.
7. 전달
present_files를 사용하여 portfolio/index.html을 열고, 본문에 세 가지를 명확히 설명합니다:
- 이번 버전에서 변경된 사항 (색상 / 구조 / 숫자 범위)
- 어떤 숫자가 플랫폼 표시와 일치하지 않는지, 어떻게 쓰는 것이 좋은지 (스스로 맞추지 마세요)
- 아직 부족한 것: 업무 경험 【작성 필요】, 연락 이메일, 온라인 링크로 게시할지 여부
사용자가 주로 모바일에서 볼 때는 로컬 네트워크 미리보기 사용 (~/.workbuddy/live-serve/live_serve.py), 파일을 반복해서 보내지 마세요.
디렉토리 구조
SKILL.md 이 문서
scripts/build.py data.json + 템플릿 → 단일 파일 HTML
scripts/verify.js 전달 전 검증 (playwright-core + 로컬 Chrome)
scripts/doctor.sh 데이터 수집 전 검사 (node / CLI / 쿠키 / 로그인 상태)
scripts/preview.sh 빌드 + 서버 시작 + 모바일 주소 + 변경 시 자동 재빌드 (한 줄 명령)
scripts/redbook.sh CLI 런처 (전역 버전 → 내장 복사본, 자동 선택)
assets/template.html 페이지 템플릿 (전체 CSS/JS, 플레이스홀더 {{NAME}} 형식)
demo/ 바로 빌드 가능한 예시 (가상 인물 + 플레이스홀더 커버, 환경 검증을 위해 한 번 실행)
references/data-collection.md 데이터 수집, 집계, 쿠키 복구, 안티 봇 대응
references/copy-playbook.md 카피 공식, 3단계 숫자, 금지 사항, 면접 질문 매핑
references/theming.md 페르소나 변경: 타임라인 은유, 색상 팔레트, 장식, 접근성 기준
vendor/redbook/ 내장된 샤오홍슈 CLI (MIT, dist/ 및 node_modules/ 포함)
vendor/NOTICE.md 내장 의존성의 출처, 버전, 라이선스 및 업그레이드 방법
템플릿 37KB, 이미지 인라인 후 완제품 약 1MB — 이 크기는 허용 가능하므로 용량 줄이기 위해 이미지를 압축하지 마세요. 내장 CLI 약 760KB, 삭제하지 마세요: 이것이 "상대방이 node만 설치하면 실행할 수 있는" 유일한 보장입니다.
일반적인 함정
- 숫자 모순: 사용자가 구두로 "8만 좋아요"라고 했는데 페이지에 7.6만이라면 면접관이 확인하면 바로 깨집니다. 메인 페이지에 표시된 값을 통일하세요.
redbook명령어를 찾을 수 없음 (command not found): 상대방 머신에 전역 패키지가 설치되어 있지 않습니다. 항상bash scripts/redbook.sh를 사용하세요. 그러면vendor/redbook/으로 폴백됩니다; 먼저bash scripts/doctor.sh를 실행하여 어느 부분이 누락되었는지 확인하세요.- 회고로 작성됨: "문제", "다음 단계", "배운 점"이 나오면 잘못된 것입니다. 해당 블록을 삭제하고 능력 카드로 대체하세요.
- 타임스탬프 수정 누락: 네비게이션
<small>12:15</small>를 섹션<b>12:15</b>와 동기화하는 것을 잊지 마세요. - 비율 바가 표시되지 않음:
.bar .tr / .fl은 span이며,display:block이 있어야 너비가 적용됩니다. - 접힌 영역 이미지가 "로드되지 않음":
display:none레이지 로드 이미지는 정상이며, verify.js에서 제외되었습니다. - 모바일에서 줄 바꿈: 팬 인구통계 세 개의 작은 카드는
white-space:nowrap을 사용하므로, 좁은 화면에서는 글꼴 크기와 패딩을 줄여야 합니다. - 대형 계정의 좋아요는 상한값: 팔로워 10만 이상 계정의 좋아요는 항상 "10만+"로 표시되며,
collected_count도 상한에 도달할 수 있습니다. "저장 ÷ 좋아요" 비율은 상한일 뿐 결론으로 쓸 수 없습니다 — 이 경우 비율 바를 절대값(저장 수, 댓글 수 각각 한 세트)으로 변경하면 결론은 동일하게 유효하며 모든 숫자가 신뢰할 수 있습니다. - 대형 계정을 좋아요 순으로 정렬하지 마세요: 상한 이후 정렬은 가짜입니다. "콘텐츠 유형별로 각각 하나의 대표작 선택"으로 변경하고, 소제목에 정렬하지 않는 이유를 설명하세요.
- 커버 비율 혼합: 동일한 계정이 9:16, 3:4, 4:3 세 가지 커버(긴 동영상, 정사각형, 가로 이미지)를 동시에 가질 수 있습니다. 3:4 +
object-position:50% 42%로 통일 크롭하면 세로 버전에서 하단 제목이 잘리지 않습니다. - 영웅 섹션 데이터 바가 반 줄만 차지함:
.ledger가 영웅의 두 번째.wrap에 있으면 2열 그리드를 상속받으므로.hero .wrap+.wrap{display:block}을 추가하세요. - 대형 계정 데이터 수집 속도 느림: 1000+ 게시물인 경우
--delay 2000으로 약 40페이지, 2분이면 완료; 그러나 TOP 9의 세부 정보를 가져오려면 게시물별로read해야 하며 간격 5초, 동시에 실행하지 마세요.