Grill Me부터 Security Audit까지 AI 스킬로 예약 페이지 완성하기

AI에게 “예약 페이지를 만들어줘”라고 하면 화면은 금방 나옵니다. 하지만 누구의 어떤 고민을 해결하는지, 신청 버튼 다음에 무엇이 일어나는지, 예약자의 정보를 누가 볼 수 있는지까지 저절로 정해지지는 않습니다. 그 빈칸을 그대로 두면 문장과 디자인이 완성된 뒤에도 서비스의 중요한 결정은 남습니다.

Grill Me로 결정할 문제를 찾고, Impeccable로 화면을 설계하며, marketingskills로 방문과 신청의 흐름을 검토하고, Security Audit으로 코드의 보안 근거를 확인하는 방식을 활용할 수 있습니다. 서로 다른 제작자의 스킬을 연결하는 작업 방법이며, 네 도구가 하나의 공식 통합 제품을 이루는 것은 아닙니다.

핵심 답변 네 가지 스킬은 무엇을 나눠 맡나요

스킬은 에이전트가 특정 일을 수행할 때 참고하는 지침과 자료의 묶음입니다. 결과는 연결한 모델, 프로젝트 자료, 사용할 수 있는 도구와 권한에 영향을 받습니다. 설치만으로 사업 기획부터 운영까지 자동으로 완성되는 구조로 이해하기보다는, 각 단계에서 무엇을 결정하고 확인할지 구체화하는 도구로 접근하는 편이 좋습니다.

도구와 공식 제작 주체	맡길 질문	다음 단계에 전달할 내용
Grill Me · Matt Pocock	누구를 위해 무엇을 만들며, 어떤 결정이 빠졌는가	고객·목표·범위·확정 조건
Impeccable · Paul Bakaus	사용자가 이해하고 조작할 수 있는 화면인가	화면 구조·디자인 기준·사용성 확인 결과
marketingskills · Corey Haines	어떤 경로로 방문하고 무엇을 보고 신청하는가	상품 설명·검색 개선안·신청 흐름·측정 기준
Security Audit · Cloudflare	코드에서 어떤 위험을 근거로 확인할 수 있는가	확인된 문제·판단에 필요한 조건·수정 후 확인 사항

중요한 연결점은 앞 단계의 결정을 다음 단계가 실제로 읽도록 하는 것입니다. 설명이 바뀔 때마다 가격이나 대상 고객을 새로 추측하게 두면, 도구가 늘어날수록 페이지의 내용도 흔들릴 수 있습니다.

실습 예시 가죽공예 원데이 클래스 예약 페이지

이 글에서는 가상의 공방을 예로 사용합니다. 처음 만드는 페이지의 목표는 수업을 소개하고 예약 요청을 받는 것입니다. 예약 요청과 결제 완료를 구분하고, 실제 공방 운영자가 확정하지 않은 가격·일정·후기는 공개 문구에 넣지 않는 조건으로 시작합니다.

먼저 확인할 항목	화면과 구현에 미치는 영향
고객은 처음 배우는 사람인가 경험자인가	난이도·준비물·완성품 설명의 수준
일정과 잔여석을 실제로 관리할 수 있는가	실시간 예약 또는 일정 문의 방식
신청하면 예약이 확정되는가	버튼 문구와 완료 화면의 안내
가격·재료비·취소 기준은 확정됐는가	신청 전에 보여줄 거래 조건
어떤 개인정보를 수집하고 누가 확인하는가	신청 폼의 필드와 서버의 접근 권한

처음부터 결제와 회원 가입까지 모두 만들 필요는 없습니다. 운영 방식이 확정되지 않았다면 일정 문의와 예약 요청을 받는 범위부터 정하고, 확정된 처리 절차에 맞춰 기능을 넓혀갈 수 있습니다.

Grill Me로 만들기 전에 결정할 내용을 찾기

Grill Me는 계획을 질문으로 구체화하는 인터뷰에 적합합니다. 현재 공식 구현에서는 grill-me가 공통 인터뷰 지침인 grilling을 호출합니다. 답할 준비가 된 질문을 한 차례에 모으고, 앞선 답에 따라 달라지는 질문은 다음 차례로 넘기는 방식입니다. 환경이나 코드에서 알아낼 수 있는 사실과 사용자가 결정해야 할 일을 구분합니다. 공식 인터뷰 지침

공방 운영자에게는 “버튼 색상은 무엇인가요?”보다 “신청 직후 자리가 확정되나요?”가 먼저입니다. 후자의 답에 따라 버튼, 신청 완료 안내, 관리자 업무가 함께 바뀌기 때문입니다.

다음은 스킬을 연결한 에이전트에 전달할 요청 예시입니다.

Grill Me로 가죽공예 원데이 클래스 예약 페이지의 기획을 점검해줘.
고객, 수업 선택 이유, 예약 확정 방식, 취소 조건, 운영 가능한 범위를 확인해줘.
지금 답할 수 있는 질문을 묶고, 앞선 결정에 의존하는 질문은 다음 차례로 넘겨줘.
각 질문에 추천안과 그 이유를 붙여줘.
가격·후기·잔여석처럼 내가 제공하지 않은 사실은 만들지 마.
마지막에는 확정한 내용, 가정, 남은 결정을 구분한 기획 요약을 작성해줘.

마지막의 기획 요약은 이 작업을 위해 요청하는 산출물입니다. Grill Me가 언제나 같은 형식의 기획서를 자동 생성한다고 전제하지 마세요. 요약을 읽고 운영자가 결정한 내용과 AI가 제안한 내용이 섞이지 않았는지 확인한 뒤 화면 설계에 넘깁니다.

Impeccable로 기획을 화면과 조작으로 바꾸기

Impeccable은 AI 코딩 에이전트에 디자인 지침과 검토 명령을 제공하는 프로젝트입니다. 현재 init은 고객·목적·제약 같은 지속적인 제품 정보를 PRODUCT.md에 기록하고, 시각적 디자인 체계는 DESIGN.md로 구분합니다. shape는 구현 전 화면 계획, critique는 전달력과 시각적 위계 검토, audit은 접근성·성능·반응형 품질 확인, polish는 마무리 검토에 해당합니다. 공식 명령 안내

예약 페이지에서는 첫 화면에 수업의 대상과 완성품, 신청 방식이 보여야 합니다. 상세 영역에는 과정과 준비물, 가격과 취소 조건을 배치하고, 신청 완료 후에는 운영자의 연락을 기다려야 하는지 분명하게 안내합니다. 사진은 실제 수업과 완성품을 보여주는 자료를 우선 확보합니다.

확정한 기획 요약을 읽고 Impeccable로 예약 페이지를 설계해줘.
init으로 제품 맥락을 정리한 뒤 shape로 모바일과 PC의 정보 순서를 제안해줘.
예약 요청과 확정 상태가 구분되게 하고, 실제 사진이 없는 곳에는 필요한 사진을 표시해줘.
구현 후 critique와 audit으로 글자 대비, 키보드 조작, 폼 오류,
좁은 화면에서의 버튼과 글자 잘림을 확인해줘.
마지막 polish 전에 발견한 문제와 수정 결과를 보여줘.

공식 사례의 핵심도 그림을 그대로 붙이는 데서 끝나지 않습니다. 페이지로 구현한 뒤 겹치는 요소와 이미지 잘림, 메뉴 상태 등을 브라우저에서 확인하는 과정이 포함됩니다. 우리 페이지에서도 디자인 검토를 마쳤다는 설명과 실제 작은 화면에서 조작할 수 있다는 확인을 연결해야 합니다. Neo Mirai 구현 사례

marketingskills로 방문과 신청을 따로 검토하기

marketingskills는 마케팅 업무별 지침을 모은 라이브러리입니다. 상품과 고객 맥락을 정리하는 product-marketing을 바탕으로 검색과 전환 등 관련 작업을 나누어 진행할 수 있습니다. 현재 관련 스킬은 .agents/product-marketing.md 등의 맥락 파일을 읽도록 안내합니다. Impeccable의 PRODUCT.md와 자동으로 동기화된다고 가정하지 말고, 확정한 정보를 일치시켜 전달해야 합니다. 공식 구성 안내

검색을 통해 들어오는 일과 들어온 사람이 신청하는 일은 서로 다른 문제입니다. 먼저 seo-audit으로 검색 접근과 페이지 정보를 점검하고, cro로 방문자가 이해하고 신청하는 과정을 검토하는 식으로 나눌 수 있습니다. CRO는 방문을 신청·구매 같은 목표 행동으로 연결하는 전환율 개선을 뜻합니다. SEO 감사 지침, CRO 지침

검토 범위	공방 페이지에서 볼 항목	운영하면서 확인할 자료
방문 유도	실제 지역과 수업 내용이 제목·본문에 분명한가	검색 노출·클릭, 유입 경로
신청 결정	완성품·난이도·일정·가격·취소 조건을 알 수 있는가	신청 시작과 완료, 반복 문의
폼 사용	꼭 필요한 항목만 받고 오류를 설명하는가	입력 오류와 중도 이탈
결과 측정	버튼 클릭과 실제 예약 요청을 구분하는가	중복을 제외한 신청 기록

확정된 공방 정보와 화면을 읽고 marketingskills로 개선안을 제안해줘.
seo-audit으로 색인 접근과 제목·본문을 검토하고,
cro로 수업 이해, 신뢰 자료, 신청 버튼, 폼 오류와 완료 안내를 점검해줘.
검색량이나 실제 후기는 추정해서 쓰지 마.
변경안마다 이유, 필요한 근거, 확인할 지표를 적어줘.
버튼 클릭과 서버에 저장된 예약 요청은 별도로 측정하도록 제안해줘.

검색 순위나 신청 증가를 개선안만으로 확정할 수는 없습니다. 운영 자료가 쌓이면 어떤 유입의 방문자가 어디에서 멈췄는지 확인하고, 영향을 구분할 수 있도록 주요 변경을 나눠 검토하는 편이 좋습니다.

Security Audit으로 코드의 위험과 판단 근거 확인하기

Cloudflare의 Security Audit은 소스 코드를 중심으로 보안 문제를 조사하는 스킬입니다. 구조 파악, 문제 후보 탐색, 반증 검토, 구조화된 결과 작성, 독립적인 기록 확인, 보고의 여섯 단계를 제시합니다. Impeccable의 화면 품질 audit과는 검토 대상이 다릅니다. Cloudflare 공식 절차

예약 페이지라면 다른 사람의 예약을 열람할 수 있는지, 관리자 권한이 서버에서 검사되는지, 공개 코드에 비밀 값이 들어갔는지 등이 검토 질문이 됩니다. 정적인 소개 페이지만 있는 경우와 개인정보를 저장하는 서버가 있는 경우는 검토 범위가 달라집니다.

공식 지침은 결과의 상태를 다음처럼 구분합니다.

상태	의미	독자가 취할 행동
confirmed	소스 경로와 제한된 검증 결과로 뒷받침한 문제	영향과 심각도를 읽고 수정·재확인
needs_validation	판단에 필요한 특정 사실이 아직 확인되지 않은 후보	필요한 설정이나 실행 조건을 확인
rejected	반증돼 문제로 채택하지 않은 후보	제외한 이유를 기록하고 중복 보고 방지

needs_validation에는 심각도를 붙이지 않는 것이 이 도구의 규칙입니다. 확인된 취약점의 심각도와 판단을 끝내기 위해 필요한 사실을 혼동하지 않도록 설계한 구분입니다. 이 상태가 곧 모든 프로젝트에 남겨야 할 개발 할 일 목록이라는 뜻은 아닙니다. 공식 결과 판정 기준

내가 소유한 예약 페이지의 소스와 허용된 로컬 테스트 범위에서
Security Audit으로 개인정보 접근과 관리자 권한 경계를 검토해줘.
확인한 문제는 소스 위치, 영향, 근거와 함께 설명하고,
판단에 필요한 설정은 구체적으로 분리해줘.
운영 데이터에 접근하거나 실제 예약·결제·메일 발송을 실행하지 마.
수정이 필요하면 먼저 수정안과 재확인 방법을 제시해줘.

실행 검증에는 도구가 요구하는 환경도 필요합니다. 공식 스킬은 대상 코드 실행 시 운영체제 수준의 격리, 외부 통신 차단, 제한된 쓰기 경로와 실행 자원 등을 요구합니다. 채팅에 “안전하게 실행”이라고 적는 것만으로 이런 조건이 만들어지지는 않습니다. 사용 중인 에이전트와 실행 환경에서 충족하는지 확인해야 합니다. 공식 실행 통제 지침

보안 결정은 마지막에만 하는 일이 아닙니다. 기획 때 수집 정보와 관리자 권한을 정하고, 구현 중 그 경계를 유지하며, 공개 전 소스와 실행 결과를 확인합니다. 신청 폼이나 권한 처리를 바꾸면 해당 부분을 다시 검토하는 흐름이 필요합니다.

다음 단계가 읽을 자료를 남기기

네 도구를 연결할 때는 긴 지시문 하나보다 짧고 일관된 자료가 유용합니다. 아래는 원데이 클래스 페이지에 적용할 수 있는 산출물 구성 예시입니다.

넘겨줄 자료	들어갈 내용	다음 작업에서 쓰는 방법
기획 요약	확정 사실·가정·고객·예약 처리·범위	화면과 문구가 같은 조건을 따르게 함
PRODUCT.md와 디자인 기준	고객·목적·제약, 정보 순서와 시각 규칙	Impeccable의 후속 설계·검토에 사용
마케팅 맥락과 측정 계획	실제 상품 정보·유입 경로·목표 행동	marketingskills의 맥락 파일과 내용 일치
공개 전 검토 기록	화면·신청 흐름·권한 확인과 수정 결과	변경 후 필요한 부분을 다시 확인

요약을 넘길 때는 “이 문서의 확정 정보부터 읽고, 부족한 사실은 질문해 달라”고 지시하세요. 도구가 바뀌어도 같은 상품과 운영 조건을 유지할 수 있습니다. 설치와 호출 방식은 각 저장소의 현재 안내를 따르고, 사용할 스킬과 필요한 권한을 확인해 연결하면 됩니다. 네 저장소의 이름을 한 번에 입력한다고 자동으로 작업 순서가 구성되는 것은 아닙니다.

검수 기준을 더 구체화하려면 에이전트 산출물 품질 평가를 함께 읽어보세요. 좋은 페이지는 기획에서 정한 약속, 화면의 설명, 실제 신청 처리와 코드의 권한 경계가 일치할 때 완성됩니다. 네 스킬은 그 일치를 단계별로 확인하는 데 활용할 수 있습니다.

자주 묻는 질문

Q1. 네 스킬을 모두 설치해야 시작할 수 있나요?

현재 필요한 단계부터 시작할 수 있습니다. 상품 조건이 정해지지 않았다면 인터뷰부터, 이미 운영 중인 페이지의 신청 흐름이 문제라면 상품 정보를 정리한 뒤 CRO 검토부터 진행해도 됩니다.

Q2. Impeccable의 audit을 통과하면 보안 검토도 끝난 건가요?

화면의 접근성·성능·반응형 품질과 코드의 권한·데이터 보호는 검토 대상이 다릅니다. 예약 정보를 저장한다면 서버의 접근 통제를 별도로 확인해야 합니다.

Q3. 설치와 AI 사용에 드는 비용은 같은가요?

스킬 파일을 받는 비용과 연결한 모델·외부 서비스의 사용료는 구분해야 합니다. 사용할 에이전트와 모델, 분석 도구의 조건을 확인하고 작은 범위부터 실행하세요.

Q4. 네 단계를 한 번 마치면 이후에는 다시 볼 필요가 없나요?

가격이나 신청 방식이 바뀌면 설명과 화면을 함께 고치고, 데이터 처리나 관리자 기능이 바뀌면 관련 권한을 다시 확인해야 합니다. 처음부터 전부 반복하기보다 변경한 내용이 영향을 주는 부분을 찾아 검토하면 됩니다.

공식 자료와 확인 기준일

확인 기준일: 2026-10-21. 저장소 문서 링크는 확인한 커밋에 고정했으며, 설치·호출 방식의 최신 변경은 각 저장소 첫 화면에서 확인할 수 있습니다.

• Matt Pocock skills와 Grill Me
• Impeccable 명령과 설치 안내
• Impeccable 공식 Neo Mirai 사례와 이미지 출처
• Corey Haines marketingskills
• Cloudflare Security Audit