RSS

디자인 시스템을 씌우기 전에 레이아웃 틀부터 맞춰야 하는 이유

프론트엔드글: , Duolabs9분 읽기blogdesign-systemfrontendmodel-anthropic-claude-opus-4.8refactoringtechnical-note

같은 디자인 시스템을 사용하는데도 어떤 화면은 정돈되어 보이고, 어떤 화면은 미묘하게 어긋나 보일 때가 있습니다. 색상과 버튼 모양이 같아도 페이지 폭, 여백, 제목 위치, 입력 필드의 구성이 제각각이면 전체 인상은 쉽게 흐트러집니다.

이 차이는 대개 테마가 아니라 레이아웃의 골격에서 생깁니다. 디자인 시스템의 효과를 제대로 얻으려면 색과 모서리를 바꾸기 전에 화면이 공유하는 기본 틀부터 맞춰야 합니다.

왜 레이아웃이 먼저일까요?

디자인 시스템은 화면의 모든 문제를 자동으로 해결하는 장치가 아닙니다. 색상, 글꼴, 간격처럼 반복되는 값을 일관되게 관리하고, 버튼이나 입력 필드 같은 요소를 재사용하기 쉽게 만드는 기반에 가깝습니다.

페이지마다 본문 폭과 여백을 서로 다르게 정해 두었다면 같은 버튼을 사용해도 화면은 가지런해 보이지 않습니다. 반대로 레이아웃 규칙이 통일되어 있으면 테마를 바꾸는 작업은 훨씬 단순해집니다.

어긋난 골격 위에 새 테마를 적용하면, 기존의 불일치가 오히려 더 선명하게 드러납니다.

따라서 작업 순서는 다음과 같이 잡는 편이 안전합니다.

  1. 페이지의 공통 골격을 정합니다.
  2. 반복되는 UI를 공용 컴포넌트로 묶습니다.
  3. 색상과 간격을 의미 기반 토큰으로 연결합니다.
  4. 마지막으로 브랜드 테마를 적용합니다.

디자인 시스템과 레이아웃 틀의 차이

두 개념은 서로 연결되어 있지만 담당하는 역할은 다릅니다.

구분 역할 예시
디자인 토큰 반복되는 값을 이름으로 관리합니다 기본색, 테두리색, 본문 간격
UI 컴포넌트 같은 기능과 상태를 재사용합니다 Button, Input, Card
레이아웃 틀 페이지의 폭과 배치를 통일합니다 PageContainer, PageHeader
테마 토큰에 실제 브랜드 표현을 연결합니다 색상, 글꼴, 모서리, 그림자

테마는 건물의 마감재와 비슷합니다. 레이아웃 틀은 방의 크기와 문·창문의 위치를 정하는 설계에 가깝습니다. 설계가 제각각인 상태에서는 마감재를 통일해도 공간이 정돈되어 보이기 어렵습니다.

먼저 맞춰야 할 네 가지 골격

1. 페이지 폭과 바깥 여백

화면마다 서로 다른 max-width와 패딩을 사용하면 사용자는 페이지를 이동할 때마다 내용이 좌우로 흔들린다고 느낍니다. 본문형, 대시보드형처럼 필요한 유형을 몇 가지로 제한하고 각 유형의 폭과 여백을 한곳에서 관리하는 것이 좋습니다.

type PageContainerProps = {
  title: string;
  children: React.ReactNode;
};

export function PageContainer({ title, children }: PageContainerProps) {
  return (
    <main className="mx-auto w-full max-w-6xl px-6 py-8">
      <h1 className="text-2xl font-semibold">{title}</h1>
      <div className="mt-6">{children}</div>
    </main>
  );
}

이렇게 바깥 틀을 공유하면 페이지 폭이나 제목 간격을 바꿀 때 여러 화면을 각각 수정하지 않아도 됩니다.

2. 제목과 주요 동작의 위치

어떤 화면은 제목 옆에 버튼이 있고, 다른 화면은 본문 아래에 같은 버튼이 있다면 기능을 찾는 데 시간이 더 걸립니다. 페이지 헤더에는 제목, 설명, 주요 동작이 놓이는 위치를 정하고 예외를 최소화해야 합니다.

3. 입력 필드의 구조

입력창만 공용으로 만들어서는 충분하지 않습니다. 라벨, 도움말, 오류 메시지, 필수 표시까지 하나의 Field 구조로 묶어야 폼 전체의 간격과 접근성이 일관됩니다.

<Field label="이메일" hint="업무용 이메일을 입력해 주세요." error={errors.email}>
  <Input type="email" name="email" />
</Field>

화면마다 라벨과 오류 메시지를 따로 배치하면 같은 입력 컴포넌트를 사용하더라도 폼의 높이와 정렬이 달라집니다.

4. 카드와 섹션의 간격

카드의 테두리와 그림자만 같다고 일관된 화면이 되는 것은 아닙니다. 카드 내부 패딩, 제목과 본문의 간격, 카드 사이의 간격도 같은 규칙을 따라야 합니다. 자주 쓰는 조합은 CardHeader, CardContent, Section처럼 작은 구성 요소로 나누면 관리하기 쉽습니다.

토큰은 값보다 의미가 중요합니다

디자인 토큰은 #2563eb 같은 값을 코드 곳곳에 직접 쓰는 대신 brand-primary처럼 이름을 붙여 관리하는 방식입니다. 한곳의 값을 바꾸면 해당 토큰을 사용하는 모든 화면에 변경이 반영됩니다.

더 중요한 것은 토큰의 이름입니다. gray-500은 색 자체를 설명하지만 text-muted는 그 색이 어디에 쓰이는지 설명합니다. 의미 기반 토큰을 사용하면 라이트 모드와 다크 모드에서 실제 색이 달라져도 컴포넌트 코드는 바꿀 필요가 없습니다.

:root {
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text-muted: #6b7280;
}

[data-theme="dark"] {
  --color-surface: #111827;
  --color-border: #374151;
  --color-text-muted: #9ca3af;
}

다만 토큰이 잘 정리되어 있어도 화면마다 임의의 폭과 간격을 사용하면 레이아웃 문제는 남습니다. 토큰과 레이아웃 규칙은 함께 작동해야 합니다.

레이아웃이 어긋난 프로젝트에서 자주 보이는 신호

다음과 같은 패턴이 반복된다면 테마 교체 전에 구조 정리가 필요합니다.

  • 같은 역할의 페이지인데 본문 폭과 좌우 여백이 서로 다릅니다.
  • 화면마다 제목과 주요 버튼의 위치가 달라집니다.
  • 비슷한 카드나 통계 영역이 파일마다 새 이름으로 다시 구현되어 있습니다.
  • 공용 입력 컴포넌트가 있는데 일부 화면은 기본 HTML 요소를 직접 사용합니다.
  • 간격과 높이에 임의의 픽셀값이 많이 남아 있습니다.
  • 새 화면을 만들 때 참고할 템플릿이나 작성 규칙이 없습니다.

이런 문제는 개별 화면만 보면 사소해 보입니다. 하지만 화면 수가 늘어날수록 차이가 누적되고, 나중에는 작은 변경도 여러 파일을 찾아다니며 적용해야 합니다.

모든 것을 컴포넌트로 만들 필요는 없습니다

일관성을 높인다고 해서 모든 UI 조합을 거대한 공용 컴포넌트로 만들 필요는 없습니다. 지나친 추상화는 예외 처리용 속성을 늘리고 오히려 사용법을 어렵게 만듭니다.

실무에서는 다음 정도의 균형이 적절합니다.

  • 자주 반복되는 페이지 틀과 입력 구조는 공용 컴포넌트로 만듭니다.
  • 색상과 간격은 토큰으로 관리합니다.
  • 화면 구성 방식은 템플릿과 짧은 규칙으로 공유합니다.
  • 한 번만 등장하는 조합은 해당 기능 안에 두되 공통 토큰을 사용합니다.

즉, 일관성은 컴포넌트의 개수보다 공유된 규칙을 실제로 지키는 과정에서 만들어집니다.

안전한 리팩터링 순서

기존 프로젝트를 정리할 때는 한 번에 모두 바꾸기보다 영향 범위가 명확한 부분부터 진행하는 편이 좋습니다.

  1. 대표 화면 몇 개를 골라 페이지 폭, 헤더, 섹션 간격을 비교합니다.
  2. 반복 빈도가 높은 PageContainer, PageHeader, Field부터 추출합니다.
  3. 기본 HTML 요소로 우회한 화면을 공용 컴포넌트로 교체합니다.
  4. 임의의 픽셀값을 간격과 글자 크기 토큰으로 옮깁니다.
  5. 새 화면이 따를 템플릿과 작성 규칙을 문서화합니다.
  6. 회귀 테스트와 주요 화면의 시각 비교를 거친 뒤 테마를 적용합니다.

리팩터링 중에는 한 화면의 모든 요소를 완벽하게 고치는 것보다, 여러 화면이 공유할 수 있는 규칙을 먼저 만드는 것이 효과적입니다.

적용 전 체크리스트

  • 페이지 유형별 최대 폭과 좌우 여백이 정해져 있나요?
  • 제목, 설명, 주요 동작의 위치가 일관적인가요?
  • 라벨과 오류 메시지를 포함한 입력 필드 구조가 공통화되어 있나요?
  • 임의의 색상과 간격 대신 의미 기반 토큰을 사용하나요?
  • 비슷한 카드와 섹션이 화면마다 중복 구현되어 있지 않나요?
  • 새 화면을 시작할 템플릿과 간단한 규칙이 있나요?
  • 테마 변경 전후를 비교할 대표 화면이 준비되어 있나요?

듀오랩스가 보는 관점

디자인 시스템 도입의 목적은 단순히 화면을 보기 좋게 바꾸는 데 있지 않습니다. 제품이 커져도 같은 원칙으로 화면을 만들고, 변경 비용을 예측할 수 있게 만드는 것이 더 중요합니다.

그래서 테마를 적용하기 전에는 먼저 페이지의 폭, 여백, 헤더, 입력 필드처럼 반복되는 골격을 확인해야 합니다. 이 틀이 안정되어 있으면 브랜드 색상이나 글꼴을 바꾸는 작업도 빠르고 안전해집니다.

좋은 디자인 시스템은 화려한 컴포넌트 목록이 아니라, 팀이 계속 지킬 수 있는 레이아웃 규칙에서 시작합니다.

함께 읽기