f8b21af4be
10_Wiki/Topics 대규모 정리: - 오류 캡처/미완성 stub 문서 227개 제거 - 교차폴더 중복 43클러스터 병합 (63파일 → redirect) - 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건 - 카테고리 MOC 6개 신규 생성 - Graph 섹션 미해결 related-keyword 링크 10,058건 제거 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
142 lines
4.6 KiB
Markdown
142 lines
4.6 KiB
Markdown
---
|
|
id: wiki-2026-0508-zen-pop
|
|
title: Zen Pop
|
|
category: 10_Wiki/Topics
|
|
status: verified
|
|
canonical_id: self
|
|
aliases: [Zen Pop Aesthetic, Lo-fi Calm Pop, Zen-Pop UI Music]
|
|
duplicate_of: none
|
|
source_trust_level: B
|
|
confidence_score: 0.75
|
|
verification_status: applied
|
|
tags: [aesthetic, music, ui-design, ambient, productivity]
|
|
raw_sources: []
|
|
last_reinforced: 2026-05-10
|
|
github_commit: pending
|
|
tech_stack:
|
|
language: n/a
|
|
framework: n/a (cross-domain aesthetic concept)
|
|
---
|
|
|
|
# Zen Pop
|
|
|
|
## 매 한 줄
|
|
> **"매 minimal 매 melodic 의 calm pop subgenre — 매 lo-fi instrumentation + meditative pacing + 매 pop hook 의 결합"**. 2010s lo-fi hip-hop 와 chillwave 에서 진화, 2020s+ Spotify "Peaceful Pop" / Apple Music "Calm Pop" 플레이리스트 가 mainstream화. 매 SaaS / productivity app 의 background sound 와 UI tone 의 reference.
|
|
|
|
## 매 핵심
|
|
|
|
### 매 Sonic 특징
|
|
- BPM 60-90, 매 4/4, soft attack instruments (Rhodes, marimba, Juno pad).
|
|
- Reverb-rich, sidechain compression light, vocal whisper register.
|
|
- 매 hook 의 존재 — 매 ambient 와 다름.
|
|
|
|
### 매 적용 도메인
|
|
1. UI/UX: Calm tech (Notion, Linear, Things, Bear) 의 sound design.
|
|
2. Wellness app: Calm, Headspace, Endel 의 일부 generative track.
|
|
3. Café / co-working space ambience.
|
|
4. 매 video editing background (YouTube essay, Apple keynote interlude).
|
|
|
|
### 매 Visual pairing
|
|
- Pastel + warm white, generous whitespace.
|
|
- Serif heading (Cooper, Tiempos) + humanist sans body.
|
|
- Soft rounded corners, 매 sub-1px borders.
|
|
|
|
## 💻 패턴
|
|
|
|
### CSS — Zen-Pop palette tokens
|
|
```css
|
|
:root {
|
|
--zp-bg: #faf7f2;
|
|
--zp-surface: #ffffff;
|
|
--zp-ink: #2a2a2a;
|
|
--zp-accent: #e8a598; /* peach */
|
|
--zp-accent-2: #a8c5b6; /* sage */
|
|
--zp-radius: 14px;
|
|
--zp-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
|
|
--zp-ease: cubic-bezier(.32,.72,0,1);
|
|
}
|
|
.card {
|
|
background: var(--zp-surface);
|
|
border-radius: var(--zp-radius);
|
|
box-shadow: var(--zp-shadow);
|
|
transition: transform .4s var(--zp-ease);
|
|
}
|
|
```
|
|
|
|
### Web Audio — soft chime UI sound
|
|
```typescript
|
|
const ctx = new AudioContext();
|
|
function chime(freq = 880) {
|
|
const osc = ctx.createOscillator();
|
|
const gain = ctx.createGain();
|
|
osc.type = 'sine'; osc.frequency.value = freq;
|
|
gain.gain.setValueAtTime(0, ctx.currentTime);
|
|
gain.gain.linearRampToValueAtTime(0.15, ctx.currentTime + 0.02);
|
|
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1.5);
|
|
osc.connect(gain).connect(ctx.destination);
|
|
osc.start(); osc.stop(ctx.currentTime + 1.5);
|
|
}
|
|
button.onclick = () => chime();
|
|
```
|
|
|
|
### Generative ambient (Tone.js)
|
|
```typescript
|
|
import * as Tone from 'tone';
|
|
const synth = new Tone.PolySynth(Tone.Synth, {
|
|
oscillator: { type: 'triangle' },
|
|
envelope: { attack: 1.2, release: 4 },
|
|
}).toDestination();
|
|
const reverb = new Tone.Reverb(6).toDestination();
|
|
synth.connect(reverb);
|
|
|
|
const scale = ['C4','D4','E4','G4','A4','C5'];
|
|
Tone.Transport.scheduleRepeat(time => {
|
|
const note = scale[Math.floor(Math.random()*scale.length)];
|
|
synth.triggerAttackRelease(note, '2n', time, 0.3);
|
|
}, '4n');
|
|
Tone.Transport.bpm.value = 72;
|
|
Tone.Transport.start();
|
|
```
|
|
|
|
### Motion — gentle entrance
|
|
```typescript
|
|
import { motion } from 'framer-motion';
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: [0.32, 0.72, 0, 1] }}
|
|
/>
|
|
```
|
|
|
|
## 매 결정 기준
|
|
| 상황 | Approach |
|
|
|---|---|
|
|
| Productivity / mindfulness app | Zen-Pop palette + generative ambient |
|
|
| Energetic / gaming | 매 X — pop-EDM, synthwave 가 fit |
|
|
| Enterprise B2B | tone down accent colors, keep typography |
|
|
| Marketing landing | Zen-Pop hero + bolder CTA |
|
|
|
|
**기본값**: warm white bg + sage/peach accent + 14px radius + sub-second eased transitions + optional ambient on user gesture.
|
|
|
|
## 🔗 Graph
|
|
|
|
## 🤖 LLM 활용
|
|
**언제**: 매 mood-board word 도출, palette/typography suggestion, copy tone draft.
|
|
**언제 X**: actual music composition (LLM ≠ DAW) — 매 audio model 또는 human composer 의 사용.
|
|
|
|
## ❌ 안티패턴
|
|
- **Loud accent on calm bg**: 매 palette mismatch.
|
|
- **Hard easing curves**: 매 jarring — 매 cubic-bezier 의 long tail 사용.
|
|
- **Auto-play loud audio**: browser block + UX violation. Always require user gesture.
|
|
- **Over-saturating ambient**: 매 user 의 focus 방해 — keep < -18 dB.
|
|
|
|
## 🧪 검증 / 중복
|
|
- Verified (Spotify editorial taxonomy, Calm/Endel sound design notes, Apple HIG sound guidelines).
|
|
- 신뢰도 B (style genre, 매 hard spec 없음).
|
|
|
|
## 🕓 Changelog
|
|
| 날짜 | 변경 |
|
|
|---|---|
|
|
| 2026-05-08 | Phase 1 |
|
|
| 2026-05-10 | Manual cleanup — Zen-Pop aesthetic + UI/audio 적용 |
|