[내일배움캠프 PM 7기] TIL 4일차 : 피그마 기초부터 디자인 시스템까지

 

1. 피그마 핵심 특징

• 접근성 : 웹 기반이라 Mac, Windows 모두 사용 가능
• 실시간 협업 : 여러 사람이 동시에 같은 화면 작업 가능
• 개발자 친화적 : 디자이너뿐 아니라 개발자도 적극 활용하는 기능 탑재
• 커뮤니티 : 방대한 플러그인과 디자인 자료 생태계

다른 툴과의 비교

피그마	기획~핸드오프 전 과정 커버	—
스케치	UI 디자인 특화	Mac 전용
제플린	핸드오프 특화	전 과정 사용 불가
프레이머	웹 배포 특화	전 과정 사용 불가
포토샵	그래픽 디자인 특화	UI 디자인에 부족

💡 전 과정을 하나의 툴로 아우르면서 학습 난이도까지 낮은 건 피그마가 유일

---

2. 피그마의 핵심 구조 개념

프레임(Frame) vs 그룹(Group)

- 코드는 디자인을 박스 모델로 읽음

- 네모난 박스를 쌓아 화면을 만드는 구조인데, 피그마에서 이 박스를 구현하는 기능이 바로 프레임

 

	프레임	그룹
역할	코드 블록(박스 모델) 구현	여러 개체를 묶기만 함
개발 변환	실제 코드로 변환됨	구조적 의미 없음
컨테이너 기능	가능 (다른 프레임 포함 가능)	불가

📌 UI 설계는 코드로 변환 가능한 구조로 만들어야 하고, 그 역할을 프레임이 담당합니다.

부모-자식(Parent-Child) 관계

레이어 패널에서 감싸고 있는 것 = 부모(Parent), 감싸진 것 = 자식(Child)

• 레이어 패널의 화살표로 펼치기 / 접기 가능
• 전체 레이어 접기 단축키: opt + L (Mac) / alt + L (Windows)

---

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

다양한 화면 크기에 유연하게 대응하는 레이아웃을 만들어주는 핵심 기능

코드 블록의 구조

패딩(Padding)	컨테이너 내부 여백
마진(Margin)	컨테이너 외부 여백 / 다른 블록과의 간격
보더(Border)	컨테이너 테두리

📌 UI 크기 = 개체 크기 + 패딩

---

4. 컨스트레인트(Constraint) & 리사이징(Resizing)

컨스트레인트란?

부모 컨테이너 크기가 변할 때, 자식이 어디를 기준으로 움직일지 정하는 규칙

반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해 반드시 알아야 하는 기능

리사이징 3가지 값

Fixed	크기 고정	공통
Hug	자식 크기에 맞게 줄어듦	부모만 사용
Fill	부모 크기에 맞게 늘어남	자식만 사용

---

5. 포지션(Position)

- 실제 개발(CSS)에서도 사용하는 개념

- 피그마에서 이 값을 직접 설정할 수 있음

Static	기본값, 스크롤 시 같이 움직임	일반 콘텐츠
Fixed	화면 전체 기준으로 고정	웹 헤더, 앱 하단 버튼
Absolute	부모 컨테이너 기준으로 고정	카드 위 뱃지 등
Sticky	특정 위치 도달 시 상단 고정	스크롤 시 고정되는 탭

---

6. 파운데이션(Foundation)

- UI를 구성하는 가장 작은 기초 재료

- 컴포넌트는 파운데이션을 조합해서 만들어짐

파운데이션의 구성 요소

• 색상(Color)
• 서체(Typography)
• 간격 / 여백(Spacing, Gap)
• 곡률(Radius)
• 그리드(Grid)
• 아이콘(Icon)

컬러: RGB와 HEX

• 디지털 화면은 빛의 3원색(R, G, B) 기반
• 각 색의 농도를 조합해 만든 값을 HEX 코드로 표현

폰트 스타일 5가지 구성 요소

패밀리(Family)	폰트 종류
굵기(Weight)	중요도를 시각적으로 전달 (Thin, Regular, Bold 등)
크기(Size)	기본값 16px / 10px 미만 비추천
행간(Line-height)	줄 간격
자간(Letter-spacing)	글자 간격

---

7. 마스터 컴포넌트 & 인스턴스

컴포넌트란?

- 파운데이션을 조합해 만들어지는 UI 구성 단위

- 버튼, 체크박스, 탭 등이 모두 컴포넌트

마스터 컴포넌트 vs 인스턴스

	마스터 컴포넌트	인스턴스
정의	원본	마스터의 복제본
피그마 아이콘	❖	일반 아이콘
수정 시	모든 인스턴스에 반영됨	개별 수정 가능, 마스터 변경도 연동

📌 반복되는 UI를 효율적으로 관리할 수 있는 핵심 기능

---

8. 디자인 시스템

UI 키트 vs 디자인 시스템

UI 키트	미리 만들어둔 UI 부품 모음 (단어)
디자인 시스템	UI 키트 + 사용 규칙 (단어 + 문법)

 

디자인 시스템의 목적

• 반복적인 UI를 미리 만들어 효율적으로 재사용
• 어떤 디자이너가 작업해도 일관된 결과물 보장
• 개발자가 디자이너의 의도를 정확하게 이해하고 구현 가능

---

9. UI 6가지 분류

Action	중요한 행동 수행	버튼
Input	사용자 입력 받기	텍스트필드, 셀렉트박스
Information	상태 / 안내 전달	토스트, 스낵바, 라벨
Container	여러 컴포넌트 묶음	카드, 바텀시트, 리스트
Navigation	페이지 이동	탭바, 사이드바, 앱바

---

오늘의 회고

마케팅 현업에서는 단순 기획안 레이아웃을 짜기 위한 디자인 툴로만 사용했어서

프레임, 오토레이아웃 같은 개념들이 실제 CSS 코드 개념과 1:1로 대응된다는 점은 처음 알았습니다..

개발자와도 소통하기 위한 언어라는 점을 이제 알게되었어요 🥲 

단순히 화면을 그리기 위해서 사용했던 마케터에서 개발자, 디자이너와 소통하기 위한 PM으로서 성장할 수 있었습니다.

 

물론 아직 자유자재로 사용하긴 어렵지만 ㅜ

좀더 연습해볼 수 있는 기회가 있었으면 좋겠어요 !