내배캠 사전캠프 2주차, 9일입니다!
내일이면 2주차도 벌써 끝이네요.
시간은 늘 빠르게 흘러가는 것 같습니다....
그럼 오늘의 Today I Learned 시작해보겠습니다!
오늘은 팀원들과 마케팅 용어집 PPT 발표에 대해 회의하고, 이후에는 각자 공부를 이어갔습니다. 저는 어제에 이어 Figma 강의에서 배운 내용을 정리해보려 합니다.
1. 도형
Figma draft입니다. 아래 툴바 보이시죠? 이 툴바를 이용해 다양한 도형을 만들 수 있습니다.
1.1 기초 도형
Rectangle을 선택하면 첫 클릭 시 정사각형이 생성되고, Polygon을 선택하면 기본으로 삼각형이 만들어집니다. 이후 오른쪽 바의 Appearance → Count 항목에 5를 입력하면 오각형으로 변경할 수 있습니다.
Line의 경우, 높이는 없고 Width(너비)만 있습니다. Stroke → Weight으로 두께를 조정할 수 있고, Stroke → Start/End Point로 Line 끝의 모양을 바꿀 수도 있습니다. 추가적으로, Text도 툴바에서 선택하면 됩니다. Typography → Line height, Letter spacing으로 줄 간격과 글자 간격을 사진처럼 조정할 수 있습니다.
1.2 Corner Radius
다시 정사각형으로 돌아와 이번에는 Corner radius를 살펴보겠습니다. 정사각형 안쪽에 커서를 갖다 대면 꼭지점 네 개가 사진처럼 보입니다. 꼭지점을 붙잡고 움직이면 사진처럼 정사각형의 코너가 둥글게 변하는데, 이게 바로 Corner raidus, 곡률의 기능입니다. 오른쪽 바의 Appearance → Corner radius에서 더 세밀하게 조정할 수 있습니다.
1.3 Rotate & Flip
회전(Rotate)은 커서를 도형 가까이에 두면 회전 아이콘이 나타납니다. 그때 커서를 이용해 도형을 직접 돌리거나, 오른쪽 바의
Position → Rotation 항목에서 각도를 입력해 조정하면 됩니다. 뒤집기(Flip)는 도형을 오른쪽 클릭하면 메뉴가 뜨고, 맨 아래쪽에 뒤집기 옵션이 있습니다.
1.4 Layers & Fill
도형 위에 또 다른 도형을 올리면 레이어가 쌓이면서 그 구조가 왼쪽 Layers 패널에 표시됩니다. 레이어 순서를 바꾸고 싶으면 도형을 오른쪽 클릭한 뒤 "Bring to Front" 또는 "Send to Back" 옵션을 선택하면 됩니다.
도형을 두 번 클릭하면 왼쪽 사진처럼 Fill 메뉴가 나타납니다. 이때 색상 뿐만 아니라 도형 안에 이미지와 영상을 추가할 수 있습니다.
2. 패스, 아웃라인, 평탄화, 패스파인더
*패스(Path) - 벡터 형식으로 된 모양.
툴바에서 Pen 도구를 선택하면 직접 선이나 모양을 그릴 수 있습니다. 시작점에서 선을 긋고 다시 시작점으로 돌아오면 모양이 완성됩니다. 꼭지점에서 그대로 이동하면 직선이, 드래그하며 이동하면 곡선이 그려집니다. 왼쪽은 자유롭게 선을 그려본 예시이고, 오른쪽은 도형 예시입니다. 완성된 도형은 Fill 옵션을 이용해 내부에 색상을 채울 수 있습니다.
*아웃라인(Outline) - 도형의 테두리. Fill은 도형의 면색, Stroke는 도형의 테두리를 조절할 수 있다. Outline Stroke는 외곽선 따기라는 뜻으로, 선을 면으로 변화시켜 벡터 레이어로 만든다.
*평탄화(Flatten) - 한 개의 벡터 레이어로 합쳐주는 기능.
Stroke로 도형의 테두리를 추가할 수 있습니다. 테두리 굵기(Weight)는 변하지 않기 때문에 도형의 크기가 달라져도 그대로입니다. 사진에서 보이는 것처럼 테두리를 가운데, 안쪽, 바깥쪽으로 나눌 수 있습니다.
도형을 오른쪽 클릭하면 Outline stroke와 Flatten 메뉴를 볼 수 있습니다. Outline stroke를 선택하면 기존 테두리가 사라지고, 테두리 모양을 본뜬 새로운 도형이 만들어집니다. 즉, 테두리가 하나의 레이어로 분리되는 셈이죠. Flatten은 여러 개의 레이어를 하나로 합치는 기능으로, 오른쪽 사진처럼 두 도형이 하나로 병합된 모습을 볼 수 있습니다.
*패스파인더(Pathfinder) - 도형끼리 합치기(union), 빼기(subtract), 교집합(intersect), 제외(exclude) 기능을 제공한다.
**Flatten이 여러 도형을 하나의 벡터 레이어로 합치는 반면, Pathfinder는 도형 자체를 하나로 통합합니다.
- Union Selection: 선택한 두 도형을 합쳐 하나의 도형으로 만듭니다.
- Subtract: 앞에 있는 도형을 기준으로 겹친 부분을 삭제합니다.
- Intersect: 두 도형이 겹친 부분만 남기고 나머지는 삭제합니다.
- Exclude: 두 도형이 겹친 부분을 제외하고 나머지 부분만 남깁니다.
패스파인더 메뉴는 두 개 이상의 도형을 선택하면 오른쪽 상단에서 확인할 수 있습니다. 두 번째 아이콘 옆 아래로 향하는 화살표를 클릭하면 됩니다. 아래 사진은 Exclude 기능의 예시로, 두 도형이 겹친 교집합 부분만 제외된 모습을 보여줍니다.
과제
피그마 1주차 강의를 모두 수강한 후, 과제를 진행했습니다. 과제는 여덟 개의 도형 이미지를 보고 동일한 도형을 직접 제작하는 것이었습니다.
각 도형의 풀이 과정
1번) 1.1 기초 도형에서 언급한 것처럼 사각형 도형을 생성하고 사이즈를 맞춥니다.
2번) 1번처럼 사각형 도형을 생성한 뒤, 오른쪽 상단의 Position > Rotation 항목에 직접 숫자를 입력하거나 도형의 꼭짓점을 마우스로 드래그해 회전하면 됩니다.
3번) 사각형 도형을 생성한 뒤, 오른쪽 상단 Appearance 패널에서 상단 오른쪽 코너와 하단 왼쪽 코너의 Corner radius 값을 각각 50으로 설정하면 사진처럼 해당 모서리가 동글게 변합니다.
4번) 이 도형도 3번과 유사한 방식입니다. 저는 먼저 사각형을 회전시킨 뒤, Corner radius 값을 조정해 도형을 완성했습니다.
5번) 툴에서 Polygon으로 삼각형을 생성하고 회전하면 끝입니다.
6번) Polygon 도형을 생성한 뒤, Appearance > Count: 5로 설정하면 오각형이 만들어집니다. 이후 도형을 마우스 오른쪽 버튼으로 클릭하고 Flip vertical 옵션을 선택하면 됩니다.
7번) Ellipse 도형을 각자 원하는 크기로 두 개 생성합니다 (작은 원, 큰 원). 이때 큰 원을 반으로 자르려면 다음 단계를 따르면 됩니다.
- 큰 사각형 도형을 새로 만들고, 큰 원의 아래 절반을 덮도록 위치시킵니다.
- 큰 원과 사각형을 함께 선택합니다.
- 오른쪽 상단의 Pathfinder > Subtract 옵션을 클릭합니다.
이렇게 하면 사각형에 가려진 부분이 잘려 나가, 큰 원이 정확히 반으로 나뉩니다. 그럼 사진처럼 사람 모양의 도형이 완성됩니다.
8번) 이 도형은 7번보다 복잡해 보이지만, 만드는 방법은 동일합니다. Pathfinder 기능을 활용하면 됩니다.
- 직사각형 도형 4개를 생성합니다.
- 각 직사각형을 위치에 맞게 회전시켜 배치합니다.
- 4개의 직사각형을 모두 선택한 뒤 오른쪽 클릭 > Flatten을 선택합니다 (이렇게 하면 여러 개의 직사각형이 하나의 레이어로 합쳐집니다).
- 작은 원을 하나 만들어 도형 위에 올리고, 원하는 위치에 맞게 정렬합니다.
- 모든 도형을 선택한 뒤, 오른쪽 상단의 Pathfinder > Subtract 옵션을 클릭합니다.
이 과정을 거치면 작은 원이 겹친 부분이 깔끔하게 잘려 나가 원하는 형태의 도형이 완성됩니다.
전체적으로 과제 난이도는 마지막 7번과 8번 도형을 제외하면 비교적 쉬운 편이었습니다. 요약하자면, 도형을 생성한 뒤 Rotate, Corner Radius, Flatten, Pathfinder 등의 기능을 활용하여 과제를 완성했습니다.
과제는 fig 파일로 제출하는 형식이었습니다. 참고로 fig 파일은 왼쪽 상단의 Figma 아이콘 → File → Save local copy 차례로 진행하면 저장할 수 있습니다!
마무리
오늘도 이렇게 하루가 마무리되네요. 다음 주에 있을 마케팅 용어집 발표를 준비하며 팀원들과 회의를 진행했고, 어제에 이어 피그마 강의를 수강하며 과제도 완료했습니다. 알찬 하루였던 것 같습니다. 피그마 앱을 켠 상태로 강의를 따라 하니 배우는 속도가 빨랐고, TIL을 작성하며 내용을 정리하니 자연스럽게 복습까지 된 느낌이에요. 과제를 보고 어떤 기능을 사용할지 금방 판단할 수 있어 큰 어려움 없이 진행할 수 있었습니다. 어제와 다르게 오늘은 과제를 효율적으로 마무리할 수 있어서 다행입니다.
내일은 드디어 사전캠프 2주차의 마지막 날이네요.
그럼 내일도 열심히 학습해보겠습니다!
'내배캠 TIL 기록일지' 카테고리의 다른 글
| [내일배움캠프 사전캠프 3주차] 복습 + 피그마 2주차 강의 듣기 (0) | 2025.10.27 |
|---|---|
| [내일배움캠프 사전캠프 2주차] 나를 타겟으로 한 광고 분석하기 (0) | 2025.10.24 |
| [내일배움캠프 사전캠프 2주차] 브랜드 배너 마무리 & 피그마 강의 (0) | 2025.10.22 |
| [내일배움캠프 사전캠프 2주차] 광고 기획 & 브랜드 배너 (1) | 2025.10.21 |
| [내일배움캠프 사전캠프 2주차] 마케팅 용어집 & 아티클 복습 (0) | 2025.10.20 |