Solv 프레임드 핀테크 랜딩 페이지 — 재구축 스킬

1. 디자인 철학

이 페이지는 가장자리 없는 기업 웹사이트가 아닌, 부드럽게 둥근 '브라우저리스 캔버스' 안에 배치된 세련된 제품 데모로 구축합니다. 대비는 세 가지 시스템이 함께 작동하여 만들어집니다:

에디토리얼 절제: 큰 그로테스크 헤드라인, 짧은 카피, 넉넉한 여백, 적은 색상.
제품 촉각성: 알약 모양 컨트롤, 삽입형 미니 인터페이스, 실시간 숫자, 슬라이더, 아코디언, 대시보드 조각.
부드러운 시네마틱 모션: 콘텐츠가 튀거나 날아다니지 않습니다. 흐림, 낮은 불투명도, 적당한 수직 변위에서 ease-out 곡선으로 해제된 후 정지 상태를 유지합니다.

페이지는 정지 시 차분하고 상호작용 중에는 반응적으로 느껴져야 합니다. 모션은 장식이 아닌 계층 구조 도구입니다.

2. 직접 관찰된 것과 추론된 것

직접 관찰됨

2272×1440 해상도의 22.38초, 60fps 데스크톱 캡처.
둥근 페이지 셸을 둘러싼 고정된 사진적 숲 배경.
흰색, 올리브, 애시드 라임, 옅은 파란색, 옅은 라벤더, 회색, 사진적 표면.
흐림 + 페이드 + 수직 이동이 포함된 히어로 로드 안무.
페이지 셸 오른쪽 가장자리에 좁은 라임 스크롤 썸이 있는 부드러운 수직 스크롤.
흐림 해제, 불투명도, 짧은 상향 이동을 사용하는 섹션 리빌.
수평 로고 레일.
사각형 범위 썸과 실시간 자금 견적이 있는 라이브 계산기.
열린 답변을 애니메이션 높이와 플러스/마이너스 아이콘으로 교체하는 아코디언.
인용문과 페이지네이션 도트가 있는 사용후기 이미지.
세 개의 아티클 카드, 중앙 정렬 CTA 섹션, 어두운 삽입형 푸터.
명백한 스크롤 잭킹 또는 고정된 수평 시퀀스 없음.

신뢰도 높은 추론

Framer Motion, GSAP ScrollTrigger 또는 유사한 인터섹션 기반 리빌 시스템.
Lenis 유사 부드러운 스크롤 레이어 또는 매우 부드러운 트랙패드/브라우저 스크롤.
로고 레일을 위한 복제된 CSS 마퀴.
단일 현대적 그로테스크 패밀리; 아마 Suisse/Neue Haas/Aeonik 계열. 정확한 폰트 신원은 캡처만으로는 복구할 수 없습니다.
태블릿/모바일 동작은 표시되지 않습니다. 아래의 반응형 규칙은 데스크톱 품질을 유지하도록 설계된 구현 요구 사항입니다.

3. 비주얼 시스템

3.1 컬러 토큰

이 값들은 캡처에서 샘플링되거나 시각적으로 재구성되었습니다. 표준 구현 팔레트로 사용하십시오.

:root {
  /* Core */
  --ink: #273000;          /* 샘플링된 진한 올리브; FAQ/푸터/텍스트 */
  --ink-strong: #1f2700;   /* 고대비 컨트롤을 위한 더 진한 올리브 */
  --acid: #ddff5a;         /* 샘플링된 계산기/액센트 라임 */
  --acid-soft: #efffb0;    /* CTA 글로우 / 미묘한 강조 필드 */
  --paper: #ffffff;
  --paper-warm: #fbfbf7;

  /* Supporting cards */
  --sky: #cfe7e9;          /* 샘플링된 옅은 파란색 */
  --lavender: #d9def8;     /* 샘플링된 옅은 라벤더 */
  --mist: #efeee9;         /* 칩, 로고 스테이트먼트 필 */
  --line: rgba(39, 48, 0, 0.14);
  --line-on-dark: rgba(221, 255, 90, 0.16);

  /* Text */
  --text-primary: #273000;
  --text-secondary: #74756d;
  --text-on-dark: #ddff5a;
  --white-muted: rgba(255, 255, 255, 0.72);

  /* Hero glass */
  --glass-dark: rgba(48, 43, 39, 0.48);
  --glass-light: rgba(255, 255, 255, 0.82);
  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 24, 10, 0) 42%,
    rgba(20, 24, 10, 0.24) 68%,
    rgba(20, 24, 10, 0.72) 100%
  );
}

컬러 사용 규칙

페이지 표면의 약 65-75%에 --paper를 사용하십시오.
모든 카드가 아닌 하나의 큰 섹션과 푸터에 --ink를 사용하십시오.
--acid는 기본 콜투액션, 계산기, FAQ 타이포그래피, 커스텀 스크롤 썸, 작은 상태 칩에만 사용하십시오.
작은 컴포넌트에 두 개 이상의 옅은 보조 색상을 사용하지 마십시오. 카드는 흰색, 파란색, 라벤더, 라임, 올리브 또는 사진적이어야 하며, 여러 색상 그라데이션이 아니어야 합니다.
텍스트와 컨트롤에 순수한 검정색을 피하십시오. 올리브-검정은 원본 캐릭터의 중요한 부분입니다.
셸 뒤의 숲 사진은 페이지 셸이 항상 지배적일 수 있도록 충분히 음소거되어야 합니다. 필요한 경우 미묘한 사이언/크림 워시를 추가하십시오.

3.2 타이포그래피

서체

캡처는 간결한 간격과 부드러운 기하학을 가진 중립적인 네오 그로테스크를 사용합니다. 다음 스택을 사용하십시오:

font-family: "Suisse Intl", "Neue Haas Grotesk Text", "Inter", "Helvetica Neue", Arial, sans-serif;

오픈소스 구현을 위해 표시용으로 Inter Tight를, 본문용으로 Inter를 사용하십시오. 세리프 또는 고정폭 보조 패밀리를 도입하지 마십시오.

두께 시스템

표시: 400–500. 큰 활자는 굵지 않습니다.
섹션 제목: 400–500.
본문: 400.
본문 내 강조: 600.
버튼/내비게이션: 500–600.
큰 숫자 판독값: 500.

데스크톱 타입 스케일

:root {
  --fs-hero: clamp(3.75rem, 4.35vw, 5.15rem);       /* ~60–82px */
  --fs-section-xl: clamp(3rem, 3.4vw, 4.25rem);    /* ~48–68px */
  --fs-section: clamp(2.5rem, 2.8vw, 3.65rem);     /* ~40–58px */
  --fs-card-title: clamp(2rem, 2.2vw, 3rem);       /* ~32–48px */
  --fs-quote: clamp(1.75rem, 2vw, 2.75rem);        /* ~28–44px */
  --fs-body-lg: 1.25rem;                           /* 20px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-small: 0.875rem;                            /* 14px */
}

줄 간격 및 자간

히어로/큰 제목: line-height: 0.96–1.02, letter-spacing: -0.045em.
섹션 제목: line-height: 0.98–1.05, letter-spacing: -0.04em.
카드 제목: line-height: 1.0–1.08, letter-spacing: -0.035em.
본문: line-height: 1.42–1.55, letter-spacing: -0.01em.
버튼/내비게이션: line-height: 1, letter-spacing: -0.01em.
큰 통화 값: letter-spacing: -0.055em; 표 형식 숫자를 사용하십시오.

.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em;
}

줄 길이 규칙

히어로 본문: 42–54자.
섹션 본문: 48–64자.
FAQ 답변: 62–76자.
표시 제목이 14–18단어를 초과하거나 모바일에서 3줄을 넘지 않도록 하십시오.

3.3 간격 및 그리드 리듬

4px 기준을 사용하며, 대부분의 눈에 띄는 간격은 8의 배수로 설정합니다.

:root {
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
}

데스크톱 셸 측정값

2272×1440 캡처 기준:

페이지 셸 너비: 약 90vw.
수평 외부 여백: 약 5vw.
상단/하단 보이는 외부 여백: 약 3–3.5vh.
셸 코너 반경: 28–32px.
내부 섹션 패딩: 좌/우 56–64px.
큰 수직 섹션 패딩: 96–144px.
주요 카드 간 간격: 20–28px.
얇은 구분선: 12–16% 불투명도의 1px.

그리드

셸 내부에 12열 그리드를 사용하십시오.

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.75rem);
}

구성 비율:

히어로 콘텐츠: 왼쪽 6–7열; 플로팅 대시보드 카드: 오른쪽 3열.
제품 개요: 카피 5열; 비주얼 모듈 6–7열.
기능 트리오: 약 3 / 3 / 4.5열, 사진 카드가 가장 넓음.
계산기: 넉넉한 중앙 간격으로 5.5 / 5.5열.
FAQ: 5 / 7열.
아티클: 동일한 4열 카드.
푸터: 브랜드 블록 4열; 내비게이션/연락처/위치/언어가 나머지를 채움.

3.4 반경 규칙

:root {
  --radius-shell: 2rem;      /* 32px */
  --radius-section: 1.5rem;  /* 24px */
  --radius-card: 1.25rem;    /* 20px */
  --radius-ui: 1rem;         /* 16px */
  --radius-chip: 999px;
}

규칙:

외부 페이지 셸: 28–32px.
대형 미디어 및 섹션 카드: 20–24px.
미니 대시보드 카드: 14–18px.
버튼, 태그, 분할 내비게이션, 스테이트먼트 칩: 전체 필.
여러 임의의 반경을 혼합하지 마십시오. 이 다섯 가지 값만 사용하십시오.

3.5 그림자 및 높이

원본은 뚜렷한 그림자보다 대비와 흐림에 더 의존합니다.

:root {
  --shadow-shell: 0 24px 70px rgba(26, 34, 12, 0.18);
  --shadow-float: 0 18px 50px rgba(25, 31, 8, 0.18);
  --shadow-ui: 0 8px 24px rgba(25, 31, 8, 0.10);
}

페이지 셸은 하나의 크고 부드러운 그림자를 얻습니다.
플로팅 히어로 대시보드는 중간 부드러운 그림자를 얻습니다.
대부분의 기능 카드에는 그림자가 없습니다. 테두리 또는 색상 분리를 사용하십시오.
날카로운 검정 그림자 또는 여러 개의 쌓인 그림자를 사용하지 마십시오.

4. 레이아웃 아키텍처

4.1 글로벌 캔버스

숲 배경은 고정된 상태로 유지되고 둥근 콘텐츠 셸이 스크롤됩니다.

html {
  background: #b9d9d8;
}

body {
  margin: 0;
  color: var(--text-primary);
  background:
    linear-gradient(90deg, rgba(174, 219, 224, 0.34), rgba(250, 249, 218, 0.34)),
    url('/images/forest-background.avif') center / cover fixed;
}

.page-shell {
  width: min(90vw, 132rem);
  margin: 3.25vh auto;
  border-radius: var(--radius-shell);
  overflow: clip;
  background: var(--paper);
  box-shadow: var(--shadow-shell);
  position: relative;
}

셸 주위에 두꺼운 테두리를 두지 마십시오. 배경과의 대비만으로 충분합니다.

4.2 섹션 순서

히어로 / 내비게이션
고객 스테이트먼트 칩 + 순환 로고 레일
제품 개요 — 왼쪽 헤드라인/카피, 오른쪽 두 개의 제품 스토리 카드
성장 자본 기능 트리오
투명 수수료 계산기
FAQ 아코디언
사용후기 미디어/캐러셀
최신 아티클
금융 전문가 CTA
다크 인셋 푸터

4.3 히어로 구성

높이: 데스크톱에서 min(92svh, 82rem); 최소 760px.
셸 내부 전체 너비 이미지.
상단 내비게이션이 이미지 위에 플로팅.
카피는 왼쪽 하단에 고정.
제품/대시보드 카드는 오른쪽 하단에 고정.
가독성을 위해 어두운 하단 스크림과 사진 위에 매우 미묘한 따뜻한 오버레이를 추가합니다.

.hero {
  min-height: min(92svh, 82rem);
  position: relative;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  z-index: -1;
}

4.4 내비게이션

데스크톱은 세 개의 독립적인 클러스터로 구성됩니다:

왼쪽: 3개의 링크가 포함된 반투명 어두운 필.
중앙: 흰색 로고.
오른쪽: 어두운 반투명 계정 필과 별도의 원형 메뉴 버튼.

backdrop-filter: blur(14px)와 반투명 표면을 사용하십시오. 내비게이션 높이는 58–64px로 유지하십시오.

900px 미만 너비에서:

왼쪽 링크 필을 숨깁니다.
중앙 로고를 유지합니다.
하나의 기본 작업과 메뉴 아이콘을 유지합니다.
로고가 불균등한 측면 컨트롤로 수학적으로 이동되지 않고 광학적으로 중앙에 유지되도록 합니다.

4.5 로고 레일

흰색 섹션.
로고 위 중앙 정렬 스테이트먼트 칩.
복제된 콘텐츠가 있는 수평으로 클리핑된 레일의 로고.
로고 크기는 동일한 원시 너비로 설정되지 않고 시각적으로 정규화되어야 합니다.
선택된 마크에 회색조/올리브 처리와 낮은 불투명도를 사용하십시오.

4.6 제품 개요

왼쪽에 큰 두 줄 헤드라인.
바로 아래에 두 개의 필 버튼.
두 개의 짧은 단락; 각 단락의 처음 몇 단어는 세미볼드.
오른쪽은 비대칭을 만들기 위해 수직으로 오프셋된 두 개의 다른 색상 카드를 사용합니다.
어두운 카드는 옅은 파란색 카드보다 좁고 높으며 미니 제품 UI를 포함합니다.

4.7 성장 기능 트리오

섹션 제목이 행의 대부분을 차지하고, 오른쪽에 작은 아웃라인 '더 알아보기' 필이 정렬됩니다.
세 개의 카드:
1. 삽입된 흰색 UI가 있는 부드러운 녹색 사진/그라데이션 카드.
2. 잔액 요약 패널이 있는 라벤더 카드.
3. 큰 흰색 헤드라인과 하단 카피 오버레이가 있는 넓은 사진 카드.
카드는 높이와 반경을 공유하지만 너비는 공유하지 않습니다.

4.8 계산기

위아래에 큰 여백이 있는 흰색 섹션.
왼쪽: 제목, 2–3줄 설명, 어두운 필 CTA.
오른쪽: 애시드 라임 카드 with 헤더, 구분선, 통화 값, 범위 컨트롤, 구분선, 자금 견적.
계산기 카드는 거의 정사각형이며 650px보다 넓어지지 않아야 합니다.

4.9 FAQ

전체 너비의 어두운 올리브 섹션.
왼쪽 열: 라임 제목과 요약.
오른쪽 열: 네 개의 아코디언 행.
한 번에 하나의 답변만 열립니다.
행 구분선은 매우 미묘합니다.
플러스가 전체 아이콘 컨테이너를 회전시키지 않고 마이너스로 바뀝니다.

4.10 사용후기

FAQ 바로 아래 전체 너비 사진 카드.
큰 초상화/비디오 스틸.
이미지 하단의 흐린 전경은 사진의 일부이며 인터페이스 흐림이 아닙니다.
인용문과 귀속은 더 어두운 왼쪽 하단 그라데이션 위에 위치합니다.
오른쪽 하단에 두 개의 작은 페이지네이션 도트/버튼.
녹화에서 하나의 슬라이드 전환만 보이지만 구조적으로 캐러셀로 취급합니다.

4.11 아티클

왼쪽에 제목, 오른쪽에 작은 '모두 보기' 작업이 있는 흰색 섹션.
세 개의 동일한 카드.
각 카드는 16:9 또는 약간 더 큰 이미지와 어두운 하단 그라데이션, 흰색 아티클 제목을 사용합니다.
제목은 짧고 왼쪽 하단에 고정됩니다.

4.12 CTA

높은 섹션의 중앙 정렬 콘텐츠.
배경은 상단 흰색에서 하단 매우 옅은 라임으로 전환됩니다.
제목: 두 줄, 최대 너비 약 520–620px.
작은 전문가 아바타 클러스터와 어두운 기본 필.
상단과 하단에 약 120–180px의 여유 공간을 유지합니다.

4.13 푸터

CTA 배경이 푸터 뒤에 계속됩니다.
푸터 자체는 24–32px 외부 여백이 있는 인셋 다크 올리브 둥근 사각형입니다.
왼쪽 상단 브랜드, 오른쪽 상단 내비게이션, 연락처/위치/언어 하단 영역, 왼쪽 하단 소셜 원.
푸터는 전통적인 끝에서 끝까지의 법적 푸터가 아닌 컴팩트한 대시보드 패널처럼 느껴져야 합니다.

5. 반응형 동작

캡처는 반응형 상태를 보여주지 않습니다. 의도를 유지하기 위해 다음을 구현하십시오.

5.1 브레이크포인트

// tailwind.config.ts
screens: {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

5.2 데스크톱 ≥ 1200px

90vw 셸과 모든 다중 열 구성을 유지합니다.
56–64px 내부 수평 패딩을 사용합니다.

[번역을 위해 잘림]

즐겨 사용하는 AI에게 물어보기

문서