디자인 포탈

🎨

디자인 가이드 마스터 GUIDE LIVE

브랜드 정체성(Refined·Warm·Quiet Premium) · 컬러 토큰 2모드 · 타입 스케일 · 컴포넌트 · 모션 51종 · DO/DON'T

📅 2026.06.18 🌐 ij-design-guide.vercel.app

→

공구 혜택 배너

확정판(8/20) · 사틴·깜빡임·새틴결·페이드 · 채널별 혜택만 교체해 재사용

공구 배너 — 지금 vs 수정안

컨펌용 A/B 비교 · 나브런치 공구 배너

🎯

스크롤 힌트 4종 MODULE LIVE

첫 화면 아래에 더 있다고 알리는 장치 · 상세용 순수 CSS 3종(알약 배지·세로선·겹화살표) + 홈용 JS 1종(60px 내리면 사라짐). 출처 = 케이스북 D2 Jeton

🎨 케이스북 D2 → 모듈 📉 광고랜딩 10% 통과율 51.4% 개선용 ✅ 양엔진 8조합 PASS

→

📊

공구 셀러 대시보드 TEMPLATE LIVE

셀러에게 실시간 판매를 보여주는 대시보드 · 맨 위 정산 예상액(수식 한 줄로 변경) · 5분 자동갱신 · GA 실측(없으면 자동 숨김). 새 공구는 new_seller_dashboard.js로 찍어냄

⚙️ CFG 5줄만 수정 💰 정산 수식 커스텀 ✅ 양엔진 8조합 PASS

→

🌾

From Italia, Campania · Hero MODULE LIVE 🎨 톤

이탈리아 화덕의 풍미를, 에어프라이어 5분이면 갓 구운 그대로 · 영문 사틴 eyebrow + 한글 헤딩

📅 2026.06.18 🎨 다크 #322d25 🍞 룽고·톤도 🔧 .gh-*

→

🔥

파베이킹 공정 MODULE LIVE 🎨 톤

반만 구워 풍미를 봉인. 이탈리아 화덕 80% + 급속 냉동 + 우리집 5분

📅 2026.06.18 🎨 다크 #322d25 📦 #93 🔧 .pb93-*

→

⭐

체험단 후기 MODULE LIVE

96.5% · 93.5% 통계 + 별 5개 + 리뷰 카드 4개 (한 장씩 페이드업 · 사틴)

📅 2026.06.18 🎨 라이트 #dbd4cc 🍞 룽고·톤도 🔧 .gr-*

→

💬

Problem → Solution → 비교표 MODULE LIVE 🎨 톤

진짜 이탈리아 빵을 집에서? · 말풍선 페이드업 + 일반 냉동빵 vs 파네 룽고/톤도 비교표

📅 2026.06.22 🎨 버건디 #6e2f30 · 세이지 📦 #93 · #95 🔧 #ij-gp-problem

→

✉️

레터 히어로 (From Italia) MODULE LIVE 🎨 톤

상페 최상단 편지형 히어로 · From Italia, Campania 글자별 페이드인 + 정미소 일동 손편지 톤

📅 2026.06.23 🎨 크림 #ebe5d8 📦 #93 · #95 🔧 #ij-letter-hero

→

🏆

코라티나 수상 섹션 MODULE LIVE

2025 세계 동시 인정. NYIOOC 뉴욕 GOLD · OLIVE JAPAN GOLD · 메달 + 타임라인 + 인라인 SVG 로고/국기

📅 2026.06.17 🎨 다크그린 #1c2818 📦 #91 🔧 #ij-awards

→

🌿

바질페스토 공구 파트너 가이드 REF LIVE

공구 파트너에게 보내는 제품 안내 페이지(미주 제작) · 영상 2개가 옛 찰라 주소로 죽어 있던 것을 1창이 pesto-1(드라이아이스)·pesto-4(색비교)로 복구 발행 · ⚠️원본은 미주 PC에 있음 — 미주가 자기 원본으로 재배포하면 죽은 영상이 되살아난다(치환 지시서: italy-jungmiso/_misu_basil_video_fix.md)

📅 2026.08.06 복구 🔗 basil-partner-cf.pages.dev 👤 미주 제작 🎬 songmamans-media 영상 2

↗

🍃

브랜드스토리 인트로 (잎 1200) MODULE LIVE

company 페이지 첫 인트로 · 1200개 잎 SVG가 흩어지며 본문 노출(rAF blow-away) · 풀스크린 오버레이 · story_v1에서 추출(본문은 placeholder)

📅 2026.06.23 🎨 풀스크린 애니 📱 standalone 🔧 .intro/.leaf

→

🛒

구매 바텀시트 COMPONENT LIVE

구매/선물 누르면 올라오는 옵션 시트 · 옵션 다중/단일/없음 통일 카드 · 아래로 스와이프 닫기(GPU translate3d·스냅백·내부스크롤 충돌방지) · 캡처 + 스펙 + 코드 위치

📅 2026.06.23 🎨 라이트 카드 📱 skin15 시트 🔧 #ij-bs

→

🖼️

이미지 썸네일 갤러리 COMPONENT LIVE

상품 이미지 갤러리 · 메인↔썸네일 동기화(active 따라가기) · 양쪽 화살표로 1개씩 · cafe24 front/thumb Swiper 위 IJ 커스텀(native scroll 덮어쓰기 제거)

📅 2026.06.23 🎨 라이브 데모 📱 skin8 발행 🔧 .thumb-slide

→

🏷️

상품 뱃지 아이콘 시스템 COMPONENT LIVE

상세페이지 배송비 밑 뱃지 카드 · 아이콘+제목+설명 세트 · 공구 상품 복사 시 이름 매칭 자동(수동 X). BADGE_DATA 기반, 31개 상품 적용

🏷️ 상품 뱃지 🔁 이름 자동매칭 📱 skin8 발행

→

🎨

디자인 케이스북 REF LIVE

A 식품 · B 주방기기 (브랜드 케이스, 봇 자동수집 매일 1개) / C 상세페이지 요소 · D 홈페이지 UI·UX 디테일 (업종 무관, 화면 위 장치를 위치·개수·색으로 기록)

🔗 design-casebook.vercel.app 📊 시트 = SSOT (🎨 디자인_사례) 🗂 A·B·C·D

↗

🌟

레퍼런스 수집원 8곳 REF LIVE

대표 선정 갤러리 — Awwwards(Food & Drink 필터) · Lapa Ninja(랜딩 8,000+) · SiteInspire(Minimal) · CSS Design Awards · FWA · maxibestof · Dribbble · Behance. 케이스북 D 자동수집이 여기서 골라옵니다

🔗 ij-design-guide-cf.pages.dev 🌟 TOP3 + 5곳

↗

🍞

룽고·톤도 상세페이지 가이드 REF LIVE

사포리 델 그라나이오 빵 상페 설계도 · 제품 사실 + 19섹션 카피 구조 + 촬영 가이드

🔗 lungo-ref.vercel.app 🍞 룽고·톤도 📦 #93 · #95

↗

☕

파사라쿠아 드립백 상세페이지 기획안 REF LIVE

PASSALACQUA 드립백 2종(베수비오·메하리) 설계도 · 제품 이해 + 드립백 시장 8개사 분석 + 페르소나 4명 + 13섹션 카피/영상 가이드 · 나폴리 1948

🔗 passalacqua-ref.vercel.app ☕ 위탁

↗

🍲

카마솥 뚜껑잡이 상세페이지 기획안 REF LIVE

KAMASOT 냄비뚜껑 홀더 설계도 · 제품 이해 + 페르소나 4명 + 13섹션 카피/영상 가이드 · 포스코 304 등급 피라미드 · 출시 8월말~9월초

🔗 holder-ref.vercel.app 🍲 KAMASOT

↗

🫒

롤리오 EVOO 상세페이지 가이드 REF LIVE

코라티나·프루타토 상페 설계도 v2 · 섹션 재배치 + 6지표 표 + cafe24 17장 교체맵

🔗 paparella-ref-v2.vercel.app 🫒 롤리오 📦 #91 · #92

↗

✉️

단골 매거진 · 2026.07 EDITORIAL LIVE NEW

"단골이 들려주는 맛있는 이야기" · 인터뷰 히어로(Playfair 사틴 타이핑) + 형광펜 하이라이트 + 응원 댓글 폼(GAS 시트, 즉시게시·추첨 연락처) · 녹색 에디토리얼 톤 · 재사용 패턴 소스

🔗 italy-jungmiso.com ✉ 매거진 🗓 2026.07

↗

🎨

디자인 토큰 교체 보고서 REPORT LIVE

자사몰 폰트 12종→2·3종 · 색 218개→15토큰 · radius 12종→3종 · 영향 276파일 · 진행순서(common.css→skin13→검증→skin8)

🔗 italy-design-tokens.vercel.app 🎨 디자인 시스템

↗

☕

촬영 콜시트 · 파사라쿠아 드립백 TOOL LIVE

촬영 브리프(제품·브랜드·USP) · 기본 톤·패키지 팔레트 · 촬영 순서(마른 컷→젖은 컷) · 컷 16개

🔗 shoot-passalacqua.vercel.app ☕ 촬영 제작

↗

📸

촬영 콜시트 · 5/30 TOOL LIVE

빵 배경 톤(룽고·톤도 공통) · 추천 촬영 순서(배경 교체 최소화) · 컷 리스트

🔗 shoot-0530.vercel.app 📸 촬영 제작

↗

🗺️

산지 지도 TOOL LIVE

프루타토 4품종 산지(풀리아·캄파니아) + 제조지(이탈리아 남부) 마커 지도 · 상페 콘텐츠 자료

🔗 ij-maps.vercel.app 🗺 콘텐츠

↗

🎨

톤 컨트롤러 TOOL NEW

토큰화 모듈(letter·hero·parbaking·problem)의 톤을 한 곳에서 — 프리셋(룽고/롤리오/주방기기)·실시간 미리보기·대비 경고·hex 복사·되돌리기

🔗 tone-controller.html 🎨 톤 시스템

↗

🎚

색안 비교 보드 TOOL NEW

여러 색안을 나란히 놓고 고르는 도구 — 글자 대비(WCAG) 자동 계산·hex 클릭 복사·하단바/버튼 미리보기·실제 화면 캡처 위에 색 얹기. 버튼색·배경색처럼 "여러 안 중 하나 고르기"에 사용

🔗 color-compare.html 🎚 색 결정

↗

🟩

케이스 · 하단 고정바 색 7안 CASE NEW

2026-08 자사몰 하단 구매바 색 결정 과정 — 실제 skin19 화면을 캡처해 색만 바꾼 원안+6안. 배경 밝기별로 구매하기 글자색(샴페인/아이보리)을 맞춘 기준도 함께

🔗 case-bottombar-color.html 🟩 색 사례

↗

✂️

사진 크기·위치 조절기 (범용) TOOL NEW

내 사진 올리고 → 비율 고르고(배너PC·모바일·정사각·4:3·3:4·자유) → 줌·드래그로 구도 맞춰 값 복사. 픽셀 정확 크롭값 산출 → Claude가 그대로 고해상도 크롭. 카테고리 배너·매거진 사진·썸네일 등 프레임 안 사진 맞출 때

🔗 fb-position.html ✂️ 사진 크롭

↗

📢

택배 휴무 안내 팝업 TEMPLATE LIVE

자사몰 메인·상품·게시판에 뜨는 휴무 안내 팝업(PC+모바일, 달력·날짜게이트 자동표시). footer.html에 심는 자체 코드 — 다음 휴무 때 표시기간·KEY·달력·문구만 교체해 재사용. 현재 라이브=제헌절

🔗 holiday-popup.html 📢 휴무 팝업

↗

🎛

디자인 트윅 패널 TOOL NEW

배포 페이지에서 요소 클릭 → 색·크기·여백·폰트 실시간 직접 조작 → 변경 내역 복사해 클로드에 넘기면 소스 반영 · 브랜드 팔레트 스와치·원본 비교·설치 가이드

🔗 tweak.html 🎛 실시간 편집

↗

🧾

인쇄물 견적 정리 TOOL LIVE

보냉보온팩·인쇄물 제작 견적(품목·접었을때/폈을때·단가·택배비·업체) 정리 시트 · 패키지/인쇄 발주 참고

🔗 Google Sheet 🧾 제작 견적

↗

🎯

팬톤 딥그린 매칭기 TOOL NEW

브랜드 딥그린(#2C3E2D)↔팬톤 매칭 · 실리콘 적용색 7734 C(은우 픽) · Solid Coated/Uncoated 각 2,140색 색계열별(초록·노랑…) 검색 · 실물 샘플 승인 주의

🔗 pantone-deepgreen.html 🎯 색상 확정

↗

📝

나무위키 문서 편집기 TOOL NEW

나무위키 문법 실시간 미리보기(목차·정보상자·각주) · ★광고성 표현 30종 자동검사(삭제 1순위 사유) · 삭제 사유/준수사항 + 나이키 문서 구조 가이드 내장 · 팀 회람 후 한 번에 업로드용

🔗 namu-editor-site.vercel.app 📝 브랜드 등재

↗

📦

발주 하루 (실무 체크리스트) TOOL LIVE

지금 시각 기준 다음 할 일 · 봇/사람 구분 타임라인 · 검증 커맨드 · 문제처럼 보이는데 정상인 것 7가지 · 공구 단가 · WMS 로그인

🔗 ij-order-day.vercel.app 📦 운영

↗

📊

개인 성과 · 운영 시트 SHEET

개입기록 · 성과 요약 등 운영 추적 시트 (구글 시트 · 해당 탭으로 바로)

🔗 Google Sheets 📊 운영

↗

🎨

자사몰 디자인 케이스북 CASE LIVE

자사몰 디자인 시안·사례 (A 식품 · B 주방기기) · 디자인 케이스 스터디

🔗 design-casebook.vercel.app 🎨 디자인 케이스

↗

📚

UX 케이스북 HUB LIVE

UI/UX 사례(채택·패스) + 내 할일(할일·진행중·완료) · 송마망봇 월·목 사례 SSOT

🔗 ij-cases.vercel.app 📚 케이스북

↗

🍳

KAMASOT 브랜드 기획 + 무드보드 BRAND NEW

티타늄 쿡웨어 신규 브랜드 원페이지 · 미션·포지셔닝·원칙·컬러·타이포·컬렉션·아트디렉션 + 홈 IA 도식 + 무드보드 3보드(핀 192장) 한눈에

🍳 KAMASOT 📋 브랜드 기획 🎨 무드보드 192핀

↗

🏠

KAMASOT 홈페이지 가안 v0.1 PROTOTYPE NEW

실제 동작하는 홈 프로토타입 · 헤더(드롭다운 3종·모바일 서랍)+8섹션+한/영 토글. 이미지는 자리표시, 구현은 cafe24

🍳 KAMASOT 🧭 헤더·IA 🇰🇷 한/영 전환

↗

✨

KAMASOT 홈 인트로 (색반전 히어로) HERO NEW

크림 인트로(엠블럼→글자→크림 쓸려내림→로고 페이드) + 스크롤 색반전(태그라인 고정·밝은 크림 올라오며 글자색 갈림, 토지로식) + 브랜드 설명. skin7 라이브. ★사진은 임시(등대)

🍳 KAMASOT ✨ 인트로·색반전 🌊 크림 쓸림 📱 skin7 라이브

↗