🎯 파운데이션(Foundation)이 뭐냐?

(제품샷 디자인 실환가?)

진짜 간단하게 말하면

👉 **디자인 시스템에서 제일 기본이 되는 ‘기초 구성 요소들’

🔧 좀 더 쉽게 설명하자면:

파운데이션 = 디자인의 기본 재료
예를 들어 음식 만들 때 소금, 설탕, 간장, 식용유 같은 거.

디자인에선 그게 바로:

색상 (Colors)

타이포그래피 (Fonts, 크기, 줄간격 등)

그림자 (Shadows)

여백, 간격 (Spacing)

반응형 사이즈 기준 (Breakpoints)

아이콘 스타일

테두리, 둥글기 (Border radius 등)

이런 것들임.

🧱 예시로 설명:

님이 버튼을 만든다고 칩시다.

버튼에 들어가는:

글씨 크기? → 타이포그래피

배경색? → 컬러

둥글기? → Border radius

안쪽 여백? → Spacing

이런 모든 게 파운데이션에서 정의된 값을 쓰는 것.

이걸 통일해두면
→ 전체 UI가 깔끔하고 일관성 있게 나옴.
→ 개발자랑 디자이너랑 협업도 쉬워짐.

💬 한 줄 요약

파운데이션은 디자인 시스템의 양념통이다.
기본 재료 다 똑같이 써야 요리가 맛있음. (=디자인이 정돈됨)

Q: 그럼 파운데이션이 뭔 옵션 효과 프로그램이나 상호작용 들어간 키가 아니라 걍 사람들이 그런 규칙을 파운데이션이라고 부른다는 거임?
A: ㅇㅇ

✅ 결론부터 말하자면:

파운데이션은 '기능'이나 '툴'이 아니라, '규칙'임.

🔍 더 정확히 말하면:

파운데이션은 Figma 안에 있는 어떤 '버튼'이나 '기능'이 아님.

그냥 디자인할 때, 다 같이 통일되게 쓰자고 약속한 기본값 세트.

색깔을 #A12345 이런 식으로 막 쓰지 말고, "primary-color" 이런 이름으로 정해두자! 하는 느낌.

💡 예시 :

이런 거 하나하나 정해서, 그걸 파운데이션으로 묶어둔 것.

🎨 그럼 이건 왜 중요하냐?

디자이너들끼리 안 싸움
→ “폰트 왜 다 달라?” 같은 말 안 나옴

디자이너 → 개발자 전달 시
→ “primary-color 써주세요” 하면 바로 적용 가능
→ 개발자는 일일이 색 코드 안 봐도 됨

나중에 리브랜딩?
→ 파운데이션 값만 바꾸면 전체 디자인이 싹 바뀜 (효율 ㄹㅈㄷ)

💬 요약

파운데이션은 Figma에 있는 뭔가를 누르는 키가 아니라
디자이너들이 "이건 이렇게 쓰자!" 하고 약속한 스타일의 기준값들.

즉, "룰셋"이지, "툴셋"은 아님.

💡 정리해주자면:

파운데이션이란?
디자이너 + 개발자가

프로젝트 초반에 미리 약속하고

다 같이 일관되게 쓰기로 한 스타일의 기준값들.

그 전체 세트를 부르는 말이 👉 Foundation

📦 우리가 협상해서 정해야 되는 주요 목록들 (파운데이션의 대표 구성 요소):

✨ 추가로 알면 좋은 팁

이렇게 정한 파운데이션은 Figma에선 보통:

스타일로 저장해두거나,

디자인 토큰으로 변환해서

디자인 시스템 라이브러리에 올려서
→ 팀 전체가 공유해서 씀.

그래야 디자이너 5명이 디자인해도 전부 하나처럼 보임.

💬 예를 들면 이런 식:

“우리 프로젝트의 기본 버튼은 둥글기 8px에 primary-color 쓰기로 했지?”
👉 이걸 다 같이 파운데이션에서 정의해두면, → 디자이너도 그거 쓰고
→ 개발자도 그걸 코드에서 변수로 불러다가 쓰는 것.