글래스모피즘과 뉴모피즘: 2026년 UI 트렌드 구현 가이드

디자인

글래스모피즘뉴모피즘UI 트렌드CSS디자인 시스템

이 글은 누구를 위한 것인가

  • 글래스모피즘/뉴모피즘 효과를 프로젝트에 적용하려는 개발자
  • 트렌디한 UI를 접근성과 성능을 해치지 않고 구현하려는 팀
  • 다크모드에서도 동작하는 유리 효과 컴포넌트를 만들려는 개발자

들어가며

글래스모피즘은 backdrop-filter: blur()로 배경을 흐리게 만드는 "유리" 효과다. 뉴모피즘은 box-shadow를 이중으로 사용해 볼록/오목한 소프트 UI를 만든다. 둘 다 매력적이지만 접근성과 성능 트레이드오프가 있다.

이 글은 bluefoxdev.kr의 글래스모피즘 뉴모피즘 가이드 를 참고하여 작성했습니다.

1. 글래스모피즘 vs 뉴모피즘

[글래스모피즘]
  핵심 속성: backdrop-filter: blur(10px)
  배경: 반투명 (rgba + 낮은 opacity)
  테두리: 미세한 흰색/밝은 테두리
  효과: 배경이 흐려지는 유리 느낌
  
  주의사항:
  - backdrop-filter 성능 비용 (GPU 레이어)
  - 흐린 배경 위 텍스트 가독성 저하
  - @supports 분기 필요 (Safari 구버전)
  - 저시력자 접근성 문제

[뉴모피즘]
  핵심 속성: 이중 box-shadow (밝음 + 어두움)
  배경: 단색 (회색 계열)
  효과: 배경에서 튀어나온/들어간 느낌
  
  주의사항:
  - 단색 배경에서만 효과적
  - 저대비 → 접근성 최악 (WCAG 실패)
  - 실용 UI보다 장식용에 적합

[성능 고려]
  backdrop-filter: 합성 레이어 생성
  will-change: backdrop-filter (주의: 남용 금지)
  @supports (backdrop-filter: blur()):
    지원 브라우저만 효과 적용

2. 글래스모피즘/뉴모피즘 구현

/* 글래스모피즘 카드 */
.glass-card {
  /* 핵심: 반투명 배경 + 블러 */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
  
  /* 유리 테두리 효과 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  
  /* 미세한 그림자 */
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  
  padding: 24px;
}

/* backdrop-filter 미지원 폴백 */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.85);
  }
}

/* 다크모드 글래스 */
@media (prefers-color-scheme: dark) {
  .glass-card {
    background: rgba(15, 15, 25, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* 텍스트 가독성 보장 */
.glass-card .title {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-weight: 600;
}

/* 뉴모피즘 버튼 */
.neu-button {
  background: #e0e5ec;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  cursor: pointer;
  
  /* 볼록 효과: 왼위 밝음 + 오른아래 어두움 */
  box-shadow:
    6px 6px 12px rgba(163, 177, 198, 0.6),
    -6px -6px 12px rgba(255, 255, 255, 0.8);
  
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* 눌린 효과 */
.neu-button:active {
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.8);
  transform: scale(0.98);
}

/* 접근성: 포커스 링 명확하게 */
.neu-button:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
}

/* 뉴모피즘은 저대비 → 색상 텍스트로 보완 */
.neu-button {
  color: #4a5568; /* WCAG AA 충족하도록 확인 필수 */
  font-weight: 600;
}

// React 글래스모피즘 카드 컴포넌트
interface GlassCardProps {
  title: string;
  children: React.ReactNode;
  className?: string;
}

function GlassCard({ title, children, className }: GlassCardProps) {
  return (
    <div
      className={`glass-card ${className ?? ''}`}
      role="region"
      aria-label={title}
    >
      <h2 className="title">{title}</h2>
      <div className="content">{children}</div>
    </div>
  );
}

// 성능 최적화: 글래스 효과는 fixed 레이아웃에 사용
// 스크롤되는 긴 목록에는 사용 금지 (리페인트 비용)

마무리

글래스모피즘은 배경이 있는 히어로 섹션, 모달, 카드 등 포인트 UI에 적합하다. 스크롤되는 긴 목록에 남발하면 backdrop-filter 리페인트 비용으로 성능이 저하된다. 뉴모피즘은 저대비 문제로 실용 UI보다 장식용으로 제한하고, 반드시 충분한 색상 대비를 확보해야 한다.