개발 모드 & 핸드오프

인라인 선 Dev Mode 전달

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

질문사항

프레임에 인라인(Inner Stroke)으로 선을 설정했을 때, Dev Mode에서는 프레임 기준 간격만 표시됩니다. 개발자에게 핸드오프할 때 이러한 경우를 어떻게 설명하거나 전달하시나요?

답변

피그마에서 프레임에 'Inner Stroke'를 적용하면, Dev Mode에서는 해당 스트로크가 프레임의 내부 공간을 차지하는 것으로 계산되어 패딩(padding)처럼 보일 수 있습니다. 개발자에게 핸드오프할 때는 다음과 같은 방법을 고려해볼 수 있습니다:

명확한 커뮤니케이션: Dev Mode에서 보이는 간격이 스트로크를 포함한 것임을 명확히 설명합니다. 필요하다면 주석(Comment) 기능을 활용하여 해당 요소에 대한 설명을 추가할 수 있습니다.

스트로크 속성 확인: 개발자는 Dev Mode에서 해당 프레임을 선택하면 'Stroke' 섹션에서 스트로크의 두께와 위치(Inner, Outer, Center)를 확인할 수 있습니다. 이 정보를 통해 실제 CSS 속성(예: `border-width`, `border-style`, `border-color`, `box-sizing: border-box` 또는 `padding` 조정)을 파악할 수 있습니다.

가이드라인 문서: 디자인 시스템 문서나 별도의 가이드라인에 스트로크 처리 방식에 대한 규칙을 명시하여 개발자가 일관되게 적용할 수 있도록 합니다.

대안 고려: 만약 Dev Mode에서 보이는 간격이 개발자에게 혼란을 줄 수 있다면, 스트로크 대신 `Auto Layout`의 `Padding`과 `Fill`을 조합하여 유사한 시각적 효과를 내는 방법을 고려해볼 수도 있습니다. (단, 이 경우 시맨틱이 달라질 수 있으므로 주의 필요)