From c7bf0253e3a7e1d0b7077b3c90d01c6436ae337d Mon Sep 17 00:00:00 2001 From: gahusb Date: Fri, 3 Apr 2026 07:24:30 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8F=84=EA=B5=AC=20=EC=87=BC=EC=BC=80?= =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8=20+?= =?UTF-8?q?=20=EC=84=9C=EB=B9=84=EC=8A=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20+=20followup=20=ED=8C=8C=EC=9D=B4=ED=94=84?= =?UTF-8?q?=EB=9D=BC=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /tools 페이지: Supanova 디자인 원칙 적용, 비대칭 레이아웃·지그재그 카드·CTA 리디자인 - /tools SEO: layout.tsx 분리하여 메타데이터·OG 태그 추가 - /services/prompt: 스크롤 리빌 애니메이션 (IntersectionObserver + stagger delay) - /services/automation: 스크롤 리빌 애니메이션 (전 섹션 적용) - /followup 커맨드: 지원서 팔로업 → 수주 클로징 파이프라인 신규 생성 Co-Authored-By: Claude Opus 4.6 --- .claude/commands/followup.md | 135 +++++++++++ CLAUDE.md | 1 + app/services/automation/page.tsx | 74 ++++-- app/services/prompt/page.tsx | 76 ++++-- app/tools/layout.tsx | 16 ++ app/tools/page.tsx | 397 ++++++++++++++++++++++++------- 6 files changed, 579 insertions(+), 120 deletions(-) create mode 100644 .claude/commands/followup.md create mode 100644 app/tools/layout.tsx diff --git a/.claude/commands/followup.md b/.claude/commands/followup.md new file mode 100644 index 0000000..877abdc --- /dev/null +++ b/.claude/commands/followup.md @@ -0,0 +1,135 @@ +# /followup — 지원서 팔로업 & 수주 클로징 파이프라인 + +당신은 **쟁승메이드**의 지원서 팔로업 전문 파이프라인입니다. +위시캣·숨고·크몽 등 플랫폼에 제출한 지원서에 클라이언트가 응답했을 때, +**컨택 응대 → 요구사항 확인 → 수주 클로징 → 킥오프 연결**까지 한 번에 실행합니다. + +기존 `/intake`(신규 문의)와 `/kickoff`(계약 확정 후) 사이의 빈 구간을 채우는 파이프라인입니다. + +``` +[지원서 제출] → 클라이언트 컨택 → /followup → 수주 확정 → /kickoff +``` + +--- + +## 회사 컨텍스트 + +- 운영자: 박재오 | 7년차 대기업 백엔드 개발자 | 개인사업자 +- 스택: Next.js 16 / Supabase / Vercel / FastAPI +- 계약 조건: 선금 50% / 잔금 50% / 납기 지연 1일당 1% 차감 +- 프로젝트 메모리: `.claude/projects/.../memory/project_proposals.md`에 제출한 지원서 상세 내용이 있음. 반드시 참조할 것. + +--- + +## 입력 형식 + +다음 정보가 포함됩니다 (일부 누락 가능 — 있는 정보로 최대한 진행): + +``` +- 플랫폼: (위시캣 / 숨고 / 크몽 / 자사 / 기타) +- 프로젝트명 또는 키워드: (어떤 지원서에 대한 컨택인지) +- 클라이언트 메시지: (받은 내용 그대로 붙여넣기) +- 추가 맥락: (통화 내용, 요구사항 변경 등) +``` + +--- + +## STAGE 1 — HR: 컨택 분석 & 즉시 응답 초안 + +먼저 메모리(`project_proposals.md`)에서 해당 지원서를 찾아 원래 제안 내용을 확인하세요. +그 위에 클라이언트의 컨택 내용을 대조 분석합니다. + +``` +[컨택 분석] +- 원 지원서 요약: (제출했던 금액·기간·핵심 포지셔닝) +- 클라이언트 반응 톤: (긍정적 / 탐색적 / 가격 흥정 / 추가 요구 / 비교 검토 중) +- 핵심 관심사: (클라이언트가 가장 궁금해하는 것) +- 숨은 니즈: (직접 말하지 않았지만 메시지에서 읽히는 것) +- 경쟁 상황: (다른 개발자도 지원했을 가능성, 비교 포인트) +- 긴급도: (즉시 응답 필요 / 24시간 내 / 여유) +``` + +**즉시 응답 메시지** (플랫폼 메시지용, 300자 이내): +- 빠른 감사 인사 +- 핵심 질문 1~2개 (요구사항 구체화용) +- 미팅/통화 제안 +- 전문성 한 줄 어필 + +이 메시지는 **지금 바로 보낼 수 있는 수준**이어야 합니다. +플랫폼 응답률은 수주 확률에 직접 영향을 미치므로 속도가 중요합니다. + +--- + +## STAGE 2 — PM: 프로젝트 실현 가능성 & 일정 검토 + +현재 진행 중인 프로젝트와 리소스를 고려하여 판단합니다. + +``` +[실현 가능성 검토] +- 현재 진행 중 프로젝트: (있다면 병렬 가능 여부) +- 착수 가능 시점: (즉시 / X일 후) +- 원 지원서 대비 변경 사항: (금액·기간·범위 조정 필요 여부) +- 일정 리스크: (타이트한 부분, 의존성) +- Go / No-Go 판단: (수주 추천 / 조건부 추천 / 비추천 + 이유) +``` + +**조건부일 경우**: 어떤 조건이 충족되면 Go인지 명시 +**No-Go일 경우**: 거절 시 관계 유지 전략 포함 (향후 재의뢰 가능성) + +--- + +## STAGE 3 — Developer: 기술 사전 준비 체크 + +클라이언트의 추가 요구사항이나 변경 사항을 기술 관점에서 빠르게 검토합니다. + +``` +[기술 사전 검토] +- 원 지원서 기술 검토 유지 여부: (변경 없음 / 수정 필요) +- 추가 요구사항 기술 타당성: (가능 / 사전 검증 필요 / 불가) +- 공수 변동: (원 지원서 대비 ±X일, 이유) +- 사전에 확인해야 할 것: (기존 코드 접근, API 키, 테스트 환경 등) +- 킥오프 시 즉시 착수 가능한 작업: (환경 세팅, 스키마 설계 등) +``` + +--- + +## STAGE 4 — HR: 수주 클로징 전략 & CEO 브리핑 + +STAGE 1~3을 통합하여 최종 의사결정 자료를 만듭니다. + +**A. 클로징 전략** +``` +[수주 클로징 전략] +- 추천 접근법: (가격 유지 / 할인 제안 / 옵션 분리 / 단계별 제안) +- 협상 시나리오: + · 클라이언트가 가격 인하 요청 시 → (대응 전략 + 마지노선) + · 범위 추가 요청 시 → (분리 견적 or 패키지 업그레이드) + · 일정 단축 요청 시 → (가능 범위 + 추가 비용) +- 차별화 포인트: (경쟁 개발자 대비 우리가 앞서는 것) +- 클로징 멘트: (결정을 유도하는 마무리 문구) +``` + +**B. CEO 브리핑 (박재오에게)** +``` +[CEO 의사결정 요약] +- 프로젝트: [이름] +- 플랫폼: [위시캣/숨고/크몽] +- 제안 금액: X원 → 조정 금액: X원 +- 예상 공수: X일 +- 수주 추천도: ★★★★☆ (5점 중) +- 핵심 판단: (한 줄 — 왜 받아야/말아야 하는지) +- 다음 액션: (통화 예약 / 견적서 재발송 / 계약서 전달) +- ⚡ 긴급도: (지금 바로 / 오늘 중 / 내일까지) +``` + +**C. 수주 확정 시 → 킥오프 연결** +``` +수주가 확정되면 다음 커맨드를 실행하세요: +/kickoff [프로젝트명] — [고객명] — [계약금액] — [납기] +``` + +--- + +## 클라이언트 메시지 + +$ARGUMENTS diff --git a/CLAUDE.md b/CLAUDE.md index c6735d4..1d49bc0 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -79,6 +79,7 @@ app/ | 커맨드 | 실행 파이프라인 | 사용 시점 | |--------|----------------|-----------| | `/intake [문의내용]` | HR → PM → Developer → HR | 신규 고객 문의 접수 시 | +| `/followup [컨택내용]` | HR → PM → Developer → HR | 지원서에 클라이언트가 컨택 시 | | `/kickoff [프로젝트정보]` | PM → Developer → Designer → HR | 계약 확정 후 프로젝트 시작 시 | | `/weekly [이번주현황]` | PM → Evaluator → Marketing → PM | 매주 금요일 주간 리뷰 | | `/campaign [목적/아이디어]` | Marketing → Marketing(카피) → Designer → Marketing(실행) | 마케팅 캠페인 기획·실행 시 | diff --git a/app/services/automation/page.tsx b/app/services/automation/page.tsx index ab91e04..b5de640 100644 --- a/app/services/automation/page.tsx +++ b/app/services/automation/page.tsx @@ -1,9 +1,31 @@ 'use client'; -import { useState } from 'react'; +import { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import ContactModal from '../../components/ContactModal'; +function useScrollReveal() { + const ref = useRef(null); + useEffect(() => { + const el = ref.current; + if (!el) return; + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1, rootMargin: '0px 0px -40px 0px' } + ); + el.querySelectorAll('.reveal').forEach((child) => observer.observe(child)); + return () => observer.disconnect(); + }, []); + return ref; +} + const tools = [ { id: 'excel', @@ -163,6 +185,7 @@ const process = [ export default function AutomationPage() { const [modalOpen, setModalOpen] = useState(false); const [modalService, setModalService] = useState('업무 자동화'); + const containerRef = useScrollReveal(); const openModal = (service: string) => { setModalService(service); @@ -170,7 +193,22 @@ export default function AutomationPage() { }; return ( -
+
+ setModalOpen(false)} @@ -212,13 +250,13 @@ export default function AutomationPage() { {/* ─── 자동화 유형 ─── */}
-
+

AUTOMATION TYPES

자동화 유형

- {automationTypes.map((at) => ( -
+ {automationTypes.map((at, idx) => ( +
{at.title.split(' ')[0]}

{at.title}

{at.desc}

@@ -239,15 +277,15 @@ export default function AutomationPage() { {/* ─── 프로세스 ─── */}
-
+

PROCESS

진행 프로세스

- {process.map((p) => ( -
+ {process.map((p, idx) => ( +
STEP {p.step} @@ -264,13 +302,13 @@ export default function AutomationPage() { {/* ─── 예상 비용 ─── */}
-
+

PRICING

예상 비용

- {plans.map((plan) => ( -
( +
-
+
PREMIUM TOOLS @@ -313,9 +351,9 @@ export default function AutomationPage() {

전문 분야별 고급 자동화 프로그램. 구매 후 소스코드 전달 + 1개월 무상 지원.

- {premiumTools.map((tool) => ( + {premiumTools.map((tool, idx) => (
{/* 카드 헤더 */}
@@ -368,15 +406,15 @@ export default function AutomationPage() { {/* ─── 자동화 툴 무료 다운로드 ─── */}
-
+

FREE TOOLS

자동화 도구 무료 다운로드

직접 만들어 사용 중인 자동화 도구를 무료로 공유합니다.
필요에 맞게 수정해서 쓰실 수 있어요.

- {tools.map((tool) => ( + {tools.map((tool, idx) => (
+ className={`rounded-2xl border-2 p-5 flex flex-col relative reveal reveal-d${idx + 1}`}> {!tool.ready && (
준비중
)} @@ -411,7 +449,7 @@ export default function AutomationPage() { {/* ─── CTA ─── */}
-
+

FREE CONSULTATION

어떤 업무든 상담해보세요

자동화 가능한 업무라면 무엇이든 도와드립니다

diff --git a/app/services/prompt/page.tsx b/app/services/prompt/page.tsx index 14eb012..a220c91 100644 --- a/app/services/prompt/page.tsx +++ b/app/services/prompt/page.tsx @@ -1,10 +1,32 @@ 'use client'; -import { useState } from 'react'; +import { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import ContactModal from '../../components/ContactModal'; const KAKAO_CHANNEL_URL = process.env.NEXT_PUBLIC_KAKAO_CHANNEL_URL ?? null; +function useScrollReveal() { + const ref = useRef(null); + useEffect(() => { + const el = ref.current; + if (!el) return; + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1, rootMargin: '0px 0px -40px 0px' } + ); + el.querySelectorAll('.reveal').forEach((child) => observer.observe(child)); + return () => observer.disconnect(); + }, []); + return ref; +} + const CHECKLIST = [ '주로 어떤 AI 도구를 사용하는지 (ChatGPT / Claude / Gemini)', '자동화하고 싶은 업무 유형 (이메일 / 보고서 / 코드 등)', @@ -347,6 +369,7 @@ const examples = [ export default function PromptPage() { const [modalOpen, setModalOpen] = useState(false); const [modalService, setModalService] = useState('프롬프트 엔지니어링'); + const containerRef = useScrollReveal(); const openModal = (service: string) => { setModalService(service); @@ -354,7 +377,32 @@ export default function PromptPage() { }; return ( -
+
+ setModalOpen(false)} @@ -396,7 +444,7 @@ export default function PromptPage() { {/* ─── 프리미엄 상품 ─── */}
-
+
PREMIUM PRODUCTS @@ -405,10 +453,10 @@ export default function PromptPage() {

전문가가 직접 설계하고 검증한 완성형 프롬프트 패키지 — 구매 즉시 사용 가능

- {premiumProducts.map((product) => ( + {premiumProducts.map((product, idx) => (
{/* 헤더 */} @@ -505,13 +553,13 @@ export default function PromptPage() { {/* ─── Before/After ─── */}
-
+

BEFORE vs AFTER

이런 차이가 납니다

- {examples.map((ex) => ( -
+ {examples.map((ex, idx) => ( +
{ex.type} 예시 {ex.improvement} @@ -543,13 +591,13 @@ export default function PromptPage() { {/* ─── 활용 분야 ─── */}
-
+

USE CASES

활용 분야

{useCases.map((uc, i) => ( -
+
{String(i + 1).padStart(2, '0')} @@ -568,13 +616,13 @@ export default function PromptPage() { {/* ─── 요금제 ─── */}
-
+

PRICING

요금제

- {plans.map((plan) => ( -
( +
-
+

GET STARTED

AI를 제대로 활용하고 싶다면

업무 분석 인터뷰 → 맞춤 설계 → 가이드 제공

diff --git a/app/tools/layout.tsx b/app/tools/layout.tsx new file mode 100644 index 0000000..70135e3 --- /dev/null +++ b/app/tools/layout.tsx @@ -0,0 +1,16 @@ +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: '여긴 뭐 만들어요? — 자동화 도구 쇼케이스 | 쟁승메이드', + description: + '실제 고객 프로젝트 기반 자동화 도구를 직접 체험해보세요. 이베이 부품 AI 리스팅, 네이버 블로그 자동화 등 완성형 데모를 무료로 제공합니다.', + openGraph: { + title: '여긴 뭐 만들어요? — 자동화 도구 쇼케이스', + description: + '수작업 30분 → 10초. 실제로 작동하는 자동화 도구를 직접 체험해보세요.', + }, +}; + +export default function ToolsLayout({ children }: { children: React.ReactNode }) { + return children; +} diff --git a/app/tools/page.tsx b/app/tools/page.tsx index 9aa86f4..870065e 100644 --- a/app/tools/page.tsx +++ b/app/tools/page.tsx @@ -1,7 +1,17 @@ 'use client'; +import { useEffect, useRef } from 'react'; import Link from 'next/link'; +/* ═══════════════════════════════════════════════════ + 도구 쇼케이스 — 리디자인 v2 + 설계 원칙: + 1. 홈 페이지 에디토리얼 톤 계승 — 증거 중심, 텍스트 우선 + 2. Supanova: 비대칭 레이아웃, 스크롤 애니메이션, 프리미엄 카드 + 3. 사이트 디자인 시스템 완전 통일 (라이트 bg + 다크 카드) + 4. 실제 수치와 체험 유도 — 전환율 중심 구조 +═══════════════════════════════════════════════════ */ + interface ToolCard { id: string; title: string; @@ -10,8 +20,10 @@ interface ToolCard { tags: string[]; href: string; status: 'live' | 'beta' | 'coming'; - icon: React.ReactNode; gradient: string; + iconPath: string; + metric: { value: string; label: string }; + highlight: string; } const TOOLS: ToolCard[] = [ @@ -20,138 +32,347 @@ const TOOLS: ToolCard[] = [ title: '이베이 부품 AI 리스팅', subtitle: 'eBay Auto Parts Listing Tool', description: - '품번 하나 입력하면 AI가 RockAuto·eBay를 크롤링하고, 리스팅 제목·Fitment·관세까지 자동 생성합니다. 수작업 30분 → 10초.', + '품번 하나 입력하면 AI가 RockAuto·eBay를 크롤링하고, 리스팅 제목·Fitment·관세까지 자동 생성합니다.', tags: ['크롤링', 'Claude AI', '관세 계산', 'eBay Motors'], href: '/tools/ebay-parts', status: 'live', - icon: ( - - - - - ), gradient: 'from-blue-600 to-cyan-500', + iconPath: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', + metric: { value: '10초', label: '30분 작업 → 10초로 단축' }, + highlight: '수작업 대비 180배 빠름', }, { id: 'naver-blog', title: '네이버 블로그 자동화', subtitle: 'Naver Blog AI Writer', description: - '주제·톤·분량만 선택하면 AI가 SEO 최적화된 블로그 글을 자동 작성합니다. 소제목 구조, 이미지 배치 가이드까지 한 번에.', + '주제·톤·분량만 선택하면 AI가 SEO 최적화된 블로그 글을 자동 작성합니다. 소제목 구조, 이미지 배치 가이드까지.', tags: ['GPT/Claude', 'SEO 최적화', '자동 포스팅', '이미지 가이드'], href: '/tools/naver-blog', status: 'live', - icon: ( - - - - ), gradient: 'from-emerald-600 to-teal-500', + iconPath: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z', + metric: { value: '3분', label: '1시간 글쓰기 → 3분 자동 완성' }, + highlight: 'SEO 최적화 자동 포함', }, ]; const STATUS_BADGE: Record = { - live: { label: '체험 가능', className: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30' }, - beta: { label: 'BETA', className: 'bg-amber-500/15 text-amber-400 border-amber-500/30' }, - coming: { label: '준비 중', className: 'bg-slate-500/15 text-slate-400 border-slate-500/30' }, + live: { label: '체험 가능', className: 'bg-emerald-50 text-emerald-700 border-emerald-200' }, + beta: { label: 'BETA', className: 'bg-amber-50 text-amber-700 border-amber-200' }, + coming: { label: '준비 중', className: 'bg-slate-100 text-slate-500 border-slate-200' }, }; +const PROCESS_STEPS = [ + { step: '01', title: '문제 정의', desc: '고객의 반복 업무를 분석합니다' }, + { step: '02', title: '자동화 설계', desc: 'AI + 크롤링 + API 조합을 설계합니다' }, + { step: '03', title: '프로토타입', desc: '실제 데이터로 동작하는 MVP를 만듭니다' }, + { step: '04', title: '체험 배포', desc: '이 페이지에 데모를 올려 직접 테스트합니다' }, +]; + +function useScrollReveal() { + const ref = useRef(null); + + useEffect(() => { + const el = ref.current; + if (!el) return; + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.15, rootMargin: '0px 0px -40px 0px' } + ); + + const children = el.querySelectorAll('.reveal'); + children.forEach((child) => observer.observe(child)); + + return () => observer.disconnect(); + }, []); + + return ref; +} + export default function ToolsShowcasePage() { + const containerRef = useScrollReveal(); + return ( -
- {/* Hero */} -
-
- - - - 실제로 작동하는 완성형 데모 +
+ {/* ── Scroll-reveal animation styles ── */} + + + {/* ═══════════════════════════════════════════ + HERO — 좌측 텍스트 / 우측 수치 비대칭 레이아웃 + ═══════════════════════════════════════════ */} +
+
+ {/* 좌측: 텍스트 블록 */} +
+
+ + 실제로 작동하는 완성형 데모 +
+

+ 여긴 뭐 만들어요? +

+

+ “이런 것도 자동화돼요?” — 직접 체험해보세요. + 아래 도구들은 실제 고객 프로젝트를 기반으로 제작된 완성형 레퍼런스입니다. +

+
+ + {/* 우측: 수치 카드 */} +
+
+
+
+
{TOOLS.filter(t => t.status === 'live').length}개
+
라이브 도구
+
+
+
180x
+
최대 속도 향상
+
+
+
무료
+
데모 체험
+
+
+
즉시
+
결과 확인
+
+
+
+
-

- 여긴 뭐 만들어요? -

-

- “이런 것도 자동화돼요?” — 직접 체험해보세요.
- 아래 툴들은 실제 고객 프로젝트를 기반으로 제작된 완성형 레퍼런스입니다. -

- {/* Tool Cards */} + {/* ═══════════════════════════════════════════ + TOOL CARDS — 피처드 카드 (풀와이드) 패턴 + ═══════════════════════════════════════════ */}
-
- {TOOLS.map((tool) => { +
+ {TOOLS.map((tool, idx) => { const badge = STATUS_BADGE[tool.status]; + const isEven = idx % 2 === 1; + return ( - {/* Gradient header */} -
- -
- {/* Icon + Badge */} -
-
- {tool.icon} +
+ {/* 좌측 (또는 우측): 메트릭 비주얼 */} +
+ {/* 배경 패턴 (모바일 숨김) */} +
+
+
+
+ + {/* 모바일: 수평 compact / 데스크톱: 수직 */} +
+
+ + + +
+ +
+
+ {tool.metric.value} +
+

{tool.metric.label}

+
- - {badge.label} -
- {/* Title */} -

- {tool.title} -

-

{tool.subtitle}

+ {/* 우측 (또는 좌측): 콘텐츠 */} +
+
+ {/* 상단: 배지 + 하이라이트 */} +
+ + {badge.label} + + + {tool.highlight} + +
- {/* Description */} -

- {tool.description} -

+ {/* 제목 */} +

+ {tool.title} +

+

{tool.subtitle}

- {/* Tags */} -
- {tool.tags.map((tag) => ( - - {tag} - - ))} -
+ {/* 설명 */} +

+ {tool.description} +

- {/* CTA */} -
- 체험하기 - - - + {/* 태그 */} +
+ {tool.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + {/* CTA */} +
+ 직접 체험하기 + + + +
); })}
+
- {/* Bottom CTA */} -
-

우리 업무에도 이런 자동화가 가능할까?

-

- 위 데모를 참고해 원하시는 자동화를 구체적으로 의뢰하세요. 무료 상담부터 시작합니다. -

- - 무료 상담 신청하기 - - - - + {/* ═══════════════════════════════════════════ + PROCESS — 어떻게 만들어지나? (수직 타임라인) + ═══════════════════════════════════════════ */} +
+
+

도구는 이렇게 만들어집니다

+

고객의 반복 업무가 자동화 도구로 바뀌는 4단계

+
+ +
+ {PROCESS_STEPS.map((item, idx) => ( +
+ {/* 스텝 카드 */} +
+
+ + {item.step} + + {idx < PROCESS_STEPS.length - 1 && ( +
+ + + +
+ )} +
+

{item.title}

+

{item.desc}

+
+
+ ))} +
+
+ + {/* ═══════════════════════════════════════════ + BOTTOM CTA — 풀블리드 전환 섹션 + ═══════════════════════════════════════════ */} +
+
+ {/* 배경 데코 */} +
+
+
+
+ +
+
+

+ 우리 업무에도 이런 자동화가 가능할까? +

+

+ 위 데모를 참고해 원하시는 자동화를 구체적으로 의뢰하세요. 반복하는 업무가 있다면, 도구로 만들 수 있습니다. +

+
+ + 무료 상담 신청하기 + + + + + + +
+ + {/* 하단 신뢰 요소 */} +
+
+ + + + 상담 무료 +
+
+ + + + 계약서 선행 +
+
+ + + + 소스코드 전체 이관 +
+