- /services/music/samples 신규: 6개 장르 샘플 갤러리 + 구매 CTA
- 음악 페이지 #samples 섹션: 가장 인기 1개(featured)만 노출 + 갤러리 링크
- TopNav/Hero 보조 CTA '샘플' → /services/music/samples 로 통일
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 로또 서비스 페이지: 토스 정책으로 숨겼던 페이지를 PortOne 전환에 맞춰 복원
- 사주 상세 해석 가격: 4,900원 → 1,000원 (lib/products.ts, UI, schema.sql)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 사이드바: AI상품/무료도구/외주의뢰 3그룹 구조로 개편 (ARIA 시맨틱)
- 홈페이지: AI 상품 중심 재작성 (히어로+상품카드+무료도구+외주축소)
- SEO: 메타데이터·OG태그·JSON-LD를 AI 상품 포지셔닝으로 변경
- 프롬프트 페이지: 프리미엄 상품 5개에 PortOne PaymentButton 연결
- AI 키트 페이지: 월 구독 CTA 2곳에 PaymentButton 연결
- 사주: 유료 전환 복원(4,900원) + PaymentButton 연결
- 코드 품질: 인라인 스타일→globals.css, emoji→SVG, 미사용 데이터 제거
- DB 마이그레이션 005: 전체 18개 상품 등록 SQL 추가
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- lib/gtag.ts: GA4 이벤트 유틸리티 (trackCTAClick, trackToolDemo, trackDownload, trackOutboundClick)
- ContactModal/ContactForm: 공용 trackEvent로 리팩토링 + generate_lead 이벤트
- 홈/tools/automation/prompt/website: CTA 클릭 이벤트 추적 추가
- 홈/freelance/ai-kit: IntersectionObserver 스크롤 리빌 애니메이션 신규 추가
- automation/prompt: GA4 trackCTAClick 적용
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
[DB]
- supabase/migrations/002_project_milestones.sql 추가
quotes.user_id 컬럼 + project_milestones 테이블 생성 SQL
[API]
- GET /api/projects — 로그인 사용자의 프로젝트+마일스톤 조회
- POST /api/projects/link — 견적서 토큰으로 계정에 프로젝트 연결
- GET/POST /api/admin/milestones — 관리자 마일스톤 목록/기본 7단계 초기화
- PATCH/DELETE /api/admin/milestones/[id] — 관리자 단계별 상태·메모 업데이트
[UI — 마이페이지]
- '프로젝트 현황' 탭 신규 추가 (Tab type 확장)
- 진행률 바, 단계별 타임라인, 개발자 메모 표시
- 견적서 코드 입력 → 계정 연결 폼
[UI — 관리자 견적서 편집]
- '진행 단계' 탭 추가: 기본 7단계 초기화, 단계별 status/메모 편집
[마케팅 카피]
- page.tsx PROMISES 4번째 추가: "진행 현황 마이페이지 실시간 확인"
- freelance 보증 카드 5번째 추가: 실시간 진행 현황 (그리드 2×5)
- services/website trust badge 5번째 추가
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- page.tsx: 홈 서비스 목록 website 가격 50만원→20만원, 기간 7일→3일 (실제 페이지와 일치)
이벤트 배너 AI 자동화→스타터 20% 할인 (주력 서비스와 방향 통일)
- services/website: FAQ 3→5개 (앱/모바일 개발 가능 여부, 계약금·취소 방식 추가)
- freelance: 웹사이트 제작 포트폴리오 1건 추가 (기업 브랜드 홈페이지·Next.js)
자동화 4건만 있던 포트폴리오에 웹 개발 사례 보강
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- services/website: 하단 CTA 그라디언트→솔리드+대각 패턴, 방사형 오브 제거
CTA 카피 "지금 바로 시작하세요"→"내일도 고민만 하실 건가요?" 전환 강화
CTA 버튼·스크롤탑 버튼 linear-gradient→#6366f1 솔리드
모바일 반응형 CSS 블록 추가 (portfolio/process/pricing/hero 1컬럼)
Hero 타이틀·배지 웹앱·앱 개발 포함 문구로 확장
- page.tsx: 서비스카드 가격/기간 hidden sm:flex→항상 표시 (모바일 대응)
- freelance: 개발자 기술 배지 hidden sm:flex→flex flex-wrap (모바일 표시)
후기 그리드 md:grid-cols-3→sm:grid-cols-2 md:grid-cols-3
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
결제 방식 변경:
- ai-kit: PaymentButton 2개 → KAKAO_CHANNEL_URL 있으면 카카오버튼,
없으면 ContactModal로 폴백. 가격(19,900원/월) 표시 유지
- prompt: PaymentButton → 카카오버튼 or openModal() 호출로 교체
문의 시 샘플 파일 미리 제공 안내 유지
- saju: AI 해석 hasPaid=true 고정 → 무료 제공으로 전환
사주 페이지 결제 버튼 → '무료로 사주 분석하기' 링크
SajuAISection PaymentButton → 비활성화 주석 처리
환경변수 추가 (선택):
- NEXT_PUBLIC_KAKAO_CHANNEL_URL: 카카오 채널 채팅 링크
- NEXT_PUBLIC_TOSS_ME_URL: toss.me 개인 송금 링크
- 토스페이먼츠 PG 키 주석 처리 (재활성화 시 해제 가능)
사주 hero AI 패턴 제거:
- radial gradient orb 3개, blur 배경 → diagonal pattern
- 그래디언트 텍스트 → amber-400 단색
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Sidebar: 'v2' 배지 제거, '박재오의 개발 공방' 태그라인으로 정체성 명확화,
로그인 버튼 → 'AI 사주·키트 이용 시 필요' 안내 텍스트로 교체
- automation: automationTypes 6개 설명을 기능 나열 → 고객 고통 시나리오 중심으로 재작성
- website: samples 8개 desc을 '추상적 형용사' → '"고객 문제 → 해결"' 구조로 전환
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Before/After 수치 기반 마케팅 카피 전략 적용:
- Hero: "월 27시간 낭비" 고통 소구로 교체 → 기회비용 프레이밍
- 시간 낭비 가시화 섹션: 도구별 Before/After 바 차트 + 월 409,000원 손실 계산
- 실패 비용 섹션: 수작업 시 발생하는 실제 손실 케이스 6개 (계약 취소, 알고리즘 패널티 등)
- 도구 카드: 인라인 Before/After 수치 표시 (15분 → 40초 등)
- 타겟별 Pain-Gain 카드: 직장인/소상공인/판매자/마케터 고통 → 결과 포맷
- CTA 카피: "월 19,900원 vs 월 409,000원어치 시간 낭비" 대비 구조
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- app/services/ai-kit/page.tsx: AI 자동화 월 구독 키트 서비스 페이지 신규 생성 (19,900원/월)
- 6종 자동화 도구(업무일지·이메일·매출분석·SNS·회의록·상품설명) 소개
- PaymentButton 결제 연동, 후기·FAQ·CTA 포함
- lib/products.ts: 신규 상품 7종 추가
- prompt_image_gen(12,900) / prompt_resume(9,900) / prompt_email(10,900)
- prompt_marketing(12,900) / prompt_report(10,900) / ai_kit_monthly(19,900)
- app/services/prompt/page.tsx: 프리미엄 패키지 CTA를 ContactModal → PaymentButton으로 교체
- app/components/Sidebar.tsx: AI 자동화 키트 메뉴 항목 추가 (NEW 배지)
- app/page.tsx: SUBSCRIPTION_SERVICES에 AI 자동화 키트 항목 추가
- app/admin/dashboard/page.tsx: 월 100만원 목표 수익 추적 카드(MonthlyGoalCard) 추가
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Sidebar navItems에서 로또·주식 제거
- 홈 PROOF_SERVICES·SUBSCRIPTION_SERVICES에서 제거
- /services/lotto, /services/stock → 홈으로 redirect
- 원본 페이지 코드는 git 기록에 보존
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 프롬프트 엔지니어링 페이지에 비즈니스 이메일/마케팅 카피/업무 보고서 패키지 3종 추가
- 각 상품 할인가(10,900~12,900원), 7가지 기능 설명, 프롬프트 미리보기 포함
- 마케팅 SVG 에셋 8개 전면 재작성:
- 이모지 제거 → SVG path 기반 아이콘으로 교체
- 배경에 유기적 bezier 곡선 블롭 형태 추가
- 자동화 플로우 직선 연결 → 곡선 bezier path로 교체
- 로또 공 3D 하이라이트/그림자 강화
- 주식 차트 polyline → smooth bezier 곡선 개선
- 말풍선 꼬리 path 추가로 자연스러운 대화 표현
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[SEO 인프라]
- app/sitemap.ts: Next.js App Router 사이트맵 자동 생성 (/sitemap.xml)
- app/robots.ts: 크롤러 허용/차단 규칙 + 사이트맵 경로 등록
- app/layout.tsx: JSON-LD 구조화 데이터 추가 (Person + LocalBusiness + OfferCatalog 스키마)
- GA4 config 업데이트 (send_page_view, custom_map)
[서비스 페이지 SEO 메타태그 강화]
- automation: 'AI 업무 자동화 외주' 키워드 12종 최적화
- prompt: 'ChatGPT 프롬프트 잘 쓰는 법', '이미지 생성 프롬프트' 등 구매형 키워드 추가
- website: '소상공인 홈페이지 제작 외주', '홈페이지 제작 비용' 등 롱테일 키워드 추가
[GA 이벤트 트래킹]
- ContactModal: contact_attempt / generate_lead / contact_error 이벤트 추가
(전환 추적 핵심 — 어떤 서비스에서 문의가 오는지 GA에서 확인 가능)
[홈페이지 콘텐츠 위젯]
- 'AI 자동화 실전 팁' 블로그 포스트 3종 카드 섹션 추가 (블로그 연동 준비)
[콘텐츠 자산 (CONTENT/ 폴더)]
- brand-story.md: 풀/숏/초단문/유튜브 채널 소개용 4종 브랜드 스토리 원고
- youtube-scripts.md: 유튜브 숏츠 스크립트 10편 (훅→문제→시연→CTA 구조)
- sns-calendar.md: 30일 SNS 포스팅 캘린더 (블로그·스레드·카카오·블라인드 채널별)
- blog-drafts.md: 네이버 블로그 SEO 초안 10편 (키워드·소제목·본문 완성)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
경력 연수 강조에서 포지션/현재성 강조로 카피 방향 전환.
숫자(7)에 의존하는 문구 대신 '현직 대기업'이 최신 기술 역량과
신뢰를 더 직접적으로 전달함.
대상 파일: app/layout.tsx, app/page.tsx, app/freelance/layout.tsx,
app/services/prompt/page.tsx, MARKETING.md, README.md
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- automation/page.tsx: 부동산 크롤러·회계 자동화 프리미엄 섹션 UI 추가
- accounting_automation_v1.0.py: 사업장 회계 장부 자동화 프로그램 생성
(5개 업종·19개 지출 항목·손익계산서·분기요약·부가세 자료 등 5시트 Excel 보고서)
- prompt/page.tsx: 이미지 생성 프롬프트 패키지(45,000원) + 자소서·이력서 첨삭 프롬프트(35,000원) 상품 추가
(다크 그라디언트 카드, 실제 프롬프트 미리보기, ContactModal 연결)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- lib/security.ts: escapeHtml, isValidEmail, sanitizeStr, checkRateLimit 유틸 추가
- next.config.ts: 보안 헤더 적용 (X-Frame-Options, HSTS, Permissions-Policy 등)
- api/contact: XSS 방어, Rate Limit(5/min), 입력 길이 제한
- api/payment/confirm: 사용자 인증·소유권 검증, 타입 체크, 에러 메시지 정제
- api/admin/quotes: PUT 허용 필드 화이트리스트 적용
- api/saju/analyze: 로그인·결제 검증, 입력 크기 제한, gender 값 검증
- public/downloads/web_scraper_v1.0.py: requests+BS4+openpyxl 웹 크롤러
- public/downloads/ppt_automation_v1.0.py: python-pptx+openpyxl PPT 자동화
- app/services/automation/tools/scraper: 크롤러 상세 페이지 추가
- app/services/automation/tools/ppt: PPT 도구 상세 페이지 추가
- app/services/automation/page.tsx: scraper ready=true, email→PPT 교체
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- SampleMiniPreview 컴포넌트 추가: 700×350px 레이아웃을 scale(0.5)로 축소
- 8개 샘플별 실제 페이지 디자인 언어를 그대로 재현
- corporate: 화이트 배경, 네이비 Nav, 그리드 패턴, 통계 수치
- bakery: 크림 배경, 세리프 로고, 앰버 버튼, 베이커리 메뉴 카드
- portfolio: 블랙 배경, 네온 그린 타이포, 아바타 카드
- dashboard: 다크 슬레이트, 사이드바, 통계 카드, 막대 차트
- game: 블랙+사이버 보라/청록, 챔피언 카드 그리드
- interior: 다크 브라운 Nav, 스플릿 레이아웃, 인테리어 이미지 그리드
- reading: 다크 웜, 골드 세리프, 책등 스택 시각화
- shopping: 페이퍼 배경, 에디토리얼 히어로, 미니 상품 그리드
- 기존 아이콘 + 단색 그라디언트 → 실제 페이지처럼 보이는 CSS 프리뷰로 교체
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
products.ts — 7개 상품 신규 등록:
- prompt_team (249,000원): 팀/기업 프롬프트 패키지
- automation_basic (50,000원): 단순 업무 자동화
- automation_advanced (150,000원): 자동화 심화
- website_starter (200,000원): 홈페이지 스타터
- website_business (1,000,000원): 홈페이지 비즈니스
- website_premium (2,000,000원): 홈페이지 프리미엄
PaymentButton — style prop 추가 (inline-style 페이지 대응)
프롬프트 서비스: 팀/기업 패키지 PaymentButton 연결
업무 자동화: 단순·심화 플랜 PaymentButton 연결 (대형은 협의가격→ContactModal 유지)
웹사이트 제작: 전 플랜 Link 버튼 → PaymentButton 전환
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- interior/shopping 샘플 페이지의 * {} CSS 리셋이 사이드바 포함
전체 DOM을 오염시키던 문제 수정
- .au-page / .ml-page 클래스로 스코프 한정:
*, *::before, *::after → .au-page *, .ml-page * 로 변경
- 쇼핑몰 이미지: Unsplash CDN → picsum.photos 교체 (항상 안정 로드)
seed 기반으로 일관된 이미지 유지
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 모든 샘플 페이지 우측 하단 맨 위로 스크롤 버튼 추가 (인테리어, 독서)
- 독서 기록 노트 상단 '홈페이지 제작 서비스로 돌아가기' 배너 추가
- 개인 쇼핑몰 샘플 (MELLOW STUDIO) 신규 생성
- 베이지/크림 라이트 톤, Cormorant Garamond + Pretendard
- 히어로 스플릿 레이아웃, 상품 그리드(카테고리 필터), 브랜드 스토리, 리뷰, CTA, 푸터
- 장바구니 뱃지, 상품 찜하기, 퀵 장바구니 인터랙션
- 홈페이지 서비스 소개 페이지 재디자인
- CookieRun → Pretendard 교체로 한글 폰트 렌더링 개선
- word-break: keep-all 적용으로 이상한 개행 제거
- IntersectionObserver 스크롤 reveal 애니메이션 추가
- Trust badge 섹션, Marquee 추가
- 쇼핑몰 샘플 카드 추가
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[Root cause 3가지]
1. 스크롤 이벤트 타깃 오류
- window.scroll → .main-content (overflow-y:auto) 로 수정
- DashboardShell의 내부 스크롤 컨테이너를 querySelector로 탐색
2. 히어로 높이 오류
- height:100dvh → calc(100dvh - 40px - 72px)
- 배너(40px) + 네비(72px) 이후 남은 뷰포트를 정확히 채움
3. 스크롤 텍스트 transform 충돌
- top:50%; transform:translateY(-50%) 위치지정 제거
- au-scrub-text를 inset:0 flex 레이아웃으로 변경
- JS는 opacity+filter만 갱신 (transform 불변)
[추가 개선]
- nav: 히어로 위에서 투명, 스크롤 후 cream 배경+blur 전환
- 스크롤 섹션 초기 onScrub() 즉시 호출로 첫 텍스트 표시
- IntersectionObserver root를 .main-content로 지정
- 마일스톤 2 data-end="1.01" (경계값 처리)
- 전체 페이지 코드 정리 및 중복 제거
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 히어로: MP4 풀스크린 비디오 배경 (autoplay/muted/loop), 초기 8초 drift 애니메이션
- 스크롤 섹션(380vh): 48장 WebP 프레임 스크러빙 (Apple 스타일)
- 스크롤 위치에 따라 캔버스에 프레임 렌더링 (requestAnimationFrame)
- 3단계 텍스트 오버레이 (공간 철학 / 실적 / CTA) DOM 직접 조작
- 하단 진행 바 실시간 업데이트
- 6fps WebP 48프레임 추출 (libwebp, quality 82) → 총 1.3MB
- 모든 이미지 cover-fit 캔버스 렌더링
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
picsum 플레이스홀더 → 실제 인테리어 이미지 7장으로 교체:
- 히어로, 포트폴리오 벤토 4컷, 서비스 지그재그 3컷
- Pinterest 이미지 + Lunalight Studios 조명 이미지 적용
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- bakery: 이모지 → SVG 빵/셰프 일러스트, 고객 리뷰 섹션, 시즌 스페셜 섹션, 재료 태그 추가
- portfolio: 수상내역 마퀴 배너, 서비스 섹션, 프로젝트 카테고리 필터+호버 오버레이, 클라이언트 후기 추가
- dashboard: SVG 라인 차트, KPI 스파크라인, 알림 패널, 도넛 차트, 사용자 아바타 테이블 개선
- game: 챔피언 선택 섹션, 시즌 패스 진행 바, 최근 매치 히스토리, 파티클 배경, 티어 SVG 배지
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 홈페이지 제작: 50→20만, 150→100만, 300→200만원
- 업무 자동화: 10→5만, 중간→자동화심화 15만원 (이름 변경 포함)
- 주식 자동매매: 스타터 99→49k/29→9.9k, 프로 199→99k/49→29k
- 홈 서비스 카드 가격 동기화 (stock, automation)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 관리자 견적서 CRUD (WBS/항목/향후관리/특이사항 5탭 편집기)
- 고객용 공개 견적서 페이지 (optional 항목 선택 + 실시간 총액 + 수락)
- 마케팅 SVG 에셋 6종 (썸네일 5개 + 배너 1개) + 관리자 에셋 페이지
- 전체 카피 강화: 크레덴셜 제거 → URL증거/환불보장/계약서/납기패널티 중심
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- _nas.ts: AbortSignal timeout 10s → 25s (NAS 무거운 연산 대응)
- stats/performance, report/latest, report/history: maxDuration = 60 추가 (Vercel 함수 타임아웃 연장)
- ReportTab: 에러 응답({error:"NAS_TIMEOUT"}) 받을 시 렌더 전 차단, confidence_factors null guard 추가
- PurchaseTab: API 에러 응답 감지 후 조용히 빈 상태 유지
- PatternTab: 에러 응답 감지 후 에러 메시지 표시
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 플랜 등급 유틸리티 (PLAN_RANK, planGte) 추가
- 탭 네비게이션: 골드 미만 → 공략/구매 탭 🔒 잠금, 플래티넘 미만 → 패턴 탭 💎 PLATINUM+ 뱃지
- 내 패턴 탭: 플래티넘 미만 접속 시 업그레이드 유도 카드 표시
- 비구독자 업셀 UI 전면 개편: 잠금 오버레이 → 골드/플래티넘/다이아 플랜 기능 미리보기 카드
- 로또 서비스 소개 페이지: 9개 기능 행 x 3개 플랜 비교표 추가 (요금제 섹션 위)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- NAS 프록시 공통 헬퍼 (_nas.ts): nasGet/Post/Put/Delete + requireSubscription
- API 라우트 7개: stats/performance, report/latest, report/history, analysis/personal, purchase CRUD
- ReportTab: 주간 공략 리포트 (신뢰도, 추천 세트, 핫/콜드 번호, 히스토리)
- PurchaseTab: 구매 기록 CRUD + 투자 통계 (총구매/당첨금/순손익/최대당첨)
- PatternTab: 개인 번호 패턴 분석 (자주 선택/기피 번호, 구간 분포)
- 성과 배너: 실제 검증 통계 (3개 이상 일치율, 평균 일치 개수, 무작위 대비 개선율)
- 탭 네비게이션: 구독자 전용 (번호 생성/이번 주 공략/구매 기록/내 패턴)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
NEXT_PUBLIC_CDN_URL 환경변수로 다운로드 경로 관리
- Cloudflare Tunnel + NAS nginx 서버 연동 예정
- 미설정 시 상대경로(/downloads/...) 폴백
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- app/services/website/page.tsx: Google Fonts (Syne, Noto Sans KR) 제거
→ 사이트 공통 폰트 CookieRun으로 교체, @import 제거
- app/services/automation/page.tsx: 자동화 도구 무료 다운로드 섹션 추가
- 엑셀 자동화 도구(배포), 웹 스크래핑·이메일 자동화(준비중) 카드
- 각 카드 → 상세 서브페이지 링크 연결
- app/services/automation/tools/excel/page.tsx: 신규 생성
- 엑셀 매크로 툴킷 상세 페이지 (기능 6가지, 사용법, 미리보기 목업, FAQ)
- 무료 다운로드 버튼 (/downloads/Excel_Macro_Toolkit_v1.2.xlsm)
- 맞춤 개발 문의 CTA
- public/downloads/: 다운로드 파일 배치 디렉토리 생성
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
