From 4cd4a50869bcb5ed08bde33d55b00aae9b71670c Mon Sep 17 00:00:00 2001 From: gahusb Date: Sat, 13 Jun 2026 00:57:38 +0900 Subject: [PATCH] =?UTF-8?q?feat(home):=20Deep=20Field=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=20=EC=BA=94=EB=B2=84=EC=8A=A4=20=EC=9E=AC=EC=A1=B0=EB=A6=BD=20?= =?UTF-8?q?+=20=EC=9A=B4=EC=98=81=20=EC=8B=A4=EC=A6=9D=20=EC=B9=B4?= =?UTF-8?q?=ED=94=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - HERO/SHOWCASE/PROCESS/PROOF/SOFTWARE+CTA 5섹션 다크(--jsm-dark-bg) 재구성 - HeroField WebGL 배경 + -mt-16/pt-16로 상단 라이트 띠 제거 (PublicShell 무수정) - "생각을 동작하는 소프트웨어로." 거대 타이포(clamp, -0.04em) - 경력·소속 표현 전면 제거 → "24시간 돌아가는 실서비스 직접 설계·운영" 신뢰 축 - CountUp 카운트업 스탯 + 스크롤 큐 keyframes(motion-safe 가드) - layout metadata·jsonLd 카피 동일 톤 교체 (jobTitle "소프트웨어 엔지니어") Co-Authored-By: Claude Opus 4.8 --- app/components/deepfield/CountUp.tsx | 76 +++ app/globals.css | 14 + app/layout.tsx | 15 +- app/page.tsx | 822 ++++++++++++++------------- 4 files changed, 536 insertions(+), 391 deletions(-) create mode 100644 app/components/deepfield/CountUp.tsx diff --git a/app/components/deepfield/CountUp.tsx b/app/components/deepfield/CountUp.tsx new file mode 100644 index 0000000..30bfa95 --- /dev/null +++ b/app/components/deepfield/CountUp.tsx @@ -0,0 +1,76 @@ +'use client'; + +import { useEffect, useRef, useState } from 'react'; + +interface Props { + /** 카운트업 목표 숫자 */ + to: number; + /** 숫자 앞에 붙는 고정 텍스트 (예: 없음) */ + prefix?: string; + /** 숫자 뒤에 붙는 고정 텍스트 (예: '+') */ + suffix?: string; + /** 애니메이션 길이(ms) — 기본 600 */ + duration?: number; + className?: string; +} + +/** + * IntersectionObserver 진입 시 0 → to 로 카운트업. + * prefers-reduced-motion이면 즉시 최종값 표시(연출 생략). + * transform/opacity가 아닌 textContent 변경이라 레이아웃 안정 위해 tabular-nums 권장. + */ +export default function CountUp({ to, prefix = '', suffix = '', duration = 600, className }: Props) { + const ref = useRef(null); + const [value, setValue] = useState(0); + + useEffect(() => { + const el = ref.current; + if (!el) return; + + let rafId = 0; + let started = false; + const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + const run = () => { + // reduced-motion: 즉시 최종값 (연출 생략) + if (reduced) { + setValue(to); + return; + } + const start = performance.now(); + const tick = (now: number) => { + const t = Math.min((now - start) / duration, 1); + // easeOutCubic — 끝에서 부드럽게 안착 + const eased = 1 - Math.pow(1 - t, 3); + setValue(Math.round(eased * to)); + if (t < 1) rafId = requestAnimationFrame(tick); + }; + rafId = requestAnimationFrame(tick); + }; + + const io = new IntersectionObserver( + (entries) => { + if (entries[0]?.isIntersecting && !started) { + started = true; + run(); + io.disconnect(); + } + }, + { threshold: 0.4 }, + ); + io.observe(el); + + return () => { + io.disconnect(); + if (rafId) cancelAnimationFrame(rafId); + }; + }, [to, duration]); + + return ( + + {prefix} + {value.toLocaleString('ko-KR')} + {suffix} + + ); +} diff --git a/app/globals.css b/app/globals.css index 779dc1e..ee701df 100644 --- a/app/globals.css +++ b/app/globals.css @@ -253,6 +253,20 @@ body { mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } +/* ─── Deep Field 히어로 스크롤 큐 (가는 세로선 안의 점 미세 바운스) ─── */ +@keyframes df-scroll-cue { + 0%, 100% { transform: translateY(0); opacity: 0.35; } + 50% { transform: translateY(8px); opacity: 1; } +} +.df-scroll-dot { + animation: none; +} +@media (prefers-reduced-motion: no-preference) { + .df-scroll-dot { + animation: df-scroll-cue 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite; + } +} + /* Scrollbar styling */ ::-webkit-scrollbar { width: 6px; diff --git a/app/layout.tsx b/app/layout.tsx index 230edd4..f5c4cb4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -10,7 +10,7 @@ export const metadata: Metadata = { template: "%s | 쟁승메이드", }, description: - "7년차 대기업 백엔드 개발자가 직접 설계하고 만듭니다. 맞춤 소프트웨어 외주 개발과 검증된 완성 소프트웨어를 제공하는 쟁승메이드.", + "24시간 돌아가는 실서비스를 직접 설계·운영하는 개발 스튜디오. 맞춤 외주 개발과 검증된 완성 소프트웨어.", keywords: [ "외주 개발", "소프트웨어 개발", @@ -28,7 +28,7 @@ export const metadata: Metadata = { siteName: "쟁승메이드", title: "외주 개발 · 완성 소프트웨어 | 쟁승메이드", description: - "7년차 대기업 백엔드 개발자가 직접 설계·개발·운영합니다. 맞춤 외주 개발과 검증된 완성 소프트웨어를 제공하는 쟁승메이드.", + "24시간 돌아가는 실서비스를 직접 설계·운영하는 개발 스튜디오. 맞춤 외주 개발과 검증된 완성 소프트웨어.", images: [ { url: "https://jaengseung-made.com/og-image.png", @@ -42,7 +42,7 @@ export const metadata: Metadata = { card: "summary_large_image", title: "외주 개발 · 완성 소프트웨어 | 쟁승메이드", description: - "7년차 대기업 백엔드 개발자가 직접 만듭니다. 맞춤 외주 개발과 검증된 완성 소프트웨어를 제공합니다.", + "24시간 돌아가는 실서비스를 직접 설계·운영하는 개발 스튜디오. 맞춤 외주 개발과 검증된 완성 소프트웨어.", }, robots: { index: true, @@ -59,19 +59,18 @@ const jsonLd = { '@id': 'https://jaengseung-made.com/#person', name: '박재오', url: 'https://jaengseung-made.com', - jobTitle: '백엔드 개발자 · 외주 개발 전문가', - worksFor: { '@type': 'Organization', name: '대기업 재직 중' }, + jobTitle: '소프트웨어 엔지니어', email: 'bgg8988@gmail.com', telephone: '010-3907-1392', knowsAbout: ['Python', 'Java', 'Spring Boot', 'Next.js', '외주 개발', '웹사이트 제작', '업무 자동화', 'API 설계'], - description: '7년차 대기업 백엔드 개발자. 맞춤 소프트웨어 외주 개발과 검증된 완성 소프트웨어를 직접 설계·개발·운영합니다.', + description: '24시간 돌아가는 실서비스를 직접 설계·운영합니다. 맞춤 소프트웨어 외주 개발과 검증된 완성 소프트웨어를 제공합니다.', }, { '@type': 'LocalBusiness', '@id': 'https://jaengseung-made.com/#business', name: '쟁승메이드', url: 'https://jaengseung-made.com', - description: '7년차 대기업 백엔드 개발자가 직접 설계·개발·운영하는 외주 개발 · 완성 소프트웨어 스토어.', + description: '24시간 돌아가는 실서비스를 직접 설계·운영하는 외주 개발 · 완성 소프트웨어 스토어.', email: 'bgg8988@gmail.com', telephone: '010-3907-1392', priceRange: '₩', @@ -88,7 +87,7 @@ const jsonLd = { '@type': 'Service', name: '외주 개발', url: 'https://jaengseung-made.com/outsourcing', - description: '7년차 백엔드 개발자의 1:1 맞춤 소프트웨어 개발 외주. 자동화·API·웹/모바일 등 사이트 한정가로 제공.', + description: '1:1 맞춤 소프트웨어 개발 외주. 자동화·API·웹/모바일 등 사이트 한정가로 제공.', serviceType: 'Custom Software Development', provider: { '@id': 'https://jaengseung-made.com/#business' }, areaServed: '대한민국', diff --git a/app/page.tsx b/app/page.tsx index 1a40a2f..5e090fa 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,8 +2,16 @@ import Link from 'next/link'; import { createAdminClient } from '@/lib/supabase/admin'; import { getListedProducts, type ProductRow } from '@/lib/supabase/product-files'; -// 쟁승메이드 메인 — 외주 개발 + 완성 소프트웨어 2축 랜딩 (서버 컴포넌트) -// PublicShell이 TopNav(h-16)·푸터·main 배경을 제공하므로 여기서는 콘텐츠 섹션만 렌더한다. +import HeroField from './components/deepfield/HeroField'; +import ShowcaseGrid from './components/deepfield/ShowcaseGrid'; +import ScrollReveal from './components/deepfield/ScrollReveal'; +import CountUp from './components/deepfield/CountUp'; +import { SHOWCASE_SLOTS } from '@/lib/showcase'; + +// 쟁승메이드 메인 — Deep Field 다크 캔버스 (서버 컴포넌트) +// PublicShell이 TopNav(h-16, 다크 인지)·푸터(navy)·main 배경(라이트)을 제공한다. +// 이 페이지는 자기 풀-블리드 다크 배경을 소유하여 main의 라이트 배경을 덮는다. +// 히어로를 -mt-16 + pt-16으로 끌어올려 pt-16로 인한 상단 16px 라이트 띠를 제거한다. // 소프트웨어 진열 섹션이 DB 조회를 포함하므로 항상 최신 목록을 보여준다. export const dynamic = 'force-dynamic'; @@ -18,15 +26,7 @@ const PROCESS = [ { n: '04', t: '납품·배포 지원', d: '검수 후 30일 무상 하자보수로 안정화까지 책임집니다.' }, ]; -const STATS = [ - { v: '7년차', l: '대기업 백엔드 개발 경력' }, - { v: '15+', l: '직접 운영 중인 서비스' }, - { v: '기획→배포', l: '원스톱 단독 진행' }, -]; - -const STACK = ['Python', 'Java', 'Spring', 'Next.js', 'AI 연동']; - -const PORTFOLIO = [ +const PROOF = [ { t: '주식 자동매매 시스템', d: '텔레그램과 연동해 실시간으로 주문을 집행하고 체결·손익 리포트를 자동 전송합니다.', @@ -78,52 +78,69 @@ export default async function Home() { const hasProducts = featuredProducts.length > 0; return ( - <> - {/* ─── 1. Hero ─── */} -
-
-
+ // 풀-블리드 다크 캔버스 — main의 라이트 배경을 덮는다. +
+ {/* ─────────────────── 1. HERO ─────────────────── */} + {/* -mt-16 pt-16: 고정 헤더 아래로 끌어올려 상단 라이트 띠 제거 + 풀 뷰포트 확보 */} +
+ + {/* 콘텐츠 가독성용 하단 스크림 (radial 광원 위 텍스트 대비) */} +
+
+
+ 외주 개발 · 완성 소프트웨어

- 필요한 소프트웨어, -
만들어 드리거나{' '} - 이미 만들어 두었습니다. + 생각을 +
+ 동작하는 소프트웨어로 + .

- 7년차 대기업 백엔드 개발자가 직접 설계·개발·운영합니다. 맞춤 외주 개발과 - 검증된 완성 소프트웨어 중 필요한 쪽을 선택하세요. + 24시간 돌아가는 실서비스를 직접 설계하고 운영합니다. 외주 개발도, 완성 + 소프트웨어도 — 같은 손으로.

-
+
- 프로젝트 문의하기 + 프로젝트 문의 @@ -132,327 +149,349 @@ export default async function Home() {
-
- {/* ─── 2. 2축 서비스 ─── */} -
-
-
- {/* 외주 개발 */} - - - Custom - -

- 외주 개발 -

-

- 기획부터 배포·운영까지 한 사람이 책임집니다. 웹 서비스, API, 업무 자동화, - 봇 개발까지 필요한 형태로 만들어 드립니다. -

- - 외주 개발 알아보기 - - - - - {/* 완성 소프트웨어 */} - - - Ready-made - -

- 완성 소프트웨어 -

-

- 입금 확인 후 바로 다운로드해 사용합니다. 제가 직접 운영하며 검증한 도구만 - 정리해 제공합니다. -

- - 소프트웨어 둘러보기 - - - -
+ {/* 스크롤 큐 — 가는 세로선 + 점 미세 바운스 (motion-safe 가드는 CSS) */} +
+ +
- {/* ─── 3. 개발 프로세스 ─── */} -
-
-
+ {/* ─────────────────── 2. SHOWCASE ─────────────────── */} +
+
+

- Process + showcase

- 상담부터 납품까지, 흐름이 분명합니다 + 이런 걸 만들어 드립니다

-
-
- {PROCESS.map((s) => ( -
- - {s.n} - -

- {s.t} -

-

- {s.d} -

-
- ))} -
-
-
+ - {/* ─── 4. 신뢰 요소 ─── */} -
-
-
- {STATS.map((s) => ( -
-

- {s.v} -

-

- {s.l} -

-
- ))} +
+
-
- Stack - {STACK.map((s) => ( - - {s} - - ))} -
-
-
- {/* ─── 5. 포트폴리오 하이라이트 ─── */} -
-
-
-

- Portfolio -

-

- 실제로 운영 중인 시스템들 -

-

- 데모가 아니라 매일 돌아가는 서비스입니다. 같은 깊이로 의뢰하신 프로젝트를 만듭니다. -

-
-
- {PORTFOLIO.map((p) => ( -
- - - 직접 개발·운영 중 - -

- {p.t} -

-

- {p.d} -

-
- {p.tags.map((tag) => ( - - {tag} - - ))} -
-
- ))} -
-
+
- 포트폴리오 자세히 보기 + 전체 레퍼런스
- {/* ─── 6. 소프트웨어 진열 ─── */} + {/* ─────────────────── 3. PROCESS ─────────────────── */} +
+
+ +

+ process +

+

+ 상담부터 납품까지, 흐름이 분명합니다 +

+ + +
+ {/* 단계 연결선 — draw 라인 (데스크톱 가로 관통) */} + + + + +
+ {PROCESS.map((s, i) => ( + +
+ + {s.n} + +

+ {s.t} +

+

+ {s.d} +

+
+ + ))} +
+
+
+
+ + {/* ─────────────────── 4. PROOF ─────────────────── */} +
+
+ +

+ in production +

+

+ 데모가 아니라 매일 돌아가는 시스템 +

+

+ 직접 개발하고 운영 중인 실서비스입니다. 같은 깊이로 의뢰하신 프로젝트를 만듭니다. +

+ + +
+ {PROOF.map((p, i) => ( + +
+ + + 직접 개발·운영 중 + +

+ {p.t} +

+

+ {p.d} +

+
+ {p.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + ))} +
+ + {/* 스탯 3종 — 카운트업 */} + +
+
+

+ +

+

+ 직접 운영 중인 실서비스 +

+
+
+

+ 24/7 +

+

+ 무중단 운영 +

+
+
+

+ 원스톱 +

+

+ 기획 → 배포 단독 진행 +

+
+
+ +
+
+ + {/* ─────────────────── 5. SOFTWARE + CTA ─────────────────── */} {/* Phase 2: products 테이블 기반 동적 진열. 0개이면 출시 준비 중 폴백. */} -
-
+
+
{hasProducts ? ( <> -
-
-

- Software -

-

- 완성 소프트웨어 -

-
- - 전체 보기 - - -
-
- {featuredProducts.map((p) => ( + +
+
+

+ software +

+

+ 바로 쓰는 완성 소프트웨어 +

+
-

+ +

+ + +
+ {featuredProducts.map((p, i) => ( + + {/* 라이트 카드가 다크 위에 떠 있는 대비 */} + - {p.name} - - {p.description && ( -

- {p.description} -

- )} -
- - ₩{p.price.toLocaleString('ko-KR')} - - + {p.description && ( +

+ {p.description} +

+ )} +
- 자세히 - - -
- + + ₩{p.price.toLocaleString('ko-KR')} + + + 자세히 + + +
+ + ))}
전체 보기 @@ -460,73 +499,90 @@ export default async function Home() {
) : ( -
-

- Coming soon -

-

- 검증된 완성 소프트웨어를 준비하고 있습니다 -

-

- 직접 운영하며 다듬은 도구를 하나씩 다운로드 상품으로 공개할 예정입니다. - 출시 소식을 가장 먼저 받아보세요. -

- +
- 출시 소식 받기 - - -
+

+ coming soon +

+

+ 검증된 완성 소프트웨어를 준비하고 있습니다 +

+

+ 직접 운영하며 다듬은 도구를 하나씩 다운로드 상품으로 공개할 예정입니다. 출시 + 소식을 가장 먼저 받아보세요. +

+ + 출시 소식 받기 + + +
+ )} -
-
- {/* ─── 7. 최종 CTA ─── */} -
-
-
-

+
- 프로젝트, 이야기부터 시작하세요 -

-

- 아이디어 단계여도 괜찮습니다. 무료 상담에서 방향을 함께 잡아드립니다. -

- - 무료 상담 신청 - - -
+ {/* 광원 — radial 허용 */} +
+
+

+ 프로젝트, 이야기부터 시작하세요 +

+

+ 아이디어 단계여도 괜찮습니다. 무료 상담에서 방향을 함께 잡아드립니다. +

+ + 무료 상담 신청 + + +
+
+
- +
); }