DAY 04 ㅣ 피그마 기초 / 디자인 가이드

📌 피그마(Figma) 오토 레이아웃(Auto Layout) 학습 가이드

🔹 1. 오토 레이아웃(Auto Layout) 개념

✅ 오토 레이아웃이란?

• 요소(텍스트, 버튼, 카드, 리스트 등)를 자동 정렬하고 크기를 동적으로 조정하는 기능
• UI 컴포넌트가 유연하게 변화하도록 만들어 반응형 디자인을 쉽게 적용할 수 있음

✅ 오토 레이아웃 적용 방법

1. 텍스트, 프레임, 버튼 등 선택
2. Shift + A → 오토 레이아웃 적용
3. 방향(세로 ↕, 가로 ↔), 간격(Spacing), 패딩(Padding), 정렬(Alignment) 설정
4. 크기 조절 옵션 선택:
   • Hug Contents → 내부 콘텐츠 크기에 맞게 자동 조정
   • Fill Container → 부모 요소 크기에 맞춰 확장
   • Fixed Width → 고정 크기 설정

---

🔹 2. 오토 레이아웃 활용 예제

🔸 예제 1: 반응형 버튼 만들기

📌 텍스트 길이에 따라 자동 크기 조정되는 버튼

1. T를 눌러 텍스트 입력 (예: 확인)
2. Shift + A → 오토 레이아웃 적용
3. 패딩 설정: 좌우 16px, 상하 10px
4. Hug Contents 선택 (텍스트 길이에 맞춰 크기 변경)
5. 배경색 추가, 모서리 둥글게(8px) 적용

---

🔸 예제 2: 카드(Card) UI 만들기

📌 제목 + 설명 + 버튼이 포함된 카드 UI

1. F를 눌러 프레임 생성 (200x250)
2. 제목(T), 설명(T), 버튼 추가 후 Shift + A
3. 내부 요소 정렬 → 수직(Vertical)
4. 내부 간격(Spacing) 8px, 패딩 16px 설정
5. 배경색 추가(#F5F5F5), 모서리 둥글게(12px) 적용

---

🔸 예제 3: 반응형 네비게이션 바(Navbar)

📌 화면 크기에 맞게 자동 조정되는 네비게이션 바

1. F → 가로형 프레임 생성 (1440x80px)
2. 내부 요소 추가: 로고(T), 메뉴(T), 로그인 버튼
3. Shift + A → 오토 레이아웃 적용 (수평 정렬)
4. Auto Spacing 사용 → 간격 자동 조정
5. 버튼에도 오토 레이아웃 적용
6. Fill 설정 → 부모 프레임 크기에 맞게 자동 조정

---

🔹 3. 수정하기 쉬운 레이아웃 관리 팁

🔹 (1) 오토 레이아웃 + 네이밍 규칙 사용

✅ 레이어 정리 필수! (Navbar, Card, Button 등 직관적인 이름 부여)
✅ 그룹이 많아질 경우 Frame 안에 Frame을 추가하여 구조를 정리

 

예시)

📂 Navbar
├── 📂 Left (로고)
├── 📂 Center (메뉴)
├── 📂 Right (로그인 버튼)

 

---

🔹 (2) 컴포넌트(Component)로 변환

✅ 반복적으로 사용하는 UI 요소는 Ctrl + Alt + K로 컴포넌트화
✅ Variants(변형) 기능을 사용하여 다양한 스타일의 버튼/카드 관리 가능

---

🔹 (3) 반응형을 고려한 크기 설정

✅ Hug Contents → 내용 크기에 맞게 자동 조정
✅ Fill Container → 부모 프레임 크기에 맞게 자동 확장
✅ Auto Layout + Constraints 활용 → 화면 크기에 따라 자동 조정

---

🔹 (4) 간격(Spacing)과 정렬(Alignment) 활용

✅ 내부 요소 간격(Spacing) 유지 → 8px, 16px 같은 규칙 사용
✅ Alignment(정렬) 조정 → 왼쪽 정렬, 가운데 정렬 등을 활용하여 깔끔한 UI 구현

---

📌 4. 실습 체크리스트

✅ Shift + A로 오토 레이아웃 적용해보기
✅ 버튼 만들기 → 크기 자동 조정 설정
✅ 카드 UI 만들기 → 패딩, 간격 조절 실습
✅ 네비게이션 바 제작 → Auto Spacing 활용
✅ 컴포넌트로 변환 후 Variants(변형) 설정

---

📌 오토 레이아웃 유지보수가 어려운 경우 및 해결 방법

🔹 1. 유지보수가 어려운 경우 & 해결 방법

⚠️ 문제 1: 오토 레이아웃 중첩이 과도할 때

💡 문제 상황

• 여러 개의 오토 레이아웃을 중첩하면 구조가 복잡해져 수정이 어려움
• 필요 없는 프레임이 많아지면 수정 시 위치 조정, 크기 변경이 번거로움

✅ 해결 방법
✔ 레이어 구조 정리: 불필요한 중첩된 프레임 제거
✔ 주요 그룹화 기준 정하기: Frame > Section으로 깔끔하게 정리
✔ 컴포넌트화(Component) 사용: 중복되는 요소를 컴포넌트로 변환하여 일관성 유지

---

⚠️ 문제 2: Spacing 값이 일정하지 않을 때

💡 문제 상황

• 같은 UI 구성 요소 간 간격(Spacing)이 일관되지 않으면 디자인이 어색함
• 디자인 가이드 없이 각각 다르게 설정하면 수정 시 불편

✅ 해결 방법
✔ 일관된 Spacing 값 사용: 8px, 16px 같은 기준을 정해 적용
✔ Auto Spacing 활용: Auto 옵션을 사용하여 요소가 자동 정렬되도록 설정

---

⚠️ 문제 3: Fixed, Hug, Fill 설정이 적절하지 않을 때

💡 문제 상황

• 텍스트가 늘어나거나 줄어들 때 버튼이나 카드 크기가 의도치 않게 변형
• Fixed Width로 설정하면 반응형이 어려움
• 반대로 Hug Contents를 잘못 사용하면 크기가 의도대로 조정되지 않음

✅ 해결 방법
✔ 버튼 및 카드 크기 설정 원칙

• 버튼: Hug Contents (내용 크기에 맞게)
• 카드: Fill Container (부모 프레임에 맞게)
  ✔ 반응형이 필요하면 Fill을 적극 활용
  ✔ Fixed Width를 최소화하고 Hug/Fill로 조정 가능하게 설정

---

⚠️ 문제 4: 정렬(Alignment)이 일관되지 않을 때

💡 문제 상황

• 같은 UI 내에서 일부 요소가 왼쪽 정렬, 일부는 가운데 정렬로 섞여 있음
• 수정할 때 요소가 제멋대로 움직이며, 재정렬이 필요함

✅ 해결 방법
✔ 정렬 기준을 정하기:

• 버튼/텍스트는 Left 또는 Center로 일관되게 유지
• 네비게이션 바는 Space Between을 사용해 균등 배치
  ✔ 오토 레이아웃의 정렬 옵션 활용
• Alignment를 사용해 요소가 동일한 위치에 배치되도록 조정

---

⚠️ 문제 5: Variants 없이 개별 요소를 수정할 때

💡 문제 상황

• 여러 개의 버튼 스타일을 개별적으로 수정해야 할 경우 일괄 수정이 불가능
• 버튼이 많아지면 디자인 관리가 어려워짐

✅ 해결 방법
✔ Variants 활용 (Ctrl + Alt + K → Variants 생성)
✔ 여러 개의 버튼 스타일을 하나의 컴포넌트에서 관리
✔ Property를 사용하여 색상, 크기, 상태(활성/비활성) 조절 가능

---

📌 유지보수를 쉽게 하는 체크리스트

✅ 불필요한 중첩된 오토 레이아웃을 정리했는가?
✅ Spacing(간격)을 일정한 규칙으로 유지했는가?
✅ Fixed/Hug/Fill 설정을 적절히 활용했는가?
✅ Alignment(정렬)를 일관되게 적용했는가?
✅ Variants를 활용하여 반복되는 요소를 쉽게 관리했는가?

 

 

Material 3 Design Kit:

https://www.figma.com/community/file/1035203688168086460