오토레이아웃 보관 - Bonnie’s Garage

디자인 파일을 넘기면, 개발자에게서 이런 말 한 번쯤 들어보셨을 겁니다.
“이거 여백 기준이 뭐죠?”
“폰트 사이즈가 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 활용법을 더 깊이 있게 다뤄보겠습니다.

Figma를 사용하다 보면 Auto Layout은 잘알면 편하지만 사용법이 조금은 애매하죠?

처음에는 버튼이나 카드처럼 단순한 컴포넌트를 정렬할 때 유용하게 느껴지지만,
조금만 구조가 복잡해지면 정렬이 무너지고 간격이 뒤죽박죽되는 경우를 자주 겪게 돼요.
특히 모바일이나 반응형 UI를 설계할 때는 작은 오차가 전체 레이아웃에 영향을 주기 때문에
Auto Layout을 정확하게 이해하면서 사용해야 합니다.

이번 글에서는 Auto Layout이 꼬이지 않도록 설정하는 핵심 원리와 정렬이 정확해지는 설정법을 단계별로 정리해보겠습니다.

Auto Layout의 기본 구조, 다시 정확히 이해해야 합니다

Auto Layout은 프레임 내부에 있는 객체들의 방향, 정렬, 간격, 여백 등을 자동으로 관리해주는 기능입니다.
정렬을 정확하게 유지하려면 먼저 이 네 가지 요소를 기준으로 구조를 설계해야 합니다.

Direction (방향)
- 수평(Horizontal) 또는 수직(Vertical) 중 하나를 선택
- 내부 요소의 배치 방향이 명확하지 않으면 정렬이 흐트러집니다.
Spacing (간격)
- 자식 요소 간 간격을 지정하는 값
- 요소를 추가하거나 제거해도 자동 간격을 유지할 수 있습니다.
Padding (여백)
- 프레임 바깥쪽 테두리와 콘텐츠 사이의 간격을 의미
- 상하좌우를 개별로 조정할 수 있으며, 이 값이 올바르지 않으면 정렬이 어색해집니다.
Alignment (정렬 기준점)
- 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 등 기준점을 설정
- 내부 요소가 다를 경우 기준점 설정이 핵심이 됩니다.

실제로 많이 헷갈리는 설정 실수 TOP 3

1. Resize 속성을 제대로 설정하지 않음

Auto Layout 내 요소들은 기본적으로 Hug contents로 설정되는데요.
이럴 경우, 텍스트나 이미지의 크기가 커지면 전체 프레임이 함께 튀어버릴 수 있습니다.
반대로 Fill container로 설정하면 부모 프레임의 폭에 맞춰 늘어나기 때문에
정해진 구조에서 안정적으로 작동합니다.

팁: 텍스트가 들어간 버튼은 내부 텍스트는 Hug, 버튼 배경은 Fill로 설정하는 것이 가장 자연스럽습니다.

2. 간격(Spacing)이 아니라 Margin을 조정하려는 실수

컴포넌트 간의 간격을 조정할 때, 종종 외부 여백을 따로 지정하려는 경우가 있습니다.
하지만 Auto Layout 구조 안에서는 margin 개념이 없고 spacing 값으로 전체를 조정해야 하기 때문에
하나의 요소만 튀어나오는 문제가 생깁니다.
이럴 때는 Dummy Spacer(빈 프레임)를 삽입해서 공간을 제어하는 방식이 더 안정적입니다.

3. Nest된 구조에서 정렬 충돌

Auto Layout을 중첩해서 사용할 때 자식 프레임과 부모 프레임의 방향이 다르면
정렬이 꼬이거나 의도하지 않은 위치로 밀리는 현상이 생깁니다.
이럴 땐 각각의 레벨에서 direction과 alignment 설정을 정확히 확인해야 합니다.

정렬이 정확해지는 실전 설정 팁

여기서 진짜 중요한 팁이니 이 부분을 반드시 이해하고 사용해주세요.

레이어 순서를 항상 왼쪽 → 오른쪽 / 위 → 아래로 맞춰주세요
정렬 기준은 레이어 순서와 일치하기 때문에 드래그 순서가 중요합니다.
Spacing between items와 Padding은 명확히 구분해 주세요
내부 아이템 간 간격과 외곽 여백은 개념적으로 완전히 다릅니다.
Fill vs Hug vs Fixed의 차이를 이해하세요
Fill은 부모를 기준으로 크기를 맞추고, Hug는 콘텐츠 기준, Fixed는 고정입니다.
컴포넌트가 작동 방식에 따라 다르게 설정되어야 합니다.
Smart selection은 정렬 구조를 망가뜨릴 수 있습니다
여러 개의 요소를 선택하고 간격 조정할 때, Auto Layout 설정이 덮여버리는 경우가 생기기 때문에
반드시 전체 구조를 파악한 뒤 조작하는 것이 좋습니다.

마무리

Auto Layout은 단순한 정렬 도구가 아니라,
디자인 시스템을 구성하고 반응형 UI를 설계할 때 핵심이 되는 구조 설계 도구입니다.
하지만 이 기능은 잘못 쓰면 오히려 시간을 더 낭비하게 만드는 원인이 되기도 합니다.

이번 글에서 정리한 원칙과 설정 방법을 바탕으로,
Auto Layout을 더욱 정밀하게 사용해보시기 바랍니다.
꼬이지 않는 Auto Layout을 만드는 가장 좋은 방법은
처음부터 방향, 크기, 여백, 정렬을 기준으로 구조를 짜는 것이라는 점, 꼭 기억해 두세요.

다음 글에서는 실제 디자인 시스템 구축에서 Auto Layout이 어떤 방식으로 쓰이는지
실전 사례 중심으로 소개해보겠습니다.

Figma Dev Mode로 개발자와 싸우지 않는 방법 – 협업 스트레스 줄이기