피그마 Dev Mode란? 기획자가 알아둘 기능
피그마 Dev Mode란? 기획자가 알아둘 기능
화면 시안을 캡처해서 슬랙으로 개발자에게 보낸 적이 있습니다. "이 여백 몇 px이에요", "이 회색 색상 코드가 뭐예요" 같은 질문이 하루 종일 따라왔고, 저는 매번 피그마를 열어 자로 재듯 확인해서 답을 보냈습니다.
나중에서야 피그마 안에 이런 질문 자체를 없애주는 모드가 따로 있다는 걸 알게 됐습니다. 바로 Dev Mode입니다.
이번 글에서는 Dev Mode가 정확히 무엇이고, 디자이너나 개발자가 아닌 기획자가 왜 이걸 알아둬야 하는지 정리해보겠습니다.
1. 피그마 Dev Mode란 무엇인가
Dev Mode는 피그마 화면 우측 상단 토글로 켤 수 있는 별도 작업 모드입니다. 평소 쓰는 디자인 모드가 "화면을 그리고 다듬는 용도"라면, Dev Mode는 "그 화면을 구현하는 데 필요한 정보를 뽑아내는 용도"에 가깝습니다.
비유하자면 인테리어 완성 사진과 시공 도면의 차이와 비슷합니다. 완성 사진만 보고는 벽 두께나 배관 위치를 알 수 없듯이, 디자인 모드 화면만 보고는 여백 값이나 색상 코드, 컴포넌트 상태값을 정확히 알기 어렵습니다. Dev Mode는 그 도면 역할을 합니다.
Dev Mode의 핵심 구성 요소
| 기능 | 설명 |
|---|---|
| Inspect 패널 | 선택한 요소의 여백, 크기, 색상, 폰트 등 스펙을 자동으로 보여줍니다. |
| 코드 스니펫 | CSS, iOS, Android 등 언어별 코드를 자동으로 생성해 보여줍니다. |
| 에셋 추출 | 아이콘, 이미지 등을 개발에 필요한 해상도와 포맷으로 바로 내려받을 수 있습니다. |
| 주석(Annotations) | 화면 위에 조건, 예외 케이스, 설계 의도 등을 직접 메모로 남길 수 있습니다. |
| Ready for dev 상태 | 화면·섹션·컴포넌트 단위로 "개발 착수 가능" 여부를 표시하고, 한 화면에서 모아 볼 수 있습니다. |
여기서 한 가지 짚을 점은, 기획자가 직접 코드를 몰라도 된다는 사실은 변하지 않는다는 겁니다. 다만 개발자가 어떤 화면과 정보를 보고 판단하는지 알고 있으면, 화면을 전달하기 전에 빠진 부분을 기획자 선에서 먼저 채울 수 있습니다. 결국 이게 질문을 줄이는 가장 확실한 방법입니다.
2. 기획자 관점에서 적용하는 법
Dev Mode는 디자이너와 개발자만 쓰는 기능처럼 보이지만, 실제로는 기획자가 개입할 지점이 분명히 있습니다.
Ready for dev 상태는 디자이너 혼자 판단해서 걸기보다, 기획자가 화면 기획 완료 시점을 기준으로 함께 확인하고 거는 편이 낫습니다. 아직 정책이 확정되지 않은 화면에 상태를 걸어버리면, 개발자는 그걸 신호 삼아 바로 작업을 시작하기 때문입니다.
주석 역시 디자이너가 UI 스펙만 적어두는 경우가 많은데, 여기에 기획자가 비즈니스 로직이나 예외 조건을 함께 남겨두면 화면 하나로 대부분의 질문이 해결됩니다. 예를 들어 "이 버튼은 결제 완료 후 24시간 동안만 노출" 같은 조건은 화면만 봐서는 절대 알 수 없는 정보입니다.
3. 실무 팁 3가지
팁1. Ready for dev로 전달 우선순위를 관리한다
팁2. Inspect 패널로 개발자 질문을 기획 단계에서 먼저 걸러낸다
팁3. 코드 스니펫으로 구현 난이도 감을 잡는다
4. 마무리
- Dev Mode는 디자인을 구현 정보로 바꿔주는 피그마의 별도 작업 모드입니다.
- 기획자는 코드를 몰라도, 개발자가 무엇을 보는지 알면 전달 전에 빠진 정보를 미리 채울 수 있습니다.
- Ready for dev, 주석, Inspect 패널 세 가지만 익혀도 핸드오프 질문이 눈에 띄게 줄어듭니다.
Dev Mode를 아직 안 써보셨다면, 다음 화면 전달 전에 Inspect 패널부터 한 번 열어보세요.