실제 자산, 스톡 이미지 금지
원칙: 웹사이트가 AI로 만들어진 것처럼 보이지 않으려면 이미지가 반복 불가능해야 합니다: 실제 제품, 실제 터미널, 실제 사진. 스톡 이미지, 일반적인 렌더링, AI 생성 이미지를 대체재로 사용하는 것은 금지됩니다.
프로젝트 스크린샷 (Playwright)
- 항상 프로덕션 빌드 상태의 프로젝트를 캡처합니다. 뷰포트는 1440x900,
deviceScaleFactor: 2를 사용합니다. - 무언가를 전달하는 상태(데이터가 있는 대시보드, 쿼리 결과, 실행 중인 파이프라인)를 선택하고, 빈 홈페이지는 선택하지 마십시오.
- 촬영 전에
networkidle과 로드된 글꼴을 기다립니다. 방해가 되는 쿠키/배너는 숨깁니다. public/shots/<프로젝트>/<상태>.png에 저장하고sharp으로 압축합니다(AVIF/WebP for web, 투명도가 필요한 경우에만 PNG).- 데모가 없는 저장소의 경우: 저장소 페이지의 스크린샷(README 렌더링)을 캡처하고, 목업은 절대 사용하지 않습니다.
개인 사진
- 이미 열려 있는 브라우저 세션(디버그 포트가 있는 Chrome)을 사용하여 프로필 사진을 다운로드하고, 잘라낸 스크린샷을 사용하지 마십시오.
- 원본을
public/me.jpg(또는public/me.webp)에 저장하고, 잘라낸 버전도 저장합니다. 비율을 왜곡하거나 피부/신원을 보정하지 마십시오. - 프로젝트에 이미 초상화가 있는 경우 다시 다운로드하기 전에 재사용하십시오.
기술 로고
- 단색 SVG를 위해 Simple Icons (
npm i simple-icons)를 사용합니다(MIT/CC0 라이브러리; 로고는 해당 소유자의 상표이며, 정보 제공 목적의 공정 사용입니다). - 기본적으로 Design DNA의 잉크 색상으로 인라인 렌더링합니다. 브랜드 색상은 호버 시 세부 사항에서만 유용합니다.
- 도구가 Simple Icons에 없는 경우(일부 AI 도구) 일관된 타이포그래픽 모노그램(고정폭 서체의 첫 글자)을 사용하고, 가상의 이미지나 Google Images에서 가져온 로고는 절대 사용하지 않습니다.
터미널 / 코드
- "터미널 증명"이 필요한 경우: 고정폭 서체로 HTML 블록을 만들고, 프로젝트의 실제 명령어를 실행하고 Playwright로 캡처합니다. 가짜 출력을 절대 만들지 마십시오.
- 명령어와 버전은 사실에 기반하고 확인 가능해야 합니다.
처리 및 일관성
- Design DNA 팔레트에 매핑된 부드러운 듀오톤 + 선택적 가벼운 그레인; 모든 캡처에 동일한 처리를 적용합니다.
- 테두리/모서리 및 그림자는 이미지가 아닌 프로젝트 토큰을 기반으로 합니다.
- 목표 중량: 이미지 300KB 이하;
next/image를 올바른sizes와 함께 사용하고priority는 첫 번째 이미지에만 사용합니다. - 모든 에셋에는 설명적인
alt가 있어야 하며, 장식용인 경우alt=""여야 합니다.
무결성 규칙
- 캡처에 가상의 메트릭이 없어야 합니다(실제 차트가 아니면 캡처하지 마십시오).
- 워터마크, 저작권이 의심스러운 이미지, 주요 콘텐츠로서의 생성형 AI가 없어야 합니다.
- 각 에셋의 출처와 라이선스를
docs/assets.md에 기록하십시오.