채널톡 아이콘

[무료 특강] 코딩 없이 AI와 만드는 내 콘텐츠 아카이브 사이트 — 보라색 AI 티 벗긴 디자인 규칙·출처 아코디언·카톡 미리보기 카드 14분 실전

블로그·인스타·노션에 흩어진 내 콘텐츠를 한곳에 모으려 할 때, 코딩 없이 AI에게 웹사이트를 시키면 왜 똑같은 보라색 그라데이션·유리 효과·이모지 남발(AI 슬롭)이 나오는지 짚고, 실제 운영 중인 정적 사이트(ainewground.com · gptssam.com) 코드 기준으로 DESIGN_RULES.md 디자인 헌법, 단일 JSON 정적 빌드와 ✔/△ 출처 분리 아코디언, 0초 즉시 해금 GuideGate와 이메일 오타 교정, 카카오톡 1200×630 미리보기 카드와 3단계 배포 검증을 14분 만에 완성합니다.

3명 이 수강하고 있어요.

난이도 입문

수강기한 무제한

AI 활용법
AI 활용법
실습 중심
실습 중심
ai리서치
ai리서치
계약서
계약서
팩트체크
팩트체크
AI 활용법
AI 활용법
실습 중심
실습 중심
ai리서치
ai리서치
계약서
계약서
팩트체크
팩트체크

수강 후 이런걸 얻을 수 있어요

  • 코드를 한 줄도 짜기 전에 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토큰 에디토리얼 조판

보라색 네온 그라데이션 AI 슬롭 화면과 DESIGN_RULES.md 6토큰 크림 팔레트 및 한글 word-break keep-all 에디토리얼 조판 비교 화면

핵심 기준선 (DESIGN_RULES.md 및 style.css 6토큰): AI에게 추상적인 형용사로 디자인을 시키면 학습 데이터 평균값인 보라색 네온 다크모드가 나옵니다. 코드를 한 줄도 짜기 전에 프로젝트 루트에 [DESIGN_RULES.md]를 두고 보라색 그라데이션, 유리 효과(blur), 장식 이모지를 금지한 뒤 크림 종이 배경(#fffae7), 먹색 본문(#2f2d2d), 포인트 적색(#d02e2e) 등 6토큰과 한글 단어 줄바꿈(word-break: keep-all)을 고정합니다.

2단계 콘텐츠 신뢰와 구독 전환: 단일 JSON 빌드, 출처 분리 아코디언(✔/△), 0ms 즉시 해금 게이트

단일 JSON 정적 빌드 파이프라인과 1차 확인 원문 및 2차 참고 자료 분리 아코디언, 상단 35퍼센트 무료 공개 및 0밀리초 즉시 해금 GuideGate 설계 화면

단일 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 오픈그래프 미리보기 카드 자동 합성과 슬래시 latest 2500밀리초 폴백 리다이렉트 및 verify_site.py 배포 전 6대 자동 감사 화면

카카오톡 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 웹 제작 팁은 질문 게시판과 오픈채팅방에서 함께 나눕니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 블로그·인스타·노션에 흩어진 내 글과 가이드를 내 도메인 아카이브 사이트로 깔끔하게 모으고 싶은 1인 크리에이터·강사·전문가

  • 코딩 없이 AI로 웹페이지를 만들어 봤지만 보라색 네온 다크모드와 어색한 한글 줄바꿈, 깨진 링크 때문에 공개를 망설였던 분

  • 무거운 유료 웹빌더 구독료 없이 무료 호스팅에서 독자 이메일 구독 게이트와 카카오톡 공유 카드를 자동화하고 싶은 분

선수 지식,
필요할까요?

  • HTML·CSS 코딩 경험이 전혀 없어도 이해할 수 있도록 실제 운영 중인 정적 사이트 화면과 설정 템플릿 5종(T1~T5)으로 설명합니다

  • 준비물: 수업 자료 PDF의 AI 프롬프트(P1~P3)를 붙여 넣을 AI 도구(Claude · ChatGPT · Gemini 등) 및 무료 웹 실습기(ainewground.com)

안녕하세요
지피티쌤입니다.

261

명

수강생

9

개

수강평

4.6

점

강의 평점

14

개

강의

AI 에이전트 워크플로우와 콘텐츠 자동화 시스템을 연구·구축하는 지피티쌤입니다.

화제의 글로벌 AI 기술과 워크플로우를 직접 구현·검증한 뒤, 비개발자도 10분 만에 자신의 컴퓨터에서 똑같이 재현할 수 있도록 실행 기록·프롬프트 규격·오픈소스 스타터 킷을 파일째 공개하고 가르칩니다. 조회수나 수익 같은 과장된 약속 대신, 실제로 무엇이 작동했고 어떻게 검증했는지를 데이터와 코드로 보여 드립니다.

[주요 연구 및 강의 분야]

  • AI 에이전트 & 제2의 뇌 구축: Claude Code · Google Antigravity · Karpathy LLM Wiki 기반 지식 컴파일 및 업무 자동화

  • AI 영상·콘텐츠 제작 시스템: Google Flow(Veo) · TTS · 에이전트를 결합한 팩트체크 및 자동 렌더링 파이프라인

  • 무결성 검증 자동화: 대본·위키·데이터의 깨진 링크와 사실 관계를 전수 검사하는 린트(Lint) 파이프라인

[공식 채널 및 오픈소스 실습실]

더보기

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

지피티쌤님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

무료