모바일·반응형·적응형
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
반응형 디자인 Responsive Design
화면 폭 등 조건에 따라 레이아웃을 유연하게 변경.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
적응형 디자인 Adaptive Design
정해진 화면·기기 환경별로 다른 레이아웃 구성.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
모바일 우선 설계 Mobile-first Design
작은 화면부터 핵심 구조를 설계하고 확장.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
브레이크포인트 Breakpoint
레이아웃·스타일이 변경되는 화면 너비 기준.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
유동 레이아웃 Fluid Layout
콘텐츠 너비가 화면 크기에 비례해 바뀌는 방식.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
고정 레이아웃 Fixed Layout
콘텐츠 너비를 특정 값에 고정하는 방식.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
안전 영역 Safe Area
노치·시스템 바 등을 피해 콘텐츠를 배치할 영역.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
터치 대상 Touch Target
손가락으로 누를 수 있도록 확보한 인터랙션 영역.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
엄지손가락 조작 영역 Thumb Zone
한 손 조작 시 손가락이 편하게 닿는 화면 범위.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
뷰포트 Viewport
사용자가 현재 볼 수 있는 표시 영역.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
반응형 그리드 Responsive Grid
화면 크기에 맞춰 열 개수·간격을 변경.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
탐색 레일 전환 Navigation Rail Adaptation
모바일 하단 탐색을 넓은 화면에서 세로 레일로 전환.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
화면 방향 전환 Orientation Change
가로·세로 방향 변경에 레이아웃이 적응.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
화면 밀도 Density
정보와 인터랙션 요소가 일정 공간에 차지하는 정도.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
압축 모드 Compact Mode
좁은 공간에서 간격·레이아웃을 축소한 UI.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
여유 모드 Comfortable Mode
정보 간 간격을 넓혀 읽기 쉬운 UI.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
다크 모드 Dark Mode
어두운 표면과 명도 대비를 중심으로 구성한 테마.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
라이트 모드 Light Mode
밝은 표면을 중심으로 구성한 테마.
모바일·반응형·적응형에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Mobile, Responsive & Adaptive Design
Open an entry for its visual reference, comparisons and source-language text.
Responsive Design 반응형 디자인
Design that flexibly changes layout according to conditions such as screen width.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Adaptive Design 적응형 디자인
Design using distinct layouts for predefined device or screen environments.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Mobile-first Design 모바일 우선 설계
Designing the essential structure for small screens first, then expanding it.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Breakpoint 브레이크포인트
A screen-width threshold at which the layout or styles change.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Fluid Layout 유동 레이아웃
A layout whose content width varies with the screen size.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Fixed Layout 고정 레이아웃
A layout that keeps content width at a specified value.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Safe Area 안전 영역
An area for content that avoids notches, system bars, and similar obstructions.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Touch Target 터치 대상
An interactive area sized to be activated with a finger.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Thumb Zone 엄지손가락 조작 영역
The screen region comfortably reachable during one-handed use.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Viewport 뷰포트
The area currently visible to the user.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Responsive Grid 반응형 그리드
A grid that adjusts its column count or spacing to screen size.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Navigation Rail Adaptation 탐색 레일 전환
Adapting mobile bottom navigation into a vertical rail on wider screens.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Orientation Change 화면 방향 전환
Layout adaptation when switching between portrait and landscape orientation.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Density 화면 밀도
The amount of information and interactive content placed within a given space.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Compact Mode 압축 모드
An interface with reduced spacing and a tighter layout for limited space.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Comfortable Mode 여유 모드
An interface using more generous spacing to improve readability.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Dark Mode 다크 모드
A theme built around dark surfaces and appropriate luminance contrast.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Light Mode 라이트 모드
A theme built around light surfaces.
Specifying mobile, responsive, and adaptive interfaces.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.