전문가 개인 사이트

전문가 사이트

전문가 사이트는 특정 개인에 대한 신뢰를 판매합니다. 오늘날 아름다운 외형은 모든 생성기가 만들 수 있으므로, 페이지에 살아있는 사람, 명확한 약속, 그리고 체감되는 품질이 있는 사람이 승리합니다.

작업 순서

단계별로 진행하세요. "그냥 예쁘게" 해달라는 요청이 있더라도 1단계를 건너뛰지 마세요.

1. 인물 초상화. 이용 가능한 모든 출처(대화, 사이트, 채널, 문서)에서 다음을 수집하세요: 전문가가 누구인지, 누구를 위해 일하는지, 어떤 결과를 제공하는지, 2-3개의 실제 이야기, 가치관, 목표, 자신의 사진과 작업물, 그가 사용하는 단어. 어떤 것도 지어내지 마세요: 사실이 없다면 사이트에도 없습니다. 사이트의 하나의 핵심 메시지와 하나의 약속 문구를 도출하세요: 누구에게, 무엇을 얻을지, 어떤 방식으로.
2. 브리프. references/nishi.md에서 틈새를 찾으세요(28개 틈새: 시작 팔레트, 글꼴, 사진에 보여줄 내용, 필요한 블록, 고객의 의심, 피해야 할 사항). 5줄로 기록하세요: 페이지 유형(사람을 위한 서비스, 진료실 또는 스튜디오, 온라인 제품, 저자), 목표(예약, 구매, 구독, 봇으로 이동), 스타일(하나로 끝까지), 하나의 잊을 수 없는 요소(그림, 물건, 개성 있는 사진, 생생한 인터페이스), 피해야 할 사항. 2-3가지 기법을 선택하고 references/obrazcy.md에서 실제 예시를 확인하세요.
3. 구성. 황금비 그리드, 밀도는 "잡지" 스타일, "사막" 스타일이 아님. references/kompozitsiya.md를 읽으세요.
4. 글꼴과 색상. 틈새의 팔레트와 한 쌍의 글꼴로 시작한 다음, references/shrifty.md와 references/tsvet.md에 따라 개인에 맞게 조정하세요. 키릴 문자를 지원하는 글꼴만 사용하고, 산성 또는 네온 색상은 사용하지 않으며, 기본적으로 완전히 어두운 배경은 사용하지 마세요. 모든 틈새의 실제 갤러리: assets/nishi.html.
5. 사진, 볼륨감, 빛. references/foto-i-kartinki.md와 references/obem-svet-ten.md를 읽으세요. 모든 볼륨감 기법의 실제 데모: assets/obem-demo.html.
6. 모션과 비디오. 가벼운 기법만 사용: references/effekty.md, references/video.md.
7. 텍스트. references/teksty.md에 따라 작성하세요. 러시아어 텍스트는 humanizer-ru 규칙에 따라, 영어 텍스트는 humanizer 규칙에 따라 처리하세요. 긴 대시는 사용하지 마세요.
8. 검증. python -I scripts/proverka_saita.py <사이트 폴더>를 실행하고 references/proverka.md의 체크리스트를 확인하세요. Node.js와 Playwright가 있다면 node scripts/proverka_v_brauzere.mjs <index.html>를 실행하세요: 375, 768, 1280, 1440 px에서 페이지를 열고, 콘솔 오류, 화면 밖으로 나가는 요소, 작은 버튼을 찾아 스크린샷을 저장합니다. 스크린샷을 눈으로 확인하세요.

주요 규칙

• 효과보다 사람. 전문가의 사진, 작업물, 물건, 목소리가 어떤 애니메이션보다 중요합니다.
• 사실감과 볼륨감은 무거운 3D가 아닌 빛, 그림자, 테두리, 레이어, 색상으로 만듭니다. 페이지 전체에 하나의 광원: 왼쪽 위에서 비추고, 그림자는 오른쪽 아래로.
• 페이지당 하나의 강한 움직임. 나머지는 조용하게: 카드 2px 위로 올리기, 사진 살짝 확대, 버튼 누르기.
• 가벼움. 첫 화면은 약한 휴대폰에서도 빠르게 열립니다. WebGL 장면, 휠을 "가로채는" 스크롤, 소리가 있는 자동 재생 비디오는 사용하지 마세요.
• 중앙 정렬 대신 황금비에 따른 비대칭: 열 비율 38.2 / 61.8, 여백과 크기는 1.618 배율 사용.
• 밀도. 여백은 필요하지만 블록이 비어 보이지 않아야 합니다. 화면에는 항상 사진, 물건, 또는 생생한 디테일이 있어야 합니다.
• 명확한 색상 블록. 전체 사이트를 하나의 색조로 칠하지 마세요(하나의 색조는 평평해 보입니다). 섹션은 배경을 번갈아 사용합니다: 밝음, 따뜻한 모래색, 하나의 어두운 강조 띠, 세이지 색상. "빈 잡지"보다 더 많은 블록, 텍스트, 그림, 목록.
• 모든 사실은 "그래서 뭐?"에 답해야 함. 전문가의 경험은 고객을 위한 이점으로 제시됩니다. 내부 사항(부서 수, 내부 테스트 결과)은 사이트에 공개하지 마세요.
• AI 템플릿의 흔적 없음: 사이트의 목소리로 Inter, Roboto, Arial 사용; 보라-분홍 그라데이션; 네온 및 산성 색상; 모든 제목 위에 부제목; 섹션 번호 01/02/03; 동일한 "아이콘, 제목, 텍스트" 카드 그리드; 아이콘 대신 이모지; 스톡 악수 사진 및 "공통 조명"이 있는 AI 생성 이미지; 가짜 후기, 로고, 숫자.
• 정직함. AI가 생성한 일러스트레이션은 출처를 표시하세요. 타인의 사진은 무료 라이선스와 저작자 표시가 있는 경우에만 사용하세요.
• 개인정보 보호. 주소는 구 또는 거리까지만, 건물 번호는 제외. 개인 의료 및 가족 관련 세부 정보는 사이트에 공개하지 마세요.

전문가 페이지 구조

기본 순서이며, 브리프에 따라 변경 가능:

1. 첫 화면: 약속 문구, 전문가의 생생한 사진 또는 주요 물건, 하나의 행동 버튼, 옆에 증거(실제 사례 수치, "저희에 대해 보도된" 내용, 후기).
2. 누구를 어떻게 돕는지(고객의 언어로 2-4가지 상황).
3. 어떻게 일하는지: 실제로 보여주는 방법 또는 제품(사진, 인터페이스, 과정).
4. 증거: 구체적인 결과가 있는 후기, 작업물, 사례.
5. 나는 누구인가: 간략하게, 전문성과 가치관을 설명하는 내용만.
6. 구독 또는 체험 단계를 위한 선물(가이드, 테스트, 첫 수업, 봇).
7. 최종 버튼 및 연락처.

참고 자료

• references/kompozitsiya.md: 그리드, 황금비, 밀도, 섹션 리듬.
• references/shrifty.md: 키릴 문자를 지원하는 글꼴 쌍, 크기, 입체 텍스트.
• references/tsvet.md: 팔레트, 색감이 가미된 중성색, 깊이로서의 색상.
• references/foto-i-kartinki.md: 촬영, 후처리, 컷아웃, 테두리, 형식, 라이선스.
• references/obem-svet-ten.md: 준비된 CSS와 함께 9가지 볼륨감 기법.
• references/effekty.md: 가중치와 함께 어떤 효과를 사용하고 사용하지 말아야 하는지.
• references/video.md: 사이트 비디오 및 짧은 클립 편집.
• references/teksty.md: 전문가 텍스트, 휴머나이저, 금지 사항.
• references/nishi.md: 28개 틈새 데이터베이스: 팔레트, 글꼴, 사진, 블록, 고객 의심, 피해야 할 사항.
• references/obrazcy.md: 각 기법의 실제 예시, "기법 → 어디서 볼 수 있는지".
• references/proverka.md: 공개 전 체크리스트.