handlagency/accountant-website-builder

회계사 웹사이트 빌더 (HandL Agency)

대부분의 회계사 웹사이트는 비슷하고 "Smith & Co에 오신 것을 환영합니다"라고 말합니다. 디자인 자체가 고객을 유치하지 못하는 진짜 이유는 서비스와 도시를 명시하지 않은 H1, 가격 미표시, 얼굴 없음, 방문자가 읽는 곳에서 연락할 방법이 없다는 점입니다. 이 스킬은 비싸 보이면서도 제 역할을 하는 페이지를 만듭니다.

순서대로 단계를 따르세요.

1. 브리핑 받기 (한 번에 묻고 결정)

아래 항목 중 추론할 수 없는 것은 짧은 메시지 하나로 물어보고, 나머지는 직접 채우고 선택한 내용을 말하세요.

• 업체명, 서비스 (예: "회계사", "부기", "프리랜서 회계") 및 도시 또는 지역
• 타겟 고객 ("모든 기업"보다 하나의 틈새가 효과적), 차별점 (고정 요금, 같은 담당자, 응답 시간 등)
• 방문자가 취해야 할 하나의 행동 (예: "고정 견적 받기"). 하나의 주요 버튼을 모든 곳에 사용.
• 분위기를 나타내는 세 단어, 브랜드 색상, 보유한 자체 사진 또는 동영상.

2. 브리핑 파일 작성

references/brief.md를 참고하여 brief.json을 작성하세요. examples/에서 가장 가까운 파일을 복사해 수정하고, 빈 파일에서 시작하지 마세요. 규칙:

• h1은 반드시 서비스와 도시를 포함해야 합니다. 사람이 읽을 수 있게: "드디어 당신 편이 된 브리스톨 회계사"
• sub는 120~165자로, 메타 설명을 겸합니다.
• stats는 업체가 실제로 약속하는 내용 (응답 시간, 연간 점검 횟수)입니다. 절대 허위 고객 결과, 리뷰 또는 수상을 만들어내지 마세요.
• 레이아웃은 references/layouts.md를 참고하여 선택하세요.

3. 히어로 장면 (차별화 포인트)

기본값은 stage 레이아웃입니다: 시네마틱 배경판, 움직이는 금융 오브젝트 하나 (글라이드, 호버, 플로트, 스핀, 플로우), 파티클, 깊이를 더하는 거대한 반향 글자, 마우스 패럴랙스, 스크롤 시 오브젝트가 아래로 날아감. references/scenes.md로 장면을 구성하세요:

1. 업체에 맞는 금융 오브젝트 선택 (동전, 지폐 스타일 종이로 접은 종이학, 금색 새, 유리 패키지, 세금 신고지 보트, 크롬 리본). 준비된 장면은 assets/scenes/에 있습니다.
2. 새 장면을 위해 이미지 모델로 정지 이미지를 생성하고 (scenes.md의 프롬프트 공식 사용), 오브젝트를 분리한 후, 모델에 오브젝트를 제거한 동일 이미지(배경판)를 요청하세요.
3. 움직임, 파티클, 반향 글자는 brief.json에 설정하세요.

업체 자체 팀 사진은 히어로 아래 섹션에 배치하세요. 권한이 없는 미디어는 핫링크하지 말고, 악수나 계산기 스톡 사진은 절대 사용하지 마세요.

4. 빌드

python3 scripts/build.py brief.json site/를 실행하세요. site/index.html을 생성하고 (단일 파일, 빌드 단계 없음, 어디서나 열림) SEO 검사 결과를 출력합니다. 실패한 검사를 수정한 후 다시 빌드하세요.

5. 확인 및 수정 (건너뛰지 마세요)

python3 scripts/shoot.py site/index.html shots/를 실행하세요 (Playwright 필요: pip install playwright && python -m playwright install chromium). 스크린샷을 열고 references/review.md를 사용해 페이지를 평가하세요. 가장 약한 세 항목을 수정하고 다시 촬영하세요. 모든 항목이 4점 이상이거나 세 번의 라운드 후에 멈추세요.

6. 인계

사용자에게 다음을 제공하세요:

• index.html 파일 및 여는 방법
• 최종 데스크톱 스크린샷
• 페이지 제목과 H1 (서비스와 도시를 명시했는지 확인)
• 실제 운영 전 교체해야 할 항목: 실제 사진, 실제 가격, 예약 또는 연락처 링크, 푸터의 업체 규제 문구 (예: ICAEW/ACCA/AAT 실무 세부 사항)

파일

• references/brief.md: brief.json의 모든 필드
• references/layouts.md: 레이아웃 및 각각 사용 시기
• references/scenes.md: 애니메이션 히어로 장면 구성 방법, 움직임 유형, 이미지 프롬프트
• assets/scenes/: 6개의 준비된 금융 장면 (배경판과 분리된 오브젝트)
• references/finance-rules.md: 금융 업체 웹사이트를 위한 SEO 및 전환 규칙
• references/review.md: 5단계 평가 기준
• examples/*.json: 6개의 완성된 브리핑 (회계사, 부기, 프리랜서 회계, 이커머스 부기, 세금 신고, 급여)
• scripts/build.py 및 scripts/stage.py: 페이지 렌더링 (미디어 복사 포함) 및 SEO 검사 실행
• scripts/shoot.py: 리뷰를 위한 데스크톱 및 모바일 스크린샷 촬영