1. AI 설정은 열쇠를 맡기는 일 — 키가 어디서 와서 어디에 쓰이는지

머블로 자체가 AI를 가지고 있는 건 아닙니다. OpenAI·Anthropic·Google Gemini 세 공급자 중 한 곳에서 내 계정으로 API 키를 받아 머블로에 맡기면, 머블로가 그 키로 공급자에게 부탁하고 결과를 받아 오는 구조입니다. 그래서 요금도 머블로가 아니라 공급자 계정에서 나가고, 키는 비밀번호와 같아서 글이나 채팅에 붙여 넣으면 안 됩니다.

등록한 키는 ‘사이트 설정 → AI 설정’ 한 화면에서 관리합니다. 도메인별로 암호화해 저장하고 저장한 뒤에는 다시 보여 주지 않으며, 하루에 보낼 수 있는 요청 수와 켜고 끄는 스위치가 함께 있습니다. 쓰이는 곳은 블록 에디터 HTML 칸의 ‘AI로 HTML 만들기’ 패널이 본론이고, 틀(머리·꼬리)의 ‘HTML 직접 편집’과 반응형 진단의 ‘AI로 반응형 보정’도 같은 키를 씁니다.
아래쪽이 오늘 글의 안심 포인트입니다. AI가 준 결과를 머블로가 그대로 올리지 않고, CSS를 이 칸에만 적용되게 가두고 허용되지 않는 속성은 빼고, 반응형 검사를 해서 알려 주고, 되돌리기와 기록을 남깁니다. 키가 샜다 싶으면 ‘키 삭제’ 한 번으로 전부 꺼집니다.

2. 키 받아서 ‘사이트 설정 → AI 설정’에 등록하기

사이드바 ‘사이트 설정’ → ‘AI 설정’입니다. 지난 글의 시스템 관리 바로 아래에 있습니다. 위에 설정과 자산 목록 두 탭이 있고, 파란 안내가 핵심을 먼저 말해 줍니다. 키는 현재 도메인에만 적용되고 암호화해 저장하며, 저장된 키는 화면에도 API 응답에도 다시 표시하지 않는다는 것입니다.
카드 안은 ① AI 공급자(OpenAI·Anthropic·Google Gemini), ② 모델(공급자를 고르면 목록이 바뀝니다), ③ API 키, ④ 일일 요청 한도와 ‘이 도메인에서 AI 기능 사용’ 스위치, ⑤ ‘저장’입니다.

저희는 Google Gemini로 갑니다. 구글 계정으로 Google AI Studio(aistudio.google.com)에 들어가 ‘API 키’ 메뉴에서 키를 하나 만들면 긴 글자 한 줄이 나오는데, 그게 키입니다. 만든 자리에서 바로 복사해 두세요. 무료 한도가 있어 오늘 글의 생성 몇 번은 돈이 들지 않았습니다.

공급자 Google Gemini, 모델 gemini-3.5-flash, ① 키 칸에 복사한 키를 붙여 넣으면 점으로 가려집니다. 일일 요청 한도는 기본 50 그대로 두고 ② 스위치를 켠 뒤 ③ ‘저장’. “AI 설정이 저장되었습니다”가 뜨면 끝입니다.
두 가지만 미리 알아 두세요. 첫째, 키 없이 스위치만 켜면 “AI 기능을 켜려면 API 키가 필요합니다”라고 막힙니다. 둘째, 모델 목록 중 어느 것이 되는지는 공급자 계정 사정에 따라 다릅니다. 저희 새 계정에서는 gemini-2.5-flash가 “신규 사용자에게는 제공하지 않는다”는 답을 돌려줘서 3.5-flash로 골랐습니다. 저장은 됐는데 생성이 안 되면 모델만 바꿔 다시 저장해 보시면 됩니다.

저장하고 나면 키 칸이 비고 “등록된 키를 유지하려면 비워 두세요”가 적히며, ① 현재 상태가 키 등록됨으로 바뀝니다. 키를 바꿀 때만 새로 넣고, 그 외 설정(한도·모델·스위치)은 키 칸을 비운 채 저장하면 됩니다. 공급자를 바꾸면 그 공급자의 키를 새로 넣어야 저장됩니다.
② ‘키 삭제’는 키를 지우면서 AI 기능까지 끕니다. 키가 어딘가에 노출됐다 싶으면 여기서 지우고, 공급자 쪽 콘솔에서도 그 키를 폐기한 다음 새 키를 만드는 순서입니다.

3. 자산 목록 — AI에게 읽힐 우리 공방 자료 올려 두기

① ‘자산 목록’ 탭은 AI가 참고할 문서와 이미지를 모아 두는 곳입니다. 처음 열어도 ③ company_kit 한 줄이 이미 있는데, 초반 편에서 썼던 회사 홈페이지 시작 킷을 머블로가 자산으로 넣어 둔 것입니다. 줄을 누르면 오른쪽에 내용 미리보기와 원본 파일명·종류·크기·등록일·SHA-256이 나오고, ‘원본 보기’와 ‘삭제’가 있습니다.
올릴 수 있는 형식은 이미지·PDF·TXT·MD·CSV·JSON·DOCX·XLSX·PPTX이고, 이미지 20MB·PDF 32MB·그 외 문서 20MB까지입니다. 저희는 공방 소개를 메모장 열 줄로 적은 hangyeol_intro.txt를 준비했습니다. 위치, 운영 시간, 원데이 클래스 세 가지의 시간과 가격, 재료비 안내, 예약 방법입니다.

② ‘자산 추가’를 눌러 파일을 고르면 ① 목록 맨 위에 붙고, 상세에 ② 글 내용이 그대로 보입니다. 이렇게 미리 올려 두는 이유는 둘입니다. 요청할 때마다 가격과 시간을 다시 타이핑하지 않아도 되고, AI가 숫자를 지어내지 않고 자료에 적힌 대로 씁니다. 한 번의 요청에 자료는 최대 10개(이미지는 6개)까지 붙일 수 있습니다. 잘못 올렸으면 ③ ‘삭제’입니다.

4. 블록 에디터에서 HTML 칸 고르기 — ‘AI로 HTML 만들기’ 패널 열기

‘블록 관리’ → ‘블록 에디터’에서 메인화면을 열고 맨 아래에 행을 하나 추가한 다음 그 칸을 누릅니다. 오른쪽 칸 편집 패널의 ‘빈 칸’ 옆 ① ‘고르기’를 누르면 익숙한 “무엇을 보여줄까요?” 창이 뜨고, 기본 묶음의 ② ‘HTML 직접입력’을 고릅니다. 여기까지는 앞 편들에서 이미지나 메뉴를 넣을 때와 똑같습니다.

HTML 내용 편집 창이 열리면 왼쪽에 ‘AI로 HTML 만들기’ 패널이 붙어 있습니다. ① 요청 칸(예시처럼 한 문단으로 적는 자리, 4,000자까지), ② 참고 자료(이 자리에서도 업로드되고, 3단계에서 올린 자료가 줄로 보입니다), ③ ‘새로 만들기’와 ‘현재 내용 수정’ 중 고르는 모드, ④ ‘생성’, 오른쪽 위의 ‘AI 설정’ 링크는 2단계 화면으로 갑니다. “슬라이드·탭·아코디언은 검증된 Core 동작으로 안전하게 생성됩니다”는 그런 움직이는 요소를 부탁해도 머블로가 가진 동작으로 만들어 준다는 뜻입니다.
처음 열면 ⑤ “HTML 타입을 먼저 저장한 뒤 AI를 사용할 수 있습니다”가 적혀 있고 ‘생성’이 눌리지 않습니다. 방금 타입을 고른 칸이라 아직 서버에 HTML 칸으로 저장되지 않았기 때문입니다. 저희는 “AI가 채울 자리입니다” 한 줄만 적고 창의 ‘저장’, 패널의 ‘적용’을 누른 뒤 ‘내용 편집’으로 다시 열었습니다. 그러면 안내가 사라지고 ‘생성’이 켜집니다.

5. 생성 — 자료 고르고 한 문단으로 부탁하기, 그리고 말로 고치기

① 요청은 이렇게 적었습니다. “한결 공방의 원데이 클래스 3가지(도마 만들기, 우드 트레이, 나무 스툴)를 카드 3장으로 소개하는 반응형 섹션을 만들어줘. 카드마다 클래스 이름, 두 줄 설명, 소요 시간과 가격, ‘예약하기’ 버튼을 넣고, 따뜻한 베이지 톤으로. 첨부한 공방 소개 자료의 내용을 그대로 써줘.”
② hangyeol_intro 줄을 눌러 파란 테두리를 만들고(선택된 자료만 같이 보냅니다) 모드는 ‘새로 만들기’, ③ ‘생성’입니다. 요령은 무엇을(카드 3장), 안에 뭐가 들어가는지(이름·설명·시간·가격·버튼), 분위기(베이지), 자료 그대로 네 가지를 한 문단에 넣는 것입니다.

① 버튼이 ‘생성 중입니다’로 바뀌고 잠시 기다립니다. 저희는 삼십 초 안팎 걸렸습니다. 이 한 번이 2단계에서 정한 일일 한도 50회 중 1회입니다.

오른쪽 편집기에 결과가 들어옵니다. “손으로 만드는 나무의 따뜻한 온기”라는 제목과 부제, 호두나무·오크 판재·가구 제작 태그가 붙은 카드 세 장에 이름·두 줄 설명·시간·가격·‘예약하기’ 버튼, 맨 아래에는 자료에 있던 위치와 운영 시간까지 띠로 넣었습니다. 가격 55,000·68,000·120,000원과 시간은 자료 그대로입니다.
① 패널 아래 결과 설명을 꼭 읽어 보세요. 무엇을 만들었는지 한 줄 다음에 “허용되지 않는 CSS 속성을 제외했습니다: border-top”, “반응형 검사 오류 0건, 경고 5건”이 붙어 있습니다. 머블로가 AI 결과를 검사해서 허용되지 않는 속성은 빼고, 반응형 검사 결과를 보고한 것입니다. 경고는 게시를 막지 않는 참고 사항입니다. ③ CSS 칸에는 ‘AI 생성’ 표시와 함께 mublo-block-으로 시작하는 이름이 앞에 붙어 있는데, 이 칸에만 적용되는 CSS라는 뜻이라 다른 블록을 건드리지 않습니다.
아직 저장 전이니 마음에 안 들면 ② ‘되돌리기’로 빈 칸으로 돌리거나, 요청을 고쳐 ‘다시 생성’하면 됩니다. ④ ‘저장’은 6단계에서 누릅니다.

결과를 통째로 다시 만들지 않고 한 군데만 고치고 싶을 때가 수정 모드입니다. ② 모드를 ‘현재 내용 수정’으로 바꾸고 ① “예약하기 버튼을 진한 남색(#153b70)으로 바꾸고, 카드 세 장 아래에 ‘모든 클래스는 재료비·공구 대여 포함, 완성품은 당일 가져갑니다’ 한 줄을 작게 추가해줘”라고 적어 ‘다시 생성’. 버튼 세 개가 남색이 되고 ③ 카드 아래 작은 글이 한 줄 생겼습니다. 나머지는 그대로입니다.
CSS를 몰라도 색과 문장을 말로 바꿀 수 있다는 게 이 모드의 값어치이고, 한 번에 한두 가지씩 부탁하는 편이 결과가 깔끔합니다.

① ‘최근 생성 기록’을 펼치면 이 도메인에서 보낸 요청이 요청 글·모델·시각으로 쌓여 있습니다. 저희 기록에는 글 쓰기 전에 연습한 두 줄도 보입니다. 줄을 누르면 그때의 요청 글과 모드, 자료 선택이 패널에 다시 채워지고, 줄 안의 ‘결과’를 누르면 그때 받은 결과물이 편집기로 되살아납니다. 지난주에 만들었던 버전으로 돌아가고 싶을 때 쓰는 자리입니다.
② ‘되돌리기’는 마지막 AI 작업 직전 상태(HTML·CSS·JS)로 한 번 돌립니다. 수정 모드로 고친 게 마음에 안 들면 이걸 누르고 다시 부탁하면 됩니다.

6. 저장·적용 — 손님 화면 확인과 운영 메모

창의 ‘저장’, 패널의 ‘적용’을 누르면 메인화면 맨 아래에 섹션이 올라옵니다. 저장이 곧 게시이니, 반응형 진단이 ‘수정 필요’ 상태면 저장할 때 한 번 더 물어봅니다. 손님 화면에서 보면 편집기에서 본 그대로이고, 안내 한 줄과 위치·운영 시간 띠까지 들어가 있습니다.

운영 메모 세 줄입니다. 첫째, 하루 요청이 한도에 닿으면 “이 도메인의 오늘 AI 요청 한도를 모두 사용했습니다”가 뜨고 날이 바뀌면 다시 됩니다. 넉넉히 쓰려면 2단계에서 한도를 올리면 되는데, 최대 1,000입니다. 둘째, 공급자 쪽 무료 한도를 넘기면 “AI 공급자의 요청 한도를 초과했습니다”가 뜹니다. 이건 머블로가 아니라 구글 콘솔에서 결제를 붙여야 풀립니다. 셋째, 틀(머리·꼬리)의 ‘HTML 직접 편집’에도 같은 AI 패널이 붙어 있고 기록도 따로 남으니, 머리글을 고칠 때도 같은 방법입니다.