mamoru

[MAMORU] Brand-Centric Tech Specialist Guide

Project Identity: High-End Scissor Consulting Platform
Tech Stack: Imweb(Frontend) + GAS doPost(e)(수신/기록) + Google Sheets(DB) + AppSheet(후속 관리/자동화)

작업 규칙(정본)

1. 브랜드 페르소나 & 핵심 가치 (The MAMORU Spirit)

2. 디자인 원칙: Modern · Crisp

3. 시스템 아키텍처 & 로직 (Technical Flow)

3.1 A/S 접수 시스템

진행방식

| 방식 | 설명 | |——|——| | 방문수거 | 롯데택배 기사님이 고객 주소지로 방문하여 수거 | | 직접발송 | 고객이 직접 택배 발송 (수거비 무료) |

가격 정책

| 항목 | 단가 | |——|——| | 마모루 가위 A/S | 10,000원/자루 | | 타사 가위 A/S | 20,000원/자루 (마모루 가위 접수 시에만 추가 가능) |

수거비 정책 (방문수거 시)

| 총 수량 | 수거비 | |———|——–| | 1자루 | 5,000원 | | 2자루 | 3,000원 | | 3자루 이상 | 무료 | | 직접발송 | 무료 |

총 수량 = 마모루 가위 + 타사 가위 합산

MAKE 웹훅 Payload (AS_CREATE)

{
  "as_id": "AS-20260203-001",
  "name": "고객명",
  "phone": "01012345678",
  "proceed_type": "방문수거|직접발송",
  "pickup_date": "2026-02-05",
  "qty_mamoru": "2",
  "qty_other": "1",
  "service_cost": 40000,
  "shipping_fee": 0,
  "total_amount": 40000
}

4. 파일 구조 & 배포 방식

4.1 프로젝트 디렉토리

projects/
├── common_code/                # 아임웹 공통 코드 (환경설정)
│   ├── header_code_top.txt     ← Header Code 상단 (preconnect)
│   ├── header_code.txt         ← Header Code (iframe CSS)
│   ├── header_product_style.txt ← Header Code 추가 (상품 진열 공통 스타일)
│   └── footer_code.txt         ← Footer Code (iframe JS)
├── product_page/               # 상품 진열 / 카테고리 페이지
│   └── productpage_categorybar.txt ← 카테고리 TOP 코드위젯 (배너+탭)
├── as/                         # A/S 접수
│   ├── page_form.html          ← GitHub Pages 배포 (실제 콘텐츠)
│   ├── page_guide.html         ← GitHub Pages 배포
│   ├── iframe_form.html        ← 아임웹 코드위젯에 붙여넣기 (/53)
│   ├── iframe_guide.html       ← 아임웹 코드위젯에 붙여넣기 (/60)
│   ├── icons/                  # SVG 아이콘
│   ├── holidays_2026_2027.tsv  # 공휴일 원본 데이터
│   └── _gas/                   # GAS 백엔드 (Code.gs 등)
├── consulting/                 # 상담접수
│   ├── page_form.html          ← GitHub Pages 배포
│   ├── page_diag.html          ← GitHub Pages 배포
│   ├── page_guide.html         ← GitHub Pages 배포
│   ├── page_recommend.html     ← GitHub Pages 배포
│   ├── iframe_form.html        ← 아임웹 코드위젯
│   ├── iframe_diag.html        ← 아임웹 코드위젯
│   ├── iframe_guide.html       ← 아임웹 코드위젯 (/61)
│   ├── iframe_recommend.html   ← 아임웹 코드위젯
│   ├── products.js             # 제품 데이터 (추천 로직)
│   └── Code.gs                 # GAS 백엔드
└── brand/                      # 브랜드 소개
    ├── page_intro.html         ← GitHub Pages 배포
    ├── iframe_intro.html       ← 아임웹 코드위젯
    └── Code.gs                 # GAS 백엔드

4.2 배포 구조 (3단계)

계층 파일 배포 방식 변경 시 반영
공통 코드 common_code/*.txt 아임웹 환경설정에 수동 붙여넣기 아임웹 환경설정에서 직접 교체
콘텐츠 page_*.html GitHub Pages 자동 배포 git push → 1~2분 후 자동
코드위젯 iframe_*.html, productpage_*.txt 아임웹 코드위젯에 수동 붙여넣기 아임웹에서 직접 교체 필요
백엔드 Code.gs GAS 에디터에서 배포 GAS 새 배포 필요

중요: page_*.html 수정은 push만 하면 되지만, iframe_*.html 수정 시에는 아임웹 해당 페이지의 코드위젯도 동일 내용으로 교체해야 반영됩니다.

4.3 아임웹 공통 코드 매핑

아임웹 환경설정 영역 로컬 파일 역할
Header Code 상단 common_code/header_code_top.txt preconnect/dns-prefetch
Header Code common_code/header_code.txt + header_product_style.txt iframe CSS + 상품 진열 공통 스타일
Footer Code common_code/footer_code.txt iframe 높이/모달 뷰포트 JS

상품 진열 스타일은 Header Code에 한 번만 넣으면 전 카테고리 페이지에 적용됩니다. 새 상품 위젯 추가 시 header_product_style.txt의 IDS 배열에 위젯 ID만 추가하면 됩니다.

4.4 아임웹 페이지 매핑

아임웹 경로 코드위젯 파일 로드하는 콘텐츠
/53 projects/as/iframe_form.html AS 접수 폼
/60 projects/as/iframe_guide.html AS 안내
/61 projects/consulting/iframe_guide.html 상담 안내
(상담접수) projects/consulting/iframe_form.html 상담접수 폼
(간편진단) projects/consulting/iframe_diag.html 간편진단
(맞춤추천) projects/consulting/iframe_recommend.html 맞춤 추천
(브랜드) projects/brand/iframe_intro.html 브랜드 소개

4.5 카테고리 페이지 구조

각 카테고리 페이지(블런트/틴닝/장가위/슬라이싱)는 코드위젯 2개로 구성:

순서 코드위젯 파일 역할
1 카테고리 TOP productpage_categorybar.txt 배너 이미지(PC/모바일 반응형) + 텍스트 오버레이 + 블랙 칩 탭
2 상품 진열 아임웹 기본 상품 위젯 스타일은 공통 코드(header_product_style.txt)에서 일괄 적용

카테고리 TOP 수정 포인트 (productpage_categorybar.txt):

카테고리 페이지 매핑:

아임웹 경로 카테고리 상품 위젯 ID
/29 블런트 w2025082780aa858e21dc6
/30 틴닝 (위젯 ID 확인 후 IDS 배열에 추가)
/39 장가위 (위젯 ID 확인 후 IDS 배열에 추가)
/40 슬라이싱 (위젯 ID 확인 후 IDS 배열에 추가)

4.6 iframe ↔ Parent 공통 메시지 프로토콜 (postMessage)

모든 page_*.html ↔ iframe_*.html 통신에 사용되는 표준 메시지 타입:

메시지 type 방향 용도
MAMORU_IFRAME_SIZE page → parent iframe 높이 자동 조절 ({ height })
MAMORU_SCROLL_TOP page → parent 부모 페이지 맨 위로 스크롤
MAMORU_NAVIGATE page → parent 부모 페이지 이동 ({ url })
MAMORU_REQUEST_VIEWPORT page → parent 모달 중앙 배치용 뷰포트 정보 요청
MAMORU_VIEWPORT_INFO parent → page 뷰포트 정보 응답 ({ visibleTop, visibleHeight })

MAMORU_REQUEST_VIEWPORT / MAMORU_VIEWPORT_INFO는 iframe 내부에서 모달/달력을 현재 보이는 화면 중앙에 배치하기 위해 사용합니다. 모달이 있는 page에서 요청하면, iframe_*.html(부모)이 응답합니다.

5. 구현 가이드라인(요약)

6. 변경 이력 (최근)

2026-02-03 (상품 진열 / 카테고리 페이지)

2026-02-03 (A/S 접수)

참고