260507 4주 차 : 피그마 기초 완전 정복 (1)

 오늘은 한차례 개인과제의 여파를 흘려보내고, 미루고 미루던 피그마 강의를 제대로 들어보기로 했다.

 

Ch 1. UXUI 기초 개념 이해

실습 과제 - 도형의 이해

 귀엽다. 피그마에 소질이 있는 것 같다. 8번 톱니바퀴를 만들 때는 정말 화가 날 뻔 했지만, 힌트를 읽지 않고도 해결했다는 점에서 내가 너무 자랑스럽다.

 

 

  내보내기를 분명 배웠는데 잊어먹어서 다시 강의 자료를 훑고 왔다. 위에는 그냥 스크린샷인데 확실히 아래 꺼가 더 안 깨지고 좋다...

 

ch 2. 피그마 핵심 개념 학습

1. 프레임과 그룹의 차이

1) 프레임 (Frame)

- 프레임은 레이아웃을 구성하는 가장 기본적인 단위

- 프레임 안에 다른 레이어들을 넣을 수 있음

- 프레임은 각각의 블록에 배경색을 따로 지정할 수 있음  → 각각의 프레임이 별개의 코드 블록이기 때문

- 각각의 블록에 윤곽선 따로 지정 가능

- 프레임은 일반적으로 크기가 고정되어 있음 → 둘러싸고 있는 프레임의 사이즈를 변경해도 안에 있는 프레임은 영향 X

프레임은 코드 블록을 만드는 기능이면서 동시에 코드 블록 그 자체

 

2) 그룹 (Group)

- 그룹은 여러 개의 레이어를 하나로 묶는 기능

- 그룹 안의 레이어들은 서로 연결되어 있어 한 번에 이동하거나 변형 가능

- 그룹은 그룹 안에 있는 개체들의 배경색이 변경됨 → 여러 개체를 하나의 그룹으로 묶었기 때문

- 그룹 안에 있는 개체들의 윤곽선이 변경됨

- 그룹 안에 모든 개체가 동시에 영향을 받음

그룹은 여러 개체를 하나로 담아두는 기능

 

프레임

 

그룹

 

 이 PNG를 보면 처음에 같은 레이어로 동시에 시작했다. 속성을 똑같이 변경했음에도, 프레임과 그룹의 차이로 다르게 변경되는 것을 알 수 있다.

---

※ 본 글은 학습을 목적으로 작성된 게시물로, 특정 브랜드·제품·서비스명이 언급될 수 있습니다. 이는 순수한 예시일 뿐이며, 상업적 목적은 전혀 없음을 밝힙니다.