피그마를 사용하다보면 에셋을 이미지로 추출할 경우 색상이 다르게 추출되는 현상이 발생하곤 합니다. 피그마 export시 이러한 문제가 발생했을때 해결하는 방법을 공유합니다.
피그마에서 지원되는 색상 프로필
Figma에서는 주로 두 가지 색상 프로필, sRGB와 디스플레이 P3를 지원합니다.
- sRGB: 가장 널리 사용되는 색상 프로파일로, 대부분의 웹 브라우저와 디스플레이에서 지원됩니다.
- 디스플레이 P3: sRGB보다 더 넓은 색상 범위를 제공하여, 더 생생하고 풍부한 색상을 표현할 수 있습니다. 특히 iOS 장치나 Retina 화면에서 더욱 빛을 발합니다.
색상 프로필 설정하기
1. 피그마 기본 설정 변경
새로운 디자인 파일은 기본적으로 sRGB로 설정됩니다. 다른 색상 프로필로 변경하려면 아래 단계를 따르면 됩니다.
- 편집 권한이 있는 파일을 엽니다.
- Figma 메뉴를 열고, Preferences > Color profile로 이동합니다.
- 원하는 색상 프로필(sRGB 또는 Display P3)을 선택합니다.
- 팝업을 닫아 설정을 저장합니다.
색상 프로필 선택 시 ‘Apple 장치에 가장 적합한 Display P3는 색상 스펙트럼이 넓지만 웹 디자인에는 권장되지 않습니다.’ 라고 기재되어 있으니 참고 하시길 바랍니다.
단, 해당 설정을 적용하려면 피그마를 완전히 종료 후 재시작해야 합니다.
2. 색상 프로필 할당하기
현재 작업중이 파일에 색상 프로필을 할당 할 수 있습니다.
- 파일 이름 옆의 드롭다운 화살표를 클릭합니다.
- File color profile으로 이동한 후, 원하는 프로필로 변경합니다.
- 색상 값을 유지(할당) 옵션을 선택하고, 변경 사항을 저장합니다.
색상 값 유지 or 변환 옵션
위 절차대로 파일의 색상 프로필을 변경할 때, 색상 값을 유지(할당)하거나 모양을 유지(변환)할 수 있는 옵션을 제공합니다.
Keep color values(Assign): 색상 값 유지(할당)
시각적으로 색상이 변경되지만, 기본 데이터(예: 16진수 코드)는 동일하게 유지됩니다. 브랜드 색상 등 특정 색상 값에 의존하는 경우 유용합니다.
Keep apperance(Convert): 모양 유지(변환)
색상의 기본 데이터가 변경되지만, 최대한 동일하게 보이도록 유지됩니다. 다양한 디바이스에서의 일관된 외관이 중요한 경우 선택할 수 있습니다.
자산 내보내기
1. 피그마에서 설정 후 내보내기
기본적으로, Figma는 파일의 현재 색상 프로필을 사용하여 자산을 내보냅니다. 필요한 경우 내보낼 때 다른 색상 프로필을 선택할 수 있습니다.
2. 플러그인 사용하기 (PNG)
맥의 Display P3와 같은 ICC 프로파일이 내장된 PNG를 내보내기 위한 플러그인 입니다. 사용법은 매우 간단합니다.
- 플러그인을 실행한 후 일반적으로 에셋을 export 할때와 동일하게 1번 영역처럼 이미지를 선택 후 ‘+’ 버튼을 클릭하여 PNG를 선택합니다.
- 플러그인에서 원하는 컬러 프로필을 선택하고 save를 클릭합니다.
대표적으로 Display P3와 sRGB가 보이는데 아래 Show more profiles를 클릭하면 더 많은 색상 프로필을 선택 할 수 있습니다. 저는 MAC을 사용중인데 윈도우에서도 Display P3로 exoport가 가능한지 궁금하네요. 혹시 아시는 분은 댓글 부탁드립니다.
결론
Figma의 색상 프로필 기능은 프로젝트를 함께 진행하는 팀원들이 각각 어떤 디바이스를 사용하든 일관된 색상을 유지할 수 있도록 도와줍니다. 이 가이드를 통해 색상 프로필을 적절히 설정하고 관리하여, 디자인의 품질과 일관성을 높여보세요.