# Abstract & Geometric

> 기하학적 형태와 추상적 요소를 활용한 현대적이고 역동적인 스타일입니다.

- 층: 스타일 (시각적 스타일)
- ID: abstract-geometric
- 연도: 2015
- 무드 태그: 화려한, 친근·발랄
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/abstract-geometric

## 정의

기하학적 형태와 추상적 요소를 활용한 현대적이고 역동적인 스타일입니다.

## 주요 특징

- 기하학적 형태
- 추상적 패턴
- 대담한 구성
- 역동적인 레이아웃
- 강한 시각적 임팩트

## 핵심 원칙

- 구조
- 균형
- 역동성

## 컬러 시스템

기하학 도형의 색이 팔레트를 구성. 도형별로 다른 색 블록이 겹치는 구성

### 색상 역할

- shape-1: 가장 큰 도형의 주색
- shape-2/3: 보조 도형 색 — 대비 또는 유사색
- background: 도형들의 기반 — 흰색 또는 매우 연한 색
- text: 도형 위에서도 가독성 확보

### 색상 제약

- 도형 색과 배경 색 구분 명확히
- 도형 수와 색상 수 비례 — 도형 많으면 색도 다양하게

### 다크모드 전략

배경 어둡게, 도형 색상 밝기 유지

### 대비 요구사항

도형이 텍스트 뒤에 올 때 대비 확인 필수

## 타이포그래피

- 폰트 성격: 기하학적 산세리프 — 도형과 동일한 정밀함
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.25 (Major Third)

### 타이포그래피 제약

- 장식 폰트 금지 — 도형이 이미 장식 역할
- 텍스트는 도형과 충돌하지 않게 명확하게

## 설계 제약

### 하면 안 되는 것

- 유기적 곡선 도형 금지 — 원·삼각형·사각형 등 정형 도형만
- 도형 없는 플랫 단색 영역만으로 구성 금지

### 반드시 포함할 것

- 기하학 도형 레이어링
- 도형 간 겹침·투명도 활용

### 모션 가이드

도형 회전·이동 애니메이션 가능. 각 도형 독립적 속도·방향. CSS transform 기반.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: +1 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: -1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 테크 스타트업 브랜딩
- 스포츠·피트니스 앱
- 뮤직·엔터테인먼트
- 포스터·홍보물

## 추천 프로젝트 유형

- 테크 스타트업
- 스포츠·피트니스
- 뮤직·엔터테인먼트
- 포스터·홍보물

## 장단점

### 장점

- 강한 시각적 임팩트
- 브랜드 개성 표현 용이
- 다양한 색상과 조합 가능

### 단점·한계

- 콘텐츠보다 비주얼이 주목받을 수 있음
- 지나치면 복잡해 보임
- 실제 사물을 표현하기 어려움

## 실제 사용 제품·서비스

- Spotify 캠페인
- Adidas 디자인 요소
- 많은 테크 스타트업 로고

## 자주 묻는 질문

### Q1. Abstract & Geometric이란 무엇인가요?

기하학적 형태와 추상적 요소를 활용한 현대적이고 역동적인 스타일입니다.

### Q2. Abstract & Geometric의 핵심 디자인 원칙은 무엇인가요?

Abstract & Geometric의 핵심 원칙은 구조, 균형, 역동성입니다.

### Q3. Abstract & Geometric은 어떤 프로젝트에 적합한가요?

Abstract & Geometric은 테크 스타트업 브랜딩, 스포츠·피트니스 앱, 뮤직·엔터테인먼트, 포스터·홍보물, 테크 스타트업, 스포츠·피트니스, 뮤직·엔터테인먼트, 포스터·홍보물 등의 프로젝트에 적합합니다.

### Q4. Abstract & Geometric의 장단점은 무엇인가요?

장점으로는 강한 시각적 임팩트, 브랜드 개성 표현 용이, 다양한 색상과 조합 가능이 있습니다. 단점으로는 콘텐츠보다 비주얼이 주목받을 수 있음, 지나치면 복잡해 보임, 실제 사물을 표현하기 어려움이 있습니다.

### Q5. Abstract & Geometric에서 색상은 어떻게 사용하나요?

기하학 도형의 색이 팔레트를 구성. 도형별로 다른 색 블록이 겹치는 구성 색상 역할은 shape-1: 가장 큰 도형의 주색, shape-2/3: 보조 도형 색 — 대비 또는 유사색, background: 도형들의 기반 — 흰색 또는 매우 연한 색입니다. 주의사항: 도형 색과 배경 색 구분 명확히, 도형 수와 색상 수 비례 — 도형 많으면 색도 다양하게.

### Q6. Abstract & Geometric에 어울리는 폰트 스타일은 무엇인가요?

Abstract & Geometric에는 기하학적 산세리프 — 도형과 동일한 정밀함 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 장식 폰트 금지 — 도형이 이미 장식 역할, 텍스트는 도형과 충돌하지 않게 명확하게.

### Q7. Abstract & Geometric 디자인에서 하면 안 되는 것은 무엇인가요?

Abstract & Geometric에서 피해야 할 것: 유기적 곡선 도형 금지 — 원·삼각형·사각형 등 정형 도형만, 도형 없는 플랫 단색 영역만으로 구성 금지.

### Q8. Abstract & Geometric을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Abstract & Geometric을 적용한 대표적인 제품·서비스로는 Spotify 캠페인, Adidas 디자인 요소, 많은 테크 스타트업 로고 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #FFA500
- secondary: #FF6347
- accent: #FFD700
- background: #FAFAFA
- surface: #FFFFFF
- text: #2C3E50
- textSecondary: #7F8C8D
- border: #DDD

### 타이포그래피

- fontFamily: Futura, 'Trebuchet MS', 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.03em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1.2
- borderRadius: sm 0 / md 4px / lg 8px / full 9999px
- shadow sm: 0 2px 8px rgba(255, 165, 0, 0.2)
- shadow md: 0 4px 16px rgba(255, 165, 0, 0.3)
- shadow lg: 0 8px 24px rgba(255, 165, 0, 0.4)
- border: 2px solid #FFA500

### 컴포넌트 형태

- button: rounded / hover bounce / text none
- card: elevated / hover bounce
- input: outlined / focus ring
- badge: rounded / solid
- icon: phosphor / stroke 2 / size 24px
- layout: boxed / section spacious
- animation: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55)

## 관련 링크

### 관련 스타일

- [Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/styles/swiss-design)
- [Memphis Style](https://ui.buildersgate.com/styles/memphis-style)
- [Isometric Design](https://ui.buildersgate.com/styles/isometric-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/abstract-geometric)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/abstract-geometric)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/abstract-geometric)

### 비교

- [Abstract & Geometric vs Isometric Design](https://ui.buildersgate.com/compare/abstract-geometric-vs-isometric-design)
- [Abstract & Geometric vs Low Poly](https://ui.buildersgate.com/compare/abstract-geometric-vs-low-poly)
- [Abstract & Geometric vs Memphis Style](https://ui.buildersgate.com/compare/abstract-geometric-vs-memphis-style)
- [Abstract & Geometric vs Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/compare/abstract-geometric-vs-swiss-design)

### 쓰임새별 추천

- [브랜드 사이트](https://ui.buildersgate.com/for/brand-site)

---

HTML 버전: https://ui.buildersgate.com/styles/abstract-geometric

이 문서는 https://ui.buildersgate.com/styles/abstract-geometric.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.