Mina Choi
b1386dd3ce
에디터에서 본 화면과 발행된 화면이 달랐다. 렌더러를 두 벌 들고 있었기 때문이다 —
캔버스는 `builder/canvas/variants/*` 25종, 발행본은 `site/src/sections/*`.
Playwright 로 재 보니 아예 다른 물건이었다(2026-09-09, 1024px):
발행본 15섹션 · 에디터 12섹션 · 겹치는 건 4개뿐, 이름도 달랐다
(gallery↔photos · location↔map · guide↔local)
겹치는 4개조차 높이가 달랐다(info 488↔535 · booking 242↔487 · itinerary 881↔383)
소스를 하나로 모은다. 편집·미리보기 둘 다 발행본 렌더러가 그린다.
**데이터도 한 벌** — `GET /v1/place/{id}/site/preview` 가 발행이 굽는 것과 **같은 함수**
(`build_snapshot` → `to_site_payload`)로 payload 를 만든다. DB 도 파일도 건드리지 않는다.
**왜 iframe 인가** — 컴포넌트만 같게 해서는 안 됐다. 미디어 쿼리는 창 폭을 보는데 실제
사이트 폭은 그 안의 프레임이라, 그리드 컬럼 수가 어긋나 섹션이 두 배씩 길어졌다
(festival 2560→6027 · guide 1168→2168). iframe 은 자체 뷰포트를 가져 발행본과 같은 폭을 본다.
폭만이 아니라 **높이도** 준다 — 히어로가 `clamp(24rem, 62vh, 36rem)` 이라 낮은 iframe 에서는
하한에 걸렸다(384 ↔ 발행본 576). 자리에 안 들어가면 transform 으로 줄인다: 크기는 그대로,
그림만 줄여야 미디어 쿼리가 안 흔들린다.
**색·서체도 한 벌** — `themeVars(payload)` · `fontHref(payload)`. 셸에는 발행본 `<head>` 의
폰트 링크가 없어 글자만 기본 산세리프로 떨어졌다(지오메트리는 같은데 픽셀 차이 92%).
**에디터가 저장된 템플릿을 안 읽던 것** — `applyTheme` 이 섹션·색팔레트는 되살리는데
templateId 를 빠뜨렸다. templateId 는 theme JSON 이 아니라 `sites.template_id` **컬럼**이라
저장 경로가 다른데 읽는 쪽이 theme 만 봤다. 사장님이 '옛 항구' 를 골라 발행해도 다시
들어오면 편집 화면만 흰 바탕·고딕이었다.
**고르기는 iframe 안에서** — 같은 오리진이라 안쪽 문서에 직접 리스너를 건다. 어느 섹션인지는
`data-editor-id` 로 안다(화면 id `gallery` ↔ 설정 id `photos`; `display:contents` 라 레이아웃
무영향). 표시는 outline 이다 — 상자 크기를 바꾸지 않아 발행본과 픽셀이 그대로다.
곁들여 정리한 것
- 켤 수 없는 섹션 둘(`pricing`·`planner`)을 뗐다 — 기본표에도 [+섹션 추가]에도 없고 DB 참조 0건.
- 반대로 `event`(소식)는 기본표가 켜서 **발행되는데** 채울 UI 가 없었다. 명세를 넣는다.
이 아이템만 프롬프트가 "찾아라" 가 아니라 **"옮겨 적어라"** 다 — 이 가게에서 지금 하는
일이라 모델이 알 수 없고, 지어내면 손님이 없는 행사를 보고 찾아온다.
- 예약 버튼이 "네이버 예약 예약" 이었다. `{bookingLabel} 예약` 을 13개 파일에서 각자 이어
붙이고 있었다 — `bookingActionLabel()` 하나로 모은다.
- `solution/site` 의 별칭을 `@` → `@site` 로 옮겼다(60파일 195건). 두 앱이 '@' 를 각자 자기
src 로 두면 발행본 컴포넌트를 빌더에서 부를 때 **조용히 다른 파일을 잡는다.**
검증(Playwright, 같은 사업장·1024px):
섹션 15 = 15 · 순서 일치 · **한쪽에만 있는 섹션 0개**
15개 전부 높이·글자 수·제목이 정확히 같다
편집·미리보기·발행본 셋 다 --tpl-bg #e4dac0 · Gugi
`/preview` ↔ 발행본 문서 높이 9029 = 9029, 픽셀 차이 2.88%(축제 카드 지연 로딩 타이밍)
tsc -b 통과 · eslint 통과.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| admin | ||
| docs | ||
| nginx | ||
| postgres-init | ||
| solution | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| AGENTS.md | ||
| CLAUDE.md | ||
| deploy.sh | ||
| docker-compose.yml | ||
| log.sh | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.base.json | ||
o2o-web4ai
상호명 하나로 소상공인 홈페이지를 만들어 발행하는 서비스.
목표는 예쁜 사이트가 아니다 — AI 검색과 검색엔진이 이 가게를 "공식 홈페이지 기준"으로 설명하게 만드는 것이다. 그래서 산출물은 SPA 가 아니라 크롤러가 그대로 읽는 정적 HTML 이고, 발행 게이트가 통과시키지 않은 값은 사이트에 나가지 않는다.
- 무엇을 · 누구를 위해 · 무엇을 안 하는가 → docs/PRODUCT.md
- 어떻게 도는가 (파이프라인·앱 경계) → docs/ARCHITECTURE.md
- 에이전트·신규 합류자가 먼저 읽을 규약 → AGENTS.md
실행
cp .env.example .env # DB_*, JWT_*, 외부 API 키
cp nginx/site.conf.example nginx/site.conf # 빼먹으면 nginx 가 설정 없이 뜬다
docker compose up -d
docker compose logs -f solution-worker
| 주소 | 공개 | |
|---|---|---|
| 사장님 앱 (빌더) | http://localhost:3000 | 외부 |
| 발행된 사이트 | http://localhost:3000/s/<slug> · 운영은 :80 |
외부 |
| 솔루션 API 문서 | http://localhost:9800/docs | 외부 |
| 내부 운영 화면 | http://localhost:3002 | 127.0.0.1 만 |
| 어드민 API 문서 | http://localhost:9801/docs | 127.0.0.1 만 |
내부 두 개를 0.0.0.0 으로 열면 앱을 가른 의미가 없다 (ADMIN_BIND · ADMIN_API_BIND).
- DB 는 compose 밖이다 (호스트 PostgreSQL,
host.docker.internal). 스키마는postgres-init/init-data/init.sql한 벌 — 누적 ALTER 파일은 없다. - npm 워크스페이스 루트는 레포 루트다.
npm install은 여기서 한 번.npm run dev:frontend/dev:admin/dev:site - 백엔드 스크립트는
solution/backend/에서.venv/bin/python scripts/<name>.py - 테스트는
solution/backend/에서.venv/bin/pytest
레포 구조
solution/ 사장님 — 사이트 만들기·관리
backend/ FastAPI(:9800) + 워커. HTML 은 만들지 않는다 — payload JSON 만 떨어뜨린다
frontend/ 빌더 (위저드 + 에디터 + 발행 게이트)
site/ 발행 사이트. SSR 엔트리 + 프리렌더 + 정적 서버
shared/ frontend·site·백엔드 계약 (SitePayload · slug · 디자인 토큰)
admin/ 우리 — 전체 사이트 운영
backend/ 진입점만(:9801). 도메인 코드는 solution/backend 를 PYTHONPATH 로 쓴다
frontend/ 운영 화면. `@` 별칭이 solution/frontend/src 를 가리킨다
docs/ 아래 표
nginx/ 발행 사이트 정적 서빙 (site.conf 는 .example 만 커밋)
postgres-init/ 스키마 DDL
의존 방향은 admin → solution 한 쪽뿐이다. 반대가 생기면 번들을 가른 의미가 사라진다. 근거는 ARCHITECTURE.md 4절.
문서 지도
| 문서 | 언제 읽나 |
|---|---|
| docs/PRODUCT.md | 이 제품이 뭘 푸는지 · 안 하기로 한 것이 뭔지 |
| docs/ARCHITECTURE.md | 발행 파이프라인 전체 · 두 앱과 한 백엔드의 경계 |
| docs/DEVELOPMENT_DIRECTION.md | v19 설계서 대비 격차 · 개발 우선순위(P0~P4) |
| docs/DECISIONS.md | 미결 사항과, 코드가 그걸 어떻게 격리해 뒀는지 |
| docs/DEPLOY.md | 서버에 올릴 때 · 배포 후 재발행 절차 |
| docs/DATA_SOURCE_RESEARCH.md | 어디서 콘텐츠를 가져올 수 있나 (실측 근거) |
| docs/COLLECTION_SEO_AEO_FLOW.md | 수집→LLM→SEO/AEO 현재 구현 |
| docs/API_USAGE.md | 외부 API 원가 — 사이트 1건당 $1 상한을 어디서 강제하나 |
문서 규칙
- 한 사실은 한 곳에. 중복된 문서는 썩고, 썩은 문서는 사람과 에이전트를 적극적으로 오도한다. 다른 문서의 내용은 복사하지 말고 링크한다.
- 코드가 말해주는 건 쓰지 않는다. 문서에 적을 값어치가 있는 건 왜 이렇게 했는지, 왜 저건 안 했는지, 그리고 실측값(날짜와 함께)이다.
- 결론이 나면
DECISIONS.md에 날짜와 함께 적고, 격리해 둔 플래그를 제거한다. - 문서는 코드와 같은 커밋·같은 리뷰에서 고친다. 동작을 바꾸는 PR 이 문서를 안 고쳤으면 미완이다.