실무에서 바로 쓰는 피그마 5 - 이미지 삽입과 편집 : 효율적인 시각 자료 활용

지금까지 Figma의 기본적인 인터페이스부터 프레임과 페이지 관리, 도형 도구와 벡터 원리, 그리고 텍스트 스타일링까지, 디자인의 기초를 탄탄히 다져왔습니다. 이제 사용자 인터페이스를 더욱 풍성하고 시각적으로 매력 있게 만드는 핵심 요소인 이미지에 대해 알아볼 차례입니다. 이미지는 정보 전달력을 높이고 감성을 자극하며, 제품의 전반적인 분위기를 형성하는 데 결정적인 역할을 합니다. 이 글에서는 Figma에서 이미지를 효율적으로 삽입하고, 기본적인 편집 기능을 활용하며, 최적화된 시각 자료를 통해 디자인의 완성도를 높이는 방법에 대해 상세히 다루겠습니다.

 

5.1 Figma에서 이미지 삽입하기 : 다양한 방법으로 가져오기

Figma에 이미지를 가져오는 방법은 매우 다양하며, 각 상황에 맞는 최적의 방법을 선택하는 것이 중요합니다.

 

5.1.1 드래그 앤 드롭 (Drag & Drop)

가장 직관적이고 빠른 방법입니다.

• 사용법 : 컴퓨터 폴더나 웹 페이지에서 이미지를 직접 Figma캔버스나 레이어 패널로 드래그하여 놓으면 됩니다.
• 특징 : 여러 이미지를 동시에 드래그하여 삽입할 수 있습니다. 캔버스에 드롭하면 원본 크기로 삽입되며, 레이어 패널에 드롭하면 현재 선택된 프레임이나 그룹 내에 삽입됩니다.

5.1.2 파일 가져오기 (Place Image/Video)

메뉴를 통해 이미지를 선택하여 삽입하는 방법입니다.

• 사용법 :  상단 메인 메뉴(Figma 아이콘) > File > Place image/video를 클릭합니다. 컴퓨터 탐색기가 열리면 삽입할 이미지를 선택하고 Open을 클릭합니다.
• 특징 : 이미지를 삽입한 후, 마우스 커서가 미리보기 이미지로 변경됩니다. 캔버스에 한 번 클릭하면 원본 크기로 삽입되고 드래그하면 원하는 크기로 삽입할 수 있습니다. 여러 이미지를 선택한 경우, 클릭할 때마다 순서대로 이미지가 배치됩니다.

5.1.3 복사 및 붙여넣기 (Copy & Paste)

웹에서 이미지를 가져올 때 유용한 방법입니다.

• 사용법 : 웹 페이지에서 이미지를 마우스 우클릭하여 이미지 복사(Copy image)를 선택하거나, 다른 디자인 도구에서 이미지를 복사(Ctrl/Cmd + C)한 후 Figma 캔버스에 Ctrl/Cmd + V로 붙여넣습니다.
• 특징 : 빠르게 이미지를 가져올 수 있지만, 이미지의 원본 파일 크기가 큰 경우 로딩에 시간이 걸릴 수 있습니다.

5.1.4 도형에 이미지 채우기 (Image Fill)

특정 도형이나 프레임 안에 이미지를 넣고 싶을 때 사용합니다.

• 사용법 : 이미지를 채울 도형(사각형, 원, 프레임 등)을 선택한 후, 우측 속성 패널의 Fill섹션에서 Solid를 클릭하고 드롭다운 메뉴에서 Image 또는 Video를 선택합니다. Choose image 또는 Choose video버튼을 클릭하여 이미지를 선택하거나, URL을 붙여넣어 비디오를 삽입니다.
• 특징 : 이미지가 자동으로 선택된 도형의 모양에 맞춰 마스킹(Clipping)됩니다. 이는 프로필 이미지, 카드 배경 등 특정 형태에 이미지를 넣을 때 매우 유용합니다.

5.2 이미지 속성 및 기본 편집 : 디자인에 맞게 조절하기

Figma는 삽입된 이미지에 대해 강력하고 유연한 편집 기능을 제공합니다. 우측 속성 패널의 Fill섹션에서 이미지 레이어를 선택하면 다양한 옵션을 조절할 수 있습니다.

 

5.2.1 이미지 채우기 모드 (Fill Mode)

1.Fill (채우기) :

• 설명 : 이미지가 선택된 레이어의 경계를 완전히 채우도록 확대합니다. 이미지의 가로/세로 비율이 레이어와 다르면 이미지가 잘려 나갈 수 있습니다.
• 활용 : 배경 이미지, 넓은 영역을 채우는 이미지 등 이미지가 잘려도 괜찮은 경우에 사용합니다.

2. Fit (맞춤) : 

• 설명 : 이미지가 선택된 레이어의 경계 안에 완전히 들어가도록 축소됩니다. 이미지의 가로/세로 비율이 레이어와 다르면 빈 공간(레터박스)이 생길 수 있습니다.
• 활용 : 이미지가 잘리지 않고 전체가 보여야 하는 경우(예 : 제품 사진, 갤러리 이미지)

3. Crop (자르기) : 

• 설명 : 이미지의 특정 부분을 직접 선택하여 자를 수 있습니다. 모드 선택 후 이미지 위에 나타나는 조절 핸들을 드래그하여 자를 영역을 지정합니다. Enter를 누르거나 다른 곳을 클릭하면 적용됩니다.
• 활용 : 이미지의 불필요한 부분을 제거하거나, 특정 인물/오브젝트에 초첨을 맞출 때 사용합니다.

4. Tile (타일) : 

• 설명 : 이미지를 원본 크기 또는 지정한 비율로 반복하여 레이어를 채웁니다. 패턴 배경이나 작은 아이콘을 반복할 때 유용합니다.
• 활용 : 배경 페턴, 텍스처 등 이미지를 반복적으로 사용해야 하는 경우

 

5.2.2 이미지 조정 (Image Adjustments)

Fill섹션의 이미지 썸네일 아래에 있는 영역을 통해 이미지의 색상 및 밝기 등을 조절할 수 있는 옵션이 나타납니다.

• Exposure (노출) : 이미지의 전체적인 밝기를 조절합니다.
• Contrast (대비) : 이미지의 가장 밝은 부분과 어두운 부분의 차이를 조절하여 선명도를 높이거나 부드럽게 만듭니다.
• Saturation (채도) : 이미지의 색상 강도(선명도)를 조절합니다. 값을 높이면 색상이 더 생생해지고, 낮추면 흑백에 가까워집니다.
• Temperature (색온도) : 이미지의 색온도를 조절하여 따뜻한(주황색) 또는 차가운(파란색) 느낌을 부여합니다.
• Tint (색조) : 이미지에 특정 색조를 추가합니다.
• Highlights (하이라이트) : 이미지의 밝은 영역의 밝기를 조절합니다.
• Shadows (그림자) : 이미지의 어두운 영역의 밝기를 조절합니다.
• Blacks (검은색) : 이미지의 가장 어두운 부분을 조절합니다.
• Whites (흰색) : 이미지의 가장 밝은 부분을 조절합니다.

이러한 조절 기능들은 간단한 색상 보정이나 분위기 연출에 유용하며, 외부 이미지 편집 도구를 거치지 않고도 Figma 내에서 대부분의 작업을 수행할 수 있도록 돕습니다.

 

5.2.3 블렌드 모드 (Blend Mode)

이미지 레이어의 투명도(Opacity) 설정 옆에 있는 드롭다운 메뉴를 통해 블렌드 모드를 변경할 수 있습니다. 블렌드모드는 이미지 레이어와 아래 레이어의 색상을 혼합하는 방식을 결정합니다. Multiply, Screen, Overlay, Soft Light등 다양한 모드가 있으며, 이를 활용하여 독특한 시각적 효과나 텍스처를 만들 수 있습니다.

 

5.3 마스크(Mask) 활용하기 : 이미지의 형태를 자유롭게 변형

Figma에서 이미지를 특정 모양으로 자르거나 가두는 가장 강력한 방법은 마스크(Mask)를 활용하는 것입니다. 마스크는 하나의 도형이나 텍스트를 이용하여 그 아래에 있는 이미지 또는 레이어를 원하는 형태로 보여주거나 숨기는 기능입니다.

 

5.3.1 마스크 생성 방법

1. 두개의 레이어 준비 : 마스크로 사용할 도형 또는 텍스트 레이어(마스크 레이어)와 마스킹될 이미지 또는 다른 레이어(콘텐츠 레이어)를 준비합니다.

2. 레이어 순서 : 마스크 레이어가 항상 콘텐츠 레이어 위에 위치해야 합니다. 레이어 패널에서 순서를 조절할 수 있습니다.

3. 마스크 적용 : 두 레이어를 모두 선택한 후, 상단 툴바 중앙에 있는 Use as mask 아이콘(원 안에 구멍이 뚫린 모양)을 클릭하거나, Ctrl + Alt + M(Window), Cmd + Option + M(Mac)단축키를 누릅니다.

5.3.2 마스크의 특징 및 활용

• 비파괴적 편집 : 마스크는 비파괴적 방식이므로, 언제든지 마스크된 이미지를 움직이거나 마스크 도형의 형태를 변경할 수 있습니다. 원본 이미지는 손상되지 않습니다.
• 다중 마스크 : 여러 개의 도형을 Union Selection 등으로 합쳐 하나의 마스크로 사용하거나, 여러 이미지에 하나의 마스크를 적용할 수도 있습니다.
• 활용 예시 :
  원형 프로필 이미지 : 원 도형을 마스크로 사용하여 사각형 이미지를 원형으로 만듭니다.
  불규칙한 형태의 이미지 : 펜 도구로 그린 복잡한 도형을 마스크로 사용하여 이미지를 원하는 형태로 자릅니다.
  텍스트 마스크 : 텍스트 레이어를 마스크로 사용하여 텍스트 안에 이미지를 채워 넣는 효과를 만듭니다.

 

5.4 이미지 최적화 및 관리 : 효율적인 워크플로우를 위해

이미지는 디자인 파일의 크기와 성능에 큰 영향을 미칩니다. 효율적인 이미지 최적화 및 관리 습관은 Figma 파일의 로딩 속도를 높이고 협업 시 불필요한 지연을 줄이는 데 중요합니다.

 

5.4.1 적절한 이미지 해상도 사용

• 불필요한 고해상도 지양 : 웹이나 모바일 디자인에서는 인쇄물만큼 높은 해상도의 이미지가 필요하지 않습니다. 화면에 표시될 실제 크기보다 훨씬 큰 이미지를 사용하면 파일 용량만 늘어나고 성능에 악영향을 미칠 수 있습니다.
• 레티나(Retina) 디스플레이 고려 : 2x, 3x 등 고해상도 디스플레이를 고려하여, 필요한 경우 원본 이미지의 2배 정도 크기(예 : 100px 아이콘이면 200px 이미지)를 사용하는 것이 좋습니다. 하지만 무작정 큰 이미지를 사용하는 것은 피해야 합니다.

5.4.2 이미지 내보내기 최적화(Export Optimization)

Figma는 디자인된 이미지를 다양한 형식과 배율로 내보낼 수 있는 강력한 기능을 제공합니다.

1. 내보낼 오브젝트 선택 : 이미지, 프레임, 슬라이스(Slice Tool) 등 내보낼 요소를 선택합니다.

2. Export 센션 : 우측 속성 패널의 Export섹션에서 +버튼을 클릭합니다.

3. 형식 선택 : 

• PNG : 투명 배경을 지원하며, 웹/앱 UI 이미지에 가장 널리 사용됩니다.
• JPG : 투명 배경을 지원하지 않지만, 파일 크기가 작아 사진이나 배경 이미지에 적합합니다. 압축률을 조절할 수 있습니다.
• SVG : 벡터 이미지 형식으로, 아이콘이나 로고처럼 확대/축소 시 깨지지 않아야 하는 벡터 요소에 적합합니다. 코드 기반이므로 개발자에게 유용합니다. (단, 이미지를 직접 SVG로 변환하지는 않음, 벡터로 마들어진 도형만 해당)
• PDF : 인쇄용이나 문서 공유용으로 적합합니다.

4.배율 선택 : 1x, 2x, 3x 등 다양한 배율로 이미지를 내보낼 수 있습니다. 이는 다양한 디바이스 해상도에 대응하기 위해 필요합니다. 0.5x, 1.5x, w, h 등을 직접 입력하여 특정 너비나 높이로 내보낼 수도 있습니다.

5.미리보기 : Export 섹션에서 내보낼 이미지의 미리보기를 확인할 수 있습니다.

6.내보내기 : Export[선택된 오브젝트명] 버튼을 클릭하여 이미지를 저장합니다.

 

 

5.4.3 플러그인 활용(Unsplash, Pexels 등)

디자인에 필요한 고품질 스톡 이미지를 빠르게 찾고 삽입하는 데는 관련 플러그인을 활용하는 것이 매우 효과적입니다. 

• Unsplash / Pexels : 고품질의 무료 스톡 이미지를 Figma 내에서 바로 검색하고 삽입할 수 있습니다. 필터링 기능을 통해 원하는 분위기나 주제의 이미지를 빠르게 찾을 수 있습니다.
• Content Reel : 더미 이미지(아바타, 배경 등)를 빠르게 채워 넣는 데 유용합니다.

5.4.4 이미지 정리 및 이름 지정

• 레이어 이름 : 삽입된 이미지 레이어의 이름을 명확하게 지정하여 레이어 패널에서 쉽게 찾을 수 있도록 합니다. (예 : main-hero-bg, user-profile-avatar)
• 별도 페이지 관리 : 프로젝트에서 사용되는 모든 이미지 에셋을 별도의 페이지(예 : Assets - Images)에 모아두면 관리하기 편리합니다.

 

5.5 마치며 : 시각적 소통의 핵심, 이미지 디자인

 

이번 글에서는 Figma에서 이미지를 효율적으로 삽입하고, 기본적인 편집 기능을 활용하여 디자인에 맞게 조절하는 방법, 그리고 마스크 기능을 통해 이미지의 형태를 자유롭게 변형하는 방법을 깊이 있게 살펴보았습니다. 또한, 이미지 최적화 및 관리 팁을 통해 디자인 파일의 성능을 유지하고 협업 효율성을 높이는 방법까지 다루었습니다.

 

이미지 텍스트와 함께 사용자에게 정보를 전달하고 감성을 자극하는 가장 강력한 시각적 도구입니다. 단순히 이미지를 배치하는 것을 넘어, 적절한 편집과 최적화를 통해 디자인의 메시지를 명확히 전달하고 사용자 경험을 풍부하게 만들 수 있습니다.

 

다음 글에서는 Figma의 가장 혁신적인 기능 중 하나인 오토레이아웃(Auto Layout) : 반응형 디자인의 필수요소에 대해 다룰 예정입니다. 오토 레이아웃은 여러분이 디자인하는 컴포넌트와 화면을 유연하고 반응형으로 만들어, 디자인 수정 시간을 획기적으로 줄여줄 것입니다. 이미지와 텍스트를 효율적으로 배치하고 관리하는 방법을 익혔으니, 이제 오토 레이아웃으로 그 모든 것을 더욱 강력하게 만들어봅시다. 계속해서 Figma 마스터의 여정을 함께 하시죠!