[무료 특강] 코딩 없이 AI와 만드는 내 콘텐츠 아카이브 사이트 — 보라색 AI 티 벗긴 디자인 규칙·출처 아코디언·카톡 미리보기 카드 14분 실전
블로그·인스타·노션에 흩어진 내 콘텐츠를 한곳에 모으려 할 때, 코딩 없이 AI에게 웹사이트를 시키면 왜 똑같은 보라색 그라데이션·유리 효과·이모지 남발(AI 슬롭)이 나오는지 짚고, 실제 운영 중인 정적 사이트(ainewground.com · gptssam.com) 코드 기준으로 DESIGN_RULES.md 디자인 헌법, 단일 JSON 정적 빌드와 ✔/△ 출처 분리 아코디언, 0초 즉시 해금 GuideGate와 이메일 오타 교정, 카카오톡 1200×630 미리보기 카드와 3단계 배포 검증을 14분 만에 완성합니다.
코드를 한 줄도 짜기 전에 DESIGN_RULES.md로 보라색 그라데이션·유리 효과·이모지 남발을 금지하고 4색 토큰과 한글 줄바꿈(keep-all)을 고정하는 법
글이 수십 편으로 늘어나도 번호가 안 꼬이는 단일 JSON 정적 빌드 구조와 1차 확인 사실(✔)·추론(△)을 분리하는 HTML5 출처 아코디언 구현법
유료 서버 없이 상단 35% 무료 열람 후 이메일 도메인 오타(gamil.com·navr.com 등)를 잡아내고 0초 만에 본문을 여는 GuideGate 설계법
카카오톡 공유 시 깨지지 않는 1200×630 오픈그래프(OG) 카드 절대경로 설정과 최신 별칭(og-card-latest.png) 및 배포 전 3단계 검증 루틴
지피티쌤 무료 특강 / 본편 6개 / 5쪽 실전 키트 PDF + 무료 웹 실습기(W1)
코딩 없이 AI에게 웹사이트를 만들어 달라고 하면, 왜 다 똑같은 보라색 그라데이션과 깨진 링크가 나올까요?
블로그, 인스타그램, 노션에 흩어진 내 글과 가이드를 내 도메인 아카이브 사이트로 모으고 싶은 1인 제작자, 강사, 전문가를 위한 인공지능(AI) 활용 특강입니다. 코딩 AI(Claude, ChatGPT, Gemini 등)에게 막연히 사이트를 짜 달라고 하면 눈 아픈 보라색 네온 다크모드(AI 슬롭)와 어색한 한글 줄바꿈, 작동하지 않는 가짜 버튼이 튀어나옵니다. 실제 운영 중인 정적 사이트(ainewground.com 및 gptssam.com, 2026년 11월 5일 코드 기준)를 그대로 해부해, 디자인 헌법 선언부터 출처 분리 아코디언, 0초 즉시 해금 구독 게이트, 카카오톡 1200x630 미리보기 카드와 배포 전 자동 검증까지 14분 만에 완성합니다.
디자인 헌법 고정
코딩 전 DESIGN_RULES.md 한 장으로 보라색 네온 그라데이션을 원천 차단하고 6토큰 크림 팔레트와 한글 단어 줄바꿈(keep-all)을 고정
출처 아코디언과 게이트
단일 JSON 정적 빌드 + 1차 확인 원문(✔)과 2차 참고(△) 분리 아코디언 + 도메인 오타 6종 자동 교정 및 0ms 즉시 해금(GuideGate)
카톡 카드와 배포 감사
글마다 전용 제목이 박힌 카카오톡 1200x630 오픈그래프(OG) 카드 자동 합성 + /latest 302 리다이렉트(2500ms 폴백) + 배포 전 12항목 감사
내 콘텐츠 사이트를 만들려다 이런 벽에 한 번이라도 부딪히셨다면 꼭 확인하세요
AI에게 깔끔한 사이트를 만들어 달라고 했는데 왜 자꾸 보라색 네온 배경과 유리 카드, 로켓 이모지만 가득 나올까요?
글이 15편, 80편으로 늘어나니까 HTML 파일을 손으로 복사하다가 메뉴랑 이전 글 링크가 다 깨져 버렸어요.
무료 가이드 PDF를 나누어 주고 독자 이메일을 받고 싶은데 유료 웹빌더나 무거운 회원 DB 서버를 매달 결제해야 하나요?
카카오톡 단톡방에 내 글 주소를 공유했더니 미리보기 그림이 빈 상자로 뜨거나 옛날 제목이 안 바뀌어요.
네 가지 모두 코딩 실력이 부족해서가 아니라 AI에게 먼저 건네야 할 디자인 규칙 파일과 정적 빌드 구조, OG 메타태그 기준선을 주지 않았기 때문입니다. 1강부터 6강까지 실제 운영 중인 사이트 코드 그대로 명쾌하게 풀어 드립니다.
완성품: 실제 운영 중인 에디토리얼 정적 아카이브 사이트 3대 핵심 구조
이론용 샘플이 아니라 강사 지피티쌤이 실제로 수십 편의 브리핑 아티클과 열다섯 편의 실전 가이드를 배포하며 운영 중인 정적 사이트(ainewground.com 및 gptssam.com, 2026년 11월 5일 기준)의 실제 설정 파일과 스크립트를 1:1로 대조했습니다.
1단계 디자인 헌법: 보라색 AI 슬롭 차단과 6토큰 에디토리얼 조판
핵심 기준선 (DESIGN_RULES.md 및 style.css 6토큰): AI에게 추상적인 형용사로 디자인을 시키면 학습 데이터 평균값인 보라색 네온 다크모드가 나옵니다. 코드를 한 줄도 짜기 전에 프로젝트 루트에 [DESIGN_RULES.md]를 두고 보라색 그라데이션, 유리 효과(blur), 장식 이모지를 금지한 뒤 크림 종이 배경(#fffae7), 먹색 본문(#2f2d2d), 포인트 적색(#d02e2e) 등 6토큰과 한글 단어 줄바꿈(word-break: keep-all)을 고정합니다.
2단계 콘텐츠 신뢰와 구독 전환: 단일 JSON 빌드, 출처 분리 아코디언(✔/△), 0ms 즉시 해금 게이트
단일 JSON(guides.json) 정적 빌드와 ✔/△ 출처 분리 아코디언: 글이 늘어날 때 HTML을 수동 복제하지 않고 단일 JSON 배열에서 build.py로 전체 페이지와 번호, RSS, 사이트맵을 한 번에 찍어 냅니다. 본문 하단에는 표준 HTML5 <details> 아코디언을 두어 공식 법령과 표준 문서인 ✔ 1차 확인 원문과 해설 및 참고 자료인 △ 2차 참고 자료를 정직하게 분리해 표기합니다.
0ms 낙관적 즉시 해금(GuideGate)과 한국인 이메일 오타 6종 자동 교정: 본문 상단 35%는 검색엔진과 첫 방문자를 위해 무료로 열어 두고, 이메일 입력 시 서버 응답을 기다리지 않고 쿠키(365일)와 localStorage로 0ms 만에 즉시 해금합니다. 동시에 한국 사용자가 자주 틀리는 gamil.com, navr.com, hanmial.net, daum.ent 등 6종 오타를 제출 직전 자동 교정합니다.
3단계 메신저 배급과 배포 검증: 카카오톡 1200x630 OG 카드, /latest 302 리다이렉트, verify_site.py 자동 감사
카카오톡 1200x630 OG 카드와 /latest 단일 링크 및 verify_site.py: 글마다 제목과 요약이 박힌 1200x630 PNG를 자동 합성해 https:// 전체 절대경로로 연결하고, 인스타그램이나 오픈채팅 프로필에는 /latest 주소 하나만 걸어 가장 최신 글로 자동 302 이동(외부 지연 시 2500ms 타임아웃 후 /new/ 폴백)시킵니다. 배포 직전에는 verify_site.py를 돌려 깨진 내부 링크, 빈 앵커(href="#"), 상대경로 OG 이미지, 과장 금칙어를 1초 만에 전수 검사합니다.
병목 1 / 보라색 AI 슬롭과 한글 깨짐
DESIGN_RULES.md 6토큰 고정
네온 그라데이션과 유리 효과를 금지하고 종이 크림색(#fffae7), 먹색(#2f2d2d), 포인트 적색(#d02e2e)과 word-break: keep-all을 먼저 선언합니다.
병목 2 / 출처 불신과 구독 이탈
✔/△ 출처 분리와 0ms 해금
1차 확인 원문(✔)과 2차 참고(△)를 접기/펼치기 아코디언에 분리하고, 상단 35% 무료 공개 뒤 이메일 오타 교정과 0ms 즉시 해금을 결합합니다.
병목 3 / 카톡 빈 상자와 링크 사고
1200x630 절대경로와 자동 감사
포스트별 1200x630 OG PNG 절대경로와 캐시 갱신(?t=버전), /latest 2500ms 폴백, 배포 전 verify_site.py 6대 감사를 자동화합니다.
바로 복사해 쓰는 설정 및 코드 템플릿 맛보기
1강 수업 자료 PDF와 무료 웹 실습기(W1)에는 디자인 규칙, 단일 JSON 스키마, 출처 아코디언, GuideGate, /latest 리다이렉트 등 5종의 실전 템플릿(T1~T5)이 수록되어 있습니다. 그중 두 가지를 미리 보여 드립니다.
실전 템플릿 예시: DESIGN_RULES.md 선언문(T1)과 한국인 이메일 오타 교정 및 0ms 해금(T4)
템플릿 T1 (DESIGN_RULES.md 에디토리얼 6토큰 및 슬롭 금지 규칙)
1. 금지 규칙: 보라 및 파랑 네온 그라데이션(linear-gradient), backdrop-filter 유리 효과, 제목 앞 장식용 이모지, href="#" 빈 앵커 버튼을 일절 사용하지 않는다. 2. 색상 6토큰 고정: 배경 크림(#fffae7), 보조 밴드(#f6eed2), 본문 먹색(#2f2d2d), 보조 회색(#57534e), 포인트 적색(#d02e2e), 강조 청록(#0f766e)만 사용한다. 3. 한글 조판: 모든 제목과 본문, 표 셀에 word-break: keep-all; overflow-wrap: break-word;를 기본 적용해 단어가 중간에 쪼개지지 않게 한다.
템플릿 T4 (GuideGate 도메인 오타 6종 자동 교정 및 0ms 즉시 해금)
독자가 이메일을 입력하고 제출을 누르면 gamil.com, gmial.com, navr.com, nver.com, hanmial.net, daum.ent 등 6대 빈발 오타를 정규식으로 즉시 교정한 뒤, 서버 응답을 기다리지 않고 document.cookie(max-age=31536000)와 localStorage에 해금 상태를 먼저 기록해 0ms 만에 전체 가이드를 열어 주고 웹훅 전송은 fetch keepalive: true로 백그라운드 처리한다.
강의가 끝나면 가져가는 세 가지
1. 핵심 압축 영상 6개와 3문항 점검 퀴즈
DESIGN_RULES.md 선언, 단일 JSON 정적 빌드와 출처 분리 아코디언, 0ms GuideGate, 카카오톡 1200x630 OG 카드와 배포 전 검증을 압축한 6개 수업 + 자동 해설 퀴즈
2. 수업 자료 PDF 5쪽 (c18_creator_media_site_kit.pdf)
6대 설계 기준선 표, 3자 비교표, 복붙용 템플릿 5종(T1~T5), 배포 전 12항목 감사 체크리스트, AI 코딩 프롬프트 3종(P1~P3). 1강 우측 상단 [수업 자료]에서 바로 받으실 수 있습니다.
3. 무료 웹 실습 시뮬레이터(W1) 상시 활용
보라색 AI 슬롭 vs 6토큰 에디토리얼 실시간 전환기, ✔/△ 출처 아코디언 및 이메일 오타 교정 체험기, 카카오톡 1200x630 미리보기 카드 생성기를 로그인 없이 바로 써 볼 수 있습니다.
6개 수업에서 살펴보는 순서
1강
[완성품 먼저] 코딩 없이 AI에게 웹사이트를 맡길 때 생기는 5가지 실패 원인을 짚고, 무료 웹 실습기(W1)로 6토큰 디자인 규칙과 출처 아코디언, 카톡 공유 카드 완성본을 먼저 체험합니다.
2강
[디자인 규칙] 코드를 짜기 전에 DESIGN_RULES.md 한 장으로 보라색 네온 그라데이션과 유리 효과를 원천 차단하고, 크림 6토큰 팔레트와 한글 줄바꿈(word-break: keep-all)을 고정합니다.
3강
[출처 아코디언] 글이 84편으로 늘어나도 번호가 안 꼬이는 단일 JSON(guides.json) 정적 빌드 구조와 1차 확인 원문(✔), 2차 참고 자료(△)를 분리하는 HTML5 아코디언을 구현합니다.
4강
[무료 가이드 해금] 유료 서버 없이 본문 상단 35% 무료 열람 후 한국인 빈발 이메일 도메인 오타 6종을 잡아내고 쿠키와 localStorage로 0초 만에 본문을 여는 GuideGate를 완성합니다.
5강
[카톡 공유 카드] 카카오톡 공유 시 글마다 전용 타이포 카드를 띄우는 1200x630 OG PNG 절대경로 설정과 프로필 단일 링크 /latest 302 리다이렉트(2500ms 폴백)를 구축합니다.
6강
[배포 전 3단계 검증] 배포 직전 1초 만에 깨진 링크와 빈 앵커, 상대경로 OG 이미지, 금칙어를 잡아내는 verify_site.py 자동 감사와 프롬프트 3종(P1~P3) 실행 루틴으로 마무리합니다.
프롬프트엔지니어링과 크리에이터의 역할 분담
프롬프트엔지니어링: 디자인 헌법과 정적 빌드 명세를 AI 코딩 도구에게 맡기기
사이트 제작 전 Claude 등 AI에게 건넬 3단계 빌드 프롬프트(P1~P3)
인공지능(AI) 코딩 도구(claude, ChatGPT, Gemini, Cursor 등)에게 막연히 「예쁜 블로그 만들어 줘」라고 시키면 관리가 불가능한 스파게티 코드가 나옵니다. 수업 자료 PDF에 수록된 프롬프트엔지니어링 템플릿 3종(P1~P3)처럼 DESIGN_RULES.md 6토큰과 keep-all 조판(P1), 단일 JSON 스키마와 ✔/△ 출처 아코디언 및 0ms GuideGate(P2), 1200x630 OG 카드 합성과 verify_site.py 자동 검증(P3)을 명확한 기준으로 지시하면 코딩을 몰라도 일관된 정적 아카이브 사이트를 구축할 수 있습니다.
콘텐츠 기획과 배포에서 사람이 직접 챙길 일
AI 빌드 프롬프트(P1~P3)가 돕는 일
DESIGN_RULES.md 기반 style.css 6토큰 및 반응형 레이아웃 코드 작성(P1) 단일 JSON(guides.json) 정적 빌더(build.py)와 출처 아코디언, GuideGate 구현(P2) 포스트별 1200x630 OG PNG 자동 합성 스크립트와 verify_site.py 검증기 생성(P3)
제작자가 직접 결정하고 확인할 일
아티클 본문 작성 및 1차 공식 원문(✔)과 2차 참고 자료(△) 출처 링크 대조 확인 구독 폼 웹훅 도착지 연결 및 개인정보 수집 안내 문구 최종 점검 배포 직전 모바일 375px 화면 줄바꿈 확인 및 카카오톡 나에게 보내기로 OG 카드 실증
이 강의가 아닌 것
무거운 풀스택 웹 프레임워크(React/Next.js 심화)나 유료 결제 PG 연동, 또는 특정 조회수나 광고 수익을 보장하는 강의가 아닙니다.
실제 운영 중인 정적 콘텐츠 아카이브 사이트(ainewground.com 및 gptssam.com, 2026년 11월 5일 코드 기준)의 설계 규칙과 검증 스크립트를 바탕으로, 비개발자 제작자가 AI에게 명확한 기준을 지시해 내 도메인 사이트를 만들고 운영하는 법을 다루는 실무 교육 자료입니다.
예시 코드 및 설정 화면 속 계정 이메일, 내부 작업 경로, 웹훅 식별값은 불투명 단색 상자로 가렸습니다. 강의 음성은 AI 음성(TTS)입니다.
다음 강의
지피티쌤을 팔로우해 두시면 다음 실전 AI 활용 특강 소식을 바로 받아 보실 수 있습니다.
내 사이트 디자인 토큰이나 OG 카드 설정이 헷갈릴 땐 이렇게 점검하세요
수업 자료 PDF의 프롬프트(P1~P3)에 실제 고객 이메일이나 API 키는 빼고 HTML/CSS/JSON 구조만 넣어 AI에게 먼저 점검받아 보세요. 더 궁금한 점이나 AI 웹 제작 팁은 질문 게시판과 오픈채팅방에서 함께 나눕니다.
화제의 글로벌 AI 기술과 워크플로우를 직접 구현·검증한 뒤, 비개발자도 10분 만에 자신의 컴퓨터에서 똑같이 재현할 수 있도록 실행 기록·프롬프트 규격·오픈소스 스타터 킷을 파일째 공개하고 가르칩니다. 조회수나 수익 같은 과장된 약속 대신, 실제로 무엇이 작동했고 어떻게 검증했는지를 데이터와 코드로 보여 드립니다.
[주요 연구 및 강의 분야]
AI 에이전트 & 제2의 뇌 구축: Claude Code · Google Antigravity · Karpathy LLM Wiki 기반 지식 컴파일 및 업무 자동화
AI 영상·콘텐츠 제작 시스템: Google Flow(Veo) · TTS · 에이전트를 결합한 팩트체크 및 자동 렌더링 파이프라인
무결성 검증 자동화: 대본·위키·데이터의 깨진 링크와 사실 관계를 전수 검사하는 린트(Lint) 파이프라인