웹사이트 제작 플레이북이란
「웹사이트 제작 플레이북 · Website Playbook」은 AI 웹사이트 제작 도우미를 위한 작업 방법론으로, 현재 버전은 2.0.1이며 주로 Codex 환경에서 검증되었습니다. 웹사이트 프레임워크, CMS 또는 호스팅 플랫폼이 아니라, Agent가 요구사항을 정확히 이해하고 참고 구현을 확인하며 기존 프로젝트를 보호하고 검수와 인수인계를 완료하도록 돕는 실행 규칙 모음입니다.
개인 웹사이트, 포트폴리오, 연구 및 조직 웹사이트, 콘텐츠 사이트에 사용할 수 있으며, 기존 웹사이트의 개편과 부분 수정에도 활용할 수 있습니다. 핵심 작업 흐름 외에도 16개의 익명 경험과 프로젝트 브리프 및 웹사이트 인수인계 템플릿을 제공합니다.
핵심 기능과 작업 원칙
요구사항 범위 지키기
웹사이트 제작 플레이북은 정보를 세 가지로 구분하도록 요구합니다. 사용자가 명확히 제시한 요구사항, 작업 완료에 필요한 구현 세부사항, 그리고 논의할 수 있지만 아직 확인되지 않은 제안입니다. 이를 통해 AI가 임의로 섹션, 기능 또는 문구를 추가하는 문제를 줄일 수 있습니다.
먼저 참고 구현 확인하기
Awwwards에서 디자인 영감을 찾은 뒤 작품의 원본 사이트를 방문하여 접근 가능한 소스 코드와 실제 상호작용을 확인할 수 있습니다. 시각적 참고는 스크린샷에만 머물러서는 안 되며, 메뉴, 스크롤, 애니메이션과 반응형 동작이 어떻게 작동하는지도 확인해야 합니다.
승인된 버전 보호하기
기존 웹사이트를 수정하기 전에 올바른 프로젝트와 기준 버전을 먼저 찾고, 보존해야 할 콘텐츠와 아직 커밋되지 않은 변경사항을 파악해야 합니다. 확인 없이 사용자가 이미 승인한 버전을 직접 덮어써서는 안 됩니다.
실제 사용 경험 검수하기
검수는 페이지가 열리는지만 확인하는 작업이 아닙니다. 작업 범위에 따라 모바일 화면, 키보드 조작, 메뉴 상태, 애니메이션 과정과 오류 상태를 확인하고, 실제로 테스트한 항목과 아직 검증하지 않은 항목을 명확히 기록해야 합니다.
유지보수 경로 남기기
웹사이트를 인계할 때는 콘텐츠를 어디에서 업데이트하는지, 수정사항이 언제 적용되는지, 어떻게 배포하는지, 문제가 발생했을 때 어떻게 롤백하는지를 설명해야 합니다. 그래야 현재 작업자만 조작할 수 있는 결과물이 아니라 계속 유지보수할 수 있는 결과물이 됩니다.
설치 전 준비
이 Skill을 사용하려면 Skill을 사용할 수 있는 로컬 환경이 필요합니다. 실제 웹사이트 프로젝트에는 적절한 콘텐츠, 개발 환경, 도구 권한과 검수 조건도 필요합니다. 프로젝트는 주로 Codex에서 검증되었으므로 README는 모든 AI 플랫폼과의 완전한 호환을 보장하지 않습니다.
v2.0.1 릴리스 정보를 확인하거나, v2.0.1 전체 Skill 패키지를 바로 다운로드할 수 있습니다.
방법 1: Codex에 Skill 설치 요청하기
아래 지시문을 Codex에 전달합니다. 같은 이름의 버전이 이미 있을 때는 기존 사용자 지정 변경사항을 먼저 확인하여 기존 내용을 바로 덮어쓰지 않도록 특별히 요구합니다.
skill-installer를 사용하여 https://github.com/7-an/website-playbook/tree/v2.0.1/skills/build-websites-v2 에서 이 Skill을 설치해 주세요.
같은 이름의 버전이 이미 존재한다면 먼저 확인하고 제 사용자 지정 변경사항을 보존하며, 바로 덮어쓰지 마세요.설치가 완료되면 이전 대화의 맥락이 요구사항 범위에 영향을 주지 않도록 새 작업을 시작한 뒤 Skill을 호출하는 것이 좋습니다.
방법 2: ZIP 수동 설치
- v2.0.1 전체 Skill 패키지를 다운로드합니다.
- 다운로드한 ZIP 파일의 압축을 풉니다.
- 완전한
build-websites-v2폴더를 찾습니다. - 폴더 전체를 로컬 환경에서 지원하는 Skill 디렉터리에 넣습니다.
- 모든 하위 디렉터리와 파일이 보존되었는지 확인합니다.
SKILL.md만 복사하지 마세요. 이 Skill은 README, 호출 메타데이터, 참고 자료와 템플릿 리소스에도 의존합니다.
Skill의 설치 및 검색 메커니즘은 공식 문서에서 확인할 수 있습니다.
프로젝트 파일 구조 이해하기
skills/build-websites-v2/
├── SKILL.md # Agent 실행 진입점
├── README.md # 설치, 예시 및 기능 범위
├── agents/openai.yaml # 호출 메타데이터
├── references/ # 필요에 따라 사용하는 5개 참고 자료와 익명 경험 기록
└── assets/ # 프로젝트 브리프 및 웹사이트 인수인계 템플릿SKILL.md는 Agent의 실행 진입점이지만, 전체 작업 방식은 다른 디렉터리에도 의존합니다. references에는 필요에 따라 사용하는 참고 자료가 저장되고, assets에는 프로젝트 브리프와 웹사이트 인수인계 템플릿이 포함되어 있습니다.
처음 웹사이트 제작 플레이북 호출하기
프로젝트의 공개 이름은 「웹사이트 제작 플레이북」이며, 기존 설치 사용자와의 호환성을 위해 호출 이름은 여전히 build-websites-v2로 유지됩니다. 설치 후 새 작업에서 다음 형식을 사용할 수 있습니다.
$build-websites-v2를 사용하여 웹사이트를 제작하거나 수정해 주세요.
목표: ……
기존 자료 및 프로젝트 경로: ……
참고 웹사이트 및 참고하고 싶은 부분: ……
반드시 보존할 항목: ……
이번 작업 범위: 분석 / 로컬 구현 / 배포.이 입력 구조의 핵심은 목표, 프로젝트 위치, 참고 대상, 보호할 항목과 실행 범위를 서로 분리하는 것입니다. 단순히 “더 보기 좋게 만들어 주세요”라고 하지 말고, 구체적인 페이지와 기대하는 결과, 수정하면 안 되는 영역을 명시해야 합니다.
예시: 포트폴리오 웹사이트 제작
$build-websites-v2를 사용하여 웹사이트를 제작해 주세요.
목표: 연구 프로젝트와 디자인 작업을 보여주는 개인 포트폴리오 웹사이트를 제작합니다.
기존 자료 및 프로젝트 경로: 프로젝트는 로컬의 지정된 디렉터리에 있으며, 문구와 작업 자료는 정리되어 있습니다.
참고 웹사이트 및 참고하고 싶은 부분: 지정된 웹사이트의 홈페이지 전개와 프로젝트 목록 레이아웃을 참고하되, 이미지·폰트·코드는 복사하지 않습니다.
반드시 보존할 항목: 기존 자기소개와 프로젝트 이름.
이번 작업 범위: 먼저 분석한 뒤 로컬에서 구현하며, 배포하지 않습니다.예시: 기존 웹사이트 수정
$build-websites-v2를 사용하여 웹사이트를 수정해 주세요.
목표: 모바일 메뉴가 정상적으로 닫히지 않는 문제를 수정합니다.
기존 자료 및 프로젝트 경로: 프로젝트는 로컬의 지정된 디렉터리에 있습니다.
참고 웹사이트 및 참고하고 싶은 부분: 없음.
반드시 보존할 항목: 홈페이지 콘텐츠, 데스크톱 내비게이션 스타일과 현재 커밋되지 않은 변경사항.
이번 작업 범위: 로컬 구현 및 관련 검수, 배포하지 않음.두 번째 예시는 작업을 메뉴 수정으로 제한하며 전체 사이트를 다시 디자인하도록 요구하지 않습니다. 웹사이트 제작 플레이북은 이런 부분 작업도 지원하므로 매번 전체 웹사이트 제작 과정을 실행할 필요가 없습니다.
작업에 따라 실행 범위 선택하기
호출할 때 이번 작업 범위를 분석, 로컬 구현 또는 배포로 명확히 지정할 수 있으며, 여러 단계를 조합할 수도 있습니다.
- 분석만: 참고 웹사이트를 조사하거나 요구사항을 정리하거나 기존 프로젝트를 점검할 때 사용하며, 코드를 직접 수정하지 않습니다.
- 로컬 구현: 프로젝트와 기준 버전을 확인한 뒤 웹사이트를 수정하고 작업과 관련된 로컬 점검을 수행합니다.
- 배포: 적절한 권한이 필요하며, 배포 전에 전달 내용과 위험을 확인해야 합니다.
- 부분 수정: 메뉴, 상호작용 또는 지정된 문제만 처리하여 변경 범위가 확대되지 않도록 합니다.
- 버전 복원: 복원할 버전이나 기준을 명확히 지정하고 다른 기존 변경사항을 보호합니다.
고급 사용 팁
“무엇을 참고할지” 명확히 하기
참고 웹사이트를 제공할 때 URL만 제출하지 마세요. 레이아웃, 정보 계층, 메뉴 동작, 애니메이션 리듬 또는 기타 구체적인 부분 중 무엇을 참고하고 싶은지 설명해야 합니다. 공개적으로 읽을 수 있는 소스 코드라고 해서 코드, 폰트와 이미지를 자유롭게 복사할 수 있는 것은 아니며, 재사용하기 전에 해당 라이선스를 준수해야 합니다.
보호할 항목을 프롬프트에 작성하기
프로젝트에 이미 승인된 버전이 있다면 반드시 보존해야 하는 페이지, 문구, 상호작용과 커밋되지 않은 변경사항을 명확히 나열해야 합니다. 같은 이름의 Skill 버전을 설치할 때도 같은 원칙을 적용하여 먼저 차이를 확인한 뒤 업데이트 방법을 결정하고, 바로 덮어쓰지 않아야 합니다.
검수 기록 요청하기
작업이 끝난 후 실제 테스트 항목을 나열하도록 Agent에 요청할 수 있습니다. 예를 들어 모바일 레이아웃, 키보드 조작, 메뉴 열기와 닫기, 애니메이션 전체 과정과 오류 상태를 확인했는지 기록하게 할 수 있습니다. 브라우저, 참고 소스 코드 또는 외부 리소스에 접근할 수 없다면 이미 통과했다고 가정하지 말고 미검증으로 표시해야 합니다.
인수인계를 작업의 일부로 만들기
프롬프트에 인수인계 요구사항을 추가하여 최종 결과에 콘텐츠 업데이트 위치, 적용 조건, 배포 단계와 롤백 방법이 포함되도록 하세요. 프로젝트의 인수인계 템플릿을 활용하면 이러한 정보를 정리하는 데 도움이 됩니다.
먼저 분석한 뒤 구현 권한 부여하기
참고 대상이 복잡하거나 기존 프로젝트가 익숙하지 않거나 변경 위험이 클 때는 먼저 작업을 “분석만”으로 제한할 수 있습니다. 분석 결과와 범위를 확인한 뒤 로컬 구현 또는 배포 작업을 시작하세요. 이러한 단계적 방식은 잘못된 수정 위험을 줄이는 데 도움이 됩니다.
기능 범위와 주의사항
- 이 프로젝트가 제공하는 것은 작업 방법과 실행 규칙이며, 웹사이트 콘텐츠, 개발 환경과 필요한 권한을 대신하지 않습니다.
- 특정 프레임워크, CMS 또는 호스팅 플랫폼을 강제하지 않습니다.
- Skill 설치가 웹사이트 배포 권한을 부여하는 것은 아니며, 배포는 실제 권한에 따라 결정됩니다.
- 참고 소스 코드나 브라우저에 접근할 수 없다면 미검증 항목으로 기록해야 합니다.
- 공개 콘텐츠에는 일반적인 방법, 익명 경험과 빈 템플릿만 포함되며, 원본 대화, 고객 자료, 개인 계정 또는 내부 감사 기록은 포함되지 않습니다.
- 프로젝트는 주로 Codex 환경에서 검증되었으며, 아직 모든 플랫폼에 대한 호환성 검증은 완료되지 않았습니다.
맺음말
웹사이트 제작 플레이북의 가치는 기술 스택을 대신 선택하는 데 있지 않고, AI 웹사이트 제작 과정을 체계화하는 데 있습니다. 먼저 요구사항과 범위를 정확히 파악하고, 참고 구현을 확인하며, 기존 버전을 보호하고, 작업에 맞는 실제 검수를 완료한 뒤, 유지보수·배포·롤백이 가능한 인수인계 경로를 남깁니다. build-websites-v2를 설치한 뒤 목표가 분명한 작은 작업부터 시작하는 것이 AI에게 전체 웹사이트를 바로 다시 만들도록 요청하는 것보다 대체로 안정적입니다.