2LAZZZY 작업 노트2026-10-02 기준
UI 디자인 스타일 10가지
스타일마다 핵심 특징, 예시 그림, 그리고 AI에게 그대로 붙여 넣을 프롬프트를 모았어요.
프롬프트의 [만들 화면] 자리에 원하는 화면을 적어 Claude, ChatGPT, v0 같은 도구에 붙여 넣으면 돼요.
프롬프트 쓰는 법
스타일 이름만 쓰는 것보다 색, 그림자, 버튼 모양까지 적으면 원하는 느낌이 더 잘 나와요.
- 스타일 고르기
아래 예시 그림을 보고 가까운 스타일을 골라요.
- 프롬프트 복사
스타일마다 있는 프롬프트의 '복사' 버튼을 눌러요.
- [만들 화면] 바꾸기
예: '할 일 앱의 오늘 화면', '카페 메뉴 랜딩 페이지'처럼 무엇을 만들지 적어요.
- 붙여 넣고 고치기
결과가 다르면 표의 특징 한 줄을 골라 '이 부분을 더 강하게'라고 덧붙여요.
미니멀리즘 (Minimalism)
여백이 많고 요소를 최소화한 깔끔한 디자인
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 바탕 | 흰색이나 따뜻한 오프화이트(#F3F2EF) 하나 |
| 글꼴 | 제목은 아주 크고 가는 세리프나 라이트 산세리프, 본문은 작고 회색 |
| 메뉴 | 작은 글자, 넓은 자간(대문자면 더), 가운데나 오른쪽에 조용히 |
| 구성 | 넉넉한 여백, 2단 짧은 글, 화면을 가로지르는 큰 사진 한 줄 |
| 포인트 | '01.' 같은 큰 숫자, 얇은 선 1px, 아래 작은 정보 줄(Date, Award) |
프롬프트
[만들 화면]을 Minimalism 스타일로 디자인해 줘. 바탕은 오프화이트 #F3F2EF 하나, 글자는 검정과 회색만. 제목은 아주 큰 가는 세리프(예: 80px), 본문은 12~14px 회색으로 2단에 짧게. 메뉴는 작은 글자에 자간을 넓게. 여백을 아주 넉넉하게 두고, 화면을 가로지르는 큰 사진(또는 사진 자리) 한 줄을 넣어. 오른쪽에 '01.' 같은 큰 숫자, 아래에 1px 선과 작은 정보 줄(Date, Award). 그림자, 테두리, 버튼 장식은 쓰지 마. HTML과 CSS 한 파일로 만들어 줘.
브루탈리즘 (Brutalism)
굵은 글자, 강한 대비, 투박하고 거친 구성
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 색 | 흑백 + 형광 하나(라임 #D7FF3A 같은) |
| 글꼴 | 아주 굵은 대문자 산세리프, 자간 좁게, 크게 쌓기 (FIND YOUR STYLE.) |
| 모양 | 직각, 2px 검정 테두리 박스, 둥근 모서리 거의 없음 |
| 사진 | 흑백 사진을 네모 칸에 그대로 |
| 버튼 | 화면 폭 꽉 찬 형광 막대 버튼, 검정 하단 바 |
프롬프트
[만들 화면]을 Brutalism 스타일로 디자인해 줘. 흰 바탕에 검정, 강조는 형광 라임 #D7FF3A 하나만. 제목은 아주 굵은 대문자 산세리프로 자간을 좁게 크게 쌓아(예: FIND YOUR STYLE. OWN IT.). 모든 칸은 직각에 2px 검정 테두리 박스, 사진은 흑백으로 네모 칸에 그대로. 탭은 테두리로 나눈 칸, 선택된 칸은 검정 바탕. 'NEW' 같은 라임 딱지, 큰 버튼은 화면 폭 꽉 찬 라임 막대. 그림자, 그라데이션, 둥근 모서리는 쓰지 마. HTML과 CSS 한 파일로 만들어 줘.
브루탈리즘은 두 갈래예요: 위 카드처럼 다듬지 않은 '웹 날것'(세리프, 기본 버튼, 링크 파랑)과, 아래 화면처럼 흑백 + 형광 하나에 굵은 대문자로 각을 세운 요즘 앱 스타일. 프롬프트는 요즘 앱 쪽이에요.
네오 브루탈리즘 (Neo-Brutalism)
브루탈리즘을 좀 더 현대적으로 다듬은 스타일
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 바탕 | 따뜻한 회색(#E8E4DC)이나 쨍한 라임(#C6F432) |
| 색 | 보라 #A78BFA, 라임 #C6F432, 코랄 #FF5B4A, 노랑 #FFE14D를 섞기 |
| 테두리 | 모든 요소에 2~3px 검정 외곽선 |
| 그림자 | 흐림 없는 검정, 오른쪽 아래 4~6px |
| 모양 | 모서리 8~16px, 동그란 배지, 큼직한 아이콘, 말풍선 |
프롬프트
[만들 화면]을 Neo-Brutalism 스타일로 디자인해 줘. 바탕은 따뜻한 회색 #E8E4DC. 버튼, 입력창, 카드, 배지 모두 2~3px 검정 외곽선에 모서리 8~16px, 그림자는 흐림 없이 검정으로 오른쪽 아래 4~6px(box-shadow: 4px 4px 0 #111). 색은 보라 #A78BFA, 라임 #C6F432, 코랄 #FF5B4A, 노랑 #FFE14D를 섞어 칸마다 다르게. 선택된 항목은 검정 바탕에 흰 글자. 체크박스, 토글, 배지도 같은 외곽선 규칙으로. 버튼을 누르면 그림자만큼 이동해 내려앉게 해 줘. HTML과 CSS 한 파일로 만들어 줘.
글래스모피즘 (Glassmorphism)
반투명 카드, 블러, 유리 같은 느낌
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 바탕 | 흐린 사진이나 진한 그라데이션 (어두워도 돼요), 유리 뒤가 비쳐야 해요 |
| 카드, 창 | 반투명(흰 10~30% 또는 어두운 40~60%) + backdrop-filter: blur(20~30px) |
| 테두리 | 1px 반투명 흰 선으로 유리 가장자리 |
| 입력창, 버튼 | 알약 모양 유리, 버튼은 위가 조금 더 밝은 유리 |
| 구성 | 사이드바, 목록 행도 같은 유리 위에 한 겹 더 옅게 |
프롬프트
[만들 화면]을 Glassmorphism 스타일로 디자인해 줘. 바탕에 흐린 인물 사진이나 진한 그라데이션(보라, 분홍, 주황)을 깔고, 그 위의 카드와 창은 반투명 유리로: 어두운 화면이면 rgba(30,30,40,0.55), 밝은 화면이면 rgba(255,255,255,0.2)에 backdrop-filter: blur(30px) saturate(160%), 1px 반투명 흰 테두리, 모서리 16~40px. 입력창과 버튼은 알약 모양 유리, 버튼은 위쪽이 더 밝은 그라데이션. 사이드바와 목록 행은 유리 위에 한 겹 더 옅은 유리로. 글자는 흰색, 대비가 충분하게. HTML과 CSS 한 파일로 만들어 줘.
뉴모피즘 (Neumorphism)
부드러운 음영으로 요소가 튀어나오거나 들어간 느낌
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 바탕 | 아주 옅은 회색이나 라벤더빛 흰색(#ECEEF6), 판과 버튼이 같은 색 |
| 솟은 것 | 오른쪽 아래 어두운 그림자 + 왼쪽 위 흰 그림자 (8px 8px 18px / -8px -8px 18px) |
| 눌린 것 | 같은 두 그림자를 inset으로: 입력창, 홈, 선택된 버튼 |
| 색 | 회색 아이콘에 강조색 하나 (보라 #8B7CF6) |
| 모양 | 동그란 아이콘 버튼, 알약 입력창, 토글, 세로 슬라이더, 테두리 없음 |
프롬프트
[만들 화면]을 Neumorphism 스타일로 디자인해 줘. 바탕과 모든 요소를 같은 색 #ECEEF6으로 하고, 솟은 요소는 box-shadow: 8px 8px 18px #C9CBD6, -8px -8px 18px #FFFFFF, 눌린 요소(입력창, 슬라이더 홈, 선택된 버튼)는 같은 그림자를 inset으로. 테두리는 쓰지 마. 아이콘 버튼은 동그랗게, 입력창은 알약 모양으로 들어가게, 토글과 진행 막대도 같은 규칙으로. 아이콘은 회색 #7A7F92, 강조는 보라 #8B7CF6 하나만. HTML과 CSS 한 파일로 만들어 줘.
스큐어모피즘 (Skeuomorphism)
실제 사물의 질감과 형태를 그대로 모방
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 생각 | 현실의 물건이나 재질을 그대로 흉내 내요 (카메라 → 렌즈 아이콘) |
| 재질 | 가죽, 노란 줄 노트, 금속 다이얼, 유리 렌즈 |
| 효과 | 광택 하이라이트, 금속 결(conic-gradient), 안쪽 그림자, 바느질 |
| 컨트롤 | 돌리는 다이얼, 초록 젤 스위치, 파란 젤 버튼 |
| 아이콘 | 둥근 사각형 위 광택 반사, 실제 물건처럼 입체 |
프롬프트
[만들 화면]을 Skeuomorphism 스타일로 디자인해 줘. 현실의 물건처럼 보이게: 상단 바는 바느질 선이 있는 갈색 가죽, 본문은 빨간 여백선과 파란 줄이 있는 노란 노트 종이, 설정은 금속 결(conic-gradient)이 있는 둥근 다이얼과 초록 젤 토글, 버튼은 위에 흰 광택이 있는 파란 젤 버튼(아래 두께, 누르면 눌림). 앱 아이콘은 둥근 사각형에 실제 카메라 렌즈처럼 유리 반사. 그라데이션, 하이라이트, inset 그림자로 질감과 깊이를 살려. HTML과 CSS 한 파일로 만들어 줘.
플랫 디자인 (Flat Design)
입체감 없이 단순한 색과 도형 중심
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 바탕 | 흰색이나 단색 하나 (코랄 #FFA98A 같은) |
| 카드 | 파스텔 단색 면(하늘, 민트, 라벤더), 큰 둥근 모서리, 그림자 없음 |
| 글꼴 | 아주 큰 굵은 숫자 + 짧은 설명 |
| 그래픽 | 단순한 막대, 원, 사각형 (원색) |
| 목록 | 단색 알약 행, 아래 단순한 아이콘 탭 바 |
프롬프트
[만들 화면]을 Flat Design 스타일로 디자인해 줘. 그림자, 그라데이션, 질감은 쓰지 마. 카드는 파스텔 단색 면(하늘 #8FD3FF, 민트 #84F0C0, 라벤더 #C9A7FF)에 모서리 20px 이상, 숫자는 아주 크고 굵게(60px 이상) 그 아래 짧은 설명. 그래프는 빨강, 파랑, 노랑 단색 막대. 목록은 단색 알약 행, 아래 탭 바는 단순한 아이콘. 두 번째 화면은 바탕을 코랄 #FFA98A 하나로 바꾸고 흰 카드만 올려. HTML과 CSS 한 파일로 만들어 줘.
머티리얼 디자인 (Material Design)
플랫 디자인에 그림자와 계층 구조를 더한 스타일
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 색 | 쨍한 단색 타일(분홍, 하늘, 빨강, 보라, 연두) + 주 색 보라 #6200EE, 보조 청록 #03DAC6 |
| 그림자 | 높이(elevation)마다 다른 그림자: 카드 < 눌린 버튼 < FAB, 타일엔 45도 긴 그림자 |
| 구성 | 앱 바, 목록 행, 스낵바, 채워진 입력창(아래 선), 칩, 떠 있는 동그란 FAB |
| 버튼 | 대문자, 자간 넓게, 모서리 4px, 누르면 그림자가 커지고 리플 |
| 그리드 | 8px 단위 간격, 카드와 타일이 딱 맞는 격자 |
프롬프트
[만들 화면]을 Material Design 스타일로 디자인해 줘. 8px 그리드 위에 요소를 놓고, 높이(elevation)에 따라 그림자를 다르게: 카드는 낮게, 눌린 버튼은 더 높게, FAB는 가장 높게. 주 색은 보라 #6200EE, 보조 색은 청록 #03DAC6. 위에 앱 바(제목, 검색, 더보기), 목록 행, 아래 선이 있는 채워진 입력창, 지울 수 있는 칩, 검정 스낵바(오른쪽에 보라 ACTION), 오른쪽 아래 동그란 FAB(+). 버튼은 대문자에 자간 넓게, 모서리 4px, 누르면 리플이 퍼지고 그림자가 커지게. 메뉴 화면이면 쨍한 단색 타일에 45도 긴 그림자. HTML과 CSS 한 파일로 만들어 줘.
스위스 스타일 (Swiss Style)
강한 그리드, 타이포 중심, 정렬이 명확한 디자인
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 색 | 빨강 #E30613 + 흰색 + 검정, 세 가지만 |
| 글꼴 | Helvetica, Univers 같은 중립적인 산세리프, 아주 크게 |
| 그리드 | 글자 하나하나를 칸에 넣을 만큼 강한 격자, 칸 사이 간격 일정 |
| 정렬 | 왼쪽 정렬, 비대칭 배치, 얇은 선으로 구분한 정보 3단 |
| 장식 | 없음: 줄무늬, 원, 큰 글자 조각처럼 기하 도형만 |
프롬프트
[만들 화면]을 Swiss Style(International Typographic Style)로 디자인해 줘. 빨강 #E30613, 흰색, 검정만. Helvetica 같은 산세리프로, 제목 글자를 하나씩 흰 사각형 칸에 넣어 격자로 쌓아(칸 간격 일정, 일부는 두 칸 차지). 정보는 3단 그리드에 왼쪽 정렬, 날짜는 크게, 그 아래 얇은 흰 선과 작은 글자. 왼쪽에 세로 줄무늬, 큰 글자 조각과 원 같은 기하 도형만 쓰고 장식 그림은 쓰지 마. 비대칭이지만 모든 요소가 그리드 선에 맞게. HTML과 CSS 한 파일로 만들어 줘.
맥시멀리즘 (Maximalism)
큰 타이포, 강한 색, 많은 그래픽을 적극적으로 사용
핵심 특징
| 요소 | 이렇게 |
|---|---|
| 바탕 | 검정이나 아주 진한 색 위에 작은 글자 여러 겹 |
| 주인공 | 화면을 덮는 크고 통통한 입체 글자 (3D, 털, 풍선 느낌) |
| 색 | 글자마다 다른 쨍한 색 (분홍, 보라, 노랑, 민트, 주황) |
| 타이포 | 큰 글자 뒤에 같은 문장을 작은 글자로 반복, 일부러 겹치게 |
| 구성 | 기울이고 겹치고 화면 밖으로 넘치게, 빈 곳을 남기지 않기 |
프롬프트
[만들 화면]을 Maximalism 스타일로 디자인해 줘. 검정 바탕에 'FOCUS ON THE GOOD' 같은 문장을 화면을 덮을 만큼 크고 통통한 입체 글자로: 글자마다 분홍, 보라, 노랑, 민트, 주황을 다르게, 두꺼운 외곽선과 위쪽 하이라이트로 풍선처럼 부풀게, 글자를 조금씩 기울이고 서로 겹치게. 뒤에는 같은 문장과 작은 단어들(COLOR, INTERESTING, 03)을 흰 산세리프로 여러 크기에 흩어 깔아. 빈 곳을 남기지 말고 큰 글자가 작은 글자를 덮게. HTML과 CSS 한 파일로 만들어 줘.
맥시멀리즘은 위 카드처럼 패턴과 스티커를 잔뜩 쓰는 쪽도, 아래 포스터처럼 큰 입체 글자 하나로 화면을 덮는 쪽도 있어요.
출처
예시 그림은 직접 그린 거예요. 프롬프트는 결과를 보장하지 않아요: 도구마다 조금씩 달라요.
2LAZZZY / 2026-10-02 기준.