타이포그래피

불렛 텍스트 간격 조절

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

질문사항

피그마에서 불렛(bullet)과 텍스트 간격 조절이 어렵다고 알고 있습니다. 이 문제를 해결하기 위해 가이드 문서를 제작하여 전달하는 방식 외에, 피그마 내에서 어떻게 활용하거나 관리하는 것이 좋을까요?

답변

불렛과 텍스트 간격은 폰트 종류에 따라 시각적으로 다르게 보일 수 있고, 개발 단계에서도 정확한 간격 구현이 어려울 수 있는 흔한 문제입니다. 가이드 문서를 통해 명확한 기준을 제시하는 것도 중요하지만, 피그마 내에서 다음과 같은 방법으로 관리할 수 있습니다:

컴포넌트화: 불렛과 텍스트를 하나의 Auto Layout 컴포넌트로 만들어 관리합니다. 이 컴포넌트 내에서 불렛과 텍스트 사이의 간격을 명확히 정의하고, 필요에 따라 Variants를 사용하여 다양한 불렛 스타일을 제공할 수 있습니다. 이렇게 하면 일관된 간격을 유지하고 개발자에게도 명확한 구조를 전달할 수 있습니다.

텍스트 스타일 활용: 불렛이 포함된 텍스트 블록에 특정 텍스트 스타일을 적용하여, 불렛의 크기나 색상, 그리고 텍스트와의 간격을 미리 정의해두는 방법도 있습니다. 하지만 이 방법은 불렛 자체의 위치를 세밀하게 제어하기 어려울 수 있습니다.

개발자와의 협의: 피그마에서 시각적으로 완벽하게 구현하기 어려운 경우, 개발자와 사전에 협의하여 특정 불렛 스타일(예: `list-style-type`, `padding-left` 등 CSS 속성)에 대한 가이드라인을 정하고, 디자인 시스템 문서에 명시하는 것이 중요합니다.