디자이너가 개발자에게 '이 간격 몇 픽셀이에요?' 같은 질문을 받는 게 당연한 일이라고 생각하셨나요? 저도 한때 그랬습니다. 그런데 Figma Dev Mode를 쓰고 나서 그 질문이 거의 사라졌습니다. 핸드오프 방식을 바꾸는 것만으로 피드백 루프가 2주에서 3일로 줄었고, 하루에 서너 번씩 오던 슬랙 메시지도 뚝 끊겼습니다.
핸드오프, 문서로 하던 시절이 있었습니다
핸드오프(Handoff)란 완성된 디자인 시안을 개발자에게 넘기는 과정을 의미합니다. 스포츠에서 공을 동료에게 전달하는 행위에서 유래한 용어로, 소프트웨어 개발에서는 디자이너가 개발자에게 구현 가능한 형태의 정보를 전달하는 일 전체를 뜻합니다.
저는 프리랜서 초기에 Zeplin을 사용하면서 이 과정을 손으로 직접 했습니다. 화면마다 색상 값, 폰트 크기, 여백 정보를 캡처해서 스프레드시트에 정리한 다음 개발자에게 보내는 방식이었는데, 화면 수가 30장만 넘어가면 문서 작성에만 이틀이 꼬박 걸렸습니다. 솔직히 이건 예상 밖이었습니다. 처음엔 '한 번만 잘 만들어두면 되겠지' 싶었는데, 디자인이 수정될 때마다 문서도 같이 고쳐야 했고 그 시간이 결코 작지 않았습니다.
문제는 문서를 아무리 꼼꼼하게 만들어도 개발자 입장에서 궁금한 것은 항상 생긴다는 점이었습니다. '이 버튼 호버 상태는요?' '이 그림자 값이 정확히 뭐예요?' 이런 질문에 하나씩 답하다 보면 하루가 순식간에 지나갔습니다. 커뮤니케이션 비용(Communication Cost), 즉 팀 간 정보를 주고받는 데 드는 시간과 노력이 생각보다 훨씬 크다는 걸 그때 처음 실감했습니다.
피그마 Dev Mode가 이 구조를 바꿔놓은 방식은 단순합니다. 피그마 하단의 토글 버튼으로 Dev Mode에 진입하면 우측에 인스펙트 패널(Inspect Panel)이 나타납니다. 인스펙트 패널이란 개발자가 디자인 요소를 선택했을 때 해당 요소의 CSS 속성, 색상 값, 타이포그래피 정보, 간격 수치 등을 자동으로 보여주는 패널입니다. 개발자가 피그마 파일에 직접 접근해서 원하는 요소를 클릭하면, 디자이너가 별도로 문서를 만들지 않아도 그 값을 즉시 확인할 수 있습니다.
Dev Mode에서 개발자가 활용할 수 있는 주요 기능을 정리하면 다음과 같습니다.
- CSS, iOS Swift, Android Kotlin 등 플랫폼별 코드 스니펫 자동 생성
- HEX, RGB, HSL 등 다양한 형식의 색상 값 즉시 확인
- 폰트 패밀리, 폰트 사이즈, 라인 헤이트(Line Height), 레터 스페이싱 등 타이포그래피 정보 제공
- 요소 간 간격(Spacing) 및 패딩(Padding) 수치 자동 표시
- Tokens Studio 등 디자인 토큰 관련 플러그인 연동 지원
국내 IT 기업들 사이에서도 Figma 기반 협업 체계는 빠르게 표준으로 자리잡고 있으며, 디자인 도구 선택이 팀 생산성에 직접적인 영향을 미친다는 점은 업계에서 이미 공론화된 이슈입니다.
인스펙트 패널이 바꾼 협업의 온도
제가 직접 써봤는데, Dev Mode 도입 이후 가장 먼저 달라진 건 슬랙 알림 빈도였습니다. 하루에 서너 번씩 오던 '이 간격 몇 픽셀이에요?' 류의 질문이 거의 사라졌습니다. 개발자가 피그마에서 직접 확인하면 되니까요. 전체 질문의 약 80%가 인스펙트 패널만으로 해소되었고, 남은 20%는 인터랙션(Interaction)이나 예외 케이스처럼 실제로 대화가 필요한 사안들이었습니다. 인터랙션이란 버튼 클릭, 화면 전환, 애니메이션처럼 사용자의 행동에 따라 UI가 반응하는 방식을 의미합니다. 이런 내용은 수치로 전달되지 않기 때문에 여전히 직접 소통이 필요하지만, 그 외의 정적인 스펙은 대부분 자동화가 가능합니다.
피드백 루프(Feedback Loop)도 눈에 띄게 짧아졌습니다. 피드백 루프란 디자인 수정 사항이 개발에 반영되기까지 걸리는 순환 주기를 말합니다. 제 경험상 이 주기가 이전엔 평균 2주 가까이 걸렸는데, Dev Mode 도입 후 3일 수준으로 줄었습니다. 문서를 중간에 거치지 않고 디자이너와 개발자가 같은 피그마 파일을 보면서 이야기할 수 있게 되니, 의사소통의 오류 자체가 줄어든 덕분입니다.
한 가지 솔직하게 말씀드리면, Dev Mode가 모든 걸 해결해 주지는 않습니다. 코드 스니펫(Code Snippet), 즉 피그마가 자동 생성해 주는 CSS 코드 조각은 참고용으로는 유용하지만, 실제 프로덕션 코드에 그대로 붙여넣기엔 한계가 있습니다. 반응형 레이아웃이나 상태별 컴포넌트처럼 맥락이 필요한 부분은 여전히 디자이너의 설명이 필요합니다. 일반적으로 Dev Mode만 있으면 핸드오프가 완전히 자동화된다고 보는 시각도 있는데, 개인적으로는 도구가 커뮤니케이션을 보조하는 것이지 대체하는 건 아니라고 생각합니다.
그럼에도 불구하고 디자이너와 개발자가 같은 화면을 보며 대화할 수 있다는 것, 이 단순한 변화가 팀 내 신뢰도를 끌어올리는 데 생각보다 훨씬 큰 역할을 합니다. 제 경험상 이건 수치로 설명하기 어렵지만, 협업 분위기가 확연히 달라졌다는 걸 느꼈습니다. 디자이너가 일방적으로 '던지고' 개발자가 '받는' 구조에서, 함께 화면을 검토하는 구조로 바뀐 것이 핵심이었습니다. 실제로 Figma의 자체 리포트에 따르면 Dev Mode를 사용하는 팀은 디자인-개발 간 반복 커뮤니케이션이 유의미하게 감소하는 경향이 있다고 보고된 바 있습니다.
Dev Mode를 아직 도입하지 않으셨다면, 일단 다음 프로젝트에서 한 화면만 개발자와 함께 인스펙트 패널로 확인해 보시길 권합니다. 직접 써보면 왜 이게 지금 디자인 협업의 기본값이 됐는지 바로 체감하실 수 있습니다. 문서 작성에 쓰던 이틀이 디자인에 쓰인다면, 결과물의 질이 달라질 수밖에 없습니다.