[내일배움사전캠프] 25.05.07 (수) TIL

📌 오늘 학습 키워드

• 컨스트레인트
• 리사이징
• 포지션 
• 파운데이션

---

📖 오늘 학습한 내용을 나만의 언어로 정리하기 

1️⃣ 컨스트레인트

 

자식 컨테이너는 부모 컨테이너의 위와 왼쪽에 붙은 채로 조정이 된다. 

• 현재 : 왼쪽/위에 고정이 되어있는 상태
  → 프레임을 위/왼쪽으로 늘릴 때는 자식 컨테이너가 이동하지만, 아래/오른쪽으로 늘리는 경우에는 자식 컨테이너가 이동하지 않는다. 
• Position 패널에서 Constraints를 확인할 수 있다. 

2️⃣ 리사이징

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 쓸 수 있음
Fill	부모 컨테이너의 크기에 맞춰 조정	자신만 쓸 수 있음

 

• 자식 컨테이너의 값이 Fixed, 부모 컨테이너의 값이 Fill로 설정되어 있는 경우 : 자식 컨테이너의 크기에 따라 부모 컨테이너의 사이즈도 변한다. 자식 컨테이너의 크기가 어떻게 변하던 부모 컨테이너는 동일한 간격으로 감싸는 형태. 
• 자식 컨테이너의 값이 Fill, 부모 컨테이너의 값이 Fixed로 설정되어 있는 경우 : 부모 컨테이너의 크기가 어떻게 변하던 자식 컨테이너는 일정한 비율만큰 채우는(Fill) 형태로 늘어난다. 

3️⃣ 포지션

 피그마에서는 프로토타입 패널에서 포지션을 설정할 수 있다. 

 

1) Static (스태틱)

일반적인 요소들이 갖고 있는 포지션, 스크롤을 하면 같이 따라 움직인다. 

 

2) Fixed (픽스드) 

화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있다. 

우리가 아는 웹사이트의 헤더나, 앱 하단의 버튼 등 

 

3) Absolute (앱솔루트) 

Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이다. 본인이 담겨 있는 부모 컨테이너를 기준으로 항상 고정된 위치에 있다. 

인스타그램 게시글 안에서 좋아요, 저장 버튼이 고정되어 있는 느낌. 

 

4) Sticky (스티키) 

스크롤에 따라 기본값과 Fixed를 전환하는 포지션이다. 

스크롤을 따라 움직이다가, 특정 위치에서부터는 상단에 고정된다. 

쇼핑몰에서 카테고리에따라 상단에 고정되는 느낌.

---

📌 파운데이션

• UI는 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있다. 
• 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야 한다. 
• 모든 컴포넌트들을 파운데이션 요소를 조합해서 만들 수 있다. 

[ 파운데이션의 구성 ]

• 색상 (Color)
• 서체 (Font, Typography) 
• 간격, 여백 (Spacing, Gap) 
• 곡률 (Radius) 
• 그리드 (Grid)
• 고도 (Elevation) : 높이 개념 
• 아이콘 (Icon) 

1️⃣ 컬러 스타일

• 컬러스타일 : 내가 디자인에서 사용할 색상을 모아두는 팔레트 
• 여러 가지 단계의 Shade를 만들어 놓고 사용한다. (규칙을 만들어놓고 사용하는 경우가 대부분) 

[컬러 스타일 만드는 일반적인 방법]

 

1. 컬러 스타일은 기본적으로 2~3가지 색상으로 만든다.
* 일반적으로 포인트 컬러 하나, 배경은 흑백 조합으로 사용하는 것을 추천한다. 

• 포인트 컬러 = 프라이머리 컬러 : 정말 중요하고 핵심적인 부분에만 써야 하는 색상
• 백그라운드 컬러 : 제품의 전체적인 분위기를 만들어 줄 배경색 (보통 흰색)
• 세컨더리 컬러 = 서브 컬러 : 배경색에서 포인트 컬러가 돋보일 수 있도록 하는 색상

2. 색상을 정했다면 가장 밝은 단계부터 가장 어두운 단계까지 총 10 단계로 만든다. 

* 꼭 10 단계가 아니어도 된다. 제품에 따라 더 많아질수도 더 적어질수도 있다. 

 

 

컬러 스타일 팁 ! 1:3:6 법칙

• 가장 중요한 색상인 포인트 컬러는 비율을 화면의 10% 정도만 쓴다. 
• 전체적인 배경인 흰색이 60% 정도 차지하게 한다. 
• 빠르게 온보딩 할 수 있는 가이드라인 정도로만 참고하기 ! 디자인에는 정답이 없다. 
• 타 웹사이트를 보면서 컬러 비율을 어느 정도로 썼는지 알아보면 좋다. 

2️⃣ 폰트 스타일

 디자인 시스템에 사용할 폰트를 모아둔 목록 

 

[폰트 스타일의 구성]

• 패밀리 : 폰트의 종류, 폰트의 이름 
• 굵기 (무게감 = weight) : 단순히 글자가 굵은 것을 뜻하는게 아니라 얼마나 더 중요한지를 알려주기 때문에 '무게감'이라는 표현을 사용한다. 더 먼저 중요하게 읽어야 한다는 것을 나타낸다. 
• 크기 : 폰트의 크기는 일반적으로 16px 부터 시작하고, 2px씩 줄이거나 늘린다. 
• 행간 (Line-height) : 글자 줄 사이의 간격 
• 자간 (Letter spacing) : 글자와 글자 사이의 간격 

 3️⃣ 컴포넌트 

 파운데이션을 조합해 만들어지는 구성품

 

마스터 컴포넌트 ( ◆ )

• 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 한다. 
• 복사된 디자인들을 한 번에 수정하거나 편집할 수 있도록 해주는 중요한 기능 
• 마스터 컴포넌트를 복제하면, 마스터 컴포넌트의 복제본인 인스턴스가 생긴다. 

인스턴스 ( ◇ )

• 마스터 컴포넌트의 복제본
• 마스터 컴포넌트의 속성을 그대로 이어 받는다. 
• 인스턴스에서는 수정할 수 없다. 수정은 마스터 컴포넌트에서 해야 한다. 

마스터 컴포넌트와 인스턴스의 관계

• 컴포넌트를 수정하면 인스턴스에서도 반영된다. 
• 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않는다. 
• 컴포넌트를 지우더라도 인스턴스는 남아있지만, 인스턴스를 편집하거나 수정하려면 컴포넌트를 복구해야 한다. 
• 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경된다. 

---

❌ 학습하며 겪었던 문제점 & 에러 

• 여러 가지 용어들을 이해하는데 시간이 오래 걸렸다. 
• 실습 내용을 한 번에 따라가기 어려웠다. 

🎯 내일 학습할 내용

• 실습 내용 혼자서 다시 한번 진행해보기