Haewon Kam
bae0da42d2
답답함의 원인은 가로 비율이 아니라 세로 간격이었다. 헤드라인 80px 에 대해 헤드라인↔서브 28px, 서브↔CTA 40px 는 너무 촘촘했다. - 간격 확대: mt-7 → mt-11(44px), mt-10 → mt-14(56px). - 헤드라인 80 → 74px. 글자 실폭이 뷰포트의 40% (레퍼런스 statworx 는 48%). - 측정 주의사항을 주석에 남김: h1 은 블록이라 getBoundingClientRect 로 재면 컨테이너 폭(848px)이 나온다. Range 로 텍스트 노드를 재야 실제 글자 폭이다. 이걸 헷갈려 한 번 과교정(66px, 36%)했다가 되돌렸다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
92 lines
5.3 KiB
TypeScript
92 lines
5.3 KiB
TypeScript
import * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
/*
|
|
* 랜딩 텍스트 스케일 단일 소스. 페이지마다 text-[44px]/font-black/…을 직접 박지 말고
|
|
* variant 로 통일한다. 색·크기 미세조정은 className 으로 합성.
|
|
*
|
|
* 값은 레퍼런스(statworx.com) 실측에서 가져왔다. 핵심 규칙 셋:
|
|
*
|
|
* 1) 크기·굵기·조임은 같이 움직인다. 44px 에 900 은 뭉툭하지만, 72px 에 800 +
|
|
* 자간 -0.044em + 행간 1.0 은 확신으로 읽힌다(jitter.video 실측: 72px/800/-0.044em/0.95).
|
|
* 굵기만 올리면 둔해지고, 크기만 올리면 헐거워진다.
|
|
* 1-1) 크기 판단은 "글자가 화면 폭의 몇 %를 쓰는가"로 한다(레퍼런스 statworx 는 48%).
|
|
* 주의: h1 은 블록이라 getBoundingClientRect 로 재면 컨테이너 폭이 나온다.
|
|
* Range 로 텍스트 노드를 재야 실제 글자 폭이다 — 이걸 헷갈리면 엉뚱한 값으로 조정하게 된다.
|
|
* 지금 74px 에서 약 40%. 답답함의 원인은 가로 비율이 아니라 세로 간격이었다.
|
|
* 2) 한글 줄바꿈은 break-keep 만으로 부족하다. break-keep 은 어절 안에서 안 쪼개지게
|
|
* 할 뿐 어디서 넘어갈지는 못 정해서 "에이전트는 기준 / 밖으로 안 나갑니다" 같은
|
|
* 어색한 분절이 나온다. text-balance 를 같이 걸어 줄 길이를 고르게 맞춘다.
|
|
* 3) 크면 조인다. 디스플레이는 자간 -0.042em·행간 1.0 까지 조이고, 작아질수록 푼다.
|
|
* 단 한글은 행간 0.95 를 못 쓴다 — 라틴은 어센더·디센더가 여백을 만들지만
|
|
* 한글은 네모틀을 꽉 채워 줄이 붙는다. 라틴 기준 0.95~1.0 을 그대로 쓰면
|
|
* 두 줄짜리 한글 헤드라인이 서로 닿아 답답해진다. 1.07 이 붙지도 벌어지지도 않는 지점.
|
|
* 3) 라벨은 작고 자간은 normal. 레퍼런스 아이브로우가 10.4px/600/자간 normal 이다.
|
|
* 14px + tracking-wider + 알약 배경 + 반짝이 아이콘 조합이 전형적인 AI 생성 티다.
|
|
*
|
|
* 한글 보정: 본문은 레퍼런스(13.9px)보다 키운다. 한글은 14px 미만에서 판독성이 급격히
|
|
* 떨어진다. 대신 디스플레이를 더 키워 대비(디스플레이:본문 ≈ 4.5:1)를 만든다.
|
|
*/
|
|
const typographyVariants = cva("", {
|
|
variants: {
|
|
variant: {
|
|
// 라이트 섹션 h1
|
|
display: "text-[44px] sm:text-[58px] md:text-[68px] font-extrabold tracking-[-0.04em] leading-[1.14] text-ink break-keep text-balance",
|
|
// 다크 무대 히어로 h1. 색은 쓰는 쪽에서 준다(2톤 헤드라인).
|
|
stageDisplay:
|
|
"text-[38px] sm:text-[52px] md:text-[64px] lg:text-[74px] font-extrabold tracking-[-0.042em] leading-[1.1] break-keep text-balance",
|
|
// 섹션 제목 h2
|
|
/* 본문(15px)의 4.3배. 대비는 굵기가 아니라 크기로 만든다 —
|
|
굵기를 올리면 뭉툭해지고, 크기를 올리면 확신이 생긴다.
|
|
커질수록 자간을 더 조인다: 52px 에서 적당한 -0.021em 도 64px 에선 헐거워 보인다. */
|
|
title: "text-[34px] md:text-[64px] font-extrabold tracking-[-0.042em] leading-[1.16] text-ink break-keep text-balance",
|
|
// 섹션 내 서브 제목 (데모 패널 등)
|
|
heading: "text-[24px] md:text-[32px] font-bold tracking-[-0.034em] leading-[1.14] text-ink break-keep text-balance",
|
|
// 카드 제목
|
|
cardTitle: "text-[20px] font-bold tracking-[-0.028em] leading-[1.3] text-ink break-keep",
|
|
/* 섹션 상단 라벨. 영문 전용 — 한글 내용은 title 이 맡고, 여기는 조판 요소다.
|
|
작은 대문자 산세리프 라벨은 어느 SaaS 랜딩에나 있다. 세리프 이탤릭으로 두면
|
|
같은 자리에서 장식이 아니라 편집 디자인처럼 읽힌다. 한글은 넣지 않는다. */
|
|
eyebrow: "font-display italic text-[24px] md:text-[30px] font-normal text-primary tracking-[0.005em]",
|
|
// 섹션 리드 문단
|
|
lead: "text-[16px] sm:text-[17px] text-ink-soft font-normal leading-[1.6] break-keep",
|
|
body: "text-[15px] text-ink-soft font-normal leading-[1.6] break-keep",
|
|
small: "text-[14px] text-ink-soft font-normal leading-[1.6] break-keep",
|
|
caption: "text-[12.5px] text-ink-muted font-normal leading-[1.55] break-keep",
|
|
// 메타 라벨 (단가 패널·푸터 컬럼 제목 등)
|
|
micro: "text-[11px] font-semibold text-ink-muted tracking-normal",
|
|
},
|
|
},
|
|
defaultVariants: { variant: "body" },
|
|
})
|
|
|
|
const defaultTag: Record<NonNullable<VariantProps<typeof typographyVariants>["variant"]>, React.ElementType> = {
|
|
display: "h1",
|
|
stageDisplay: "h1",
|
|
title: "h2",
|
|
heading: "h3",
|
|
cardTitle: "h3",
|
|
eyebrow: "span",
|
|
lead: "p",
|
|
body: "p",
|
|
small: "p",
|
|
caption: "p",
|
|
micro: "span",
|
|
}
|
|
|
|
type TypographyProps = React.HTMLAttributes<HTMLElement> &
|
|
VariantProps<typeof typographyVariants> & {
|
|
/** 의미상 태그를 강제로 바꾸고 싶을 때 (예: cardTitle 을 h4 로) */
|
|
as?: React.ElementType
|
|
htmlFor?: string
|
|
}
|
|
|
|
function Typography({ className, variant, as, ...props }: TypographyProps) {
|
|
const Comp = as ?? defaultTag[variant ?? "body"]
|
|
return <Comp className={cn(typographyVariants({ variant }), className)} {...props} />
|
|
}
|
|
|
|
export { Typography, typographyVariants }
|