# Organic & Natural

> 자연에서 영감을 받은 부드럽고 유기적인 형태를 사용합니다.

- 층: 스타일 (시각적 스타일)
- ID: organic-natural
- 연도: 2019
- 무드 태그: 내추럴, 따뜻한
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/organic-natural

## 정의

자연에서 영감을 받은 부드럽고 유기적인 형태를 사용합니다.

## 주요 특징

- 곡선형 요소
- 자연적 색상
- 부드러운 전환
- 유기적 형태
- 편안한 느낌

## 핵심 원칙

- 자연스러움
- 조화
- 편안함

## 컬러 시스템

자연에서 영감받은 흙·초록·하늘 계열. 채도 낮은 earth tone이 기반

### 색상 역할

- earth: 갈색·베이지·샌드 계열 — 기반 배경색
- green: 식물·자연 연상 녹색 — 주 강조색
- sky: 하늘·바다 연상 파랑/청록
- text: 어두운 갈색 또는 짙은 초록

### 색상 제약

- 형광·네온 색상 사용 금지
- 채도 높은 vivid 색 금지 — 자연스러운 무광 채도로
- 무채색만 사용 금지 — 반드시 자연 연상 색조 포함

### 다크모드 전략

짙은 숲 녹색 또는 밤하늘 어두운 파랑을 배경으로. earth tone은 어두운 버전으로

### 대비 요구사항

earth tone 계열 저채도 색상은 대비 낮을 수 있음 — 텍스트 색상 신중히

## 타이포그래피

- 폰트 성격: 둥글거나 자연스러운 곡선 산세리프. 또는 슬랩세리프. 딱딱한 기하학 폰트 지양
- 권장 폰트 수: 최대 2개
- 타입 스케일: 1.25 (Major Third) — 부드러운 리듬

### 타이포그래피 제약

- Angular·condensed 폰트 금지
- line-height 넉넉하게 (1.6~1.8) — 숨 쉬는 느낌

## 설계 제약

### 하면 안 되는 것

- 직선·각진 레이아웃만 사용 금지 — 유기적 곡선·blob 형태 포함
- 플라스틱·금속 질감 사용 금지
- 형광·vivid 색 사용 금지

### 반드시 포함할 것

- 자연 소재 이미지 또는 텍스처
- 유기적 곡선 요소 (blob, leaf shape 등)
- 넉넉한 여백 — 자연의 호흡

### 모션 가이드

부드럽고 느린 모션. ease-in-out 500ms 이상. 바람에 흔들리는 듯한 gentle animation.

## 무드 프로파일

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

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

## 사용 사례

- 헬스케어·웰니스 앱
- 음식·요리 서비스
- 환경·지속가능성 브랜드
- 명상·마음챙김 앱

## 추천 프로젝트 유형

- 헬스케어·웰니스
- 음식·요리
- 환경 브랜드
- 명상·마음챙김 앱

## 장단점

### 장점

- 친근하고 편안한 느낌
- 웰니스·환경 브랜드와 완벽히 어울림
- 과도한 기술적 느낌을 중화

### 단점·한계

- 현대적 테크 제품엔 다소 어울리지 않을 수 있음
- 곡선 도형은 CSS 구현이 복잡
- 정보 밀도 높은 UI에 부적합

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

- Headspace
- Whole Foods 웹사이트
- Airbnb (일부 요소)

## 자주 묻는 질문

### Q1. Organic & Natural이란 무엇인가요?

자연에서 영감을 받은 부드럽고 유기적인 형태를 사용합니다.

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

Organic & Natural의 핵심 원칙은 자연스러움, 조화, 편안함입니다.

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

Organic & Natural은 헬스케어·웰니스 앱, 음식·요리 서비스, 환경·지속가능성 브랜드, 명상·마음챙김 앱, 헬스케어·웰니스, 음식·요리, 환경 브랜드, 명상·마음챙김 앱 등의 프로젝트에 적합합니다.

### Q4. Organic & Natural의 장단점은 무엇인가요?

장점으로는 친근하고 편안한 느낌, 웰니스·환경 브랜드와 완벽히 어울림, 과도한 기술적 느낌을 중화이 있습니다. 단점으로는 현대적 테크 제품엔 다소 어울리지 않을 수 있음, 곡선 도형은 CSS 구현이 복잡, 정보 밀도 높은 UI에 부적합이 있습니다.

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

자연에서 영감받은 흙·초록·하늘 계열. 채도 낮은 earth tone이 기반 색상 역할은 earth: 갈색·베이지·샌드 계열 — 기반 배경색, green: 식물·자연 연상 녹색 — 주 강조색, sky: 하늘·바다 연상 파랑/청록입니다. 주의사항: 형광·네온 색상 사용 금지, 채도 높은 vivid 색 금지 — 자연스러운 무광 채도로.

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

Organic & Natural에는 둥글거나 자연스러운 곡선 산세리프. 또는 슬랩세리프. 딱딱한 기하학 폰트 지양 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: Angular·condensed 폰트 금지, line-height 넉넉하게 (1.6~1.8) — 숨 쉬는 느낌.

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

Organic & Natural에서 피해야 할 것: 직선·각진 레이아웃만 사용 금지 — 유기적 곡선·blob 형태 포함, 플라스틱·금속 질감 사용 금지, 형광·vivid 색 사용 금지.

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

Organic & Natural을 적용한 대표적인 제품·서비스로는 Headspace, Whole Foods 웹사이트, Airbnb (일부 요소) 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

- primary: #8BC34A
- secondary: #4CAF50
- accent: #CDDC39
- background: #F1F8E9
- surface: #FFFFFF
- text: #33691E
- textSecondary: #689F38
- border: #C5E1A5

### 타이포그래피

- fontFamily: Quicksand, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.01em

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

- spacing: unit 8px × scale 1.2
- borderRadius: sm 16px / md 24px / lg 40px / full 9999px
- shadow sm: 0 2px 8px rgba(139, 195, 74, 0.2)
- shadow md: 0 4px 16px rgba(139, 195, 74, 0.3)
- shadow lg: 0 8px 24px rgba(139, 195, 74, 0.3)
- border: 1px solid #C5E1A5

### 컴포넌트 형태

- button: pill / hover lift / text none
- card: elevated / hover lift
- input: filled / focus ring
- badge: pill / subtle
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section spacious
- animation: 400ms ease-in-out

## 관련 링크

### 관련 스타일

- [Claymorphism](https://ui.buildersgate.com/styles/claymorphism)
- [Minimalism](https://ui.buildersgate.com/styles/minimalism)
- [Aurora Design](https://ui.buildersgate.com/styles/aurora-design)

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

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

### 비교

- [Organic & Natural vs Aurora Design](https://ui.buildersgate.com/compare/aurora-design-vs-organic-natural)
- [Organic & Natural vs Claymorphism](https://ui.buildersgate.com/compare/claymorphism-vs-organic-natural)
- [Organic & Natural vs Minimalism](https://ui.buildersgate.com/compare/minimalism-vs-organic-natural)

### 쓰임새별 추천

- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)
- [모바일 앱](https://ui.buildersgate.com/for/mobile-app)
- [브랜드 사이트](https://ui.buildersgate.com/for/brand-site)

---

HTML 버전: https://ui.buildersgate.com/styles/organic-natural

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