📖프론트엔드 UI/UX 마스터 가이드·3/4단계
75%

프론트엔드 UI 스타일 카탈로그 — 67개 스타일 실전 가이드

이 시리즈는 UI/UX Pro Max 스킬의 디자인 데이터베이스를 기반으로 작성되었다. 자세한 배경은 1편을 참고하자.

디자이너가 "Glassmorphism으로 가자"라고 하면, 개발자는 뭘 해야 하는지 바로 알아야 한다. backdrop-filter: blur(16px) + rgba(255,255,255,0.15) + 반투명 border. 이게 핵심이다.

이 글은 현존하는 67개 UI 스타일을 카테고리별로 분류하고, 각 스타일의 CSS 구현 핵심, 적합한 제품, 퍼포먼스/접근성/다크모드 지원을 정리한 것이다. 스타일을 고를 때 "예쁘니까"가 아니라 **"이 제품에 맞으니까"**로 판단할 수 있게 하는 것이 목표다.

카테고리 맵

67개 스타일은 크게 3가지 카테고리로 나뉜다.

카테고리스타일 수특징
General49개범용 UI 스타일. 모든 제품에 적용 가능
Landing Page8개랜딩 페이지 특화. 전환율 최적화
BI/Analytics10개대시보드/분석 특화. 데이터 밀도 높음

이 글에서는 General 카테고리의 핵심 스타일을 깊이 있게 다루고, Landing Page와 BI/Analytics는 요약 테이블로 정리한다. General 스타일을 제대로 이해하면 나머지는 변형에 불과하다.

Part 1: 표면 효과 스타일

UI 스타일의 시각적 차이는 결국 표면(surface)을 어떻게 처리하느냐에서 갈린다. 그림자, 블러, 투명도, 테두리 — 이 네 가지 조합이 스타일을 결정한다.

Glassmorphism — 유리 위의 UI

iOS의 Control Center, macOS의 사이드바, Windows 11의 Mica — 모두 Glassmorphism이다. 2020년부터 꾸준히 쓰이는 이유가 있다. 레이어 위에 레이어를 쌓는 현대 UI에서, 뒤의 콘텐츠를 완전히 가리지 않으면서도 전경을 명확히 구분하는 최적의 방법이기 때문이다.

핵심 CSS:

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
Glassmorphism 카드

Dashboard

Premium Plan

Monthly Revenue$12,450

72% of target

backdrop-filter: blur(16px) + rgba 배경 + 반투명 border. 뒤의 블롭이 유리 효과를 만든다.

적합한 제품: 모던 SaaS, 금융 대시보드, 프리미엄 기업 사이트, 모달/오버레이

장단점:

항목평가
퍼포먼스backdrop-filter가 GPU를 쓴다. 모바일에서 blur 값이 20px 이상이면 프레임 드롭 가능
접근성텍스트 대비 4.5:1 확보가 어렵다. 배경이 바뀌면 가독성이 달라진다 — fallback 배경색 필수
다크모드완전 지원. 오히려 다크 모드에서 더 돋보인다
모바일Safari에서 -webkit-backdrop-filter 필수. 성능 주의

실제 사례: Apple.com (제품 페이지), Linear (앱 UI), Stripe Dashboard

Tip: @supports not (backdrop-filter: blur(1px)) 으로 미지원 브라우저에 불투명 fallback을 제공하자.

Neumorphism — 소프트한 엠보싱

2020년 Dribbble에서 폭발적으로 유행했지만, 실무 적용은 제한적이다. 이유는 명확하다 — 접근성 문제. 배경과 요소의 색이 같으니 경계가 불분명하고, 시각장애인이나 저시력 사용자는 버튼과 배경을 구분하지 못한다.

그래도 웰니스, 명상, 피트니스 앱처럼 조용하고 차분한 인터페이스가 필요한 곳에서는 여전히 유효하다.

핵심 CSS:

.neumorph-card {
  background: #E4E4E7;
  border-radius: 14px;
  /* 핵심: 같은 배경색에 빛/그림자 두 방향 */
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 0.7),
     6px  6px 14px rgba(0, 0, 0, 0.15);
}

/* 눌림(pressed) 상태 — inset으로 전환 */
.neumorph-button:active {
  box-shadow:
    inset -2px -2px 6px rgba(255, 255, 255, 0.7),
    inset  2px  2px 6px rgba(0, 0, 0, 0.15);
}
Neumorphism 카드

Storage

7.2 / 10 GB

동일 배경색에 빛/그림자 두 개로 볼록/오목 효과. 버튼을 눌러 pressed 상태(inset shadow)를 확인하자.

장단점:

항목평가
퍼포먼스box-shadow만 쓰므로 빠르다
접근성낮은 대비가 치명적. WCAG AA 충족이 어렵다. 보조 지표(아이콘, 텍스트 레이블) 필수
다크모드부분 지원. 어두운 배경에서는 그림자 대비가 더 어려워진다
모바일터치 피드백(pressed state)을 반드시 구현해야 사용성이 유지된다

주의: Neumorphism을 메인 스타일로 쓰지 마라. 포인트 UI(슬라이더, 토글, 카드 1-2개)에만 부분 적용하는 것을 권장한다.

Neubrutalism — 거친 매력

Gumroad가 리브랜딩하면서 이 스타일을 전면 도입했고, Figma, Notion 등이 부분적으로 차용했다. 그라데이션 없음, 둥근 모서리 없음, 하드 섀도우 — Flat Design의 안티테제다.

핵심 CSS:

.neubrutalism-card {
  background: #FFDB58;
  border: 3px solid #000;
  box-shadow: 5px 5px 0px #000;
  border-radius: 0; /* 둥근 모서리 금지 */
}

/* 클릭 시 눌림 효과 */
.neubrutalism-button:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
Neubrutalism 카드

New Feature

Bold borders, hard shadows, no gradients. That's the rule.

border: 3px solid #000 + box-shadow: 4px 4px 0 #000. 클릭 시 translate로 눌림 효과. 그라데이션 없음.

적합한 제품: Gen Z 브랜드, 스타트업, 크리에이티브 에이전시, Figma 스타일 SaaS

장단점:

항목평가
퍼포먼스그라데이션/블러 없으므로 최상급. 로딩이 빠르다
접근성WCAG AAA 달성 쉬움. 높은 대비, 굵은 텍스트, 명확한 경계
다크모드완전 지원. border와 shadow 색만 조정하면 된다
모바일높음. 작은 화면에서도 요소 구분이 명확하다

실제 사례: Gumroad, Figma (부분), ProductHunt (부분)

표면 효과 스타일 비교

같은 버튼이 스타일에 따라 어떻게 달라지는지 직접 비교해보자.

같은 버튼, 다른 스타일
Flat Design

그림자 없음, 단색, 둥근 모서리

Glassmorphism

반투명 + blur + 유리 테두리

Neubrutalism

굵은 테두리 + 하드 섀도우

같은 "Subscribe" 버튼도 스타일에 따라 전혀 다른 느낌을 준다. 제품의 성격에 맞는 스타일을 선택하자.

Part 2: 레이아웃 스타일

UI 스타일은 표면만이 아니다. 콘텐츠를 어떻게 배치하느냐도 핵심이다.

Bento Grid — 모듈형 대시보드

Apple이 WWDC 2023에서 이 레이아웃을 대대적으로 사용하면서 트렌드가 됐다. 다양한 크기의 카드를 비대칭 그리드에 배치하여, 정보의 **위계(hierarchy)**를 시각적으로 드러낸다.

핵심 CSS:

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}

.bento-card {
  border-radius: 24px;
  background: #1E1E2E;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 큰 카드: 2x2 */
.bento-card--large {
  grid-column: span 2;
  grid-row: span 2;
}

/* 와이드 카드: 4x1 */
.bento-card--wide {
  grid-column: span 4;
}
Bento Grid 레이아웃

Revenue

$48.2K

+12.5% from last month

Users

2,847

CR

3.2%

NPS

72

Live Activity

API: healthyDB: healthyCDN: degraded

grid-template-columns + 다양한 col-span/row-span으로 비대칭 그리드 구성. Apple 스타일 대시보드에 적합.

적합한 제품: 대시보드, 포트폴리오, Apple 스타일 마케팅 페이지, 피쳐 쇼케이스

장단점:

항목평가
퍼포먼스CSS Grid만으로 구현 가능. 매우 빠르다
접근성WCAG AA. 카드 간 명확한 구분
다크모드완전 지원
모바일반응형 설계 필수. 4열 -> 2열 -> 1열로 접히는 미디어 쿼리 필요

Tip: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))로 반응형 Bento를 한 줄로 구현할 수 있다.

Editorial Grid / Magazine — 매거진 레이아웃

뉴스 사이트, 블로그, 디지털 매거진의 기본 골격이다. 비대칭 그리드, drop cap, pull quote, 세리프 타이포 — 인쇄 매거진의 리듬을 웹으로 옮긴 스타일이다. NYT, The Verge, Medium이 이 패턴의 변형을 쓰고 있다.

특징:

  • 비대칭 그리드 (grid-template-columns: 2fr 1fr 등 가변 비율)
  • Drop Cap (첫 글자 크게) + Pull Quote (인용 강조)
  • 세리프 본문 + 볼드 산세리프 헤딩 조합
  • 이미지가 레이아웃을 주도하는 구조

핵심 CSS:

.editorial-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

/* Drop Cap — 첫 글자 크게 */
.article-body::first-letter {
  float: left;
  font-size: 4em;
  line-height: 1;
  margin-right: 0.5rem;
  font-family: Georgia, serif;
  font-weight: 700;
}

/* Pull Quote */
.pull-quote {
  border-left: 3px solid #000;
  padding-left: 1.5rem;
  font-style: italic;
  font-size: 1.25em;
  font-family: Georgia, serif;
}
Editorial Grid / Magazine 레이아웃

Feature Story

The Art of Typography in Digital Design

By J. Kim · 8 min read

Typography defines the character of a publication. In editorial design, the interplay between serif headings and clean body text creates a rhythm that guides the reader through long-form content.

“Good typography is invisible. Bad typography is everywhere.”

Culture

Minimalism in Modern Magazines

Design

Grid Systems: From Print to Web

비대칭 그리드 + drop cap + pull quote + serif 타이포. 인쇄 매거진의 리듬을 웹에 옮긴 레이아웃.

장단점:

항목평가
퍼포먼스CSS Grid + 타이포만으로 구현. 매우 빠르다
접근성WCAG AAA. 높은 대비, 읽기 쉬운 세리프 타이포
다크모드완전 지원
모바일높음. 모바일에서 column-count: 1로 자연스럽게 리플로우

Do / Don't:

/* ✅ Do — 비대칭 그리드로 시각적 위계 */
.editorial {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

/* ❌ Don't — 균등 그리드는 매거진 느낌이 나지 않는다 */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

적합한 제품: 뉴스 사이트, 블로그, 매거진, 장문 아티클, 에디토리얼 콘텐츠

실제 사례: The New York Times, The Verge, Medium, Substack

Dimensional Layering — 레이어 기반 깊이감

카드 위에 카드, 모달 위에 토스트 — 현대 UI는 레이어의 집합이다. Dimensional Layering은 z-index와 box-shadow를 4단계 elevation 시스템으로 체계화한 스타일이다. Material Design의 elevation 개념을 더 시각적으로 밀어붙인 것이라고 보면 된다.

특징:

  • 4단계 elevation 시스템 (sm/md/lg/xl)
  • 겹치는 카드로 공간감 표현
  • shadow 크기 = 깊이 (높을수록 큰 그림자)
  • backdrop-filter로 레이어 간 분리 강화

핵심 CSS:

/* 4단계 elevation */
.elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.elevation-2 { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.elevation-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.elevation-4 { box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

/* 레이어 겹침 */
.layered-card {
  position: relative;
  z-index: 3;
  transform: translateZ(0); /* GPU 가속 */
}
Dimensional Layering

Background Layer

elevation-2

Top Layer

elevation-3

Shadow 크기로 깊이를 표현

elevation-4

z-index + box-shadow 단계(sm/md/lg/xl)로 레이어 깊이감 표현. 높을수록 그림자가 커진다.

장단점:

항목평가
퍼포먼스box-shadow는 빠르지만, backdrop-filter 조합 시 모바일 주의
접근성보통. 스크린 리더가 레이어 순서를 인식하지 못할 수 있다. aria-label로 보완
다크모드완전 지원. 다크에서 shadow 대신 밝은 border로 깊이 표현
모바일좋음. 다만 겹침이 과하면 좁은 화면에서 혼란 유발

Do / Don't:

/* ✅ Do — 일관된 elevation 시스템 */
:root {
  --elevation-1: 0 1px 3px rgba(0,0,0,0.1);
  --elevation-2: 0 4px 6px rgba(0,0,0,0.1);
  --elevation-3: 0 10px 20px rgba(0,0,0,0.1);
  --elevation-4: 0 20px 40px rgba(0,0,0,0.15);
}

/* ❌ Don't — 임의의 shadow 값을 산발적으로 쓰지 말 것 */
.card-a { box-shadow: 0 3px 7px rgba(0,0,0,0.2); }
.card-b { box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.card-c { box-shadow: 2px 8px 12px rgba(0,0,0,0.1); }

적합한 제품: 대시보드, 카드 레이아웃, 모달, 네비게이션, 제품 쇼케이스, SaaS

실제 사례: Apple (제품 페이지 레이어), Stripe (카드 깊이), Notion (모달/오버레이)

Data-Dense Dashboard — 데이터 밀도 높은 대시보드

BI 대시보드의 핵심 레이아웃이다. 최소 패딩, 작은 폰트, 12컬럼 그리드로 한 화면에 최대한 많은 정보를 담는다. "예쁘게"가 아니라 "많이, 정확하게"가 목표인 스타일이다.

특징:

  • 12컬럼 그리드, gap 8px, padding 12px
  • 폰트 12~14px — 가독성은 유지하되 밀도 극대화
  • KPI 카드 + 테이블 + 차트 위젯 조합
  • 상태 색상 체계: 성공(green #22C55E), 경고(amber #F59E0B), 위험(red #EF4444)

핵심 CSS:

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  padding: 12px;
}

.kpi-card {
  padding: 12px;
  font-size: 12px;
}

/* 테이블 — compact */
.data-table th,
.data-table td {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
}

/* sticky header for scrollable tables */
.data-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #FAFAFA;
}
Data-Dense Dashboard

Total Users

24.5K

+12%

Revenue

$182K

+8%

Bounce Rate

34%

-3%

Avg Session

4m 32s

-8%

PageViewsBounce
/dashboard12,84723%
/analytics8,23431%
/settings3,10258%
/billing2,89145%

12컬럼 그리드 + 최소 패딩(8\~12px) + 작은 폰트(12\~14px). 정보 밀도를 극대화한 레이아웃.

장단점:

항목평가
퍼포먼스차트 라이브러리 의존. D3/Recharts 초기 로딩에 주의
접근성WCAG AA. 작은 폰트가 저시력 사용자에겐 어려울 수 있다. 폰트 크기 조절 옵션 권장
다크모드완전 지원
모바일보통. 데이터 밀도가 높아서 모바일에선 스크롤이 많아진다. 핵심 KPI만 먼저 보여주는 전략 필요

Do / Don't:

/* ✅ Do — 일관된 compact spacing */
.dashboard {
  --gap: 8px;
  --card-padding: 12px;
  --font-size: 13px;
}

/* ❌ Don't — 데이터 대시보드에 과한 여백은 정보 밀도를 죽인다 */
.dashboard {
  gap: 24px;
  padding: 32px;
  font-size: 16px;
}

적합한 제품: BI 대시보드, 재무 분석, 엔터프라이즈 리포팅, 운영 대시보드

실제 사례: Grafana, Datadog, Google Analytics, Mixpanel

Executive Dashboard — 요약형 대시보드

Data-Dense Dashboard의 정반대다. 핵심 KPI 3~5개만, 큰 숫자와 트렌드 화살표로 구성한다. C레벨 임원이 10초 안에 상황을 파악할 수 있어야 한다. "많이"가 아니라 "핵심만, 크게"가 원칙이다.

특징:

  • KPI 카드 최대 4~6개 (그 이상은 Data-Dense로)
  • 메트릭 숫자: 24~48px 대형 폰트
  • 트렌드 표시: 스파크라인 + 상태 색상 (border-left)
  • 신호등 체계: 정상(green), 주의(yellow), 위험(red)

핵심 CSS:

.executive-kpi {
  display: flex;
  gap: 1.5rem;
}

.kpi-card {
  border-left: 3px solid var(--status-color);
  padding: 1.5rem;
  background: #FAFAFA;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.kpi-value {
  font-size: 48px;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1;
}

/* 인라인 스파크라인 */
.sparkline {
  height: 32px;
  width: 80px;
}
Executive Dashboard

Revenue

$4.2M

+18%

Active Users

128K

+5%

Churn Rate

2.8%

+0.3%

큰 KPI 숫자(24\~48px) + border-left 상태 색상 + 인라인 스파크라인. 한 눈에 핵심 지표를 파악.

장단점:

항목평가
퍼포먼스매우 빠르다. 차트가 최소화되어 있다
접근성WCAG AA. 큰 숫자, 명확한 색상 코딩
다크모드완전 지원
모바일낮음. 큰 카드가 모바일에선 스크롤을 유발. 모바일에선 KPI를 세로로 쌓는 것을 권장

Do / Don't:

/* ✅ Do — 큰 숫자 + 상태 색상 border */
.kpi-value { font-size: 48px; font-weight: 900; }
.kpi-card { border-left: 3px solid var(--status-green); }

/* ❌ Don't — Executive 대시보드에 테이블이나 복잡한 차트를 넣지 말 것 */
.executive-dashboard table { /* ... */ }
.executive-dashboard .complex-chart { /* ... */ }

적합한 제품: C레벨 대시보드, 비즈니스 요약 리포트, 의사결정 대시보드, 전략 기획 뷰

실제 사례: Salesforce (경영 대시보드), Tableau (요약 뷰), Power BI (Executive Summary)

Part 3: 모드 & 접근성 스타일

Dark Mode (OLED)

다크모드는 이제 선택이 아니라 필수다. 하지만 "배경만 검게" 바꾸는 것은 다크모드가 아니다. Material Design의 다크 테마 가이드라인에 따르면, 표면 높이(elevation)에 따라 밝기가 달라져야 한다.

핵심 CSS:

:root {
  /* Light */
  --bg-base: #FFFFFF;
  --bg-surface: #F5F5F5;
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* OLED Dark — 배경은 #000, 표면은 #121212 */
    --bg-base: #000000;
    --bg-surface: #121212;
    --text-primary: #E0E0E0;
    --text-secondary: #A0A0A0;
  }
}

/* 표면 높이에 따른 밝기 차이 */
.surface-0 { background: var(--bg-base); }      /* #000 */
.surface-1 { background: #121212; }              /* 기본 표면 */
.surface-2 { background: #1E1E1E; }              /* 카드, 모달 */
.surface-3 { background: #2C2C2C; }              /* 호버 상태 */
Light vs Dark Mode

Card Title

Dark mode uses #121212 instead of pure #000000 to reduce eye strain. Surface elevation uses lighter shades.

PrimarySecondary

토글을 눌러 비교. OLED dark mode는 배경 #000, 표면 #121212, 텍스트 #E0E0E0이 기본 공식이다.

적합한 제품: 모든 제품. 특히 코딩 플랫폼, 엔터테인먼트, 야간 사용 앱

핵심 규칙:

규칙설명
순수 검정(#000) 배경OLED 디스플레이에서 픽셀을 꺼서 배터리 절약
표면 높이 = 밝기elevation이 높을수록 밝은 회색 (#121212 -> #1E1E1E -> #2C2C2C)
채도 감소다크모드에서 원색은 눈이 아프다. 채도를 10-20% 낮추자
텍스트 #E0E0E0순백(#FFF)은 대비가 너무 강해 눈이 피로해진다

실제 사례: Discord, Spotify, VS Code, GitHub (어두운 기본값)

Part 4: 트렌드 & 표현 스타일

주요 트렌드 스타일 요약

이 카테고리의 스타일은 개성이 강하다. 메인 스타일보다는 포인트로 부분 적용하는 것이 안전하다.

스타일핵심 CSS적합한 제품퍼포먼스접근성
Retro-Futurismtext-shadow: 0 0 10px neon, CRT scanline overlay게임, 음악, 테크 브랜드보통주의
Cyberpunk UIcolor: #00FF00, font-family: monospace, glitch animation게임, 크립토, 개발자 도구보통낮음
Y2K AestheticNeon pink/purple, metallic gradients, bubble fonts패션, 음악, Gen Z 브랜드보통주의
VaporwaveSynthwave gradients, grid perspective, glitch음악, 게임, 크리에이티브 포트폴리오보통낮음
Memphis DesignBold geometric shapes, clashing colors, 80s patterns크리에이티브 에이전시, 이벤트좋음주의

마이크로인터랙션 & 모션

스타일핵심 기법주의점
Micro-interactionshover scale, click ripple, toggle springprefers-reduced-motion 반드시 존중
Motion-Drivenscroll-triggered animation, page transitions과하면 어지럽다. 핵심 동선에만 적용
Kinetic Typographyfont-size: clamp(), letter-spacing animation스크린 리더 대응 필수. aria-label 활용
Parallax Storytellingscroll-driven parallax, transform: translateZ()모바일 퍼포먼스 최악. iOS Safari 이슈 있음
/* 모션 대응 — 이것만큼은 반드시 넣자 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Part 5: 미니멀리즘 계열

미니멀리즘은 하나가 아니다. "적게 쓴다"는 철학은 같지만, 접근 방식이 다르다.

스타일핵심 차이CSS 키워드적합한 제품
Minimalism (Swiss)그리드 + 여백 + 산세리프display: grid, gap: 2rem, font-family: sans-serif엔터프라이즈, SaaS, 문서
Flat Design그림자/그라데이션 제거. 단색box-shadow: none, 솔리드 컬러모바일 앱, 크로스플랫폼 MVP
Exaggerated Minimalism극단적 여백 + 거대 타이포font-size: clamp(3rem, 10vw, 12rem), padding: 8rem+패션, 건축, 럭셔리 브랜드
Swiss Modernism 2.012컬럼 그리드 + 수학적 비율grid-template-columns: repeat(12, 1fr), 8px 베이스 유닛기업 사이트, 에디토리얼, 뮤지엄
E-Ink / Paper종이 질감 + 세리프 + 무채색background: #FDFBF7, font-family: serif, 노 애니메이션독서 앱, 디지털 신문, 집중 글쓰기
Zero Interface보이는 UI 최소화AI/음성 기반, 최소 시각 요소음성 어시스턴트, AI 플랫폼
같은 카드, 6가지 미니멀 스타일

Dashboard

Monthly active users reached 12,450 this quarter with a 15% growth rate.

그리드 + 여백 + 산세리프. 탭을 눌러 같은 정보가 스타일에 따라 얼마나 다르게 느껴지는지 비교하자.

Part 6: 신흥 스타일 & 차세대

2024-2026 주목할 스타일

스타일핵심 CSS/기법트렌드 포인트
Spatial UI (VisionOS)backdrop-filter: blur(40px) saturate(180%), border-radius: 24pxApple Vision Pro에서 시작. 공간감 있는 UI
AI-Native UI채팅 인터페이스, 스트리밍 응답, 제안 칩ChatGPT/Claude 이후 모든 앱에 AI 레이어 추가
Liquid GlassCSS @property로 커스텀 변수 애니메이션, 복잡한 그라데이션 메시iOS 26에서 공식 도입. 유리보다 유동적인 표면
Tactile Digitalborder-radius: 50%, spring physics, 젤리 버튼모바일 앱에서 터치 피드백 강화
Gradient Mesh / Auroraconic-gradient, radial-gradient 다중 스톱히어로 섹션 배경에 많이 쓰임

Part 7: Landing Page 스타일

랜딩 페이지는 **전환(conversion)**이 목적이다. 예쁜 것보다 효과적인 것이 중요하다.

스타일핵심 전략적합한 상황모바일
Hero-Centric큰 히어로 + CTA 하나제품 런칭, SaaS 랜딩풀 지원
Conversion-Optimized폼 중심, 이탈 방지, A/B 테스트리드 수집, 무료체험 가입풀 지원
Feature-Rich Showcase다중 기능 섹션, 비교 테이블엔터프라이즈 SaaS좋음
Minimal & Direct텍스트 + CTA. 끝인디 프로덕트, 컨설팅풀 지원
Social Proof-Focused후기/로고 벽 + 통계B2B SaaS, 전문 서비스풀 지원
Interactive Product Demo임베디드 데모/비디오툴/소프트웨어좋음
Trust & Authority인증서/뱃지/수상 이력헬스케어, 금융풀 지원
Storytelling-Driven스크롤 내러티브브랜드 스토리, 프리미엄 제품좋음

  • 카테고리 맵
  • Part 1: 표면 효과 스타일
  • Glassmorphism — 유리 위의 UI
  • Neumorphism — 소프트한 엠보싱
  • Neubrutalism — 거친 매력
  • 표면 효과 스타일 비교
  • Part 2: 레이아웃 스타일
  • Bento Grid — 모듈형 대시보드
  • Editorial Grid / Magazine — 매거진 레이아웃
  • Dimensional Layering — 레이어 기반 깊이감
  • Data-Dense Dashboard — 데이터 밀도 높은 대시보드
  • Executive Dashboard — 요약형 대시보드
  • Part 3: 모드 & 접근성 스타일
  • Dark Mode (OLED)
  • Part 4: 트렌드 & 표현 스타일
  • 주요 트렌드 스타일 요약
  • 마이크로인터랙션 & 모션
  • Part 5: 미니멀리즘 계열
  • Part 6: 신흥 스타일 & 차세대
  • 2024-2026 주목할 스타일
  • Part 7: Landing Page 스타일
  • 카테고리 맵
  • Part 1: 표면 효과 스타일
  • Glassmorphism — 유리 위의 UI
  • Neumorphism — 소프트한 엠보싱
  • Neubrutalism — 거친 매력
  • 표면 효과 스타일 비교
  • Part 2: 레이아웃 스타일
  • Bento Grid — 모듈형 대시보드
  • Editorial Grid / Magazine — 매거진 레이아웃
  • Dimensional Layering — 레이어 기반 깊이감
  • Data-Dense Dashboard — 데이터 밀도 높은 대시보드
  • Executive Dashboard — 요약형 대시보드
  • Part 3: 모드 & 접근성 스타일
  • Dark Mode (OLED)
  • Part 4: 트렌드 & 표현 스타일
  • 주요 트렌드 스타일 요약
  • 마이크로인터랙션 & 모션
  • Part 5: 미니멀리즘 계열
  • Part 6: 신흥 스타일 & 차세대
  • 2024-2026 주목할 스타일
  • Part 7: Landing Page 스타일
📚

프론트엔드 UI/UX 마스터 가이드

  1. ✅1. 프론트엔드 UI/UX 체크리스트 — 실전 가이드
  2. ✅2. UX 가이드라인 심화편 — 내비게이션부터 AI 인터랙션까지
  3. 🔍3. 프론트엔드 UI 스타일 카탈로그 — 67개 스타일 실전 가이드
  4. ⏳4. 컬러 팔레트 & 타이포그래피 — 업종별 실전 레퍼런스 북
←UX 가이드라인 심화편 — 내비게이션부터 AI 인터랙션까지
컬러 팔레트 & 타이포그래피 — 업종별 실전 레퍼런스 북→

관련 포스트

이 포스트와 관련된 다른 글들을 확인해보세요

프론트엔드 UI 스타일 카탈로그 — 67개 스타일 실전 가이드

Glassmorphism부터 Neubrutalism까지, 67개 UI 스타일을 카테고리별로 정리하고 CSS 구현 핵심과 장단점을 비교했다.

2026년 4월 8일•9분
ui-uxcssdesign+1

프론트엔드 UI/UX 체크리스트 — 실전 가이드

접근성부터 애니메이션까지, 프론트엔드 개발자가 챙겨야 할 UI/UX 규칙을 코드 예시와 인터랙티브 데모로 정리했다.

2026년 4월 8일•12분
ui-uxaccessibilityfrontend+3

컬러 팔레트 & 타이포그래피 — 업종별 실전 레퍼런스 북

96개 업종별 컬러 팔레트와 57개 폰트 페어링 데이터를 기반으로, 컬러 이론부터 다크모드 변환, 한글 폰트 페어링까지 실전에서 바로 쓸 수 있는 디자인 레퍼런스.

2026년 4월 8일•5분
ui-uxcssdesign+3

Comments