사이트 시그니처은(는) 무엇을 하나요?

당신은 누군가가 자신의 개인 사이트를 다시 만드는 것을 돕습니다. 목표하는 결과: 다른 곳에서는 볼 수 없는 첫 화면, 그리고 작은 휴대폰, 노트북, 21:9 모니터, TV에서도 완벽하게 보이는 페이지입니다.

이 스킬은 결정을 내리는 방법을 설명합니다. 어떤 템플릿, 팔레트, 기성 장면도 제공하지 않습니다. 모든 것은 그 사람과 그 콘텐츠에서 나옵니다.

결정 방법

네 가지 선택지를, 이 순서대로, 각각 다음 단계로 넘어가기 전에 사용자의 승인을 받습니다.

콘텐츠 우선. 사이트가 이미 말하고 있는 것을 읽고, 독특한 점(문구, 숫자, 경력, 다른 사이트에는 없는 섹션)을 찾아냅니다. 리디자인은 그 부분에 더 많은 공간을 할당합니다.
그 사람의 삶에서 가져온 장면. 그 사람이 잘 아는 장소, 사물, 현상을 단일 그래픽 매체(시간, 빛, 깊이)로 분위기 있게 표현합니다.
장면 속 실제 데이터. 보는 순간 정확하게 계산되거나 측정된 무언가입니다. 바로 그 디테일이 사람들이 다시 방문하게 만듭니다.
고정 값이 아닌 범위. 모든 크기는 최소값과 최대값을 가지며, 페이지는 화면 형태(좁음, 넓음, 낮음)에 반응합니다.

숫자는 문제를 분류합니다. 사용자가 직접 본 스크린샷이 최종 결정을 내립니다.

references/decouverte.md : 기술 스택 식별, 기존 사이트 측정, 유지할 항목 파악. 먼저 수행할 작업.
references/scene.md : 사용자와 함께 장면을 찾고 구축합니다.
references/responsive.md : 모든 화면에서의 레이아웃 및 렌더링 규칙.
scripts/check-viewports.mjs : URL을 열 가지 화면 크기로 렌더링하여 측정 가능한 결함과 각 크기별 스크린샷을 출력합니다.

ai-patterns-audit 스킬이 설치되어 있다면, 프론트엔드 코드를 작성하기 전에 해당 스킬의 references/regles.md를 읽고 마지막에 감사를 실행하세요.

파악하기 : 기술 스택, 저장소 구조, 개발 및 배포 명령어, 유지해야 할 기존 기능(references/decouverte.md).
손대기 전에 측정하기 : 라이브 사이트 또는 로컬 서버에서 스크립트를 실행하고 스크린샷을 시작점으로 저장합니다. 측정값을 바탕으로 이미 좋은 점과 사이트를 제약하는 점을 사용자에게 요약합니다.
장면 찾기 : references/scene.md의 질문을 메시지당 하나씩 던집니다. 그런 다음 각각 두 문장으로 된 세 가지 방향을 제안합니다. 사용자가 선택하기 전에는 코드를 작성하지 마세요. 사이트에 이미 고유한 장면이 있다면 그대로 유지하고, 네 가지 조건과 동일 파일의 드로잉 규칙에 따라 검토한 후 부족한 부분(세로 자르기, 실제 데이터, 오프스크린 일시 정지)만 수정하세요.
첫 화면 구축하기 : 전체 화면 장면, 이름, 두 문장, 링크. 나머지 콘텐츠는 첫 화면 아래에서 시작합니다.
페이지 나머지 부분을 섹션별로 재구성하기 : references/responsive.md를 참고합니다.
확인하기 : 로컬 서버에서 스크립트 실행, 스크린샷을 하나씩 검토한 후 키보드만으로 탐색, 마지막으로 모션 축소 설정 확인. 스크린샷을 보여주고 사용자가 눈으로 직접 판단하게 합니다.