플랫 디자인의 역사와 미래

2018. 9. 9
UI Lab 디자인 스터디 | 서연주
플랫 디자인의 역사와 미래
디지털 디자인의 미니멀리즘

플랫 디자인이란?
플랫 디자인의 역사와 원리
머터리얼 VS 플랫
플랫 디자인의 미래
Contents
01
02
03
04

플랫 디자인이란?01
• GUI에서 일반적으로 사용되는 최소한의 UI 디자인 언어
• 복잡한 그래픽 효과를 배제하고 단순한 색상과 구성을 통해  
직관적으로 인식 가능한 2차원 디자인 방식  
• 유용성과 기능성을 강조하는 최소한의 디자인 방식
• 단순한 요소, 타이포그래피 및 미니멀리즘  
미니멀리즘 : 최소한의 요소만을 사용하여 대상의 본질을 표현하는 디자인 기법
• Windows 8의 바탕 화면과 각종 스마트폰에서  
Metro라는 플랫 디자인을 채택한 것을 계기로 인터넷 홈페이지에 널리 퍼짐
플랫 디자인의 정의와 목적

• 플랫 디자인의 반대 개념
• ‘어떤 도구의 형태’라는 뜻으로 실존하는 메타포로부터 형태를 디자인 하는 방법
• iOS6 드롭새도우, 그라디언트 텍스처 및 3D요소 포함하는 풍부한 디자인
• 디지털에 익숙하지 않은 시대 오프라인 환경을 그대로 옮겨두는 익숙함의 배려
스큐어모피즘 (Skeuomorphism)
플랫 디자인이란?01

• 1950년 스위스에서 나타난 국제적인 디자인 양식.
• 국제 타이포그래피 스타일(Tne international Typographic Style) 이라고도 함
• 데스틸, 구성주의, 바우하우스, 뉴 타이포그래피로부터 발전한 스타일  
뉴타이포그래피 : 정형화된 형식을 부정, 산세리프를 이용하여 비대칭 구성을 지향한 운동
• 개인적 경험보다는 합리적 수학적 보편과학적 방법을 이용
• 객관적이고 과학적인 명료성
• 20세기 중반 그래픽 디자인은 스위스 디자인을 기준으로 발전
플랫 디자인의 기원
플랫 디자인의 역사02
스위스 디자인

• 미니멀리즘을 강조한 단순함 선호
• 기하학적 추상화
• 타이포그래피 중점
• 대조되는 폰트 크기 사용 
불일치기법 : 다양한 폰트 크기가 정보 계층 구조를 암히시하는 기능적 용도로 사용
• 콘텐츠 정렬을 위한 그리드 시스템
• 비대칭 레이아웃 / 여백
• 타이포그래피와 사진의 결합
원리

• 스위스 디자인 운동의 원리를 구현하도록 고안
• 1957년 만들어짐
• 라틴어로 스위스를 의미
• 모더니즘과 미니멀리즘과 관련된 폰트 특징
• 실용적 
작은 크기에도 멀리서 쉽게 읽을 수 있음
Helverica

Josef Müller-Brockmann: Poster for the Auto Club in Switzerland (1955) Josef Müller-Brockmann: Concert Poster for the Zurich Town Hall (1951)

Josef Müller-Brockmann: Poster for the Auto Club in Switzerland (1955)

An issue of Neue Graﬁk, published by Josef Müller-Brockmann

https://abduzeedo.com/swiss-typography-style-posters

근대 디자인사
미술공예운동
아르누보
독일공작연맹
미래파
신조형주의(데스틸)
절대주의
구성주의
바우하우스
아르데코
현대 디자인사
18세기 산업혁명
다다이즘
초현실주의
추상 표현주의
포스터모더니즘
팝아트
옵아트
미니멀아트
1차 세계대전
모더니즘

• 1920년대 일어난 근대적인 감각을 나타나는 특정한 예술운동이나 경향
• 표현주의, 미래주의, 다다이즘,등의 감각적, 추상적, 초현실적인 경향의 여러운동
• 과학이나 합리성을 중시, 널리 근대화를 지향
• 19세기 예술의 근간이라 할 수 있는 사실주의에 대한 반항운동
• 1차 세계대전 후에 일어난 전위예술(아방가르드)운동의 한 형태
• 급진적 사고 방식을 가지고 행동하는 자들
관련 디자인 운동
모더니즘
구성주의 데스틸 바우하우스 미니멀리즘

• 1920 러시아에서 일어난 추상주의 예술운동
• 단순한 기하학적 형태들이 실제 대상을  
재현, 암시. 단순화된 색상 사용
• 바우 하우스 (Bauhaus)와 데스틸 (De Stijl)과  
같은 당시 유럽의 다른 디자인 운동에 영향
플랫 디자인의 역사와 원리02
구성주의 
(1913~1921)
데스틸 바우하우스 미니멀리즘모더니즘
https://www.pinterest.co.kr/pin/390124386447553792
http://www.behance.net/gallery/Constructivism-Inspired-Poster/5415575

• 독일의 표현주의, 러시아 구성주의와 함께 네덜란드에서 출현
• 간결하고 논리적인 스타일로 구성과 기능 강조
• 추상적인 기하학적 형태, 수평, 수직, 제한된 색상
• 색채 : 흑백에 빨강 노랑 파랑의 순수한 원색으로 제한
• 순수평면의 추상형태를 3차원 공간구조로 변환
• 미니멀리즘의 토대 마련
데스틸 
(1917~1931)
구성주의 바우하우스 미니멀리즘모더니즘

• 1919 건축가 발터 그로피우스가 미술학교와 공예학교 병합하여 설립
• 장식성을 배제한 단순하고 자연스러운 색채 사용 실용성 추구
• 형태는 기능을 따른다
• 단순한 기하학적 모양, 산 셰리프 활판 인쇄 및 그리드 구성을 포함
• 러시아의 구성주의와 테스틸의 요소를 내재화 한 구성주의의 변종 추구
바우하우스 
(1917~1931)
구성주의 데스틸 미니멀리즘모더니즘

• 모든 형태의 극단적인 단순화
• 개인적인 감성과 표현 억제
• 순수하고 무표정한 새로운 형태언어
• 색상 절제, 구조적인 요소로서 표면은 대부분 흑색이거나  
단색의 거친 금속 때때로 금, 은, 동 사용
• Less is More 
유명한 20 세기 건축가 인 Ludwig Mies van der Rohe 의 모토
구성주의 데스틸 바우하우스모더니즘
미니멀리즘 
(1960~)

구성주의 데스틸 바우하우스모더니즘
Perfection is achieved,
not when there is nothing left to add,
but when there is nothing left to remove 
Antoine de Saint-Exupéry
추가 할 것이 없을 때가 아니라 제거 할 것이 없을 때. 완벽함은 달성 할 수 있습니다.
- 앙투안 드 생 텍쥐페리 -
미니멀리즘 
(1960~)

• 사람과 기계간의 상호작용이 발생하는 공간
• 사용자가 장치에 명령을 내릴 수 있게 하여 해당 장치가
• 프로세스를 수행하여 응답하도록 하는것
플랫 디자인의 디지털화
사용자 인터페이스(UI)
사용자가 목표를 달성하고 문제를 해결하기 쉽도록
인터랙션 가능한 간단하고 효율적으로 만드는 것
목적
일반적으로 제품 또는 경험의 시각적 요소,  
즉 제품의 모양과 느낌, 표현 및 인터랙션 경험을 예술적으로 즐겁게 만드는 인터페이스
UI 디자인

• 1960년대 중반 최초의 대화식 사용자 인터페이스
• 컴퓨터와 인터랙션하는 주요수단
• 1970~1980년대 걸쳐 유닉스 시스템 MS-DOS 및 애플 도스를 포함한 
개인용 컴퓨터 시스템에서 사용
• 명령 텍스트 입력, 받아들이고 적절한 운영체제 기능으로 변환하는 프로그램
• 일부기능에 대한 효과적인 UI였지만, 일반사용자에게는 좋지 않은 경험 제공
명령행 인터페이스에서 그래픽 인터페이스까지
명령행 인터페이스(CLI)
https://www.voidtools.com/ko-kr/support/everything/command_line_interface/

• 1968년 마우스 발명 : 더글러스 앵글바트 연구원
• 1973년 제록스 Xerox PARC 연구원이 첫번째 GUI개발  
인쇄 및 종이 생산 선두업체 제록스가 기술 혁신에 합류하여 새로운 컴퓨터 기술개발을 위해 설립
• Xerox Alto : 최초의 GUI 대학연구용 개인용 컴퓨터 개발(상업적용도 아님)
• Xerox Star 워크스테이션 출시 
GUI 운영체제 발표 응용 프로그램과 GUI를 포함하여  
통합된 컴퓨터 화면 창을 기반으로 한 GUI를 가진 최초의 대량 판매 장치
그래픽 인터페이스(GUI)

• Apple : 1981 리사. 1984 매킨토시
• Microsoft : 1985 Window 발표
기술은 삶을 모방한다.  
실제 데스크탑의 레이아웃을 미러링. 물리적으로 동일한 아이콘 (클립보드, 계산기, 휴지통)

• 2002 : 마이크로소프트 Window media center 출시
• 2006 : 마이크로 소프트 Zune 미디어 플레이어 출시
소문자 타이포그래피 및 배경 이미지 
깨끗하고 단순 실루엣 스타일
로고 및 단색 폰트 중점

• 2010 : Window Phone 7 출시
• Microsoft의 Metro 디자인
• Window 8 운영체제 도입
플랫 디자인의 등장
그리드, 밝은 색상 
단순한 산세리프 타이포그래피 
플랫 아이콘

• Apple iOS7 출시 (2013년 여름)
플랫 디자인의 등장
iOS7iOS6
스큐어모피즘에서 플랫 디자인으로  
바뀌면서 인기를 얻음

Google Search Volume for
“Metro”(blue) and “Flat design” (red)
플랫 디자인이 이름을 얻기전에 Window 8은 ‘메트로 디자인’언어로 논의  
IOS7출시 이후 플랫 디자인을 알리게 되었다.

플랫 디자인의 원리
02-1

• 간소하고 효율적인 인터페이스 디자인
• 시각적으로 매력적, 접근하기 쉬운 상태에서 신속한 정보 전달 용이
• 반응형 인터페이스 디자인
• 브라우저크기 변경
• 최소한의 디자인 요소로 웹사이트는 더 빠르게 로드 크기를 쉽게 조정
• 고화질 화면에서도 선명하게 보임
플랫 디자인의 원리
플랫 디자인의 원리02-1

• 이미지 프레임부터 버튼, 탐색 도구에 이르기까지 그림자가 없는 선명한 요소
• 텍스처, 그라데이션 및 복잡한 형태 피하기
• 명확하고 엄격한 시각적 계층 구조
• 앱 및 모바일 디자인에 더 많은 인기 
추가된 효과 없음

• 모양과 요소의 단순성
• 간단하고 클릭하기 쉬운 UI 요소
단순 요소

• 대담하고 읽기 쉬운 타이포그래피
• 컨텐츠와 레이아웃의 깔끔한 계층 구조
• 내용 정렬을 위한 그리드 시스템 그리드 원리, 기하학적 접근법, 시각적 균형 적용
• 버튼이나 아이콘과 같은 간단한 사용자 인터페이스 요소
• 모노톤 컬러 팔레트. 밝고 생생한 색상을 사용하면 요소간에 구분 가능
• 레트로 색상 인기
• 빠른 시각적 인식을 지원
타이포그래피와 색상 중심

• 본질적으로 단순하며 전반적인 미니멀리즘 디자인
• 간단한 색상과 텍스트
• 공백, 밝은 색상, 선명한 모양 및 깨끗한 선 강조
• Less is more  
화면의 요소가 적을수록 나머지 요소는 더 강력해짐 
콘텐츠 주변을 디자인하고 사용자가 혼란스러워하지 않도록 기본 요소만 남겨 둠.
미니멀리즘

머터리얼 VS 플랫03
고전적인 디자인 원리를 합성하는 언어 만들
모바일이 기본이되는 여러 플랫폼 및 장치에 
배포 할 통합 시스템 개발
기본목표
머터리얼 디자인이란?
Google의 ’시각적 언어' 입니다.
Google이 미리 정한 일련의 가이드 라인을 결합하여 통합 된 브랜드 경험을 창출합니다.

실제 생활에서 보이는 방식에 영감을 받았으며, 때로는 입체적임
웹 페이지의 요소는 높이와 질감이 다르고, 그림자 드리워짐
리얼리즘의 형태 "skeuomorphism"
머터리얼 디자인의 3가지 핵심요소
현실적인 비주얼

명확하고 고유한 색 계층 정의 매우 용이
한 색상의 여러 가지 음영으로 구성된 복잡한 조합
페이지의 어느 부분을 클릭 할 수 있는지 왜곡하여 사용자에게 실망스러운 경험을 제공합니다 .
대담하고 현명한 색상

애니메이션은 클릭 가능한 요소를 강조 표시
각 운동은 실제 세계를 반영하고 웹 사이트 방문자가 원하는 경로를 정의하는 데 도움
실생활에서 영감을 얻었기 때문에 요소는 서로 쌓이거나 튕겨져 나올 수 있지만 서로 통과 할 수는 없음
애니메이션 요소가 너무 많으면 웹 페이지가 로드 되고 산만해지는 속도가 줄어듬
의미 있는 행동
https://www.behance.net/gallery/23056487/Material-Design-Button-Animation

• Flat과 마찬가지로 미니멀하고 세련된 디자인
• 보다 사용자 친화적인 쉬운 사용성
• 통합되고 단순한 인터페이스
• Z축 깊이 생성
• 원칙과 목표는 디자이너에게 일관성 제공
• 지속적으로 업데이트되는 가이드라인
• 웹 솔루션용 애니메이션 개발
• 반응형 플랫폼
머터리얼 디자인 장단점
장점

• Google 소유. 허가없이 변경의 어려움.
• 애니메이션으로 인한 모바일 사용자의 배터리 소모
• 너무 명확하게 우리가 창의력을 사용할 수 없는 지침 표시
• 디자인 가이드 라인 준수로 인한 독창성 약화
• 플랫보다 시간이 오래 걸림
머터리얼 디자인 장단점
단점

평면 디자인에는 3D 효과 또는 재미있는 애니메이션이 없습니다.
현실적인 skeuomorphic 디자인이 너무 바빠서 사용자를 혼란스럽게한다는 개념에 의존합니다.
소수의 종소리와 휘슬이 사용자 경로를 쉽게 만듭니다.
플랫 디자인의 3가지 핵심요소
흥미로운 색상 팔레트
미니멀리즘
평면 디자인은 소재 디자인과 마찬가지로 동일한 이유로 쉽게 구별 할 수있는 생생한 색상을 사용합니다.
사용자가 클릭 할 수있는 요소와 그렇지 않은 요소를 쉽게 파악할 수 있습니다.
초점 단어
평평한 디자인은 최소한이기 때문에 타이포그래피 와 글쓰기가 각 웹 페이지의 초점이됩니다.
이것은 방문자를 대접하기보다는 알리려고하는 웹 사이트에 이상적 입니다.

• 디자인의 시각적 미니멀리즘과 세련된 디자인
• 명료한 타이포그래피로 높은 가독성
• 콘텐츠 중점
• 반응형 디자인으로 손쉽게 조정
• 브라우저와 앱에서 로딩 시간 단축
• 미적 요소가 아닌 유용성
• 웹 및 모바일 인터페이스에서 빠르고 직관적 인 탐색을위한 효과적인 지원
플랫 디자인 장단점
장점

• 단조롭거나 평범한 특징 없는 디자인
• 디자인 요소 사용 제한
• 부족한 직관성. 시각적 단서 필요
• 어디에나 있는 비슷한 플랫 디자인 모델일 경우 눈에 띄기 어려움
• 독창적이거나 현대적인 스타일의 웹이나 앱을 만들기 어려움
플랫 디자인 장단점
단점

차이점
디자인의 깊이
Z축을 사용하여 플랫보다 넓은 범위
디지털과 실제 세계를 하나로 통합
패턴
높은 응답성
현실 세계에서 따라 오는 패턴과 유사하게 사용자의 행동으로 진행

차이점
그림자와 빛
범위 계층 구조 발생, 그림자의 경우에는 객체의 다른 위치를 결정하는 데 사용
그림자의 투영에 따라 그것이 위 또는 아래 결정

깨끗하고 단순한 디자인, 높은 기능성과 유용성
어떻게 선택해야할까?
공통점
플랫
머터리얼
단순해야하는 사이트를 디자인 하는 경우
모든 장치에서 다양한 수준의 기술 경험을 갖춘 다양한 사용자 대상
사용자 편의성을 강조하는 경우
단순성과 유용성에 주로 관심이있는 경우
애니메이션 으로 더 멋진 사이트 를 만들고 싶은 경우

• 하이라이트
• 그라디언트
• 그림자와 깊이
• 애니메이션
• 컬러 팔레트
Flat 2.0
플랫 디자인의 미래04
새로운 접근법
Flat 2.0은 플랫 요소를 미묘한 추가 기능과 결합하여 사용자 편의성을 향상

• 모든 Microsoft 장치 및 시스템에서 일관된 인터랙션 언어로 사용
• 불확실한 미래에 적응하고 시스템으로 확장성 제공
• Windows OS에서 실행되는 모든 터치, 비 촉감 및 증강 현실 장치를 목표
• 비즈니스 모델 및 가격면에서 Apple 및 Google과 제휴 할 수있는 핵심 요소
• AR,VR MR 용으로 제작
Fluent design
모두를 지배할 수 있는 하나의 디자인

• 빛 : 선택 및 탐색 중에 사용자 방향을 향상시켜 사용자 안내에 필요한 분위기를 만듭니다.
• 깊이 : 2D 디스플레이에 추가 치수를 추가하기 위해 z 축을 사용하면 추가 된 레이어, 요소 스택 및  
10000 % 선명도의 평면 디자인 개정이 가능합니다.
• 모션 : 요소 간의 부드럽고 자연스러운 전환을 도입 할뿐만 아니라 창과 스크린 사이를 완벽하게 전환하여  
각 사용자 동작 간의 연속성을 제공합니다.
• 재질 : 독점적 인 느낌과 터치 경험으로 요소를 갖추고 사용자가 상호 작용하도록 유혹합니다.
• 규모 : 2D에서 3D에 이르기까지 모든 종류의 장치에서 설계 일관성 및 상호 운용성에 중점을 둡니다.
Fluent design
5가지 주요 요소

Chrome design
새로운 머터리얼 디자인 테마
새로운 둥근 탭. Chrome의 새로운 탭은 한눈에 쉽게 볼 수 있도록 설계되어있어  
브라우저에서 너무 많은 탭을 열어 놓고 싶은 사용자에게 유용하다.

향상된 비밀번호 관리 암호
Google 크롬의 기본 제공 암호 관리자를 사용하는 경우 최신 안정 버전을 사용하면 사용성이 향상된다는 사실을 알게
되어 기쁩니다. 저장된 비밀번호, 주소 및 신용 카드 번호는 페이지 상단의 기능 이미지와 같이 Chrome 툴바에서 액세
스 할 수 있습니다. Google은 Chrome이 로그인 양식을 더 정확하게 인식 할 수 있다고 말합니다. 따라서 인식되지 않
는 로그인 입력란을 발견하지는 않을 것입니다. 마지막으로 Google 크롬은 자동으로 비밀번호 제안을 생성 할 수 있으
므로 자신의 비밀번호를 찾을 필요가 없습니다.

더 똑똑한 검색 주소창
Google 크롬의 검색 주소창 Omnibox는 검색 쿼리를 완료하지 않고도 검색 주소창에 직접 관련 질문을 표시합니다.  
많은 탭을 열면 이 기능을 사용하면 시간을 절약 할 수 있으므로 Wikipedia 나 WolframAlpha에서 답변을 찾을 필요가
없습니다. 똑똑한 검색 주소창은 weather.com의 현지 날씨 또는 외국 단어의 번역과 같은 검색어에 대한 즉각적인 답
변을 표시 할 수도 있습니다.
웹 사이트가 아닌 주소 표시 줄 제안에서 바로 정보 (예 : '도시 + 날씨'를 입력하는 동안 날씨 세부 정보)

새 탭 페이지 사용자 정의
Google 포토의 사용자 정의 배경 화면 과 Canary 버전의 사용자 정의 단축키 를 테스트 한 후 Google은 이제 안정 버
전 Chrome에 이러한 기능을 제공합니다. 우리가 UI 새로 고침을 게시 한 첫 번째 GIF는 이러한 새로운 기능을 보여줍
니다.

https://medium.muz.li/skeuomorphic-design-a-controversial-ux-approach-that-is-making-a-comeback-a0b6e93eb4bb
https://think360studio.com/flat-design-vs-material-design-the-design-war
https://vanseodesign.com/web-design/swiss-design
https://medium.com/@mason_weis/what-is-swiss-design-2c97088c3f20
https://designmodo.com/flat-design-principles 
https://www.designlabthemes.com/principles-of-flat-design
https://www.cleveroad.com/blog/flat-design-vs-material-design-how-different-they-are
https://www.silocreativo.com/en/flat-design-vs-material-design-similarities-and-differences
https://inkbotdesign.com/material-design-vs-flat-design
https://www.motocms.com/blog/en/flat-design-vs-material-design
https://medium.com/@MoumitaDasgupta/flat-design-or-material-design-is-it-different-or-all-the-same-a0b5a4227e88
https://fatguymedia.com/web-design/material-design-vs-flat-design-whats-difference
https://thenextweb.com/google/2018/09/04/google-chrome-gets-a-big-redesign-and-new-features-for-its-10th-birthday/
https://www.howtogeek.com/365136/heres-whats-new-in-google-chrome-69
https://www.bluecompass.com/blog/flat-20-why-your-website-needs-this-design-update
https://www.xda-developers.com/google-chrome-material-design-theme
https://uxdesign.cc/googles-chrome-new-design-what-s-good-what-s-bad-and-what-s-still-missing-da593706c9dc
참고 자료

Thank You!
서연주

uxﬂower@gmail.com
From designer
UI LAB
https://www.facebook.com/from.designer
https://www.facebook.com/groups/uidesignLab

플랫 디자인의 역사와 미래

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 플랫 디자인의 역사와 미래

Similar to 플랫 디자인의 역사와 미래 (20)

플랫 디자인의 역사와 미래