← 목록으로

UI 디자인 트렌드 30

같은 스톱워치도, 디자인 스타일이 바뀌면 이렇게 달라집니다

EDA 차트 UI 디자인 UI 컴포넌트 SVG 아이콘

"뉴모피즘 스타일로 만들어줘", "글라스모피즘 카드 넣어줘"... 디자인 트렌드 이름을 알면 Claude가 원하는 스타일을 바로 만들어 줍니다.
같은 스톱워치를 30가지 스타일로 만들어 비교해 보세요. 어떤 분위기가 우리 서비스에 맞을지 한눈에 보입니다.

🕰 시대별 진화 30년, 다섯 번의 전환

웹과 앱의 시각 언어는 지난 30년간 크게 다섯 번 바뀌었습니다. 화려한 입체에서 극단적 평면으로, 다시 부드러운 입체로. 지금은 AI와 공간 컴퓨팅이 이끄는 다원화의 시대입니다. 아래는 각 시대를 대표하는 로고입니다.

1990s–2000s
입체와 광택3D & Glossy
예: 윈도우 XP

모든 로고에 그림자와 유리 광택을 넣던 시대. 윈도우 XP의 광택 아이콘과 애플 아쿠아 인터페이스가 기준을 세웠습니다.

2010–2013
스큐어모피즘Skeuomorphism
예: 인스타그램 옛 로고

디지털을 실물처럼. 인스타그램 초기 로고처럼 가죽·금속·유리를 사실적으로 묘사했습니다.

2013–2018
플랫 디자인Flat Design
예: 유튜브

스큐어모피즘에 대한 반작용. 그림자를 걷어내고 단색과 평면, 밝은 색으로 단순화했습니다.

2018–2022
뉴모피즘Neumorphism
예: 애플 빅서 (macOS, 2020)

부드러운 그림자로 만든 반쯤 평면. 애플 빅서 아이콘처럼 눌러보고 싶은 촉감의 인터페이스가 등장했습니다.

Anthropic
2022–현재
AI·공간 시대AI & Spatial
예: 앤트로픽 (Anthropic)

AI 브랜딩과 공간 컴퓨팅이 이끄는 시대. 하나의 스타일보다 몰입과 다양성이 특징입니다.

🪟 입체와 광택 1990s–2000s · 화려한 입체와 광택
1
Y2K 레트로 Y2K Retro
00:00.00

2000년대 초 메탈릭 감성. 반짝이 장식과 비비드 핑크가 Z세대에 재유행.

메탈릭 반짝이 버블 버튼
2
베이퍼웨이브 NEW Vaporwave / Synthwave
00:00.00

80년대 신스웨이브 미학. 보라-핑크 그라데이션과 와이어프레임 격자 바닥.

레트로 그리드 크롬 텍스트 80s 무드
3
레트로 터미널 Retro Terminal · CLI
user@stopwatch:~$ ./run
00:00.00
>

옛 CRT 모니터의 호박색 글씨와 고정폭 글꼴. 스캔라인과 깜빡이는 커서로 복고 감성을 낸다.

고정폭 글꼴 CRT 스캔라인 복고
4
아이소메트릭 3D Isometric 3D
00:00.00

45도로 비스듬히 쌓아 올린 입체 블록. 게임·일러스트에서 온 도형적 깊이감으로 정보를 층층이 보여준다.

등각 투영 하드 섀도우 블록 적층
📷 스큐어모피즘 2010–2013 · 사실적 질감 모방
5
스큐어모피즘 Skeuomorphism
XII III VI IX

실물(가죽·금속·종이)을 그대로 재현. 시계 클릭으로 시작/정지, 옆쪽 버튼(시계 옆에 붙은 작은 손잡이)으로 리셋.

실물 텍스처 3D 입체 아날로그
6
엠보싱 Embossed · Letterpress
00:00.00

표면에 글자를 눌러 새긴 음각 질감. 빛과 그림자만으로 깊이를 만들어 종이·금속의 물성을 흉내 낸다.

음각 글자 레터프레스 단색 질감
7
그레인 텍스처 NEW Grainy / Noise
00:00.00

매끈한 그라데이션 위에 미세한 노이즈 입자를 얹어 아날로그 필름 같은 질감을 더한다. 밋밋함을 없애는 요즘 감성.

노이즈 입자 그라데이션 필름 질감
📱 플랫 디자인 2013–2018 · 평면과 플랫폼 표준
8
플랫 디자인 Flat Design
00:00.00

2013년 iOS 7로 촉발된 거대 전환점. 그림자·질감을 모두 없애고 단색·평면·기하학으로 단순화.

단색 평면 그림자 제거 2010년대 메이저
9
머터리얼 디자인 Material Design · Google
00:00.00
Elapsed Time

그림자로 깊이감을 표현하는 구글의 디자인 시스템. 화면에 떠 있는 듯한 동그란 메인 버튼이 트레이드마크입니다.

그림자 깊이감 떠 있는 메인 버튼 Roboto 서체
10
쿠퍼티노 Cupertino · Apple
00:00.00

애플 iOS의 디자인 언어. 얇은 선, 충분한 여백, SF 폰트로 미니멀하고 정제된 느낌.

미니멀 SF Pro 큰 여백
11
플루언트 디자인 Fluent · Microsoft
00:00.00

머터리얼·쿠퍼티노와 함께 3대 플랫폼 언어. 반투명 아크릴 질감과 은은한 빛 반사로 깊이를 표현하는 마이크로소프트 표준.

아크릴 질감 액센트 컬러 윈도우 표준
12
미니멀리즘 Minimalism · Swiss
Stopwatch
00:00.00

덜어내는 것이 곧 디자인. 무채색과 가는 선, 넉넉한 여백에 포인트 색 하나로 위계를 만든다.

여백 절제 스위스 스타일
13
모노크롬 Monochrome
00:00.00

색을 흑·백·회색으로 절제하는 규율. 색이 사라진 자리를 타이포와 여백, 대비가 채워 본질만 남긴다.

흑백 절제 강한 대비 본질 집중
14
멤피스 NEW Memphis Design
00:00.00

80년대 이탈리아 디자인 그룹의 펑키한 미학. 기하학 도형과 원색이 흩뿌려진 스타일.

기하학 도형 원색 팝 80s 펑키
15
타이포그래피 중심 Typography-Driven
Stopwatch / 01
00:00.00

이미지·아이콘 없이 글자 자체가 주인공. 초대형 텍스트와 극단적 여백으로 위계 형성.

초대형 텍스트 극단적 여백 에디토리얼
16
에디토리얼 Editorial · Magazine
00:00.00

잡지 지면처럼 큼직한 세리프와 굵은 괘선, 트래킹을 준 라벨로 짜인 레이아웃. 정보에 권위와 격을 입힌다.

세리프 숫자 괘선 구획 매거진 격자
🫧 뉴모피즘 2018–2022 · 소프트 UI와 유리
17
뉴모피즘 Neumorphism
00:00.00

밝은+어두운 그림자를 동시에 줘서 배경에서 솟아오르거나 파인 듯한 부드러운 입체감.

이중 그림자 단색 배경 은은한 입체
18
클레이모피즘 Claymorphism
00:00.00

점토처럼 부풀어 오른 3D 느낌. 파스텔 톤과 친근한 둥근 모서리가 핵심.

파스텔 부풀린 3D 친근함
19
글라스모피즘 Glassmorphism
00:00.00

서리 낀 유리처럼 뒤 배경이 흐릿하게 비치는 효과. 뒷배경을 흐려 보이게 하는 처리가 핵심 기술입니다.

흐림 효과 반투명 겹친 레이어
20
다크 모드 Dark Mode
00:00.00

어두운 배경에 네온 액센트. 눈 피로 감소, OLED 절전 효과까지.

네온 글로우 OLED 절전 개발자 선호
21
오로라 UI Aurora UI
00:00.00

북극광에서 영감받은 메쉬 그라데이션. 몽환적이고 신비로운 분위기.

메쉬 그라데이션 빛번짐 몽환
✨ AI·공간 시대 2022–현재 · AI와 공간 컴퓨팅, 스타일 다원화
22
리퀴드 글래스 NEW Liquid Glass · Apple 2025
00:00.00

애플이 2025년 도입한 차세대 유리 효과. 굴절·하이라이트로 더 사실적인 입체감.

굴절 효과 iOS 26+ 하이라이트
23
공간 UI NEW Spatial UI · Vision Pro
00:00.00

Apple Vision Pro가 정립한 3D 공간 위 떠 있는 패널 디자인. 깊이감 있는 그림자와 살짝 기울어진 원근으로 공중 부양 느낌.

3D 깊이감 공중 부양 visionOS
24
홀로그래픽 NEW Holographic / Iridescent
00:00.00

보는 각도에 따라 색이 바뀌는 무지갯빛 포일 질감. 영롱하게 일렁이는 표면이 미래적이고 화사한 인상을 준다.

무지개 포일 각도 변화 펄 광택
25
프리즘 NEW Prism / Chromatic
00:00.00

빛이 프리즘을 통과해 갈라지듯 RGB가 살짝 어긋나는 색수차 효과. 어두운 배경 위 분광 띠가 첨단 감성을 낸다.

색수차 분광 띠 다크 베이스
26
사이버펑크 NEW Cyberpunk / Gaming HUD
00:00.00

SF 게임 HUD에서 영감받은 미래적 디자인. 스캔라인, 네온 글로우, 모서리를 자른 각진 형태가 특징.

스캔라인 네온 글로우 각진 모서리
27
벤토 그리드 Bento Grid
00:00.00
Elapsed
Reset
Lap
START

일본 도시락처럼 다양한 크기 카드를 격자 배치. Apple이 적극 활용 중.

CSS Grid 정보 밀도 정돈됨
28
네오 브루탈리즘 Neo-Brutalism
00:00.00

두꺼운 검정 테두리와 단단한 오프셋 그림자. 의도적으로 거친 날것의 멋.

두꺼운 테두리 하드 섀도우 2024 트렌드
29
콜라주 Collage · Scrapbook
00:00.00

찢은 종이와 마스킹 테이프, 비스듬히 겹친 조각으로 손으로 붙인 듯한 질감. 스크랩북 같은 따뜻한 수공예 감성.

찢은 종이 마스킹 테이프 조각 콜라주
30
핸드드로운 Hand-drawn · Sketchy
00:00.00

손으로 그린 듯 삐뚤빼뚤한 선과 손글씨체. Excalidraw·tldraw가 즐겨 쓰는 친근하고 편안한 인상.

손글씨체 친근함 Excalidraw

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

"뉴모피즘 스타일로 로그인 폼 만들어줘"
"글라스모피즘 카드 레이아웃 넣어줘"
"머터리얼 디자인 버튼으로 바꿔줘"
"멤피스 풍 일러스트 같은 배너 만들어줘"