실무에서 바로 쓰는 피그마 3. 도형 도구 마스터하기: 벡터의 기본 원리 이해

지난 두 번의 글을 통해 Figma의 인터페이스를 익히고, 프레임과 페이지를 활용하여 디자인 작업 공간을 효율적으로 관리하는 방법을 알아보았습니다. 이제 본격적으로 디자인 요소를 만들기 위한 첫 단계인 도형 도구(Shape Tools)와 그 기반이 되는 벡터(Vector)의 기본 원리에 대해 깊이 파고들 시간입니다. Figma는 벡터 기반의 디자인 도구이며, 도형 도구를 마스터하는 것은 모든 시각적 요소의 기초를 다지는 것과 같습니다. 이 글에서는 다양한 도형 도구의 사용법부터 벡터의 핵심 개념인 점(Node), 선(Segement), 핸들(Handle)을 이해하고 활용하는 방법까지 상세히 설명하여, 여러분이 Figma에서 더욱 자유롭고 정교하게 디자인할 수 있도록 돕겠습니다.

 

3.1 Figma 도형 도구 살펴보기 : 디자인의 첫 단추

Figma의 도형 도구는 상단 툴바에 위치한 아이콘들을 통해 접근할 수 있습니다. 가장 기본적인 사각형, 선, 원부터 다각형, 별 모양까지 다양한 도형을 쉽게 만들 수 있습니다.

 

3.1.1 주요 도형 도구 및 단축기

• 사각형 (Rectangle Tool, R) : 가장 기본적이고 활용도가 높은 도형입니다. UI 컴포넌트의 배경, 카드, 버튼 다양한 요소의 기반이 됩니다.
  사용법 : R을 누른 후 캔버스에 드래그하여 사각형을 그립니다. Shift를 누른 채 드래그하면 정사각형을 그릴 수 있습니다.
  속성 : 우측 속성 패널에서 너비(W), 높이(H), 모서리 곡률(Corner Radius), 채우기(Fill), 선(Stroke), 효과(Effects) 등을 조절할 수 있습니다. 특히, 모서리 곡률을 조절하여 버튼의 둥근 모서리나 부드라운 카드 디자인을 쉽게 구현할 수 있습니다.

• 선 (Line Tool, L) : UI 요소간의 구분석, 그래프의 축, 아이콘의 일부 등 다양한 용도로 사용됩니다.
  사용법 : L을 누른 후 캔버스에 드래그하여 선을 그립니다. Shift를 누른 채 드래그하면 수평, 수직 또는 45도 각도의 선을 그릴 수 있습니다.
  속성 : 두께(Stroke), 색상(Color), 대시(Dash, 점선), 화살표 모양(Arrows) 등을 조절할 수 있습니다.

• 원/ 타원 (Ellipes Tool, O) : 프로필 이미지, 아이콘, 로딩 인디케이터 등 원형 요소를 만들 때 사용합니다.
  사용법 : O를 누른 후 캔버스에 드래그하여 타원을 그립니다. Shift를 누른 채 드래그하면 정원을 그릴 수 있습니다.
  속성 : 사각형과 유사하며, 추가적으로 Arc속성을 통해 원의 일부분만 표현하거나 도넛 모양을 만들 수 있습니다.

• 다각형 (Polygon Tool) : 삼각형, 오각형 등 다각형을 그릴 때 사용합니다.
  사용법 : Polygon Tool 를 누른 후 캔버스에 드래그하여 다각형을 그립니다.
  속성 : Count를 조절하여 꼭짓점의 개수(3개면 삼각형, 5개면 오각형 등)를 변경할 수 있습니다. Corner Radius를 통해 모서리를 둥글게 만들 수도 있습니다.

• 별 (Star Tool) : 별 모양 아이콘이나 장식 요소를 만들 때 유용합니다.
  사용법 : 도형 도구 드롭다운에서 별 아이콘을 선택한 후 캔버스에 드래그하여 그립니다.
  속성 : Count(꼭짓점 개수), Ratio(안쪽과 바깥쪽 꼭짓점 사이의 비율), Corner Radius를 조절할 수 있습니다.

 

3.1.2 도형 속성 공통 조절하기

모든 도형은 선택 시 우측 속성 패널(Design Panel)에서 Fill(채우기), Stroke(선), Effects(효과) 등의 속성을 공통적으로 조절할 수 있습니다.

• Fill (채우기) :
  색상 : 색상 피커를 사용하여 단색을 적용합니다. 16진수 코드(Hex Code), RGB, HSL, CSS 등 다양한 형식으로 색상을 입력할 수 있습니다.
  그라데이션 : Solid 옆의 드롭다운을 클릭하여 Linear, Radial, Angular, Diamond 등 다양한 그라데이션을 적용합니다. 색상 포인트 추가 및 위치 조절이 가능합니다.
  이미지/비디오 : Image 또는 Video를 선택하여 도형 내부에 이미지를 채우거나 비디오를 재생할 수 있습니다.
  블랜드 모드 : 레이어의 색상을 아래 레이어와 혼합하는 방식을 설정합니다.(Normal, Multiply, Screen 등) 

• Stroke (선) : 
  두께 : 선의 두께를 조절합니다.
  색상 : 선의 색상을 설정합니다.
  위치 : 선이 오브젝트의 Inside(안쪽), Center(중앙), Outside(바깥쪽) 중 어디에 그려질지 선택합니다.
  Cap (선 끝 모양) : Round(둥글게), Square(사각형), Nome(끝부분 없앰) 등을 선택하여 선의 끝 모양을 조절합니다.
  Join (선 연결 부위) : Miter(뾰족하게), Round(둥글게), Bevel(비스듬히) 등을 선택하여 선이 꺽이는 지점의 모양을 조절합니다.
  Dash (점선) : 점선 패턴을 만들 때 사용합니다. Dash에 선길이, Gap에 간격 길이를 입력합니다.

• Effect (효과) :  
  Drop Shadow (그림자) : 오브젝트 뒤에 그림자를 만듭니다. X,Y(위치), Blur(흐름 정도), Spread(그림자 확장) 및 색상, 투명도를 조절합니다.
  Inner Shadow (내부 그림자) : 오브젝트 내부에 그림자를 만듭니다.
  Layer Blur (레이어 블러) : 오브젝트 전체를 흐리게 만듭니다.
  Background Blur (배경 블러) : 오브젝트 뒤의 배경을 흐리게 만듭니다. (네오모피즘 디자인 등에 활용)

3.2 벡터의 기본 원리 이해하기 : 점, 선, 그리고 핸들

Figma의 도형 도구를 효과으로 사용하려면 벡터 그래픽의 기본 원리를 이해하는 것이 중요합니다. 비트맵(픽셀) 기반의 이미지와 달리 벡터는 수학적 공식으로 정의된 점, 선, 곡선으로 이루어져 있어 해상도에 구애받지 않고 무한히 확대하거나 축소해도 깨지지 않는다는 장점이 있습니다.

 

3.2.1 벡터의 구성 요소 : 점(Node), 선(Segment), 핸들(Handle)

모든 벡터 기반 도형은 다음 세가지 핵심 요소로 구성됩니다.
1. 점 (Node / Anchor Point) : 벡터 패스(Path)를 구성하는 기본 단위입니다. 점들의 위치에 따라 도형의 모양이 결정됩니다. Figma에서는 선택 시 파란색으로 표시됩니다.
2. 선 (Segment / Path) : 두 점을 연결하는 선 또는 곡선입니다.
3. 핸들 (Handle / Bezier Handle) : 점에 연결된 두 개의 핸들(방향선)입니다. 이 핸들의 길이와 방향을 조절하여 선이나 곡선의 형태와 곡률을 제어할 수 있습니다.

 

3.2.2 벡터 편집 모드 (Edit Object, Enter)

Figma에서 도형을 그린 후, 도형을 더블 클릭하거나 Enter키를 누르면 벡터 편집 모드로 전환됩니다. 이 모드에서는 도형의 점, 선, 핸들을 직접 조작하여 원하는 형태로 변형할 수 있습니다.

• 점 선택 및 이동 : 점을 클릭하여 선택한 후 드래그하여 이동시킵니다. 여러 개의 점을 동시에 선택하여 이동할 수도 있습니다.
• 점 추가/ 삭제 :
  선 위에 마우스를 올리면 +아이콘이 나타나는데, 이때 클릭하면 새로운 점을 추가할 수 있습니다.
  점을 선택한 후 Delete키를 누르면 점을 삭제할 수 있습니다.
• 선택된 점의 유형 변경 : 
  Straight (직선) : 점을 클릭하고 Shift + S를 누르거나, 우측 속성 패널에서 Straight 아이콘을 클릭하여 해당 점을 기준으로 선이 직선으로 연결되도록 합니다. 핸들이 없습니다.
  Mirrored (미러드) : 점을 클릭하고 Shift + M을 누르거나, 우측 속성 패널에서 Mirrored아이콘을 클릭합니다. 두 핸들이 점을 기준으로 대칭적으로 움직이며 부드러운 곡선을 만듭니다. UI에서 부드러운 곡선이나 아이콘을 그릴 때 주로 사용됩니다.
  Disconnected (분리) : 점을 클릭하고 Shift+D를 누르거나, 우측 속성 패널에서 Disconnected 아이콘을 클릭합니다. 두 핸들이 독립적으로 움직여 각기 다른 방향의 곡선을 만들 수 있습니다. 더욱 복잡하고 정교한 곡선을 만들 때 유용합니다.
  Asymmetric (비대칭) : 점을 클릭하고 Shift + A를 누르거나, 우측 속성 패널에서 Asymmetric 아이콘을 클릭합니다. 두 핸들의 길이가 다르게 조절되지만 방향은 반대방향을 유지합니다.
• 핸들 조작 : 점에 연결된 핸들을 드래그하여 곡선 모양을 조절합니다.
  Alt(Window)/Option(Mac) 키를 누른 채 핸들을 드래그하면 Disconnected 유형처럼 독립적으로 핸들을 움질일 수 있습니다.

3.3 펜 도구 (Pen tool, P) 마스터하기 : 자유로운 벡터 드로잉의 시작

펜 도구는 Figma에서 가장 강력하고 유연한 벡터 드로잉 도구입니다. 미리 정의된 도형으로는 그리기 어려운 복잡한 형태나 커스텀 아이콘, 로고 등을 만들 때 필수적으로 사용됩니다. 펜 도구는 점과 선을 하나하나 직접 찍어가며 패스를 그리는 방식입니다.

 

3.3.1 펜 두고 사용법
1. 펜 도구 선택 : 상단 툴바에서 Pen 도구 (P) 아이콘을 클릭합니다.
2. 점 찍기 : 캔버스에 클릭하여 첫 번째 점을 찍습니다.
3. 직선 그리기 : 다음 위치에 클릭하면 두 점이 직선으로 연결됩니다.
4. 곡선 그리기 : 다음 위치에 클릭한 채 마우스를 드래그하면 핸들이 나타나면서 곡선이 그려집니다. 핸들을 놓으면 점이 찍히고 곡선이 완성됩니다.
5. 패스 닫기 : 첫 번째 점 위에 마우스를 가져가면 Circle 아이콘이 나타나는데, 이때 클릭하면 패스가 닫히면서 도형이 완성됩니다.
6. 패스 완성 : 패스를 닫지 않고 Esc키를 누르거나 Done 버튼을 클릭하면 열린 패스 상태로 그림을 완성합니다.
7. 점 추가/삭제/수정 : 펜 도구를 사용한 후에도 언제든지 도형을 더블 클릭하여 벡터 편집 모드로 진입하여 점, 선, 핸들을 수정할 수 있습니다.

 

3.3.2 펜 도구 활용 팁

Shift 키 활용 : 펜 도구 사용 중 Shift키를 누르면 수평,수직, 또는 45도 각도로 점을 찍거나 핸들을 조절할 수 있어 정교한 형태를 만드는 데 도움을 줍니다.

Alt/Option 키 활용 : 점을 찍을 때 Alt/Option 키를 누르면 다음 점을 찍기 전에 핸들의 방향을 독립적으로 조절할 수 있습니다.

Ctrl/cmd 키 활용 : 펜 도구 사용 중 Ctrl/cmd 키를 누르면 일시적으로 Move Tool(V)로 전환되어 이미 그려진 점이나 핸들을 조작할 수 있습니다.
Esc 또는 Done : 패스를 닫지 않고 특정 부분까지만 그린 후 작업을 완료할 때 사용합니다.

• 오픈 패스 vs 클로즈 패스 : 
  오픈 패스 : 시작점과 끝점이 연결되지 않은 패스입니다. 주로 선이나 복잡한 라인 아이콘에 사용됩니다. Fill 속성은 적용되지 않고 Stroke 속성만 적용됩니다.
  클로즈 패스 : 시작점과 끝점이 연결되어 닫힌 형태의 패스입니다. 면을 가지는 도형을 사용되며, Fill과 Stroke속성 모두 적용됩니다.

3.4 부울 연산 (Boolean Operations) : 도형을 합치고 자르고 나누기

Figma의 부울 연산은 여러 도형을 결합허가나 분리하여 새로운 형태를 만드는 강력한 기능입니다. 복잡한 아이콘이나 로고를 만들 때 이 기능을 활용하면 훨씬 빠르고 효율적으로 작업할 수 있습니다. 두 개 이상의 도형을 선택하면 상단 툴바의 중앙에 부울 연산 아이콘이 나타납니다.

 

3.4.1 주요 부울 연산 기능
1. Union Selection (통합) : 선택된 모든 도형을 하나의 결합된 도형으로 만듭니다. 겹치는 부분과 겹치지 않는 부분이 모두 유지됩니다.

• 활용 : 여러 단순 도형을 합쳐 복잡한 단일 도형을 만들 때 (예 : 구름 모양 아이콘)

2. Subtract Selection (빼기) : 가장 아래에 있는 도형에서 위에 있는 도형의 겹치는 부분을 제외합니다.

• 활용 : 도형의 특정 부분을 잘라내거나 구멍을 낼 때 (예 : 반원, 초승달 모양)

3. Intersect Selection (교차 영역) : 선택된 도형들이 모두 겹치는 부분만 남기고 나머지는 제거합니다.

• 활용 : 두 도형의 공통된 부분만을 추출할 때 (예 : 물방울 모양 아이콘)

4. Exclude Selection (제외) : 선택된 도형들이 겹치는 부분을 제외하고 겹치지 않는 부분만 남깁니다.

• 활용 : 도넛 모양이나 테두리만 남길 때 유용합니다.

5. Flatten Selection (평탄화) : 선택된 여러 도형이나 부울 연산 결과물을 하나의 단일 벡터 패스로 만듭니다. 이렇게 평탄화된 도형은 더 이상 부울 연산의 원래 구성 요소를 개별적으로 편집할 수 없습니다. 대신, 벡터 편집 모드에서 개별 점과 선을 직접 조작해야 합니다.

• 활용 : 디자인 시스템에서 아이콘 등 특정 요소를 최종적으로 확정하고 단순화할 때 사용합니다.

3.4.2 부울 연산의 비파괴적 특성

Figma의 부울 연산은 기본적으로 비파괴적(Non-destructive)입니다. 즉, 부울 연산을 적용하더라도 원본 도형들은 레이어 패널에서 여전히 개별적으로 존재하며, 언제든지 다시 분리하여 수정할 수 있습니다. 이는 디자인 과정에서 유연성을 제공하며, 나중에 변경이 필요할 경우 쉽게 수정할 수 있도록 합니다.

• 레이어 패널에서 부울 연산으로 만들어진 도형을 클릭하면, 그 아래에 원본 도형들이 나열되어 있음을 확인할 수 있습니다.
• 원하는 원본 도형을 클릭하여 직접 수정하거나, Separate Objects 옵션을 사용하여 다시 개별 도형으로 분리 할 수 있습니다.

3.5 효율적인 도형 작업 및 벡터 활용 팁

1. Grid와 Ruler 활용 : 정확한 크기와 간격으로 도형을 배치하려면 View 메뉴에서 show rulers와 show pixel grid를 활성화하고, 프레임에 Layout grid를 설정하여 활용하는 것이 좋습니다.

2. 정렬 및 분포 기능 : 여러 도형을 선택한 후 우측 속성 패널 상단에 나타나는 정렬 및 분포 아이콘을 사용하여 오브젝트들을 깔끔하게 정돈합니다.(가운데 정렬, 왼쪽 정렬, 수평/수직 균등 분포 등)

3. 복사 및 반복 (Dulicate) : Ctrl/Cmd +D는 마지막으로 수행한 이동 또는 복사 - 이동 작업을 반복합니다. 예를 들어, 도형을 복사하고 특정 간격으로 이동시킨 후 Ctrl/Cmd +D를 계속 누르면 동일한 간격으로 도형이 연속적으로 생성됩니다.

4. 컬러 피커(Eyedropper Tool, I) : 다른 오브젝트의 색상을 정확하게 가져오려면 Fill이나 Stroke 색상 선택 시 나타나는 스포이드 아이콘을 클릭하거나 I를 눌러 원하는 색상을 추출합니다.

5. 스타일 정의 및 재사용 : 자주 사용하는 색상이나 선 스타일은 우측 속성 패널에서 Style로 저장하여 재사용합니다. 이는 디자인 일관성을 유지하고 작업 속도를 높이는 데 매우 종요합니다.(향후'스타일 가이드'주제에서 자세히 다룰 예정입니다.)

6. 아웃라인 스토로크(Outline Stroke) : 선으로 그려진 아이콘이나 로고를 벡터 패스로 변환해야 할 때 (예 : SVG로 내보내기 전), 도형을 선택하고 Ctrl(window)/Cmd(Mac) + Shift + O 를 누르거나 마우스 우클릭하여 Outline Stroke를 선택합니다. 이렇게 하면 선이 면으로 변환되어 더욱 안정적으로 사용할 수 있습니다.

7. 이미지를 벡터화 : 비트맵 이미지를 직접 벡터화하는 기능은 Figma에 내장되어 있지 않지만, 외곽선을 따서 벡터로 변환하는 플러그인(Vectorize 등)을 활용하거나, 이미지를 배경으로 두고 펜 도구로 다시 그리는 방식으로 유사한 효과를 얻을 수 있습니다.

 

3.6 마치며 : 디자인의 기본기를 다지다.

이번 글에서는 Figma의 도형 도구를 마스터하고 벡터의 기본 원리인 점, 선, 핸들을 이해하는 방법을 상세히 알아보았습니다. 또한, 펜 도구를 활용하여 자유로운 형태를 그리고, 부울 연산을 통해 복잡한 도형을 효율적으로 만드는 방법까지 다루었습니다.

 

이러한 지식들은 Figma에서 만드는 모든 시각적 디자인 요소의 근간이 됩니다. 단순히 도형을 그리는 것을 넘어, 벡터의 원리를 이해하고 점과 선을 섬세하게 조절할 수 있다면 여러분의 디자인 표현력은 한층 더 풍부해질 것입니다. 꾸준한 연습만이 도형 도구와 펜 도구를 능숙하게 다룰 수 있는 길입니다.

 

다음 글에서는 텍스트 스타일과 레이아웃 : 가독성 높은 디자인의 시작이라는 주제로, 텍스트를 효과적으로 배치하고 스타일을 적용하여 정보 전달력을 높이는 방법에 대해 알아보겠습니다. 도형과 텍스트는 UI 디자인의 양대 산맥인 만큼, 다음 글도 여러분의 디자인 실력 향상에 큰 도움이 될 것입니다. 계속해서 Figma 마스터의 여정을 함께 하시죠!