← 목록으로

UI 디자인 트렌드 12

디자인 스타일을 알면 Claude에게 더 정확히 요청할 수 있습니다

용어 사전 46선 파일 유형 비교 스킬 라이브러리 컴포넌트 갤러리 UI 디자인 라이선스 가이드

"뉴모피즘 스타일로 만들어줘", "글라스모피즘 카드 넣어줘"... 디자인 트렌드 이름을 알면 Claude가 원하는 스타일을 바로 만들어 줍니다.
각 스타일의 특징과 실제 모습을 확인하고, 프롬프트에 활용해 보세요.

🛠 플랫폼 시스템 · 기업이 만든 디자인 언어
1
머터리얼 디자인 Material Design

구글이 개발한 디자인 시스템으로, 웹과 모바일 앱에서 가장 널리 사용됩니다. 그림자(elevation)를 활용해 깊이감을 표현하고, 그리드 기반 레이아웃과 일관된 타이포그래피로 모든 플랫폼에서 통일된 경험을 제공합니다.

그리드 기반 레이아웃 그림자로 깊이감 표현 반응형 애니메이션 크로스 플랫폼 통일감
material-app.example.com
제품소개문의

아름다운 앱을 만드세요

머터리얼 디자인은 그림자와 깊이감으로 직관적인 시각 언어를 만듭니다.

시작하기

컴포넌트

버튼, 카드 등 UI 요소

레이아웃

반응형 그리드 시스템

테마

색상과 타이포그래피

+
2
쿠퍼티노 디자인 Cupertino Design

애플의 인터페이스 디자인 언어로, 깔끔한 선과 매끄러운 곡선이 특징입니다. 미니멀리즘을 지향하며, 충분한 여백과 반투명(blur) 효과로 세련되고 직관적인 사용자 경험을 만들어냅니다.

깔끔한 선과 매끄러운 곡선 미니멀리즘 미학 반투명·흐림 효과 충분한 여백 활용
cupertino-app.example.com
일반디스플레이

다시 오신 걸 환영합니다

나만의 맞춤 경험이 준비되어 있습니다.

계속하기
Wi

Wi-Fi

연결됨

Bt

블루투스

켜짐

Al

알림

배너, 소리

즐겨찾기
설정
입체 · 질감 · 그림자와 효과로 깊이감 표현
3
스큐어모피즘 Skeuomorphism

실제 물체의 질감과 재료를 거의 그대로 재현하는 디자인 방식입니다. 가죽, 나무, 금속 등의 텍스처와 3D 효과를 적극 활용하여 마치 실물을 만지는 듯한 느낌을 줍니다. 초기 iOS(~iOS 6)의 대표 스타일입니다.

실물 텍스처 재현 3D 입체 효과 높은 디자인 리소스 직관적 비유 활용
classic-design.example.com
갤러리소개

실물 질감 디자인

디지털 화면에서 실제 물체를 만지는 듯한 촉감을 경험하세요.

둘러보기

메모

자유롭게 기록

음악

노래 재생

메일

받은편지함

4
뉴모피즘 Neumorphism

스큐어모피즘과 플랫 디자인을 결합한 새로운 트렌드입니다. 배경과 같은 색상의 요소에 밝은 그림자와 어두운 그림자를 동시에 적용하여 볼록하게 솟아오르거나 오목하게 파인 듯한 부드러운 입체감을 만듭니다.

부드럽고 둥근 느낌 볼록/오목 착시 효과 밝은+어두운 이중 그림자 배경과 동일 색상
soft-ui.example.com
대시보드프로필설정

부드럽고 은은하게

배경에서 자연스럽게 떠오르는 요소들, 부드러운 그림자가 만드는 입체감.

시작하기
📈

분석

지표 추적

🔔

알림

실시간 소식

🔒

보안

안전한 보호

5
클레이모피즘 Claymorphism

3D 점토(클레이) 느낌의 부드럽고 둥근 UI 요소로, 장난감처럼 친근한 느낌을 줍니다. 파스텔 톤 배경에 이중 그림자(외부+내부)를 조합해 부풀어 오른 듯한 입체감을 만듭니다.

파스텔 톤 배경 이중 내부/외부 그림자 부풀어 오른 3D 효과 둥근 모서리
clay-ui.example.com
서비스소개

부드럽고 포근한 디자인

점토처럼 말랑한 UI가 사용자에게 친근함을 전달합니다.

체험하기
🎨

디자인

창의적 표현

🔬

분석

데이터 인사이트

🌱

성장

꾸준한 발전

6
글라스모피즘 Glassmorphism

투명 유리처럼 배경이 비치는 효과를 활용한 디자인 방식입니다. backdrop-filter: blur와 반투명 배경색, 미세한 테두리를 조합하여 깊이감과 세련된 현대적 감각을 동시에 표현합니다.

유리 투명 효과 빛의 반사·굴절 블러 배경 처리 레이어 깊이감
glass-ui.example.com
기능요금제

투명한 아름다움

서리 낀 유리처럼, 레이어 너머를 비추는 깊이감을 경험하세요.

더 알아보기

디자인

현대적 미학

속도

빠른 성능

💡

아이디어

창의적 솔루션

🌈 색상 · 분위기 · 색과 빛으로 감성 연출
7
다크 모드 디자인 Dark Mode Design

어두운 배경에 밝은 텍스트와 네온 액센트를 배치하는 디자인 패턴입니다. 눈의 피로를 줄이고 OLED 배터리 절약 효과도 있습니다. 순수 검정(#000)이 아닌 다크 그레이 배경에 명도로 깊이 위계를 표현합니다.

다크 그레이 배경 네온 액센트 컬러 밝기로 깊이 표현 눈 피로 감소
dark-mode.example.com
대시보드분석설정

어둠 속의 선명함

눈에 편안한 다크 톤 위에 네온 컬러가 빛나는 인터페이스.

시작하기
📈

매출

실시간 추적

👥

사용자

활성 현황

성능

서버 상태

8
오로라 UI Aurora UI

북극광(오로라)에서 영감을 받은 디자인으로, 여러 색상이 자연스럽게 섞이는 메쉬 그라데이션과 흐릿한 빛번짐 효과가 특징입니다. 몽환적이고 신비로운 분위기를 연출합니다.

메쉬 그라데이션 빛번짐 블러 효과 몽환적 분위기 색상 블렌딩
aurora-ui.example.com
기능갤러리

빛의 하모니

오로라처럼 여러 색이 자연스럽게 어우러지는 신비로운 화면.

탐험하기
🌈

그라데이션

자연스러운 색 전환

빛번짐

부드러운 블러

🌑

분위기

몽환적 연출

9
레트로 / Y2K Retro / Y2K Design

1990년대 말~2000년대 초 인터넷 초기의 향수를 불러일으키는 복고풍 디자인입니다. 메탈릭 텍스처, 비비드한 핑크/보라 팔레트, 반짝이는 장식 요소가 특징입니다. Z세대를 중심으로 재유행하고 있습니다.

메탈릭 텍스처 비비드 핑크/보라 반짝이 장식 복고 감성
retro-y2k.example.com
갤러리소개

✦ 레트로 감성 ✦

2000년대 초반의 반짝이는 감성을 현대적으로 재해석합니다.

타임머신 탑승
🔮

크리스탈

반짝이는 효과

🌟

네온 별

빛나는 장식

💫

사이버

디지털 감성

구조 · 표현 · 레이아웃과 개성으로 차별화
10
네오 브루탈리즘 Neo-Brutalism

건축의 브루탈리즘에서 영감을 받아 의도적으로 거칠고 날것의 느낌을 추구합니다. 두꺼운 검정 테두리와 강렬한 원색 배경, 단단한 그림자로 투박하지만 강렬한 인상을 줍니다. 2024-2025년 가장 핫한 디자인 트렌드 중 하나입니다.

두꺼운 검정 테두리 강렬한 원색 대비 단단한 오프셋 그림자 장식 최소화
brutal-design.example.com
블로그문의

거침없이 직진하는 디자인

꾸밈 없는 투박함이 오히려 강렬한 인상을 남깁니다.

지금 시작

기획

아이디어 정리

🔨

개발

빠른 구현

🚀

배포

즉시 출시

11
벤토 그리드 Bento Grid

일본 도시락(벤토)처럼 다양한 크기의 카드를 격자 안에 깔끔하게 배치하는 레이아웃입니다. Apple이 적극 활용하면서 2024-2025년 가장 주목받는 레이아웃 트렌드가 되었습니다. 정보 밀도가 높지만 정돈된 느낌을 줍니다.

다양한 카드 크기 CSS Grid 기반 높은 정보 밀도 정돈된 레이아웃
bento-layout.example.com
기능요금소개
📊

실시간 대시보드

핵심 지표를 한눈에 파악하세요

🔔

알림

즉시 알려드려요

🔒

보안

안전하게 보호

💡

AI 인사이트

데이터 기반 추천

12
타이포그래피 중심 디자인 Typography-Driven Design

이미지나 아이콘 대신 대담한 타이포그래피 자체를 주인공으로 삼는 디자인입니다. 초대형 히어로 텍스트, 가변 폰트, 텍스트 마스킹 등을 활용해 글자만으로 강렬한 시각적 위계를 만듭니다.

초대형 히어로 텍스트 가변 폰트 활용 텍스트로 구조 형성 극단적 여백
typo-design.example.com
작업소개연락처

글자가
곧 디자인

이미지 없이 타이포그래피만으로 강렬한 첫인상을 만듭니다.

자세히 보기

크기

글자 크기의 대비로 시각적 위계를 만듭니다

굵기

얇고 굵은 서체의 조합이 리듬감을 줍니다

여백

넉넉한 공간이 텍스트를 더 돋보이게 합니다

이제 Claude에게 디자인 스타일을 지정해 보세요!

"뉴모피즘 스타일로 로그인 폼 만들어줘"
"글라스모피즘 카드 레이아웃 넣어줘"
"머터리얼 디자인 버튼으로 바꿔줘"
"쿠퍼티노 스타일 토글 스위치 추가해줘"