PageRivet 사용 가이드

다운로드 및 실행

PageRivet은 Windows x64에서 실행되는 포터블 데스크톱 애플리케이션입니다. 설치 과정 없이 공식 패키지를 내려받아 시작할 수 있습니다.

프로젝트 시작

새 정적 웹 프로젝트를 만들거나 기존 HTML, CSS, JavaScript 프로젝트를 열어 작업할 수 있습니다.

코드 편집과 적용

PageRivet은 에디터에서 수정 중인 내용과 프로젝트에 적용된 상태를 구분합니다. 변경 범위를 확인하고 검증을 거쳐 정상 상태를 반영합니다.

1. 파일 선택프로젝트 목록에서 편집할 HTML, CSS 또는 JavaScript 파일을 선택합니다.
2. 코드 편집필요한 내용을 편집기에서 수정하고 파일의 변경 범위를 함께 확인합니다.
3. 변경 상태 확인아직 적용되지 않은 편집 내용이 있는지 확인합니다.
4. 검증 및 적용HTML, CSS, JavaScript 검증 결과를 확인하고 유효한 변경을 프로젝트에 적용합니다.
5. 결과 확인미리보기와 오류·콘솔 영역에서 적용 결과를 확인합니다.

웹 페이지 미리보기

프로젝트에 존재하는 HTML 페이지를 미리보기에 표시하고, 적용된 결과를 기준으로 화면과 동작을 확인합니다.

• 미리볼 HTML 페이지를 선택합니다.
• 코드를 적용한 뒤 미리보기를 새로고침합니다.
• CSS 디자인과 JavaScript 동작을 확인합니다.
• 오류가 있으면 콘솔 정보와 관련 파일을 함께 확인합니다.

검증과 오류 확인

변경사항을 적용하기 전에 정적 구문 문제를 확인하고, 실행 중 발생한 문제는 미리보기 오류와 콘솔 정보에서 구분해 확인합니다.

MCP와 AI 클라이언트 연결

PageRivet의 로컬 MCP 서버를 사용하면 지원되는 AI 클라이언트가 활성 프로젝트를 읽고 분석하며, 현재 승인 정책과 검증 절차에 따라 허용된 변경을 요청할 수 있습니다.

1. 프로젝트 준비AI와 작업할 프로젝트를 PageRivet에서 열고 활성 상태를 확인합니다.
2. MCP 서버 실행상단의 "설정" 버튼을 누른 뒤 "MCP 설정"을 선택합니다.
3. AI 클라이언트 연결사용자 PC에 설치된 AI 클라이언트 목록을 확인하고, 사용할 클라이언트의 [연결] 버튼을 눌러 PageRivet과 연결합니다.
4. AI 클라이언트와 연결 확인AI클라이언트와 연결을 확인합니다. "PageRivet MCP 핸드셰이크 확인해줘"
5. 자연어로 요청원하는 웹 작업과 대상 페이지를 구체적으로 설명합니다.
6. 변경 검토제안된 변경 범위와 검증 결과를 확인하고, 현재 승인 정책에 따라 적용합니다.

프로젝트 내보내기

출력 형식과 위치를 지정해 프로젝트를 배포하거나 전달할 수 있는 결과물로 내보냅니다.

1. 내보내기 열기상단의 "프로젝트" 버튼을 누른 뒤 "내보내기"를 선택하거나, 상단 메뉴의 "내보내기" 버튼을 누릅니다.
2. 프리셋 선택내보내기 프리셋을 선택합니다. 기본 프리셋은 "General Web"이며, 필요하면 다른 프리셋으로 변경할 수 있습니다.
3. 출력 형식 선택프로젝트에 필요한 출력 형식을 선택합니다.
4. 내보내기 실행출력 위치를 지정한 뒤 "내보내기" 버튼을 누릅니다. 선택한 폴더 아래에 프로젝트 이름의 폴더가 생성되고 내보내기가 완료됩니다.

자주 확인할 문제