맥시멀리스트 웹 디자인

license: Apache-2.0 name: maximalist-web-design description: Maximalism as a web design philosophy — more is more. Dense information layouts, layered visual elements, mixed typography, bold color clashes, colliding grids, pattern-on-pattern, and the deliberate rejection of minimalist web conventions. Covers Bloomberg Terminal aesthetic, MySpace nostalgia, Japanese web density, and horror vacui. Activate on 'maximalist web', 'dense layout', 'information-dense', 'anti-minimalist', 'more is more', 'busy design', 'horror vacui', 'Bloomberg aesthetic', 'MySpace aesthetic', 'visual overload', 'dense dashboard'. NOT for interior design maximalism (use maximalist-wall-decorator), neobrutalism (use neobrutalist-web-designer), collage layouts (use collage-web-design). allowed-tools: Read,Write,Edit,Glob,Grep,WebSearch,WebFetch metadata: category: Design & UX tags: - maximalism - dense-layout - information-density - anti-minimalist - horror-vacui - dashboard - web-design - MySpace - Bloomberg pairs-with: - skill: neobrutalist-web-designer reason: Shares anti-minimalist philosophy, can combine bold borders with density - skill: retrofuturism-web-design reason: Cassette futurism and Fallout interfaces are inherently maximalist - skill: typography-expert reason: Maximalism demands confident multi-font compositions - skill: hero-section-design reason: Maximalist hero sections need careful orchestration to avoid chaos category: Design & Creative tags:

• maximalist
• web-design
• bold
• eclectic
• visual

맥시멀리스트 웹 디자인은(는) 무엇을 하나요?

웹 경험에 밀도, 풍부함, 시각적 풍요를 불어넣습니다. 맥시멀리즘은 '덜이 더 낫다'는 것을 의도적이고 숙련된 방식으로 거부합니다. 더할수록 더 낫다고 주장하며, 빈 공간은 낭비된 공간이며, 시각적 복잡성은 적절히 조율되면 탐색할 수 있다고 봅니다.

결정 포인트

정보 밀도 결정 트리

뷰포트 너비 > 1200px인 경우:
  └── 사용자가 데이터 중심(트레이딩, 분석, 대시보드)인 경우:
      ├── 정보 밀도 > 화면 80% → 마이크로 카드 사용 (패딩 8px, 텍스트 0.75rem)
      └── 정보 밀도 60-80% → 빽빽한 그리드 사용 (간격 4px, 최소 너비 180px)
  └── 사용자가 콘텐츠 탐색(포트폴리오, 에디토리얼)인 경우:
      ├── 시각적 임팩트 우선 → 20-30% 겹침이 있는 계층형 카드 사용
      └── 가독성 우선 → 간격 1.5rem인 컬럼 레이아웃 사용

뷰포트 너비 768-1199px인 경우:
  └── 밀도 30% 감소:
      ├── 사이드바를 아이콘으로 축소
      └── 최대 2열 그리드로 전환

뷰포트 너비 < 768px인 경우:
  └── 단일 컬럼, 터치 대상 44px 이상으로 증가

애니메이션 임계값 결정 트리

뷰포트 내 동시 애니메이션이 3개를 초과하는 경우:
  └── 동시에 움직이는 요소를 최대 2개로 제한

애니메이션 지속 시간이 1.5초를 초과하는 경우:
  └── 사용자 제어를 위해 호버 시 일시 정지 추가

사용자가 움직임에 민감한 경우:
  └── CSS 전환으로 대체 (지속 시간 < 0.3초)
  └── 변환(transform)/불투명도(opacity)만 사용 (레이아웃 스래시 방지)

색상 충돌 관리

배경-전경 대비가 4.5:1 미만인 경우:
  └── 텍스트 뒤에 반투명 오버레이 추가
  └── 또는 팔레트에서 고대비 색상 쌍으로 전환

단일 컴포넌트에 5가지 이상의 색상을 사용하는 경우:
  └── 의미론적 역할 할당 (기본, 보조, 강조, 중립, 경고)
  └── 색맹 시뮬레이터로 접근성 테스트

색상이 혼란스럽게 느껴지는 경우(사용자 피드백):
  └── 색상 영역 생성 - 관련 콘텐츠를 동일한 색조 계열로 그룹화
  └── 70-25-5 규칙 사용: 70% 주도, 25% 보조, 5% 강조

실패 모드

발작 유발 애니메이션 과부하

증상: 여러 요소가 동시에 애니메이션, 빠른 깜박임 효과, 일시 정지 컨트롤 부재 감지: 3개 이상의 요소가 동시에 움직이거나, 깜박임 속도가 3Hz를 초과하거나, prefers-reduced-motion을 지원하지 않는 경우 해결책: 동시 애니메이션을 최대 2개로 제한, 호버 시 일시 정지 추가, 움직임 감소 쿼리 구현

읽을 수 없는 텍스트 문제

증상: 사용자가 가독성 불편 호소, 텍스트가 복잡한 배경에 묻힘, 콘텐츠 참여도 저하 감지: 대비 비율이 4.5:1 미만, 빽빽한 배경에서 14px 미만의 작은 텍스트, 색상 대 색상 충돌 해결책: 텍스트 뒤에 반투명 배경 추가, 글꼴 두께 증가, 고대비 색상 쌍으로 전환

정보 구조 붕괴

증상: 사용자가 주요 작업을 찾을 수 없음, 모든 요소가 동일하게 중요해 보임, 높은 이탈률 감지: 명확한 시각적 계층 부재 (가늘게 뜨고 보기 테스트 실패), 모든 요소가 동일한 크기/두께, 색상 영역 없음 해결책: 제목/본문 간 4:1 크기 비율 구현, 색상 코드 섹션 생성, 불투명도 레이어 추가 (1.0/0.7/0.4)

모바일 터치 대상 실패

증상: 불만족스러운 모바일 사용자, 실수로 탭, 터치 기기에서 사용 불가 감지: 모바일에서 대화형 요소가 44px 미만, 호버에 의존하는 상호작용, 데스크톱 전용 밀도 해결책: 모바일 터치 대상을 44px 이상으로 증가, 모바일 전용 간격 추가, 점진적 밀도 구현

작업 예제

예제 1: 블룸버그 스타일 트레이딩 대시보드

시나리오: 금융 트레이딩 플랫폼이 최대 정보 밀도를 유지하면서 즉각적인 사용성을 요구합니다.

초기 평가: 사용자는 동시에 50개 이상의 데이터 포인트를 모니터링해야 하며, 주 장치는 대형 모니터가 있는 데스크톱이며, 사용자는 밀도에 익숙한 전문 트레이더입니다.

디자인 결정:

1. 정보 밀도: 화면 85% 커버 (80% 이상 밀도 임계값으로 마이크로 카드 선택)
2. 타이포그래피: 모든 숫자에 모노스페이스 (IBM Plex Mono), 레이블에 응축 산세리프 (Barlow Condensed)
3. 색상 시스템: 블룸버그 팔레트 - 터미널 검정 배경, 주요 데이터에 호박색, 방향 변화에 녹색/빨간색
4. 애니메이션: 가격 변동만 0.3초 하이라이트 페이드로 애니메이션, 동시 애니메이션 없음

구현 전략:

.trading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px;
  padding: 4px;
  height: 100vh;
  overflow-y: auto;
}

.price-card {
  background: #1E1E1E;
  border: 1px solid #2A2A2A;
  padding: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
}

.price-change {
  transition: background-color 0.3s ease;
}

절충 사항:

• 시각적 매력을 정보 밀도를 위해 희생 (형식보다 기능 선택)
• 신규 사용자에게 높은 학습 곡선 수용 (전문 사용자 우선)
• 데스크톱 최적화를 위해 모바일 경험 제한

예제 2: 마이스페이스 노스탤지어 포트폴리오 사이트

시나리오: 창의적인 전문가가 2000년대 초반 웹의 에너지를 포착하면서도 현대적인 작업을 선보일 개인 포트폴리오를 원합니다.

초기 평가: 콘텐츠는 혼합형(이미지, 텍스트, 비디오)이며, 대상 청중은 대담함을 높이 평가하는 창의적인 동료들이며, 주요 목표는 사용성보다 기억에 남는 인상입니다.

디자인 결정:

1. 정보 밀도: 화면 65% 커버 (시각적 겹침이 있는 계층형 카드 선택)
2. 타이포그래피: 혼합 시스템 - 헤더에 Abril Fatface, 본문에 Space Grotesk, 캡션에 IBM Plex Mono
3. 색상 시스템: 일렉트릭 맥시멀리스트 팔레트 - 기본에 보라색, 보조에 산호색, 강조에 애시드 옐로우
4. 애니메이션: 미묘한 패럴랙스 스크롤, 호버 변환, 계단식 등장 애니메이션

혼란 제어 전략:

• 색상 영역: 각 프로젝트 섹션은 다른 배경색조를 사용하여 구분감 생성
• 시각적 계층: 프로젝트 제목과 설명 간 4:1 크기 비율
• 제어된 겹침: 요소가 정확히 20% 겹쳐 리듬을 만들고 무작위성 방지
• 숨 쉴 공간: 세 번째 섹션마다 밀도를 80% 낮춰 시각적 휴식 제공

해결된 중요한 문제: 맥시멀리즘이 우연이 아닌 의도적으로 보이게 하는 방법 해결책: 수학적 관계(20% 겹침, 4:1 비율, 70-25-5 색상 분포)를 사용하여 혼란 속에 질서 창출

품질 게이트

• 가늘게 뜨고 보기 테스트 통과: 눈을 반쯤 감았을 때 3개의 뚜렷한 계층 수준 보임
• 모든 본문 텍스트의 대비 비율 ≥ 4.5:1 (실제 배경 패턴으로 측정)
• 모바일 기기의 모든 대화형 요소 터치 대상 ≥ 44px
• 언제든지 모든 뷰포트에서 최대 2개의 동시 애니메이션
• prefers-reduced-motion 쿼리 구현 및 테스트 완료
• 색상 코드 섹션이 다른 콘텐츠 영역을 명확히 구분
• 타이포그래피가 3개 이상의 글꼴 패밀리를 사용하며 각각 고유한 의미론적 역할 할당
• 모바일 레이아웃이 데스크톱 대비 밀도를 최소 30% 감소
• 성능 예산 충족: 밀도 높은 DOM에서도 First Contentful Paint < 2초
• 최소 하나의 "탈출구" 제공 (접이식 패널, 집중 모드 또는 필터)

NOT-FOR 경계

다음의 경우 maximalist-web-design을 사용하지 마세요:

• 접근성 준수가 필요한 정부 또는 의료 사이트 → 대신 accessibility-first-design 사용
• 전자상거래 체크아웃 흐름 → 대신 conversion-optimization-expert를 사용하여 간소화된 퍼널 구현
• 인테리어 디자인 맥시멀리즘 → 물리적 공간은 maximalist-wall-decorator 사용
• 네오브루탈리스트 평면 색상 대담한 테두리 스타일 → 해당 미학은 neobrutalist-web-designer 사용
• 에디토리얼 콜라주 겹침 구성 → 매거진 레이아웃은 collage-web-design 사용
• 기업용 SaaS 애플리케이션 → 비즈니스 소프트웨어 인터페이스는 web-design-expert 사용
• 전환에 최적화된 랜딩 페이지 → 맥시멀리즘은 전환 목표와 상충됨

다음의 경우 다른 스킬에 위임하세요:

• 고객이 "깔끔하고 전문적인"을 언급하는 경우 → web-design-expert
• 프로젝트에 WCAG AAA 준수가 필요한 경우 → accessibility-first-design
• 예산 제약으로 신속한 개발이 필요한 경우 → bootstrap-expert
• 콘텐츠 전략 정의가 필요한 경우 → content-strategist