X-BUILDER · Claude Code 실습 교재

전자책 한 권 값으로
완성된 소스까지

Claude Code 로 웹사이트를 만드는 방법과 함께,
AI 기능이 들어간 서비스 일곱 가지의 완성 소스를 드립니다.
읽고 끝나는 것이 아니라 열어서 고쳐가며 익힙니다.

데모 직접 보기 →구매하기

Seven Screens

소스는 하나, 화면은 일곱

위쪽 띠에서 업종을 누르면 메뉴 구성 · 배치 · 색이 통째로 바뀝니다.
한 벌의 소스로 어디까지 달라질 수 있는지 직접 보세요.

팀 워크스페이스

일정 · 프로젝트 · 할일 보드 · AI 회의록

디지털 마켓

상품 · 주문 · 정산 · AI 판매 리포트

지역 영상 지도

실제 지도 · 마커 · 조회 통계

트렌드 분석

실시간 순위 · 급상승 분석 · 대본 생성

AI 견적기

질문형 견적 · 받은 문의 · 항목 설정

전문가 매칭

자연어 의뢰 분석 · 전문가 추천

일반 사이트

상품 · 견적 · 게시판 · 문의 · 관리자

How It Works

말로 시키면 화면이 바뀝니다

코드를 들여다보며 만드는 것이 아닙니다. 대화하면서 만듭니다.
아래는 Claude Code 에 그대로 적어 넣는 말입니다. 소스를 직접 고쳐 줍니다.

① 문구 바꾸기

사이트 상호를 전부 "미소가구"로 바꿔줘. 나오는 데가 여러 군데면 다 찾아서 바꿔줘.

[처리]헤더 · 푸터 · 문서 제목 · 문의 화면까지 4개 파일을 찾아 한 번에 수정했습니다.

브라우저가 저절로 바뀝니다 · 새로고침 불필요

② 화면 추가하기

디지털 마켓 앱 왼쪽 메뉴에 "고객문의" 화면을 추가해줘. 아이콘은 말풍선으로.

대시보드

상품

주문

AI 리포트

정산

고객문의새로 생김

③ 잘못됐을 때

(오류 화면 캡쳐를 그대로 붙여넣고) 이거 어떻게 고쳐?

오류 문구 안에 파일 이름과 줄 번호가 들어 있어 그 자리를 바로 찾아냅니다. 설명을 덧붙이실 필요가 없습니다.

화면을 보여주는 것이 설명보다 빠릅니다

데모에서는 지금 바로 시켜보실 수 있습니다

데모 첫 화면의 입력창에 "상호를 미소가구로 바꾸고 색은 초록으로" 라고 적어보세요.
상호 · 문구 · 색 · 메뉴 이름 · 상품 · 기능이 그 자리에서 바뀝니다.

설정에 있는 것만 바뀝니다. 결제나 회원가입처럼 없는 기능은 안 된다고 답합니다.
화면을 새로 만들거나 구조를 바꾸는 일은 Claude Code 가 합니다. 그 방법이 가이드에 있습니다.

데모에서 직접 시켜보기 →

AI & Keys

AI 기능까지 구현할 수 있습니다

AI 자리는 이미 소스에 만들어져 있습니다. 키를 연결하면 그대로 동작합니다.
무엇이 키 없이 되고 무엇이 키가 필요한지, 아래에 그대로 적었습니다.

키 없이 지금 되는 것

업종 전환 · 화면 구성 · 색 · 상품 · 견적 계산 · 게시판 · 달력 · 통계 · 메시지. 그리고 말로 바꾸기의 색·상호·기능 끄고 켜기.

무료 키 하나면 되는 것

문장으로 시키면 화면이 바뀝니다. Groq 키는 카드 등록 없이 1분이면 발급됩니다. 상담·리포트를 진짜 AI로 바꾸는 방법도 부록에 있습니다.

따로 붙이는 것

카카오·네이버·구글 지도, 결제, 로그인. 어디를 고쳐야 하는지와 지시문까지 부록에 적어 두었습니다.

키는 코드가 아니라 환경변수에 넣습니다.
GitHub 에 올라가지 않게 하는 방법과, 배포한 뒤 다시 넣는 자리까지 부록에 적혀 있습니다.

Responsive

모든 디바이스 반응형 최적화

휴대폰 · 태블릿 · 노트북 · 큰 모니터까지 실제 기기 폭으로 하나씩 확인했습니다.
일곱 업종 전 화면 기준입니다. 받아서 바로 쓰실 수 있습니다.

360px ~ 1680px

가장 좁은 휴대폰부터 큰 모니터까지 가로 스크롤 없이

태블릿 · 노트북

메뉴 · 표 · 차트가 폭에 맞춰 다시 배치됩니다

일곱 업종 전부

한 화면만 맞춘 것이 아니라 모든 화면을 확인했습니다

터치 영역

버튼과 글자를 손가락 기준 크기로 잡았습니다

The Guide

102페이지 · 7부 46장 + 부록

도구 설치부터 인터넷 배포까지, 순서대로 따라가면 끝나도록 짰습니다.

1부

도구를 갖춥니다

VS Code · Claude Code 설치, 나머지는 Claude Code 에게 시켜서

2부

Claude Code 를 다룹니다

지시하는 방법 · 지시문 30가지 예시 · 잘못된 결과 바로잡기

3부

소스의 구조

폴더 구성 · 파일이 주소가 되는 규칙 · 화면이 만들어지는 과정

4부

React

컴포넌트 · props · state · 목록 · 조건 · useEffect · Context

실제 작업은 Claude Code 가 합니다. 여기 적은 것은 화면이 무엇으로 이루어져 있는지 감을 잡기 위한 기본 개념이라, 외우거나 직접 쓸 줄 몰라도 됩니다.

5부

Next.js

서버와 브라우저 · 페이지 이동 · 이미지 · 빌드

이것도 마찬가지입니다. 용어가 눈에 익으면 Claude Code 가 한 일을 알아볼 수 있어 지시가 정확해집니다. 그 정도면 충분합니다.

6부

Tailwind CSS

클래스로 꾸미기 · 반응형 · 색을 한 곳에서

7부

바꾸고 배포합니다

상호 · 상품 · 견적 · 색 교체 → GitHub → 인터넷 배포

Pricing

전자책 한 권 값

보통은 이렇게 나뉘어 팔립니다

Claude Code 강의 (영상 · 전자책)5만 ~ 30만원

실습용 완성 소스따로 구해야 함

업종별 예제 화면없음

배포까지 안내강의마다 다름

X-BUILDER 는 전부 포함

129,000원

소스 + 가이드 한 묶음

X-BUILDER 패키지

129,000원

포함

✓일곱 업종 완성 소스 전체
✓102페이지 제작 가이드 (PDF)
✓말로 시켜서 화면 바꾸는 AI 기능
✓AI · 지도 키 붙이는 법 (부록)
✓모바일 · 태블릿 대응 완료
✓지시문 30가지 예시
✓GitHub · 배포 가이드

미포함

Claude Code 구독료
회원 · 결제 등 서버 기능
설치 대행

여기서 더 나아가려면

회원 관리 · 데이터베이스 · AI 연동 · 관리자 기능까지 실제로 동작하는 완성 제품을 따로 준비해 두었습니다.

·AI Starter
·Reverie Works
·Project Connect

같은 사양을 외주로 맡기면 수천만원이 듭니다.

커스터마이징

직접 만들어 보다 막히시면 도와드립니다. 브랜드 적용 · 기능 추가 · 배포까지 별도 문의 주세요.

FAQ

자주 묻는 질문

개발을 전혀 모르는데 할 수 있나요?

이 가이드는 그런 분을 기준으로 쓰였습니다. 코드를 작성하는 것이 아니라 Claude Code 에게 지시하는 방식이라, 만들고 싶은 것을 말로 설명할 수 있으면 됩니다.

다른 Claude Code 강의와 무엇이 다른가요?

완성된 소스가 함께 옵니다. 빈 화면에서 시작하면 무엇을 지시해야 할지조차 막막하지만, 이미 돌아가는 것을 열어 고치면서 배우면 훨씬 빠릅니다. 예제도 실제로 운영 중인 서비스를 본떠 만든 일곱 가지입니다.

이 소스로 바로 사업을 시작할 수 있나요?

상호와 상품을 바꿔 소개용 사이트로 쓰실 수 있습니다. 다만 회원 관리나 결제처럼 서버가 필요한 기능은 예제에서 덜어냈습니다. 구조를 보이게 하려는 의도인데, 가이드의 방식이 손에 익으면 그 기능들도 같은 방식으로 붙일 수 있습니다. 처음부터 다 갖춰진 것이 필요하시면 X 스토어의 완성 제품을 보세요.

Claude Code 요금은 따로 드나요?

네, 월 구독 서비스입니다. 가장 낮은 요금제로도 가이드의 실습은 전부 하실 수 있습니다. 이 상품에는 포함되지 않습니다.

맥에서도 되나요?

됩니다. 설치 화면의 버튼 이름만 조금 다르고 나머지는 같습니다. 다른 부분이 나오면 그 화면을 캡쳐해서 Claude Code 에게 물어보는 방법까지 가이드에 적어 두었습니다.

직접 눌러보시면 압니다

업종 버튼 하나로 화면이 통째로 바뀌는 것을
글로 설명드리기가 어렵습니다. 데모를 열어보세요.