피그마 초보 강좌 2편: 도형, 텍스트, 색상 스타일 활용하기

이번 강좌에서는 피그마의 기본 도구인 도형, 텍스트, 색상 스타일을 활용하는 방법을 다룹니다. 이 강좌를 통해 도형과 텍스트의 크기, 위치, 색상을 조정하고, 자주 쓰는 색상과 텍스트 스타일을 저장하여 일관성 있는 디자인을 만들 수 있습니다.

---

1. 도형(Shape) 도구 사용하기

피그마에서는 직사각형(Rectangle), 원(Ellipse), 선(Line) 등 기본 도형을 사용해 쉽게 UI 요소를 디자인할 수 있습니다.

1) 도형 추가하기

1. 상단의 Shape Tool을 클릭하거나 단축키 R을 눌러 **Rectangle(직사각형)**을 선택합니다.
2. 원하는 위치를 클릭하고 드래그하여 직사각형을 만듭니다.
3. 마찬가지로, **Ellipse(원)**은 O를 눌러 추가하고, **Line(선)**은 L을 눌러 추가할 수 있습니다.

2) 도형의 크기와 위치 조정하기

• 도형을 선택하면 오른쪽 속성 패널에 크기, 위치 정보가 표시됩니다.
  • Width와 Height를 입력하여 크기를 조정합니다.
  • X와 Y 좌표를 설정해 원하는 위치로 이동할 수 있습니다.

3) 도형의 색상과 테두리 설정하기

• Fill: 도형의 채우기 색상을 설정할 수 있습니다. 색상 팔레트에서 직접 선택하거나 Custom 옵션을 눌러 색상을 조정합니다.
• Stroke: 테두리 색상과 굵기를 설정할 수 있습니다. Stroke 아래의 굵기 값을 조정하면 테두리 두께가 변경됩니다.

---

2. 텍스트 도구 활용하기

텍스트는 UI 디자인에서 매우 중요한 요소입니다. 피그마에서는 텍스트의 폰트, 크기, 색상 등을 다양하게 설정할 수 있습니다.

1) 텍스트 추가하기

1. 상단의 Text Tool을 클릭하거나 단축키 T를 눌러 텍스트 도구를 선택합니다.
2. 프레임이나 캔버스에서 원하는 위치를 클릭하고 텍스트를 입력합니다. 예를 들어, "로그인" 또는 "회원가입"과 같은 문구를 입력해 봅니다.

2) 텍스트 속성 조정하기

• Font: 텍스트의 폰트를 선택합니다. 다양한 폰트 목록이 제공되며, 필요하면 추가 폰트를 업로드할 수도 있습니다.
• Size: 텍스트 크기를 조정합니다.
• Color: 텍스트 색상을 설정합니다. Fill과 같은 방식으로 색상 팔레트를 이용해 설정할 수 있습니다.
• Alignment: 텍스트 정렬 옵션을 설정하여 좌측, 가운데, 우측 정렬을 지정합니다.
• **Line Height(줄 간격)**와 **Letter Spacing(자간)**을 조정하여 텍스트의 가독성을 높일 수 있습니다.

---

3. 색상 팔레트와 스타일 만들기

색상 팔레트는 디자인의 일관성을 유지하는 데 매우 중요합니다. 피그마에서는 자주 사용하는 색상을 스타일로 저장해 놓고 언제든지 재사용할 수 있습니다.

1) 색상 스타일 저장하기

1. 도형이나 텍스트를 선택한 상태에서 Fill 설정을 클릭합니다.
2. 색상을 선택한 후, 오른쪽 Style 아이콘(+)을 클릭하여 New Color Style을 만듭니다.
3. 스타일 이름을 지정하고 저장합니다. 예를 들어, 기본 색상을 Primary Color로 설정합니다.

2) 색상 스타일 적용하기

• 스타일로 저장된 색상은 Fill 또는 Stroke 설정에서 바로 적용할 수 있습니다. 디자인에 일관된 색상을 유지할 수 있어 효율적입니다.

3) 색상 스타일 수정하기

• 색상 스타일을 수정하면 해당 스타일을 사용하는 모든 요소에 자동으로 반영됩니다. Styles에서 색상을 변경하여 한 번에 일괄적으로 수정할 수 있습니다.

---

4. 기본 정렬과 그룹화

여러 요소를 디자인할 때 정렬과 그룹화를 활용하면 깔끔하고 정돈된 레이아웃을 쉽게 만들 수 있습니다.

1) 요소 정렬하기

• 여러 요소를 선택하고 오른쪽 패널의 Align 옵션에서 좌측 정렬, 중앙 정렬, 우측 정렬 등을 설정할 수 있습니다.
• 간격 맞추기: 여러 요소 간의 간격을 균등하게 맞출 수 있는 옵션도 제공합니다.

2) 그룹화

• 여러 개의 요소를 선택한 후, Ctrl + G(Windows) 또는 Cmd + G(Mac)를 눌러 그룹화합니다.
• 그룹화한 요소는 하나의 레이어로 관리할 수 있어, 일괄적으로 이동하거나 크기를 조정하기 쉽습니다.

---

결론

이번 강좌에서는 피그마의 도형과 텍스트를 추가하고, 색상 스타일을 만들어 일관된 디자인을 만드는 법을 배웠습니다. 이 기본적인 작업들을 잘 활용하면 다양한 디자인 요소를 손쉽게 관리할 수 있습니다. 다음 강좌에서는 피그마의 컴포넌트와 Variants 기능을 활용해, UI 요소를 재사용하고 수정하기 쉽게 만드는 방법을 다루겠습니다.