웹 디자인 리서치

국내 핀테크부터 글로벌 SaaS·이커머스까지 7개 사이트의 응답 헤더·HTML·CSS를 curl로 직접 조사해 정리했습니다.

비교 요약 — 국내 핀테크

	toss.im	뱅크샐러드	카카오뱅크	당근마켓
프레임워크	Next.js	Next.js	전통 멀티페이지	Remix
폰트	자체 커스텀	Pretendard	Pretendard Variable	Pretendard + subsetting
히어로 연출	webp 프레임+canvas	-	GSAP ScrollTrigger	-
CDN/캐시	자체 CDN + @layer	Cloudflare 1년 캐시	-	CloudFront + modulepreload

비교 요약 — 글로벌 SaaS·이커머스

	Stripe	Linear	무신사
업종	결제 SaaS	프로덕트 툴	이커머스
폰트	Söhne + Source Code Pro	Inter Variable	-
보안	sha256 기반 CSP	표준 CSP	-
특이점	Contentful CMS	CSS 커스텀 프로퍼티 토큰	10개국 hreflang, 개인화 홈

핵심 교훈

1. 폰트는 Pretendard(한글)·Inter(영문)가 기본값 — 커스텀 폰트(토스, Stripe)는 브랜드 차별화가 정말 중요할 때만 투자할 선택지.
2. 스크롤 애니메이션은 목적에 맞게 — 영상 같은 정밀한 연출은 webp 프레임+canvas, 섹션·카드 단위 등장은 GSAP ScrollTrigger. 대부분의 랜딩페이지는 후자가 정답.
3. 폰트 최적화 3단계 — 최소 woff2 + font-display:swap, 한 단계 위는 가변 폰트, 최고 수준은 unicode-range 서브셋 분할(당근마켓).
4. 보안이 중요하면 CSP를 sha256 해시 기반으로 — Stripe처럼 unsafe-inline 없이 인라인 스크립트를 화이트리스트.
5. 디자인 토큰은 CSS 커스텀 프로퍼티로 — Linear처럼 색·여백·이징까지 변수화하면 Figma 토큰과 1:1 대응.
6. 해외 확장 계획이 있으면 hreflang + 지역 서브도메인을 처음부터 — 무신사는 10개국 이상을 미리 분리해둠.
7. 프레임워크 최신 여부가 체감 품질을 결정하지 않는다 — 카카오뱅크는 전통 멀티페이지지만 타이포그래피·모션만으로 세련됨.

사이트별 노트