다국어 앱 UI, 어떻게 관리하시나요?

로

우리 회사는 다국어앱과 웹사이트를 지원하는 회사다.

다국어를 사용하는 회사긴 하지만 서로 결국은 영어로 소통을 하지만… 한가지 언어로도 소통이 안되는데 다국어라니;;

처음에는 한국어 혹은 영어 하나로만 구성했던 UI가
점차 중국어, 일본어, 독일어, 프랑스어, 아랍어처럼 다양한 언어로 확장되기 시작하면서
디자이너는 텍스트 길이, 폰트 차이, 레이아웃 깨짐 등의 문제를 한꺼번에 감당해야 합니다.

이럴 때마다 매번 화면을 복사해서 각 언어 버전을 따로 만들다 보면
관리도 어렵고, 수정 시 누락되는 일이 빈번해집니다.
Figma는 기본적으로 다국어 전용 기능은 없지만,
시스템처럼 정리하고 반복 가능하게 만드는 방법은 분명 존재합니다.
이번 글에서는 실제로 다국어 UI를 Figma에서 체계적으로 관리하는 방법을 단계별로 정리해보겠습니다.

1. 다국어를 고려한 레이아웃 기본 설계

처음부터 다국어를 염두에 두고 레이아웃을 짜는 것이 가장 중요합니다.
영어로 딱 맞았던 버튼 텍스트가 독일어나 프랑스어로 바뀌었을 때
두 줄로 밀리거나, 아이콘과 겹치는 경우가 생각보다 자주 발생하죠.

실무 팁

  • 버튼은 최소 20~30% 여유 공간 확보
  • 레이블 영역은 최대 언어 기준으로 텍스트 폭 예측
  • Auto Layout으로 Hug 콘텐츠 대신 Fill container 사용
  • 다국어 가능성이 있는 컴포넌트는 미리 Variants로 준비

2. 언어별 텍스트 관리 방식

Figma 자체는 텍스트 문자열 관리 기능이 없기 때문에
외부 데이터를 가져와 연동하거나,
정리된 텍스트를 수동 관리하는 구조를 세워야 합니다.

가장 많이 쓰는 방법 3가지

  1. Google Sheets 연동 (플러그인 활용)
    • 언어별 텍스트를 시트에 정리하고,
      Figma에서 플러그인(Google Sheets Sync 등)으로 불러오는 방식
    • 유지보수에 유리하고, 다국어 교정도 편리함
  2. Variants 기반 다국어 컴포넌트 제작
    • 각 언어 버전을 Variant로 정리
    • 하나의 버튼, 타이틀 컴포넌트 안에 영어/한국어/중국어 등 포함
    • 변경 시 빠르게 전환 가능
  3. 페이지 또는 프레임별 언어 분리
    • 한국어 / 영어 / 일본어 등 언어별로 페이지를 분리하여 관리
    • 파일이 복잡해지지만, 리뷰할 때는 명확함

3. 폰트와 타이포그래피 대응

언어별로 같은 크기의 글씨라도 실제로 차지하는 공간은 다릅니다.
예를 들어, 한글과 일본어는 같은 크기에서도 다소 다르게 보이고,
중국어는 자간이 좁고 높이가 더 커 보입니다.

실무 대응 방식

  • 폰트 패밀리를 언어별로 따로 설정
    • 예: 영문 → Inter, 한글 → Noto Sans KR
  • Text Style 이름에 언어명을 포함
    • 예: Heading/EN, Heading/KR
  • 시스템 상에서는 동일 스타일명을 공유하되, 실제 UI에서 구분 적용

4. RTL 언어(아랍어, 히브리어) 대응

글을 오른쪽에서 왼쪽으로 읽는 언어들은
레이아웃도 반대 방향으로 정렬해야 하기 때문에
초기에 대비하지 않으면 전체 구조를 뒤집어야 하는 상황이 생깁니다.

Figma 적용 팁

  • Auto Layout 정렬 방향을 Right-to-Left로 설정
  • Flex wrap 대신 정렬 기준(Alignment)을 활용한 구조 설계
  • 아이콘, 텍스트 위치 자동 반전 고려 (mirroring)

5. 다국어 QA 및 검수 체크리스트

디자인이 완료됐다고 해도, 실제 앱이나 웹사이트에서
텍스트 잘림, 겹침, 잘못된 언어 적용 같은 이슈가 자주 발생합니다.
아래 항목은 디자인 리뷰 단계에서 꼭 확인하는 것이 좋습니다.

  • 모든 언어에서 텍스트가 잘리지 않는가
  • 줄바꿈이나 텍스트 크기로 인한 레이아웃 오류가 없는가
  • 버튼/라벨 등의 위치가 의도대로 적용되는가
  • 언어별 타이포 스타일이 일관성 있게 적용되었는가
  • RTL 언어에서 방향 전환이 정상 작동하는가

마무리하며

다국어 UI 디자인은 번역만 잘하면 되는 일이 아닙니다.
언어마다의 시각적 특성, 레이아웃 구조, 타이포그래피 차이까지 고려해야 하기 때문에
디자이너가 처음부터 시스템적으로 설계하지 않으면
결과물의 완성도는 물론, 협업 효율도 떨어지게 됩니다.

Figma는 이런 다국어 디자인을 직접 지원하진 않지만,
Auto Layout, Variants, 텍스트 스타일, 외부 데이터 연동 등을 활용하면
충분히 체계적이고 확장 가능한 다국어 디자인 시스템을 만들 수 있습니다.

지금부터라도 화면 하나를 만들 때 “이 문장이 다른 언어로는 얼마나 길어질까?”를
먼저 고민하면서 시작해 보세요. 현업이 영어문장과 일본어 문장을 주지 않아서 화가 나겠지만..
글로벌 UX의 품질은 결국 이런 디테일에서 결정됩니다.

Figma Dev Mode로 개발자와 싸우지 않는 방법 – 협업 스트레스 줄이기

로

디자인 파일을 넘기면, 개발자에게서 이런 말 한 번쯤 들어보셨을 겁니다.
“이거 여백 기준이 뭐죠?”
“폰트 사이즈가 Figma랑 다르게 느껴져요.”
“이거 실제로 구현 가능한 거 맞나요?”

그럼 디자이너들은 생각하죠. “진짜 센스 없다…” 딱 보면 모르나? 답답한 개발자들아…

한 번에 이해되면 좋겠지만, 실제 협업에서는 소소한 오해가 쌓여
개발자와 디자이너 사이에 눈치 싸움이 벌어지기도 하죠.
이런 문제를 줄이기 위해 등장한 게 바로 Figma Dev Mode입니다.
2023년부터 본격적으로 도입된 이 기능은,
기존 Inspect 모드보다 훨씬 더 실무 친화적인 구조를 갖추고 있습니다.

이번 글에서는 Dev Mode를 제대로 활용하면 협업 스트레스를 얼마나 줄일 수 있는지,
그리고 디자이너는 어떤 준비를 해둬야 개발자가 좋아하는 디자인 파일을 만들 수 있는지 정리해 보겠습니다.

Dev Mode, 기존 Inspect랑 뭐가 다른가요?

기존 Inspect 모드는 기본적인 사이즈, 색상, 폰트 정보를 제공해주는 뷰였습니다.
하지만 Dev Mode는 개발자 입장에서 보기 좋게 구조화된 정보를 보여주고,
컴포넌트 구조, 네이밍, 속성값, 디자인 시스템 연결 상태까지 확인할 수 있도록 진화했죠.

Dev Mode에서는 다음과 같은 기능이 추가로 제공됩니다.

  • CSS, iOS, Android 코드 자동 생성 (더 깔끔하고 일관성 있게)
  • 컴포넌트/변수 적용 여부 확인
  • 코드 스니펫 복사
  • 주석(Comment) 기능과 병행 가능
  • VSCode, GitHub 등 개발 환경 연동 지원

즉, Dev Mode는 단순한 디자인 뷰어가 아니라,
디자인-개발 간의 브릿지를 위한 가이드 도구라고 보는 게 더 정확합니다.

디자이너가 Dev Mode를 활용하기 위해 해야 할 준비

Dev Mode는 개발자를 위한 뷰이지만, 디자이너가 준비하지 않으면
결국 보여줄 정보가 없는 빈 껍데기가 됩니다.
아래 항목을 준비해두면, 협업이 훨씬 부드러워집니다.

1. 컴포넌트 기반 구조

기본 버튼, 카드, 리스트 등 반복 요소는 반드시 컴포넌트로 정의해야 합니다.
컴포넌트 이름은 Btn/Primary/Large처럼 계층적 구조로 정리하면 개발자가 보기 좋습니다.

근데 이것도 소통을 위한것인데 이런 배려조차 하기 싫을때가 많습니다.

2. 디자인 토큰 활용

색상, 폰트, 여백은 전부 스타일로 연결해둬야 Dev Mode에서 제대로 표시됩니다.
직접 입력한 값은 코드로 추출되지 않거나, 중복 생성될 수 있습니다.

3. Auto Layout, Constraints 설정

디자인 요소들의 정렬, 반응형 대응을 위해 Auto Layout과 Constraints 설정을 정확히 해야 합니다.
Dev Mode에서는 이 설정값이 그대로 출력되므로, 개발자도 구현 방법을 쉽게 유추할 수 있습니다.

4. 네이밍 및 설명 구조

프레임 이름, 레이어 이름, 컴포넌트 이름을 일관성 있게 설정해야 합니다.
불필요한 “Frame 123”, “Rectangle 34” 같은 네이밍은 혼란만 키웁니다.

개발자 입장에서 Dev Mode가 좋은 이유

디자이너 입장에서는 조금 귀찮을 수 있지만,
개발자 입장에서는 Dev Mode가 정말 고마운 기능입니다.

  • 여백이나 위치를 직접 계산하지 않아도 됨
  • 토큰 값 기반으로 CSS 변수까지 추출 가능
  • 디자인 시스템과 연동된 컴포넌트인지 바로 확인 가능
  • 코드 복사 후 붙여넣기만 하면 구조 잡을 수 있음

특히 디자인 시스템 기반의 토큰 값을 Dev Mode로 확인할 수 있다는 점에서,
“디자인과 코드 간의 일관성 확보”에 큰 도움이 됩니다.

실무에서 협업을 원활하게 만드는 팁

  • Dev Mode 공유 전에 프레임 하나씩 점검하기
    사이즈, 스타일, 정렬이 누락되었는지 확인하고 링크 전달하는 습관이 중요합니다.
  • 디자인 시스템 문서와 함께 링크 전달하기
    Dev Mode만 봐도 되지만, 전체 기준을 따로 설명해주면 개발자 입장에서 훨씬 명확합니다.
  • 버전 업데이트 시 ‘코멘트’ 기능 활용하기
    수정 사항을 Dev Mode 내에서 바로 남겨주면 개발자도 트래킹하기 쉽습니다.

마무리하며

Figma Dev Mode는 협업 스트레스를 줄여주는 도구입니다.
하지만 그 기능이 온전히 작동하려면,
디자이너가 구조와 스타일을 잘 정리해둬야 효과를 볼 수 있습니다.

디자인을 넘기고 나서 피드백이 끊이지 않는 상황을 줄이고 싶다면
Dev Mode를 기준으로 다시 한번 파일 구조를 점검해보는 것이 좋습니다.
지금부터라도 “개발자가 보기 편한 디자인”을 의식하면서 작업하면,
협업 과정이 훨씬 매끄러워질 수 있습니다.

다음 글에서는 실제 Dev Mode를 활용해 디자인 시스템 기반 UI를 전달한 사례를 소개하겠습니다.
실무에 바로 적용 가능한 Dev Mode 활용법을 더 깊이 있게 다뤄보겠습니다.

디자인 시스템 제대로 만들고 싶다면 – Figma 토큰 시스템

로

디자인 시스템을 만든다는 건 단순히 예쁜 UI 컴포넌트를 정리하는 게 아닙니다.
브랜드가 지켜야 할 일관성과 논리를 ‘코드처럼’ 관리하고 유지한다는것에 가깝죠.


그래서 디자인 시스템을 처음 설계할 때 가장 먼저 고민해야 할 것은
색상, 타이포그래피, 여백, 라운드, 쉐도우 같은 기초적인 속성값들인데요.

이런 속성값을 체계적으로 관리하는 방법이 바로 디자인 토큰 Design Token 입니다.
그리고 다행히도, Figma 안에서 이 디자인 토큰 개념을 꽤 강력하게 구현할 수 있습니다.
오늘은 디자인 시스템을 ‘제대로’ 만들고 싶다면 왜 토큰 시스템부터 시작해야 하는지,
그리고 Figma에서는 이를 어떻게 실무적으로 다뤄야 하는지를 설명해 보겠습니다.

디자인 토큰이란 무엇인가요?

디자인 토큰은 디자인 속성을 코드처럼 이름을 붙여 관리하는 방식입니다.
예를 들어 색상을 코드로 표현하면 다음과 같이 쓸 수 있습니다.

json복사편집"color-primary": "#0052CC"
"spacing-small": "8px"
"font-heading": "Roboto, 24px, Bold"

이 값들은 디자인 파일 내에서만 의미가 있는 것이 아니라,
개발자에게 넘겨줄 때도 재사용 가능한 기준점이 되죠.
변수처럼 이름만 바꾸면 전체 시스템에 반영되기 때문에
디자인의 확장성, 유지보수성, 협업 효율성이 모두 높아집니다.

Figma에서 토큰처럼 관리하는 방법

Figma에는 “디자인 토큰”이라는 공식 기능은 없지만,
**스타일(Styles)**과 컴포넌트 시스템, 그리고 최근에는 플러그인을 통해
토큰과 유사한 구조를 구현할 수 있습니다.

1. 색상 토큰

  • Primary / 500, Secondary / 300, Neutral / 50 등으로 이름을 규칙화합니다.
  • 스타일 패널에서 Color Styles를 만들어두고, 디자인 전체에 연결합니다.
  • 브랜드 색상이 바뀌더라도 스타일만 수정하면 전체에 적용됩니다.

2. 텍스트 토큰

  • Heading / XL, Body / Small, Caption / Light 등의 이름 규칙을 설정합니다.
  • Text Style을 계층적으로 관리하면, 타이포그래피 시스템이 안정적으로 유지됩니다.

3. 여백, 라운드, 쉐도우

  • Figma 기본 기능에서는 여백과 Radius 같은 수치를 직접 변수화할 수는 없지만,
  • Spacing 컴포넌트 또는 레이아웃 템플릿을 만들어서 관리할 수 있습니다.
  • 최근에는 Tokens Studio for Figma 플러그인을 사용하면
    여백, 라운드 값도 변수처럼 설정 가능합니다.

플러그인 활용: Tokens Studio

실제 토큰처럼 Figma에서 데이터를 관리하고
JSON 파일로 내보내기까지 가능한 도구가 바로 Tokens Studio for Figma입니다.
이 플러그인은 다음과 같은 기능을 제공합니다.

  • 컬러, 타이포, 여백, 그리드 등의 토큰을 JSON으로 정리
  • 테마별(라이트/다크) 토큰 세트 관리
  • 코드와의 일관성 확보 (개발자와 협업할 때 유리)
  • GitHub와 연동해 토큰 변경 사항을 버전으로 관리 가능

즉, 디자인 시스템을 코드처럼 운영하고 싶다면
이 플러그인은 사실상 필수에 가깝습니다.

실무에서 어떻게 적용하나요?

  1. 기초 스타일을 토큰처럼 이름 붙여 설정합니다.
    • 개발자가 그대로 가져갈 수 있는 네이밍이 이상적입니다.
  2. 컴포넌트 내부에 토큰 스타일만 연결합니다.
    • 컴포넌트 내부에 직접 색상이나 폰트 수치를 입력하는 방식은 피해야 합니다.
  3. 중앙에서 토큰만 변경하면 전체 UI가 바뀌도록 구조를 짭니다.
    • 하나의 버튼을 수정하면 전체 버튼이 업데이트되도록 설계하는 것이 핵심입니다.
  4. 디자인과 코드의 토큰이 동일한 기준으로 작동하도록 맞춥니다.
    • 디자인 시스템 문서와 실제 CSS 변수 이름이 다르면 혼란이 생기기 쉽습니다.

마무리하며

디자인 시스템을 오래 쓰려면 무엇보다 기초 토대를 탄탄하게 쌓는 것이 중요합니다.
그 기초가 바로 디자인 토큰이고,
그 토큰을 Figma에서 체계적으로 관리하는 방식이 곧 디자인 시스템의 품질을 결정합니다.

디자인이 점점 시스템화되고 협업 중심으로 바뀌는 시대에서
Figma로 토큰 기반 디자인 시스템을 먼저 구성해두는 건
디자이너로서 갖춰야 할 중요한 경쟁력 중 하나가 될 것입니다.

다음 글에서는 Tokens Studio를 실무에서 세팅하는 과정과
디자인 시스템 문서에 반영하는 실제 사례를 함께 정리해 보겠습니다.

코딩을 몰라도 Figma 자동화 – JSON 데이터를 UI에 연결하는 법

로

디자인을 하다 보면 텍스트나 이미지처럼 반복되는 데이터를 프레임에 하나하나 붙여 넣는 일이 꽤 귀찮을 때가 있어요.


예를 들어 제품 목록, 사용자 카드, 뉴스 피드처럼 반복되는 UI를 작업할 때 매번 복사해서 붙이고, 또 수정하고…
이런 반복 작업은 시간도 많이 들고, 오류가 생기기 쉽습니다.
그럴 때 Figma에서 JSON 데이터를 자동으로 UI에 연결하는 방법을 알게 되면, 업무 효율이 눈에 띄게 올라갑니다.

신기하게도, 이 작업을 코딩 없이도 할 수 있습니다.
단순히 JSON 파일만 준비하면, 텍스트, 이미지, 버튼 텍스트까지 한 번에 불러와 UI에 적용할 수 있습니다.
자, 어떤 방식으로 하는지 지금부터 알아보시죠.

JSON이 뭐길래, 왜 Figma에 연결하나요?

JSON은 JavaScript Object Notation의 약자로,
쉽게 말해 데이터를 깔끔하게 정리해놓은 텍스트 파일입니다.
예를 들어 이런 식이죠:

json
[
  {
    "title": "여기가 제목이구요 01",
    "price": "$9,000",
    "image": "https://example.com/샘플.jpg"
  },
  {
    "title": "여기가 제목이구요 02",
    "price": "$9,000",
    "image": "https://example.com/샘플1.jpg"
  }
]

이런 형식의 데이터를 제품 카드에 자동으로 넣고 싶을 때,
Figma에서는 플러그인을 활용하면 아주 쉽게 연결할 수 있습니다.

사용 준비 – 필요한 플러그인

대표적으로 많이 사용하는 플러그인은 다음과 같습니다.

  1. Google Sheets Sync by Figma
    • Google Sheets와 연동하여 데이터를 UI에 자동 배치
    • JSON처럼 구조화된 데이터를 Sheet에 붙여넣고 연동 가능
  2. JSON to Figma
    • JSON 파일을 직접 읽어 Figma에 텍스트나 이미지로 삽입
    • 간단한 UI 반복 요소에 아주 유용
  3. Content Reel
    • JSON 데이터를 미리 불러와 텍스트 및 이미지로 배치
    • 다국어 텍스트, 사용자 이름, 이메일 주소 같은 더미 콘텐츠 넣기에 적합

이번 글에서는 Google Sheets Sync 플러그인을 기준으로 설명드리겠습니다.
JSON을 직접 붙여넣거나 변환할 수 있고, 실시간 업데이트까지 가능하기 때문에
실무에서 가장 많이 사용됩니다.

단계별 설명 – 코딩 없이 자동으로 붙이기

  1. Google Sheet 만들기
    • Google 스프레드시트에 JSON 구조를 복사해서 붙여넣습니다.
    • 첫 번째 줄은 키 이름 (예: title, price, image 등)
    • 두 번째 줄부터는 실제 데이터 입력
  2. Figma에서 플러그인 실행
    • 플러그인 > Google Sheets Sync 실행
    • UI 요소에 텍스트나 이미지를 미리 배치해 둡니다
  3. 텍스트 요소에 속성 연결하기
    • 예를 들어 제품명 텍스트 상자를 선택한 뒤
      {title} 형식으로 키 값을 입력해 둡니다
    • 이미지 프레임에도 {image}로 설정 가능
  4. Google Sheets 링크 붙이기 & 싱크
    • 스프레드시트 URL을 플러그인에 입력하고 연결
    • “Sync” 버튼을 누르면 자동으로 데이터가 삽입됩니다

실제로 어디에 쓸 수 있을까요?

  • e커머스 제품 카드
    제품 이름, 가격, 이미지, 버튼을 자동으로 반복 UI에 넣을 수 있습니다.
  • 팀 멤버 소개 페이지
    이름, 직함, 프로필 사진 등을 텍스트와 이미지로 쉽게 연결 가능합니다.
  • 뉴스나 블로그 리스트 디자인
    제목, 날짜, 요약 텍스트를 자동 삽입하여 가독성 높은 리스트를 빠르게 완성할 수 있습니다.
  • 다국어 UI 테스트
    한 화면에서 여러 언어 데이터를 불러와 비교할 때도 유용합니다.

마무리

Figma는 더 이상 단순한 디자인 툴이 아닙니다.
데이터와 연결해서 반복되는 UI를 빠르게 구성하고,
나중에는 실제 개발 데이터와 유사한 환경에서 디자인 검토까지 가능하게 합니다.

이번에 소개한 JSON 자동화 방식은 코딩을 몰라도 충분히 쓸 수 있으며,
팀 작업 속도와 정확도를 동시에 높여줍니다.
단순 반복 작업에 시간을 쓰기보다는,
이런 툴을 잘 활용해서 디자이너가 해야 할 더 중요한 작업에 집중해 보세요.

다음 글에서는 이 방식으로 만든 템플릿을 저장하고,
다른 프로젝트에도 재사용하는 방법을 다뤄보겠습니다.
UI 자동화는 생각보다 훨씬 쉬울 수 있습니다.

Figma Auto Layout이 자꾸 꼬일 때, 정렬이 정확해지는 설정법 총정리

로

Figma를 사용하다 보면 Auto Layout은 잘알면 편하지만 사용법이 조금은 애매하죠?


처음에는 버튼이나 카드처럼 단순한 컴포넌트를 정렬할 때 유용하게 느껴지지만,
조금만 구조가 복잡해지면 정렬이 무너지고 간격이 뒤죽박죽되는 경우를 자주 겪게 돼요.
특히 모바일이나 반응형 UI를 설계할 때는 작은 오차가 전체 레이아웃에 영향을 주기 때문에
Auto Layout을 정확하게 이해하면서 사용해야 합니다.

이번 글에서는 Auto Layout이 꼬이지 않도록 설정하는 핵심 원리와 정렬이 정확해지는 설정법을 단계별로 정리해보겠습니다.

Auto Layout의 기본 구조, 다시 정확히 이해해야 합니다

Auto Layout은 프레임 내부에 있는 객체들의 방향, 정렬, 간격, 여백 등을 자동으로 관리해주는 기능입니다.
정렬을 정확하게 유지하려면 먼저 이 네 가지 요소를 기준으로 구조를 설계해야 합니다.

  1. Direction (방향)
    • 수평(Horizontal) 또는 수직(Vertical) 중 하나를 선택
    • 내부 요소의 배치 방향이 명확하지 않으면 정렬이 흐트러집니다.
  2. Spacing (간격)
    • 자식 요소 간 간격을 지정하는 값
    • 요소를 추가하거나 제거해도 자동 간격을 유지할 수 있습니다.
  3. Padding (여백)
    • 프레임 바깥쪽 테두리와 콘텐츠 사이의 간격을 의미
    • 상하좌우를 개별로 조정할 수 있으며, 이 값이 올바르지 않으면 정렬이 어색해집니다.
  4. Alignment (정렬 기준점)
    • 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 등 기준점을 설정
    • 내부 요소가 다를 경우 기준점 설정이 핵심이 됩니다.

실제로 많이 헷갈리는 설정 실수 TOP 3

1. Resize 속성을 제대로 설정하지 않음

Auto Layout 내 요소들은 기본적으로 Hug contents로 설정되는데요.
이럴 경우, 텍스트나 이미지의 크기가 커지면 전체 프레임이 함께 튀어버릴 수 있습니다.
반대로 Fill container로 설정하면 부모 프레임의 폭에 맞춰 늘어나기 때문에
정해진 구조에서 안정적으로 작동합니다.

팁: 텍스트가 들어간 버튼은 내부 텍스트는 Hug, 버튼 배경은 Fill로 설정하는 것이 가장 자연스럽습니다.

2. 간격(Spacing)이 아니라 Margin을 조정하려는 실수

컴포넌트 간의 간격을 조정할 때, 종종 외부 여백을 따로 지정하려는 경우가 있습니다.
하지만 Auto Layout 구조 안에서는 margin 개념이 없고 spacing 값으로 전체를 조정해야 하기 때문에
하나의 요소만 튀어나오는 문제가 생깁니다.
이럴 때는 Dummy Spacer(빈 프레임)를 삽입해서 공간을 제어하는 방식이 더 안정적입니다.

3. Nest된 구조에서 정렬 충돌

Auto Layout을 중첩해서 사용할 때 자식 프레임과 부모 프레임의 방향이 다르면
정렬이 꼬이거나 의도하지 않은 위치로 밀리는 현상이 생깁니다.
이럴 땐 각각의 레벨에서 direction과 alignment 설정을 정확히 확인해야 합니다.

정렬이 정확해지는 실전 설정 팁

여기서 진짜 중요한 팁이니 이 부분을 반드시 이해하고 사용해주세요.

  • 레이어 순서를 항상 왼쪽 → 오른쪽 / 위 → 아래로 맞춰주세요
    정렬 기준은 레이어 순서와 일치하기 때문에 드래그 순서가 중요합니다.
  • Spacing between items와 Padding은 명확히 구분해 주세요
    내부 아이템 간 간격과 외곽 여백은 개념적으로 완전히 다릅니다.
  • Fill vs Hug vs Fixed의 차이를 이해하세요
    Fill은 부모를 기준으로 크기를 맞추고, Hug는 콘텐츠 기준, Fixed는 고정입니다.
    컴포넌트가 작동 방식에 따라 다르게 설정되어야 합니다.
  • Smart selection은 정렬 구조를 망가뜨릴 수 있습니다
    여러 개의 요소를 선택하고 간격 조정할 때, Auto Layout 설정이 덮여버리는 경우가 생기기 때문에
    반드시 전체 구조를 파악한 뒤 조작하는 것이 좋습니다.

마무리

Auto Layout은 단순한 정렬 도구가 아니라,
디자인 시스템을 구성하고 반응형 UI를 설계할 때 핵심이 되는 구조 설계 도구입니다.
하지만 이 기능은 잘못 쓰면 오히려 시간을 더 낭비하게 만드는 원인이 되기도 합니다.

이번 글에서 정리한 원칙과 설정 방법을 바탕으로,
Auto Layout을 더욱 정밀하게 사용해보시기 바랍니다.
꼬이지 않는 Auto Layout을 만드는 가장 좋은 방법은
처음부터 방향, 크기, 여백, 정렬을 기준으로 구조를 짜는 것이라는 점, 꼭 기억해 두세요.

다음 글에서는 실제 디자인 시스템 구축에서 Auto Layout이 어떤 방식으로 쓰이는지
실전 사례 중심으로 소개해보겠습니다.

Figma 커스텀플러그인 만들기 – 업무효율성 극대화 방법

로

Figma는 기본적으로 매우 강력한 디자인 도구지만

모든 사용자의 요구를 다 만족시키기는 어렵습니다.

반복적인 작업이나 특정 기능이 아쉬울 때 직접 플러그인을 만들어 사용하면

작업 시간을 크게 줄이고 효율성을 극대화할 수 있습니다.

이번 글에서는 Figma 커스텀 플러그인 제작 과정과

이를 통해 업무 효율성을 200% 올릴 수 있는 방법을 소개하겠습니다.

1. Figma 커스텀 플러그인이 필요한 이유

디자인 업무를 하다 보면 반복 작업이나 불편한 프로세스가 생길 수 있습니다.

이때 기존 플러그인을 활용해도 해결되지 않는 경우,

직접 플러그인을 만들어 필요한 기능을 추가할 수 있는데요.

커스텀 플러그인이 필요한 상황

  • 반복적인 텍스트 변환 작업
  • 여러 프레임을 한 번에 정리해야 할 때
  • 복잡한 색상 변경 작업
  • UI 구성 요소를 한 번에 조정해야 할 때

자체 플러그인을 만들어 사용하면,

프로젝트 특성에 맞춘 맞춤형 작업을 빠르게 수행할 수 있습니다.

2. Figma 커스텀 플러그인 제작 기본 구조

Figma 플러그인은 HTML, CSS, JavaScript를 기반으로 만들어집니다.

브라우저 환경과 유사하기 때문에 웹 개발 경험이 있다면 쉽게 접근할 수 있습니다.

플러그인의 기본 구조

  1. manifest.json: 플러그인의 설정 파일
  2. code.js: 플러그인의 주요 기능을 담당하는 JavaScript 코드
  3. ui.html: 사용자 인터페이스(UI)를 담당하는 HTML 파일
  4. style.css: UI의 스타일을 정의하는 CSS 파일

3. Figma 플러그인 개발 환경 설정

단계 1: Figma 플러그인 디렉토리 생성

프로젝트 폴더를 만들고 내부에 다음과 같은 구조를 만들어야 합니다.

/my-plugin
/manifest.json
/code.js
/ui.html
/style.css

단계 2: manifest.json 설정

manifest.json 파일에는 플러그인의 기본 정보와 동작 방식을 정의합니다.

아래와 같이 설정하면 기본 환경이 만들어집니다.

{
“name”: “My Custom Plugin”,
“id”: “my-custom-plugin”,
“api”: “1.0.0”,
“main”: “code.js”,
“ui”: “ui.html”
}

단계 3: 간단한 JavaScript 코드 작성

code.js 파일에 플러그인의 핵심 기능을 작성합니다.

예를 들어, 모든 텍스트를 대문자로 변환하는 플러그인이라면 아래와 같아요.

figma.showUI(html);

figma.ui.onmessage = (msg) => {
if (msg.type === ‘uppercase’) {
const selectedNodes = figma.currentPage.selection;
for (const node of selectedNodes) {
if (node.type === ‘TEXT’) {
node.characters = node.characters.toUpperCase();
}
}
figma.closePlugin();
}
};

아직 포기 하지 마세요!

4. 플러그인 UI 구성

HTML 파일 작성

UI를 보여줄 간단한 버튼을 만든다고 생각해보세요.

<!DOCTYPE html>

<html>

  <body>

    <button id=”convert”>대문자로 변환</button>

    <script>

      document.getElementById(‘convert’).onclick = () => {

        parent.postMessage({ pluginMessage: { type: ‘uppercase’ } }, ‘*’);

      };

    </script>

  </body>

</html>

5. Figma에서 플러그인 실행하기

플러그인 설치

  1. Figma 앱에서 플러그인 > 개발 > 플러그인 폴더 열기를 클릭합니다.
  2. 앞서 만든 폴더를 복사하여 붙여넣습니다.
  3. Figma를 다시 실행하면 플러그인이 등록됩니다.

플러그인 실행

  • 디자인 파일에서 텍스트를 선택합니다.
  • 플러그인을 실행하고 “대문자로 변환” 버튼을 클릭하면 선택된 모든 텍스트가 대문자로 바뀝니다.

6. 커스텀 플러그인 활용 사례

사례 1: 컬러 팔레트 자동 적용

브랜드 컬러가 자주 변경되는 프로젝트라면,

한 번에 색상을 변경할 수 있는 플러그인을 제작할 수 있습니다.

사례 2: 자동 레이어 정리

작업이 많아질수록 레이어 정리가 어려운데요.

특정 기준에 따라 레이어를 자동 정렬해주는 플러그인을 만들면 효율적입니다.

사례 3: 아이콘 일괄 변환

UI 라이브러리 업데이트 시 아이콘 스타일이 바뀌는 경우가 있는데,

아이콘 이름을 기준으로 한 번에 교체하는 플러그인을 사용하면 편리합니다.

7. 플러그인 배포와 관리

플러그인 배포하기

  • Figma 커뮤니티에 플러그인을 배포하려면 Figma 홈페이지에서 플러그인 등록 메뉴를 이용합니다.
  • 자세한 사용법, 기능 설명, 라이선스 정보를 포함하여 배포하면 다른 디자이너들과 공유할 수 있습니다.

업데이트 관리

  • 코드 수정 후 다시 설치하지 않아도, 디렉토리 안에서 파일을 업데이트하면 Figma에서 자동으로 반영됩니다.
  • 주기적으로 기능 개선과 오류 수정 버전을 관리해야 합니다.

마무리

Figma에서 커스텀 플러그인을 만들어 사용하면

반복 작업을 줄이고, 팀원들과의 협업 효율성을 극대화할 수 있습니다.

특히 프로젝트 특성에 맞춘 맞춤형 플러그인을 제작하면

작업 속도와 정확성이 비약적으로 향상되는데요.

처음에는 간단한 플러그인부터 시작해서

점점 복잡한 기능으로 확장해 나가면 더욱더 발전이 가능 할거에요.

어렵다면 댓글을 달아주세요.

Figma로 앱아이콘 디자인하는 가장 쉬운 방법 – 디테 최신판

로

앱 아이콘은 사용자에게 가장 먼저 눈에 띄는 디자인, 또는 시각적인 자극을 줄 수 있는 것들이죠.

단순히 브랜드를 선두하는 대표하고자 하는 역할뿐이 아니라,

작은 화면에서도 선명하게 보이고 백터 이미지로 화질이 깨지지 않도록 디자인하는 것이 중요합니다.

Figma는 이러한 아이콘 디자인을 효율적으로 할 수 있는 기능을 많이 제공하는데요.

이번 글에서는 디테일을 살리면서도 효율적으로 아이콘을 만드는 방법을 알려드리겠습니다.

1. 아이콘의 목적을 명확히 설정해야 합니다.

앱 아이콘을 디자인할 때 가장 먼저 고려해야 할 것은

해당 아이콘이 어떤 목적을 가지고 있는지 명확히 설정하는 것입니다.

  • 브랜드를 강조할 것인지
  • 기능을 직관적으로 보여줄 것인지
  • 감성적 요소를 담을 것인지

예를 들어, 금융 앱이라면 안정감과 신뢰감이 중요하고,

소셜미디어 앱이라면 다채로움과 친근함을 강조해야 합니다.

목적이 명확하면 디자인 방향도 자연스럽게 정해지기 때문에

처음 단계에서 이를 분명히 하는 것이 필요합니다.

2. Figma의 그리드와 프레임을 활용하여 정렬을 정확하게 해야 합니다.

앱 아이콘은 다양한 해상도와 디바이스에서 사용되기 때문에

중심이 정확하지 않으면 어색하게 보일 수 있습니다.

Figma에서 그리드와 프레임을 활용하여 정렬을 철저히 하는 것이 중요합니다.

그리드 설정 방법

  • Figma에서 Layout Grid를 활성화하고, 8px 또는 4px 그리드를 사용합니다.
  • 정사각형 프레임(예: 1024×1024)을 만들고 중심에 맞춰 작업을 시작합니다.
  • 중요한 시각적 요소는 정중앙 또는 대각선 중심선에 배치하는 것이 좋습니다.

3. 심볼과 컴포넌트를 사용하여 반복 작업을 최소화해야 합니다.

앱 아이콘 디자인은 여러 해상도로 변형되어 사용되기 때문에

동일한 구조를 반복해서 만들다 보면 시간 소모가 큽니다.

Figma의 컴포넌트와 심볼 기능을 적극 활용하면

한 번 만든 아이콘을 여러 사이즈로 자동 변환할 수 있습니다.

컴포넌트 활용법

  • 기본 아이콘을 컴포넌트로 저장합니다.
  • 사이즈별로 Variant를 만들어 두면 일관성 있는 아이콘 제작이 가능합니다.
  • 변경 사항이 발생하면 마스터 컴포넌트만 수정하여 전체에 반영합니다.

4. 색상과 대비를 명확하게 설정해야 합니다.

작은 화면에서 보이는 아이콘은 색상 대비가 중요합니다.

밝은 배경에 잘 보이는 어두운 색상이나,

어두운 배경에 대비되는 밝은 색상을 사용하여

선명하게 인식될 수 있도록 설계해야 합니다.

색상 선택 방법

  • 브랜드 컬러를 중심으로 2~3가지 색상만 사용합니다.
  • 다크 모드에서도 잘 보이는 색상 조합을 고려합니다.
  • Figma의 Contrast Checker를 사용하여 가독성을 확인합니다.

5. 최소 크기에서도 인식 가능하도록 디테일을 조정해야 합니다.

앱 아이콘은 스마트폰의 홈 화면에서 매우 작게 표시되기 때문에

복잡한 디자인보다는 단순하고 명확한 형태가 유리합니다.

아이콘의 복잡성을 줄이면서도,

브랜드를 상징할 수 있는 간결한 형태로 표현하는 것이 중요합니다.

디테일 조정 방법

  • 디테일이 많을 경우, 라인 두께를 두껍게 해서 시각적 명확성을 확보합니다.
  • 스케일 테스트를 통해 작은 사이즈에서도 잘 보이는지 확인합니다.
  • 아이콘 크기 변형 시에도 균형감이 유지되도록 디자인합니다.

6. 여러 해상도에 대응할 수 있도록 가이드라인을 만들어야 합니다.

앱 아이콘은 iOS와 안드로이드에서 다양한 해상도로 사용되기 때문에

여러 크기의 아이콘을 한 번에 관리할 수 있는 가이드라인을 만들어야 합니다.

가이드라인 작성 방법

  • iOS: 1024×1024, 180×180, 120×120 등
  • 안드로이드: 512×512, 192×192, 144×144 등
  • Figma에서 해상도별로 프레임을 나누고 Export 설정을 해두면 한 번에 내보낼 수 있습니다.

7. 실제 사용 환경에서 테스트해야 합니다.

아이콘을 완성한 후에는 반드시 실제 디바이스에서 테스트를 해야 합니다.

  • 모바일에서 직접 확인하여 크기별 인식성을 평가합니다.
  • 배경 화면과 조합하여 시각적 효과를 검토합니다.
  • 아이콘이 앱 목록에서 어떻게 보이는지도 함께 확인합니다.

Figma에서는 프로토타입 모드를 활용하여

아이콘이 실제 화면에서 어떻게 보이는지 미리 확인할 수 있습니다.

마무리해요

앱 아이콘 디자인은 단순해 보이지만

브랜드와 사용자 경험을 동시에 고려해야 하는 중요한 작업입니다.

Figma를 활용하면 다양한 사이즈와 형태를 쉽게 관리할 수 있기 때문에

기초 설정과 구조를 잘 잡아두는 것이 중요합니다.

이번에 소개한 7가지 팁을 활용하면

디테일이 살아 있으면서도 다양한 해상도에 대응할 수 있는

완성도 높은 아이콘을 만들 수 있습니다.

Figma로 만드는 인터랙티브 – 클릭 한 번으로 생동감을 더하기

로

이번 글에서는 Figma로 만드는 인터랙티브 프로토타입을 더욱 자세하게 다뤄보려고 합니다.

요즘 UI/UX 디자인에서 사용자 경험을 늘릴려면요.

단순히 정적인 화면이 아니라, 클릭과 애니메이션이 포함된 인터랙티브 프로토타입이 필수인데요.

Figma는 이런 프로토타입을 손쉽게 만들 수 있는 도구를 갖추고 있습니다.

자, 인터랙티브 프로토타입 제작 과정을 단계별로 알아보겠습니다.

Figma로 만드는 인터랙티브 프로토타입 – 클릭 한 번으로 생동감 더하기

디자인 작업을 할 때 완성된 화면만으로는 사용자 경험을 충분히 전달하기 어려운 경우가 많습니다.

특히 버튼을 눌렀을 때의 반응, 페이지 전환 애니메이션, 팝업 등장 등

동적인 요소가 많은 프로젝트일수록 인터랙티브 프로토타입이 필요하죠.

Figma는 이러한 인터랙티브 요소를 디자인과 동시에 구성할 수 있도록 다양한 기능을 제공하는데요.

이번 글에서는 Figma를 활용하여 생동감 넘치는 프로토타입을 만드는 방법을 소개합니다.

1. Figma에서 인터랙티브 프로토타입을 만드는 이유

디자인 시안만으로는 실제 사용자의 반응을 예측하기 어렵기 때문에

인터랙티브 프로토타입을 만들어 미리 테스트할 필요가 있습니다.

인터랙티브 프로토타입의 장점

  • 사용자 경험 테스트: 클릭이나 스크롤 등 사용자 반응을 미리 점검할 수 있습니다.
  • 클라이언트 피드백 유도: 실제 동작을 보여주어 의견을 받기 쉽습니다.
  • 개발자와의 소통: 구동 방식을 명확히 전달할 수 있어, 개발 시 오해를 줄입니다.

2. 인터랙티브 프로토타입을 위한 사전 준비

인터랙티브 프로토타입을 만들기 전에 먼저 해야 할 작업이 있습니다.

이 단계에서 기본이 잘 되어 있어야 이후 작업이 수월합니다.

디자인 컴포넌트 구성

  • 버튼, 카드, 메뉴 등 반복적으로 사용되는 요소는 컴포넌트로 묶어서 관리해야 합니다.
  • Variants를 사용하여 **다양한 상태(기본, 호버, 클릭)**를 한 컴포넌트로 관리합니다.

페이지 구성

  • 화면 전환이 필요한 경우, 각 페이지를 별도로 구성해둡니다.
  • 페이지 전환이 많은 경우, 프레임을 한 눈에 보기 쉽게 정렬합니다.

애니메이션 계획

  • 클릭, 드래그, 스크롤 등 어떤 동작에 애니메이션이 필요한지 미리 구상합니다.
  • 애니메이션 유형(페이드, 슬라이드 등)과 속도를 결정합니다.

3. Figma에서 인터랙티브 프로토타입 만드는 법

이제 본격적으로 Figma에서 인터랙티브 프로토타입을 만들어 보겠습니다.

단계 1: 프로토타입 모드로 전환

먼저 디자인이 완료된 상태에서 Figma 상단 메뉴의 Prototype 탭을 클릭합니다.

화면이 프로토타입 모드로 전환되며, 연결선을 통해 동작을 설정할 수 있는 상태가 됩니다.

단계 2: 화면 전환 연결하기

  1. 화면을 선택합니다.
  2. 드래그하여 다음 화면과 연결선을 만듭니다.
  3. 연결 설정 창이 나타나면, On Click 또는 While Hovering 등을 선택합니다.
  4. 애니메이션 유형을 설정합니다.
    • 페이드(Fade)
    • 슬라이드 인(Slide In)
    • 스마트 애니메이트(Smart Animate)
  5. 속도와 이동 방향을 선택하여 설정을 마칩니다.

단계 3: 상태 변화 설정하기

버튼이나 카드 같은 요소는 상태 변화가 필요합니다.

Variants를 활용하여 버튼의 기본, 호버, 클릭 상태를 구성합니다.

  1. 버튼 컴포넌트를 클릭합니다.
  2. 우측 패널에서 Variants 추가를 선택합니다.
  3. 상태에 따라 배경색이나 크기를 조정합니다.
  4. 프로토타입 연결 시 상태 전환을 지정하여 자연스러운 변화가 이루어지도록 합니다.

4. 인터랙티브 효과 활용법

4-1. 스마트 애니메이트 활용하기

스마트 애니메이트는 두 프레임 간의 차이점만 자동으로 변환해주는 기능입니다.

이를 통해 자연스러운 이동이나 변화 효과를 줄 수 있습니다.

  • 예: 이미지 갤러리에서 사진이 커졌다 작아지는 효과
  • 설정: Interaction Details에서 Smart Animate를 선택합니다.

4-2. 오버레이 사용하기

팝업이나 모달을 만들 때는 Overlay 기능을 활용합니다.

  • 모달 창을 별도의 프레임으로 구성한 후,
  • 버튼 클릭 시 Open Overlay로 설정하여 자연스럽게 팝업이 나타나도록 합니다.

5. 테스트와 개선

인터랙티브 프로토타입은 완성 후 테스트가 필수입니다.

Figma 상단의 Present 버튼을 눌러 실제 동작을 미리 확인할 수 있습니다.

다음 사항을 꼼꼼히 점검하세요.

  • 화면 전환이 자연스러운가
  • 버튼 클릭 시 상태 변화가 잘 되는가
  • 애니메이션 속도가 너무 빠르거나 느리지는 않은가
  • 모바일 환경에서 사용하기에 적합한가

피드백을 받았다면, Figma에서 수정 후 다시 테스트하여 최종 확인합니다.

마무리

Figma의 인터랙티브 프로토타입 기능은 단순한 화면 디자인을 넘어

실제 사용자 경험을 미리 시각화할 수 있는 강력한 도구입니다.

특히 스마트 애니메이트와 오버레이 기능을 활용하면

개발 전 사용자 피드백을 미리 반영할 수 있어 프로젝트 효율이 크게 높아집니다.

인터랙티브 프로토타입을 만들면서 중요한 것은

사용자 입장에서 자연스럽게 느껴지는 동작을 구현하는 것입니다.

오늘 소개한 방법을 통해 생동감 있는 프로토타입을 제작해 보세요.

다음 글에서는 실제 프로젝트에서 사용된 인터랙티브 프로토타입 사례를 분석하여

더 구체적인 활용법을 소개할 예정입니다.

Figma에서 다크 모드 디자인하는 법 – 2025년 최신 UI 트렌드

로

최근 몇 년간 다크 모드가 대세로 자리 잡고 있는데요.

스마트폰부터 웹사이트까지 다양한 플랫폼에서 다크 모드를 지원한다죠.

사용자들에게는 하나의 필수적인 요소로 느껴지고 있답니다.

특히, 눈의 피로를 줄여주고 배터리 소모를 줄여준다는 장점 때문에

많은 서비스가 다크 모드를 기본 설정으로 제공하고 있어요!

디자이너 입장에서는 라이트 모드와 다크 모드를 모두 고려해서

디자인을 제작해야 하는 부담이 있는데요.

하지만 Figma를 활용하면 다크 모드 디자인도 체계적으로 관리할 수 있습니다.

오늘은 Figma에서 다크 모드 디자인을 효율적으로 구현하는 방법을 알아보겠습니다.

다크 모드 디자인을 시작하기 전에

먼저, 다크 모드 디자인의 기본 원칙을 알아야 합니다!

다크 모드는 단순히 배경색을 어둡게 바꾸는 것만으로 끝나지 않습니다.

다음과 같은 사항을 고려해야 해요.

  1. 명암 대비 다크 모드에서는 대비가 매우 중요한 요소입니다. 밝은 텍스트와 어두운 배경의 조화가 시각적으로 편안해야 하는데요. 특히 텍스트의 가독성을 확보하기 위해서는 밝은 회색이나 흰색보다는 약간 누런 톤의 흰색(#E0E0E0)을 사용하면 눈의 피로를 줄일 수 있어요.
  2. 색상 사용 다크 모드에서는 강렬한 색이 부담스러울 수 있습니다. 따라서 색상의 채도를 줄이거나 약간 어두운 톤을 사용하는 것이 좋아요. 특히 강조 색상은 눈이 피로하지 않도록 신중하게 선택해야 합니다.
  3. 시각적 계층 구조 배경이 어두운 만큼 시각적 요소 간의 계층 구조가 잘 드러나지 않을 수 있는데요. 그림자, 테두리 등을 활용해서 명확한 구조를 보여주는 것이 중요합니다.

Figma에서 다크 모드 디자인 준비하기

이제 Figma에서 다크 모드 디자인을 시작해야 하는데요.

효율적인 작업을 위해 디자인 시스템부터 설정하는 것이 좋습니다.

1. 색상 스타일 설정하기

먼저, 컬러 스타일을 먼저 지정해야 한다죠.

다크 모드 전용 색상 팔레트를 미리 구성해서 관리하는 것이 좋은데요.

다음과 같은 기준으로 정리할 수 있습니다.

  • 기본 배경색: #121212 또는 #1E1E1E
  • 텍스트 기본 색상: #E0E0E0
  • 보조 텍스트 색상: #B3B3B3
  • 강조 색상: #3B82F6 (약간 채도를 줄여서 사용)

이렇게 컬러 스타일을 미리 설정해 두면

디자인 중에 색상 관리가 훨씬 쉬워집니다.

2. 컴포넌트 관리하기

다크 모드와 라이트 모드를 동시에 관리하려면 컴포넌트가 필수인데요.

Figma에서는 Variants 기능을 활용하여 상태를 관리할 수 있습니다.

예를 들어 버튼 컴포넌트를 만든다면

  • Light/Primary
  • Dark/Primary 이렇게 변형을 만들어두고 스타일을 적용하면 다크 모드와 라이트 모드를 한 번에 관리할 수 있어요.

다크 모드 디자인 시 유의할 점

1. 배경색 선택

너무 어두운 검정(#000000)은 눈이 쉽게 피로해지는데요.

약간의 채도가 들어간 짙은 회색(#121212)을 사용하면 자연스럽게 보입니다.

2. 강조 색상 관리

라이트 모드에서 강렬하게 보이던 색상이

다크 모드에서는 부담스럽게 느껴질 수 있습니다.

따라서 색상 자체를 약간 어둡게 만들거나,

투명도를 활용해서 눈에 거슬리지 않도록 해야 합니다.

3. 그림자 활용

다크 모드에서는 그림자 효과가 거의 보이지 않는데요.

이를 보완하기 위해 어두운 배경에 약간 밝은 회색(#2A2A2A)을 사용하여

미세한 그림자 효과를 주면 시각적 구분이 더 명확해집니다.

다크 모드 디자인 테스트

다크 모드로 디자인을 마쳤다면 테스트가 중요합니다.

디바이스별로, 그리고 해상도별로 색상이 어떻게 보이는지 꼼꼼히 확인해야 해요.

특히 모바일 환경에서는 OLED 디스플레이가 많기 때문에

색상 표현이 더 강렬하게 보일 수 있습니다.

테스트 시에는 다음을 확인해야 합니다.

  • 다양한 디바이스에서 텍스트 가독성
  • 색상 왜곡 여부
  • 눈부심이나 피로감이 없는지

마무리할게요!

다크 모드 디자인은 단순히 어두운 색상을 사용하는 것이 아니라

사용자가 편안하게 콘텐츠를 볼 수 있도록

다양한 시각적 요소를 조정하는 작업입니다.

Figma를 활용하면 다크 모드 디자인을 체계적으로 관리할 수 있는데요.

디자인 시스템을 잘 설정하고, 컴포넌트와 Variants 기능을 적극 활용하면

효율적으로 라이트 모드와 다크 모드를 동시에 관리할 수 있습니다.

디자인 트렌드가 빠르게 변화하는 만큼

다크 모드도 꾸준히 개선하면서

사용자 경험을 고려하는 것이 중요합니다.

앞으로도 다크 모드 디자인을 할 때 오늘 배운 내용을 참고해서

더 나은 결과물을 만들어보세요.

Figma AI와 함께 UI 디자인 10분 안에 완성하기(2025년 기준) 자동화 꿀기능

로

1. Auto Layout + AI 스타일 추천

Figma의 Auto Layout은 단순 정렬뿐만 아니라요.
AI가 추천하는 레이아웃 방향, 간격, 패딩 등을 제안해줘요.

  • 예전에는 수동으로 24px 간격 입력했어야 했다면,
    이제는 요소 수와 위치에 따라 자동으로 ‘자연스러운 간격’을 제안해줘.
  • 특히 카드, 버튼, 리스트를 여러 개 만들면
    “이건 수직 정렬이 더 좋을 것 같아요” 같은 AI 정렬 가이드가 팝업으로 나옴.

실무에선 디자인 스타일 통일 + 빠른 반복 UI 구성에 아주 유용.

2. AI 기반 “Variant 생성” 기능 (컴포넌트 확장)

컴포넌트를 만들 때 자주 쓰는 **Variants (버튼의 다양한 상태 등)**를
이제는 AI가 추천하거나 복사할 때 자동 제안해줘.

예시:

  • “Primary / Secondary / Disabled / Hover / Active”
    이런 상태를 직접 만들지 않아도
    하나만 만들면 AI가 추천 Variant 세트로 묶을 수 있음.

버튼 하나 만든 뒤, “Create variants” 클릭 →
AI가 상태별 디자인을 자동 분리하고 정렬해주는 기능을 제공 중 (일부 베타 계정 활성화)

3. Dev Mode에서 AI 기반 코드 구조 제안

Figma의 Dev Mode는 단순히 마진/패딩 확인용이 아니고, 이건 나도 회사 개발자한테 추천해줬어.
지금은 AI가 코드 컴포넌트 구조를 인식하고,
React, Tailwind, CSS 방식으로 자동 변환하는 기능도 추가되고 있어.

  • Div를 감싸는 구조
  • 버튼 → <button className=...> 자동 제안
  • 이미지나 아이콘의 alt 텍스트까지 구조 분석 가능

개발자에게 넘길 때, AI가 제안한 코드를 참고하면 구조가 깔끔하게 나옴.

4. AI 문장 톤 바꾸기 (친근하게/공식적으로/짧게)

텍스트 생성만 되는 게 아니라,
생성한 문장을 클릭하고 → 톤 바꾸기 기능으로 다음처럼 바꿀 수 있어:

  • “공식적인 톤으로 바꾸기”
  • “짧고 직관적으로 만들기”
  • “친근하게 변경하기”

예:

“Please sign up to access your dashboard.”
→ “대시보드를 사용하려면 가입해주세요!”
→ “가입하면 바로 시작할 수 있습니다”

브랜드 톤에 맞게 자동화된 마이크로카피 테스트에 최고!

5. FigJam에서 AI 브레인스토밍 & 정리 기능

Figma의 협업 화이트보드인 FigJam에서도 AI 기능이 들어갔어.

  • 아이디어 몇 개만 적으면
    자동으로 관련 키워드, 구조, 카테고리 분류해줌
  • 회의 중 나온 키워드를 요약 → 정리 → 표로 시각화 가능
  • ‘Generate Ideas’ 버튼 → AI가 자동으로 10개 아이디어 뽑아줌

특히 비디자이너 팀원과 아이디어 회의할 때 속도 + 논리 정리에 최적화됨

6. 디자인 → 텍스트 설명 역추적 기능 (Explain this)

디자인 요소에 대해
“이건 어떤 기능인지 설명해줘”라고 하면
AI가 기획 의도를 역으로 설명해주는 기능도 있어 (일부 실험 중)

예:

“이 버튼은 사용자가 이메일을 제출하고 가입 절차를 시작하도록 돕습니다.”
→ 프레임만 보고 기획서 문장으로 자동 작성

클라이언트 설명자료 만들 때 엄청 유용함.

7. AI 기반 Mock Data 삽입 (플러그인 없이)

기존엔 Content Reel, Mocky, Random User 같은 플러그인을 써야 했는데,
이제는 일부 텍스트 박스에
“Generate sample data” 기능이 직접 제공됨.

  • 이름, 이메일, 전화번호, 날짜, 통계 숫자 등
    → AI가 실존하는 듯한 데이터로 자동 채워줌

프로토타입 테스트, 클라이언트 리뷰 때 가짜 콘텐츠 구성에 강력함

요약해 볼게

기능핵심 내용실무 활용
AI 레이아웃 추천Auto Layout 속성 자동 제안빠른 UI 정리
Variant 추천컴포넌트 상태 자동 정리버튼/탭 등 반복 UI 제작
Dev Mode 코드 제안Tailwind/React 코드 자동 생성개발 협업
텍스트 톤 변경공식 ↔ 친근 톤 변환마이크로카피 작성
FigJam 아이디어 정리키워드 → 자동 분류/표 정리회의 요약
디자인 설명 생성디자인 요소의 기능 설명 자동화클라이언트 공유
가짜 데이터 삽입실전 같은 콘텐츠 자동 채우기목업 테스트