Tailwind 토큰 바꿨을 뿐인데 홈페이지가 브루탈리즘이 됐다

무색 홈페이지는 처음에 Pretendard 폰트에 #FAFAFA 배경, 파란색 악센트로 된 전형적인 미니멀 디자인이었다. 깔끔하긴 한데 눈에 띄지 않았다. 기술 회사 홈페이지 템플릿을 아무거나 골라도 비슷하게 생긴 그런 느낌. "우리 회사가 뭘 하는 곳인지" 시각적으로 전달하는 힘이 부족했다.

그래서 안티브루탈리즘(Anti-Brutalism)으로 방향을 틀었다. 날카로운 모서리, 두꺼운 보더, 대담한 타이포그래피. 소프트한 그림자와 둥근 모서리로 "친절함"을 표현하던 기존 디자인의 정반대다.

브루탈리즘이 뭔데

웹 브루탈리즘은 건축의 브루탈리즘에서 온 개념이다. 콘크리트 노출, 구조 그 자체를 드러내는 건축처럼 웹에서도 장식을 걷어내고 구조를 전면에 내세운다. border-radius: 0, 두꺼운 보더, 굵은 서체. 트랜지션도 없다. hover하면 바로 색이 바뀐다.

"안티" 브루탈리즘이라 부르는 건 순수 브루탈리즘의 흑백 극단성에서 한 발 빠졌기 때문이다. 오프화이트 배경에 테라코타 악센트를 쓰고 여백도 넉넉하게 둔다. 브루탈리즘의 대담함은 가져가되 읽기 편하게.

디자인 토큰 교체로 전면 리뉴얼

이전 글에서 PayloadCMS + Next.js로 초기 구조를 잡을 때 Tailwind 디자인 토큰을 theme.extend에 분리해뒀다. 색상, 폰트, 사이즈가 모두 토큰으로 정의돼 있으니 이걸 바꾸면 사이트 전체가 한꺼번에 바뀐다. 실제로 해보니 정말 그랬다.

핵심은 tailwind.config.ts의 색상 팔레트 교체다.

// Before: 미니멀
colors: {
  background: { primary: '#FAFAFA', secondary: '#F5F5F5' },
  foreground: { primary: '#1A1A1A', secondary: '#6B6B6B' },
  accent: { DEFAULT: '#4A6CF7', hover: '#3B5AE0' },
}

// After: 안티브루탈리즘
colors: {
  background: { primary: '#F5F0EB', secondary: '#EBE5DE' },
  foreground: { primary: '#2D2D2D', secondary: '#7A7067', inverse: '#F5F0EB' },
  accent: { DEFAULT: '#C84B31', hover: '#A63D27', blue: '#2E4057' },
}

순백(#FAFAFA)이 오프화이트(#F5F0EB)로, 파란색 악센트(#4A6CF7)가 테라코타(#C84B31)로 바뀌었다. foreground-inverse 토큰도 추가했는데 버튼 hover 시 배경/전경 반전에 쓰인다.

폰트도 전면 교체했다. Pretendard(본문 전용) 하나로 쓰던 걸 Archivo Black(디스플레이) + Archivo(본문) + JetBrains Mono(코드) 3종 체제로 바꿨다. 제목에는 uppercase와 tracking-widest까지 걸어서 브루탈리즘 특유의 "소리치는" 타이포그래피를 만들었다.

글로벌 CSS 리셋이 분위기를 만든다

색상과 폰트만으로는 부족하다. 브루탈리즘의 핵심은 "장식 제거"인데, 둥근 모서리와 부드러운 트랜지션이 남아 있으면 미니멀과 브루탈리즘 사이 어중간한 상태가 된다.

globals.css에 이 두 줄을 넣었다.

@layer base {
  * { border-radius: 0 !important; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

과격하다. 모든 요소에서 둥근 모서리를 없애고 모든 트랜지션과 애니메이션을 끈다. !important까지 붙인 건 서드파티 컴포넌트나 Tailwind 유틸리티 클래스가 덮어쓰는 걸 막기 위해서다.

"트랜지션 없애면 UX가 나빠지지 않나?" 싶을 수 있는데 브루탈리즘에서는 오히려 의도적인 선택이다. hover하면 0.3초에 걸쳐 색이 변하는 게 아니라 즉시 변한다. 이 즉각적인 반응이 브루탈리즘의 "날것" 느낌을 살린다. 접근성 관점에서도 prefers-reduced-motion 사용자에게는 원래 트랜지션이 없는 게 기본이니 문제될 게 없다.

여기에 재사용 가능한 브루탈리즘 컴포넌트 클래스도 만들었다.

@layer components {
  .btn-brutal {
    @apply inline-block px-8 py-3 bg-foreground-primary text-foreground-inverse
           font-mono uppercase tracking-wider text-sm border-3 border-foreground-primary;
  }
  .btn-brutal:hover {
    @apply bg-background-primary text-foreground-primary;
  }
}

검은 배경에 오프화이트 텍스트, 모노스페이스 폰트, 대문자. hover하면 색이 뒤집힌다. 이 패턴을 btn-brutal, card-brutal 같은 클래스로 묶어서 사이트 전체에서 일관되게 썼다.

Hero를 완전히 뜯어고치다

기존 Hero는 가운데 정렬 제목 + 부제목 + CTA 버튼이라는 흔한 구성이었다. 브루탈리즘으로 바꾸면서 비대칭 12컬럼 그리드(8:4)를 도입했다.

<div className="grid grid-cols-1 md:grid-cols-12 gap-0">
  <div className="md:col-span-8 border-r-0 md:border-r-4 border-foreground-primary">
    <h1 className="text-[3rem] md:text-[6rem] lg:text-[8rem] font-display uppercase">
      {block.heading}
    </h1>
  </div>
  <div className="md:col-span-4 flex flex-col justify-end">
    {block.subheading && <p className="font-mono">{block.subheading}</p>}
  </div>
</div>

왼쪽 8칸에 거대한 제목이 들어가고 4px 보더로 오른쪽 4칸과 구분된다. 제목 크기가 모바일 3rem에서 데스크탑 8rem까지 올라간다. 8rem이면 약 128px인데 화면을 가득 채우는 MUSECK 글자가 꽤 인상적이다.

오른쪽 4칸에는 부제목과 CTA가 하단 정렬(justify-end)로 배치된다. 비대칭이지만 무게 중심이 잡혀 있어서 안정감이 있다.

새 블록 3종 추가

디자인을 바꾸면서 기존 블록만으로는 표현이 부족한 영역이 생겼다. Process, LogoBar, Stats 세 가지 블록을 새로 만들었다.

• Process — 단계별 프로세스를 번호와 함께 보여준다. 상담 > 기획 > 개발 > 런칭 같은 흐름을 표현할 때 쓴다.
• LogoBar — 파트너사나 기술 스택 로고를 한 줄로 나열한다. 두꺼운 상하 보더로 섹션을 구분한다.
• Stats — 숫자 통계를 크게 보여주는 블록. 프로젝트 수, 고객 수 같은 지표를 Archivo Black의 거대한 숫자로 표시한다.

기존의 Features, CTA, ImageText 블록도 전부 손봤다. 두꺼운 보더 추가, hover 시 색상 반전, 폰트 교체. 이것도 디자인 토큰 덕분에 대부분 CSS 클래스 수정만으로 끝났다.

모바일은 따로 신경 써야 한다

데스크탑에서 8rem 제목이 멋져 보여도 모바일에서는 화면을 뚫고 나간다. 이걸 뒤늦게 발견해서 별도 커밋으로 반응형 대응을 했다.

/* 모바일: 2rem, 데스크탑: 3.5rem */
h1 { font-size: var(--text-h2); }  /* 기본 모바일 */
@media (min-width: 768px) {
  h1 { font-size: var(--text-h1); }
}

모바일 메뉴도 새로 만들었다. 기존 데스크탑 네비게이션은 모바일에서 햄버거 메뉴 아이콘으로 바뀌고, 클릭하면 풀스크린 오버레이가 열린다. MobileMenu는 useState로 토글하는 클라이언트 컴포넌트인데 Next.js 15에서는 'use client' 지시자를 붙여야 한다. 서버 컴포넌트가 기본이라 잊기 쉬운 부분이다.

커밋 로그에서 보이는 삽질의 흔적

이번 리뉴얼은 2일 동안 11개 커밋으로 진행됐다. 커밋 메시지를 보면 디자인이 한 번에 확정되지 않았다는 걸 알 수 있다.

1. feat: 안티브루탈리즘 디자인 전면 리디자인 — 첫 시도. 색상과 기본 구조 변경.
2. feat: 비대칭 레이아웃 전면 리뉴얼 — Hero를 비대칭으로 재설계.
3. style: 색상 팔레트 전환 — 색상을 한 번 더 조정.
4. fix: add responsive h1 sizing — 모바일에서 깨진 제목 수정.

디자인 리뉴얼에서 한 번에 완성된 결과물을 기대하면 안 된다. 브라우저에서 보고 조정하고 다시 보고를 반복하는 게 정상이다. 오히려 커밋을 잘게 쪼개서 각 단계를 기록해두면 나중에 되돌리기도 쉽다.

디자인 시스템은 바꿀 수 있게 만드는 것

이번 작업에서 배운 가장 큰 교훈은 이것이다. 디자인 시스템의 가치는 일관성에만 있지 않다. "바꿀 수 있는 능력"이야말로 진짜 가치다.

Tailwind의 theme.extend에 디자인 토큰을 잘 분리해두면 색상 5개와 폰트 3종을 교체하는 것만으로 사이트 전체 분위기가 뒤바뀐다. 물론 Hero 같은 핵심 섹션은 레이아웃 자체를 다시 짜야 하지만 일반적인 블록은 토큰 교체 + CSS 클래스 수정만으로 충분하다.

처음부터 "이 디자인을 언젠가 바꿀 수도 있다"는 전제로 토큰 레이어를 설계하자. 미래의 나에게 주는 선물이다.