/service/single로 진입합니다. 상단 툴바는 세 구역으로 나뉩니다.

• 왼쪽 — 히스토리 · 가이드 · 앱 제목 입력 · 저장(💾)
• 가운데 — 템플릿 드롭다운 (11종)
• 오른쪽 — 공유 목록 · 공유하기 · 복사 · Run ▶ · Deploy 📦

본문에는 prompt · html · scss · vuejs 네 개 탭의 에디터와 우측 미리보기 영역이 있습니다.

두 가지 시작 방식이 있습니다.

1. 기성 템플릿 — 드롭다운의 11종: E-Commerce · Realtime Stock Chart · Favorites Dashboard (FavLink) · SaaS Pricing · Kiosk Menu · Restaurant Booking · YouTube Creator Hub · Product Detail · Chat App · Event Countdown · Admin Dashboard. 선택 즉시 4개 탭 모두 자동 채워집니다.
2. 빈 상태에서 AI 프롬프트 — prompt 탭에 원하는 바를 한국어로 작성 (예: "카페 메뉴 페이지를 3가지 카테고리 탭으로") → 상단 AI 버튼으로 HTML/SCSS/Vue 세 탭이 자동 생성됩니다.

탭을 전환하며 필요한 부분을 고칩니다.

• prompt — AI 재생성용 설명문. 내용을 바꾸고 다시 생성하면 코드가 업데이트됩니다.
• html — 구조와 텍스트. 라인 번호와 Ctrl+F 검색 지원.
• scss — 색상·폰트·간격. 대부분의 템플릿은 파일 상단에 테마 변수를 정의해 둡니다.
• vuejs — 데이터와 인터랙션. data() { return { ... } }, methods: { ... }, mounted() 패턴.

툴바 오른쪽의 Run ▶을 클릭하면 우측 미리보기 패널에 실제로 동작하는 페이지가 렌더링됩니다. 수정 후 다시 Run을 누르면 반영됩니다.

왼쪽 상단의 히스토리 버튼을 누르면 최근 저장된 버전 목록이 열리고, 행의 → 불러오기 아이콘으로 이전 상태를 복원할 수 있습니다. 잘못 고쳤을 때의 안전망입니다.

결과를 세상에 내보내는 방법은 두 가지입니다.

• Deploy 📦 — 상단 오른쪽 끝 버튼. Railway 계정 연결 후 배포 진행 모달이 뜨고 1~3분 내 무료 도메인으로 공개됩니다.
• 공유하기 — 툴바의 공유 아이콘. 제목·설명·태그를 넣어 커뮤니티에 공개하면 다른 사용자가 fork해서 사용할 수 있습니다 (실제 배포가 아닌 "템플릿 공유").

서비스 > 프로젝트 메뉴를 엽니다. 레이아웃은 다음과 같습니다.

• 왼쪽 사이드바 — 파란색 [+ 새 프로젝트] · [+ 새 팀] 버튼과 최근/공개 솔루션/내 프로젝트/팀 섹션.
• 상단 breadcrumb — 목록 ↔ 상세 ↔ 프로그램 ↔ 배포 4뷰 간 이동.
• 본문 — 카드형 그리드에 각 프로젝트의 도메인 뱃지, DB 타입, 프로그램/라우터 개수.

사이드바의 [+ 새 프로젝트] 클릭 → 위저드 모달 열림.

1. Step 1 — 프로젝트 개념 소개 카드와 흐름 다이어그램.
2. Step 2 — 설정
   • 도메인 선택 (필수) — 내가 가진 도메인 중 하나
   • 데이터셋 선택 (필수) — 프로젝트가 쓸 DB
   • 프로젝트 이름 / 설명
   • 팀 배정 (체크박스)
3. 하단 [저장] — 도메인과 데이터셋이 모두 선택되어야 활성화됩니다.

프로그램은 프로젝트 안의 한 페이지 또는 한 기능을 말합니다. 생성 폼에서 기본 정보를 입력하고 바로 코드 에디터로 들어가 Blade + SCSS + Vue를 한 화면에서 작성하는 구조입니다.

1) 새 프로그램 만들기

프로젝트 상세의 상단 툴바에서 [+ 새 프로그램] · [+ 새 라우터] 두 버튼이 보입니다. "새 프로그램"을 누르면 폼 모달이 열립니다.

• 프로그램 이름 (예: home, admin_dashboard)
• 설명 — 어떤 화면/기능인지 한 줄 메모
• 타입 — frontend(HTML·CSS·JS) / backend(PHP)
• 라우터 — 기존 라우터 선택, 또는 인라인으로 alias + URL 경로 + HTTP 메서드를 같이 생성

2) 코드 에디터 열기 & 화면 구성

프로그램 목록 행의 아이콘을 누르면 편집기 뷰로 전환됩니다. 화면은 세 영역으로 나뉩니다.

• 상단 브레드크럼 · 도구 바 — 현재 프로그램 이름 + 저장 상태 표시 + 도구 버튼 묶음이 한 줄에 모여 있습니다.
• 좌측 사이드바 — 같은 프로젝트의 다른 프로그램 목록. 항목마다 (Code)와 (Builder) 아이콘으로 뷰를 즉시 전환합니다.
• 중앙 3컬럼 에디터 — HTML / CSS / JavaScript 세 개의 CodeMirror 6 패널이 가로로 나란히. 클릭한 패널이 focused로 하이라이트되고, 실제 다크/라이트 테마에 따라 에디터 색상도 함께 바뀝니다.

3) 세 개의 탭이 실제로 담는 문법

• HTML — 순수 HTML에 더해 Blade 디렉티브(@if, @foreach)와 @{{ ... }} 출력 구문을 그대로 씁니다. 서버 측 변수·조건·반복을 템플릿에서 바로 표현할 수 있습니다.
• CSS — SCSS 문법(중첩, & 참조, 변수, mixin) 그대로. 배포 시 자동 컴파일됩니다.
• JavaScript — Vue 3 옵션 API(data / computed / methods / mounted) 구조로 작성하면 런타임에서 자동 인식하여 HTML 쪽 템플릿과 연결됩니다.

기본 단축키는 모두 CodeMirror 표준을 따릅니다: Ctrl+F 내부 검색, Ctrl+Z 실행 취소, Ctrl+/ 주석, 괄호·태그 자동 닫힘, 줄바꿈 자동 랩핑.

4) 편집 상태 표시 & Save 사이클

한 글자라도 수정되면 상단에 Unsaved 표시가 떠 "저장해야 할 변경이 있다"고 알려 줍니다. 상단의 [ Save] 버튼을 누르면 세 탭 내용이 한 번에 전송되고, 성공 시 Saved 체크가 잠시 뜹니다.

저장이 이루어지면 서버는 세 컬럼을 프로그램 본문에 반영하고 동시에 그 시점을 리비전(revision)으로 기록합니다. 저장 = 자동 버전 스냅샷 — 이후 언제든 되돌려 볼 수 있습니다.

5) Deploy on Save — 저장 즉시 서버 반영

Save 버튼 옆의 [Deploy on Save] 토글을 ON으로 두면 저장할 때마다 프로젝트에 연결된 도착지(예: main 서버)로 변경분이 자동 배포됩니다. 배포 완료 시 상단에 "N deployed" 같은 짧은 안내가 뜨고, 별도로 [Deploy] 버튼을 누르지 않아도 "수정 → 즉시 실서버 반영" 루프가 완성됩니다. 토글 상태는 프로젝트 단위로 기억되어 다시 들어와도 유지됩니다.

6) 상단 도구 묶음 한눈에 보기

• Database — 프로그램에 주입할 데이터셋 바인딩 팝업. 변수명 + 테이블 + WHERE/LIMIT/ORDER를 지정하면 그 변수로 쿼리 결과가 자동 주입됩니다.
• Builder — 같은 프로그램을 블록 기반으로 편집하는 대체 뷰로 전환. 코드 뷰와 빌더 뷰는 같은 산출물을 공유합니다.
• Code Search — 프로젝트 전역 검색·치환 패널(아래 7번).
• Revisions — 리비전 이력과 diff 패널(아래 8번).
• Extension Guide — VSCode 확장으로 로컬에서 편집·배포하는 방법 안내 팝업.

7) 프로젝트 전역 Search & Replace

상단 입력란에 키워드를 쓰고 Enter 또는 버튼을 누르면 실행됩니다. 검색 범위 탭은 두 가지 — Project(현재 프로젝트의 모든 프로그램) · Revisions(과거 저장본 포함).

• 결과 표에는 타입 배지(HTML / CSS / JS) · 프로그램 ID · 프로그램 이름 · 매칭 수가 나옵니다.
• 타입 필터 탭 All / HTML / CSS / JS로 관심 영역만 추릴 수 있고, 각 탭에 매칭 수가 표시됩니다.
• 프로그램 이름 옆의 화살표를 누르면 해당 프로그램 편집기로 바로 이동합니다.
• 결과행의 [Show More]를 누르면 오른쪽에 검색 컨텍스트 패널이 열려 매칭 주변 코드를 미리 봅니다.

치환(Replace)은 두 번째 줄에서 수행합니다. scope 드롭다운(All / HTML / CSS / JS), 검색어, 치환어를 채우고 버튼을 누르면 "합계 N개 파일에서 변경을 진행합니다" 확인창이 뜨며, 승인하면 프로젝트 내 해당 영역이 일괄 교체됩니다.

8) 리비전 패널 · 히스토리와 되돌리기

저장할 때마다 쌓인 스냅샷을 볼 수 있는 패널입니다. 열자마자 가장 최근 리비전 ↔ 현재 편집본의 diff가 오른쪽에 자동으로 띄워집니다.

• 좌측: 리비전 목록(페이지네이션). 각 행에 세 개의 액션 아이콘이 있습니다.
  • Revert — 편집기 내용을 이 리비전으로 되돌립니다(저장 안 한 변경은 사라집니다).
  • 현재와 diff — 이 리비전 ↔ 지금 편집 중인 코드.
  • 이전과 diff — 이 리비전 ↔ 바로 이전 리비전.
• 우측: HTML / CSS / JS 탭의 side-by-side diff. 실제로 달라진 탭이 자동 선택됩니다.

9) 작업자가 실제로 따라가는 순서

1. 프로그램 목록에서 아이콘으로 편집기 진입.
2. HTML(Blade) → CSS(SCSS) → JS(Vue) 순서대로 필요한 탭에 코드 작성.
3. 필요하면 Database로 데이터셋 연결, Code Search로 전역 탐색, Revisions로 과거와 비교.
4. [Save]로 저장 → "Saved" 표시 확인. Deploy on Save가 ON이면 배포까지 자동.
5. 실수했다면 Revisions 에서 원하는 시점으로 Revert.
6. 동일 단어를 여러 프로그램에서 바꿔야 하면 Code Search → Replace로 한 번에 정리.

상세 화면의 라우터 섹션(접이식) 또는 상단의 [+ 새 라우터]에서 등록합니다.

• alias — 내부 식별자 (예: home, api_orders)
• URL 경로 — 공개될 경로 (예: /home, /api/orders)
• HTTP method — GET / POST / PUT / DELETE / ANY

이후 프로그램 폼의 "라우터 선택"에서 이 라우터와 연결하면 해당 URL로 접근할 때 이 프로그램이 실행됩니다.

프로젝트 목록 카드의 🚀 (로켓) 아이콘을 클릭하면 배포 모달이 열립니다.

1. 배포 모드 선택: integrate(기존 Docker 재사용) · rebuild(재빌드) · new(새 배포)
2. [시작배포] 버튼 → 9단계 파이프라인 실행 (각 단계 완료 시 초록 체크):
   ① Pack 생성 → ② DB 준비 → ③ 데이터 준비 → ④ 서버 전송 → ⑤ Docker 빌드 → ⑥ Docker 배포 → ⑦ 도메인 연결 → ⑧ 설치 완료 → ⑨ 서비스 안정화
3. 완료되면 도메인 URL이 활성화되고 브라우저에서 바로 접속 가능.

프로그램 상세 또는 프로그램 목록에서 아이콘을 눌러 코드 빌더에 진입합니다. 상단에 8개의 step 탭(DB · List · Detail · Search · Hook · Style · Code · Menu)이 있고, 작업은 왼쪽에서 오른쪽으로 한 번만 훑고 나면 대부분 완성됩니다.

전체 흐름 한눈에 보기

• [1] DB
  테이블 선택
  필드 분류
  WHERE · ORDER
• [2] List
  필드 배치
  그룹 · 정렬
  레이아웃 5종
• [3] Detail · Search
  모달 폼 구성
  컴포넌트 지정
  insert / update 분기
• [4] Hook · Code
  세션 · 훅 삽입
  [Builder] 생성
  Snippet 재사용
• [5] Menu
  4단계 메뉴
  [menu:code]
  공통 include

DB 탭 상세 — 연결이 끊겨 있으면 "DB가 연결되지 않았다"는 안내와 재연결 가이드가 먼저 보입니다. 연결되면 아래 구성으로 펼쳐집니다.

• #list (편집 가능) — 메인 테이블 하나. 드롭다운에서 선택 후 [선택] 버튼. 이 테이블의 행을 직접 수정/삭제/추가합니다.
• #list2 (조회 전용) — 보조 테이블. 조인해서 이름/라벨을 보여줄 때 사용합니다.
• #list3, #list4 ... — 사이드바 오른쪽의 버튼으로 세 번째 이상의 테이블을 추가할 수 있습니다.
• 필드 3분할 — 같은 컬럼 목록에서 "List에 보일 필드", "Detail 화면에 보일 필드", "Search에 쓸 필드"를 각각 다중 선택합니다. 옆의 체크 아이콘으로 전체 선택/해제 토글.
• DB Search Option — WHERE · ORDER BY · LIMIT 세 줄 + 필요 시 Raw Query까지 직접 입력. 여기서 지정한 조건이 리스트 기본 필터로 들어갑니다.
• 맨 아래 [업데이트] 버튼으로 이 단계 저장, [리셋]으로 초기화.

DB 탭에서 고른 "List 필드"들이 좌측에 후보로 나옵니다. 여기서는 리스트 화면의 모양과 각 칼럼의 동작을 정의합니다.

레이아웃 5종 선택 — 상단에서 먼저 결정. 선택에 따라 아래 옵션이 자동 조정됩니다.

• datatable — 정렬·페이지네이션 내장 테이블.
• table — 단순 표 + 개별 칼럼 정렬 토글.
• grid — 카드형 그리드.
• modal — 리스트에서 바로 열리는 모달.
• slots — 레이아웃 프레임의 슬롯에 끼워 넣는 모드.

아이템(필드 칼럼) 추가 — 좌측 [+ 아이템 추가] 버튼을 누르면 후보 필드 드롭다운이 열립니다. 기존 필드를 고르거나 + new로 가상 필드(조합·계산용) 생성.

• 각 행: header_value(화면 라벨) · header_text(설명) · width · mutator(필드별 custom 코드) · sortable · linkable · use_opt(옵션 값) · (표시/숨김 토글).
• 왼쪽 ↑↓ 화살표로 순서 조정, 로 제거, (요정봉)로 AI 자동 코드 생성.

그룹 만들기 — 우측 상단 [Create Group] 으로 필드를 1~5개 묶음으로 묶을 수 있습니다. ~ 숫자 박스로 선택한 아이템들을 해당 그룹에 배정.

• Group 모드에서 [Toggle Panel]을 누르면 그룹 편집 패널로 화면이 바뀝니다. 여기서 각 그룹마다 그룹명(내부에서 구분하는 이름) · 그룹헤더(화면에 실제로 보일 제목) · 레이아웃(그룹 안 칼럼 배치 방식)을 채워 넣고, 패널 상단의 그룹 표시 방식에서 여러 그룹을 어떻게 펼칠지 — 탭 전환 · 박스 나열 · 한 줄 입력 그룹 — 한 가지를 고릅니다.

하단 [업데이트]로 저장.

Detail 탭은 리스트에서 한 행을 눌렀을 때 뜨는 상세/편집 팝업(모달)의 구성을 정의합니다. 레이아웃은 list 탭과 거의 같지만 추가/수정 폼의 입력 컴포넌트를 지정하는 것이 핵심입니다.

• Component 드롭다운 — 각 필드마다 입력 형식 선택: text · textarea · select · checkbox · radio · date · datetime · file · editor · hidden 등.
• opt_name / opt_value — 컴포넌트별 추가 옵션. select면 옵션 목록, file이면 허용 확장자, date면 포맷 등.
• insert / update 삼각 아이콘 — 해당 필드가 "추가 폼에만", "수정 폼에만", "둘 다" 표시될지 토글. 예: id·created_at은 수정 시에만 표시.
• required(+/-) 토글 — 필수 입력 여부.
• layout — 입력 요소의 셀 배치/너비(1/2, 1/3, full-width 등).
• 상단 툴바에서 기본키 칼럼(한 행을 유일하게 구분하는 칼럼)과 상세변수(상세 페이지를 열 때 주소에 실릴 식별자 칼럼) 두 칸을 지정합니다.

Search 탭도 동일한 편집기를 공유합니다. 차이는:

• 검색 방식 — 입력한 값을 DB에서 어떻게 찾을지 고릅니다. 부분 일치(값을 포함하는 레코드) · 정확히 일치 · 여러 값 중 하나(콤마 목록에서 매칭) · 전문 검색(긴 텍스트 안 단어 찾기) 등 중에서 선택.
• 컴포넌트 역시 검색 UI에 맞춰 선택 (text 자유 입력, select 드롭다운 필터 등).

검색 입력들은 리스트 상단에 자동 배치되고, 제출하면 DB 탭의 기본 WHERE와 AND로 합쳐져 조회됩니다.

1~3단계에서 화면 "재료"가 갖춰졌으면, 이제 세부 동작·권한·커스텀 로직을 채우고 코드를 뽑아냅니다.

Hook 탭 — 생성될 HTML과 JS의 골격을 표시해 주고, 그 안의 여러 hook 포인트(배지로 표시)에 커스텀 코드를 끼워 넣을 수 있습니다.

• 상단에 미니 HTML/Javascript 골격 다이어그램 — <?php ... ?>, <style>, <body>, 모달, data/computed/mounted/methods 위치를 한눈에 보여 줍니다.
• 각 hook 행을 로 펼치면 코드 에디터가 나타납니다. 더블 클릭으로 와이드 모드 전환.
• 에디터 우클릭 → Snippet 저장 / Snippet 불러오기. 자주 쓰는 로직(로그인 체크, 권한 가드, 파일 업로드 전처리 등)을 ident로 저장해 다른 프로그램에서도 그대로 재사용.

Style 탭 — 프로그램 전용 CSS/SCSS 에디터. css_integrate 토글을 켜면 프로젝트 공용 CSS와 합쳐 번들되고, Backend Code 토글로 PHP 조각도 추가할 수 있습니다.

Code 탭 · 자동 코드 생성 — 여기서 실제 [Builder] 버튼을 누르게 됩니다.

• 두 개의 CodeMirror 에디터 — 왼쪽 Blade 템플릿 / 오른쪽 Vue Script. 1~3단계 설정과 Hook 코드를 종합해 자동 생성된 결과를 미리 보여 줍니다.
• Session Condition 4구역 — Add / Delete / Read / Detail 각각에 "어떤 세션 상태일 때 허용할지"를 조건식으로 줄 수 있습니다(예: user_level>=3).
• Feature 토글 그리드 — Export(CSV/Excel), 다중 선택 삭제, 정렬 저장 등 재사용 기능을 on/off로 추가. 켠 뒤 입력 파라미터(필드명 등) 지정.
• 하단 [Builder] 버튼을 누르면 이 모든 설정이 Blade + Vue Script로 조립되어 프로그램의 실제 코드로 저장됩니다. 이후 Code 에디터에서 그대로 편집·저장·배포할 수 있습니다.

프로그램 여러 개가 생기면 공통 내비게이션(메뉴)이 필요합니다. Menu 탭은 프로그램 안에서 최대 4단계 depth의 메뉴 트리를 만들고, 이를 Shortcode 한 줄로 원하는 곳에 꽂아 넣는 마법사입니다.

메뉴 그룹(Group) — 하나의 프로젝트에 여러 메뉴를 담기 위한 네임스페이스입니다.

• 상단 드롭다운에서 기존 그룹을 고르거나, 옆의 입력란에 새 그룹 코드(영문·숫자·언더바 2~9자)를 쓰고 [메뉴 그룹 생성] 버튼.

4단계 depth 트리 편집 — 그룹을 선택하면 왼쪽에 Depth 0 테이블이 나타납니다. 각 행을 드릴다운하면 오른쪽에 다음 depth 테이블이 열리는 방식으로, 최대 Depth 0 ~ Depth 3 까지 네 칸이 순차로 펼쳐집니다.

  Depth 0 ┐
          ├─ Depth 1 ┐
          │          ├─ Depth 2 ┐
          │          │          └─ Depth 3   ← 최대 4단계
          └─ Depth 1·
           ...

• 각 depth 테이블의 [+ 메뉴 추가] 버튼으로 그 단계에 새 항목을 만듭니다(팝업에서 이름·URL 별칭·세션 조건 입력).
• 행별 편집, 삭제, 화살표로 정렬 순서 변경.
• 행 끝의 체크 버튼을 누르면 그 항목의 하위 depth 테이블이 오른쪽에 펼쳐집니다.

Shortcode로 주입하기 — 메뉴를 다 짠 뒤에는 이 그룹을 실제 화면에 붙여 넣을 차례입니다. 공통 include 영역(레이아웃 프레임, 헤더/사이드바 partial 등)에 아래처럼 한 줄만 넣으면 끝입니다.

<?php echo get_menus_by_code($project_id, 'group_code', 'nav nav-menu', 'role="navigation"'); ?>

렌더링 시점에 get_menus_by_code() 헬퍼가 project_menu 테이블을 읽어 4 depth까지 <ul>/<li>로 조립해 내려 줍니다. 로그인 세션 조건(session_condition)이 설정된 메뉴는 조건을 만족하는 사용자에게만 노출됩니다. 현재 URL과 일치하는 항목에는 자동으로 active 클래스가 붙습니다.

/layout/page로 진입합니다.

• 왼쪽 사이드바 — [+ 새 페이지] 버튼 + 최근/공유/내 페이지 섹션.
• 상단 툴바 — 검색(필드·키워드), Block/Frame/Page 전환 탭, Grid/List 뷰 토글, 행 수(20/50/100).
• 본문 — 페이지 카드 그리드 (제목·설명·프레임·배포 여부 표시).

페이지 카드를 클릭하거나 그리드 아이콘을 누르면 풀스크린 빌더 모달이 열립니다. 세 구역으로 나뉩니다.

• 왼쪽 패널 — 상단 Frame 필름스트립(반응형 템플릿 선택), 가운데 Frame 캔버스(iframe + 드롭 슬롯 오버레이), 하단 Block 필름스트립(드래그 가능한 블록들).
• 가운데 패널 — 데이터 샘플러(Architecture · Data 탭)로 API 바인딩.
• 오른쪽 패널 — 배포 + AI 어시스트.

Frame을 고르면 iframe 위에 투명한 드롭 슬롯이 보입니다. Block 필름스트립에서 원하는 블록을 드래그 시작하면 슬롯들이 파란색으로 하이라이트되며, 드롭 시 해당 슬롯에 블록이 설치됩니다.

설치된 블록은 슬롯이 "filled" 상태가 되고, 이 슬롯을 다시 클릭하면 교체할 수 있습니다. 같은 블록을 여러 슬롯에 넣을 수도 있고, 페이지 하나에 서로 다른 블록이 혼합되어도 됩니다.

가운데 패널의 Architecture 탭에서 블록의 샘플 데이터 키를 실제 API 응답 키와 연결합니다.

1. 각 블록 카드의 왼쪽 열에 블록이 요구하는 샘플 키 트리가 표시됩니다.
2. 가운데의 ⚡ (번개) 토글로 API 연결 모드로 전환.
3. 오른쪽 열에서 앞서 "데이터베이스" 서비스에서 만든 엔드포인트를 선택 → 그 API의 응답 키 트리가 펼쳐집니다.
4. 샘플 키와 API 키를 짝지어 클릭하면 매핑 라인이 생기고 하단 "Pair Map"에 sample_key → api_key 형태로 기록됩니다.

Data 탭에서는 실제 API 응답 JSON을 원본 형태로 확인할 수 있어 매핑 디버깅에 유용합니다.

오른쪽 패널에서 배포를 진행합니다.

• Expose Parameter — 배포 URL로 노출할 쿼리/패스 파라미터 목록. 각 항목은 활성 체크박스 · 이름 · 소스(query/path) · 기본값으로 구성. [추가] 버튼으로 늘립니다.
• Deploy URL — /my-page 같은 슬러그를 입력하면 실시간으로 미리보기가 표시됩니다.
• [배포] 버튼 클릭 → 진행률 바 + 단계 라벨이 나타나고 완료 시 도메인에 실제로 게시.
• 하단에는 배포 이력이 카드로 누적되어 언제든 과거 URL로 접속 가능.

디스플레이 > 슬라이드쇼 메뉴를 엽니다. 왼쪽 사이드바의 [+ 슬라이드 등록] 버튼과 "커뮤니티 슬라이드쇼" 필터, 본문의 Grid/List 뷰로 구성됩니다.

각 슬라이드쇼 카드에는 제목, 씬 개수, 총 재생 시간, 배포 여부가 표시됩니다.

사이드바의 [+ 슬라이드 등록] 클릭.

1. Step 1 — 슬라이드쇼 소개: URI 매핑 · 채널링 · 67가지 전환 효과 · 타임라인 제어를 설명하는 카드와 흐름 다이어그램(원격 → 업로드 → 슬라이드쇼 → 브라우저).
2. Step 2 — 등록: 제목 + 설명 입력 → [저장] → 상세 편집 화면으로 자동 진입.

상세 화면 중앙의 타임라인 패널에서 재생 구조를 정의합니다.

• 전체 지속 시간 — 슬라이더로 10~3600초 설정
• 씬 개수 — 범위 슬라이더로 개수 선택 → 개별 지속 시간이 자동 계산
• 전환 효과 — 67종 카탈로그에서 선택 (페이드·슬라이드·큐브·페이지 플립 등)
• [저장하기] 버튼으로 변경 확정

파라미터 커서(Page Sequencer)는 하나의 레이아웃 페이지에 파라미터 값만 바꿔 N개의 씬을 자동 생성하는 기능입니다.

• 파라미터 이름(예: month), 알고리즘(by_range / by_comma / by_json), 값(예: 1-12 + step 1) 입력
• 결과: 1월~12월을 순환 표시하는 12개 씬 자동 생성

디스플레이 채널 (MAX 전용) — 같은 슬라이드쇼를 여러 디스플레이에 다른 구성으로 송출하는 기능.

• 채널 이름 입력 (예: "카테고리A", "카테고리B") + 포함할 슬라이드 다중 선택
• "쿼리 파라미터 사용" 토글 활성 시 ?keyword=값으로 채널을 선택해 URL에 매핑

상세 화면 오른쪽의 배포 패널(se-deploy)에서 게시합니다.

1. URL 경로 입력 (예: /menu-signage) + 도메인 드롭다운에서 선택
2. [슬라이드 배포] 버튼 → 진행 바와 "배포 중..." · "배포 완료" 메시지
3. 배포 이력 카드에 도메인 · 경로 · 일시가 기록됨

완료되면 매장·행사장 브라우저에서 이 URL만 전체화면으로 띄워두면 됩니다.

데이터 > 파서 메뉴를 엽니다. 왼쪽 사이드바의 [+ 새 파서 룰] 버튼과 최근/공개 룰/내 룰 섹션으로 구성되며, 본문은 Grid/List 뷰입니다.

각 카드에는 (파싱 실행) · (아이템 테스트) · (스케줄, MAX) · (편집) · (복제) · (삭제) 아이콘이 있습니다.

[+ 새 파서 룰]을 누르면 3단계 위저드가 열립니다. 이 위저드는 룰의 기본 베이스 정보(이름·설명·저장할 데이터셋)만 먼저 등록하는 단계이며, 실제 크롤링 대상 URL·셀렉터·필드 매핑 등은 이 위저드가 끝난 뒤 이어서 열리는 파서 설정 화면에서 채워 넣습니다.

1. Step 1 — 개요: "파서 룰이란?" 인트로와 함께 4개의 기능 카드(데이터 추출, 정교한 웹 크롤링, 필드 매핑, 재사용성)가 나란히 표시되고, 하단 "파서 파이프라인" 다이어그램이 4가지 연결 구성(파서 룰 → DB / → 매크로 → DB / → 스케줄러 → DB / → API 엔드포인트 → 서비스 런칭)을 한눈에 보여줍니다. [다음]으로 진행합니다.
2. Step 2 — 데이터베이스 연결: 수집 결과를 저장할 데이터셋 카드를 클릭해 선택합니다(db_type 뱃지·테이블명·도메인 표시). 등록된 데이터셋이 없으면 "데이터셋 만들러 가기" 링크만 노출됩니다. [다음]을 누르면 "에이전트 연결 → 파서 엔진 배포 → 배포 완료" 3단계가 자동 실행되어 선택한 docker agent에 파서 엔진이 배포됩니다.
3. Step 3 — 룰 등록: 룰 이름과 설명(선택)을 입력하고 [룰 생성]을 누르면 베이스 정보(이름·설명·데이터셋·공유 여부)가 저장되고, 위저드가 닫히면서 방금 만든 룰의 설정 화면이 자동으로 열립니다.

여기까지가 위저드의 역할입니다. 그 다음 파서 설정 화면에서 대상 URL, HTTP 옵션, Loop Splitter, XPath/JSON 셀렉터, 필드 매핑을 실제로 채워 넣고(▶︎ 3단계 · 대상 URL & 추출 셀렉터), "테스트" 탭에서 결과를 확인한 뒤 저장해야 비로소 파서 실행이 가능한 상태가 됩니다.

상단 스텝바로 진행 상태를 확인할 수 있고, [이전]으로 단계를 되돌릴 수 있습니다(배포 실행 중에는 비활성화). 위저드 모달은 우상단 [x] 버튼으로만 닫힙니다.

편집기 상단에 대상 URL을 입력하고, 세 가지 방식을 조합해 데이터를 집어냅니다.

• Loop Splitter (총 3칸, 기본 + 보조 2칸) — HTML을 반복 단위로 쪼개는 문자열 패턴을 입력합니다.
• XPath 셀렉터 — 3레벨까지, 각 반복 단위 안에서 필드를 추출합니다. 셀렉터의 목적은 배열(노드 집합)로 떨어지는 경로를 지정하는 것이므로, 값이 //h3/a/text() 형태로 잡힌다면 //h3/a까지만 입력해 배열화를 유도합니다.
• JSON 셀렉터 — API 응답인 경우 dot·bracket 표기. 마찬가지로 배열을 가리키는 경로를 입력합니다. 데이터에 data.items[0].title 같은 구조가 있다면 셀렉터에는 data.items를 입력해 아이템 배열이 잡히도록 합니다.
• 후처리 함수 — trim(@p), replace(...), regex(...), strtoupper(@p), slice(), remove() 등 각 컬럼에 체이닝.

가장 빠른 길은 Loop Splitter로 잘라낸 소스 일부를 AI 프롬프트에 통합해서, AI의 응답을 받아 룰에 자동 등록되게 하는 것입니다. 손으로 셀렉터를 하나씩 맞추는 것보다 훨씬 빠르고, 구조가 복잡할수록 차이가 큽니다.

AI 프롬프트로 한 번에 자동 등록 (권장)

셀렉터를 손으로 채우는 대신, AI에게 본문 샘플을 주고 완성된 규칙을 받아 그대로 적용하는 방법입니다.

1. 사전 준비 — 대상 URL을 입력한 뒤 편집기 상단의 "테스트" 탭에서 추출 테스트를 한 번 실행해 응답 본문이 확보되어 있어야 합니다. 이 본문이 프롬프트에 자동 삽입됩니다.
2. 테스트 결과 패널 상단의 "AI 프롬프트" 버튼(지팡이 아이콘, 강조 표시)을 누르면, 바로 아래 에디터 영역에 문서 타입(HTML / JSON / XML)과 문서 언어에 맞춘 프롬프트가 자동 생성됩니다. 프롬프트는 한국어·영어·일본어·중국어·러시아어·독일어·프랑스어·스페인어 8개국어 중 문서 언어에 맞게 작성됩니다.
3. 에디터 안을 클릭한 뒤 Ctrl+A → Ctrl+C로 전체를 복사합니다.
4. ChatGPT / Claude / Gemini와 같은 AI에 붙여넣고 실행하면 규칙이 담긴 JSON이 응답으로 돌아옵니다.
5. 응답을 복사한 뒤, 같은 패널의 "패턴 가져오기" 버튼(불러오기 아이콘)을 누르면 붙여넣기용 입력창이 열립니다. 복사한 내용을 붙여넣고 [패턴 적용]을 누릅니다.
6. 자동으로 반복 구분자·셀렉터·고유 키·컬럼 목록이 룰의 올바른 위치에 채워지고, 편집기가 "fields" 탭으로 전환되어 결과를 바로 확인할 수 있습니다. 화면 아래에는 "패턴 적용됨: N개 필드" 같은 요약 토스트가 표시됩니다.

AI 응답이 잘못된 형식이면 "잘못된 JSON" 안내 토스트가 뜨고 기존 값은 그대로 유지되니 안심하고 다시 시도할 수 있습니다.

카드의 (시험관) 아이콘 또는 편집기의 "테스트" 탭을 클릭하면 테스트 모달이 뜹니다.

• 상단: "추출된 아이템 N개 / 컬럼 M개"
• 내보내기: CSV · XLSX · JSON · HTML
• 그리드: Row# + 자동 감지된 컬럼 헤더
• 셀 hover 시 "복사" 버튼

원하는 결과가 나올 때까지 셀렉터를 조정 → 테스트 → 조정을 반복합니다.

룰 목록에서 카드의 (재생) 아이콘을 누르면 실행(Run) 모달이 열립니다. "어디를, 어떤 값들의 조합으로, 어떻게 돌리고, 어디에 저장할지"를 한 화면에서 정하고, 그대로 실행·모니터링합니다.

• [1] URI
  대상 주소
  {param} 토큰
  경로·쿼리
• [2] 퍼저
  파라미터 조합
  1-N · A,B · DB
  조합 / 짝지음
• [3] 미리보기
  URL 전개
  좌측 목록 생성
  개수 확인
• [4] 실행·저장
  즉시 / 스케줄
  DB / CSV / JSON
  1회 처리량
• [5] 시작
  흐름도 체크
  [시작] 활성화
  일시정지 가능
• [6] 피드백
  진행 바 · 통계
  URL별 로그
  매크로 체인

인터페이스 한눈에 — 3패널 구성

• 왼쪽 패널 · URL 목록 — 중앙 패널에서 만들어진 미리보기 URL들이 번호와 함께 쌓입니다. 실행 중에는 현재 처리 중인 줄이 강조되고, 끝난 줄에는 체크가 붙어 어디까지 진행됐는지 한눈에 보입니다. 각 줄의 버튼으로 그 URL 하나만 파싱 테스트해 볼 수도 있고, 우측 상단 로 과거 실행 설정을 불러와 재사용할 수 있습니다.
• 가운데 패널 · 계획 & 실행 — URI, 파라미터(퍼저), 실행/저장 방식을 차례로 지정하고 아래쪽 흐름도에서 [시작]을 누르는 본체.
• 오른쪽 패널 · 결과 피드백 — 두 개의 탭. "결과" 탭은 실행 중 통계·로그를, "파싱 테스트" 탭은 왼쪽에서 를 눌렀을 때의 셀 단위 미리보기를 보여줍니다.

단계별 사용법

1. URI 입력 — 중앙 패널 첫 카드. 경로에 토큰을 끼우는 방식(/category/{param}/list)과 쿼리 방식(?param={param}) 두 가지 예시가 헤더에 뱃지로 떠 있어 클릭 하나로 참고할 수 있습니다. 중괄호 {...} 안 이름은 다음 카드에서 정의할 파라미터 이름과 같아야 치환됩니다.
2. 퍼저(Fuzzer) 파라미터 — URI의 {...}에 넣을 값들의 목록을 만드는 카드입니다. 상단 토글로 두 모드 중 하나 선택:
   • 조합(Combination) — 모든 파라미터의 값들을 카르테시안으로 곱합니다. 예: {page}=1..10, {cat}=A,B → 20개 URL.
   • 짝지음(Paired) — 각 파라미터의 n번째 값끼리만 짝지어 실행(zip). 목록 길이가 모두 같아야 합니다.
   각 파라미터는 이름과 생성 방식을 고릅니다 — 1-N(범위·간격), A,B(콤마 목록), DB(데이터셋 칼럼에서 가져오기, WHERE/ORDER/LIMIT 지정 가능), [,](JSON 배열), \n(줄바꿈 목록). 버튼으로 파라미터를 여러 개로 늘릴 수 있습니다.
3. URL 미리보기 — 카드 하단의 [URL 미리보기] 버튼을 누르면, 위에서 정의한 URI + 파라미터 조합이 실제로 만들어져 왼쪽 패널에 번호별로 쌓입니다. 만들어진 개수가 헤더에 뱃지로 표시되므로, 의도한 수량이 맞는지(예: 범위 10 × 카테고리 2 = 20) 즉시 확인됩니다.
4. 실행 방식 & 저장 방식 — 세 번째 카드에서 다음을 고릅니다.
   • 실행: 즉시(runtime — 이번에만) / 스케줄(주기 실행, MAX 플랜). 스케줄을 고르면 시작 시각과 간격(분) 칸이 즉시 펼쳐집니다.
   • 1회 처리량: 페이지 단위 / PK 단위.
   • 저장: DB(데이터셋 또는 외부 DB 주소 직접 지정) / CSV / JSON / SQL 구문. DB를 고르면 표(컬렉션) 이름과 DBMS 뱃지가 나란히 떠서, 저장 위치가 눈으로 확인됩니다.
5. 시각 흐름 가이드 & 시작 — 카드 아래에 URI → 파라미터 → 미리보기 → 저장 → [시작] → 매크로가 노드로 이어진 플로우 다이어그램이 있어서, 각 단계의 입력이 채워질 때마다 노드에 초록 체크가 켜집니다. 필수 조건이 모두 채워지면 헤더 우측의 [시작] 버튼이 활성화됩니다. (끝 노드의 매크로 연결을 선택해 두면, 수집 직후 매크로가 자동으로 이어서 돌아갑니다.)
6. 실행 중 피드백 — 시작을 누르는 순간 상단 진행 바가 처리/전체로 차오르고, 오른쪽 "결과" 탭이 실시간으로 갱신됩니다.
   • 통계 카드: 전체 · 성공 · 실패 · 남음 — 실패가 발생할 때만 "실패" 카드가 붉게 등장.
   • 로그 뷰: URL이 처리될 때마다 한 줄씩 추가되며, 마지막 줄은 강조. 각 줄에 시각 · URL · +추가된 행 수 표시, 실패한 URL은 뱃지.
   • 일시정지/재개: 실행 중에는 시작 버튼이 [일시정지]로 바뀌어 언제든 안전하게 멈출 수 있습니다.
   • 파일 저장 모드(CSV/JSON/SQL)일 때는 하단 Output 영역에 결과 본문이 함께 쌓이고 로 바로 내려받을 수 있습니다.

이 실행 화면이 주는 효과

• 계획부터 실행·관찰까지 한 화면 — 탭 전환 없이 URI·파라미터·저장을 바로 옆에서 수정하며 즉시 다시 돌릴 수 있어, 설정→실행→확인 루프가 가장 짧습니다.
• 퍼저(파라미터 조합)로 수십~수천 개의 URL을 손으로 만들 필요 없이, 규칙 한 줄(1-N / A,B / DB / JSON / 줄목록)로 일괄 생성 — 카테고리 × 페이지 × 날짜 같은 대량 수집이 몇 초 만에 준비됩니다.
• DB 기반 파라미터(by_db_field)로 키 테이블의 id 목록을 읽어 상세 페이지를 순회하는 2단계 파이프라인을 그대로 구현할 수 있어, 엑셀·스크립트 없이 실제 수집 시나리오를 덮습니다.
• 투명한 실시간 피드백 — URL별 체크 표시, 실시간 로그, 성공/실패 카운터 덕분에 "어디서 멈췄는가"를 바로 파악하고, 실패한 특정 URL만 골라 로 재테스트해 원인을 찾을 수 있습니다.
• 자원 절약형 아키텍처 — 실제 HTTP 호출·파싱은 사용자 소유의 docker agent에서 수행되고, QuickStart 서버는 지시·상태만 중계합니다. 대량 수집을 돌려도 서비스 서버 트래픽에 영향이 없습니다.
• 매크로 체이닝 — 수집 직후 매크로를 자동 호출해 알림·통계 집계·후가공을 붙일 수 있어 수집 → 정제 → 통지까지 한 번의 실행으로 완결됩니다.

스케줄 실행은 사용자가 화면을 보지 않는 동안에도 docker agent가 정해진 주기로 혼자 수행하는 방식입니다. 결과는 곧바로 데이터셋(DB)에 쌓이므로, 실행 결과를 눈으로 확인하려면 데이터베이스 에디터에서 해당 테이블을 열어 확인합니다.

• [1] 스케줄 설정
  시작 시각
  실행 간격(분)
  활성 토글
• [2] Agent 동기화
  [저장] 시
  docker agent로
  자동 전송
• [3] 자동 주기 실행
  agent가 단독 수행
  QuickStart 무관
  백그라운드 동작
• [4] DB 누적
  데이터셋 테이블에
  행 단위 INSERT
  중복 키 스킵
• [5] Database Editor 확인
  데이터 > 데이터베이스
  해당 테이블 열기
  WHERE · ORDER로 조회

카드의 (시계) 아이콘으로 스케줄 모달을 엽니다 (FREE/PRO 플랜은 "Max" 리본 표시).

• 시작 시간 (시 0~23, 분 0~59)
• 실행 간격 (분)
• 활성 토글
• 실행 모드: 단일 URL 모드 / URL 목록 배치 모드

[저장]하면 QuickStart에 기록되는 동시에 해당 docker agent 쪽으로도 자동 동기화됩니다. 실제 실행은 agent가 담당하여 QuickStart는 트래픽에 관여하지 않습니다.

결과 확인은 "데이터베이스 에디터"에서

스케줄 실행은 UI 없이 백그라운드에서 돌기 때문에, 결과를 확인하려면 수집 대상 데이터셋을 직접 열어 쌓여 있는 행을 봐야 합니다.

1. 좌측 메뉴에서 데이터 > 데이터베이스로 이동합니다.
2. 파서 룰에 연결해 둔 데이터셋 카드를 클릭해 데이터베이스 에디터를 엽니다.
3. 좌측 테이블 목록에서 저장 대상 테이블(예: items, products 등)을 선택합니다.
4. 상단 WHERE / ORDER BY로 최근 행을 위로 올려(ORDER BY created_at DESC, ORDER BY id DESC 등) 최근 스케줄 실행에서 새로 쌓인 데이터를 확인합니다.
5. 필요하면 행 수(COUNT)나 특정 날짜 범위 필터로 수집 추이를 점검합니다. (매 주기마다 행 수가 늘어나고 있으면 정상 동작)

실행 로그 자체는 실행(Run) 모달의 오른쪽 "결과" 탭에서 스케줄 모드 활성 시 표로 제공되며, 실제 수집된 데이터의 내용 검증은 언제나 데이터베이스 에디터가 정답입니다.

데이터 > 매크로 메뉴를 엽니다. 왼쪽 사이드바의 최근/커뮤니티/내 매크로 섹션과 본문의 Grid/List 뷰로 구성됩니다. 상단 툴바에서 이름·설명으로 검색이 가능합니다.

사이드바의 [+ 새 매크로] 버튼을 누르면 생성 위저드가 바로 열립니다.

[+ 새 매크로] 버튼을 누르면 4단계 위저드가 열립니다. 이 한 번의 위저드로 매크로의 기본 정보 등록과 실행 서버 준비가 모두 끝나게 됩니다.

1. Step 1 — 매크로 소개: "매크로란?" 인트로와 함께 4개 기능 카드(파이프라인 체이닝, 어댑터 패턴, Input → Output, 자동 코드 생성)가 표시되고, 하단 흐름 다이어그램이 4가지 연결 구성(DB 쿼리 · 체이닝 · 파서 · 스케줄)을 한눈에 보여줍니다. 입력 없이 [다음]으로 진행합니다.
2. Step 2 — 연결 방식: 매크로가 실제로 돌아갈 서버를 두 가지 중 하나로 준비합니다.
   • 새 매크로 서버 배포 — Railway 계정에 연결(토큰 입력)한 뒤 언어 · 프레임워크 · 코어 스택 · 선택 애드온(MongoDB / FFmpeg / Puppeteer / WebSocket 등) · DB 계정을 지정합니다. [서버 배포]를 누르면 "수신 → 복호화 → Docker 빌드 → 배포 중 → 네트워크 → 검증"의 6단계 파이프라인이 자동 실행되어 내 계정 전용 매크로 실행 서버가 준비됩니다.
   • 기존 매크로 서버 접속 — 이미 매크로 코드가 배포된 서버가 있는 경우, 그 서버의 접속 정보를 입력해 연결합니다.
   서버가 준비되면 자동으로 다음 단계로 넘어갑니다.
3. Step 3 — 유형 선택: 24가지 매크로 유형(ETL 파이프라인 · 대량 API 호출 · 데이터 마이그레이션 · CSV/Excel 가져오기 · 기타) 중 하나를 고릅니다. 선택한 유형에 맞춰 입력 파라미터, 루프 로직, 출력 구조의 기본 코드가 자동 생성되어 다음 단계에서 시작점으로 쓰입니다.
4. Step 4 — 매크로 등록: 매크로 이름(예: "야간 DB 동기화", "대량 번역")과 간략한 설명을 입력하고 [등록]을 누르면 매크로가 생성되며 위저드가 닫히고 상세 화면(코드 에디터)이 자동으로 열립니다.

상단 스텝바로 진행 상태를 확인할 수 있고, [이전] 버튼으로 단계를 되돌릴 수 있습니다(배포 실행 중에는 비활성화). 위저드 모달은 우상단 [x] 버튼으로만 닫힙니다.

위저드가 닫히면 바로 3-패널 편집 화면이 열립니다. 왼쪽에는 입력 필드 정의(Input), 가운데에는 코드 에디터(PHP / Node.js / Python 탭), 오른쪽에는 AI 프롬프트 패널이 배치됩니다. 코드 에디터에는 Step 3에서 고른 유형에 맞는 기본 스캐폴드가 이미 채워져 있으므로, 필요한 부분만 바꿔 쓰면 됩니다.

• [1] run_data 수신
  input_data
  conn_string
  table_name · user_id
• [2] 입력값 정규화
  배열 → 객체
  타입 캐스팅
  기본값 설정
• [3] 핵심 로직
  API 호출 · DB
  파일 · 외부 명령
  데이터 변환
• [4] 결과 조립
  success 플래그
  data / json
  download_links
• [5] return
  위저드에서 고른
  출력 타입에
  맞춘 반환
• [6] AI 프롬프트
  우측 패널에서
  시나리오 선택
  AI → 코드 붙여넣기

자동으로 넘겨받는 변수 — run_data

함수는 항상 run_data라는 단일 인자를 받습니다. 서버가 실행 직전에 자동으로 채워 넘겨주는 값이며, 최소한 다음 키들을 담고 있습니다.

• run_data.input_data — 사용자가 Quick Test 또는 스케줄 실행에서 입력한 값들. 처음에는 [{ item_name, item_value, item_type }] 형태의 배열로 들어오므로 첫 줄에서 객체로 바꿔 쓰는 것이 표준입니다.
• run_data.conn_string — 위저드에서 선택한 데이터셋의 DB 접속 문자열(서버에서 AES 복호화된 상태로 전달). DB 작업을 하는 매크로에서 그대로 사용하면 됩니다.
• run_data.table_name, run_data.file_name — 저장 대상 테이블명·파일명(위저드에서 입력).
• run_data.user_id, run_data.app_id — 실행한 사용자와 매크로 식별자. 로그·권한 체크 용.
• run_data.save_type, run_data.app_type — 위저드에서 고른 저장 방식과 매크로 유형. 분기용으로 사용.

권장 코딩 패턴

취미로 시작하는 개발자도 그대로 따라 쓸 수 있는 최소 골격입니다. 함수 이름은 위저드에서 정한 것(예: macro_run)을 그대로 쓰세요 — 서버가 그 이름으로 호출합니다.

Node.js 예시 — _sample/code39.js의 실제 구조에서 추려낸 패턴:

async function macro_run(run_data) {
    // ── 1) 입력값 정규화 — 배열이든 객체든 둘 다 받아주기 ──
    const raw = run_data.input_data || {};
    const params = {};
    if (Array.isArray(raw)) {
        raw.forEach(f => { params[f.item_name] = f.item_value; });
    } else {
        Object.assign(params, raw);
    }

    // ── 2) 기본값 · 타입 캐스팅 ──
    const output_format = params.output_format || 'svg';
    const style         = params.style || 'default';
    const max_items     = Number(params.max_items || 10);

    // ── 3) 핵심 로직 ──
    try {
        // ... API 호출, DB 질의, 파일 변환 등
        const results = [ /* 수집된 결과 */ ];

        // ── 4) 결과 조립 & return (성공) ──
        return {
            success: true,
            data: results,                       // 표로 보여줄 배열
            message: results.length + ' 건 처리됨',
        };
    } catch (e) {
        // ── 4') 실패도 동일한 형태로 ──
        return { success: false, error: e.message, data: [] };
    }
}

PHP / Python도 동일한 형태 — 함수가 run_data를 받고, ['success' => true, 'data' => [...]] / {'success': True, 'data': [...]} 를 반환합니다. 왼쪽 Input 패널에서 필드를 정의한 뒤 스캐폴드 버튼(가운데 코드 패널 헤더)을 누르면, 정의한 필드를 풀어 넣은 언어별 골격 코드가 자동으로 생성됩니다.

return은 "위저드에서 고른 출력 타입"에 맞춰 짭니다

반환 객체는 표준 프로토콜을 따르지만, 어떤 필드를 채우느냐는 Step 3(생성 위저드)에서 선택한 출력 형태가 기준입니다. Quick Test 결과 패널은 이 필드를 보고 렌더 방식을 정합니다.

• success: true/false (필수 · 모든 매크로 공통)
• data: [{...}, {...}] — 출력 타입이 "표/테이블"일 때. 배열을 주면 결과 패널에 열 자동 감지된 테이블로 렌더.
• json: {...} — 출력 타입이 "JSON / 원문"일 때. 객체를 그대로 JSON 뷰어(textarea + 복사 버튼)로 렌더.
• download_links: [{ url, name, size }] — 출력 타입이 "파일 다운로드"일 때. 다운로드 버튼 목록으로 렌더.
• message(성공) / error(실패) — 텍스트 블록(<pre>)으로 렌더. 어떤 출력 타입이든 보조로 함께 써도 좋습니다.

여러 필드를 동시에 채워도 됩니다 — data로 테이블을 보여주면서 download_links로 CSV도 같이 내려주는 식의 조합이 가능합니다(실제 샘플 code39.js는 data + download_links + message를 함께 반환합니다).

AI 프롬프트로 코드 얻기 — 우측 패널

로직이 복잡하거나 외부 라이브러리 사용법이 낯설 때, 오른쪽의 "AI 프롬프트" 패널에서 도움을 요청합니다.

1. 먼저 왼쪽 Input 패널에서 필요한 입력 필드(이름·타입·설명)를 정의합니다. 이 정의가 프롬프트에 자동 포함됩니다.
2. 오른쪽 패널 상단의 시나리오 뱃지(매크로 유형에 맞춘 예시 목록 — "지정 URL 스크래핑해서 DB에 INSERT", "테이블 A→B 마이그레이션" 등)를 클릭하면, 해당 시나리오 템플릿이 프롬프트 textarea에 자동으로 채워집니다.
3. textarea에서 세부 요구사항(어떤 URL, 어떤 컬럼, 어떤 예외 처리 등)을 자유롭게 추가합니다.
4. 헤더의 복사 버튼으로 프롬프트 전체를 복사 → ChatGPT / Claude / Gemini에 붙여넣어 실행.
5. AI가 돌려준 코드를 가운데 에디터에 붙여넣고 저장.
6. 바로 4단계(Quick Test)로 넘어가 실행하며 반복 개선합니다.

스캐폴드 버튼()으로 뽑은 빈 골격 + AI 프롬프트 조합을 활용하면, 실제 작성해야 하는 코드는 핵심 로직의 몇 줄뿐으로 줄어듭니다.

왼쪽 패널 상단의 Quick Test 탭(🧪 플라스크 아이콘)으로 전환합니다. Quick Test는 2단계에서 준비한 매크로 서버를 통해 실제로 코드를 실행합니다.

1. 입력 파라미터 값을 행 단위로 채웁니다.
2. [실행] 버튼 클릭 → "실행 중..." 스피너.
3. 반환값에 따라 결과 패널이 자동 결정:
   • data가 있으면 테이블
   • json이 있으면 JSON 뷰어
   • download_links는 다운로드 버튼 목록
   • message/error는 <pre> 텍스트 블록

동시에 하단 터미널 창에 stdout/stderr가 실시간으로 흘러가므로 디버깅이 편합니다.

Quick Test로 동작이 확인되면 스케줄을 걸어 자동 실행을 맡길 수 있습니다. 상세 화면의 스케줄 섹션에서 두 값을 지정하는 것으로 끝납니다.

• 시작 시간(offset) — HH:MM 형식 (예: 00:00 = 자정, 03:30 = 새벽 3시 30분). 이 시각이 반복 실행의 기준점이 됩니다.
• 반복 간격 N (분) — 시작 시간으로부터 N분마다 실행됩니다. 예: 5를 넣으면 5분마다, 60이면 1시간마다, 1440이면 하루에 한 번.
• 활성 토글 — 스케줄을 일시 중지 / 재개할 수 있습니다 (설정은 그대로 보존).

예시: 시작 시간 00:00 + 간격 5 → 매일 자정을 기준으로 5분마다(00:00, 00:05, 00:10 …) 실행. 시작 시간 09:00 + 간격 1440 → 매일 오전 9시에 한 번씩 실행.

저장하면 해당 매크로 서버가 이 주기에 맞춰 매크로를 자동 실행합니다. QuickStart는 신호만 전달하고 실제 실행과 트래픽은 매크로 서버가 담당합니다. (별도의 크론 표현식은 사용하지 않습니다 — 시작 시간 + 간격 두 값이면 충분합니다.)

데이터 > 데이터베이스 메뉴를 엽니다. 왼쪽 사이드바에 파란색 [+ 새 Dataset] 버튼과 최근/공개/내/팀 섹션, 본문은 Grid/List 뷰 카드로 구성됩니다.

각 카드의 4개 아이콘: ▶(DB 에디터) · 표(셀 에디터) · (API 설정) · 복사/삭제.

[+ 새 Dataset] → 위저드 모달.

1. Step 1 — 연결 방식 3개 중 선택: 새 DB 배포(Railway) · 기존 DB 연결 · 로컬 파일(JSON/CSV/Excel). DB 타입 드롭다운 4종(MySQL 3306 · MariaDB 3306 · PostgreSQL 5432 · MongoDB 27017) · host · port · DB · user · password → [연결 테스트] 버튼으로 접속 가능 여부를 확인합니다.
2. Step 2 — 성공 시 테이블 목록이 표시되며 하나를 선택하면 필드가 펼쳐집니다.
3. Step 3 — 데이터셋 등록: 이름 · 설명 · 테이블 · PK · 컬럼(* 또는 콤마) · WHERE · LIMIT · ORDER BY · 공개 여부. 우측 [쿼리 테스트]로 미리보기 후 [저장].

카드의 ▶ (플레이) 아이콘으로 풀스크린 오버레이 에디터를 엽니다. 3패널 구성입니다.

• 왼쪽 — Tables/Views/Procedures/Functions 탭, 테이블 구조 인스펙터, 커맨드 아이콘(CREATE 복사 · Drop · Update · Insert · Delete · Join · Reverse · Refresh).
• 가운데 — 여러 탭의 SQL 에디터. ▶ Run 또는 F5/F9 실행. 결과는 TSV/CSV/JSON/SQL 내보내기 + "Send to Macro"로 매크로에 즉시 전달 가능.
• 오른쪽 — 결과 그리드(셀 편집 가능).

카드의 API 설정 버튼(플러그 아이콘)을 누르면 API 설정 모달이 열립니다.

1. 기본 정보: Namespace(필수, URL 뒷부분) · Table · JOIN Table · Page 변수(기본 page) · Per Page(50) · 캐시 시간(0~1440분).
2. [자동 생성] 버튼 → JSON 응답 구조 자동 조립 (main_container → main_fields → item_container → item_fields → detail). 각 필드는 "JSON 키 → SQL 변수" 매핑.
3. [저장] → [배포] 순서로 누르면 엔드포인트가 활성화됩니다.

엔드포인트는 GET https://happycat.apidealder.net/endpoint/{namespace} 형태로 공개됩니다. API 모달의 ACL 섹션에서 보안을 겁니다.

• API Key (자동 생성 버튼 · header/param 전달 방식 · 헤더명 X-API-KEY)
• IP 화이트리스트 — 와일드카드/CIDR 지원
• Referer 제한 — 호출 허용 도메인
• Rate Limit — 분당 최대 요청 수

호출 예: curl -H "X-API-KEY: ..." https://happycat.apidealder.net/endpoint/menu_list

원격 관리 화면은 네 덩어리로 나뉩니다. 한눈에 어디를 누르면 되는지 먼저 익혀 두는 편이 빠릅니다.

• 왼쪽 서버 목록 — 내가 관리 중인 도메인이 리스트로 나옵니다. 도메인 앞의 작은 동그라미가 지금 연결 가능한지 알려줍니다. 좁게 접을 수도 있습니다.
• 가운데 파일 영역 — 선택한 서버의 파일 탐색기. 맨 위에 경로 표시줄·정렬 버튼·터미널 토글이 모여 있고, 그 아래에 폴더 내용이 열(컬럼) 방식으로 펼쳐집니다.
• 하단 액션 바 — 업로드 · 새 폴더 · 새 파일 · 다운로드 · 삭제 버튼이 모여 있습니다. 파일이나 폴더를 먼저 골라야 해당 버튼이 활성화됩니다.
• 터미널 패널 — 필요할 때만 펼치는 하단 콘솔. 위 툴바의 터미널 아이콘으로 열고 닫습니다.

왼쪽 목록에서 원하는 도메인을 클릭합니다. 도메인 이름 앞의 동그라미가 지금 상태를 알려줍니다.

• 초록 점 — 정상. 클릭하면 바로 파일 목록이 열립니다.
• 회색 점 — 오프라인. 컨테이너가 꺼졌거나 네트워크가 막혔을 수 있습니다.
• 흰 점 — 상태 확인 중이거나 아직 모릅니다.

목록이 비어 있으면 "먼저 서버를 배포하세요" 안내와 함께 싱글파일 / 프로젝트 / 데이터베이스 배포 화면으로 가는 링크 버튼이 표시됩니다.

가운데 영역은 폴더를 누를 때마다 오른쪽으로 한 칸씩 펼쳐지는 열(컬럼) 방식 탐색기입니다. 최대 4칸까지 동시에 보이고 더 깊어지면 앞쪽 칸이 자동으로 접힙니다.

• 경로 표시줄 — 집 모양 아이콘으로 최상위(/)로 한 번에 이동할 수 있고, 슬래시로 나뉜 각 구간을 누르면 그 위치로 바로 점프합니다.
• 경로 입력란 — /var/www/html/storage/logs처럼 직접 타이핑한 뒤 Enter를 치면 중간 단계 없이 한 번에 이동합니다.
• 정렬 버튼 — 이름 · 크기 · 수정시각. 같은 버튼을 다시 누르면 오름/내림 순서가 뒤집힙니다.
• 선택 방법 — 한 번 클릭은 선택, Shift+클릭은 범위 선택, Ctrl/⌘+클릭은 하나씩 추가·해제. 여러 개 고르면 오른쪽 위 액션 바에 "N selected" 배지가 나타납니다.

파일을 한 번 클릭하면 선택만 되고, 다시 한 번 클릭하면 내용이 열립니다. 확장자에 따라 알맞은 뷰가 자동으로 뜹니다.

• 텍스트·코드 파일 → 중앙에 문법 강조가 들어간 코드 편집기가 열립니다. HTML · PHP · Vue · CSS/SCSS · JavaScript/TypeScript · JSON 등을 자동 인식합니다.
• 이미지 파일(PNG · JPG · GIF · SVG · WebP · BMP · ICO) → 이미지 뷰어 창이 열려 바로 확인할 수 있습니다.
• 실행/압축 같은 바이너리 파일은 "편집할 수 없는 파일" 안내가 뜨고 내용이 열리지 않습니다.
• 편집기 오른쪽 위 [저장하기] 버튼을 누르면 서버에 즉시 반영됩니다. 재배포는 필요 없습니다. Esc 키 또는 [취소]로 저장 없이 닫을 수 있습니다.
• 파일 용량은 10MB 이하만 편집기로 열립니다. 그보다 크면 "너무 큰 파일" 안내만 표시됩니다.

하단 액션 바 버튼과 상단 터미널 패널을 조합해 실제 작업을 진행합니다.

• 압축 올리기 — .zip · .tar · .tar.gz · .tgz 를 끌어다 놓거나 클릭해서 선택하면, 압축 안의 폴더/파일 구조를 미리 보여줍니다. [업로드 시작]을 누르면 1MB씩 나눠 보내며 진행률이 표시되고 완료 후 현재 폴더가 자동 새로고침됩니다.
• 파일 올리기 — 여러 파일을 한 번에 골라 현재 폴더에 그대로 업로드합니다. 압축 해제는 하지 않습니다.
• 새 폴더 / 새 파일 — 이름 입력 창이 뜹니다. 영문·숫자·점(.)·하이픈(-)·언더바(_)만 쓸 수 있습니다.
• 다운로드 — 파일이면 그대로, 폴더를 고르면 자동으로 ZIP으로 묶어 내려받습니다.
• 삭제 — 확인 창이 한 번 뜨며, 여러 개를 선택했다면 한 번에 모두 지워집니다.
• 이동 · 복사 — 파일을 폴더 위로 끌어다 놓으면 "이동/복사" 확인 창이 뜹니다. 키보드로 Ctrl+X 또는 Ctrl+C로 담아놓고, 다른 폴더에서 Ctrl+V로 붙여 넣어도 같은 확인 창이 열립니다.
• 터미널 — 상단 툴바의 터미널 아이콘으로 하단 패널을 펼치면 지금 고른 서버의 셸로 바로 연결됩니다. 입력란에 명령을 적고 Enter — 정상 출력은 흰색, 오류는 빨간색으로 구분됩니다. ↑/↓ 키로 이전 명령을 다시 불러올 수 있고, 현재 작업 폴더가 자동으로 따라다녀 cd some/path 이후 다음 명령부터는 그 위치에서 실행됩니다.

QuickStart에 로그인한 후 상단 내비게이션 또는 대시보드에서 서비스 → 싱글파일 메뉴를 클릭합니다. 화면은 상단 툴바와 본문으로 나뉩니다.

• 상단 툴바 — 왼쪽에 히스토리 · 가이드 · 제목 입력 · 저장(💾), 중앙에 템플릿 드롭다운, 오른쪽에 공유 · Run ▶ · Deploy 📦 버튼이 있습니다.
• 중앙 에디터 — 상단에 prompt · html · scss · vuejs 네 개 탭. 클릭으로 전환합니다.
• 우측 미리보기 패널 — Run 버튼을 누를 때 실제 화면이 렌더링됩니다.

상단 툴바 중앙의 템플릿 드롭다운(select)을 펼쳐 "Restaurant Booking System (레스토랑 예약 시스템)"을 선택합니다. 발생 순서는 다음과 같습니다.

1. 드롭다운 값이 바뀌는 순간 선택한 템플릿이 자동으로 적용됩니다.
2. prompt · html · scss · vuejs 네 개 탭이 자동으로 채워집니다(AI 프롬프트 + 미리 준비된 완성 코드).
3. 활성 탭은 기본적으로 prompt로 이동합니다 — 이 내용은 AI에게 재생성을 요청할 때 사용됩니다.
4. 상단 툴바의 Run ▶ 버튼을 클릭하면 우측 미리보기 패널에서 3컬럼 레이아웃(달력 / 시간슬롯 / 예약 폼)의 예약 시스템이 렌더링됩니다.

이 템플릿은 방문자가 메뉴를 구경하는 단순 랜딩이 아니라, 가게 주인이 날짜·시간·테이블 현황을 관리하고 예약을 접수하는 운영 화면입니다.

이 템플릿은 "환경설정 모달"과 "코드 직접 수정" 두 단계로 커스터마이징합니다. 화면 우상단의 테마 토글(☀/🌙) 옆 ⚙ 환경설정 아이콘이 출발점입니다.

A. 환경설정 모달 — 코드를 건드리지 않고 데이터만 조정

1. ⚙ 아이콘을 클릭하면 풀스크린 오버레이 + 중앙 모달이 열립니다. 탭이 4개 있습니다.
2. 시간대역 — 아침 / 점심 / 저녁의 시작·종료 시간을 number input으로 조정. 상단의 시각화 바가 색상 세그먼트로 실시간 반영됩니다. 시작=종료면 "(비활성)"으로 표시되어 해당 시간대는 뜨지 않습니다.
3. 시간슬롯 — 타임스텝(10 / 30 / 60 / 120분) 버튼으로 슬롯 간격을 결정, 하단 그리드에서 슬롯 하나하나를 클릭해 활성/비활성 토글. 상단에 활성/비활성 개수가 표시됩니다.
4. 테이블 — 테이블 목록(인라인 이름 변경 + 삭제) 및 하단 입력창으로 테이블 추가. 이 데이터가 예약 폼의 "테이블" select 선택지가 됩니다.
5. 휴일 — 정기 휴무 요일(일~토 7개 토글 버튼) + 특정 휴일(날짜 input + 사유 text 추가/삭제 리스트). 사유는 설정 모달에서만 보이고 고객 화면에는 노출되지 않습니다.

B. 코드 수정 — 가게 이름 · 테마 색상 등

• html 탭 — 상단 헤더의 "레스토랑 예약" 타이틀 문자열을 내 가게 이름으로 바꿉니다. Ctrl+F로 검색하면 빠릅니다.
• vuejs 탭 — mounted() 안에 목업 예약 생성 로직이 있습니다(D+1일 ~10%, D+2일 ~5%, D+3일 ~2% 랜덤 + 한국인 이름 배열). 실제 운영 시에는 이 블록을 비우거나 서버 API 호출로 교체하세요. 공휴일은 https://date.nager.at/api/v3/PublicHolidays/{year}/KR를 호출하므로, 다른 나라는 끝의 KR만 해당 국가 코드로 바꾸면 됩니다.
• scss 탭 — 테마는 SCSS 변수가 아니라 CSS custom properties로 구성됩니다. .reservation(라이트) / .reservation.dark(다크) 스코프 안에 정의: --primary(브랜드 포인트), --bg(전체 배경), --card-bg(카드 배경), --text / --text-sub, --border, --holiday(공휴일 빨강), --closed-bg(휴일 amber), --occ-bg / --occ-border(자리 남은 슬롯). 이 변수값만 바꿔도 전체 톤앤매너가 일관되게 변경됩니다.

수정 후 툴바 저장(💾) → Run ▶으로 미리보기 갱신. 저장되지 않은 탭에는 작은 점(●) 표시.

이제 내가 손님이 되어 예약을 한 번 넣어보는 단계입니다. 배포 후 가게에서 실제로 쓰게 될 흐름과 똑같습니다. 미리보기 화면을 보면서 아래 순서대로 따라 해보세요.

1. 달력에서 날짜를 고릅니다 (왼쪽) — 오늘 이후의 날짜를 클릭합니다. 빨갛게 표시된 날은 공휴일, 연한 갈색(amber)은 가게에서 지정한 특별 휴일, 흐리게 보이는 날은 정기 휴무일이라 클릭되지 않습니다. 이미 예약이 들어있는 날에는 숫자(예: "+2")가 작게 붙어있어서 한눈에 보입니다.
2. 시간을 고릅니다 (가운데) — 날짜를 고르면 그 날 가능한 시간들이 둥근 버튼으로 나타납니다. 각 시간 버튼의 숫자(예: "2/5")는 "이미 예약 2건 / 총 테이블 5개"라는 뜻입니다. 색이 연하면 자리 여유 있음, 진하면 거의 찼음, 취소선은 꽉 차서 선택 불가능이란 표시입니다.
3. 누가 예약했는지 확인합니다 — 시간 버튼을 누르면 아래로 "이 시간에 예약한 사람 목록"이 펼쳐져 기존 예약자의 이름, 앉을 테이블, 인원이 표시됩니다. 중복 예약을 막기 위한 안내입니다.
4. 예약 폼을 채웁니다 (오른쪽) — 고른 날짜와 시간이 위에 요약으로 보입니다. 그 아래 빈칸을 위에서부터 차례로 채우세요.
   • 손님 이름: 예약자 이름
   • 연락처: 숫자만 입력해도 자동으로 "010-1234-5678" 형식으로 바뀝니다
   • 테이블: 그 시간에 이미 예약된 테이블은 목록에서 자동으로 빠져있어 실수로 겹쳐 예약할 일이 없습니다
   • 인원수: 1명부터 20명까지
   • 메모: 요청사항 (생일, 휠체어 자리 등)
5. [예약하기] 버튼을 누릅니다 — 이름을 비운 채 누르면 경고가 나옵니다. 제대로 입력했다면 "예약이 완료되었습니다" 확인창이 뜨고, 달력의 "+N" 숫자와 시간 버튼의 "N/M" 숫자가 즉시 1 올라갑니다. 폼은 자동으로 비워져 다음 예약을 받을 준비가 됩니다.
6. 밝은 테마/어두운 테마도 확인 — 화면 오른쪽 위의 ☀/🌙 아이콘을 눌러보세요. 매장에서 주간/야간 사용 환경이 다를 수 있으니 두 테마 모두에서 글씨가 잘 보이는지 확인합니다.

모바일·태블릿에서도 잘 보이는지 확인하려면 브라우저 창의 너비를 마우스로 줄여보세요. 화면이 좁아질수록 3칸이 → 2칸 → 1칸(세로 스택)으로 자동 재배치됩니다. 직원이 태블릿으로, 손님이 스마트폰으로 쓴다는 점을 생각하면 좁은 화면에서 글자/버튼이 충분히 큰지 꼭 점검하세요.

배포는 Railway라는 호스팅 서비스를 이용합니다. 상단 툴바의 Deploy 버튼을 처음 클릭하면 "Railway 계정 연결이 필요합니다" 모달이 뜹니다. 다음 순서로 진행됩니다.

1. 모달의 Railway로 로그인 버튼을 클릭 → 새 탭에서 Railway 로그인 페이지가 열립니다.
2. Railway 계정이 없다면 해당 페이지에서 이메일 또는 GitHub로 무료 가입합니다.
3. 로그인 후 "QuickStart가 배포 권한을 요청합니다" 화면에서 Authorize를 클릭합니다.
4. 자동으로 QuickStart 탭으로 돌아오고 "연결 완료" 토스트가 뜹니다.

한 번만 연결하면 이후 배포 시에는 이 단계를 건너뜁니다.

계정 연결이 끝났다면 다시 Deploy 버튼을 클릭합니다. 진행 모달이 열리고 8단계가 순서대로 진행되며 각 단계가 완료될 때마다 초록색 체크 아이콘으로 바뀝니다.

1. Pack — 코드를 압축 패키지로 묶습니다.
2. Upload — 패키지를 Railway로 전송합니다.
3. Install — 필요한 라이브러리를 설치합니다.
4. Build — SCSS 컴파일, Vue 번들링이 수행됩니다.
5. Migrate — 정적 파일을 웹 서버 위치로 배치합니다.
6. Start — 컨테이너가 기동됩니다.
7. Health — 사이트가 실제로 응답하는지 확인합니다.
8. Complete — 완료 및 URL 확정.

전체 소요는 일반적으로 1~3분입니다. 모달 하단의 로그 보기를 펼치면 실시간 로그를 볼 수 있습니다.

배포가 완료되면 모달 하단에 도메인 열기 버튼이 나타납니다. 클릭하면 자동 할당된 무료 도메인(예: happycat.apidealder.net)이 새 탭에서 열립니다. 이제 이 주소를 누구에게나 공유할 수 있습니다.

나중에 내 도메인(예: myname.com)을 연결하고 싶다면 대시보드의 설정 → 도메인 관리에서 커스텀 도메인을 등록하고 안내되는 DNS 레코드를 DNS 공급자에 추가합니다.

상단 내비 또는 대시보드에서 서비스 → 데이터베이스를 클릭해 데이터베이스 페이지로 이동합니다. 화면은 왼쪽 사이드바와 가운데 본문으로 나뉩니다.

• 왼쪽 사이드바 — 맨 위에 파란색 [+ 새 Dataset] 버튼, 그 아래 "최근", "공개 데이터셋", "내 데이터셋", "팀 공유" 섹션이 차례대로 있습니다.
• 가운데 본문 — 상단 툴바에 검색창(이름/테이블/URI 검색), 그리드⇄리스트 뷰 토글, 페이지당 개수(20/50/100). 그 아래에 내가 가진 데이터셋들이 카드 형태로 나열됩니다.
• 각 카드의 아이콘 4개 — ▶(플레이) 데이터베이스 에디터 열기 · 표 아이콘 셀 에디터 · API 설정 버튼(플러그 아이콘) · 복사/삭제. 카드 이름을 더블클릭하면 인라인으로 이름 변경이 가능합니다.

왼쪽 사이드바의 [+ 새 Dataset] 버튼을 클릭하면 중앙에 3단계 위저드 모달이 열립니다. 진행 순서:

1. Step 0 — 개요: 데이터셋이 무엇이고 무엇을 할 수 있는지 설명 카드가 표시됩니다. 다음을 누르면 Step 1로.
2. Step 1 — 연결 방식: 세 개의 큰 선택지 중 하나를 고릅니다.
   • 새 DB 배포 — Railway에 DB 컨테이너를 새로 만듭니다.
   • 기존 DB 연결 (가장 많이 사용) — 이미 가진 DB에 연결합니다.
   • 로컬 파일 — JSON/CSV/Excel을 업로드해 데이터셋으로 쓸 때.
3. 기존 DB 연결을 고른 경우 입력 필드:
   • DB 타입 드롭다운 — MySQL(기본포트 3306) · MariaDB(3306) · PostgreSQL(5432) · MongoDB(27017). 선택하면 포트가 자동으로 기본값으로 채워집니다.
   • Host · Port · 데이터베이스 이름 · 계정 · 비밀번호
4. 하단 [연결 테스트] 버튼 클릭 → 접속이 확인되면 Step 2로 자동 이동, 실패하면 아래에 빨간 에러 메시지가 뜹니다.

연결이 성공하면 위저드가 자동으로 다음 두 단계를 안내합니다.

Step 2 — 테이블 선택

• DB 안의 테이블 목록이 행 형태로 표시됩니다 (테이블 이름 · 아이콘 · 행 수 · 코멘트).
• 원하는 테이블을 클릭하면 우측 영역에 해당 테이블의 필드 목록이 펼쳐집니다.

Step 3 — 데이터셋 등록 (이 단계에서 "데이터셋" 메타정보를 확정합니다)

• 왼쪽 등록 폼:
  • Dataset 이름 (필수) — 예: "메뉴 목록"
  • Dataset 설명
  • 대상 테이블 드롭다운 (필수)
  • Primary Key 필드 — 기본적으로 id가 있으면 자동 선택됩니다.
  • 포함 컬럼 — *(전체) 또는 id,name,price처럼 콤마 구분
  • WHERE 조건 — 예: stock_flag = 1
  • LIMIT — 예: 0,100 (0번부터 100개)
  • ORDER BY — 예: created_at DESC
  • 공개(shared) 체크박스 — 다른 사용자에게 읽기 권한만 공유할 때
• 오른쪽 쿼리 테스터: [쿼리 테스트] 버튼을 누르면 지금 설정값으로 실제 SQL을 실행해 결과 행 수 · 컬럼 수 · 미리보기 테이블을 보여줍니다. 원하는 결과가 나올 때까지 좌측 조건을 조정하세요.
• 하단 [저장] → 위저드 종료 → 메인 화면에 새 데이터셋 카드가 추가됩니다.

데이터셋 카드의 ▶ (플레이) 아이콘을 클릭하면 풀스크린 오버레이로 데이터베이스 에디터가 열립니다. 세 개의 패널로 구성됩니다.

• 왼쪽 — 객체 탐색기: 상단 탭(Tables / Views / Procedures / Functions). 각 테이블을 클릭하면 아래 인스펙터에 컬럼 · 타입 · 코멘트가 표시됩니다. 위쪽 커맨드 아이콘 묶음에서 CREATE 스크립트 복사, Drop, Update, Insert, Delete, Join, Reverse, 새로고침을 할 수 있습니다.
• 가운데 — SQL 코드 에디터: 여러 쿼리를 탭으로 관리합니다. 탭 이름 더블클릭으로 이름 변경. 상단 툴바 ▶(Run) 버튼 또는 F5 / F9로 실행. 결과는 TSV / CSV / JSON / SQL 로 내보낼 수 있고, "Send to Macro" 버튼으로 결과를 매크로에 바로 넘길 수도 있습니다.
• 오른쪽 — 결과 그리드: 실행된 쿼리의 행을 표로 보여줍니다. 셀 단위 편집(셀 에디터)도 가능합니다.

이 단계는 "내가 공개하려는 데이터가 실제로 원하는 모양으로 들어있나?"를 직접 확인하는 자리입니다. 데이터가 이상하면 여기서 먼저 수정하세요.

이제 이 데이터셋을 외부에서 호출할 수 있는 REST API로 만듭니다. 데이터셋 카드의 API 설정 버튼(플러그 아이콘)을 클릭하면 API 설정 모달이 열립니다.

1. 기본 정보
   • Namespace (필수) — 이 이름이 URL 끝에 들어갑니다. 예: menu_list로 하면 엔드포인트가 /endpoint/menu_list가 됩니다.
   • Table — 대상 테이블(데이터셋이 이미 가리키므로 기본 채워짐)
   • JOIN Table — 다른 테이블과 조인해서 함께 내려주려면 여기에 선택
   • Page 변수 — 페이지네이션 파라미터 이름 (기본 page)
   • Per Page — 한 번에 내려줄 개수 (기본 50)
   • 캐시 시간 — 0~1440분
2. 응답 구조 자동 생성: [자동 생성] 버튼을 누르면 JSON 응답이 main_container → main_fields → item_container → item_fields → (선택) detail 구조로 자동 조립됩니다. 각 필드는 "JSON 키 → SQL 변수" 매핑입니다 (예: name → $customer_name). 필요하면 수동으로 추가/삭제.
3. 권한(ACL) 설정 — 아래에서 상세히.
4. 하단 [저장]을 누르면 API 정의가 저장됩니다.
5. [배포]를 누르면 배포 파이프라인이 실행되어 진행률 바가 표시되고, 완료 즉시 엔드포인트가 활성화됩니다.

배포가 완료되면 엔드포인트가 다음과 같은 형태로 공개됩니다 (커스텀 도메인 연결 시):

• GET https://happycat.apidealder.net/endpoint/menu_list
• GET https://happycat.apidealder.net/endpoint/menu_list?page=2
• GET https://happycat.apidealder.net/endpoint/menu_list/csv — CSV 다운로드

API Key 인증 (API 모달의 ACL 섹션):

• API Key — 옆의 [자동 생성] 버튼으로 UUID 형태 랜덤 키 생성
• 전달 방식 — header 또는 param
• Header Name 예: X-API-KEY / Param Name 예: api_key

호출 예시

헤더 방식:

curl -H "X-API-KEY: your-secret-key" https://happycat.apidealder.net/endpoint/menu_list

쿼리 파라미터 방식:

curl "https://happycat.apidealder.net/endpoint/menu_list?api_key=your-secret-key"

브라우저(fetch):

const res = await fetch('https://happycat.apidealder.net/endpoint/menu_list', { headers: { 'X-API-KEY': 'your-secret-key' } });
const data = await res.json();

추가 보안 장치 (모두 ACL 섹션):

• IP 화이트리스트 — 와일드카드(192.168.1.*) · CIDR(10.0.0.0/24) 지원
• Referer 제한 — 호출 허용 도메인 목록
• Rate Limit — 분당 최대 요청 수

상단 내비 또는 대시보드에서 서비스 → 데이터 수집을 클릭해 파서 룰 목록 화면으로 이동합니다. 레이아웃은 데이터베이스 페이지와 비슷합니다.

• 왼쪽 사이드바 — 맨 위에 파란색 [+ 새 파서 룰] 버튼, 아래에 "최근", "공개 룰 리스트", "내 룰"(사용자 필터) 섹션.
• 가운데 본문 — 상단 툴바에 검색창, 그리드/리스트 뷰 토글, 페이지네이션. 그 아래에 지금까지 만든 룰들이 카드(또는 테이블 행) 형태로 나열됩니다.
• 각 카드의 버튼 아이콘 — ⚗️(테스트튜브) 아이템 테스트 · ⏱(시계) 스케줄(카드에 "Max" 리본이 보이면 MAX 플랜 필요) · 편집 · 복제 · 삭제. 카드에는 룰 이름, 테스트 페이지, 설명, 생성일이 표시됩니다.

왼쪽 사이드바의 [+ 새 파서 룰] 버튼을 누르면 중앙에 3단계 위저드가 열립니다.

1. Step 1 — 개요: Extract / Crawl / Field Mapping / Reuse 4가지 카드와 파이프라인 다이어그램 (Parser Rule → Database / Macro / Scheduler / API) 을 보여줍니다. 입력 없이 다음으로 진행.
2. Step 2 — 데이터베이스 연결: 수집한 데이터를 넣을 데이터셋을 카드 리스트에서 선택합니다. 각 카드에 데이터셋 이름, DB 타입, 테이블명, 도메인이 표시됩니다. 선택 후 [다음]을 누르면 "에이전트 연결 → 파서 엔진 배포 → 배포 완료" 3단계가 자동 진행되어 해당 docker agent에 파서 엔진이 설치됩니다.
3. Step 3 — 룰 등록:
   • 룰 이름 (필수) — 예: "네이버 뉴스 IT섹션"
   • 설명 — 무엇을 수집하는지 한 줄로
   • [룰 생성] 버튼을 누르면 위저드가 닫히고 곧바로 파서 설정 화면으로 진입합니다.

룰 편집기가 열리면 상단에 대상 URL 입력란이 있습니다. 실제 수집할 페이지 주소(예: https://news.example.com/it)를 넣고, 그 아래 추출 방식을 설정합니다. 파서는 세 가지 접근법을 조합해서 데이터를 집어냅니다.

• Loop Splitter (총 3칸, 기본 + 보조 2칸) — HTML을 반복 단위로 쪼개는 문자열 패턴. 예: 뉴스 리스트 한 건을 감싼 <li class="article"> 태그 일부를 구분자로 지정.
• XPath 셀렉터 (최대 3레벨) — 각 반복 단위 안에서 제목/URL/이미지 등을 XPath로 집어냅니다. 셀렉터는 배열(노드 집합)로 떨어지는 경로를 입력하는 것이므로, 값이 //h3/a/text() 형태로 잡힌다면 //h3/a까지만 입력합니다.
• JSON 셀렉터 (3레벨) — JSON API를 반환하는 페이지인 경우 dot·bracket 표기로 배열 경로를 지정합니다. 데이터에 data.items[0].title 같은 구조가 있다면 data.items까지만 입력해 아이템 배열이 잡히도록 유도합니다.
• 함수 처리 — 뽑아낸 값에 후처리를 걸 수 있습니다. 컬럼의 "함수" 칸에 작성:
  • trim(@p) — 앞뒤 공백 제거 (@p는 현재 값)
  • replace(원본,새값) / regex(패턴,치환)
  • strtoupper(@p) 같은 PHP 함수 직접 호출
  • get_data() · slice() · remove() · map() 등 내장 헬퍼

가장 빠른 길은 셀렉터를 손으로 맞추는 것이 아니라, Loop Splitter로 잘라낸 소스를 AI 프롬프트에 통합해 AI의 응답을 받아 룰에 자동 등록되게 하는 것입니다 — 다음 4단계가 바로 그 방법입니다.

수십 개의 셀렉터를 손으로 입력하는 대신, AI에게 샘플을 주고 완성된 규칙을 받아 그대로 적용하는 지름길입니다. 초보자에게 가장 추천하는 방식입니다.

사전 조건 — 3단계에서 대상 URL을 입력한 뒤 편집기 상단의 "테스트" 탭에서 추출 테스트를 한 번 실행해 응답 본문이 확보되어 있어야 합니다. 이 본문이 프롬프트에 자동 포함됩니다.

A. 프롬프트 요청서 생성 & 복사

1. 테스트 결과 패널 상단의 강조된 🪄 "AI 프롬프트" 버튼(지팡이 아이콘)을 누릅니다.
2. 버튼을 누르면 문서 타입(HTML / JSON / XML)이 자동 감지되고, 해당 문서의 본문이 추출되어 프롬프트가 조립됩니다.
3. 바로 아래 코드 편집 패널에 마크다운 형식의 프롬프트가 펼쳐집니다. 내용은:
   • 작업 설명 문단
   • HTML/JSON 원본 샘플
   • 추출 목표 — 반복 구분자, 상세 페이지 URL 필드, 고유 키, 그리고 각 컬럼의 라벨·변수명·타입·분할 규칙·후처리 함수
   • 예시 JSON과 "JSON 외 다른 텍스트는 출력하지 말 것" 지시
4. 프롬프트는 문서 언어에 맞춰 8개국어(한국어·영어·일본어·중국어·러시아어·독일어·프랑스어·스페인어) 자동 지원 — 한국어 문서면 한국어 라벨, 중국어 문서면 중국어 라벨로 자동 번역된 상태로 생성됩니다.
5. 패널 안을 클릭 후 Ctrl+A → Ctrl+C로 전체 복사.

B. 외부 AI에 붙여넣고 실행

1. ChatGPT / Claude / Gemini와 같은 AI에 붙여넣고 전송.
2. AI가 규칙 JSON을 응답합니다.
3. 응답 전체(또는 JSON 부분)를 복사합니다.

C. 응답을 붙여넣어 규칙 필드 자동 채움

1. 같은 패널 위쪽의 📥 "패턴 가져오기" 버튼(불러오기 아이콘)을 누르면 붙여넣기용 입력창이 열립니다(예상 형식이 안내문으로 표시됩니다).
2. 클립보드의 JSON을 붙여넣고 [패턴 적용] 클릭.
3. 반복 구분자·셀렉터·고유 키·상세 페이지 URL 필드가 룰 상단에 자동으로 매핑되고, 각 컬럼(제목·변수명·타입·분할 규칙·후처리 함수)이 필드 목록에 한 번에 채워집니다. 변수명이 중복되면 자동으로 다른 이름이 붙어 충돌을 막습니다.
4. 편집기는 자동으로 "fields" 탭으로 전환되어 결과를 바로 확인할 수 있고, 화면 아래에는 "패턴 적용됨: N개 필드" 같은 요약 토스트가 뜹니다.

셀렉터를 어느 정도 채웠다면 실제로 뽑히는지 확인합니다. 두 군데에 테스트 버튼이 있습니다.

• 룰 카드의 ⚗️ 아이콘 클릭
• 또는 룰 편집기 상단의 "테스트" 탭

클릭하면 아이템 테스트 모달이 열리고 다음이 표시됩니다.

1. 상단 상태 바 — "추출된 아이템 N개 / 컬럼 M개" 요약. N이 0이면 셀렉터가 잘못 매칭된 것이니 Loop Splitter부터 다시 봅니다.
2. 내보내기 버튼 — CSV · XLSX · JSON · HTML 네 형식으로 결과를 바로 다운로드할 수 있습니다. 테스트 단계에서 샘플 데이터를 팀에 공유할 때 유용합니다.
3. 결과 그리드 — Row# + 감지된 컬럼명(첫 아이템에서 자동 추출)이 헤더로, 각 행이 본문으로 표시됩니다.
4. 셀 hover — 마우스를 셀 위에 얹으면 "복사" 버튼이 나타나 그 값을 클립보드로 집을 수 있습니다.

결과가 이상하면 모달을 닫고 셀렉터/함수를 고친 뒤 다시 테스트 — 이 반복이 파서 작업의 70%입니다.

테스트 결과가 만족스러우면 이제 실제 저장 설정을 확인합니다. 룰 편집기의 "저장" 섹션에서 다음을 지정합니다.

• 저장 방식 드롭다운 — "데이터베이스" 선택 (위저드에서 이미 데이터셋을 고른 상태라면 자동으로 잡혀 있습니다).
• 대상 테이블/컬렉션 이름 — 수집 데이터가 들어갈 테이블. 테이블이 없으면 에이전트가 첫 실행 때 자동으로 생성하며, 테스트에서 감지된 컬럼을 그대로 스키마로 씁니다.
• DB 모드 — Dataset(연결됨) / Custom 두 가지. Custom을 고르면 위저드와 별개로 host · user · password · database 를 직접 지정할 수 있습니다 (다른 DB에 적재할 때).

실행 시 일어나는 일

1. 룰을 실행(테스트의 "영구 저장" 버튼 또는 다음 단계의 스케줄)하면 docker agent가 대상 URL에 요청을 보냅니다.
2. Loop Splitter → XPath/JSON 셀렉터 → 함수 처리 순서로 아이템 추출.
3. 추출된 아이템이 대상 테이블에 insert되며, 중복 키(기본적으로 URL 해시 등)가 있으면 자동 skip/update.
4. 이 테이블은 5단계에서 만든 데이터셋 카드와 같은 DB이기 때문에, 앞서 만든 API 엔드포인트(/endpoint/...)에서 즉시 최신 데이터가 나옵니다.

마지막 단계는 "한 번 설정해 두면 알아서 돈다"를 만드는 것입니다. 룰 카드의 ⏱ (시계) 아이콘을 클릭하면 스케줄 모달이 열립니다. MAX 플랜 전용 기능이라 그 외 플랜은 아이콘 위에 "Max" 리본이 보입니다.

1. 스케줄 폼 입력 필드:
   • 시작 시간 — 시(0~23) + 분(0~59). 예: 새벽 3시 30분 시작.
   • 실행 간격 (분) — 예: 60이면 매 시간, 1440이면 하루 1회.
   • 활성 상태 — 토글. 끄면 스케줄이 보존되지만 실행은 멈춥니다.
   • 실행 모드 — 단일 URL 모드(대상 URL 하나) 또는 배치 모드(URL 목록을 순회). 배치 모드에서는 URL을 줄바꿈으로 구분해 목록으로 입력합니다.
2. 하단 [저장]을 누르면 QuickStart에 기록되는 동시에 해당 docker agent로도 자동 동기화되어 실제 실행은 agent가 담당합니다.
3. 이후 설정한 주기마다 agent가 자동으로 룰을 실행 → 데이터셋에 적재. QuickStart는 신호만 주고 트래픽에 직접 관여하지 않아 부하가 없습니다.

매크로와 조합 (선택) — 룰 편집기의 흐름 다이어그램에서 "매크로 선택" 드롭다운으로 원하는 매크로를 지정해 두면, 수집 직후 그 매크로가 실행됩니다. 예: 수집된 상품 가격을 이전 값과 비교해 일정 % 이상 내려갔으면 슬랙으로 알림 보내기.

운영 DB(B)에서 바로 분석 DB(C)로 밀어 넣으면 간단해 보이지만, 실제로는 컬럼명이 다르거나 개인정보가 섞여 있거나 시간대가 달라서 중간에 한 번 정리할 공간이 꼭 필요합니다. QuickStart의 데이타셋(A)이 바로 그 역할을 합니다.

• B (외부 소스) — 현재 운영되는 쇼핑몰 · ERP 같은 원본. 건드리면 서비스가 멈추므로 읽기만 합니다.
• A (내 데이타셋 · Docker) — B에서 끌어온 데이타를 담는 내 작업 공간. 컬럼을 이름 바꾸고, URL을 치환하고, 불필요한 컬럼을 빼고, 통계 컬럼을 더하는 모든 변환을 여기서 합니다.
• C (외부 타겟) — BI 대시보드가 물려 있는 분석 DB, 파트너사 DB 등 목적지. A에서 완성된 깨끗한 데이타만 흘려보냅니다.

이 방식의 장점:

1. B와 C가 서로 다른 엔진(MySQL ↔ PostgreSQL 등)이어도 A가 중계하므로 문제가 되지 않습니다.
2. A에 그대로 남아 있으므로 C를 날려도 A에서 다시 밀어 넣으면 됩니다. 롤백이 쉽습니다.
3. A에서 원하는 만큼 변환·테스트를 반복할 수 있고, 준비가 됐을 때만 C로 보냅니다.

먼저 B에서 받아올 데이타를 담을 내 데이타셋(A)을 만듭니다.

1. 상단 내비에서 데이타 → 데이타베이스 메뉴로 이동합니다. 목록 화면이 열립니다.
2. 오른쪽 위 [+ 새 데이타셋] 버튼을 누르고 다음을 입력합니다.
   • 이름 — 예: replication_staging
   • DB 타입 — MySQL 또는 PostgreSQL. B와 같은 엔진으로 맞추면 변환이 가장 적습니다.
   • 호스트 — 내 Docker 에이전트에 설치된 DB를 쓰는 것이 기본값입니다 (자동으로 채워집니다).
   • 데이타베이스명 — 예: my_staging
3. [저장]을 누르면 목록에 새 행이 생기고, 옆에 🔌 접속 테스트 · 편집 · 마이그레이션 · 내보내기 같은 아이콘 버튼들이 나타납니다.
4. 🔌을 눌러 접속 성공이 뜨는지 먼저 확인합니다. 성공해야 다음 단계로 넘어갈 수 있습니다.

이 데이타셋 A가 앞으로 B에서 받아올 데이타와 C로 보낼 데이타가 잠시 머무르는 중간 버퍼가 됩니다.

목록에서 방금 만든 A 행의 마이그레이션 아이콘을 누릅니다. 큰 3분할 모달이 열립니다.

• 왼쪽 Deck A — 방금 만든 내 데이타셋(replication_staging)이 자동으로 걸려 있고 현재 테이블·필드가 바로 보입니다.
• 가운데 센터 툴바 — 방향 표시(A → B / B → A)와 [전환] 버튼, 그리고 액션(⚡ hard_sync, 🔄 soft_sync, ➕ append …) 리스트가 있습니다.
• 오른쪽 Deck B — 원격 DB 접속 정보를 입력하는 폼.

기본 방향은 A → B(내 데이타셋을 밖으로 내보내기)이지만, 우리는 지금 B에서 가져올 것이므로 가운데 [전환] 버튼을 눌러 B → A로 바꿉니다. Deck B의 배지가 "소스(source)"로, Deck A의 배지가 "타겟(target)"으로 바뀌는지 확인합니다.

이제 Deck B 폼에 외부 운영 DB(B)의 접속 정보를 입력합니다.

1. 호스트 — 예: origin.acme.com 또는 10.0.1.23
2. DB 타입 — MYSQL · POSTGRESQL · MONGODB · ELASTICSEARCH 중 선택
3. 데이타베이스명 — 예: sales_db
4. 계정 / 비밀번호 — 읽기 전용 계정을 쓰는 것을 강력히 권장합니다. SELECT만 가능한 계정이면 실수로 B를 건드릴 수 없습니다.
5. [접속 테스트] 버튼 클릭 → "접속 성공" 메시지와 함께 테이블 목록이 자동으로 로드됩니다.

접속이 성공하면 Deck B에 테이블 목록이 나타나고 오른쪽 위에 [다음] 버튼이 생깁니다. 이 버튼을 누르면 Deck B가 "접속 정보" 화면에서 "테이블 선택" 화면으로 전환됩니다.

1. 테이블 선택 — 체크박스로 가져올 테이블을 고릅니다. [전체 테이블]에 체크하면 한 번에 전부 선택됩니다. 처음에는 orders · customers · products 3개만 골라 작게 시작하는 편이 안전합니다.
2. 조건 입력(선택) — Deck B 하단의 WHERE 입력란에 created_at > '2026-01-01'처럼 조건을 걸면 조건에 맞는 행만 가져옵니다. LIMIT에 0, 1000을 쓰면 1000행만 샘플로 받아 볼 수도 있습니다. 첫 시도는 반드시 LIMIT를 걸어 둡니다.
3. 필드 조회(선택) — 테이블 옆의 아이콘으로 필드 목록을 열고, 복사하고 싶지 않은 컬럼(예: password_hash, national_id)의 체크박스를 해제하면 그 컬럼은 제외됩니다.
4. ⚡ hard_sync 실행 — 센터 툴바의 [hard_sync](번개 아이콘)를 누릅니다. "{count}개 테이블에 hard_sync를 실행하시겠습니까?" 확인 창이 뜨고, 예를 누르면 A쪽에서 해당 테이블을 DROP → CREATE → INSERT 순으로 다시 만듭니다. 진행률 바가 센터 상단에 나타나 현재 테이블 / 총 테이블 수, 그리고 행 단위 진행률까지 표시됩니다.
5. 완료되면 하단 로그에 "Success" 메시지가 찍히고, 왼쪽 Deck A의 테이블 목록이 새로고침되면서 새로 생긴 테이블들이 보입니다.

hard_sync 외의 선택지:

• 🔄 soft_sync — 기본키 기준으로 A쪽 행을 UPDATE·INSERT·DELETE만 해서 A에 이미 쌓여 있는 기록은 지우지 않습니다. 정기 동기화에 씁니다.
• ➕ append — A에 없는 id만 추가. 증분 수집에 유용합니다.
• 🔀 merge — A의 id와 겹치지 않는 행만 INSERT.

B에서 가져온 데이타가 A에 그대로 담겼지만, 대부분의 경우 그 상태로 C에 보내면 문제가 납니다. A에서 정리할 수 있는 방법은 두 가지입니다.

① 마이그레이션 모달의 치환 기능 — 센터 툴바 하단의 "치환 설정" 영역에서 문자열을 일괄 바꿉니다. 예를 들어 B의 이미지 URL이 https://cdn-old.acme.com/이고 C에서는 https://cdn.acme.com/로 바뀌어야 한다면:

1. [텍스트] / [정규식] 모드 중 [텍스트]를 선택
2. 왼쪽 입력란에 https://cdn-old.acme.com/
3. 오른쪽 입력란에 https://cdn.acme.com/
4. 다음 번에 hard_sync / soft_sync를 실행하면 옮기는 도중 자동으로 치환되어 A(또는 6단계에서 C)에 들어갑니다. 원본은 건드리지 않습니다.

② SQL 편집기에서 직접 처리 — 데이타셋 목록으로 돌아가 A 행의 편집기 아이콘을 눌러 SQL을 직접 실행합니다.

• ALTER TABLE orders DROP COLUMN password_hash; — 개인정보 컬럼 제거
• UPDATE orders SET created_kst = CONVERT_TZ(created_at, 'UTC', 'Asia/Seoul'); — 시간대 변환
• CREATE TABLE orders_summary AS SELECT product_id, COUNT(*) cnt, SUM(amount) total FROM orders GROUP BY product_id; — 집계 테이블 생성

변환이 끝나면 A의 상태로 미리보기를 하고 싶을 때가 있습니다. 편집기의 쿼리 창에 SELECT * FROM orders_summary LIMIT 20;을 쳐서 결과를 확인한 뒤 6단계로 넘어갑니다.

이제 A에서 정리된 데이타를 외부 타겟(C)으로 밀어 넣습니다. 다시 데이타셋 목록으로 돌아가 A 행의 을 누르고 마이그레이션 모달을 엽니다.

1. 방향 확인 — 센터 툴바의 방향 표시가 A → B인지 확인합니다. 이 경우 B 자리가 C가 되는 것이고, Deck A가 소스·Deck B가 타겟입니다. 만약 3단계 상태가 남아 있어 B → A로 보이면 [전환] 버튼으로 뒤집습니다.
2. Deck B(실제로는 C)에 타겟 접속 입력 — 호스트 warehouse.acme.com, DB 타입 POSTGRESQL, DB명 reporting, 계정은 INSERT/UPDATE 권한이 있는 쓰기 계정을 씁니다. [접속 테스트]로 성공 메시지를 받습니다.
3. Deck A에서 보낼 테이블 선택 — orders_summary · products · customers_clean 같은 A에서 이미 정리된 테이블들에 체크합니다.
4. 액션 선택 — 상황에 맞춰 고릅니다.
   • C 쪽이 처음 생성이라면 ⚡ hard_sync로 구조까지 복사. C에 해당 테이블이 없어도 자동 생성됩니다.
   • C에 이미 데이타가 쌓여 있고 주기적 동기화라면 🔄 soft_sync. A 기준으로 C의 행을 UPDATE/INSERT/DELETE.
   • C에는 쌓아만 두고 싶다면 ➕ append. A에서 새로 생긴 id만 C에 추가됩니다.
5. 실행 — 확인 후 버튼을 누르고 진행률 바로 지켜봅니다. 네트워크가 불안정한 경우 자동으로 행을 청크 단위로 나눠 보내므로 중간에 끊겨도 다시 실행하면 이어서 전송됩니다.

한 번 손으로 돌려 본 파이프라인은 매크로로 감싸면 주기 실행이 가능합니다. 서비스 → 매크로에서 새 매크로를 만들고 코드에서 마이그레이션 작업을 호출합니다.

• 매크로 안에서 fetch('/dataset/api/mig_run', { method: 'POST', body: JSON.stringify({ dataset_id: 123, action: 'soft_sync', deck_b: {host, db_name, user, password}, sel_tables: ['orders'] }) })처럼 마이그레이션 API를 호출하는 구조입니다. (정확한 파라미터는 네트워크 탭에서 한 번 손으로 실행해 본 요청을 복사해 쓰는 것이 가장 확실합니다.)
• 매크로의 스케줄 탭에서 cron 표현식으로 주기를 지정합니다. 예: 매일 새벽 3시 0 3 * * *.
• B → A와 A → C를 각각 독립된 매크로로 만들어 두면 한쪽이 실패해도 다른 쪽까지 멈추지 않습니다. B → A가 성공한 뒤 A → C를 트리거하는 순서 흐름은 매크로 결과의 success를 보고 다음 단계를 호출하는 방식으로 연결합니다.

검증 체크리스트:

1. C에서 SELECT COUNT(*) FROM orders를 돌려 A·B와 행 수가 맞는지 확인.
2. 임의의 최근 id 하나를 골라 B·A·C 세 곳에서 동일한 컬럼 값이 잡히는지 비교.
3. 일부러 B에 새 행을 하나 넣고 5~10분 뒤 A에, 그다음 C에 도달하는지 추적. 도달하지 않으면 매크로 실행 로그와 마이그레이션 결과 로그를 확인.

다음 같은 상황에서는 SQL을 손으로 쓰기보다 붙여넣기 한 번이 압도적으로 빠릅니다.

• 마케터가 엑셀에 정리한 쿠폰 코드 500개를 서비스 DB에 등록해야 할 때.
• 디자이너가 구글시트로 준 상품명·가격·카테고리 표를 한꺼번에 올려야 할 때.
• 외부 파트너가 CSV로 준 회원 리스트를 그대로 import 해야 할 때.
• AI에게 원하는 출력의 예시 100개를 한 테이블에 넣어 두고 싶을 때.

셀 편집기는 엑셀과 똑같이 행·열 그리드로 동작하며, 엑셀에서 Ctrl+C로 복사한 범위를 편집기의 셀에서 Ctrl+V만 누르면 탭 구분 / 콤마 구분을 자동 감지해 행으로 풀어 넣습니다. 필드 매핑 UI 없이 그냥 왼쪽 위 셀부터 차례로 채워집니다.

상단 내비에서 데이타 → 데이타베이스 메뉴로 이동합니다. 내 데이타셋 목록이 카드형 또는 리스트형으로 보입니다.

1. 데이타를 적재하려는 본인 소유 데이타셋(user_id가 본인)의 행을 찾습니다. 공개 데이타셋은 Read-Only라 편집이 막혀 있습니다.
2. 행 오른쪽 아이콘 묶음에서 셀 편집기(테이블 셀 아이콘)를 클릭합니다. 화면을 가득 채우는 큰 모달이 열립니다.
3. 왼쪽에 옵션 패널(테이블 선택 · 페이지 스텝 · 정렬 · 검색 · 대체), 가운데에 그리드 영역, 오른쪽에 툴바(저장 · 추가/삭제 · Undo/Redo · 복사 · CSV/SQL 내보내기 · ✨ AI 마법사)가 배치됩니다.
4. 왼쪽 테이블 선택 드롭다운에서 적재 대상 테이블을 고릅니다. 고르면 가운데 그리드에 기존 행이 불러와집니다. 빈 테이블이면 그리드도 비어 있습니다.

붙여넣기 전에 엑셀의 열 순서 = 테이블의 컬럼 순서가 맞는지 반드시 확인합니다. 순서가 맞지 않으면 전혀 엉뚱한 컬럼에 값이 들어갑니다.

• 컬럼 헤더 확인 — 그리드의 첫 줄(헤더 행)에 컬럼명과 타입이 표시됩니다. 엑셀 열 1번부터 차례로 이 순서에 맞춰 정리되어 있어야 합니다.
• 기본키(PK) 확인 — 헤더에 🔑 표시가 있는 컬럼이 PK입니다. 보통 id가 auto increment라 엑셀에서 복사할 때 id 컬럼은 비워 둡니다. 비어 있으면 INSERT 시 DB가 자동 할당합니다.
• NOT NULL 컬럼 확인 — 헤더에 붉은 표시가 있는 컬럼은 비면 안 됩니다. 엑셀에서 해당 열을 반드시 채워 두세요.
• 컬럼 부족/초과 — 엑셀 열이 테이블 컬럼보다 많으면 오른쪽 초과분은 무시되고, 부족하면 오른쪽 셀은 빈 값이 들어갑니다.

구조가 안 맞으면 편집기 왼쪽 옵션 패널의 그리드 생성(X × Y)로 그리드를 다시 그리거나, 엑셀 쪽에서 열 순서를 테이블에 맞춰 정리한 뒤 복사합니다.

이제 핵심 단계입니다. 엑셀/시트에서 id 컬럼을 제외한 필요한 범위를 드래그로 선택하고 Ctrl+C로 복사합니다. 그리고 셀 편집기로 돌아와 다음을 수행합니다.

1. 그리드에서 데이타가 들어갈 시작 셀을 한 번 클릭합니다. 보통 마지막 행 바로 아래의 첫 컬럼(왼쪽)을 고르면 기존 행을 건드리지 않고 아래에 추가됩니다.
2. Ctrl+V로 붙여넣습니다. 편집기가 탭 구분(엑셀 복사 기본) 또는 콤마 구분(CSV 원문 복사)을 자동으로 감지해 행과 열로 풀어 넣습니다.
3. 그리드가 자동으로 확장되며 새 행은 옅은 배경색으로 표시됩니다. 이것이 "아직 저장되지 않은 새 행"이라는 뜻입니다.
4. 같은 순서로 여러 범위를 이어서 붙여 넣어도 됩니다. 시작 셀을 다시 클릭하고 Ctrl+V를 반복하면 됩니다.

구분자 직접 지정이 필요할 때 — 왼쪽 옵션 패널의 구분자 드롭다운에서 탭 · 콤마 · 안전 콤마(따옴표 보호)를 선택할 수 있습니다. 본문에 콤마가 들어 있는 CSV를 붙여 넣을 때는 안전 콤마를 고르면 따옴표로 감싼 부분이 한 셀로 유지됩니다.

붙여넣기가 끝났으면 저장 전에 눈으로 한 번 훑어봅니다. 편집기는 세 가지 상태를 색으로 구분해서 보여 줍니다.

• 옅은 배경의 행 — 방금 붙인 "새 행". 저장 시 INSERT로 들어갑니다.
• 셀 모서리에 노란 점 — 기존 행에서 값이 바뀐 셀. 저장 시 UPDATE로 반영됩니다.
• 회색 처리된 행 — 삭제 예정 행. 하단 상태바에 "🗑 X건 저장 시 삭제됨"이 나오고 [복원] 버튼으로 되돌릴 수 있습니다.

자주 쓰는 편집 조작:

• 셀 더블클릭 — 해당 셀을 직접 타이핑해 수정.
• 오른쪽 툴바 / — 커서 위치에 빈 행 추가 / 현재 행 삭제.
• Ctrl+Z · Ctrl+Y — 되돌리기 / 다시 하기. 최근 50개 스냅샷까지 저장됩니다.
• 검색/바꾸기 — 왼쪽 옵션 패널에서 찾기 값 입력, 바꾸기 값 입력, 텍스트/정규식 모드 선택 후 실행. 그리드 전체 셀에서 일괄 치환.

하단 상태바에 ✏ X행, Y셀 수정됨 카운터가 뜹니다. 기대한 숫자와 다르면 아직 저장하지 말고 틀린 곳을 먼저 고칩니다.

검증이 끝나면 저장합니다. 방법은 두 가지입니다.

1. 오른쪽 툴바의 저장 버튼 클릭.
2. 키보드 Ctrl+S.

편집기가 다음을 자동으로 처리합니다.

• 새 행(옅은 배경) — INSERT INTO 테이블명 (컬럼1, 컬럼2, ...) VALUES (...)를 생성해 실행. PK가 auto increment면 DB가 id를 할당합니다.
• 수정 셀이 있는 기존 행 — UPDATE 테이블명 SET 컬럼=값 WHERE id=...를 실행. 바뀐 컬럼만 포함됩니다.
• 삭제 예정 행 — DELETE FROM 테이블명 WHERE id=...를 실행.

성공하면 화면 하단에 "X건 저장됨" 토스트가 뜨고, 방금 새로 들어간 행들의 배경색이 평범한 색으로 바뀌며, 비어 있던 id 셀에 DB가 할당한 번호가 채워집니다. 이제 기존 행과 구분되지 않는 정상 데이타입니다.

실패했다면 — 메모 패널에 에러 메시지가 뜹니다. 대개는 NOT NULL 컬럼을 비웠거나, 문자열 컬럼에 숫자 외 값이 들어갔거나, 중복된 unique 키가 있다는 내용입니다. 해당 행을 고친 뒤 다시 저장하면 됩니다.

as if to be는 "이미 완성된 결과(원하는 값)가 이런 모습이라면, 현재의 날것(현재 값)도 같은 논리로 이렇게 변환하라"는 패턴 학습형 지시 방식입니다. 프로그래머가 머릿속에서 변환 규칙을 말로 풀어 쓰는 대신, 규칙의 결과물 몇 개만 보여 주고 AI가 나머지를 같은 규칙으로 일반화하게 시킵니다.

셀 편집기에는 이 방식을 위해 두 개의 마커(색 1 · 색 2)가 준비되어 있습니다.

• 마커 1 (원하는 값 · 기본 청록색) — 결과가 이렇게 나와야 한다는 정답 예시 셀을 표시.
• 마커 2 (현재 값 · 기본 주황색) — 아직 날것 상태로 남아 있는, AI가 채워야 할 셀을 표시.

이 방식이 강력한 이유:

1. 자연어로 규칙을 설명할 필요가 없다. 예시만 있으면 AI가 규칙을 추정한다.
2. 규칙이 너무 섬세해서 말로 옮기기 어려운 작업(톤, 뉘앙스, 어조 유지)에도 그대로 적용된다.
3. 한 프롬프트로 수백 셀을 일괄 처리한다. 한 줄씩 AI에 복붙하던 노동이 사라진다.
4. 예시를 추가·수정하면 결과의 품질이 즉시 개선된다. "튜닝 루프"가 초 단위로 돈다.

작업 대상 데이타가 셀 편집기에 로드된 상태에서 다음 구조를 미리 만들어 둡니다.

1. 입력 컬럼 — AI가 읽을 원본 텍스트. 예: ko_text, product_desc, address_raw.
2. 출력 컬럼 — AI가 채워 넣을 빈 컬럼. 예: en_text, summary, city. 컬럼이 없으면 SQL 에디터에서 ALTER TABLE ... ADD COLUMN en_text TEXT;로 미리 추가합니다.
3. 예시 행 2~5개 — 출력 컬럼을 손으로 직접 채워 둡니다. 좋은 예시 3개 = 500행의 품질을 결정합니다.

좋은 예시를 고르는 요령:

• 다양성 — 짧은 케이스, 긴 케이스, 특수한 케이스를 섞습니다. 예시가 비슷비슷하면 AI가 외곽 케이스에서 헤맵니다.
• 난이도 분산 — 쉬운 것 1개, 중간 1개, 까다로운 것 1개.
• 원하는 결과 형식을 명확히 — 줄바꿈·대소문자·존댓말 여부 같은 스타일이 예시에 드러나야 AI가 따라 합니다.

오른쪽 패널의 마커 팔레트에서 첫 번째 색 스와치(청록 · 원하는 값)가 활성이 되도록 클릭합니다. 선택된 스와치는 테두리가 강조됩니다.

1. 2단계에서 손으로 채워 둔 출력 컬럼의 예시 셀(예: 3개)을 그리드에서 한 번씩 클릭하면 해당 셀이 청록 배경으로 바뀝니다. 마커가 걸렸다는 뜻.
2. 마커는 토글식이라 같은 셀을 다시 클릭하면 해제됩니다. 잘못 찍었을 때 유용.
3. 여러 셀을 드래그로 한꺼번에 선택한 뒤 스와치를 눌러 일괄 마킹하는 것도 가능.

라벨을 작업 이름으로 바꾸기 — 스와치 옆에 붙은 라벨("원하는 값" 기본값)의 연필 아이콘을 눌러 라벨을 바꿀 수 있습니다. 번역 작업이면 "영어 번역", 요약 작업이면 "한 줄 요약", 분류 작업이면 "카테고리"로 바꿔 두면 5단계의 프롬프트에 그 라벨이 그대로 들어가 AI가 작업 성격을 더 정확히 이해합니다.

이번에는 마커 팔레트에서 두 번째 색 스와치(주황 · 현재 값)를 클릭해 활성화합니다.

1. 아직 비어 있거나, 날것 상태로 남아 있는 출력 컬럼 셀들을 그리드에서 드래그로 범위 선택합니다. 예를 들어 en_text 컬럼의 4행부터 마지막 행까지.
2. 주황 스와치를 한 번 클릭하면 선택된 셀들이 전부 주황 배경으로 바뀝니다. AI가 처리해야 할 셀이라는 표시.
3. 입력 컬럼(ko_text)은 마킹할 필요가 없습니다. AI는 같은 행의 입력 컬럼을 자동으로 참조합니다.
4. 이 마커에도 라벨을 바꿀 수 있습니다. 예: "영어로"·"짧게"·"카테고리 지정" 등 AI에게 주고 싶은 지시를 한 단어로 적어 두세요.

잘 되었다면 그리드에 청록 셀(정답 예시) + 주황 셀(빈 셀)이 같이 보이는 상태가 됩니다. 이것이 "as if to be" 패턴의 완성 모양입니다.

오른쪽 툴바의 ✨ AI 마법사 버튼을 누릅니다. 편집기가 마커 정보를 읽어 구조화된 프롬프트를 만들고 자동으로 클립보드에 복사합니다. 화면 하단에 "AI 프롬프트가 복사되었습니다" 토스트가 뜹니다.

복사된 프롬프트의 구조는 대략 다음과 같습니다(실제 내용은 라벨·예시에 따라 달라짐).

1. 시스템 메시지 — "You are a data transformation assistant"
2. 작업 설명 — 라벨 기반. 예: "Transform each 'Current Value' cell according to the pattern shown in 'Desired Value' examples."
3. 예시 셀 목록 — 청록 마커가 걸린 셀의 (행, 컬럼, 값). AI가 여기서 패턴을 학습.
4. 변환 대상 셀 목록 — 주황 마커가 걸린 셀의 (행, 컬럼, 원본 입력 값).
5. 출력 포맷 규정 — JSON 배열로 [{"pos":"행,열","return_txt":"변환된 값"}, ...] 형식만 반환하라고 명시.

중단 조건 — 청록 마커도, 주황 마커도 하나도 없으면 "마커가 없습니다" 경고와 함께 멈춥니다. 이때는 3·4단계로 돌아가 마킹부터 다시 합니다.

복사된 프롬프트를 Claude · ChatGPT · Gemini 같은 AI 대화창에 Ctrl+V로 붙여넣고 전송합니다. AI가 프롬프트를 해석해 JSON 배열 하나만 응답으로 돌려줍니다.

1. AI 응답에서 JSON 부분만 드래그로 선택해 Ctrl+C로 복사합니다. 앞뒤에 설명문이 섞여 있어도 JSON 배열만 떼서 복사하면 됩니다.
2. 셀 편집기로 돌아와 오른쪽 패널 하단의 Memo 텍스트 영역에 Ctrl+V로 붙여넣습니다. Memo는 AI 결과 전용 입력 창이라고 봐도 됩니다.
3. 붙여진 텍스트가 올바른 JSON 형태인지 육안으로 한 번 더 확인합니다. 형식은 [{"pos":"3,5","return_txt":"Translated sentence"},{"pos":"4,5","return_txt":"Another"}, ...].

AI가 불필요한 설명을 덧붙이는 경우 — "Here is the JSON you asked for:" 같은 문구가 앞에 붙는 일이 흔합니다. JSON 배열([로 시작해서 ]로 끝나는)만 떼 내어 복사하세요. 7단계의 적용 버튼은 JSON만 파싱합니다.

Memo에 JSON을 붙여 넣었다면 오른쪽 툴바의 📥 결과 적용 버튼을 누릅니다. 편집기가 JSON을 파싱해 각 항목의 pos(행,열)에 해당하는 셀에 return_txt를 써넣습니다. 성공하면 "X개 셀이 적용되었습니다" 토스트가 뜹니다.

• 적용된 셀은 수정 표시(노란 점)가 붙어 있습니다. 아직 DB에는 반영되지 않은 상태.
• 결과가 마음에 들지 않는 셀이 있으면 Ctrl+Z로 바로 되돌릴 수 있습니다. 단, 되돌리면 AI 결과 전체가 취소될 수도 있으니 문제 있는 셀만 수동으로 덮어쓰는 편이 보통 더 빠릅니다.
• 만족스러우면 Ctrl+S로 저장. Section 1의 6단계와 같은 UPDATE 쿼리가 실행됩니다.

반복 & 배치 전략:

1. 첫 배치 결과를 전부 적용하지 말고 샘플 10개만 보고 품질을 확인합니다. 어색하면 3·4단계의 예시·라벨을 고치고 마법사를 다시 돌립니다.
2. 품질이 좋으면 페이지를 넘겨 다음 배치를 마킹하고 5·6·7단계 반복.
3. 전체가 끝나면 번역 로그·분류 로그 같은 메타 컬럼을 따로 두어 어느 배치에서 어떤 예시가 쓰였는지 기록해 두면, 나중에 스타일이 바뀐 섹션을 재실행하기 쉽습니다.

가상의 시나리오로 따라가 보면 이해가 빠릅니다. 카페 "소담"의 사장님은 매장 입구에 태블릿으로 띄울 전자 메뉴판이 필요합니다. 처음부터 만들기보다 솔루션 마켓의 menupan(전자 메뉴판) 솔루션을 가져다가 자기 가게에 맞게 바꾸는 편이 압도적으로 빠릅니다.

오늘 30~45분 안에 끝낼 작업:

• 로고 — 기본 menupan 로고를 우리 카페 "소담" 로고로 교체
• 메뉴 항목 — 데모용 메뉴(아메리카노 4500원 등)를 실제 가게 메뉴로 교체
• 색상·폰트 — 기본 톤(파랑)을 카페 브랜드 톤(따뜻한 베이지+짙은 갈색)으로 변경, 본문 폰트를 가독성 좋은 한글 폰트로 변경
• 도메인 공개 — menu.sodam.kr 같은 우리 도메인에 공개

왜 포크인가?

1. 레이아웃·DB 스키마·관리자 화면이 이미 완성되어 있어 0에서 만드는 시간을 90% 절약.
2. 포크된 사본은 내 계정·내 도메인·내 DB에서 따로 동작 — 원본 솔루션은 그대로 남고 내 것만 자유롭게 수정.
3. 나중에 menupan 본가에 업데이트가 와도 그것은 별개고, 내 포크는 영향받지 않음.

상단 내비에서 커뮤니티 → 솔루션 마켓(또는 /solution) 메뉴로 이동합니다. 카드 형식의 솔루션 갤러리가 보입니다.

1. 상단 필터에서 전체 / Project / Macro / Community / Direct 중 Project를 누르거나, 검색창에 menupan 또는 전자 메뉴판이라고 입력해 카드를 찾습니다.
2. 카드를 클릭하면 상세 페이지가 열리고 화면 일부에 미리보기·기능 설명·필요한 자원(도메인/DB)이 표시됩니다.
3. 상세 페이지의 새 프로젝트로 포크하기 버튼을 클릭. 포크 모달이 열립니다.
4. 모달에서 입력:
   • 도메인 선택 — 내 활성 도메인 목록에서 사용할 도메인 선택. 예: menu.sodam.kr. 도메인이 없으면 먼저 설정 → 도메인에서 추가하고 옵니다.
   • 데이타셋 선택 — 메뉴 데이타가 저장될 DB. 새로 만들거나 기존 본인 소유 데이타셋 중 하나를 고릅니다.
   • 프로젝트 이름·설명 — 예: 이름 sodam_menu, 설명 "카페 소담 매장 전자 메뉴판".
   • "자동 배포" 토글 — 켜 두면 포크가 끝나는 즉시 자동으로 첫 배포까지 실행됩니다. 처음에는 켜 두는 것을 권장.
5. [포크 실행] 클릭. 진행률 표시가 뜨고 30초~2분쯤 후 완료 토스트가 나옵니다. 사이드바의 내 프로젝트 섹션 맨 위에 새 프로젝트 행이 나타나고 자동으로 그 프로젝트의 워크스페이스가 열립니다.

로고 교체는 두 가지 작업의 조합입니다. (a) 원격 관리로 새 로고 파일을 서버에 올리고, (b) 프로그램 에디터에서 기존 로고 URL을 새 URL로 바꾸기.

(a) 원격 관리에 새 로고 업로드

1. 상단 내비 서비스 → 원격 관리로 이동. 왼쪽 서버 목록에서 방금 포크한 프로젝트의 도메인(menu.sodam.kr)을 클릭합니다. 초록 점이 켜져 있어야 정상.
2. 가운데 영역에서 경로를 /public/assets로 이동(경로 입력란에 직접 타이핑하고 Enter가 가장 빠름).
3. 하단 액션 바의 [파일 올리기]로 우리 카페 로고 파일(sodam_logo.png)을 업로드합니다. 압축이 아닌 단일 파일이라면 압축 올리기 대신 파일 올리기를 씁니다.
4. 업로드가 끝나면 브라우저에서 https://menu.sodam.kr/assets/sodam_logo.png로 직접 열어 확인. 200 OK로 이미지가 떠야 다음 단계로.

(b) 프로그램 에디터에서 로고 URL 교체

1. 워크스페이스로 돌아가 프로젝트의 프로그램 버튼을 누릅니다. 메뉴판을 구성하는 프로그램 목록이 나옵니다(보통 main·menu_list 같은 이름).
2. 로고가 뜨는 프로그램(보통 main)을 더블클릭해 에디터를 엽니다.
3. 에디터 오른쪽 위 찾기/바꾸기(Ctrl+H)로 기존 로고 URL을 검색합니다. 보통 /assets/menupan_logo.png 또는 비슷한 경로.
4. 찾기란에 menupan_logo.png, 바꾸기란에 sodam_logo.png를 넣고 전체 바꾸기. HTML과 CSS 양쪽에서 일괄 치환됩니다.
5. 에디터 저장(Ctrl+S) 후 오른쪽 패널의 미리보기에서 우리 로고가 떠 있는지 확인.

menupan은 매장 직원이 직접 메뉴를 추가·수정·삭제할 수 있도록 관리자 페이지를 함께 제공합니다. 두 가지 방법이 있고 관리자 페이지를 쓰는 쪽을 강력히 권장합니다.

(추천) 관리자 페이지 사용

1. 배포된 도메인의 https://menu.sodam.kr/admin(또는 menupan이 정해 둔 관리자 경로)에 접속해 로그인. 포크 직후 기본 관리자 계정 정보가 솔루션 상세 페이지의 README에 적혀 있습니다.
2. 왼쪽 메뉴에서 메뉴 관리를 클릭. 카테고리(커피·디저트·논커피)·항목(아메리카노·라떼·...) 목록이 표/카드 형태로 나옵니다.
3. 샘플 항목을 전부 삭제한 뒤 우리 가게 실제 메뉴를 한 줄씩 추가:
   • 이름(아메리카노) · 가격(4500) · 설명(...) · 카테고리(커피) · 사진(원격 관리에 올린 메뉴 사진 URL)
4. 수정·정렬·노출/숨김 토글 같은 일상적인 운영 작업은 모두 이 화면에서 끝납니다. 매장 직원도 쓸 수 있는 화면이 바로 이쪽이에요.

(대안) 데이타베이스에서 직접 수정

• 관리자 화면이 미처 못 다루는 정밀 조정(예: 한 번에 100개 메뉴 일괄 가격 인상)이라면 데이타 → 데이타베이스 → 포크 시 만든 데이타셋 → 셀 편집기를 엽니다.
• menu_item 테이블을 선택하면 행이 그리드로 보입니다. 직접 수정하거나 SQL 에디터에서 UPDATE menu_item SET price = price + 500 WHERE category='커피';를 실행. (셀 편집기 사용법은 실전 연습 → 셀 편집기로 붙여넣기 DB 적재 참고)
• 주의: 관리자 화면이 모르는 컬럼을 손대거나 PK·외래키를 깨면 관리자 화면이 더 이상 동작하지 않을 수 있습니다. 그래서 일상 편집은 관리자 페이지를 권장하는 것입니다.

코드를 고치기 전에 먼저 브라우저에서 직접 값을 바꿔 보면서 마음에 드는 색을 찾는 단계입니다. 변경은 일시적이고 새로고침하면 사라지므로 안심하고 실험할 수 있습니다.

1. 배포된 메뉴판(https://menu.sodam.kr)을 Chrome에서 열고 F12로 개발자 도구를 엽니다. 또는 화면을 우클릭 → 검사(Inspect).
2. 개발자 도구 왼쪽 위의 화살표+사각형 아이콘(요소 선택)을 누르고, 화면에서 색을 바꾸고 싶은 영역(예: 상단 헤더, 메뉴 카드 배경)을 클릭. 오른쪽 Styles 패널에 그 요소에 적용된 CSS 규칙이 줄줄이 뜹니다.
3. 색상값(background-color: #2563eb; 등) 위에 마우스를 올리면 작은 색상 박스가 보입니다. 그 박스를 클릭하면 색상 팔레트가 열려서 마우스로 끌거나 hex 값을 직접 타이핑해 색을 바꿀 수 있습니다.
4. 폰트도 같은 방식으로 font-family: ...; 값을 클릭해 다른 폰트명('Pretendard', 'Noto Sans KR', sans-serif)으로 바꾸어 봅니다.
5. 마음에 드는 조합이 나오면 그 시점의 hex 코드와 폰트명을 메모해 두세요. 다음 단계에서 AI에 보여 주거나, 7단계에서 코드에 반영할 때 씁니다.

유용한 팁:

• 여러 요소를 동시 비교 — 헤더 색만 바꿨더니 본문이 안 어울릴 때, F12에서 헤더와 본문의 두 색을 같이 보면서 둘이 잘 어울리는 조합을 찾습니다.
• Computed 탭 — 실제 적용된 최종 값(상속 포함)을 보여 줍니다. 이상한 값이 들어왔을 때 어디서 왔는지 추적할 때 유용.
• :hover 강제 토글 — Styles 패널 위쪽의 :hov 버튼으로 :hover·:focus 상태를 강제로 켤 수 있어 마우스를 올린 상태의 색까지 미리 검토 가능.

5단계에서 손으로 잡은 색이 마음에 안 들거나, "이 카페 분위기에 더 맞는 톤은 뭐가 있을까?" 싶을 때 AI에게 톤 추천을 받으면 후보가 즉시 5~10개 나옵니다. Claude·ChatGPT 같은 AI 대화창에 다음 비슷한 프롬프트를 보냅니다.

저는 카페 "소담"의 매장용 전자 메뉴판을 만들고 있습니다.
컨셉은 "따뜻하고 차분한 한국식 카페"이고
공간은 우드 톤 인테리어에 노란 조명입니다.

지금 색상은:
- 헤더 배경: #2563eb (파랑)
- 본문 배경: #ffffff
- 텍스트: #1f2937
- 강조: #2563eb

이 컨셉에 더 어울리는 색상 5세트를 추천해 주세요.
각 세트는 헤더, 본문 배경, 본문 텍스트, 강조 4가지 색을
hex 코드로 주시고 짧은 한 줄 설명도 같이.

폰트도 한국어 가독성이 좋으면서 이 분위기에 맞는
Google Fonts 또는 무료 한글 폰트 3개를 추천해 주세요.

AI는 보통 이런 식으로 응답합니다.

• 세트 1 (따뜻한 베이지·짙은 갈색) — 헤더 #6b4423, 본문 배경 #f5ecd9, 텍스트 #3c2415, 강조 #c97a4a · 우드톤·황색조명에 자연스럽게 녹아드는 톤
• 세트 2 (모던 미니멀) — ...
• ...

받은 후보 검증 순서:

1. 5단계 F12 인스펙트로 돌아가 받은 hex 값을 하나씩 직접 입혀 보고 가장 마음에 드는 세트를 고릅니다.
2. 여러 세트를 비교하다 보면 "헤더는 세트 1, 강조는 세트 3" 같은 혼합 조합이 나오기도 합니다. 그것도 메모.
3. 폰트는 https://fonts.google.com에서 추천받은 폰트를 검색해 실제 글자 모양이 우리 메뉴에 맞는지 한 번 봅니다.

F12와 AI로 잡은 색·폰트를 이제 실제 코드에 적습니다. 이 작업이 끝나면 새로고침해도 변경이 살아남고, 다른 사람이 접속해도 같은 모양이 보입니다.

1. 워크스페이스의 프로젝트 → 프로그램에서 디자인 관련 프로그램(보통 main 또는 theme)을 더블클릭해 코드 에디터를 엽니다.
2. 오른쪽 위의 SCSS(또는 CSS) 탭으로 이동. 컬러 변수가 정의된 부분이 보통 파일 맨 위에 모여 있습니다($primary-color·$bg-color 등).
3. F12에서 잡아 둔 hex 값을 그 변수에 대입:
   $header-bg: #6b4423;
$body-bg: #f5ecd9;
$text-main: #3c2415;
$accent: #c97a4a;
4. 한글 폰트는 SCSS 맨 위에 @import url('https://fonts.googleapis.com/css2?family=Pretendard&display=swap'); 한 줄을 추가하고, body 셀렉터의 font-family를 'Pretendard', sans-serif로.
5. Ctrl+S로 저장. 화면 하단의 미리보기에 즉시 반영되는지 확인.

퍼블리싱 방법 두 가지

• 방법 A — 수동 배포 (기본): 워크스페이스 상단의 🚀 배포(Deploy) 버튼 클릭. 1~2분간 빌드·전송이 진행되고 완료되면 menu.sodam.kr에 새 디자인이 반영됩니다. 처음에는 이 방법이 안전합니다.
• 방법 B — 저장시 자동 배포 (추천: 빠른 반복): 워크스페이스 상단의 "저장시 자동배포" 토글을 켜 두면 Ctrl+S로 저장할 때마다 자동으로 배포까지 실행됩니다. 색·폰트·메뉴를 빠르게 바꿔 보면서 라이브에서 즉시 확인하는 단계에서 매우 유용. 단, 매장 영업 중에는 잠시 꺼 두세요(영업 중 깜빡임 방지).

배포가 끝나면 모바일·태블릿에서 https://menu.sodam.kr을 열어 최종 확인. 매장 입구의 태블릿에 띄우면 그게 곧 손님이 보는 메뉴판이 됩니다.

처음부터 코드로 fetch()를 짜고 v-for를 그리는 대신, 이미 만들어진 디자인 부품(블록)을 프레임의 슬롯에 끼우고, 데이타셋만 살짝 연결하면 페이지가 완성되는 패턴이 있습니다. 이번 가이드는 그 패턴 한 바퀴를 처음부터 끝까지 돌려 보는 것이 목표입니다.

비유로 한 번 더: 빈 액자(프레임)에 미리 디자인된 사진(블록)을 끼우고, 사진 위에 글자를 인쇄해 줄 앨범(데이타셋)을 연결합니다. 마지막에 액자를 벽에 거는 행위가 배포입니다.

오늘 만들 화면 — "우리 가게 상품 리스트". 윗부분 헤더, 가운데 상품 카드 10개(데이타셋의 실제 행), 아랫부분 푸터로 구성된 평범한 한 화면.

• 한 단계 더 가면: 시세·뉴스·랭킹처럼 8~10개의 데이타셋 테이블을 list / list3 ... list10처럼 여러 변수에 동시에 바인딩해 한 페이지 전체를 JSON 구조로 그려내는 큰 사례도 있습니다. 우리 가이드는 그 첫 단추인 변수 하나(list) + 데이타셋 하나(products)로 범위를 좁혔습니다.
• 왜 이 방식이 좋은가 — 디자이너는 블록 빌더에서 외관만, 데이타 담당은 데이타셋만, 페이지 담당은 프로그램 빌더에서 슬롯 매칭만 보면 됩니다. 역할이 깨끗하게 나뉘고, 데이타가 바뀌어도 디자인은 그대로, 디자인이 바뀌어도 데이타는 그대로 작동.

먼저 슬롯에 흘려보낼 실제 데이타를 데이타셋에 만들어 둡니다. 화면을 만들고 나서 데이타가 비어 있으면 "도대체 잘 작동하는지" 확인할 수가 없으므로 데이타 먼저, 화면 나중이 정석.

1. 상단 내비 데이타 → 데이타베이스에서 본인 소유 데이타셋이 없으면 [+ 새 데이타셋]으로 하나 만듭니다. 예: 이름 shop, MySQL/PostgreSQL.
2. 그 데이타셋의 SQL 편집기로 products 테이블 생성:
   CREATE TABLE products (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100), price INT, image_url TEXT);
3. 같은 데이타셋의 셀 편집기로 products를 열고 5~10행을 입력. 엑셀에서 미리 정리해 둔 표를 Ctrl+V로 붙이면 단숨에 입력됩니다(자세한 방법은 실전 → 셀 편집기로 붙여넣기 DB 적재).
4. 끝나면 SQL로 한 줄 확인: SELECT * FROM products LIMIT 3;. 5단계에서 이 데이타셋을 list 변수에 연결합니다.

꼭 채워 둘 컬럼 — 우리 블록 디자인에서 쓸 컬럼만 있으면 됩니다. name · price · image_url 정도면 충분. 컬럼이 더 많아도 무해하지만, 처음에는 단순한 편이 디버깅이 빨라요.

이제 슬롯에 끼워 넣을 블록을 디자인합니다. 상단 내비 디자인 → 블록(또는 /layout/block)으로 이동하면 블록 라이브러리가 보입니다. 오른쪽 위 [+ 새 블록]을 누릅니다.

1. 이름 — product_card_list 같이 알아볼 수 있는 이름.
2. HTML 영역에 카드 리스트 마크업 입력. 핵심은 변수명을 list로 두는 것:
   <div class="card-grid">
  <div class="card" v-for="item in list" :key="item.id">
    <img :src="item.image_url">
    <div class="name">@{{ item.name }}</div>
    <div class="price">@{{ item.price }}원</div>
  </div>
</div>
3. CSS/SCSS 영역에 카드 그리드 스타일 작성:
   .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { padding:14px; border:1px solid #eee; border-radius:8px; }
4. sample_data(샘플 데이타) — 블록 미리보기용 더미 데이타를 JSON으로 넣습니다. 변수명은 list로:
   { "list": [
  {"id":1,"name":"샘플 상품 A","price":1000,"image_url":"/assets/sample.jpg"},
  {"id":2,"name":"샘플 상품 B","price":2000,"image_url":"/assets/sample.jpg"}
] }
5. 저장. 블록 빌더 미리보기 패널에 sample_data가 자동으로 흐르며 카드 2개가 그려집니다. 이 미리보기가 잘 뜨는지가 핵심 검증이에요. 안 뜨면 HTML의 list 변수명과 sample_data의 list 키가 일치하는지부터 확인.

이제 우리 페이지(프로그램)를 만들 차례. 서비스 → 프로젝트 → [내 프로젝트] → + 새 프로그램 또는 기존 프로그램의 프로그램 빌더(코더 빌더) 화면을 엽니다. 프로그램 빌더는 같은 화면을 두 이름으로 부를 뿐 동일한 도구이고, 8개의 단계 탭으로 구성됩니다.

1. 8단계 탭 — db · list · detail · search · hook · style · code · menu. 우리는 두 번째 list(리스트) 탭으로 이동합니다.
2. 레이아웃 모드 전환 — list 탭의 상단에 "필드 / 슬롯" 두 모드 선택이 있습니다. 기본은 "필드"(table-like). 우리는 디자인된 블록을 끼울 거라 "슬롯"으로 바꿉니다. 화면이 슬롯 구성용 3단계 UI로 바뀝니다.
   • 1) 프레임 선택 — 슬롯이 몇 개, 어떻게 배치된 액자(프레임)를 쓸지.
   • 2) 슬롯 구성 — 각 슬롯에 어떤 블록을 끼울지, 데이타 변수를 어떻게 매핑할지.
   • 3) 코드 미리보기 — 시스템이 합성한 결과 코드 확인.
3. 프레임 / 슬롯이라는 단어가 어색하면 "3단 액자에 사진 3장을 끼우러 왔다"를 떠올리세요. 다음 5단계에서 액자(프레임)를 고릅니다.

슬롯 모드 화면의 1) 프레임 선택에서 드롭다운을 열어 적당한 프레임을 고릅니다. 보통 "3-row(상단/중앙/하단)" 같은 단순한 것을 권장. 프레임을 고르고 [적용]을 누르면 2) 슬롯 구성에 자동으로 슬롯 행이 만들어집니다(슬롯 1, 슬롯 2, 슬롯 3 …).

1. 슬롯 2(중앙)의 블록 선택 드롭다운을 열고, 3단계에서 만든 product_card_list를 선택합니다. 옵션 텍스트는 보통 id - 이름 - 작성자 식으로 표시됩니다.
2. 선택하는 즉시 그 슬롯 영역에 블록의 sample_data 미리보기가 들어옵니다. 카드 2개(샘플 데이타)가 슬롯 안에 보이면 슬롯에 잘 끼운 것.
3. 슬롯 1(상단)·슬롯 3(하단)에는 미리 만들어 둔 헤더/푸터 블록을 비슷한 방식으로 끼우거나, 비워 두어도 됩니다. 처음에는 슬롯 2만 채워도 충분.
4. 각 슬롯 행 옆에 data_placer (소스 선택자)와 data_selector (타겟 선택자) 입력란이 있는데, 지금은 둘 다 일단 list로 둡니다. 다음 6단계에서 이 두 값의 의미를 자세히 다룹니다.
5. 여기까지 하면 슬롯에 블록이 들어가긴 했지만 아직 샘플 데이타로만 작동합니다. 데이타셋과 연결하려면 다음 단계로.

이번이 가장 중요한 단계입니다. 블록 안의 list라는 변수가 실제 products 테이블의 데이타로 채워지도록 연결합니다.

두 변수의 정체:

• data_placer (소스 선택자) — 블록 안에서 쓰인 변수명 그대로. 우리 블록은 v-for="item in list"이므로 list.
• data_selector (타겟 선택자) — 페이지 전체에서 그 데이타를 부를 이름. 한 페이지에 카드 리스트가 두 개라면 list는 충돌하므로 product_list·review_list처럼 다른 이름으로 매핑. 카드 리스트가 하나뿐이면 그냥 list로 둬도 됩니다.

이번에는 단순화를 위해 둘 다 list로 두고 진행합니다.

실제 데이타 연결 — 프로그램 빌더 상단(또는 별도 패널)의 "데이타 변수 / data_vars" 섹션을 엽니다. 비어 있다면 + 추가를 눌러 한 줄 만듭니다.

1. 변수명: list (5단계의 data_selector와 같아야 함).
2. 데이타셋: 드롭다운에서 2단계에 만든 shop 데이타셋 선택.
3. 테이블: products.
4. WHERE(선택): 비워 두면 전체. 예: price > 0.
5. LIMIT(선택): 0, 20처럼 처음 20행만 가져올 수 있음.
6. ORDER BY(선택): id desc처럼 최신순 등.
7. 저장.

이게 끝나면 시스템 내부에서는 JSON 구조 한 장이 만들어집니다(보이지 않지만 개념상):

{"var_name":"list","dataset":{"id":42,"table_name":"products","str_limit":"0, 20","str_order":"id desc"}}

이 JSON이 곧 페이지 백엔드 렌더러가 데이타를 가져올 명세가 되고, 실행 시 SELECT * FROM products ORDER BY id desc LIMIT 20 결과를 list 변수에 넣어 블록의 v-for가 흘러갑니다.

모든 설정이 끝났으면 프로그램 빌더의 3) 코드 미리보기(또는 code 단계 탭)으로 이동해 시스템이 합성한 결과 코드를 확인합니다.

1. 코드 생성(동기화) 버튼을 누르면 시스템이 다음을 자동으로 합칩니다:
   • 프레임의 HTML 골격 + <[slot-1]>·<[slot-2]>·… 위치에 각 슬롯 블록의 HTML이 끼워짐.
   • 블록 안의 list → 5단계에서 잡은 data_selector로 자동 치환(이번엔 그대로 list).
   • data_vars의 변수 정의가 페이지 초기화 코드에 추가됨.
2. 생성된 코드를 검토합니다. v-for="item in list"가 그대로 살아 있고, 페이지 상단에 list = await fetch('/api/...') 또는 서버 사이드로 주입되는 코드가 보이면 정상.
3. Ctrl+S 또는 저장. 미리보기 패널에 실제 products 테이블의 데이타가 카드로 흘러나오는지 확인. 카드가 sample_data 2개가 아니라 데이타셋의 5~10개 행이 떠야 정상.
4. 마지막으로 워크스페이스의 🚀 배포(또는 "저장시 자동배포" 토글로 자동) 후 도메인에서 최종 확인.

JSON 구조가 곧 프론트인 이유 — 이 시점에서 페이지의 모든 동작은 다음 세 가지 JSON으로 환원됩니다.

• slot_info — 어느 프레임 + 어느 슬롯에 어느 블록이 들어가는가.
• data_vars — 각 변수가 어느 데이타셋·테이블·조건에 연결되는가.
• ui_info — 추가 UI 옵션(이번에는 거의 비어 있음).

코드를 손으로 쓰지 않아도 이 세 JSON만 다듬으면 페이지가 다시 그려지므로, 이후에는 데이타셋만 갈아 끼우거나 블록만 바꿔서 같은 페이지를 빠르게 변형할 수 있게 됩니다. 처음에는 한 화면이지만, 이 패턴이 손에 익으면 10개 화면을 만드는 시간이 한 화면에 가까워지는 마법이 일어납니다.

단순한 사이트라면 https://site.com/search?q=hello 같은 GET URL 한 줄이면 끝입니다. 그러나 실무에서 만나는 사이트의 절반 이상은 그렇게 단순하지 않습니다.

• 로그인 후에만 보이는 검색 결과 — 세션 쿠키가 없으면 빈 페이지나 로그인 화면이 돌아옵니다.
• POST + JSON 바디 — 검색어가 URL에 안 보이고 요청 바디 안에 들어 있습니다. {"q":"hello","page":1,"size":20}처럼.
• CSRF 토큰 / Bearer 토큰 — 매 요청마다 별도 헤더로 함께 보내야 응답이 옵니다.
• X-Requested-With · Referer · User-Agent — AJAX 식별 헤더가 빠지면 서버가 의도적으로 빈 응답을 줍니다.

이때 헤더 하나하나를 손으로 옮겨 적기는 비현실적입니다. 가장 빠른 길은 브라우저가 실제로 보낸 요청을 한 줄짜리 cURL 명령으로 통째로 복사해 와서, 행마다 바뀌는 부분만 변수로 빼고 나머지는 그대로 두는 것입니다.

오늘 만들 결과물 — 키워드가 N개 들어 있는 데이타셋(예: keyword_list)을 준비해서, 사이트의 검색 API를 N번 호출해 응답을 다른 데이타셋(예: search_results)에 차곡차곡 쌓는 것까지가 목표입니다.

크롬(또는 엣지)에서 대상 사이트에 접속하고, 평소처럼 한 번 검색합니다.

1. F12로 개발자도구를 열고 상단의 Network 탭으로 이동합니다.
2. 검색을 한 번 실행하면 네트워크 목록에 요청들이 우르르 나타납니다. 우리가 원하는 것은 보통 이름에 search, list, query, api 같은 단어가 들어가 있고 응답이 JSON인 항목입니다.
3. 해당 요청을 클릭해 오른쪽 패널에서 Response 탭으로 결과 본문이 우리가 원하는 데이터인지 한 번 확인합니다.
4. 맞다면 그 요청 줄에서 우클릭 → Copy → Copy as cURL (bash)를 선택합니다. 윈도우에서도 bash 형식을 권장합니다 — 따옴표 처리가 가장 호환성이 좋습니다.

클립보드에는 이제 curl 'https://...' -H 'Cookie: ...' -H 'Authorization: ...' --data-raw '{...}' 같은 한 줄짜리 명령이 들어와 있습니다. 줄이 길어 보이지만 그 안에 URL · 쿠키 · 모든 헤더 · 바디가 다 들어 있습니다.

cURL을 바로 파셔에 붙여 넣지 마세요. 먼저 Postman(또는 Insomnia, Bruno 등)에서 똑같이 1회 보내는 데 성공하는지를 반드시 확인해야 합니다. 이 단계에서 막힌다면 파셔 규칙도 막힙니다.

1. Postman 실행 → 좌측 상단 Import 클릭 → Raw text 탭 선택.
2. 클립보드에 있는 cURL 한 줄을 그대로 Ctrl+V로 붙여 넣고 Continue → Import.
3. 모든 헤더·바디가 자동으로 채워진 새 요청 탭이 열립니다. 우측 상단 Send를 누릅니다.
4. 응답이 200이고, 본문이 브라우저에서 본 검색 결과와 동일하면 성공. 401/403/302가 나오거나 빈 본문이면 다음 항목을 점검합니다.

• 쿠키 만료 — 가장 흔한 원인. 브라우저로 돌아가 다시 로그인 상태를 확인하고, F12에서 다시 Copy as cURL.
• 헤더 누락 — Postman 자동 변환이 1~2개 헤더를 빠뜨릴 수 있습니다. 브라우저 Network 탭의 Headers 항목과 Postman의 Headers 탭을 옆에 놓고 한 줄씩 비교.
• Referer / Origin — 일부 사이트는 이 두 헤더가 없으면 빈 결과를 줍니다. 브라우저에서 보내고 있다면 동일하게 추가.

Postman 요청을 보면서, 다음 호출에서 바뀔 부분이 어디인지 표시합니다. 보통 다음 위치들이 후보입니다.

• POST 바디 안의 검색어 — "q":"hello" → "q":"${query}"
• 페이지 번호 / 오프셋 — "page":1 → "page":${page} (숫자형은 따옴표 없이)
• 카테고리 / 필터 — "cat":"food" → "cat":"${category}"
• 날짜 범위 — "from":"2026-04-01" → "from":"${date_from}"
• URL 경로 변수 — /api/user/12345 → /api/user/${user_id}

변수명은 나중에 만들 데이타셋의 컬럼명과 똑같이 짓는 것이 핵심입니다. 데이타셋 컬럼명을 query · page · category로 만들 거라면 cURL 안에서도 ${query} · ${page} · ${category}로 일치시킵니다. 그래야 다음 단계에서 매핑 작업 없이 자동 연결됩니다.

표시 형식 — 파셔는 ${이름} 패턴을 인식합니다. 띄어쓰기, 한글, 특수문자 없이 영문/숫자/언더스코어만 사용하세요.

파셔는 데이타셋의 행을 한 줄씩 읽어 cURL의 변수 자리에 주입합니다. 그러므로 이번 단계에서는 호출하고 싶은 N개의 입력 조합을 데이타셋으로 미리 만들어 둡니다.

1. 좌측 메뉴 데이터 > 데이타셋 → 우상단 + 새 데이타셋.
2. 이름은 keyword_list 등 알아보기 쉬운 단어로. 4단계에서 마킹한 변수명과 정확히 같은 이름의 컬럼을 추가합니다 — 예: query (varchar) · page (int) · category (varchar).
3. 행 추가 방법은 두 가지 — (a) UI에서 한 줄씩 직접 입력, (b) 엑셀/구글시트에서 정리한 후 Cell Editor에 붙여넣기 → DB 입력 (셀 페이스트 가이드 참고).
4. 처음에는 욕심내지 말고 3~5행만 넣고 다음 단계로. 100행 짜리 데이타셋부터 시작하면 한 번 실수에 100번 잘못된 호출이 날아갑니다.

응답 저장용 데이타셋도 같이 미리 만들면 좋습니다. 예: search_results 테이블에 query, rank, title, url, snippet 컬럼. 6단계에서 응답을 어디에 적재할지 가리킬 때 사용합니다.

이제 파셔에서 새 규칙을 만들면서 우리가 준비한 cURL과 데이타셋을 연결합니다.

1. 좌측 메뉴 데이터 > 파서 → 우상단 + 새 규칙.
2. 테스트 페이지(기본 URL) 입력란 — cURL의 첫 부분에 있는 엔드포인트를 그대로 적습니다. 예: https://example.com/api/search. 변수 자리가 들어가는 URL이라면 ${user_id}처럼 같은 표기로 적습니다.
3. cURL 입력란 — 4단계에서 변수 마킹까지 끝낸 cURL 한 줄을 통째로 Ctrl+V. 파셔가 자동으로 메소드/헤더/쿠키/바디를 분리 인식하고, ${...} 패턴을 발견해 변수 후보로 등록합니다.
4. 입력 데이타셋 선택 — 5단계에서 만든 keyword_list 선택. 변수명이 일치하면 자동 매핑되고, 다르면 옆에 매핑 드롭다운이 나타납니다.
5. 응답 적재 데이타셋 선택 — search_results 선택. 응답 JSON에서 어떤 경로(예: data.items[*])를 한 행으로 풀어 저장할지 JSON path 입력란에 지정합니다.
6. 저장하면 규칙 한 건이 등록됩니다. 아직 실행 전입니다.

이제 두 가지 모드로 실행할 수 있습니다.

• ① 직접 입력 1회 테스트 — 규칙 페이지의 ▶ 실행 버튼 옆 변수 입력에서 query="강남 맛집", page=1을 직접 입력하고 한 번만 호출. 응답 본문 미리보기와 추출된 결과 행을 한 화면에서 확인합니다. 응답 형태 확인이 끝날 때까지 이 모드를 반복합니다.
• ② 데이타셋 반복 실행 — 변수 입력 패널에서 "데이타셋에서 가져오기"로 전환 → 5단계에서 만든 keyword_list 선택 → 실행. 진행률 바가 0/N → N/N으로 올라가며 응답이 한 행씩 search_results에 적재됩니다.

실행 도중 모니터링할 것 — 오류 행 수(빈 응답, 401, 5xx), 응답 본문 표본, 적재 행수. 한두 행이 실패하는 것은 정상이지만 50% 이상 실패하면 즉시 중단하고 cURL을 다시 점검합니다.

예약 실행 — 규칙 상세에서 스케줄 탭으로 가면 매일/매시간/원하는 시각에 자동 실행을 걸 수 있습니다. 키워드 리스트를 두고 매일 새 결과를 쌓는 단순 워크플로가 이렇게 완성됩니다.

업로드하기 전에 디자이너가 준 파일들을 하나의 zip으로 묶는 것부터 시작합니다. 묶는 방법에 따라 서버에 풀린 뒤의 경로가 달라지므로 아래 규칙을 지켜 주세요.

• 상위 폴더 하나로 감싸기 — 예: design_assets/ 폴더 안에 이미지와 css를 넣고, 그 폴더 자체를 zip으로 만듭니다. 풀었을 때 /업로드위치/design_assets/logo.png처럼 폴더 이름이 한 단계 유지됩니다.
• 파일·폴더명은 영문·숫자·하이픈(-)·언더바(_) — 한글이나 공백이 섞이면 경로 참조가 깨지기 쉽습니다. 예: 메인 배너.png ❌ → main-banner.png ✅
• 지원 형식 — .zip · .tar · .tar.gz · .tgz. 대부분은 .zip으로 충분합니다. 윈도우는 폴더 우클릭 → "ZIP 파일로 압축", 맥은 Finder에서 우클릭 → "~~~ 압축"을 쓰면 됩니다.
• 경로 구조 예시 —
  design_assets/
 ├─ images/logo.png
 ├─ images/hero.jpg
 ├─ fonts/pretendard.woff2
 └─ css/theme.css

상단 내비 또는 대시보드에서 서비스 → 원격 관리로 이동합니다. 왼쪽에 서버 목록 사이드바, 가운데에 4컬럼 파일 탐색기, 하단에 액션 바가 보입니다.

1. 왼쪽 서버 목록에서 에셋을 올릴 도메인(예: myshop.apidealder.net)을 클릭합니다. 도메인 이름 앞의 동그라미가 지금 상태를 알려줍니다.
   • 초록 점 — 정상, 바로 파일 목록이 열립니다.
   • 회색 점 — 오프라인. 컨테이너가 꺼져 있거나 아직 배포되지 않았습니다.
   • 흰 점 — 상태 확인 중.
2. 목록이 비어 있으면 "먼저 서버를 배포하세요" 안내가 뜹니다. 이럴 땐 싱글파일이나 프로젝트를 먼저 한 번 배포하고 다시 돌아옵니다.
3. 서버를 선택하면 가운데 영역에 최상위(/) 폴더 내용이 펼쳐지면서 실제 파일 구조가 보입니다.

에셋은 브라우저에서 URL로 불러와야 하므로 반드시 웹에서 접근 가능한 "공개 폴더"에 올려야 합니다. 싱글파일 기반 서버에서는 일반적으로 public/assets 경로를 쓰는 것을 권장합니다.

• 경로 표시줄 — 가운데 영역 맨 위의 집 아이콘으로 최상위로 이동할 수 있고, 슬래시로 나뉜 각 구간을 클릭하면 그 위치로 점프합니다.
• 경로 직접 입력 — 그 옆의 경로 입력란에 /public/assets를 그대로 타이핑하고 Enter를 누르면 중간 폴더를 하나씩 파고들 필요 없이 한 번에 이동합니다.
• assets 폴더가 없다면 — 하단 액션 바의 [새 폴더] 버튼으로 assets를 만들어 두고 그 안으로 들어갑니다. 이름에는 영문·숫자·점(.)·하이픈(-)·언더바(_)만 쓸 수 있습니다.
• 이동이 끝나면 경로 표시줄이 /public/assets처럼 바뀌는지 한 번 확인합니다. 압축을 푸는 기준 폴더가 바로 이 위치이기 때문에 잘못 풀면 다시 지우고 올리는 수고가 듭니다.

경로가 /public/assets(또는 원하는 공개 폴더)로 바뀐 상태에서 하단 액션 바의 [압축 올리기] 버튼(클라우드 화살표 아이콘)을 누릅니다. 업로드 모달이 열리고 3단계로 진행됩니다.

1. 드롭존 — 점선 박스 안으로 zip 파일을 끌어다 놓거나 박스를 클릭해 파일 선택 창을 열어 고릅니다. .zip · .tar · .tar.gz · .tgz 지원.
2. 미리보기 — 모달에 zip 안의 폴더·파일 트리가 그려지고, 상단에 파일명과 크기, 해제될 위치(/public/assets)가 표시됩니다. 여기서 상위 폴더가 의도한 대로 감싸져 있는지, 의도치 않은 숨김 파일(macOS의 .DS_Store 등)이 끼어 있지 않은지 눈으로 점검합니다. 잘못 고른 경우 오른쪽 위의 [x]로 파일을 바꿀 수 있습니다.
3. 전송 — [보내기] 버튼을 누르면 파일이 1MB씩 잘게 쪼개져 전송되고 실시간 진행률이 표시됩니다. 네트워크가 느려도 이어 보낼 수 있고, 대용량 파일(수백 MB)도 안정적으로 올라갑니다.
4. 전송이 끝나면 서버에서 자동으로 압축이 풀리고, 현재 폴더가 새로고침되면서 방금 올린 design_assets 폴더(또는 images/fonts/css 폴더들)가 나타납니다. 완료 토스트도 뜹니다.

만약 압축이 아닌 낱개 파일 몇 개만 올릴 거라면 옆의 [파일 올리기] 버튼으로 여러 파일을 선택해 현재 폴더에 그대로 복사할 수 있습니다. 이 경우 압축 해제는 하지 않습니다.

업로드된 파일은 배포된 도메인의 URL로 바로 접근 가능합니다. 예를 들어 myshop.apidealder.net 서버의 /public/assets/design_assets/images/logo.png에 올렸다면, 브라우저에서 https://myshop.apidealder.net/assets/design_assets/images/logo.png로 열립니다. (public은 웹 루트에 해당되어 경로에서 생략됩니다.)

이제 싱글파일 에디터(서비스 → 싱글파일)를 열어 방금 올린 에셋을 참조합니다.

• HTML 탭에서 이미지 삽입 —
  <img src="/assets/design_assets/images/logo.png" alt="logo">
<img src="/assets/design_assets/images/hero.jpg">
• SCSS 탭에서 배경·폰트 참조 —
  .hero { background: url("/assets/design_assets/images/hero.jpg") center/cover; }
@font-face { font-family: 'Pretendard'; src: url("/assets/design_assets/fonts/pretendard.woff2") format('woff2'); }
• 핵심 규칙 — 경로는 슬래시(/)로 시작하는 절대 경로를 씁니다. 상대 경로(../assets/...)는 미리보기와 배포 환경에서 결과가 달라질 수 있어 권장하지 않습니다.
• 외부 CSS를 통째로 포함하고 싶다면 SCSS 탭 맨 위에 @import url("/assets/design_assets/css/theme.css");를 추가합니다.

참조를 걸었으면 싱글파일 에디터 오른쪽 위의 [Run ▶]을 눌러 먼저 미리보기로 확인합니다. 미리보기가 문제없다면 [Deploy 📦]을 눌러 실제 도메인에 반영합니다.

1. Run 미리보기 — 에디터의 오른쪽 패널에 실시간으로 결과가 그려집니다. 이미지가 제대로 뜨는지, 폰트가 적용됐는지, CSS가 깨지지 않았는지 확인합니다.
2. Deploy — 배포 버튼을 누르면 배포 진행 상황이 단계별로 표시되고 보통 1~2분이면 완료됩니다. 완료 후 결과 박스에 도메인 링크가 뜹니다.
3. 실제 도메인에서 확인 — 링크를 눌러 새 탭에서 열거나 직접 https://도메인/으로 접속합니다. 강력 새로고침(Ctrl+F5 또는 Cmd+Shift+R)으로 캐시를 비우고 보는 것을 추천합니다.
4. 이미지가 안 뜬다면 다시 원격 관리로 돌아가 경로를 한 번 더 확인 — 폴더 구조가 기대와 다르다면 해당 폴더를 삭제하고 4단계부터 다시 올리는 편이 빠릅니다.

서비스가 겉으로 보이는 현상은 비슷해도 뒤에서 벌어지는 일은 전부 다릅니다. 다음 상황 중 하나라도 해당된다면 서버 쪽 로그를 열어보는 것이 가장 빠른 길입니다.

• 500 / 502 / 504 같은 서버 에러 — 브라우저 화면에는 "An error occurred" 정도만 뜨고 정확한 원인은 서버 로그에만 남습니다.
• 빈 하얀 화면 — PHP 치명적 에러로 출력이 멈춘 경우가 많습니다. 로그에 Fatal Error · Parse Error가 찍혀 있을 확률이 큽니다.
• API가 400/422로 떨어지는데 원인이 모호 — 어느 validation 룰이 걸렸는지 컨트롤러 로그에 남습니다.
• 백엔드 작업(큐·스케줄·매크로)이 "되는 것 같은데 결과가 없음" — 조용히 실패한 경우 로그에만 흔적이 남습니다.

찾아야 할 주요 로그 파일:

• storage/logs/laravel.log — PHP/Laravel 애플리케이션 전체 로그. 가장 자주 확인하는 파일.
• storage/logs/laravel-YYYY-MM-DD.log — 날짜별로 쪼개지는 경우도 있습니다.
• storage/logs/worker.log · 매크로 실행 로그 등 — 기능별로 따로 기록하는 경우 파일이 늘어납니다.

브라우저에서 서비스 → 원격 관리로 이동합니다.

1. 왼쪽 서버 목록에서 문제가 발생한 도메인을 클릭합니다. 초록 점이 뜨면 연결 가능한 상태입니다. 회색/흰 점이면 컨테이너가 꺼져 있으니 1~2분 기다렸다가 다시 눌러 봅니다.
2. 가운데 영역 상단 툴바에 있는 터미널 아이콘(▷_)을 클릭합니다. 화면 하단에 터미널 패널이 접혀 있다가 위로 펼쳐집니다. 같은 아이콘을 다시 누르면 접힙니다.
3. 터미널 패널 맨 위에 현재 작업 폴더(/var/www/html 등)가 표시되고, 입력란에 커서가 깜박입니다. 이 커서는 선택한 서버의 셸에 바로 연결되어 있어서 치는 명령이 그대로 서버에서 실행됩니다.
4. 먼저 어디에 와 있는지 확인해 봅니다.
   pwd
ls
   보통 Laravel 프로젝트 루트(/var/www/html 등)에서 시작합니다.

Laravel 프로젝트의 로그는 storage/logs 폴더에 쌓입니다. 터미널에서 그 폴더로 이동합니다.

• cd storage/logs — 현재 폴더 기준으로 이동. 이미 /var/www/html에 있다면 이 한 줄로 충분합니다.
• cd /var/www/html/storage/logs — 절대 경로로 한 번에 이동. 어디에 있든 안전하게 도착합니다.
• pwd — 지금 위치 확인. 이동 뒤 한 번 쳐서 /var/www/html/storage/logs가 맞는지 봅니다.

현재 작업 폴더는 터미널 패널이 기억하므로, 한 번 cd로 들어간 뒤로는 다음에 치는 명령들이 모두 이 폴더 기준으로 실행됩니다.

대안: 파일 탐색기에서 먼저 /storage/logs로 이동해 두고 터미널을 열면 경로가 자동으로 따라옵니다. 명령을 타이핑하기 귀찮을 때 유용합니다.

폴더에 들어왔다면 먼저 어떤 로그 파일이 있고 어떤 파일이 최근에 업데이트되었는지 봅니다. 그다음 해당 파일의 내용을 열어 봅니다.

• ls -lhrt — 파일 목록을 수정시각 오름차순으로 봅니다. 맨 아래가 가장 최근이라 뭐가 지금 쓰이고 있는지 한눈에 들어옵니다. -h는 사람이 읽기 좋은 크기(KB/MB) 표시.
• cat laravel.log — 파일 전체 출력. 파일이 작을 때만 쓰세요. 수 MB 이상이면 터미널이 느려질 수 있습니다.
• tail -n 100 laravel.log — 마지막 100줄만 출력. 가장 최근 에러를 빠르게 보는 데 유용합니다. 숫자는 원하는 만큼 바꿔도 됩니다.
• tail -f laravel.log — 실시간 모니터링. 새 로그가 쓰이면 바로 터미널에 나타납니다. 브라우저에서 문제 동작을 다시 재현하면 그 순간의 로그가 눈앞에 흘러 나옵니다. Ctrl+C로 중지.
• head -n 50 laravel.log — 파일의 앞 50줄만. 파일 상단에만 찍히는 부팅 로그를 볼 때 씁니다.
• wc -l laravel.log — 파일 줄 수 확인. 한 파일이 수십만 줄이면 바로 tail이나 grep으로 넘어가세요.

로그 파일이 길 때는 tail만으로 부족합니다. grep은 파일에서 특정 문자열이 포함된 줄만 골라내는 명령으로, 로그 디버깅의 핵심 도구입니다.

• grep -i error laravel.log — "error" 단어가 들어간 모든 줄을 출력. -i는 대소문자 무시라 "Error" · "ERROR" · "error"가 모두 걸립니다.
• grep -in "fatal\|exception" laravel.log — "fatal" 또는 "exception"이 들어간 줄을 줄 번호와 함께(-n) 출력. 여러 단어는 \|로 OR 연결합니다.
• grep -A 5 -B 2 "SQLSTATE" laravel.log — SQLSTATE가 들어간 줄을 찾고 앞 2줄(-B 2) + 뒤 5줄(-A 5)의 문맥까지 같이 출력. 예외의 스택 트레이스를 같이 보고 싶을 때 가장 유용합니다.
• grep "2026-04-25 15:4" laravel.log — 특정 시각대(오후 3시 40분대)만 뽑기. 1단계에서 기억해 둔 시각과 조합하면 범위가 훨씬 좁아집니다.
• grep -c "production.ERROR" laravel.log — 매칭된 줄의 개수만 셉니다. "에러가 얼마나 자주 나는지" 파악할 때.
• tail -f laravel.log | grep -i error — 실시간 모니터링 + 필터. tail로 흘러나오는 로그 중 error 포함한 줄만 화면에 남깁니다.

일반적인 탐색 순서 — grep -i error로 큰 그림 → 눈에 띄는 에러 메시지를 골라 다시 grep -A 10 "해당 메시지"로 앞뒤 문맥 확인 → 그 안의 파일 경로·라인 번호를 메모.

grep으로 잡아낸 에러 메시지에는 보통 파일 경로와 라인 번호(예: /var/www/html/app/Services/Order.php:127)가 붙어 있습니다. 그 정보를 바탕으로 바로 고칠 수 있습니다.

1. 터미널을 접고 파일 탐색기에서 그 경로로 이동합니다. 경로 입력란에 /var/www/html/app/Services를 붙여넣고 Enter가 가장 빠릅니다.
2. 해당 파일을 더블클릭하면 문법 강조가 들어간 코드 편집기가 열립니다. 라인 번호를 보고 문제 부분을 고친 뒤 [저장하기]를 누르면 서버에 즉시 반영됩니다 (재배포 불필요).
3. 터미널을 다시 펼치고 tail -f /var/www/html/storage/logs/laravel.log로 실시간 로그를 켜 둔 상태에서 브라우저에서 문제 동작을 한 번 더 재현합니다.
4. 같은 에러가 다시 뜨는지 보고, 뜨지 않으면 Ctrl+C로 tail을 멈추고 완료. 다른 에러가 떴다면 5단계로 돌아가 다시 좁혀 나갑니다.

디버깅 로그를 일시적으로 늘리고 싶을 때 — 문제 구간의 코드에 \Log::info('[debug] ' . json_encode($variable)); 한 줄을 넣고 저장 → 동작 재현 → grep "[debug]" laravel.log로 값을 직접 확인 → 원인 파악 후 그 Log::info() 줄은 지우는 방식이 가장 안전합니다.

현업 개발팀이 거의 예외 없이 따르는 흐름입니다. 변경은 작게, 검증은 단계별로. 한 번에 운영에 던지면 한 번에 망합니다.

• 로컬은 빠릅니다. 저장 → 새로고침 1초. 의도대로 동작하는지 가장 먼저 보는 곳.
• stage는 도메인·DB·트래픽 조건이 운영과 비슷합니다. "내 PC에선 됐는데 서버에선 안 된다" 류의 차이를 잡는 마지막 그물.
• 운영(prod)은 실 사용자가 접속하는 곳. 여기서 처음 보는 문제는 곧 사용자 항의입니다.

오늘은 이 3단을 처음부터 끝까지 한 바퀴 돌립니다. 작업 자체는 VS Code 안에서 Claude나 Codex에게 자연어로 부탁해서 진행합니다. 사람의 역할은 코드를 한 줄 한 줄 치는 것이 아니라 의도를 명확히 전달하고, 결과를 검증하고, 다음 단계로 보낼지 판단하는 것입니다.

도구가 손에 익을수록 본 작업이 빨라집니다. 이번 단계는 5분 한 번 투자가 전부입니다.

1. QuickStart 웹에서 본인 프로젝트의 패키지 내려받기 → ZIP 풀고 VS Code [File > Open Folder].
2. 하단 QUICKSTART 패널이 자동으로 뜨고, .env의 식별자(Fingerprint)로 로그인 폼 없이 서버와 연결됩니다.
3. UTIL 탭 맨 아래 [🚀 SMART SETUP] 클릭 → composer dump-autoload → npm install → vite build 자동 실행. 끝나면 vite dev 서버와 PHP 빌트인 서버가 함께 살아 있는 상태가 됩니다.

이 시점에서 브라우저에 http://localhost:<port>를 열면 본인 프로젝트가 그대로 동작합니다. 여기가 출발선입니다.

두 가지 길이 있고, 보통 둘을 같이 씁니다.

• ① VS Code 채팅 패널 + MCP — Claude(또는 Cursor·Copilot Chat·Codex CLI)에 MCP 서버를 연결해 두면, 채팅에 "user 테이블에 phone 컬럼을 추가하고 회원가입 폼에 한 줄 더 그려 줘"처럼 자연어로 요청할 수 있습니다. AI가 직접 SQL 작성, blade/vue/scss 편집, 빌드 실행까지 한 번에 해 줍니다.
• ② UTIL 탭의 AI 버튼 — 코드를 선택하고 UTIL → AI 그룹의 [CODE REVIEW] · [REFACTOR] · [EXPLAIN] · [i18n TS] 중 하나를 누르면 프로젝트 컨텍스트가 포함된 프롬프트가 생성됩니다. 이걸 그대로 Claude·Codex에 던지면 작업 품질이 크게 올라갑니다.

요청 잘 적기 — "무엇을, 어디에, 어떤 형태로" 세 가지를 분명히 합니다. 예: "/admin/users 페이지에서 phone 컬럼을 이메일 다음에 보이게 하고, 빈 값일 땐 \"-\"로 표시." 이렇게 적으면 AI가 헤매지 않습니다.

AI가 코드를 적용하는 그 순간 vite dev가 핫 리로드로 브라우저를 갱신합니다. .blade.php·.scss·.vue·.js 거의 모든 파일이 저장 즉시 반영됩니다. PHP 백엔드 변경은 php artisan serve가 그대로 받아 줍니다.

1. 브라우저에서 변경된 화면을 직접 확인 — 의도한 위치, 의도한 동작, 의도한 형태인지.
2. F12 콘솔에 빨간 에러가 있는지 한 번 훑어보기. 콘솔이 깨끗해야 다음 단계로 보냅니다.
3. UTIL → SYSTEM → [CLEAN CACHE]로 Laravel 캐시를 한 번 비워 주면 view·route 변경이 깔끔하게 반영됩니다.

의도와 다르면 다시 AI에게 짧게 요청 — "방금 본 phone 컬럼을 우편번호 위로 옮겨 줘" — 하고 다시 새로고침. 이 사이클이 1분 안에 한 바퀴 돌면 정상 속도입니다.

로컬에서 통과했으면 stage 서버로 보냅니다.

1. VS Code 하단 패널의 QS DEPLOY 탭으로 이동.
2. 왼쪽 사이드바에서 Source = L (Local) 선택, Destination = stage 체크.
3. 각 노드의 [CONNECT] · [TEST CONFIG]를 한 번 눌러 실제로 연결되는지 확인. 빨간 표시가 있으면 .env의 호스트/포트/계정부터 점검.
4. 중앙의 [SRC → DST] 버튼 클릭. 오른쪽의 [Save on Deploy] 토글이 ON인지 한 번 더 확인 — 켜져 있으면 열려 있는 모든 파일이 자동 저장된 후 배포가 시작됩니다.
5. 로그 뷰어에서 코드 + 자산(이미지·빌드 산출물) + DB 스키마/데이터가 차례로 stage로 흘러가는 모습이 실시간으로 찍힙니다.

완료되면 stage 도메인을 브라우저로 열어 봅니다. 코드 변경뿐 아니라 새로 만든 phone 컬럼이 stage DB에도 들어갔는지를 같이 확인하세요.

stage는 운영의 거울입니다. 도메인이 stage용으로 바뀌어 있을 뿐, 코드와 DB는 운영에 갈 그대로입니다.

• 실제 도메인으로 접속해 변경된 부분을 한 번 더 본인이 사용해 봅니다. 로컬에선 안 보이는 캐시·CDN·세션 문제 등이 여기서 자주 잡힙니다.
• 다른 사람에게 링크 공유해 한 번이라도 봐 달라고 합니다. 본인은 의도를 알고 있어 보이지 않는 것이 남에게는 즉시 보입니다.
• QS DEPLOY 탭의 [DIFF]로 stage ↔ 로컬 차이를 봅니다. 만약 차이가 있으면 누군가 stage에서 직접 수정한 흔적입니다 — 운영 배포 전에 정리합니다.
• [BROWSER]로 stage 서버의 실제 파일 트리를 열어 의심 파일을 확인할 수 있습니다.

만약 회귀가 잡혔다 — 로컬로 돌아가 다시 AI에게 부탁 → 4단계로 다시 → 통과하면 다시 5단계. 여기서 한 번 더 도는 비용이 운영 사고 한 번보다 압도적으로 쌉니다.

stage가 통과했으면 마지막입니다. 운영 배포는 동작은 5단계와 같지만 실 사용자에게 즉시 보인다는 차이가 있습니다.

1. QS DEPLOY 탭에서 Source = stage(또는 같은 코드인 L), Destination = main(운영 노드) 선택.
2. [Save on Deploy] 토글이 ON인지 한 번 더 확인. 평소 켜 두는 것이 안전합니다.
3. [SRC → DST] 클릭. 로그 뷰어에서 진행 상황을 끝까지 지켜봅니다 — 5xx, 빨간 줄이 있으면 즉시 중단.
4. 완료되면 운영 도메인을 직접 열어 변경된 부분과 변경하지 않은 핵심 흐름(로그인·결제 등)을 같이 한 번 굴려 봅니다.
5. 문제가 있으면 Source 와 Destination 을 [SWITCH]로 바꿔 직전 stage 상태를 운영으로 다시 올리는 식의 "롤백" 흐름을 즉시 실행할 수 있습니다.

여기까지 한 바퀴를 돌렸다면 — VS Code → Claude/Codex(MCP) → 로컬 → stage → 운영의 정석 워크플로를 끝낸 셈입니다. 이후 변경은 같은 길을 더 빠르게 반복하면 됩니다.