피그마에서 로컬 폰트 스타일이 적용된 것으로 보이지만, 실제로는 드롭다운에서 선택되지 않은 상태로 표시되어 개발 시 폰트 불일치 문제가 발생합니다. 이 문제를 해결할 방법이 있을까요?
답변
폰트 스타일이 깨지는 현상은 여러 원인이 있을 수 있습니다.
파일 간 복사/붙여넣기: 다른 파일에서 요소를 복사하여 붙여넣을 때, 원본 파일과 대상 파일의 로컬 스타일이 다르거나 폰트가 일치하지 않으면 스타일이 깨질 수 있습니다.
스타일 분리 (Detached Styles): 폰트 스타일이 적용된 후, 폰트 속성을 수동으로 변경하면 해당 스타일이 분리(detached)될 수 있습니다. 이 경우, 오른쪽 패널에서는 스타일이 적용된 것처럼 보이지만 드롭다운에서는 선택되지 않은 상태로 나타날 수 있습니다.
폰트 설치 문제: 팀원들이 동일한 폰트를 정확히 설치하지 않았거나, Figma Font Installer가 제대로 작동하지 않을 때 발생할 수 있습니다.
해결 방안:
스타일 재적용 및 관리: 폰트 스타일이 분리된 경우, 해당 텍스트 레이어를 선택하고 오른쪽 패널의 텍스트 스타일 드롭다운에서 올바른 스타일을 다시 선택하여 적용합니다.
Design Lint 플러그인 활용: `Design Lint`와 같은 플러그인을 사용하여 파일 내에서 분리된 스타일, 사용되지 않는 스타일, 일관성 없는 폰트 등을 찾아내고 일괄적으로 수정할 수 있습니다. 개발자에게 파일을 넘기기 전에 이 플러그인으로 디자인 일관성을 검사하는 것을 강력히 추천합니다.
팀 라이브러리 활용: 폰트 스타일을 팀 라이브러리에 게시하고, 모든 팀원이 이 라이브러리를 사용하여 디자인하도록 합니다. 라이브러리 스타일을 사용하면 일관성을 유지하기 훨씬 쉽습니다.
폰트 환경 통일: 모든 팀원이 동일한 폰트(특히 로컬 폰트의 경우)를 설치하고 사용하는지 확인합니다. Google Fonts와 같이 웹 기반 폰트를 사용하면 이러한 문제를 줄일 수 있습니다.