디자인 파일을 넘기면, 개발자에게서 이런 말 한 번쯤 들어보셨을 겁니다.
“이거 여백 기준이 뭐죠?”
“폰트 사이즈가 Figma랑 다르게 느껴져요.”
“이거 실제로 구현 가능한 거 맞나요?”
그럼 디자이너들은 생각하죠. “진짜 센스 없다…” 딱 보면 모르나? 답답한 개발자들아…
한 번에 이해되면 좋겠지만, 실제 협업에서는 소소한 오해가 쌓여
개발자와 디자이너 사이에 눈치 싸움이 벌어지기도 하죠.
이런 문제를 줄이기 위해 등장한 게 바로 Figma Dev Mode입니다.
2023년부터 본격적으로 도입된 이 기능은,
기존 Inspect 모드보다 훨씬 더 실무 친화적인 구조를 갖추고 있습니다.
이번 글에서는 Dev Mode를 제대로 활용하면 협업 스트레스를 얼마나 줄일 수 있는지,
그리고 디자이너는 어떤 준비를 해둬야 개발자가 좋아하는 디자인 파일을 만들 수 있는지 정리해 보겠습니다.
Dev Mode, 기존 Inspect랑 뭐가 다른가요?
기존 Inspect 모드는 기본적인 사이즈, 색상, 폰트 정보를 제공해주는 뷰였습니다.
하지만 Dev Mode는 개발자 입장에서 보기 좋게 구조화된 정보를 보여주고,
컴포넌트 구조, 네이밍, 속성값, 디자인 시스템 연결 상태까지 확인할 수 있도록 진화했죠.
Dev Mode에서는 다음과 같은 기능이 추가로 제공됩니다.
- CSS, iOS, Android 코드 자동 생성 (더 깔끔하고 일관성 있게)
- 컴포넌트/변수 적용 여부 확인
- 코드 스니펫 복사
- 주석(Comment) 기능과 병행 가능
- VSCode, GitHub 등 개발 환경 연동 지원
즉, Dev Mode는 단순한 디자인 뷰어가 아니라,
디자인-개발 간의 브릿지를 위한 가이드 도구라고 보는 게 더 정확합니다.
디자이너가 Dev Mode를 활용하기 위해 해야 할 준비
Dev Mode는 개발자를 위한 뷰이지만, 디자이너가 준비하지 않으면
결국 보여줄 정보가 없는 빈 껍데기가 됩니다.
아래 항목을 준비해두면, 협업이 훨씬 부드러워집니다.
1. 컴포넌트 기반 구조
기본 버튼, 카드, 리스트 등 반복 요소는 반드시 컴포넌트로 정의해야 합니다.
컴포넌트 이름은 Btn/Primary/Large처럼 계층적 구조로 정리하면 개발자가 보기 좋습니다.
근데 이것도 소통을 위한것인데 이런 배려조차 하기 싫을때가 많습니다.
2. 디자인 토큰 활용
색상, 폰트, 여백은 전부 스타일로 연결해둬야 Dev Mode에서 제대로 표시됩니다.
직접 입력한 값은 코드로 추출되지 않거나, 중복 생성될 수 있습니다.
3. Auto Layout, Constraints 설정
디자인 요소들의 정렬, 반응형 대응을 위해 Auto Layout과 Constraints 설정을 정확히 해야 합니다.
Dev Mode에서는 이 설정값이 그대로 출력되므로, 개발자도 구현 방법을 쉽게 유추할 수 있습니다.
4. 네이밍 및 설명 구조
프레임 이름, 레이어 이름, 컴포넌트 이름을 일관성 있게 설정해야 합니다.
불필요한 “Frame 123”, “Rectangle 34” 같은 네이밍은 혼란만 키웁니다.
개발자 입장에서 Dev Mode가 좋은 이유
디자이너 입장에서는 조금 귀찮을 수 있지만,
개발자 입장에서는 Dev Mode가 정말 고마운 기능입니다.
- 여백이나 위치를 직접 계산하지 않아도 됨
- 토큰 값 기반으로 CSS 변수까지 추출 가능
- 디자인 시스템과 연동된 컴포넌트인지 바로 확인 가능
- 코드 복사 후 붙여넣기만 하면 구조 잡을 수 있음
특히 디자인 시스템 기반의 토큰 값을 Dev Mode로 확인할 수 있다는 점에서,
“디자인과 코드 간의 일관성 확보”에 큰 도움이 됩니다.
실무에서 협업을 원활하게 만드는 팁
- Dev Mode 공유 전에 프레임 하나씩 점검하기
사이즈, 스타일, 정렬이 누락되었는지 확인하고 링크 전달하는 습관이 중요합니다. - 디자인 시스템 문서와 함께 링크 전달하기
Dev Mode만 봐도 되지만, 전체 기준을 따로 설명해주면 개발자 입장에서 훨씬 명확합니다. - 버전 업데이트 시 ‘코멘트’ 기능 활용하기
수정 사항을 Dev Mode 내에서 바로 남겨주면 개발자도 트래킹하기 쉽습니다.
마무리하며
Figma Dev Mode는 협업 스트레스를 줄여주는 도구입니다.
하지만 그 기능이 온전히 작동하려면,
디자이너가 구조와 스타일을 잘 정리해둬야 효과를 볼 수 있습니다.
디자인을 넘기고 나서 피드백이 끊이지 않는 상황을 줄이고 싶다면
Dev Mode를 기준으로 다시 한번 파일 구조를 점검해보는 것이 좋습니다.
지금부터라도 “개발자가 보기 편한 디자인”을 의식하면서 작업하면,
협업 과정이 훨씬 매끄러워질 수 있습니다.
다음 글에서는 실제 Dev Mode를 활용해 디자인 시스템 기반 UI를 전달한 사례를 소개하겠습니다.
실무에 바로 적용 가능한 Dev Mode 활용법을 더 깊이 있게 다뤄보겠습니다.