The six layers
디자인을 부르는 말은 무엇을 바꾸느냐에 따라 나뉩니다
아래 여섯 분류는 서로 경쟁하는 선택지가 아닙니다. 하나의 화면 안에서 사조는 전체 태도를, 표면은 질감을, 레이아웃은 읽는 순서를, 시스템은 구현 규칙을, 실전 스타일은 제품 맥락을, 시각 기법은 특정 장면의 강조를 담당합니다.
사조 · 시각 언어
어떤 태도와 조형 원칙을 따를까?
FOLLOWS
INTENT 01—26 / VISUAL ORDER
화면 전체의 인상을 결정하는 가장 큰 층위입니다. 역사적 배경이나 반복되는 조형 원칙이 있어 색, 형태, 타이포그래피와 여백을 함께 설명할 수 있습니다.
화면 전체를 설명하고 싶다면 가장 먼저 고르는 말입니다.
Swiss-inspired visual language, disciplined grid, asymmetric composition, bold sans-serif typography, restrained red accent 표면 표현
요소가 어떤 재질과 깊이로 보일까?
버튼과 패널이 유리, 점토, 종이 또는 실제 물건처럼 보이는 방식을 말합니다. 레이아웃을 정하기보다 빛, 그림자, 투명도와 촉감을 결정합니다.
하나의 사조 위에 겹쳐 쓰는 재질 레이어에 가깝습니다.
Restrained glass surface, translucent navigation controls, subtle backdrop blur, thin bright border, accessible text contrast 레이아웃
정보를 어떤 질서로 놓을까?
콘텐츠의 크기, 순서, 정렬과 밀도를 결정합니다. 같은 미니멀 스타일이라도 벤토, 에디토리얼 또는 데이터 중심 레이아웃에 따라 전혀 다른 화면이 됩니다.
보이는 분위기보다 읽는 순서와 정보 구조를 바꾸는 말입니다.
Responsive bento layout, varied card spans, one dominant feature, clear reading order, no cards nested inside cards 디자인 시스템
컴포넌트를 어떤 규칙으로 만들까?
색상 토큰, 타이포그래피, 버튼, 입력창, 상태와 모션까지 제품 전반의 규칙을 제공합니다. 단순히 비슷하게 보이게 하는 것보다 구현 일관성이 중요합니다.
브랜드의 겉모습보다 재사용 가능한 구현 규칙을 요청할 때 적합합니다.
Material Design 3 Expressive, adaptive color roles, clear component states, contrasting rounded shapes, token-based spacing and motion 실전 바이브 코딩 스타일
이 제품은 어떤 업종과 분위기로 느껴질까?
정식 사조는 아니지만 AI가 제품 맥락을 빠르게 이해하도록 돕는 실무 표현입니다. 여러 디자인 원칙을 자주 쓰는 조합으로 묶은 스타일 레시피라고 볼 수 있습니다.
정확한 사전적 이름보다 결과를 빨리 맞추는 데 강한 표현입니다.
Dark SaaS workspace, charcoal surfaces, hairline borders, compact information density, restrained blue glow, keyboard-first interactions 시각 기법 · 효과
특정 부분에 어떤 시각 효과를 더할까?
배경, 글자, 전환 또는 한두 개의 컴포넌트에 적용하는 국소적인 표현입니다. 그 자체를 전체 스타일로 부르면 화면이 과장되기 쉬워 적용 범위를 함께 말해야 합니다.
무엇에, 얼마나 적용할지 제한해야 안정적인 결과가 나옵니다.
Subtle mesh gradient only in the hero background, fine monochrome grain, oversized headline, no decorative glow behind body text Term atlas
한눈에 보는 디자인 언어 지도
같은 용어가 두 영역에 걸칠 수도 있습니다. 중요한 것은 정답 분류보다 그 말이 화면의 어느 부분을 바꾸는지 아는 것입니다.
사조와 조형 언어
화면 전체의 태도와 형태를 결정하는 이름
- Minimalism
- Maximalism
- Brutalism
- Neo-Brutalism
- Bauhaus
- Swiss Style
- Memphis
- Art Deco
- Constructivism
- Postmodernism
표면과 재질
빛, 그림자, 투명도와 촉감을 결정하는 이름
- Flat Design
- Skeuomorphism
- Glassmorphism
- Liquid Glass
- Neumorphism
- Claymorphism
- Soft UI
- Tactile UI
배치와 정보 구조
읽는 순서, 크기와 화면 밀도를 결정하는 이름
- Bento UI
- Editorial Layout
- Modular Grid
- Masonry
- Asymmetric Layout
- Split Screen
- Single Column
- Card-based
- Data-dense
시대와 문화적 미감
특정 시대가 상상한 기술과 문화의 분위기
- Y2K
- Retro Web
- Frutiger Aero
- Retro-futurism
- Cyberpunk
- Vaporwave
- Pixel Art UI
- Dark Academia
제품형 스타일 레시피
업종과 사용 맥락을 AI에게 빠르게 전달하는 이름
- Dark SaaS
- Luxury Minimal
- Terminal UI
- Developer Tool
- Technical Dashboard
- AI-native UI
- Dark Editorial
- Organic UI
- Playful Geometric
타이포와 색채
글자와 색을 주인공으로 만드는 표현
- Monochrome
- Duotone
- Bold Typography
- Serif Editorial
- Monospace Technical
- Kinetic Typography
- High Contrast
- Muted Palette
국소 효과
다른 스타일 위에 필요한 만큼 올리는 시각 기법
- Mesh Gradient
- Aurora Gradient
- Grain
- Glow
- Glitch
- Chrome
- Hard Offset Shadow
- Cut Corners
- Parallax
- Scroll Storytelling
구현 규칙
컴포넌트와 상태를 일관되게 만드는 시스템
- Material Design 3
- Apple HIG
- Fluent 2
- Carbon
- Ant Design
- Polaris
- Design Tokens
- Responsive System
Translate vague words
“예쁘게”를 시각적 결정으로 번역하기
AI는 취향을 추측할 수는 있지만, 그 결과가 내가 원하는 취향일 가능성은 낮습니다. 평가 표현을 관찰 가능한 요소로 바꾸면 수정 횟수가 줄어듭니다.
차분한 미니멀 UI, 넓은 여백, 낮은 채도와 명확한 제목 위계
장식은 제거하고 8px 간격 체계, 얇은 구분선과 단일 포인트 색 사용
스위스 스타일, 비대칭 그리드, 굵은 산세리프 제목과 절제된 빨간색
따뜻한 아이보리, 우아한 세리프, 큰 제품 사진과 제한된 금색 포인트
다크 테크니컬 UI, 각진 패널, 시안 상태 색과 절제된 네온 글로우
클레이모피즘, 둥근 형태, 파스텔 팔레트와 단순한 채움형 아이콘
밝은 중성 배경, 둥근 플로팅 컨트롤, Liquid Glass와 자연스러운 전환
Dark SaaS, 차콜 표면, 얇은 테두리, 조밀한 간격과 키보드 중심 상호작용
Choose the right word
원하는 이름을 모를 때는 바꾸고 싶은 것부터 고르세요
- 전체 인상사조 · 시각 언어
미니멀, 바우하우스, 스위스, 브루탈리즘처럼 전체 태도를 정합니다.
- 질감과 깊이표면 표현
글래스, 클레이, 플랫처럼 요소가 무엇으로 만들어진 듯 보일지 정합니다.
- 읽는 순서레이아웃
벤토, 에디토리얼, 데이터 중심처럼 정보의 크기와 순서를 정합니다.
- 일관된 구현디자인 시스템
Material, Fluent, Carbon처럼 컴포넌트와 상태 규칙을 정합니다.
- 제품 분위기실전 스타일
Dark SaaS, Luxury Minimal, Terminal처럼 자주 쓰는 조합을 전달합니다.
- 한 장면의 강조시각 기법
Mesh Gradient, Grain, Glow처럼 적용 위치와 강도를 함께 지정합니다.
Prompt formula
스타일 이름보다 강한 디자인 요청 공식
모든 칸을 채울 필요는 없습니다. 제품 목적과 시각 언어를 먼저 적고, 결과가 중요한 항목 세네 개를 고르면 충분합니다.
AI workflow product in a restrained Dark SaaS style. Use charcoal surfaces, thin hairline borders, compact but readable information density, a single blue accent, tabular numbers, and keyboard-first interactions. Avoid excessive purple gradients, nested cards, and decorative glow behind body text.
Creative portfolio with an editorial layout. Use oversized serif headlines, asymmetric columns, large-format project images, small captions, disciplined whitespace, and one burnt-orange accent. Avoid a generic centered hero, equal-sized card grids, and unnecessary drop shadows.
Friendly learning app using playful geometric composition and restrained claymorphism. Use rounded inflated controls, a warm pastel palette, bold readable sans-serif typography, simple filled icons, and clear progress states. Keep body text contrast accessible and avoid applying heavy shadows to every element.
Visual style catalog
이런 용어는 이런 스타일이에요
이름이 기억나지 않을 때는 시각 샘플에서 가까운 방향을 찾고, 프롬프트를 복사해 제품과 목적에 맞게 바꿔보세요. 정식 사조와 실전 표현을 구분해 표시했습니다.바우하우스 Bauhaus↗
원·삼각형·사각형과 빨강·파랑·노랑의 원색을 기능적인 구성으로 결합합니다. 장식보다 형태와 기능의 관계가 먼저입니다.
Bauhaus-inspired interface, primary geometric shapes, red blue and yellow accents, functional asymmetry, bold geometric sans-serif typography, clear content hierarchy 아르데코Art Deco
대칭형 기하학, 계단 모양, 부채꼴과 금속성 선으로 정교하고 화려한 인상을 만듭니다. 호텔·주얼리·행사처럼 격식 있는 주제에 잘 맞습니다.
Art Deco luxury interface, symmetrical geometric ornament, black emerald and gold palette, stepped forms, elegant display serif, restrained metallic accents Y2K 미학 Y2K Aesthetic↗
크롬 그라데이션, 반투명 플라스틱, 버블 형태와 테크노 글꼴로 2000년 무렵의 디지털 미래상을 재현합니다.
Y2K web aesthetic, chrome gradients, translucent plastic panels, bubble shapes, compact techno typography, silver cyan and hot-pink palette, nostalgic early-digital interface 프루티거 에어로Frutiger Aero
맑은 하늘, 초록 자연, 물방울과 광택 아이콘으로 자연과 기술이 조화를 이루는 밝고 낙관적인 미래를 표현합니다.
Frutiger Aero interface, bright blue-sky and green-landscape palette, glossy rounded icons, water droplets, white clouds, optimistic eco-futurism, highly legible controls 사이버펑크 UICyberpunk UI
짙은 배경, 네온 시안과 마젠타, 모노스페이스 글꼴과 각진 HUD 패널로 고밀도 기술 세계를 보여줍니다.
Cyberpunk UI, dark tech-noir background, neon cyan and magenta accents, angular HUD panels, monospace data labels, restrained glitch and scanline effects, readable primary actions 모노크롬 디자인Monochrome Design
흑백 또는 하나의 색상 계열 안에서 명도, 크기, 선과 여백으로 위계를 만듭니다. 미니멀리즘과 달리 요소 수가 많을 수도 있습니다.
Monochrome editorial interface, black and off-white palette, strong tonal contrast, typography-led hierarchy, crisp dividers, no decorative color 레트로퓨처리즘Retro-Futurism
과거가 상상한 미래를 우주 시대의 곡선, 아날로그 계기판과 크림·오렌지·청록 팔레트로 다시 표현합니다.
Retro-futurist interface, space-age curves, analog control panels, vintage sci-fi palette, cream orange and teal, optimistic technological nostalgia, clear modern usability 플랫 디자인 Flat Design↗
입체적인 재질과 장식 그림자를 줄이고 단색 면, 단순한 벡터 아이콘과 명확한 상태 색으로 기능을 직접 전달합니다.
Flat UI design, solid color surfaces, simple vector icons, minimal shadows, clear visual hierarchy, accessible state colors, crisp geometric shapes 에디토리얼 디자인 Editorial Design↗
잡지와 신문처럼 큰 제목, 다단 컬럼, 이미지와 작은 캡션의 리듬으로 콘텐츠의 읽는 순서를 설계합니다.
Editorial magazine layout, oversized serif headlines, asymmetric columns, large-format imagery, small captions, disciplined typographic rhythm, generous negative space 머티리얼 디자인 Material Design↗
색상 역할, 컴포넌트 상태, 형태와 모션을 토큰으로 연결하는 디자인 시스템입니다. 일관된 모바일·웹 제품을 요청할 때 유용합니다.
Material Design 3 Expressive, adaptive color roles, clear component states, contrasting rounded shapes, flexible typography, token-based spacing and meaningful motion 맥시멀리즘 Maximalism↗
색, 패턴, 글자와 이미지의 충돌을 반복과 초점으로 통제하는 스타일입니다. 단순히 요소를 많이 넣는 것과는 다릅니다.
Controlled maximalism, layered typography, dense repeated patterns, clashing but intentional colors, overlapping imagery, one unmistakable focal point, readable content path 리퀴드 글래스 Liquid Glass↗
빛을 굴절하고 주변 색에 적응하며 상호작용에 따라 형태가 변하는 유리 재질입니다. 탐색과 주요 컨트롤에 제한적으로 사용합니다.
Liquid Glass interface, floating translucent controls, responsive lensing, subtle light refraction, adaptive contrast, fluid morphing transitions, content-first hierarchy 다크 SaaS UIDark SaaS UI
차콜 표면, 얇은 테두리, 조밀한 정보와 제한된 청색 글로우를 조합해 AI 제품과 개발자 도구에 어울리는 집중감을 만듭니다.
Dark SaaS workspace, charcoal surfaces, hairline borders, compact information density, restrained blue glow, tabular numbers, keyboard-first interactions 터미널 UITerminal UI
검은 배경, 모노스페이스 글꼴, 명령 프롬프트와 상태 로그로 개발자 도구와 보안 제품의 기능적인 인상을 전달합니다.
Terminal-inspired interface, dark background, monospace typography, command prompts, status logs, restrained green accent, dense but readable layout 럭셔리 미니멀Luxury Minimal
따뜻한 아이보리, 우아한 세리프, 넓은 여백과 제한된 금색 포인트로 패션·뷰티·호텔의 절제된 고급스러움을 표현합니다.
Luxury minimal interface, warm ivory background, elegant serif headlines, generous whitespace, restrained gold accent, cinematic product photography, slow subtle transitions 오가닉 UIOrganic UI
식물색, 부드러운 비정형 곡선과 종이 질감을 사용해 웰니스·식품·환경 서비스에 자연스럽고 차분한 인상을 만듭니다.
Organic editorial interface, botanical greens, soft asymmetric shapes, warm paper texture, elegant serif typography, calm spacing, accessible natural color contrast One last rule
좋은 스타일 요청은 이름을 많이 아는 것이 아니라, 화면을 나누어 말하는 능력입니다.
“미니멀하고 예쁘게”에서 멈추지 말고, 어떤 태도인지, 어떻게 배치할지, 무엇처럼 보일지, 어느 정도로 움직일지와 무엇을 피할지까지 말해보세요. AI는 그때부터 취향을 추측하는 대신 설계 조건을 따르기 시작합니다.
디자인 용어 더 찾아보기