디자인 토큰 & 워크플로우

bg-fill vs bg-surface 차이

피그마 오픈카톡방2026. 3. 7.

질문사항

디자인 시스템에서 'bg-fill'과 'bg-surface' 색상 토큰의 사용처와 차이점을 알려주세요.

답변

디자인 시스템에서 'bg-fill'과 'bg-surface'는 배경 색상 토큰으로 사용되며, 일반적으로 다음과 같은 차이점을 가집니다:

`bg-surface` (Surface Color):

의미: UI의 가장 기본적인 '표면'을 나타내는 색상입니다. 콘텐츠가 놓이는 배경색으로 사용됩니다.

사용처: 앱/웹 페이지의 메인 배경, 카드 컴포넌트의 배경, 모달 창의 배경 등 UI 요소들이 올라가는 기본 바탕색으로 활용됩니다. 일반적으로 가장 넓은 영역에 적용되는 색상입니다.

예시: 흰색 테마에서는 밝은 회색이나 흰색, 다크 테마에서는 어두운 회색 등이 될 수 있습니다.

`bg-fill` (Fill Color):

의미: 특정 요소의 내부를 '채우는' 색상입니다. `bg-surface` 위에 올라가는 요소들의 배경색으로 사용되어 시각적 계층을 만듭니다.

사용처: 버튼의 배경, 입력 필드의 배경, 탭의 배경, 특정 상태(hover, active)의 배경 등 `bg-surface` 위에 놓여 사용자 인터랙션을 유도하거나 정보를 강조하는 요소의 배경색으로 활용됩니다. `bg-surface`보다 더 작은 영역에 적용되는 경우가 많습니다.

예시: 버튼의 기본 색상, 선택된 탭의 배경색 등.

핵심 차이: `bg-surface`는 UI의 가장 넓고 기본적인 배경을, `bg-fill`은 그 위에 놓이는 개별 요소의 배경을 담당하여 시각적 계층과 깊이를 표현합니다.

이러한 색상 토큰의 구체적인 정의와 사용처는 각 디자인 시스템마다 다를 수 있으므로, 실제 디자인 시스템의 원본 파일과 문서를 참고하는 것이 가장 정확합니다.

참고 자료:

Design System Hub 플러그인: 다양한 디자인 시스템의 Figma 파일과 문서 링크를 모아둔 플러그인입니다.

[Design System Hub](https://www.figma.com/community/plugin/1324752802910575903)

Figma에서 발행한 Simple Design System 파일: 처음 시작하는 분들이 참고하기 좋은 단순한 디자인 시스템 예시입니다.

[Simple Design System](https://www.figma.com/community/file/1380235722331273046/simple-design-system)