Figma Auto Layout 안 쓰면 생기는 참사들 – 개발자가 울고 가는 디자인 파일의 비밀
솔직히 고백할게요. 저도 예전에 Figma에서 Auto Layout 없이 디자인한 적이 꽤 있었어요. 프레임 안에 요소를 드래그해서 눈대중으로 배치하고, 간격은 화살표 키로 1px씩 맞추고… 화면에서 보기엔 완벽했거든요. 😅
그런데 그 파일을 넘겨받은 개발자분이 조용히 슬랙으로 보내온 메시지가 아직도 생생해요. "이거… 간격이 위에서는 12px인데 아래에서는 13px이고, 이 버튼은 텍스트가 길어지면 어떻게 되는 건가요?" 그때부터 Auto Layout을 제대로 공부하기 시작했어요.
고정 좌표 배치 vs Auto Layout, 뭐가 다른 건가요? 🤔
가장 근본적인 차이부터 짚어볼게요. Figma에서 요소를 배치하는 방식은 크게 두 가지예요.
| 구분 | 고정 좌표 배치 | Auto Layout |
|---|---|---|
| 배치 방식 | X, Y 좌표로 절대 위치 지정 | 방향·간격·패딩 규칙으로 자동 배치 |
| 내용 변경 시 | 다른 요소 수동으로 재배치 필요 | 자동으로 리플로우 |
| 반응형 대응 | 해상도별 별도 프레임 필요 | Hug/Fill로 유연하게 대응 |
| CSS 대응 | position: absolute (비권장) | Flexbox / Grid (표준) |
| 개발 전달 시 | 의도 해석에 추측 필요 | 구조와 규칙이 명시적 |
뭐랄까, 고정 좌표 배치는 "이 요소는 여기 있어"라고 결과만 알려주는 거고, Auto Layout은 "이 요소는 이런 규칙으로 여기에 위치해"라고 의도를 설명해주는 거예요. 개발자 입장에서는 이 차이가 정말 크거든요.
Auto Layout 없는 디자인, 개발자가 겪는 고통들 😫
제가 디자이너-개발자 협업 과정에서 실제로 목격하고, 직접 겪기도 했던 참사들이에요. 읽으면서 혹시 뜨끔하는 부분이 있다면… 저도 그랬으니까 괜찮아요. 😂
참사 1: "이 간격이 12px인가요, 13px인가요?"
고정 좌표로 배치하면 요소 사이 간격이 미세하게 들쭉날쭉해지기 쉬워요. 디자이너 눈에는 똑같아 보여도, 개발자가 Inspect 패널을 열면 12px, 13px, 11px이 섞여 있는 거죠. 개발자는 이걸 "의도된 차이인가, 실수인가" 매번 확인해야 해요.
참사 2: "텍스트가 길어지면 어떻게 되나요?"
버튼 안에 "확인"이라는 2글자만 넣어놓고 고정 크기로 디자인하면, 다국어 지원이나 긴 텍스트("변경사항을 저장하시겠습니까?")가 들어왔을 때 어떻게 되는지 아무런 힌트가 없어요. Auto Layout이라면 Hug Contents로 텍스트에 맞춰 늘어나는 규칙이 명확하게 보이거든요.
참사 3: "리스트 아이템이 3개일 때만 예쁜 디자인"
카드가 딱 3개 들어간 레이아웃을 고정으로 찍어놓으면, 데이터가 1개이거나 10개일 때의 모습은 아무도 모르는 상태가 돼요. Auto Layout이 적용되어 있으면 아이템이 몇 개든 일정한 규칙으로 쌓이는 구조가 눈에 보이기 때문에, 개발자가 추측할 필요가 없어요.
참사 4: "모바일이랑 데스크톱이 완전 다른 파일"
고정 좌표 디자인은 해상도가 달라지면 처음부터 다시 배치해야 해요. 결국 모바일용, 태블릿용, 데스크톱용 프레임을 각각 만들게 되는데, 세 버전 사이의 간격·패딩 규칙이 미묘하게 달라지면 개발자는 "어느 게 맞는 건가요?"를 반복하게 돼요.
이 참사들의 공통점이 있어요. 디자인 파일만 보면 전혀 문제가 없다는 거예요. 문제는 항상 "구현 단계"에서 터지기 때문에, 디자이너가 인지하기 어렵다는 점이 가장 무서운 부분이에요.
Auto Layout ↔ CSS Flexbox/Grid 대응 관계 🔄
Auto Layout을 제대로 이해하려면 CSS의 Flexbox와 어떻게 대응되는지 알면 정말 도움이 돼요. 사실 Auto Layout은 Flexbox를 시각적으로 구현한 것에 가깝거든요.
| Figma Auto Layout | CSS Flexbox/Grid | 설명 |
|---|---|---|
| 방향 (Vertical/Horizontal) | flex-direction: column/row | 자식 요소가 쌓이는 방향 |
| Gap (항목 간 간격) | gap: 12px | 자식 요소 사이의 균일한 간격 |
| Padding (상하좌우) | padding: 16px 24px | 컨테이너 내부 여백 |
| Hug Contents | width: fit-content | 내용물 크기에 맞게 축소 |
| Fill Container | flex: 1 또는 width: 100% | 부모 너비만큼 확장 |
| 정렬 (Top-Left 등) | align-items / justify-content | 주축/교차축 정렬 |
| Space Between | justify-content: space-between | 양 끝 정렬, 균등 배분 |
| Wrap | flex-wrap: wrap | 넘치면 다음 줄로 이동 |
이 대응 관계를 알고 있으면 디자이너와 개발자가 같은 언어로 대화할 수 있어요. "이 섹션은 Vertical Auto Layout에 Gap 16, 패딩 상하 24"라고 하면 개발자는 바로 flex-direction: column; gap: 16px; padding: 24px 0;으로 변환할 수 있거든요.
Before/After로 보는 실전 예시 📸
글로만 읽으면 감이 잘 안 올 수 있으니, 실제로 자주 마주치는 세 가지 상황을 Before/After로 비교해볼게요.
예시 1: 버튼 컴포넌트 📝
❌ Before (고정 크기)
- 버튼 너비 120px 고정, 높이 40px 고정
- 텍스트 "확인"에만 맞춰진 사이즈
- → "변경사항 저장" 텍스트가 들어오면 잘리거나 넘침
✅ After (Auto Layout)
- Horizontal Auto Layout, 패딩 좌우 24px·상하 12px
- 너비 Hug Contents → 텍스트 길이에 따라 자동 확장
- → CSS: padding: 12px 24px; width: fit-content;
예시 2: 카드 리스트 레이아웃 📝
❌ Before (고정 좌표)
- 카드 3개를 각각 X: 0, X: 340, X: 680에 배치
- 화면 크기가 달라지면 카드가 잘리거나 빈 공간 발생
- → 개발자가 임의로 반응형 로직 추가해야 함
✅ After (Auto Layout + Wrap)
- Horizontal Auto Layout, Gap 20px, Wrap 활성화
- 카드 너비 Fill Container → 부모 너비에 따라 2열/3열 자동 전환
- → CSS: display: flex; flex-wrap: wrap; gap: 20px;
예시 3: 네비게이션 바 📝
❌ Before (고정 좌표)
- 로고 X: 24, 메뉴 X: 200, 버튼 X: 680
- 화면 너비가 바뀌면 버튼이 화면 밖으로 사라짐
- → 개발자: "로고랑 버튼 사이 공간은 고정인가요, 유동인가요?"
✅ After (Auto Layout + Space Between)
- Horizontal Auto Layout, 정렬 Space Between
- 로고 그룹 Hug, 중간 메뉴 Hug, 버튼 그룹 Hug
- → CSS: display: flex; justify-content: space-between; align-items: center;
지금 바로 적용하는 Auto Layout 체크리스트 ✅
Auto Layout을 처음 도입하거나, 기존 파일을 정리할 때 이 체크리스트를 따라가보세요.
- 가장 작은 단위부터 시작하세요 — 버튼, 인풋 필드, 뱃지 같은 원자 컴포넌트에 먼저 Auto Layout을 적용하고, 점차 카드 → 섹션 → 페이지로 확장해요.
- 고정 크기를 의심하세요 — 너비나 높이에 숫자가 박혀 있다면 "이걸 Hug나 Fill로 바꿀 수 없을까?" 한 번 더 생각해봐요.
- 8의 배수 규칙을 지키세요 — 패딩·간격·크기를 4px 또는 8px 단위로 통일하면 "12인지 13인지" 논쟁이 사라져요.
- 프레임 리사이즈로 테스트하세요 — Auto Layout 적용 후 프레임 너비를 줄였다 늘렸다 해보세요. 깨지는 부분이 곧 개발 단계에서 터질 부분이에요.
- 네이밍에 구조를 담으세요 — "Row / header-nav", "Col / card-body"처럼 방향과 역할을 레이어 이름에 넣으면 개발자가 바로 이해할 수 있어요.
Figma의 Dev Mode에서는 Auto Layout이 적용된 프레임을 CSS Flexbox 코드로 자동 변환해줘요. 즉, Auto Layout을 잘 쓰면 디자이너가 사실상 레이아웃 구조 설계까지 한 번에 전달하는 셈이에요.
마무리: 핵심 내용 요약 📝
Auto Layout은 단순히 Figma의 편의 기능이 아니에요. 디자이너의 의도를 개발자에게 정확히 전달하는 커뮤니케이션 도구예요.
- 고정 좌표 = 결과만 전달: 개발자가 의도를 추측해야 하고, 반응형 대응이 불가능해요.
- Auto Layout = 규칙을 전달: 방향, 간격, 패딩, 확장 방식이 명시되어 CSS로 바로 변환 가능해요.
- CSS Flexbox와 1:1 대응: Auto Layout의 개념을 알면 개발자와 같은 언어로 소통할 수 있어요.
- 작은 컴포넌트부터 시작: 버튼 하나에 Auto Layout을 적용하는 것부터 시작하면 부담이 없어요.
처음엔 Auto Layout이 오히려 번거롭게 느껴질 수 있는데, 한 번 익숙해지면 고정 좌표로 돌아가기가 더 어려워져요. 진짜예요. 혹시 Auto Layout 적용하면서 겪은 에피소드가 있다면 댓글로 나눠주세요~ 😊