// landing.jsx — 눈덩이 랜딩 페이지 (2026-07 전체 리뉴얼) // 내러티브: 사기 전에 하루만 맡겨두세요 — 담다 → 기다리다 → 답하다 → 눈송이로 남다 const L = { bg: '#F7F4ED', // warm cream — landing 전용 따뜻한 톤 bg2: '#EAE3D8', surface: '#FFFFFF', ink: '#0D2844', ink2: '#506782', ink3: '#8AA0B7', line: 'rgba(13,40,68,0.08)', lineSoft: 'rgba(13,40,68,0.04)', accent: '#7DB4DD', accentDeep: '#3F7AB0', ice: '#B8D4E8', iceLight: '#E6EEF7', navy: '#0D2844', navyDeep: '#08192C', good: '#3A9D7E', warm: '#D97757', // 시즌 눈송이 팔레트 spring: '#E08FA9', summer: '#4FB39F', autumn: '#D9A04E', winter: '#7DB4DD', }; // ────────────────────────────────────────────────────────── // NAV // ────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ────────────────────────────────────────────────────────── // HERO — 센터 스테이지 // ────────────────────────────────────────────────────────── function Hero() { return (

mindful spending · snowball planner

사기 전에,
하루만 {' '}맡겨두세요.

참으라고 하지 않아요. 눈덩이에 맡겨두면 내일의 내가 다시 물어봐요 — 내일도 필요하면 그때 사도 늦지 않으니까요.

{/* Phone stage */}

{/* halo */}

{/* floating mascot */}

{/* quote badge */}

hold on.

"에어팟, 내일 다시 물어볼게요 D-1"

{/* device — 하단을 살짝 잘라 다음 섹션으로 이어지는 느낌 */}

{/* fade into next section */}

); } function StoreBadge({ kind, where }) { const track = () => { if (typeof gtag === 'function') { gtag('event', 'store_click', { platform: kind, location: where || 'unknown' }); } }; if (kind === 'apple') { return (

); } return (

); } // ─── Hero mockup — 삼고초려 [참는 중] 화면 (1.1 실화면 재현) ─── function ConsiderationMockup() { return (

{/* Header */}

MICRO ACTION

money choices.

{/* Tabs */}

{[['참는 중', 2, true], ['절약함', 9, false]].map(([label, n, on]) => (

{label} {n}

))}

{/* Today decision banner */}

⏰ 오늘 다시 물어볼 고민이 1개 있어요

{/* Consideration cards */}

{/* Future compare hint */}

10-SECOND FUTURE

둘 다 참으면 10년 뒤 약 82만원이 될 수 있어요

+ 고민 담기

); } function ConsiderCard({ emoji, name, amount, dday, ddayColor, note, highlight }) { return (

{emoji}

{name}

{amount} · {note}

{dday}

); } // ────────────────────────────────────────────────────────── // EMPATHY — 새벽의 장바구니 // ────────────────────────────────────────────────────────── function Empathy() { const bubbles = [ { who: 'me', time: '새벽 1:24', text: '이건 진짜 사야 해... 🛒' }, { who: 'snowball', time: '눈덩이', text: '좋아 보여요! 일단 하루만 맡겨둘까요?' }, { who: 'me', time: '다음날 저녁 8:02', text: '어… 생각해보니 지난달에 산 거랑 똑같네' }, ]; return (

WE'VE ALL BEEN THERE

장바구니에 담을 때의 나와,
하루 뒤의 나는 생각이 달라요.

{/* chat strip */}

{bubbles.map((b, i) => { const mine = b.who === 'me'; return (

{!mine && } {b.time}

{b.text}

); })}

); } // ────────────────────────────────────────────────────────── // HOW IT WORKS — 담다 · 기다리다 · 답하다 // ────────────────────────────────────────────────────────── function HowItWorks() { const steps = [ { eyebrow: '01 · 담다', title: '고민을 눈덩이에', sub: '살까 말까 고민되는 순간, 10초면 담아둘 수 있어요. 기다릴 시간은 1·3·7일 중에서 고르세요.', visual: , }, { eyebrow: '02 · 기다리다', title: '그동안 잊고 지내세요', sub: '쿨다운 동안 눈덩이가 대신 기억해요. 이 돈이 10년 뒤 얼마가 될 수 있는지도 미리 보여드려요.', visual: , }, { eyebrow: '03 · 답하다', title: '내일의 내가 답해요', sub: '시간이 끝나면 다시 물어봐요. 참았다면 절약으로, 샀다면 충분히 고민한 결정으로 — 어느 쪽도 실패가 아니에요.', visual: , }, ]; return (

{steps.map((s, i) => (

{s.visual}

{s.eyebrow}

{s.title}

{s.sub}

))}

); } // step 1 — 고민 담기 미니 카드 function StepVisualAdd() { return (

🎧

에어팟 프로 3세대

329,000원

{[['1일', false], ['3일', false], ['7일', true]].map(([d, on]) => ( {d} ))}

); } // step 2 — 쿨다운 대기 function StepVisualWait() { return (

D-2

참으면 10년 뒤 약 65만원

); } // step 3 — 결정 버튼 function StepVisualDecide() { return (

아직도 갖고 싶으세요?

참았어요 ❄️

샀어요

어느 쪽도 실패가 아니에요

); } function SectionHeader({ eyebrow, lead, title, center }) { return (

{eyebrow}

{lead && (

{lead}

)}

{title}

); } // ────────────────────────────────────────────────────────── // DECISION MOMENT — navy narrative + 결정 목업 // ────────────────────────────────────────────────────────── function DecisionMoment() { return (

THE MAGIC MOMENT

still want it?

하루가 지나면,
내일의 내 가 물어봐요.

참았다면 그 돈은 절약으로 굴러가고, 목표 도달일이 얼마나 당겨졌는지 즉시 보여드려요. 추상적인 숫자가 아니라, 손에 잡히는 시간으로.

{/* Mascot growth trail */}

{[28, 42, 60, 84, 112].map((sz, i, arr) => (

{['Day 1', 'Week 1', 'Month 3', 'Year 1', 'Year 5'][i]}

))}

); } // Static "magic moment" phone — 쿨다운 종료, 내일의 내가 묻는 순간 function MicroMomentMockup() { return (

still want it?

하루가 지났어요.
아직도 갖고 싶으세요?

🎧

에어팟 프로 3세대

329,000원

참으면 10년 뒤 약 65만원이 될 수 있어요

참았어요 ❄️

샀어요

어느 쪽을 골라도 괜찮아요 — 실패가 아니니까요.

); } // ────────────────────────────────────────────────────────── // ECHO — 혼자 하는 절약 모임 (1.2.0 에코 커뮤니티) // ────────────────────────────────────────────────────────── function EchoCard({ color, seed, tag, text, cheers }) { return (

{tag} ❄️ {cheers}

{text}

); } function Echo() { return (

ECHO COMMUNITY

alone, together,

참는 건 혼자,
응원은 함께 와요.

참아낸 순간에 익명 한마디를 남겨보세요. 같은 걸 참고 있는 누군가의 이야기가 눈송이처럼 도착해요. 팔로우도, 댓글도, 비교도 없이 — 조용한 응원만 오가는 혼자 하는 절약 모임이에요.

{k} {v}

{/* 도착한 에코 카드 */}

ECHOES FOR YOU

for you.

오늘의 절약 날씨 ❄️ 함박눈

{/* 타임캡슐 */}

🕰 타임캡슐 — 내일의 나에게 내일 아침 도착

"이거 없어도 아무 일 안 생겨. 내일의 네가 고마워할 거야."

에코는 한마디를 나눈 사람에게만 도착해요 — 주고받는 응원.

); } // ────────────────────────────────────────────────────────── // COLLECT — 눈송이 도감 (시즌 컬렉션) // ────────────────────────────────────────────────────────── function Snowflake({ size = 56, color = '#7DB4DD', seed = 0 }) { // 결정형 파라미터 — seed마다 가지 위치·길이가 달라 서로 다른 눈송이 const b1 = 34 + (seed % 3) * 5; // 안쪽 가지 위치 (중심으로부터 %) const b2 = 62 + (seed % 2) * 8; // 바깥 가지 위치 const blen = 9 + (seed % 4) * 2; // 가지 길이 const tip = seed % 2 === 0; // 끝 장식 (점/다이아) const arms = [0, 60, 120, 180, 240, 300]; const armEnd = 12; // 팔 끝 y (center 50 기준 위쪽) return ( ); } function Collect() { const seasons = [ { name: '봄', en: 'spring', color: L.spring, seeds: [1, 4] }, { name: '여름', en: 'summer', color: L.summer, seeds: [2, 7] }, { name: '가을', en: 'autumn', color: L.autumn, seeds: [3, 6] }, { name: '겨울', en: 'winter', color: L.winter, seeds: [0, 5] }, ]; return (

SNOWFLAKE COLLECTION

one of a kind,

당신의 선택이
눈송이로 남아요.

절약 하나하나가 세상에 하나뿐인 눈송이가 돼요. 금액이 클수록 더 화려하게, 계절이 바뀌면 색도 달라져요. 봄의 벚꽃빛부터 겨울의 얼음빛까지 — 나만의 사계절 도감을 완성해보세요.

{k} {v}

{/* 도감 카드 */}

MY COLLECTION

four seasons.

23 / 48

{seasons.map((s) => (

{s.name}

{s.en}

{s.seeds.map((seed) => (

))} {/* 미획득 실루엣 */}

))}

); } // ────────────────────────────────────────────────────────── // TOOLS — 든든한 도구들 (시뮬레이터 + 목표·저축·주담대) // ────────────────────────────────────────────────────────── function Tools() { const tools = [ ['복리 시뮬레이터', '월 저축·수익률·기간을 슬라이더로 — 비관/기대/낙관을 한 화면에서'], ['금융 목표 역산', '목표 금액과 날짜를 넣으면 월 필요 저축액을 계산'], ['저축 스케줄', '적금·예금·청약을 등록하면 만기와 이자를 자동 추적'], ['주담대 비교', '체증식 vs 원리금균등, 손익분기 수익률까지 로컬 계산'], ]; return (

AND SOLID TOOLS

in 10 years,

절약한 돈이 굴러갈
자리도 준비돼 있어요.

참아낸 돈이 그냥 사라지지 않도록 — 목표에 연결하고, 미래로 굴려보고, 계획대로 가고 있는지 확인하는 도구들이 함께 있어요.

{k} {v}

); } // ────────────────────────────────────────────────────────── // FAQ // ────────────────────────────────────────────────────────── function FAQ() { const items = [ { q: '눈덩이는 어떤 앱인가요?', a: '사고 싶은 게 생겼을 때 하루만 맡겨두는 소비 습관 앱입니다. 참는 게 아니라 시간을 두고 고르는 것 — 참았다면 절약으로, 샀다면 충분히 고민한 결정으로 남아요. 절약이 10년 뒤 어떻게 자라는지 보여주는 복리 시뮬레이터와 금융 목표 관리도 함께 제공합니다.' }, { q: '소비를 못 하게 막는 앱인가요?', a: '아니요. 눈덩이는 소비를 막지 않습니다. 고민되는 소비를 1·3·7일 맡겨두고, 시간이 끝나면 다시 물어볼 뿐이에요. 사기로 했다면 그것도 충분히 고민한 좋은 결정으로 기록됩니다.' }, { q: '무료인가요?', a: '핵심 기능은 모두 무료로 제공됩니다. 향후 고급 시나리오 비교, 무제한 목표 등 일부 기능은 프리미엄으로 제공될 예정입니다.' }, { q: '내 금융 정보가 안전한가요?', a: '눈덩이는 계좌 정보를 직접 연결하지 않습니다. 직접 입력한 자산과 목표 정보만 저장하며, 모든 데이터는 암호화되어 전송됩니다.' }, { q: '에코 커뮤니티에서 내가 누군지 드러나나요?', a: '아니요. 에코는 이름·프로필·팔로우가 없는 완전 익명이며, 눈송이 모양으로만 표시됩니다. 남길 수 있는 건 짧은 한마디뿐이고, 부적절한 내용은 자동 필터와 신고·차단 기능으로 관리됩니다. 한마디를 남길지는 매번 직접 선택할 수 있어요.' }, { q: '어떤 OS에서 사용 가능한가요?', a: 'iOS 15 이상, Android 7.0 (API 24) 이상에서 사용 가능합니다.' }, { q: '실제로 자산을 굴려주나요?', a: '아니요. 눈덩이는 자산 운용 상품을 판매하지 않습니다. 사용자가 직접 세운 시나리오와 목표를 추적하는 도구입니다.' }, ]; const [open, setOpen] = React.useState(0); return (

{items.map((it, i) => (

{open === i && (

{it.a}

)}

))}

); } // ────────────────────────────────────────────────────────── // FINAL CTA // ────────────────────────────────────────────────────────── function FinalCTA() { return (

START TODAY

hold on, snowball.

다음 충동구매,
눈덩이에 맡겨보세요.

가입 30초 · 고민 담기 10초 — 내일의 당신이 답해줄 거예요.

); } // ────────────────────────────────────────────────────────── // FOOTER // ────────────────────────────────────────────────────────── function Footer() { const [showAbout, setShowAbout] = React.useState(false); return ( ); } function FooterCol({ title, links }) { return (

{title.toUpperCase()}

{onClick ? ( ) : ( {label} )}

); } Object.assign(window, { Nav, Hero, Empathy, HowItWorks, DecisionMoment, Collect, Tools, FAQ, FinalCTA, Footer });

사기 전에, 하루만 {' '}맡겨두세요.

{title}

하루가 지나면, 내일의 내 가 물어봐요.

참는 건 혼자,응원은 함께 와요.

당신의 선택이눈송이로 남아요.