피그마 변수와 함께 Mode 활용법(다국어 지원, 다크모드) – 피그마 강좌 2-7

안녕하세요. 이번에는 저번 영상에서 배운 변수와 함께 사용하면 좋은 모드에 대해 배워볼게요. 모드는 다양한 경우일 때 조절할 수 있는 좋은 기능입니다. 예제로 다국어 지원과 다크모드를 구현해볼게요.

모드란 무엇인가?

모드는 변수를 그룹화하여 특정 상황에 따라 서로 다른 값을 적용할 수 있는 기능입니다. 이를 활용하면 하나의 디자인 파일에서 다양한 사용자 환경(예: 다국어, 다크 모드)을 효과적으로 관리할 수 있습니다.

모드는 다음과 같은 상황에서 유용합니다.

• 반응형 디자인: 화면 크기에 따라 다른 레이아웃을 제공할 때.
• 다국어: 다양한 언어로 텍스트를 제공해야 할 때.
• 다크 모드: 사용자 환경에 따라 다크 모드와 라이트 모드 디자인을 전환할 때.

1. 다국어 지원

다국어 지원은 String 변수를 활용해 간단히 구현할 수 있습니다.

설정 방법

1. String 변수 등록:
   • 텍스트를 여러 언어로 등록합니다.
   • 예: “Welcome” → “환영합니다”, “Bienvenido”, “欢迎”.
2. 모드 생성:
   • Mode를 생성하여 각 언어별 텍스트를 정의합니다.
   • 예: English, Korean, Spanish, Chinese.
3. 디자인에 적용:
   • 온보딩 화면이나 버튼에 String 변수를 연결하고, 원하는 모드를 선택해 언어를 변경합니다.

활용 예시

온보딩 화면에서 “Welcome” 텍스트를 여러 언어로 지원해야 한다면, 모드를 활용해 각 언어에 맞는 텍스트를 설정하고 쉽게 전환할 수 있습니다. 이를 통해 디자인 파일을 중복으로 만들지 않고도 다양한 언어를 지원할 수 있습니다.

2. 다크 모드 구현

다크 모드는 Color 변수와 모드를 결합해 간단히 구현할 수 있습니다.

설정 방법

1. Color 변수 등록:
   • 다크 모드와 라이트 모드에 필요한 색상을 변수로 정의합니다.
   • 예: PrimaryColor-Light (#FFFFFF), PrimaryColor-Dark (#121212).
2. 모드 생성:
   • Mode를 생성하여 Light와 Dark 두 가지 모드를 정의합니다.
   • Light 모드에 라이트 색상, Dark 모드에 다크 색상을 연결합니다.
3. 디자인에 적용:
   • UI 요소(배경, 텍스트, 버튼 등)에 Color 변수를 연결합니다.
4. 모드 전환:
   • 모드를 전환하면 UI 전체가 즉시 라이트 모드와 다크 모드로 변경됩니다.

활용 예시

다크 모드가 필요한 앱의 네비게이션 바를 디자인할 때, 배경 색상을 PrimaryColor로 설정하고, 라이트와 다크 모드에 각각 다른 색상을 연결합니다. 모드를 전환하면 디자인 파일의 모든 관련 요소가 자동으로 업데이트됩니다.

모드 활용의 이점

• 작업 시간 단축: 다국어와 다크 모드처럼 반복 작업이 필요한 디자인에서 시간을 크게 절약할 수 있습니다.
• 파일 관리 효율화: 동일한 디자인 파일에서 다양한 상황을 관리할 수 있어 파일 중복을 줄입니다.
• 디자인 일관성 유지: 모든 요소가 동일한 변수와 모드를 참조하므로, 변경 사항이 즉시 일괄 반영됩니다.

피그마의 모드는 다국어와 다크 모드 같은 다양한 요구 사항을 하나의 디자인 파일에서 효율적으로 처리할 수 있는 강력한 도구입니다. 모드를 활용하면 파일 관리가 용이해지고, 디자인 일관성과 작업 효율성이 대폭 향상됩니다. 이번 강의 내용을 실무에 적용해, 다국어와 다크 모드를 체계적으로 관리해 보세요.