개발자가 다시 묻지 않게: Figma Dev Mode로 스펙(간격·폰트) 정확히 뽑는 실전 가이드
개발자가 다시 묻지 않게: Figma Dev Mode로 스펙(간격·폰트) 정확히 뽑는 실전 가이드
체크리스트까지 만들었는데도 개발자 질문이 남는 경우가 있습니다.
보통 이런 형태죠.
“간격은 알겠는데, 이게 패딩이에요? 아이템 간격이에요?”
“폰트는 14인데… 행간이랑 자간은요?”
이 단계에서 필요한 건 “더 열심히 설명하기”가 아니라 Dev Mode에서 스펙을 확정해서 전달하는 방식입니다. 같은 화면이라도 어디를 보고 뽑느냐에 따라 전달 품질이 달라집니다.
- 간격(Spacing)과 여백(Padding)을 Dev Mode 기준으로 명확히 구분해 전달할 수 있습니다
- 폰트 스펙(크기/행간/자간)을 “해석 없이” 그대로 전달할 수 있습니다
- 개발자가 다시 묻기 전에, 전달 메시지 자체를 깔끔하게 완성할 수 있습니다
Dev Mode를 쓰기 전에 반드시 정리해야 할 것
Dev Mode는 “정리된 화면”을 전제로 정확해집니다. 아래가 안 되어 있으면, Dev Mode를 써도 질문은 줄지 않습니다.
- 간격과 패딩이 Auto Layout으로 관리되고 있는가
- 텍스트가 Text Style로 정의되어 있는가
- 같은 UI가 화면마다 다른 값을 쓰고 있지 않은가
Dev Mode는 기준을 만들어주지 않습니다. 기준을 “보여주는 도구”일 뿐입니다.
간격(Spacing) 스펙 읽는 법: 8px 질문의 정체
개발자가 묻는 “8px 맞냐”는 질문은 숫자를 확인하려는 게 아니라, 그 8px의 성격을 묻는 겁니다.
Dev Mode에서 간격을 볼 때는 항상 이 순서로 판단합니다.
- 이 값이 아이템 간격(Spacing)인가?
- Auto Layout의 규칙으로 유지되는 값인가?
- 예외라면, 왜 예외인지 설명이 가능한가?
그래서 전달할 때는 숫자만 말하지 말고, “이 값이 무엇인지”를 함께 말해야 합니다.
여백(Padding) 스펙 전달: 패딩과 마진을 구분하는 기준
디자인에서는 모두 여백처럼 보이지만, 개발에서는 컨테이너 내부 패딩과 외부 마진은 완전히 다른 개념입니다.
Dev Mode에서 여백을 전달할 때는 이렇게 정리하세요.
- 카드/모달/섹션 내부 값 → Padding
- 컴포넌트와 컴포넌트 사이 값 → Spacing 또는 Margin
- 좌우가 다르면, 의도된 비대칭인지 명시
이 구분이 명확하면, “이게 패딩이에요?”라는 질문은 거의 사라집니다.
폰트(Font) 스펙 전달: 크기보다 중요한 행간·자간
폰트 전달에서 가장 많이 누락되는 건 행간(Line-height)과 자간(Letter-spacing)입니다.
Dev Mode 기준으로 폰트는 항상 세트로 전달해야 합니다.
- Font size (크기)
- Font weight (굵기)
- Line-height (행간)
- Letter-spacing (자간)
가장 좋은 방법은 텍스트 스타일 이름으로 전달하는 것입니다. 그러면 개발자는 “이 스타일을 그대로 구현”하면 됩니다.
개발자가 좋아하는 전달 문장 템플릿
- “기본 간격은 8px 규칙이며, 예외는 화면에 표시했습니다.”
- “카드 내부 패딩은 상/하 12, 좌/우 16입니다(Dev Mode 기준).”
- “본문 텍스트는 Body/M 스타일(14, line-height 20, letter-spacing 0)입니다.”
- “Disabled/Error 상태도 동일한 텍스트 규칙을 사용합니다.”
- “Dev Mode 값 기준으로 구현 부탁드립니다.”
전달 직전 최종 체크리스트
- [ ] 간격이 Spacing인지 Padding인지 구분해 전달했다
- [ ] 폰트는 크기/행간/자간까지 포함했다
- [ ] 예외 값은 이유를 한 줄로 설명했다
- [ ] 전달 문장에 “기준”이 들어 있다
결론
개발자의 질문은 귀찮아서가 아니라, 확신할 수 없어서 나옵니다.
Dev Mode를 기준으로 스펙을 읽고, 그 기준을 문장으로 전달하면 질문은 자연스럽게 줄어듭니다.
여러분은 어떻게 생각하시나요?
이 글이 마음에 드시면 공감을 눌러 주세요.
FAQ
Q Dev Mode가 없으면 이 방식은 못 쓰나요?
A Dev Mode가 가장 편할 뿐, 핵심은 “Auto Layout과 스타일로 기준을 만든다”는 점입니다. 이 원칙만 지켜도 전달 품질은 크게 올라갑니다.
Q 간격은 꼭 8px이어야 하나요?
A 아닙니다. 중요한 건 숫자가 아니라 “규칙과 일관성”입니다.
Q 개발 전달에서 가장 중요한 한 가지는 뭔가요?
A 숫자보다 “이 값이 왜 그런지 설명할 수 있는 기준”입니다.