Dev Mode: Design-to-Development | Figma
https://cdn.sanity.io/files/599r6htc/localized/6442cd54f29583facd35ba015239e98e5a5e5162.mp4
지난 2023년 6월, 🔗Figma에 Dev Mode가 추가되었습니다. 감사하게도 팀의 디자이너분께서 빠르게 Dev Mode와 호환 작업을 진행해주셨고, Dev Mode를 사용해볼 수 있었습니다. 1개월 조금 넘는 기간 동안 Dev Mode를 사용해보면서 좋았던 점과 아쉬웠던 점을 정리해보았습니다.
지난 2년 간 개발자로서 피그마를 사용하면서 가장 답답했던 사용성 이슈가 이번 Dev Mode에서 해결되었습니다. 기존 피그마에서는 선택 모드와 화면 이동 모드를 구분했고, 사용자는 버튼을 클릭하여 모드를 변경해주어야 했습니다.
화면을 이동하며 빠르게 요소를 선택해 속성을 확인해야 하는 개발자에게는 여간 신경쓰이는 부분이 아닐 수 없었는데요, 이번에 두 모드가 하나의 방식으로 통합되었습니다. 이제는 쉽고 빠르게 화면을 이동하며 컴포넌트를 선택할 수 있게 되었습니다. 😭
뿐만 아니라 클릭을 중첩하여 하위 요소를 선택하는 것도 가능해졌습니다. 컴포넌트가 중첩되어 있는 경우 좌측의 설계 패널에서 컴포넌트 트리를 확인해야 하는 것이 불편했었는데요, 이번 Dev Mode에서 이러한 불편함도 해결해주었습니다.
이처럼 피그마는 이번 Dev Mode에서 다양한 작업을 마우스 동작 하나만으로 가능하도록 사용 규칙을 변경하였습니다. 아주 영리한 개선이었다는 생각이 듭니다. 사용자의 멘탈 모델을 화면에 한정시킴으로써 사용자의 몰입을 해치지 않았기 때문이죠. 각 작업들과 대응되는 마우스 동작도 꽤나 직관적이라서 쉽게 적응할 수 있었습니다.