아름다움과 브루탈리즘: blakecrosley.com을 그 교차점에서 디자인한 방법

저는 blakecrosley.com을 색상도, 그라데이션도, 일러스트레이션도, 장식적 요소도 없이 디자인했습니다. 절대적인 검정(#000000) 위에 흰색 타이포그래피만을 사용하고, 5%, 10%, 40%, 65%의 불투명도 레이어로 전체 시각적 위계를 구성했습니다. 이 사이트는 Lighthouse 성능 점수에서 100/100을 기록하며, 제가 “정직한 아름다움”이라고 부르는 것을 달성합니다: 정밀한 장인정신과 결합된 구조적 명확성입니다.¹

TL;DR

디지털 디자인에서 브루탈리즘은 인터페이스를 구조적 정직함으로 환원합니다: 가공되지 않은 타이포그래피, 드러난 그리드, 최소한의 장식. 아름다움은 세련미를 더합니다: 조화로운 색상 관계, 정밀한 간격, 마이크로 인터랙션. 가장 매력적인 현대 제품들(Linear, Notion, Arc Browser)은 이 교차점에서 작동합니다. 저는 blakecrosley.com을 이와 같은 교차점에서 구축했으며, 이 글에서는 구체적인 CSS 결정들, 제거한 요소들, 그리고 정직함과 장인정신 사이의 긴장이 어느 한쪽 원칙만으로는 달성할 수 없는 더 나은 인터페이스를 만들어내는 이유를 기록합니다.

나의 디자인 시스템: 기반으로서의 브루탈리즘

색상 비(非)팔레트

대부분의 디자인 시스템은 색상 팔레트에서 시작합니다. 저의 시스템은 색상 팔레트의 부재에서 시작합니다:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

브랜드 색상이 없습니다. 불투명도 수준 이상의 시맨틱 색상도 없습니다. 전체 시각적 위계는 네 가지 투명도 단계를 통해 작동합니다: 100%(주요), 65%(보조), 40%(3차), 10%(구조적 테두리). 이것은 원칙적으로 브루탈리즘입니다: 재료(어둠 위의 빛)를 장식하지 않고 직접적으로 사용하는 것입니다.²

이 결정은 의도적이었습니다. 16개의 제품 디자인 스터디를 진행하면서, 제가 가장 존경하는 제품들(Linear, Vercel, Raycast)이 타이포그래피와 간격이 위계의 역할을 하는 절제된 팔레트를 사용한다는 것을 발견했습니다. 8개 이상의 시맨틱 색상을 사용하는 제품들은 종종 색상을 구조적 명확성의 대체물로 사용하고 있었습니다.

주요 위계로서의 타이포그래피

색상이 위계를 담당하지 않으므로, 타이포그래피가 모든 것을 담당합니다:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display:  5rem;     /* 80px - hero headlines */
  --font-size-7xl:      3.875rem; /* 62px */
  --font-size-base:     1rem;     /* 16px - body text */
  --font-size-xs:       0.75rem;  /* 12px - metadata */
}

커스텀 웹 폰트가 아닌 시스템 폰트를 사용합니다. 이것은 브루탈리즘적 선택(플랫폼의 고유 재료를 사용)이자 성능적 선택(폰트 로딩 지연 시간 제로, 완벽한 Lighthouse 점수에 기여)입니다. 타이트한 자간(-0.03em)과 결합된 디스플레이 크기(80px)는 장식 없이도 헤드라인에 무게감을 부여합니다. 16px의 본문 텍스트와 넉넉한 행간(1.7)은 밀도보다 가독성을 우선시합니다.³

8포인트 간격 시스템

모든 간격 값은 8포인트 기본 단위에서 파생됩니다:

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

임의의 값은 없습니다. 시스템에 존재하지 않는 간격이 필요하다면, 시스템이 아니라 디자인이 잘못된 것입니다. 저는 부제목 여백에 --spacing-2xs를 사용했을 때(존재하지 않는 토큰) 레이아웃이 조용히 깨지면서 이것을 어렵게 배웠습니다. 해결책은 새 토큰을 만드는 것이 아니라 --spacing-xs로 변경하는 것이었습니다.⁴

제거한 것들 (그리고 그 이유)

그라데이션 없음

그라데이션은 두 가지 목적을 수행합니다: 시각적 흥미와 깊이 시뮬레이션. 콘텐츠(블로그 글, 프로젝트 설명) 중심으로 구축된 사이트에서 그라데이션은 콘텐츠와 시각적 주의를 놓고 경쟁합니다. 저는 모든 그라데이션을 제거하고 콘텐츠 자체가 시각적 흥미가 되도록 했습니다.

일러스트레이션이나 아이콘 없음

장식적 SVG도, 히어로 일러스트레이션도, 아이콘 라이브러리도 없습니다. 사진이 유일한 비(非)타이포그래피 시각 요소입니다(홈 페이지의 개인 사진). 각 사진은 4/3 비율 컨테이너에 border-radius만 적용되어 있습니다 — 그림자도, 오버레이도, 색상 처리도 없습니다.

박스 그림자 없음 (기본 상태)

기본 상태의 요소에는 그림자가 없습니다. 호버 상태에서 미세한 깊이감을 추가합니다:

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

그림자는 장식이 아닌 기능적 피드백(이 요소는 인터랙티브하며 현재 상호작용 중임을 나타냄)으로만 나타납니다.

라이트 모드 없음

이 사이트에는 prefers-color-scheme 미디어 쿼리가 없습니다. 다크 모드로만 작동합니다. 이것은 의도적으로 타협하지 않는 선택입니다: 두 개의 시각 시스템을 유지하면서 불가피하게 양쪽 모두 타협하는 대신, 하나의 시스템을 제대로 디자인했습니다. 절대적인 검정 배경(#0a0a0a나 #1a1a1a가 아닌 #000000)은 타이포그래피에 최대한의 대비를 부여합니다.⁵

아름다움이 들어오는 지점

브루탈리즘적 구조만으로는 적대감을 만들어냅니다. 저의 디자인에서 아름다움은 장식이 아닌 실행의 장인정신에서 비롯됩니다:

기능적 피드백으로서의 마이크로 인터랙션

모든 인터랙티브 요소에 트랜지션이 있지만, 미적 쾌락을 위한 트랜지션은 존재하지 않습니다:

:root {
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a::after {
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1); /* Underline grows from left */
}

내비게이션 링크는 호버 시 밑줄을 드러냅니다(기능적: 상호작용 가능성을 확인). 프로젝트 카드는 1.08배로 확대됩니다(기능적: 클릭 가능 영역을 표시). 모바일 햄버거 메뉴는 X로 애니메이션됩니다(기능적: 상태 변경을 전달). 기능적 목적 없이 존재하는 애니메이션은 없습니다.⁶

카드 그룹의 입장 애니메이션

카드들은 시차를 두고 translateY(16px) 애니메이션으로 진입합니다:

@keyframes socialCardIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

이것은 기능적 목적을 수행합니다: 콘텐츠가 로드되었음을 전달하고 새로 보이는 요소에 주의를 끕니다. 시차(각 카드가 100ms씩 지연)는 사용자가 그룹을 훑어볼 수 있도록 리듬을 만들어냅니다. 애니메이션은 cubic-bezier 이징과 함께 500ms입니다 — 상호작용을 지연시키지 않을 만큼 빠르고, 정교하게 만들어졌다고 느껴질 만큼 부드럽습니다.

글래스모피즘 헤더

유일하게 장식에 가까운 요소입니다:

.header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-overlay); /* rgba(0,0,0,0.8) */
}

블러 처리된 헤더는 기능적 목적을 수행합니다: 콘텐츠가 내비게이션 뒤로 스크롤된다는 것을 나타내며, 헤더를 영속적인 레이어로 설정합니다. 그러나 블러는 시각적 장인정신도 더합니다 — 디자인이 기능과 함께 아름다움을 우선시하는 몇 안 되는 순간 중 하나입니다.

같은 균형을 찾는 제품들

Linear: 브루탈리즘적 구조, 아름다운 실행

Linear의 프로젝트 관리 인터페이스는 밀도 높고, 키보드 중심이며, 전문 사용자를 전제합니다. 일러스트레이션도 없고, 점진적 온보딩도 없습니다. 구조는 브루탈리즘적입니다. 실행은 아름답습니다: 정밀한 타이포그래피, 조화로운 다크 테마, 부드러운 60fps 애니메이션. 모든 픽셀이 목적을 수행합니다. 그 목적은 장인정신으로 실현됩니다.⁷

Notion: 원시적인 블록, 세련된 시스템

Notion은 기저의 데이터 모델(블록)을 사용자에게 직접 노출합니다. 이 구조적 정직함은 브루탈리즘적입니다. 세련미는 인터랙션 디자인에서 나타납니다: 부드러운 드래그 앤 드롭, 반응형 인라인 편집, 그리고 블록 시스템을 자연스럽게 느끼게 만드는 커맨드 팔레트입니다.⁸

Arc Browser: 브루탈리즘적 내비게이션, 아름다운 크롬

Arc는 브라우저의 기저 탭 관리 시스템(세로 탭, 워크스페이스, 분할 뷰)을 노출합니다. 이 구조적 정직함은 브루탈리즘적입니다. 시각적 실행(그라데이션 테마, 부드러운 애니메이션)은 탭 관리를 임상적이 아닌 즐거운 경험으로 만듭니다.⁹

균형점

가장 효과적인 접근 방식은 구조에는 브루탈리즘 원칙을, 실행에는 아름다움의 원칙을 사용하는 것입니다:

핵심 시사점

디자이너를 위해: - 구조(레이아웃, 정보 설계, 색상)에는 브루탈리즘 원칙을, 실행(타이포그래피, 간격, 마이크로 인터랙션)에는 아름다움의 원칙을 사용하십시오; 이 조합은 정직하면서도 쾌적한 인터페이스를 만들어냅니다 - 모든 장식적 요소를 제거하고 무엇이 깨지는지 확인하십시오; 아무것도 깨지지 않는다면, 그 장식은 불필요했던 것입니다 - 두 가지 모드를 적당히 만드는 것보다 하나의 모드를 제대로 디자인하십시오; 저의 다크 전용 접근 방식은 타협된 라이트/다크 토글보다 더 일관된 시스템을 만들어냅니다

개발자를 위해: - 디자인 토큰을 임의의 값 없이 CSS 커스텀 프로퍼티로 구현하십시오; 시스템에 존재하지 않는 간격이 필요하다면, 일회성 값을 추가하는 대신 디자인을 수정하십시오 - 마이크로 인터랙션을 기능적 피드백으로 취급하십시오; 150ms 호버 트랜지션은 상호작용 가능성을 전달하지만, 2초짜리 입장 애니메이션은 유용한 정보를 전달하지 않습니다

제품 리더를 위해: - 미적 포지셔닝을 사용자 맥락에 맞추십시오; 전문 도구는 브루탈리즘 쪽으로, 소비자 제품은 아름다움 쪽으로 기울되, 최고의 제품들은 그 교차점을 찾습니다

참고 문헌