Design
피그마 Dev Mode, 한 번에 끝내기
여기어때 UX Center여기어때
2024년 5월 22일
원문에서 보기 ↗글. 이자인(Lilly) / UX Designer
부제. 개발자를 위한 Dev Mode 안내 지침서
안녕하세요. 저는 여기어때 파트너센터 UX를 리드하고 있어요. 얼마 전부터 Design Ops* 3기의 팀원으로도 활동하고 있는데요. 최근 Design Ops팀에서 Figma Dev Mode를 활용하여 디자이너들이 디자인 스펙을 작성하는데 드는 시간은 줄이고, 개발자들의 업무 효율은 높이는 작업 환경을 함께 세팅하고 있습니다.
개발자분들 대상으로 기존 디자인 스펙에 대한 만족도와 함께 어떤 스펙들을 중요하게 보고 있는지 실무자 대상 서베이를 진행했었어요. 서베이 결과를 바탕으로 개발자들분들께서 중요하게 보고 있는 스펙들을 Dev Mode를 통해 활용할 수 있는 방법들을 정리해 나갔는데요. 디자이너들 입장에서도 Dev Mode사용을 권장한다면, 디자인 스펙을 작성하는데 소요되는 많은 시간들을 줄이고, 개발자분들도 좀 더 정확한 스펙들을 빠르게 확인하여 QA 단계에서 불필요한 커뮤니케이션을 최소화할 수 있을 것이라 확신했습니다.
그렇게 탄생한 개발자를 위한 Dev Mode 안내 지침서를 공유하려 하는데요. Dev Mode 기능 도입으로 더 높은 협업 퍼포먼스를 고민하고 계신 분이 있다면 이번 글이 작게나마 도움이 되었음 합니다.
*Design Ops: 여기어때 디자이너들의 작업 능률을 높이고, 업무 환경 개선을 하기 위한 목적으로
모인 TF입니다.
Dev Mode 그게 뭔가요? 어떻게 볼 수 있는 걸까요?
Dev Mode는 크롬 브라우저의 개발자 모드처럼 디자인 파일의 설계를 검사할 수 있는 기능입니다. 디자인 개체에 마우스 포인터를 가져가 클릭하면 치수, 사양, 스타일 등의 세부 정보를 확인할 수 있어요. 우측 상단 Share(공유하기) 버튼 옆에 위치한 [</>] 토클을 켜면 Dev Mode로 전환되는데요. 그럼, 파일명 옆에 Dev Mode로 전환되었다는 상태값이 뜨게 돼요.
좌) 데브모드 OFF, 우) 데브모드 ON
Layout & Spacing 정확하게 확인해주세요
개발자 모드를 켠 후에는 그림 1과 같이 Inspect가 기본인 상태로 전환되는데요. 디자인 개체에 마우스 포인터를 가져다 대거나 클릭하면 상세 레이아웃과 스페이싱을 볼 수 있어요. Dev Mode로 개편되면서 스페이싱 잡는 부분이 이전보다 훨씬 좋아졌어요. 이제Hover만 하면 프레임명까지 같이 나온답니다.
그림 1. 기본 Inspect 모드 (왼쪽 상단 마우스 아이콘 참고)
💡 디자이너분들 주목
Dev Mode에서는 Frame명까지 세세하게 나오고 있다보니 앞으로는 신경써서 디자인해주면 좋을 것 같아요. Frame명을 잡는다면, 어떤 컴포넌트들을 묶었는지 명칭으로 알려준다면 개발자 분들 혹은 협업하는 디자이너 분들께서도 좀 더 직관적으로 컴포넌트 및 페이지 구조를 파악할 수 있겠죠? 저희는 아래와 같이 Frame명을 약속하기로 했어요.
Design Ops팀이 정한 Frame명
💡 개발자분들 주목
❶ 확인하고 싶은 간격만 보고 싶어요
디자인 개체를 클릭 후 Option을 누른 상태에서 다른 개체를 마우스 호버하면 내가 확인하고픈 간격을 바로바로 볼 수 있어요.
다만, 디자이너가 의도한 간격과는 다르게 개발할 위험성이 높아요. 마우스 호버하여 사용하는 것은 정말 빠르게 확인하고 싶을 때만 사용하고 최대한 지양해주세요.
❷ Hover 시 사라지는 간격들이 답답해요
아래 이미지와 같이 왼쪽 상단 줄자 아이콘 (Measure)을 눌러 원하는 개체들 간의 사이 간격을 드래그 해보세요. 사이 간격 값이 계속 노출돼요. 이건 Dev Mode를 사용하는 모든 팀원들과도 같이 볼 수 있어요! 해당 간격 값을 지우고 싶을 땐, Delete 한번이면 끝!
다만, 해당 기능에서는 간격이 수치로만 나오기 때문에 이 부분은 디자이너가 의도한 바와 달리 디자인될 가능성이 높아요. 이 부분도 디자이너들과 어떨 때, 어떻게 쓸지 함께 협의한 후에 사용해보면 좋을 것 같아요.
시스템 심볼과 로컬 심볼 구분하는 방법
디자인 시스템 컴포넌트일 땐 그림 2–1과 같이, 페이지 내에서 만든 로컬 심볼인 땐 2–2와 같이 나와요. 해당 심볼을 누르면 원본 심볼 혹은 디자인 시스템 파일로 이동해요. 거기서 확인하는 디자인 스펙이 가장 정확하니 개발자 분들께서는 이동해 확인해보세요!
그림 2–1. 디자인 시스템 컴포넌트
그림 2–2. 페이지 내에서 만든 로컬 심볼
만약 로컬 심볼이 눌리지 않나요?
심볼이 유실되었을 경우에는 disabled되어 버튼이 눌리지 않는데요. 이럴 경우에는 디자이너에게 문의해주세요!
Properties는 Open in playground에서 확인하기
Open in playground 버튼(그림 3–1 참고)을 누르면 여러 Properties 케이스(그림 3–2 참고)를 확인할 수 있어요. 추후 개발자분들이 텍스트 수정까지 해볼 수 있게끔 제공한다고 하는데 현재 시점에서는 구현되고 있지 않아요.
그림 3–1. Open in playground
그림 3–2. Open in playground > properties 확인 가능
모든 케이스를 한 눈에 볼 수 없고 Dropselect로 발라가면서 봐야하기 때문에 사실 불편한 점이 엿보이는데요. 신기능이다 보니 좀 더 두고봐야할 것 같아요. 하지만 해당 기능을 알고 있다면 추후에 피그마가 업데이트되더라도 신기능들을 빠르게 쫓아갈 수 있을 것 같아요.
피그마와 작업창을 번갈아서 보기 불편하다면?
Dev Mode에서는 Visual Studio Code에서는 피그마 패널까지 함께 뜨도록 제공하고 있는데요. Visual Studio Code를 쓰고 있는 개발자분들께서는 한번 써볼 수 있지 않을까 싶은데요.
개발에 사용된 언어에 맞게 세팅해서 볼 수 있어요
- 웹: CSS
- iOS 개발: SwiftUI / UIKit
- Android 개발: Compose / XML
번거로움 줄여주는 Export 기능
에셋 디자이너분들에게 요청하거나 매번 약속한 클라우드(ex.구글 드라이브)에서 다운받기 귀찮으셨죠? 아래와 같이 세팅하여 피그마에서 빠르게 다운받아 보세요.
- 다운받을 이미지/아이콘 선택
- Inspect > Export 플러스 버튼을 누르면, 다양한 세팅값 추가 가능
- PNG, JPG, SVG, PDF 등으로 원하는 확장자로 추출하기
원하는 확장자 선택 가능
마무리
Dev Mode는 디자인 개체의 치수, 사양, 스타일 등의 세부 정보를 쉽게 확인할 수 있어, 디자이너가 의도한 디자인 스펙을 개발자가 정확하게 이해를 돕는 협업의 툴로서 자리매김하지 않을까 싶어요. 이를 통해 불필요한 커뮤니케이션을 줄이고, 디자인과 실제 구현 사이의 불일치를 최소화할 수 있을 것 같아요. 그 결과, 디자인 QA와 같은 디자이너와 개발자 간의 비효율적인 리소스를 줄이는 데 큰 기여할 수 있지 않을까 싶습니다.
✔️ 글쓴이를 더 알고 싶다면?: 링크드인
구성 및 편집: 이소연(Jetty) UX Writer
그래픽: 김제린(Riny) Visual Interaction Designer
*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.
추천 글