디자인 무브먼트
1950년 이후 디자인 사조의 흐름. 각 무브먼트의 맥락, 대표작, 시각 시그널을 디자이너와 개발자 관점에서 정리합니다.
1 / 5
Streams (Pilot)12
Movements1950 ~ Now
Span기능주의 계열
장식 대신 구조와 타이포그래피로 명료함을 확보하는 계열. 디자인 시스템의 토대.
Josef Müller-Brockmann, 1959 / via Wikimedia Commons · PD (Commons PD-textlogo)Swiss Style
스위스 스타일
객관적 정보 전달을 위한 그리드와 산세리프 중심의 체계적 스타일
전후 다국적 커뮤니케이션 수요가 커지면서, 언어와 문화 차이를 넘는 중립적 시각 언어가 필요했습니다. Zurich와 Basel의 디자인 학교가 그리드, Akzidenz-Grotesk, Helvetica를 중심으로 체계화했습니다.
High
토큰화(그리드, 스페이싱, 단일 서체)가 쉬워 디자인 시스템의 기초가 됩니다.Low
시스템 컴포넌트만으로 구현 가능, 일러스트·모션 투자 없이도 성립합니다.Swiss
Zurich와 Basel 디자인 학교가 본진, 이후 DE 전역으로 확산.
Robert Scoble, 2008 / via Wikimedia Commons · CC BY 2.0Minimalism (Digital/UI)
디지털 미니멀리즘
인지 부하를 줄이기 위한 "빼는 디자인"의 디지털 계보
1995년 Jakob Nielsen이 "미니멀리스트 디자인"을 10대 사용성 원칙에 포함시키며 웹 UI의 출발점을 세웠습니다. 2006년 John Maeda의 Laws of Simplicity가 이 기조를 책으로 체계화하면서, Google·iPod식 "빼기의 미학"이 업계 표준 수사가 됐습니다.
High
토큰 적고 규칙 단순, 시스템화가 가장 쉬운 무브먼트.Low
덜어내는 접근이라 커스텀 에셋 투자가 최소로 끝납니다.US-West
Nielsen(캘리포니아), Maeda(MIT Media Lab) 축이 중심.
Windows Phone 7, 2010 / via Wikimedia Commons · CC BY 2.0Metro
Metro
교통 표지판에서 출발한 타이포 중심 "content before chrome" 스타일
2010년 Windows Phone 7에서 공개. Seattle King County Metro 등 공공 교통 사이니지와 스위스 스타일을 레퍼런스로, 아이콘 장식 대신 큰 텍스트와 플랫 타일로 콘텐츠 우위를 설계했습니다. Zune·Media Center에서 선행 실험 후 전사 확장됐습니다.
.JPG)
High
타일·타이포·색면 규칙이 강해 토큰화와 일관성 확보에 유리합니다.Low
이미지보다 타이포와 단색 타일이 주역이라 자산 비용이 낮습니다.US-West
Redmond(Microsoft) 소속, Seattle 교통 사이니지에서 직접 영향.
Microsoft, 2012 / via Wikimedia Commons · PD (ineligible geometry) + trademarkFlat Design
플랫 디자인
스큐어모픽을 버리고 색면과 타이포만 남긴 모바일 후기 표준
2013년 WWDC에서 Jony Ive가 iOS 7을 공개하며 가죽·종이·금속 질감을 전면 걷어냈습니다. Microsoft Metro의 선행과 망막 디스플레이 시대의 성능·선명도 수요가 맞물려, 2015년까지 모바일 UI의 사실상 표준이 됐습니다.
High
그림자·질감 규칙이 단순해 토큰화가 용이합니다.Low
일러스트 대신 색면 처리라 에셋 비용이 낮습니다.US-West
Apple(Cupertino)과 Google(Mountain View) 축이 동시 추진.
Google / Open Handset Alliance, 2014 / via Wikimedia Commons · CC-BY-SA 4.0Material Design
머티리얼 디자인
"디지털 종이"로 물리 은유를 되살린 체계화된 디자인 시스템
2014년 Google I/O에서 Matías Duarte가 공개. 코드명 Quantum Paper, Android L과 함께 발표됐습니다. 플랫의 공간 감각 부재를 종이·잉크·그림자 메타포로 보완하면서, 컴포넌트·토큰·가이드라인을 공식 디자인 시스템으로 배포했습니다.
High
원본 자체가 디자인 시스템이라 토큰·컴포넌트 매핑이 직결됩니다.Mid
모션·elevation 처리를 제대로 하려면 어느 정도의 엔지니어링이 필요합니다.US-West
Google Mountain View 디자인 팀이 본진.
KK IN HK, 2024 / via Wikimedia Commons · GFDL 1.2+ / CC BY-SA 4.0Fluent Design
Fluent 디자인
디바이스 전반의 빛·깊이·모션을 포괄하는 MS의 다면 디자인 언어
2017년 5월 Build 컨퍼런스에서 공개. 코드명 Project Neon. Metro의 타이포 우선 기조에 라이트·깊이·모션·머터리얼·스케일 5원칙을 얹어, Windows Mixed Reality와 Surface Dial 시대의 입력 다양성을 포괄했습니다.
High
Fluent UI 공식 React 라이브러리가 존재해 토큰·컴포넌트 매핑이 직결.Mid
Acrylic·Reveal·모션을 웹에서 자연스럽게 내려면 추가 구현 비용이 듭니다.US-West
Microsoft Redmond 디자인 조직 주도.
Google, Material Design / via Wikimedia Commons · CC-BY 4.0Material You
머티리얼 유
사용자 배경화면에서 팔레트를 추출하는 개인화형 머티리얼 3세대
2021년 Google I/O에서 공개. 내부 코드명 Monet. Android 12와 Pixel 6부터 탑재돼, 배경화면 색을 실시간 분석해 시스템 UI·앱 색 전체를 재구성합니다. "시스템이 사용자에게 맞춘다"는 방향으로 머티리얼의 철학이 한 차례 전환됐습니다.
High
M3 토큰과 MCP 색 추출 알고리즘이 공개돼 시스템 이식이 용이.Mid
사용자별 동적 색 파이프라인을 웹·앱에서 제대로 구현하려면 엔지니어링이 추가로 필요합니다.US-West
Google Mountain View 기반.
Rasmus Andersson / Inter font (SIL OFL 1.1) · SIL OFL 1.1Swiss Revival 2.0
스위스 리바이벌 2.0
웹 타이포그래피 시대에 돌아온 에디토리얼 스위스 스타일
가변 폰트와 CSS Grid, 그리고 Pangram Pangram·Klim 등 독립 파운드리의 그로테스크가 대중화되면서, 2010년대 후반부터 에디토리얼·브랜드 사이트가 스위스 원리를 다시 꺼내 들었습니다. Kinfolk·Are.na식 에디토리얼 감성이 웹에서 재현됐습니다.
High
그리드·타이포 토큰만 잡으면 즉시 시스템화 가능.Low
유료 서체 비용 외에 별도 에셋이 거의 필요하지 않습니다.Global
독립 파운드리와 에디토리얼 매체를 중심으로 국적 없이 전파.
Stripe, 2016 / via Wikimedia Commons · PD-textlogo + trademarkEditorial Utilitarian
에디토리얼 유틸리테리언
타이포·모노크롬·미세 디테일로 프로덕트 신뢰를 쌓는 툴 브랜드 스타일
Linear·Vercel·Stripe가 2020년 전후 공개한 사이트·프로덕트에서 수렴한 톤. 커스텀 서체(Geist, Inter Display, Söhne), 모노크롬 + 1~2색 악센트, 극세 보더와 서브픽셀 정렬이 공통 특징입니다. 에디토리얼 레이아웃 감각을 유틸리티 프로덕트에 이식했습니다.
Mid
토큰화는 가능하지만 미세 디테일(서브픽셀·모션)의 일관성 유지 비용이 적지 않습니다.Mid
커스텀 서체·미세 모션이 완성도의 핵심이라 투자 없이 복제하면 싸구려가 됩니다.US-West
SF·뉴욕 프로덕트 브랜드를 중심으로 세계로 확산.
Arun Temme / bento-generator (MIT) · MITBento Grid
벤토 그리드
일본 도시락에서 온 비대칭 모듈러 타일 레이아웃
Apple이 2023년 WWDC 키노트 요약 슬라이드에 비대칭 타일 구성을 적극 적용하며 "bento"라는 내부 명칭이 유출, 업계 전반으로 퍼졌습니다. 뿌리는 일본 도시락의 칸막이 구성, 디지털에서는 1980년대 일본 잡지·PC 매거진 레이아웃에서 먼저 나타났습니다.
Mid
카드 컴포넌트 자체는 토큰화 가능하지만 비대칭 배치는 페이지별 커스텀.Mid
카드마다 맞춤 비주얼(3D, 영상)이 들어가면 자산 제작 비용이 올라갑니다.JP
도시락의 칸막이 구성이 기원, US-West(Apple)가 디지털 적용을 대중화.
Viva Republica (Toss) / via Wikimedia Commons · PD-textlogo + trademarkK-Fintech Friendly Minimal
K-핀테크 친화 미니멀
Toss 이후 한국 금융 앱의 "친절한 단순함" 표준
Toss(Viva Republica)의 간편송금 성공 이후, 카카오뱅크·토스뱅크·케이뱅크까지 한국 모바일 금융 앱이 단일 CTA, 큰 숫자, 친근한 문장형 카피, 포인트 컬러 한두 개의 공통 문법을 형성했습니다. Toss는 매년 Simplicity 컨퍼런스로 이 철학을 공표합니다.
High
토큰과 컴포넌트 규칙이 명확해 팀 내 복제·학습이 빠릅니다.Low
일러스트보다 타이포·숫자 중심이라 자산 제작 부담이 낮습니다.KR
한국 핀테크 3사(Toss, Kakao Bank, K뱅크) 중심의 로컬 공통 문법.
Cycling2, 2025 / via Wikimedia Commons · CC0 1.0Command Palette
커맨드 팔레트
Cmd+K 하나로 모든 액션을 키보드에 몰아넣는 파워 유저 패턴
2011년 Jon Skinner가 Sublime Text에 Command Palette(Ctrl/Cmd+Shift+P)를 도입하면서 시작됐습니다. Emacs의 M-x, macOS 메뉴 검색에서 계보를 잇고, 2015년 VS Code가 같은 단축키로 계승했습니다. 2020년 전후 Slack·Notion·Linear를 거치며 웹의 Cmd+K가 사실상 표준이 됐습니다.
High
kbar·cmdk 같은 오픈소스 컴포넌트가 사실상 표준.Low
라이브러리로 구현 가능, 커스텀 비용 낮음.US-West
Sublime HQ(호주 출신이나 실리콘밸리 개발자 커뮤니티가 확산의 축).