DAY 03 ㅣ 피그마 기초 / MECE / CRUD

📌 Figma 기본 툴 & 단축키 정리

1. 선택 (Move Tool)

• 단축키: V
• 용도: 개체를 선택하고 이동하는 기본 도구.

2. 프레임 (Frame Tool)

• 단축키: F
• 용도: 새로운 프레임(아트보드)을 만들거나 프레임 내 요소를 정리할 때 사용.
  • 웹, 모바일, 태블릿 등 다양한 디바이스 프레임을 제공.

3. 도형 (Shape Tools)

• 단축키: R (Rectangle), O (Ellipse), L (Line)
• 용도: 다양한 기본 도형을 생성할 때 사용.
  • 직사각형 (R), 원형 (O), 선 (L), 다각형, 별, 화살표 등.

4. 펜 (Pen Tool)

• 단축키: P
• 용도: 벡터 기반으로 자유로운 선이나 커브를 그릴 때 사용.
  • Shift를 누르면 직선 또는 45도 각도로 조절 가능.

5. 텍스트 (Text Tool)

• 단축키: T
• 용도: 텍스트를 입력할 때 사용.
  • 자동 줄바꿈: 텍스트를 드래그하여 영역을 정하면 자동 줄바꿈 적용.

6. 손 (Hand Tool)

• 단축키: H
• 용도: 캔버스를 드래그하여 이동할 때 사용.
  • Spacebar를 누른 상태에서 마우스를 움직이면 동일한 기능.

7. 확대/축소 (Zoom Tool)

• 단축키: Z
• 용도: 캔버스를 확대/축소할 때 사용.
  • Ctrl(Cmd) + 마우스 휠로도 조정 가능.

8. 컴포넌트 만들기

• 단축키: Ctrl (Cmd) + Alt + K
• 용도: 선택한 요소를 재사용 가능한 컴포넌트로 변환.

9. 오토 레이아웃 (Auto Layout)

• 단축키: Shift + A
• 용도: 버튼, 카드, 리스트 등 요소를 자동으로 정렬 및 크기 조정할 때 사용.

10. 그룹/그룹 해제

• 단축키:
  • 그룹: Ctrl (Cmd) + G
  • 그룹 해제: Ctrl (Cmd) + Shift + G
• 용도: 여러 개의 요소를 묶어서 정리할 때 사용.

11. 정렬 & 분배 (Align & Distribute)

• 단축키: Shift + A (오토 레이아웃 사용 시 자동 정렬)
• 용도: 선택한 요소들을 정렬하거나 일정한 간격으로 배치.

12. 복제 (Duplicate)

• 단축키: Ctrl (Cmd) + D
• 용도: 선택한 요소를 빠르게 복제.

13. 레이어 잠금/잠금 해제

• 단축키: Ctrl (Cmd) + Shift + L
• 용도: 요소를 실수로 편집하지 않도록 잠금.

14. 컴포넌트 인스턴스 변경

• 단축키: Ctrl (Cmd) + Shift + B
• 용도: 컴포넌트 인스턴스를 마스터 컴포넌트와 연결 해제.

15. 스마트 선택 (Smart Selection)

• 단축키: Shift + 방향키
• 용도: 여러 개의 요소 간 간격을 일정하게 조정.

16. 바로 이전 작업 실행 취소

• 단축키: Ctrl (Cmd) + Z
• 용도: 이전 작업을 취소.

17. 바로 이전 실행 취소한 작업 복구

• 단축키: Ctrl (Cmd) + Shift + Z
• 용도: 실행 취소한 작업을 다시 복구.

 

🔹 추가 기능

🔸 프로토타이핑 (Prototype Mode)

• 용도: 화면 간 인터랙션(전환 애니메이션)을 설정할 때 사용.
• 프로토타입 연결: 개체를 선택하고 + 버튼을 이용해 연결.

🔸 플러그인 사용

• 단축키: Ctrl (Cmd) + Shift + P
• 용도: Figma 플러그인을 검색 및 실행.

 

---

 

📌 MECE & CRUD 개념 정리

1️⃣ MECE (Mutually Exclusive, Collectively Exhaustive)

🔹 정의:
MECE는 문제를 분석하거나 데이터를 그룹화할 때 서로 중복되지 않으며(Mutually Exclusive), 모든 요소를 포함(Collectively Exhaustive)하도록 하는 논리적 사고 방식.

---

🔹 MECE의 특징

✅ 서로 중복 없이(독립적) → 동일한 요소가 여러 그룹에 속하지 않음
✅ 빠짐없이(포괄적) → 모든 경우를 포함해야 함

예시)
❌ 중복된 분류 (비효율적)

• IT 직군: 개발자, 디자이너, 엔지니어, 웹 개발자 (중복 있음)
  ✅ MECE 원칙 적용 (효율적)
• IT 직군: 개발자, 디자이너, 기획자, PM (중복 없이 완전한 분류)

---

🔹 MECE 적용 방법

1. Tree 구조 활용 → 큰 개념에서 작은 개념으로 세분화
2. 독립적인 기준 사용 → 겹치지 않도록 그룹 나누기
3. 모든 가능성 포함 → 빠지는 요소가 없는지 확인

📌 MECE 활용 예시
✔️ 사업 전략: 시장을 "국내 / 해외"로 구분
✔️ 사용자 분석: 고객을 "신규 / 기존"으로 나눠 데이터 분석
✔️ 소프트웨어 설계: 기능을 "입력 / 처리 / 출력"으로 나누어 개발

---

2️⃣ CRUD (Create, Read, Update, Delete)

🔹 정의:
CRUD는 데이터베이스에서 가장 기본적인 네 가지 연산으로, 시스템의 모든 데이터 처리가 이 네 가지 연산을 기반으로 이루어짐.

🔹 CRUD 동작 방식

연산설명SQL 연산

Create (생성)	데이터를 새로 추가	INSERT
Read (조회)	기존 데이터를 검색 및 조회	SELECT
Update (수정)	기존 데이터를 변경	UPDATE
Delete (삭제)	데이터를 제거	DELETE

---

🔹 CRUD 예시

🔹 웹 애플리케이션에서 CRUD

1. 사용자 등록(Create): 회원가입 (INSERT INTO users ...)
2. 사용자 정보 조회(Read): 로그인 시 프로필 정보 확인 (SELECT * FROM users WHERE id=1)
3. 사용자 정보 수정(Update): 비밀번호 변경 (UPDATE users SET password='newpass' WHERE id=1)
4. 사용자 삭제(Delete): 계정 탈퇴 (DELETE FROM users WHERE id=1)

🔹 RESTful API에서 CRUD

HTTP MethodCRUD 연산예시

POST	Create	POST /users (새 사용자 생성)
GET	Read	GET /users/1 (사용자 정보 조회)
PUT/PATCH	Update	PUT /users/1 (사용자 정보 수정)
DELETE	Delete	DELETE /users/1 (사용자 삭제)

---

3️⃣ MECE & CRUD의 연관성

• MECE는 데이터를 논리적으로 그룹화하는 개념이며, CRUD는 데이터를 처리하는 방법.
• 데이터 모델링을 할 때 MECE 원칙을 적용하면 CRUD 연산 설계가 체계적으로 가능.
• 예를 들어, 사용자(User), 주문(Order), 상품(Product) 등의 개념을 MECE 원칙에 맞게 분류한 후, 각 개념에 대해 CRUD 연산을 적용하면 중복 없이 완전한 데이터 설계가 가능.

---

📌 결론

✅ MECE → 개념 & 논리적 분류
✅ CRUD → 데이터 처리 & 시스템 설계
✅ 두 개념을 함께 활용하면 논리적으로 깔끔한 데이터 설계 가능!

 

참고 사이트: https://www.awwwards.com

---

 

(예습) Figma 오토 레이아웃(Auto Layout) 핵심 정리 🎨✨

1️⃣ 오토 레이아웃이란?

• Figma의 자동 정렬 기능으로 요소들이 자동으로 크기 조절 & 정렬됨.
• CSS의 flexbox와 유사하게 작동.
• 버튼, 리스트, 카드, 메뉴, 반응형 UI 등에 필수!

2️⃣ 오토 레이아웃 적용 방법

💡 단축키: Shift + A

1. 오토 레이아웃을 적용할 요소 선택
2. 단축키 Shift + A 또는 오른쪽 클릭 → “Add Auto Layout” 선택
3. 오른쪽 패널에서 정렬 & 간격 조정

3️⃣ 주요 기능

4️⃣ 중첩 오토 레이아웃 활용 (Nesting)

• 리스트 같은 복잡한 구조 만들 때 사용.
• 예시) 프로필 카드
  1. 이미지 + 텍스트 → 가로 방향 오토 레이아웃 적용.
  2. 여러 개의 카드를 모아 세로 오토 레이아웃으로 감싸기.

5️⃣ 반응형 디자인 적용법

• Hug → 내용 크기에 맞게 프레임 자동 조절
• Fill → 부모 프레임을 가득 채우도록 확장
• Auto spacing → 요소 간격이 유동적으로 변경됨
• Wrap 기능 → 콘텐츠가 많아지면 자동으로 다음 줄로 넘어감 (예: 태그 UI)

6️⃣ 프로토타이핑 활용

• 변형(Variants)과 결합 → 클릭 시 아코디언 메뉴 열림/닫힘
• Smart Animate와 함께 사용 → 요소 크기 변화 애니메이션 가능
• 동적 리스트 구현 → 항목 추가/삭제 시 다른 요소가 자동으로 정렬됨

7️⃣ 실전 팁 & 주의할 점

✅ Shift + A 단축키 활용하여 빠르게 적용
✅ 컴포넌트와 결합하면 유지보수 편리
✅ 너무 많은 중첩 사용 금지! (복잡해짐)
✅ 절대 위치(Absolute Position) 기능 활용하면 특정 요소를 겹쳐 배치 가능
✅ 텍스트 & 아이콘 정렬 문제 발생 시 → "Text baseline alignment" 체크