디자인 스타일 사전
스큐어모피즘, 플랫, 머티리얼, 뉴모피즘, 글래스모피즘, 클레이모피즘, 네오 브루탈리즘, 3D 아이콘, 리퀴드 글래스를 같은 메모 아이콘으로 그려 직접 누르고 이웃 스타일과 바꿔 보며 익히고, AI에게 "예쁘게" 대신 붙여 넣을 부탁 문장을 복사합니다.
예시가 화면에 보이면 손가락 표시가 저절로 시연합니다. 직접 눌러 봐도 됩니다.
실물을 닮은 스타일
종이·플라스틱·찰흙처럼 손에 잡히는 물건의 질감과 입체를 화면에 옮깁니다.
-
스큐어모피즘
Skeuomorphism가죽·종이·나무·금속처럼 실제 물건의 질감과 빛 반사를 그대로 흉내 내는 스타일입니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때처음 보는 사람도 '실제 메모장'처럼 알아보게 하고 싶을 때, 레트로·감성 앱이나 악기·카메라처럼 실물 조작감이 중요한 화면에 씁니다. iOS 6까지의 아이폰 앱이 대표 예입니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장메모 앱 아이콘과 버튼을 스큐어모피즘으로 만들어 줘. 아이콘 위쪽은 바느질 자국이 있는 갈색 가죽, 아래는 파란 줄과 빨간 여백선이 있는 노란 줄 노트로 그리고, 위에서 빛이 비치는 그림자를 넣어 줘. 버튼은 위가 밝고 아래가 어두운 광택 그라데이션과 1px 테두리, 글자 아래 흰 그림자로 볼록하게 하고, 누르면 그라데이션이 뒤집히며 안으로 들어간 그림자가 보이게 해 줘.
-
뉴모피즘
Neumorphism배경과 같은 색의 면을 한쪽은 밝은 그림자, 반대쪽은 어두운 그림자로 살짝 솟거나 파인 것처럼 보이게 하는 스타일입니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때음악 재생기·스마트홈 조절기처럼 버튼이 적고 조용한 화면에 씁니다. 버튼과 배경의 대비가 낮아 잘 안 보일 수 있으니, 중요한 버튼에는 색이나 테두리를 더합니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장스마트홈 조절 화면을 뉴모피즘으로 만들어 줘. 배경은 #e4e8ee, 카드와 버튼도 같은 색으로 하고 왼쪽 위에 흰 그림자(-8px -8px 16px), 오른쪽 아래에 #c3c8d0 그림자(8px 8px 16px)를 줘서 솟아 보이게 해 줘. 누르거나 켜진 버튼은 같은 그림자를 inset으로 바꿔 파여 보이게 하고, 글자와 아이콘은 배경 대비 4.5:1 이상인 진한 색으로, 켜진 상태는 그림자만이 아니라 색 점으로도 알려 줘.
-
클레이모피즘
Claymorphism찰흙으로 빚은 듯 모서리가 아주 둥글고 통통한 덩어리를, 안쪽 밝은·어두운 그림자와 바깥의 부드러운 그림자로 표현하는 스타일입니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때어린이·교육·게임·핀테크 첫 화면처럼 친근하고 장난스러운 느낌을 줄 때 씁니다. 파스텔 색과 잘 어울립니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장학습 앱의 메뉴 카드를 클레이모피즘으로 만들어 줘. 배경은 연한 살구색, 카드는 노랑·분홍 파스텔에 모서리를 28px 이상으로 둥글게 하고, 안쪽 왼쪽 위에 흰 그림자, 안쪽 오른쪽 아래에 살짝 어두운 그림자, 바깥 아래로 퍼지는 부드러운 그림자를 줘서 찰흙 덩어리처럼 보이게 해 줘. 누르면 덩어리가 살짝 눌려 납작해졌다 돌아오게 해 줘.
-
3D 아이콘
3D icon3D 프로그램으로 만든 모형처럼 부피·원근·빛 반사가 있는 아이콘과 그림을 쓰는 스타일입니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때서비스 소개 페이지, 빈 화면 안내, 기능 소개 카드처럼 눈길을 끌어야 하는 큰 그림에 씁니다. 작은 메뉴 아이콘에 쓰면 흐려 보이니 크게 씁니다. Spline·Blender 같은 3D 도구로 만들거나 AI 이미지로 만듭니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장기능 소개 카드에 넣을 3D 아이콘을 만들어 줘. 노란 메모장과 연필을 위에서 약 30도 내려다본 각도로, 매끈한 플라스틱 재질과 부드러운 스튜디오 조명, 바닥에 퍼지는 그림자를 넣고 배경은 투명 PNG로 해 줘. 세 아이콘 모두 같은 각도·조명·색 톤으로 맞추고, 웹에서는 2배 크기 이미지와 alt 문구를 함께 넣어 줘.
평면에서 출발한 스타일
질감을 덜어 낸 평평한 면 위에 색·그림자·테두리로 위계를 만듭니다.
-
플랫 디자인
Flat design질감·광택·그림자를 빼고 단색 면과 단순한 모양, 또렷한 글자만으로 만드는 스타일입니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때정보가 많은 앱·웹처럼 빨리 읽히는 것이 중요할 때 씁니다. 화면 크기와 상관없이 깔끔하고 가볍습니다. 2012~2013년 Windows 8과 iOS 7이 스큐어모피즘에서 바꾸며 널리 퍼졌습니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장메모 앱 화면을 플랫 디자인으로 만들어 줘. 그림자·그라데이션·질감 없이 노랑(#f2b84b)과 흰색, 강조색 파랑(#2563eb) 단색 면만 쓰고, 아이콘은 같은 굵기의 단순한 선과 면으로 맞춰 줘. 버튼이 버튼으로 보이도록 강조색 배경과 흰 글자로 하고, 누르면 조금 더 진한 색으로만 바뀌게 해 줘. 글자 대비는 4.5:1 이상으로 해 줘.
-
머티리얼 디자인
Material design구글이 2014년 발표한 디자인 체계로, 평평한 종이 판들이 서로 다른 높이에 겹쳐 있다고 보고 그림자로 높낮이를 나타냅니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때안드로이드 앱이나 구글 서비스와 비슷한 익숙한 화면을 만들 때 씁니다. 누를 때 퍼지는 물결(리플), 떠 있는 둥근 버튼(FAB), 정해진 높이 단계가 특징입니다. 지금은 사용자 배경화면 색을 따라가는 Material 3(Material You)가 최신입니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장메모 목록 화면을 Material 3 디자인으로 만들어 줘. 메모 카드는 높이 1단계 그림자, 오른쪽 아래에 새 메모를 만드는 FAB(둥근 + 버튼)를 높이 3단계로 띄우고, 버튼과 카드를 누르면 누른 자리에서 물결(리플)이 퍼지게 해 줘. 색은 기본 색 하나에서 Material 3 색 체계로 만들고, 상단 앱 바·내비게이션 바는 Material 3 구성요소 규격을 따라 줘.
-
네오 브루탈리즘
Neo brutalism굵은 검은 테두리, 흐리지 않고 딱 떨어지는 그림자, 쨍한 원색과 큰 글자로 일부러 투박하고 거칠게 만드는 스타일입니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때개성 있는 브랜드, 창작자 도구, 이벤트 페이지처럼 '매끈한 앱'들 사이에서 눈에 띄고 싶을 때 씁니다. 정돈된 업무 화면에는 시끄러울 수 있습니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장이벤트 신청 페이지를 네오 브루탈리즘으로 만들어 줘. 배경은 연노랑, 카드와 버튼은 3px 검은 테두리와 흐림 없는 검은 그림자(6px 6px 0 #000), 모서리는 거의 각지게 하고, 색은 노랑·빨강·연두 원색을 써 줘. 제목은 아주 굵은 큰 글자로 하고, 버튼을 누르면 그림자만큼 오른쪽 아래로 밀려 그림자가 사라지게 해 줘.
유리처럼 비치는 스타일
뒤에 있는 색이 비쳐 보이는 반투명한 판으로 겹침을 보여 줍니다.
-
글래스모피즘
Glassmorphism뒤가 뿌옇게 흐려 비치는 반투명 판(젖빛 유리)에 얇은 밝은 테두리를 둘러, 화려한 배경 위에 겹쳐 보이게 하는 스타일입니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때알록달록한 배경이나 사진 위에 카드·메뉴·알림을 띄울 때 씁니다. macOS·Windows 11의 반투명 창이 같은 느낌입니다. 배경이 밋밋하면 유리가 드러나지 않고, 뒤가 복잡하면 글자가 안 읽히니 흐림과 글자 대비를 함께 정합니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장로그인 카드를 글래스모피즘으로 만들어 줘. 배경에는 파랑·보라 그라데이션과 흐릿한 주황·분홍 원 두 개를 깔고, 카드는 흰색 20~25% 투명 배경에 backdrop-filter: blur(16px), 1px 반투명 흰 테두리, 부드러운 그림자로 해 줘. 카드 위 글자는 대비 4.5:1 이상이 되게 하고, backdrop-filter를 지원하지 않는 브라우저에서는 불투명한 흰 배경으로 대신해 줘.
-
리퀴드 글래스
Liquid glassApple이 2025년 iOS 26부터 쓰는 디자인으로, 투명한 유리가 뒤 화면을 살짝 굴절·반사하고 손이 닿으면 물방울처럼 출렁이며 반응하는 스타일입니다.
저장 버튼을 누르거나, 이웃과 비교를 눌러 보세요.
이럴 때Apple 기기의 최신 화면과 어울리게 탭 바·버튼·떠 있는 메뉴를 만들 때 씁니다. 본문 카드 전체보다 내용 위에 떠 있는 조작 부품에 아껴 쓰는 것이 Apple의 안내입니다.
다른 이름 · 헷갈리는 이웃
헷갈리는 이웃
복사되는 부탁 문장사진 앱 아래 탭 바와 떠 있는 버튼을 Apple 리퀴드 글래스 느낌으로 만들어 줘. 투명한 유리에 흐림은 약하게(blur 2~4px), 채도를 올려 뒤 사진 색이 맑게 비치게 하고, 위·왼쪽 가장자리에 얇은 흰 빛, 아래에 약한 반사광을 넣어 줘. 누르면 버튼이 스프링으로 살짝 커졌다 돌아오며 빛이 밝아지게 하고, iOS면 SwiftUI의 glassEffect를 써 줘. 투명도 줄이기 설정이면 불투명 배경으로 바꿔 줘.
이럴 때 씁니다
- AI에게 "예쁘게", "세련되게" 대신 글래스모피즘·네오 브루탈리즘처럼 정확한 스타일 이름으로 화면을 부탁하고 싶을 때
- 디자이너·기획자·개발자가 시안의 분위기를 같은 말로 맞추고 싶을 때
- 마음에 든 앱이나 사이트의 겉모습이 무엇이라고 불리는지 알고 싶을 때
사용법
- 분류(실물을 닮은·평면에서 출발한·유리처럼 비치는 스타일)에서 찾거나, 사전 첫 화면 검색에 아는 말을 적습니다.
- 모든 예시는 같은 메모 아이콘과 저장 버튼입니다. 저장을 눌러 그 스타일이 누름을 어떻게 보여 주는지, 이웃과 비교를 눌러 헷갈리는 스타일로 바꿔 입으면 무엇이 달라지는지 봅니다.
- 헷갈리는 이웃에서 차이를 확인하고, 부탁 문장 복사를 눌러 AI나 요청서에 붙여넣습니다. 이름만 쓰기보다 그림자·테두리·투명도 같은 재료를 함께 적으면 결과가 더 정확해집니다.
꼭 알아둘 점
- 예시는 CSS만으로 그린 작은 견본입니다. 실제 서비스는 같은 스타일이라도 색·둥글기·그림자 크기를 브랜드에 맞게 바꿉니다.
- 뉴모피즘·글래스모피즘·리퀴드 글래스는 대비가 낮아지기 쉽습니다. 글자와 버튼은 배경 대비 4.5:1 이상을 지키고, 투명도 줄이기 설정에서는 불투명 배경으로 바꿔야 합니다.
- 스타일은 시대에 따라 유행이 바뀝니다. 한 화면에 여러 스타일을 섞기보다 하나를 골라 버튼·카드·아이콘에 같은 규칙으로 입히는 것이 좋습니다.
자주 묻는 질문
- AI에게 디자인을 부탁할 때 스타일 이름만 쓰면 되나요?
- 이름만으로도 방향은 잡히지만, 재료를 함께 적으면 훨씬 정확합니다. 예를 들어 글래스모피즘이면 투명도(20%), 흐림(blur 16px), 테두리(1px 반투명 흰색), 배경(화려한 그라데이션)을 적습니다. 이 사전의 부탁 문장이 그 형식입니다.
- 뉴모피즘과 클레이모피즘은 어떻게 다른가요?
- 뉴모피즘은 배경과 같은 색의 판이 밝은·어두운 그림자로 배경에서 살짝 솟거나 파여 보입니다. 클레이모피즘은 배경과 다른 밝은 색의 통통한 덩어리가 안쪽 그림자로 부풀어 보이고 배경 위에 떠 있습니다.
- 글래스모피즘과 리퀴드 글래스는 같은 건가요?
- 비슷하지만 다릅니다. 글래스모피즘은 뒤를 강하게 흐린 젖빛 유리 판이고, Apple의 리퀴드 글래스는 흐림이 적은 투명한 유리가 가장자리에서 빛을 굴절·반사하며 손이 닿으면 출렁이듯 반응합니다.
- 플랫 디자인과 머티리얼 디자인은 무엇이 다른가요?
- 플랫 디자인은 그림자 없이 단색 면만 씁니다. 머티리얼 디자인은 플랫을 바탕으로 판마다 높이를 정해 그림자로 무엇이 위에 있는지 보여 주고, 누르면 물결(리플)이 퍼집니다.