[강의] 피그마 기초 - UXUI 기초 개념

 

Figma

현재 가장 강력한 디자인 툴이자, 와이어프레임부터 핸드오프 과정 전부를 하나의 툴에서 할 수 있는 효율적인 툴.

(포토샵이 그래픽에 가깝다면..) 피그마는 UX/UI 디자인에 최적화.

(tmi)

근데 문득 전회사에서 디자이너 분들이랑 디자인 파일을 어떻게 주고 받았었지..? 떠올려보니

너무 오래 되어서 잘 생각이 안 났다.. TODO 뒤져보니

노션에 디자인 요청하는 카드 생성하고, 디자이너가 리소스 보고 일정 할당하고, 완성본도 거기로 받았던 듯.

이런 디자인 주고 받는 거는 여전히 노션으로 하고

뭔가 같이 작업해야할 일이 있을 때는 피그마를 쓰나?

---

디스플레이, 배수

 

• 디지털 화면: 디스플레이 (픽셀로 이루어짐)
  
  
• 해상도: 디스플레이 안에 들어가 있는 픽셀의 개수
  1920*1080 디스플레이는 가로픽셀 1920개, 세로픽셀 1080개
  
  
• 1배수 디자인 (1배, 즉 100%! 원본 사이즈라는 뜻)
  모바일 앱의 기준이 되는 사이즈
  EX 아이폰 15pro는 3배수인데, 1배수로 디자인하면 기기는 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대 또는 축소.

---

 

래스터, 벡터

 

 

 

 

---

 

 

8포인트 그리드

8포인트(8pt) 그리드는 UI/UX 디자인에서 모든 간격, 크기, 패딩, 마진 등을 8의 배수로 정렬하는 시스템을 말합니다.
디지털 제품 전반에서 일관성과 효율성을 높이기 위해 널리 사용되는 디자인 규칙입니다.

• 여백이나 간격, 높이나 너비 등 UI 수치를 키우거나 줄일 땐 최대한 8의 배수 단위로 한다는 약속을 하는 셈
• 요즘은 해상도가 너무 좋아져서 실무에선 4배수를 많이 씀
• 안티 앨리어싱 (홀수 배수 때문에 계단 현상으로 이미지 끝 자글자글해졌을 때 할 수 있는 작업

8포인트 그리드 찾다 보니 이런 누리집 문서가 있네.. 신기하다

 

레이아웃

레이아웃(Layout) | 스타일 가이드 - KRDS

 

 

---

 

커뮤니티에서 다양한 소스를 가져와서 쓸 수 있음!

---

 

도형, 텍스트, 이미지 첨부

 

 

---

레이어

 

피그마 레이어 꼭 정리해야 돼요?

피그마 레이어 꼭 정리해야 돼요?

 

이런 글도 있네

 

---

 

 

패스 / 펜툴

• 패스(Path)는 벡터 형식으로 된 모양을 모두 뜻하는 말이에요.
• 패스는 선도 될 수 있고, 모양일 수도 있고, 복잡한 형태도 될 수 있어요.

---

 

아웃라인, 평탄화

아웃라인(Outline) 
아웃라인은 글자처럼 굵기 정보가 있는 개체라면 어떤 거라도 모두 면으로 처리할 수 있어요.

텍스트를 더 이상 글자로 인식하지 않게 만들고, ‘모양(shape)’으로 바꾸는 작업입니다.

언제 쓰나요?

• 협업할 때 폰트가 깔려 있지 않은 사람도 문제없이 열어야 할 때
• 텍스트를 자유롭게 왜곡·절단 등 그래픽 형태로 편집해야 할 때
• 폰트가 깨질 위험을 없애고 디자인을 고정하고 싶을 때

결과

• 기존: 텍스트(편집 가능, 폰트 필요)
• 아웃라인 후: 벡터 도형(편집 불가, 폰트 필요 없음)

예: “SALE”이라는 텍스트 → 각각의 문자 S/A/L/E가 독립된 벡터 모양이 됨

평탄화(Flatten)
여러 개의 경로/도형을 한 개의 벡터 경로로 재계산(재생성)하는 과정입니다.
이 과정에서 Figma는 오브젝트의 현재 보이는 형태를 기준으로 새 벡터를 다시 만듭니다.

그러면 원래 각 레이어가 가지고 있던

• Rotation(각도)
• Scale 비율
• Flip 여부

이런 Transform 정보가 모두 "0"으로 초기화됩니다. 즉, 눈에 보이는 형태만 유지하고, 내부 속성은 새 벡터로 다시 씁니다.

평탄화의 경우, 회전한 개체를 회전하지 않은 것으로 만들기 때문에 주의해야 해요.

 

※ 아웃라인과 평탄화 모두 기존 개체의 편집 정보를 없애고 새로운 형태로 다시 만들어주는 셈이에요

 

---

 

 

챕터5까지 있는데 이제 챕터1 끝났다😂

갈 길이 멀다~