디자인을 두 번 바꾸면서 배운 것: 브루탈리즘에서 미니멀로, WaveformMist 캔버스

두꺼운 오렌지 보더를 보면서 '이게 우리 회사 맞나?' 하는 생각이 들었다.

처음에 안티브루탈리즘을 선택한 이유는 명확했다. 개성이 강하고 눈에 띄니까. Archivo Black 폰트에 #c84b31 오렌지 악센트, 두꺼운 보더와 강한 그림자. 처음엔 만족했는데, 시간이 지나면서 이 강렬함이 "음성 AI를 연구하는 회사"라는 정체성과 계속 충돌하는 느낌을 받았다. 브루탈리즘은 에지 있고 반항적인데, 우리가 하는 일은 조용히 소리를 분석하는 것이다.

무엇이 맞지 않았나

결정적인 계기는 포트폴리오 페이지를 채우면서였다. 음성 분석, 화자 인식, 오디오 처리 같은 연구 성과를 보여주는 페이지에 두꺼운 오렌지 보더가 달려 있으니, 마치 펑크 록 밴드 사이트에 학술 논문을 올려놓은 것 같았다. 시각적 임팩트가 콘텐츠의 진지함을 압도하고 있었다.

원하는 느낌은 "고요한 작업실"이었다. 소리를 다루는 회사답게, 배경은 조용하고 콘텐츠에 집중할 수 있는 공간. 강렬한 색상 대신 충분한 여백, 두꺼운 테두리 대신 미세한 구분선.

미니멀로의 전환

핵심 변경은 세 가지였다.

• 폰트: Archivo/Archivo Black에서 Inter + Pretendard로. 한영 혼용에 최적화된 조합이고, 가독성이 훨씬 좋다.
• 컬러: 따뜻한 베이지(#f5f0eb) + 오렌지(#c84b31)에서 차가운 화이트(#FAFAFA) + 블랙(#1A1A1A)으로. 악센트 컬러는 회색(#6b7280)으로 낮춰서 콘텐츠가 주인공이 되게 했다.
• 보더/그림자: 두꺼운 border와 box-shadow를 전부 제거하고, 미세한 #f0f0f0 보더만 남겼다.

Tailwind v4의 CSS 변수 기반 테마 덕분에 컬러와 폰트 변경은 globals.css의 @theme 블록 하나에서 해결됐다.

@theme {
  --color-background-primary: #fafafa;  /* was #f5f0eb */
  --color-foreground-primary: #1a1a1a;  /* was #2d2d2d */
  --color-accent: #6b7280;              /* was #c84b31 */
  --color-border: #f0f0f0;              /* was #2d2d2d */
}

하지만 컬러 토큰만 바꿔서는 끝나지 않았다. 컴포넌트마다 하드코딩된 border 두께, shadow 값, hover 효과를 하나하나 정리해야 했다. 결과적으로 32개 파일을 건드렸다.

WaveformMist: 브랜드를 시각화하다

미니멀 디자인으로 바꾸니 깔끔해졌지만, 히어로 섹션이 너무 밋밋했다. 여기서 "음성 AI"라는 정체성을 살릴 시각 요소가 필요했다. 음성 파형(waveform)을 Canvas API로 그려서 히어로 배경에 넣기로 했다.

WaveformMist 컴포넌트는 5개의 사인파를 requestAnimationFrame으로 부드럽게 애니메이션한다. 각 파형은 서로 다른 진폭, 주파수, 위상을 가지고 있어서 실제 오디오 파형과 비슷한 느낌을 준다. 양 끝을 Math.sin((x / width) * Math.PI)로 테이퍼링해서 자연스럽게 사라지도록 했다.

// WaveformMist.tsx 핵심 로직
const waves: Wave[] = [
  { yOffset: 0.35, amplitude: 100, frequency: 0.002, phase: 0, speed: 0.01 },
  { yOffset: 0.45, amplitude: 150, frequency: 0.001, phase: Math.PI / 2, speed: 0.008 },
  // ... 5개 파형
]

const draw = () => {
  ctx.strokeStyle = isDark ? '#4A4A4A' : '#C0C0C0'
  waves.forEach((wave) => {
    for (let x = 0; x < canvas.width; x += 5) {
      const y = canvas.height * wave.yOffset +
        Math.sin(x * wave.frequency + wave.phase + time * wave.speed) *
        wave.amplitude * Math.sin((x / canvas.width) * Math.PI)
    }
  })
}

다크모드도 대응했다. prefers-color-scheme 미디어 쿼리를 JavaScript에서 감지해서, 다크모드일 때는 더 어두운 색상과 낮은 opacity로 파형을 그린다. 배경에 녹아드는 느낌이 중요했다.

AVIF로 이미지도 가볍게

디자인 전환 김에 이미지 포맷도 AVIF로 올렸다. Next.js의 images.formats에 AVIF를 WebP보다 먼저 설정하면, 지원하는 브라우저에서 자동으로 AVIF를 서빙한다. WebP 대비 20-30% 추가 압축 효과가 있어서, 포트폴리오 이미지처럼 큰 사진이 많을 때 체감이 된다.

// next.config.mjs
images: {
  formats: ['image/avif', 'image/webp'],
}

디자인 변경의 파급 효과

배운 것

디자인 시스템은 처음부터 토큰에 투자해야 한다. Tailwind v4의 @theme 블록에 컬러와 폰트를 집중시켜둔 덕분에 핵심 토큰 변경은 한 곳에서 끝났다. 하지만 컴포넌트에 하드코딩된 값들(border 두께, shadow, 특정 hover 색상)은 하나하나 찾아서 고쳐야 했다. 토큰으로 빼둘 수 있는 건 최대한 빼두는 게 좋다.

디자인과 브랜드는 분리해서 생각하기 어렵다. "예쁜 디자인"과 "우리 회사에 맞는 디자인"은 전혀 다른 문제다. 브루탈리즘이 트렌디하고 눈에 띄더라도, 그게 "음성 AI를 연구하는 회사"에 맞지 않으면 의미가 없다. 디자인은 브랜드를 표현하는 도구이지, 그 자체가 목적이 아니다.

Canvas 애니메이션은 생각보다 가볍다. 5개 사인파를 5px 간격으로 그리는 정도는 성능 부담이 거의 없었다. 복잡한 라이브러리 없이도 브랜드 아이덴티티를 시각화할 수 있었다.

자주 묻는 질문

Tailwind v4에서 대규모 디자인 시스템 변경이 얼마나 수월한가?

CSS 변수 기반 @theme 블록에 컬러와 폰트 토큰이 집중되어 있어서, 핵심 토큰 변경은 한 파일에서 해결된다. 다만 컴포넌트별로 하드코딩된 스타일(border 두께, shadow 등)은 개별 수정이 필요해서 이번에 32개 파일을 건드렸다.

WaveformMist Canvas 애니메이션이 성능에 영향을 주지 않나?

requestAnimationFrame으로 렌더링하고, 5px 간격으로 점을 찍어서 연산량을 줄였다. 5개 사인파 정도는 60fps를 유지하는 데 문제가 없다. 모바일에서도 체감할 수 있는 프레임 드롭은 없었다.

AVIF 포맷으로 전환하면 호환성 문제는 없나?

Next.js의 images.formats에 ['image/avif', 'image/webp'] 순서로 설정하면 브라우저가 AVIF를 지원하지 않을 때 자동으로 WebP로 폴백한다. Safari 16 이상, Chrome 85 이상이 AVIF를 지원하므로 현재 대부분의 브라우저에서 문제없다.