표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Abstract & Geometric
기하학적 형태와 추상적 요소를 활용한 현대적이고 역동적인 스타일입니다.
- YEAR
- 2015
- MOOD
- 화려한 · 친근·발랄
- PRIMARY#FFA500
- SECONDARY#FF6347
- ACCENT#FFD700
- BG#FAFAFA
- SURFACE#FFFFFF
취급 표시
- 살짝 둥근 모서리
- 굵은 테두리
- 격자 바탕
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 4단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 2단계
- 화려한
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- Spotify 캠페인
- Adidas 디자인 요소
- 많은 테크 스타트업 로고
사용 사례
- 테크 스타트업 브랜딩
- 스포츠·피트니스 앱
- 뮤직·엔터테인먼트
- 포스터·홍보물
이런 프로젝트에 맞습니다
- 테크 스타트업
- 스포츠·피트니스
- 뮤직·엔터테인먼트
- 포스터·홍보물
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 구조
- 균형
- 역동성
주요 특징
- 기하학적 형태
- 추상적 패턴
- 대담한 구성
- 역동적인 레이아웃
- 강한 시각적 임팩트
장점과 한계
장점
- 강한 시각적 임팩트
- 브랜드 개성 표현 용이
- 다양한 색상과 조합 가능
한계
- 콘텐츠보다 비주얼이 주목받을 수 있음
- 지나치면 복잡해 보임
- 실제 사물을 표현하기 어려움
컬러 시스템
기하학 도형의 색이 팔레트를 구성. 도형별로 다른 색 블록이 겹치는 구성
색의 역할
- shape-1: 가장 큰 도형의 주색
- shape-2/3: 보조 도형 색 — 대비 또는 유사색
- background: 도형들의 기반 — 흰색 또는 매우 연한 색
- text: 도형 위에서도 가독성 확보
제약
- 도형 색과 배경 색 구분 명확히
- 도형 수와 색상 수 비례 — 도형 많으면 색도 다양하게
다크모드 — 배경 어둡게, 도형 색상 밝기 유지
명도 대비 — 도형이 텍스트 뒤에 올 때 대비 확인 필수
타이포그래피
기하학적 산세리프 — 도형과 동일한 정밀함
글꼴은 최대 1종 · 스케일 비율 1.25 (Major Third)
- 장식 폰트 금지 — 도형이 이미 장식 역할
- 텍스트는 도형과 충돌하지 않게 명확하게
설계 제약
반드시 포함
- 기하학 도형 레이어링
- 도형 간 겹침·투명도 활용
하지 말 것
- 유기적 곡선 도형 금지 — 원·삼각형·사각형 등 정형 도형만
- 도형 없는 플랫 단색 영역만으로 구성 금지
모션 — 도형 회전·이동 애니메이션 가능. 각 도형 독립적 속도·방향. CSS transform 기반.
자주 묻는 질문
Abstract & Geometric이란 무엇인가요?
기하학적 형태와 추상적 요소를 활용한 현대적이고 역동적인 스타일입니다.
Abstract & Geometric의 핵심 디자인 원칙은 무엇인가요?
Abstract & Geometric의 핵심 원칙은 구조, 균형, 역동성입니다.
Abstract & Geometric은 어떤 프로젝트에 적합한가요?
Abstract & Geometric은 테크 스타트업 브랜딩, 스포츠·피트니스 앱, 뮤직·엔터테인먼트, 포스터·홍보물, 테크 스타트업, 스포츠·피트니스, 뮤직·엔터테인먼트, 포스터·홍보물 등의 프로젝트에 적합합니다.
Abstract & Geometric의 장단점은 무엇인가요?
장점으로는 강한 시각적 임팩트, 브랜드 개성 표현 용이, 다양한 색상과 조합 가능이 있습니다. 단점으로는 콘텐츠보다 비주얼이 주목받을 수 있음, 지나치면 복잡해 보임, 실제 사물을 표현하기 어려움이 있습니다.
Abstract & Geometric에서 색상은 어떻게 사용하나요?
기하학 도형의 색이 팔레트를 구성. 도형별로 다른 색 블록이 겹치는 구성 색상 역할은 shape-1: 가장 큰 도형의 주색, shape-2/3: 보조 도형 색 — 대비 또는 유사색, background: 도형들의 기반 — 흰색 또는 매우 연한 색입니다. 주의사항: 도형 색과 배경 색 구분 명확히, 도형 수와 색상 수 비례 — 도형 많으면 색도 다양하게.
Abstract & Geometric에 어울리는 폰트 스타일은 무엇인가요?
Abstract & Geometric에는 기하학적 산세리프 — 도형과 동일한 정밀함 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 장식 폰트 금지 — 도형이 이미 장식 역할, 텍스트는 도형과 충돌하지 않게 명확하게.
Abstract & Geometric 디자인에서 하면 안 되는 것은 무엇인가요?
Abstract & Geometric에서 피해야 할 것: 유기적 곡선 도형 금지 — 원·삼각형·사각형 등 정형 도형만, 도형 없는 플랫 단색 영역만으로 구성 금지.
Abstract & Geometric을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Abstract & Geometric을 적용한 대표적인 제품·서비스로는 Spotify 캠페인, Adidas 디자인 요소, 많은 테크 스타트업 로고 등이 있습니다.