techlist.io
KREN
figma

몇 초 만에 디자인에 실제 콘텐츠 (새 탭에서 열림)

prototypingfigma-pluginsgoogle-sheetsunsplashmapboxdata-population

실제 콘텐츠를 활용하면 목업이 실제 제품에서 어떻게 보일지 더 정확히 검증하고, 긴 텍스트나 다양한 데이터로 UI를 스트레스 테스트할 수 있다. 글은 Figma에서 이름·주소·이미지·지도 등을 자동으로 채워 주는 플러그인들을 소개하며, 반복적인 수동 입력을 줄이는 방법을 설명한다. 민감한 사내 데이터가 필요하다면 조직 전용 비공개 플러그인을 활용할 수도 있다.

실제 데이터로 디자인해야 하는 이유

  • Lorem Ipsum 같은 placeholder는 실제 콘텐츠의 길이와 형식을 충분히 반영하지 못한다.
  • 이름, 전화번호, 주소, 이미지, 지도 등 현실적인 데이터를 넣으면 다음을 검증할 수 있다.
    • 긴 텍스트가 레이아웃을 깨뜨리는지
    • 다양한 데이터 형식이 UI에 적합한지
    • 실제 서비스 화면과 목업의 차이가 큰지
  • 복잡한 문서의 여러 텍스트 레이어를 수동으로 채우는 작업을 자동화할 수 있다.

Google Sheets Sync

  • Google Sheets의 데이터를 Figma 레이어와 연결해 일괄 입력한다.
  • 사용 방법:
    • 공유 가능한 Google Sheets를 만든다.
    • 데이터 종류별로 열을 만들고, 각 열에 고유한 헤더를 지정한다.
    • Figma 레이어 이름을 #Name, #Address처럼 #과 열 헤더 조합으로 지정한다.
    • 플러그인에 시트 URL을 입력하고 Fetch & sync를 실행한다.
  • 스프레드시트의 수식과 편집 기능을 그대로 활용할 수 있어 데이터 수정과 재동기화가 편리하다.
  • 이미지 URL이 들어 있는 열도 지원하며, 해당 레이어에 이미지 채우기로 적용할 수 있다.

Unsplash

  • Unsplash의 고해상도 사진을 Figma 캔버스에 삽입한다.
  • 카테고리 선택, 무작위 이미지 선택, 직접 검색을 지원한다.
  • 이미지를 새 요소로 삽입하거나, 미리 선택한 요소에 이미지 채우기로 적용할 수 있다.
  • 개인 및 상업적 용도로 사용할 수 있는 대규모 무료 사진 라이브러리를 활용할 수 있다.

Data Lab

  • 변수 조합 방식으로 텍스트 콘텐츠를 생성한다.
  • 이름, 숫자, 날짜, 전화번호, 이메일, 목록 등의 데이터 형식을 제공한다.
  • 예를 들어 {NAME} · {EMAIL}처럼 변수를 조합해 이름과 이메일을 한 문자열로 만들 수 있다.
  • 단순한 형식으로 다양한 텍스트 샘플을 빠르게 생성할 수 있다.

Content Reel

  • 이름, 전화번호, 미국 주소, 숫자, 이메일, URL, 회사명, 사용자명, 국가 등의 텍스트 데이터를 제공한다.
  • 주소 같은 데이터 형식은 드래그 앤 드롭으로 구성 요소와 순서를 바꿀 수 있다.
  • 쉼표 배치까지 조정할 수 있어 원하는 데이터 포맷을 만들기 쉽다.
  • Segoe MDL2 아이콘 라이브러리도 제공하지만, 사용하려면 Segoe 아이콘 폰트를 설치해야 한다.
  • 작업 중 패널을 작게 접어 둘 수 있는 compact mode를 지원한다.
  • 당시에는 사용자 프로필 이미지 같은 이미지 기반 콘텐츠 지원도 예정되어 있었다.

Mapsicle

  • Mapbox 지도를 Figma 요소의 이미지 채우기로 삽입한다.
  • 지도 스타일, 확대 수준, 카메라 기울기와 회전을 설정할 수 있다.
  • 기본적으로 Light, Dark, Satellite, Streets 등의 테마를 제공한다.
  • Mapbox 액세스 토큰을 사용하면 직접 만든 사용자 정의 지도 테마도 적용할 수 있다.
  • 기존 지도의 크기를 바꿀 때 Refresh selected map을 사용하면 기존 확대 수준을 유지하면서 새 크기에 맞게 갱신할 수 있다.
  • 지도를 작은 프레임 안에 넣고 프로토타입의 오버플로를 가로·세로 스크롤로 설정하면 양방향 지도 탐색을 구현할 수 있다.

사내 데이터와 비공개 플러그인

  • 실제 서비스의 민감한 데이터나 내부 API를 활용해야 하는 경우 공개 플러그인보다 자체 플러그인이 적합하다.
  • Figma Organization 요금제 사용자는 회사 전용 비공개 플러그인을 만들고 배포할 수 있다.
  • 이를 통해 외부에 데이터를 노출하지 않고 실제 애플리케이션 데이터를 디자인 검증에 활용할 수 있다.

실무에서는 Google Sheets Sync로 구조화된 데이터를 반복 주입하고, Unsplash·Mapsicle로 이미지와 지도를 보완하면 빠르게 현실적인 목업을 만들 수 있다. 데이터가 민감하거나 서비스 API와 직접 연동해야 한다면 조직 전용 비공개 플러그인을 고려하는 것이 좋다.