디자인 토큰Design Token
디자인 토큰은 단 하나의 디자인 선택에 이름을 붙여요. 예를 들어 색상, 여백, 글꼴, 또는 움직임의 속도가 있어요.
가이드 열기예제를 통해 설명된 UI 디자인 스타일
각 스타일이 어떻게 생겼는지, 언제 도움이 되는지, 언제 방해가 되는지 확인하세요.
변형Variant
Variant는 다른 크기, 강도, 설정에 맞춘 공식적인 버전의 컴포넌트야.
가이드 열기시각적 계층 구조Visual Hierarchy
시각적 계층 구조는 크기, 대비, 위치, 공간을 통해 사람들이 처음, 다음, 마지막으로 무엇을 보는지 안내합니다.
가이드 열기색상 대비Color Contrast
색상 대비는 콘텐츠와 주변 배경 사이의 측정된 밝기 차이를 나타냅니다. 주요 텍스트와 가장자리를 쉽게 볼 수 있는지 보여줍니다.
가이드 열기타이포그래피Typography
타이포그래피는 텍스트 스타일을 선택하고 배열하여 단어를 읽기 쉽고, 정렬되고, 브랜드에 맞게 만드는 방법입니다.
가이드 열기스케일 입력Type Scale
Type Scale은 계획된 작은 글자 크기와 줄 높이의 모음이야.
가이드 열기색상 팔레트Color Palette
색상 팔레트는 계획된 색상 묶음이에요. 각 색상은 명확한 역할, 상태, 또는 표면을 가져요.
가이드 열기간격 척도Spacing Scale
Spacing Scale은 틈 크기를 모아둔 작은 세트야. 묶음을 보여주고 시각적인 규칙성을 유지해 줘.
가이드 열기아이콘 그래피Iconography
아이콘 그래피는 일치하는 모양과 명확한 의미를 가진 행동과 아이디어의 공유된 심볼 집합입니다.
가이드 열기다크 모드Dark Mode
다크 모드는 어두운 환경에 맞게 표면, 텍스트, 테두리, 미디어, 상태를 변경합니다.
가이드 열기반응형 디자인Responsive Design
반응형 디자인은 레이아웃, 콘텐츠 및 컨트롤이 사용 가능한 공간과 장치에 맞게 변경되도록 합니다.
가이드 열기스크림Scrim
Scrim은 팝업 창 뒤에 깔리는 살짝 투명한 어두운 층이야. 팝업 창을 돋보이게 하고 아래 페이지를 못 쓰게 막아놨다는 걸 보여주지.
가이드 열기간격Spacing
간격은 의도적으로 배치된 빈 공간입니다. 관련 항목을 그룹화하고, 아이디어를 구분하며, 페이지 리듬을 제공합니다.
가이드 열기여백Margin
여백은 요소 경계 밖의 공간입니다. 이 공간은 요소가 주변 레이아웃 항목과 떨어지도록 합니다.
가이드 열기여백Padding
여백은 요소의 테두리 안쪽, 내용과 테두리 사이의 공간입니다.
가이드 열기간격Gap
간격은 컨테이너가 Flexbox나 Grid 자식 요소 사이에 두는 공간입니다. 동일한 규칙이 모든 쌍에 적용됩니다.
가이드 열기중앙 열Centered Column
가운데 정렬된 단은 읽기 편한 최대 너비와 양옆에 비슷한 비율의 공간을 가져요.
가이드 열기벤토 그리드Bento Grid
벤토 그리드는 크기가 다른 타일들을 하나의 레이아웃으로 쏙쏙 묶어요. 더 넓은 공간을 차지하는 타일이 가장 중요한 내용이라는 걸 보여주죠.
가이드 열기텍스트 잘림Text Truncation
텍스트 잘림은 공간을 절약하기 위해 텍스트를 잘라냅니다. 말줄임표는 한 줄 이상이 빠졌음을 보여줍니다.
가이드 열기화면 비율Aspect Ratio
화면 비율은 요소의 너비가 높이에 비해 얼마나 되는지 알려줘요.
가이드 열기배경 흐림Backdrop Blur
배경 흐림은 투명한 표면 뒤에 있는 것을 부드럽게 해줘요. 표면 자체의 내용물은 흐려지지 않아요.
가이드 열기글래스모피즘Glassmorphism
글래스모피즘은 투명한 레이어 표면을 가진 시각적 스타일입니다. 블러, 밝은 테두리 및 작은 깊이감을 사용합니다.
가이드 열기리퀴드 글래스Liquid Glass
리퀴드 글래스는 움직이는 투명한 재료 스타일입니다. 렌즈 같은 굴절, 하이라이트 및 결합되거나 구부러진 것처럼 보이는 형태를 사용합니다.
가이드 열기스큐어모피즘Skeuomorphism
스큐어모피즘은 디지털 제어를 설명하기 위해 친숙한 실제 물체를 복제합니다. 또한 재료까지 복제할 수 있습니다.
가이드 열기뉴모피즘Neumorphism
뉴모피즘은 부드럽고 낮은 대비의 스타일입니다. 밝고 어두운 그림자가 컨트롤을 하나의 색상 표면에서 솟아오른 것처럼 또는 눌린 것처럼 보이게 합니다.
가이드 열기네오브루탈리즘Neobrutalism
네오브루탈리즘은 대담하고 높은 대비의 디지털 스타일입니다. 단순한 형태, 두꺼운 테두리, 직접적인 색상, 명확한 기계적 레이아웃을 사용합니다.
가이드 열기미니멀리즘Minimalism
미니멀리즘은 디자인에 필요 없는 것을 제거합니다. 그래도 제품을 명확하고, 유용하며, 독특하게 유지합니다.
가이드 열기플랫 디자인Flat Design
플랫 디자인은 단순한 모양, 단색, 명확한 평면 영역을 사용하며, 깊이를 흉내낸 것은 거의 없음
가이드 열기클레이모피즘Claymorphism
클레이모피즘은 부풀어 오른 모양과 둥근 모서리를 가진 장난기 있는 스타일입니다. 부드러운 그림자와 파스텔 표면은 점토처럼 보이게 합니다.
가이드 열기Y2K 디지털 미학Y2K Digital Aesthetic
이 디지털 미학은 1990년대 후반과 2000년대 초반 디지털 문화에서 유래한 레트로-퓨처 스타일입니다. 주로 크롬, 픽셀, 밝은 그라디언트, 장난기 있는 컴퓨터 세부 요소를 사용합니다.
가이드 열기프루티거 에어로Frutiger Aero
Frutiger Aero는 희망적인 2000년대 중반 스타일입니다. 반짝이는 인터페이스를 파란 하늘, 물, 푸른 식물, 거품, 친근해 보이는 기술과 혼합합니다.
가이드 열기웹 브루탈리즘Web Brutalism
웹 브루탈리즘은 거친 웹 스타일입니다. 일반적인 정제된 모습 대신 구조, 브라우저 기본값, 일반 글꼴, 계획된 거칠음을 보여줍니다.
가이드 열기토착 웹Vernacular Web
토착 웹은 커뮤니티가 만드는 일상적인 사이트를 복제합니다. 이는 대규모 그룹이 만든 정교한 시스템과 다릅니다.
가이드 열기AquaAqua
Aqua는 초기 macOS의 반짝이는 인터페이스 스타일이에요. 빛나는 컨트롤, 젤 같은 입체감, 얇은 줄무늬, 밝은 파란색 포인트를 써요.
가이드 열기Windows AeroWindows Aero
Windows Aero는 2000년대 후반의 데스크톱 스타일입니다. 투명한 창틀, 흐릿한 유리, 부드러운 빛, 겹쳐진 테두리를 사용합니다.
가이드 열기스위스 스타일Swiss Style
스위스 스타일은 명확한 그리드와 불균형이지만 균형 잡힌 레이아웃을 사용합니다. 또한 산세리프 글꼴, 사진 및 엄격한 시각적 순서를 사용합니다.
가이드 열기편집 디자인Editorial Design
편집 디자인은 읽기 속도, 글꼴, 이미지, 캡션 및 반복되는 페이지 패턴을 통해 이야기를 구성합니다.
가이드 열기머티리얼 디자인Material Design
머티리얼 디자인은 구성 요소와 상호작용을 위한 시스템입니다. 계층화된 표면, 목적 있는 모션, 유연한 레이아웃 및 공유 디자인 토큰을 사용합니다.
가이드 열기그라디언트Gradient
그러데이션은 색이나 투명도가 부드럽게 변하는 거예요. 선, 원, 각도, 또는 망사 모양을 따라가기도 해요.
가이드 열기그림자 및 높이Shadow & Elevation
그림자는 시각적인 효과야. Elevation은 그림자가 설명해 줄 수 있는 표면들 사이의 깊이 관계야.
가이드 열기테두리 반경 & 스퀴클 — 학습 번들Border Radius & Squircle — Learning Bundle
이 가이드는 세 가지 아이디어를 구분합니다. 일반 CSS border-radius, 초안 모서리 형태: 스퀴클(squircle), 그리고 기타 스퀴클 유사 형태 또는 플랫폼 마스크입니다. 이 번들은 하나의 표준 디자인 용어가 아닙니다.
가이드 열기불투명도Opacity
불투명도는 요소와 그 자식이 얼마나 단단하게 보이는지를 나타냅니다. 투명에서 불투명까지 범위가 가능합니다.
가이드 열기Apple 휴먼 인터페이스 가이드라인Apple Human Interface Guidelines
Apple 휴먼 인터페이스 가이드라인은 Apple 플랫폼의 디자인을 설명해요. 행동, 시각, 컨트롤, 입력, 접근성, 플랫폼 간 차이를 다뤄요.
가이드 열기노션 스타일 작업 공간Notion-style Workspace
Notion 스타일 워크스페이스는 차분한 문서 모양을 써요. 읽기 편한 글자, 내용 블록, 조용한 도구들, 그리고 넓은 여백을 중요하게 생각해요.
가이드 열기SaaS 마케팅 사이트SaaS Marketing Site
SaaS 마케팅 사이트는 한 가지 문제와 소프트웨어 서비스를 사람들에게 설명해요. 방문자가 자신에게 맞는지 판단하고 다음 단계를 고를 수 있게 도와줘요.
가이드 열기B2B 기업 사이트B2B Corporate Site
B2B 기업 사이트는 회사의 실력, 규칙, 신뢰도, 그리고 적합성을 살펴보게 도와줘요. 구매나 파트너십도 지원하죠.
가이드 열기직접 소비자 대상 전자상거래DTC E-commerce
DTC 전자상거래는 브랜드가 소비자에게 직접 판매할 수 있게 합니다. 여기에는 탐색, 제품 선택, 결제, 배송, 사후 지원이 포함됩니다.
가이드 열기장난기 있는 일러스트레이션Playful Illustration
장난기 있는 일러스트레이션은 생동감 있는 캐릭터, 형태, 색상 및 시각적인 유머를 사용합니다. 이는 따뜻함, 의미 또는 브랜드 성격을 더할 수 있습니다.
가이드 열기유기적 디자인Organic Design
유기적 디자인은 자연에서 발견되는 형태를 따릅니다. 불균형한 곡선, 촉감 있는 질감, 자연스러운 색상, 기계적이지 않은 배치를 사용합니다.
가이드 열기멤피스 스타일Memphis Style
멤피스 스타일은 대담한 포스트모던 룩입니다. 강한 형태, 상충하는 색상, 패턴, 불균형, 장난기 있는 에너지를 사용합니다.
가이드 열기터미널 미학Terminal Aesthetic
터미널 미학은 명령줄 화면에서 차용합니다. 고정폭 텍스트, 촘촘한 계층 구조, 프롬프트 표시, 몇 가지 색상, 그리고 명확한 상태를 사용합니다.
가이드 열기와비-사비Wabi-sabi
와비사비는 일본의 미에 대한 관점입니다. 완벽한 광택보다 제한, 변화, 불균형한 형태, 나이, 그리고 정직한 재료를 중시합니다.
가이드 열기CSS 논리적 속성CSS Logical Properties
CSS 논리적 속성은 블록 및 인라인과 같은 쓰기 흐름에 따라 면을 설명합니다. 이는 상, 우, 하, 좌와 같은 고정 방향을 대체합니다. 이는 레이아웃이 언어의 쓰기 방향을 따르도록 돕습니다.
가이드 열기서브그리드Subgrid
서브그리드는 부모의 행 또는 열 크기를 공유하는 다른 그리드 안의 그리드입니다. 한 방향 또는 양쪽 방향을 공유할 수 있습니다.
가이드 열기고유 크기 조정Intrinsic Sizing
고유 크기 조정은 요소의 콘텐츠가 외부에서 정해진 고정 크기만 사용하는 대신 크기를 결정하는 데 도움을 주도록 합니다.
가이드 열기최소 콘텐츠min-content
`min-content`는 허용된 모든 줄 바꿈 후에 콘텐츠가 사용할 수 있는 가장 작은 크기입니다.
가이드 열기최대 콘텐츠max-content
`max-content`는 일반적인 줄 바꿈 지점에서 줄 바꿈하지 않는다면 콘텐츠가 원하는 크기입니다.
가이드 열기minmax()minmax()
`minmax()`는 행이나 열에 최소 크기와 최대 크기를 모두 지정할 수 있는 CSS Grid 함수입니다.
가이드 열기clamp()clamp()
`clamp()`는 선호하는 CSS 값을 선택하지만 최소값과 최대값 사이로 유지합니다.
가이드 열기객체 맞춤 크기(object-fit)object-fit
`object-fit`은 이미지, 비디오 또는 유사한 항목이 그 박스 안에서 어떻게 맞추어질지를 제어합니다.
가이드 열기뷰포트 단위Viewport Units
뷰포트 단위는 브라우저의 표시 영역을 기준으로 하는 CSS 길이입니다. 작은 버전, 큰 버전, 동적 버전은 나타나거나 사라지는 브라우저 바를 처리합니다.
가이드 열기의사 클래스Pseudo-class
의사 클래스(pseudo-class)는 CSS 선택자의 일부입니다. 상태, 위치, 언어, 사용자 동작 등의 조건으로 요소를 찾습니다.
가이드 열기의사 요소Pseudo-element
의사 요소(pseudo-element)는 CSS가 소스 HTML에 일반 요소가 없는 부분이나 상자를 스타일링할 수 있게 합니다. 예로 첫 글자(first letter)와 생성된 장식이 있습니다.
가이드 열기CSS 테두리 반경CSS Border Radius
CSS border-radius는 수평 및 수직 반경을 사용하여 상자의 모서리를 사분원 형태로 만듭니다. 이는 그리기와 클리핑에는 영향을 주지만 상자의 레이아웃 크기를 변경하지 않으며, 수학적 스퀴클을 만들지는 않습니다.
가이드 열기CSS 스퀴클 코너CSS Squircle Corner
CSS Borders Level 4 초안에서, 스퀴클(squircle)은 둥근 형태와 정사각형 사이의 볼록 슈퍼엘립스 모서리 모양 값입니다. superellipse(2)와 같으며, 0이 아닌 테두리 반경이 필요하고 여전히 브라우저 지원 확인이 필요합니다.
가이드 열기강제 색상 모드Forced Colors Mode
강제 색상 모드는 여러 페이지 색상 대신 사용자가 선택한 시스템 팔레트를 사용합니다. 이는 컨트롤과 텍스트를 구별하기 쉽게 만들 수 있습니다.
가이드 열기Visual Effect MaterialVisual Effect Material
Visual Effect Material은 macOS 표면 스타일로, 뒤에 있는 것을 혼합하고 흐리게 합니다. 창 상태와 밝거나 어두운 모양에 따라 변화합니다.
가이드 열기