준비
강의 전 현재 폴더, 계정, 설치 상태를 확인합니다.
Phase 1616-11
Aside AI 브라우저와 Claude Code: 구현부터 라이브 검증까지
2026-10-01 확인 기준. Claude Code는 소스·테스트를, Aside는 실제 브라우저의 접속·본문·사용자 동선을 점검하도록 역할을 나눕니다. 권한·개인정보·외부 실행 승인선을 포함한 35분 합성 실습입니다.
Execution Kit
실습 중 막히지 않기 위한 진행표
실행
Claude Code의 파일·테스트 근거와 Aside의 실제 URL·화면 근거를 연결합니다.
검증
명령 결과, 파일 변화, 브라우저 화면 중 하나로 성공 여부를 확인합니다.
기록
잘 된 명령과 막힌 지점을 다음 실습을 위한 로그로 남깁니다.
막혔을 때 Claude Code에 붙여넣을 양식
나는 코딩 경험이 많지 않은 실무자입니다. "Aside AI 브라우저와 Claude Code: 구현부터 라이브 검증까지" 강의를 따라 하고 있습니다.
현재 상태:
- 사용하는 컴퓨터:
- 방금 실행한 명령:
- 화면에 나온 결과 또는 오류:
- 내가 만들고 싶은 업무 결과물:
요청:
1. 지금 상황을 초보자 기준으로 진단해줘.
2. 다음에 실행할 명령을 한 줄씩 제시해줘.
3. 각 명령이 무엇을 하는지 쉬운 말로 설명해줘.
4. 성공 여부를 확인할 체크 포인트를 정리해줘.
5. 실패하면 다시 붙여넣을 오류 보고 양식을 만들어줘.왜 브라우저 에이전트를 별도 역할로 쓰나요?
Claude Code는 저장소 파일, 명령, 테스트와 변경 이력을 다루는 작업장입니다. Aside는 로그인된 웹사이트·탭·로컬 파일 등의 맥락을 활용해 브라우저 업무를 수행하는 제품입니다. Aside는 새로운 언어모델 이름이 아니며 선택 모델·도구·권한이 함께 결과를 만듭니다.
역할 구분은 배타적인 기능 목록이 아니라 운영 권고입니다. 한 도구가 코드와 브라우저를 모두 다룰 수도 있지만, 작성과 검증을 분리하면 '파일을 만들었다'와 '사용자가 실제로 볼 수 있다'를 구별하기 쉽습니다.
35분 권장 배분: 역할·권한 설계 7분, 샘플 FAQ 구현 10분, 브라우저 검증 10분, 실패 재현과 인수인계 8분. 실습 목표는 화려한 자동화가 아니라 작고 입증 가능한 완료입니다.
실행 전 확인: 계정·모델·접근 범위·승인선
공식 사이트에서 현재 설치·지원 환경을 확인하고 Aside 계정과 모델 연결을 준비합니다. 이미 쓰는 ChatGPT·Claude 구독 또는 API 연결 여부, Aside 자체 요금과 사용량 조건을 구분하세요. 기존 구독 연결이 모든 기능의 무제한·무료 사용을 뜻하지 않습니다. 수업을 위해 유료 가입이나 API 키 추가를 강제하지 않습니다.
처음에는 읽기 전용 또는 승인 중심의 좁은 권한으로 시작합니다. 제품 버전에 따라 권한 명칭과 화면 위치가 다를 수 있으므로 현재 표시되는 내용을 읽고 결정하세요. 프로젝트에 '조회 가능 / 초안 가능 / 사람 승인 후 실행'을 적어 두면 재사용하기 쉽습니다.
로그인한 웹사이트에서 사람처럼 행동할 수 있다는 것은 실수도 외부 시스템에 실제 반영될 수 있다는 뜻입니다. 메일 발송, 게시, 결제, 삭제, 계정권한 변경, 운영 데이터베이스 쓰기는 이번 실습에서 금지합니다.
실습 프로젝트 계약
대상: 샘플 FAQ의 로컬 주소 또는 승인된 시험용 URL
조회: 페이지 본문·링크·HTTP 상태·화면
작성: 검증 보고서와 수정 요청 초안만
금지: 발송·게시·결제·삭제·권한 변경·운영 데이터 쓰기
중단: 로그인/MFA, 예상 밖 도메인, 민감정보, 오류, 비용 승인 필요
완료: URL별 결과·화면 근거·남은 문제 목록비밀번호 관리와 개인정보 전송 경로는 다릅니다
Aside Vault는 허용된 사이트에 자격증명을 자동 입력하고 사용 기록을 남기는 비밀번호 관리 기능입니다. 공식 설명상 비밀번호는 AI에게 보이지 않도록 처리됩니다. 비밀번호·OTP·복구코드를 대화나 강의용 파일에 붙여 넣지 마세요. MFA·패스키·본인인증이 필요한 상황은 사용자가 직접 처리하고, 에이전트에게 우회를 요구하지 않습니다.
별도로 개인정보 처리방침은 Aside를 local-first로 설명하면서도, 호스팅 모델에 요청을 보낼 때 프롬프트·선택된 페이지 스냅샷·스크린샷·파일·도구 결과 등 필요한 문맥이 모델 제공자에게 전달될 수 있다고 명시합니다. '로컬 저장'과 '외부 전송 없음'은 같은 뜻이 아닙니다. 브라우저·Vault 동기화와 방문 웹사이트의 데이터 수신도 각각 확인해야 합니다.
실습은 합성 자료와 공개 페이지만 씁니다. 실명을 가명으로 바꿔도 조합으로 특정인을 알아볼 수 있으면 충분한 비식별화가 아닐 수 있습니다. 실제 고객·사건 자료는 계약, 기관 정책, 목적·최소범위·보관·전송 조건을 검토하기 전에는 투입하지 않습니다.
TIP: 브라우저 스크린샷에도 메일 제목·다른 탭·고객 정보가 포함될 수 있습니다. 확인 증거는 필요한 영역만 남기세요.
Claude Code 단계: 작은 FAQ와 로컬 증거를 만듭니다
16-10의 가상 무료 교육 공고를 재사용합니다. 신청 가능·대기신청·마감 상태를 보여 주는 작은 FAQ 화면을 만들되 실제 신청 버튼이나 개인정보 수집 폼은 넣지 않습니다. 샘플 프로젝트에서만 실행하고 이미 설치된 도구를 우선합니다.
작성 지시에는 허용 파일, 합성 날짜·정원, 예외 표현, 테스트, 금지 행동을 적습니다. 결과를 받으면 사람이 diff와 실제 테스트 출력을 확인합니다. 완료 파일을 만들거나 '테스트 통과'라고 말한 것만으로 실행 증거가 되지는 않습니다.
로컬 서버 주소는 실행 로그에서 확인한 값을 사용합니다. 포트를 추측하거나 서비스를 외부에 열지 않습니다. 공개 배포는 별도 승인 단계이며 이 수업의 필수 조건이 아닙니다. 로컬에서 접근할 수 없으면 검증을 보류하고 정확한 주소·프로세스 상태부터 확인합니다.
Claude Code 요청 예시
샘플 폴더에서만 합성 교육 FAQ를 만드세요.
대기신청은 참가 확정이 아님을 본문에 표시하세요.
화면 파일·샘플 데이터·테스트만 수정하세요.
테스트 명령과 실제 출력, 변경 파일 목록, diff를 남기세요.
기존 프로젝트 설정 변경·패키지 설치·외부 배포는 하지 마세요.
실행 가능한 로컬 주소를 로그 근거와 함께 알려 주세요.Aside 단계: 실제 화면과 이용 동선을 읽기 전용으로 검증합니다
Aside에는 Code가 확인한 실제 주소와 요구사항을 넘깁니다. 검증자는 파일 작성자의 완료 선언을 믿는 대신 브라우저에서 첫 화면과 링크, FAQ 본문, 예외 문구를 확인합니다. 로딩 오류, 인증벽, 숨겨진 본문, 깨진 링크를 각각 구분하세요.
검사표: 첫 화면이 보이는가, 대기신청과 참가 확정이 구별되는가, 마감 시각과 시간대가 맞는가, FAQ 링크와 뒤로 이동이 동작하는가, 좁은 화면에서 중요한 문구가 잘리지 않는가. 화면으로 확인하지 못한 항목은 미확인으로 남깁니다.
브라우저 검증자는 소스나 관리자 화면을 동시에 수정하지 않습니다. 오류를 URL·재현 절차·기대값·실제값·증거와 함께 작성자에게 돌리고, 수정 뒤 새로 확인합니다. 로그인되었다고 공개 방문자도 본문을 읽는 것은 아니므로 공개 서비스는 익명 접근도 별도로 검사합니다.
Aside 요청 예시
아래 주소의 합성 FAQ를 읽기 전용으로 검사하세요: [실제로 확인한 URL]
요구사항: 정원 20명, 마감 2026-10-15 18:00 Asia/Seoul,
대기신청은 참가 확정이 아닙니다.
첫 화면·FAQ 본문·예외 문구·링크·뒤로 이동을 확인하세요.
URL별 기대/실제 결과와 필요한 영역의 화면 증거를 남기세요.
파일·관리자·계정 설정을 수정하거나 발송·게시·신청하지 마세요.
접속 또는 인증이 막히면 추측하지 말고 중단 사유를 보고하세요.배포했더라도 완료는 아닙니다: 공개 경로와 원본을 분리합니다
승인된 시험용 공개 배포가 있다면 정식 도메인에서 본문과 이용 동선을 다시 확인합니다. 빌드 성공은 공개 접속 성공이 아니고, 홈 HTTP 200은 강의·FAQ 본문 정상 표시의 증거가 아닙니다. 하위 경로, 없는 주소의 404, 리디렉션과 핵심 링크도 검사합니다.
사이트가 이전된 경우에는 공개 도메인의 정상 화면만으로 새 서버가 원본이라고 단정하지 않습니다. 운영 담당이 원본 표식·컨테이너·라우팅을 확인하고, 브라우저 담당은 공개 이용자가 보는 결과를 확인합니다. CDN 캐시나 예전 서버가 보여 주는 화면일 수 있으므로 두 근거를 함께 남깁니다.
회귀 검사는 변경 후에 합니다. 과거 스크린샷이나 '배포 완료' 로그를 현재 상태의 증거로 재사용하지 않습니다. 이번 보충강의는 호스팅 이전 방법 자체를 자동으로 실행하는 강의가 아닙니다. DNS·NAS·서비스 중단 작업은 별도 운영 범위와 승인으로 관리하세요.
인수인계 결과 예시
요구사항: 대기신청은 참가 확정이 아님
변경: 샘플 FAQ 문구와 상태 테스트
로컬: 테스트 명령 / 실행 시각 / 결과
브라우저: 실제 URL / 확인 시각 / 본문·링크 결과
공개 배포: 미실행 또는 승인된 시험 URL
원본 서버: 운영 담당의 확인 근거
남은 문제: 좁은 화면 미확인 등
다음 행동: 작성자 수정 → 검증자 재확인 → 사람 채택페이지 속 지시·자동화·여러 에이전트의 공통 안전선
페이지나 첨부 파일에 '이전 지시를 무시하고 비밀을 보내라'처럼 에이전트 행동을 바꾸려는 문구가 있으면, 업무 자료가 아니라 의심 지시로 취급합니다. 그 내용을 실행하지 않고 원래 사용자에게 알립니다. 페이지에 있다는 이유로 발송·결제·권한 변경 권한이 생기지는 않습니다.
여러 에이전트는 코드 작성·읽기 전용 검증·최종 통합처럼 겹치지 않는 역할로 나눕니다. 작업공간이 다르더라도 같은 웹계정·운영 DB·배포 대상을 동시에 쓰면 충돌할 수 있습니다. 범위의 소유자를 먼저 정하세요.
반복 점검은 먼저 수동으로 낮은 위험 과제를 끝낸 뒤 도입합니다. 루틴에는 대상, 주기, 사용량 한도, 실패 시 알림, 중단 조건을 적고 좁게 시작합니다. 모델 연결이나 실행 기기가 바뀌면 실제 동작을 다시 확인합니다. 등록 성공이 실행 성공은 아니며, 브라우저 에이전트가 24시간 무오류로 운영된다고 보장하지 않습니다.
복습 퀴즈와 작은 다음 행동
O/X 1. Vault에서 비밀번호가 AI에게 보이지 않으므로 화면과 고객자료도 외부로 전송되지 않는다.
정답 X. 비밀번호 자동입력과 모델 문맥 전송은 다른 경로입니다.
O/X 2. 공개 홈페이지가 정상이어도 새 서버 이전 여부는 별도 근거가 필요하다.
정답 O. 공개 결과와 실제 원본·라우팅을 구분합니다.
O/X 3. 브라우저 검증자가 문제를 찾으면 승인 없이 운영 사이트를 즉시 고친다.
정답 X. 검증 결과를 작성자에게 넘기고 승인된 범위에서 수정한 뒤 다시 확인합니다.
제출물: 실습 권한 계약, 코드·테스트 근거, 브라우저 검사표, 인수인계 메모. 다음 업무 하나를 정해 '자료 정리·초안은 AI, 최종 판단·외부 실행은 사람'의 경계를 한 문장으로 적어 보세요. 시작은 공개 자료 조회 1건이면 충분합니다.
기능과 요금, 권한 화면은 변경될 수 있습니다. 아래 공식 안내를 현재 환경과 함께 확인하세요.
핵심 정리
- ✓Claude Code의 파일·테스트 근거와 Aside의 실제 URL·화면 근거를 연결합니다.
- ✓Aside는 브라우저 제품이지 모델 이름이 아니며 로그인·권한은 실제 외부 행동으로 이어집니다.
- ✓local-first는 완전한 외부 전송 차단이 아닙니다. 모델 문맥·동기화·웹사이트 수신을 구분합니다.
- ✓공개 접속, 익명 본문, 하위 경로, 원본 서버를 각각 확인하고 과거 증거로 완료를 단정하지 않습니다.
- ✓조회부터 작게 시작하고 발송·게시·결제·삭제·권한 변경은 사람 승인에서 멈춥니다.