시작하기
Sitewright | 사업 설명 몇 줄이 바로 올릴 웹사이트가 됩니다

Sitewright | 사업 설명 몇 줄이 바로 올릴 웹사이트가 됩니다

무엇을 하는 곳인지 몇 줄만 알려 주면 에이전트가 페이지 구성과 문구를 짜고, 스크립트가 배포할 수 있는 웹사이트 폴더를 만듭니다. 상품 검색·카테고리·찜·장바구니·주문서, 예약 시간 선택, 문의 폼, 가격표, 시간표 표와 차트까지 실제로 동작합니다. 전달 전에는 실제 브라우저로 모바일·태블릿·데스크톱 화면과 링크, 접근성, 검색·장바구니·폼 동작을 검사하고 실패가 0이 될 때까지 고칩니다. 사이트맵, 공유 미리보기 이미지, 사업자 정보 푸터도 만들어 Cloudflare Pages·Netlify·GitHub Pages에 무료로 올릴 수 있습니다. 구독 없이 한 번 사면 결과물은 전부 내 것입니다.
#디자인#생산성#마케팅
평점
더 많은 평가가 필요합니다
판매
0
사용 방법
다운로드

Sitewright | 사업 설명 몇 줄이 바로 올릴 웹사이트가 됩니다

01_hero.webp

가게나 작은 브랜드의 홈페이지가 필요할 때, 템플릿 사이트에 가입해 빈칸을 채우다 보면 다 비슷한 모양이 됩니다.
외주를 맡기면 비용과 시간이 들고, 고치고 싶을 때마다 다시 연락해야 합니다.
Sitewright는 하는 일을 몇 줄로 알려 주면 거기에 맞는 구성과 문구로 사이트를 만들고,
실제 브라우저로 직접 눌러 보고 검사한 뒤에 넘겨 줍니다. 만든 파일은 전부 내 컴퓨터에 남고, 무료 호스팅에 그대로 올라갑니다.

이렇게 진행됩니다

  1. 짧은 질문 — 무엇을 하는 곳인지, 방문자가 해야 할 한 가지 행동(구매·예약·문의), 필요한 페이지, 분위기. 모르는 건 에이전트가 제안합니다.
  2. (선택) 참고 사이트 분위기 — 마음에 드는 사이트 주소를 주면 색·글꼴·모서리 값만 뽑아 테마로 씁니다. 문구·사진은 가져오지 않습니다.
  3. 구성과 문구 작성 — 에이전트가 site.json 하나에 페이지와 섹션, 문구를 씁니다. 과장·최상급·효능 보증 표현을 피하는 문구 가이드를 따릅니다.
  4. 빌드 — 페이지 HTML, 최적화한 이미지, 사이트맵, 공유 미리보기 이미지, 404 페이지까지 한 번에 만듭니다.
  5. 검증 — 실제 브라우저로 세 가지 화면 크기와 동작을 검사합니다. 실패가 하나라도 있으면 고치고 다시 검사합니다.
  6. 고치기 — "색을 더 따뜻하게", "가격표 추가" 같은 요청은 같은 프로젝트 위에서 이어서 고칩니다.

보기만 하는 화면이 아닙니다

02_interaction.webp
기능 무엇이 되나
상품 목록 이름 검색, 카테고리 버튼, 찜(새로고침해도 유지), 장바구니 수량·합계
주문서 장바구니 내용과 합계가 자동으로 채워진 주문서, 개인정보 동의 체크
예약 날짜·수업 선택, 시간 버튼, 필수 칸 검사
문의 폼 수신 서비스(Formspree 등)나 메일로 접수
정보 화면 가격표, 시간표 표(제목 눌러 정렬), 막대 차트, 공지·블로그 목록 검색
모바일 접히는 메뉴, 터치하기 쉬운 버튼 크기, 가로 넘침 없는 배치

전달 전에 브라우저로 검사합니다

03_verify.webp

verify.py 가 사이트를 실제 크로미움으로 열어 확인합니다.

  • 모바일 390 · 태블릿 820 · 데스크톱 1440 전체 스크린샷과 한 장 요약
  • 가로 넘침, 콘솔 에러, 404 요청, 깨진 이미지(화면 아래 사진까지), 내부 링크와 #앵커
  • 페이지마다 h1 하나, 이미지 대체 텍스트, 입력칸 라벨, 이름 없는 버튼, 모바일 터치 영역
  • 제목·설명 길이, 공유 미리보기 태그
  • 모바일 메뉴, 검색·카테고리, 찜 유지, 장바구니 합계, 빈 칸 제출 차단, 정상 접수를 직접 클릭해서 확인

하는 일에 맞춰 구성합니다

04_gallery.webp

섹션 17종(히어로, 특징, 숫자, 단계, 갤러리, 후기, 가격표, FAQ, 상품, 예약, 연락처, 강조 띠, 글, 공지 목록, 표·차트 등)과
테마 6종을 섞어 씁니다. 사진이 없어도 사진 없는 구성으로 만듭니다. 섹션으로 안 되는 화면은 직접 HTML 을 넣을 수 있습니다.

검색 등록과 공유까지

05_seo.webp

사이트맵, robots.txt, 페이지별 제목·설명, 카카오톡·SNS 공유 미리보기 이미지, 파비콘, 사업자 정보 푸터와 검색엔진용 구조화 데이터를 만듭니다.
네이버 서치어드바이저·구글 서치 콘솔 등록 순서와, Cloudflare Pages·Netlify·GitHub Pages·Vercel 무료 배포 방법을 가이드로 넣었습니다.

실제 명령

uv run --with playwright playwright install chromium        # 처음 한 번
uv run scripts/ref_style.py https://참고사이트 --out ref      # 선택
uv run scripts/build.py  --site site.json --out dist
uv run scripts/verify.py --dist dist --report report

포함 구성

파일 내용
SKILL.md 에이전트 작업 순서(질문 → 구성 → 빌드 → 검증 → 수정 → 배포)
scripts/build.py site.json → 배포 가능한 사이트 폴더
scripts/verify.py 브라우저 검사, 스크린샷, 리포트
scripts/ref_style.py 참고 사이트에서 테마 값 뽑기
templates/, assets/ 섹션 템플릿, 공용 CSS·JS(프레임워크 없음)
guides/ site.json 형식, 문구 가이드, 폼 연결, 배포, 네이버·구글 검색 등록
examples/ 쇼핑몰·카페·필라테스·포트폴리오 예제 4개와 사진

이런 분께

  • 동네 가게, 공방, 스튜디오, 1인 브랜드의 첫 홈페이지가 필요한 분
  • 랜딩 페이지를 빨리 여러 개 만들어 봐야 하는 분
  • 매달 내는 사이트 빌더 구독료가 부담스러운 분

이런 경우엔 맞지 않습니다

  • 카드 결제(PG)를 사이트 안에서 바로 받아야 하는 쇼핑몰 — 장바구니는 주문서로 이어지고, 결제는 계좌 안내나 결제 링크로 받습니다
  • 회원가입·로그인·관리자 DB 가 필요한 서비스 — 찜·장바구니는 방문자 브라우저에 저장됩니다

준비물

  • uv(무료). 처음 한 번 브라우저(크로미움) 설치 명령을 실행합니다
  • Claude Code 같은 스킬을 쓰는 코딩 에이전트
  • API 키는 필요 없습니다. 사진·로고는 직접 준비합니다(없어도 됩니다)

자주 묻는 질문

Q. 코딩을 몰라도 되나요?
에이전트에게 말로 요청하면 됩니다. 배포도 폴더를 끌어다 놓는 방식이라 따라 하기 쉽게 가이드를 넣었습니다.

Q. 문의·주문 내용은 어디로 오나요?
Formspree 같은 무료 폼 수신 서비스 주소를 넣으면 메일로 옵니다. 주소를 넣지 않으면 데모 모드라 어디에도 전송되지 않고, 검증 리포트가 이를 경고합니다.

Q. 만든 사이트는 제 것인가요?
네. 결과물은 HTML·CSS·JS 파일이고 내 컴퓨터에 남습니다. 어느 호스팅으로 옮겨도 그대로 동작합니다.

Q. 참고 사이트를 그대로 베낄 수 있나요?
아니요. 색·글꼴·모서리 같은 스타일 값만 뽑습니다. 남의 문구·사진·로고는 쓰지 않습니다.

Q. 나중에 고치려면요?
같은 프로젝트에서 에이전트에게 고칠 점을 말하면 site.json 을 고치고 다시 빌드·검증합니다.

구매 안내

다운로드형 스킬 패키지(zip)입니다. 예제 4개로 바로 동작을 확인할 수 있습니다. 결과물을 영업 목적으로 쓰실 때는
표시광고법·전자상거래법 표시 의무(사업자 정보, 통신판매업 신고번호)를 꼭 확인하세요.


외부 API

Formspree 등 폼 수신 서비스 · Cloudflare Pages·Netlify·GitHub Pages·Vercel · jsDelivr·Google Fonts CDN