질문사항
프리텐다드 폰트에서 `strikethrough` (취소선) 스타일 적용 시, `underline`과 달리 세부 조정이 불가능하여 원가-할인가격 표시 등에 사용하기 어렵습니다. 이 문제를 해결하기 위해 다른 폰트(예: Inter)로 스타일을 분리하여 사용하는 것 외에 다른 방법이 있을까요? (프리텐다드 일반 폰트와 베리어블 폰트 중 어떤 것이 문제인지 확인 필요)
답변
프리텐다드 폰트에서 `strikethrough` (취소선) 스타일이 원하는 대로 적용되지 않거나 세부 조정이 어려운 문제는 폰트 자체의 메트릭스(metrics) 또는 피그마의 폰트 렌더링 방식과 관련하여 발생할 수 있습니다. 특히 `Variable Font`의 경우 일반 폰트와 다른 방식으로 렌더링될 때 이러한 문제가 나타나기도 합니다.
문제 해결 및 워크플로우 개선 방법:
프리텐다드 폰트 버전 확인 및 재설치: Variable Font vs. Static Font: 프리텐다드 폰트는 `Variable Font` 버전과 일반 `Static Font` 버전이 있습니다. 일부 사용자들은 `Variable Font`에서 `strikethrough` 문제가 발생하고 `Static Font`에서는 괜찮았다는 경험을 공유하기도 합니다. 현재 사용 중인 프리텐다드 폰트가 어떤 버전인지 확인하고, 다른 버전으로 교체하여 테스트해 보세요. 최신 버전 확인: 폰트 파일 자체의 버그일 수도 있으니, 프리텐다드 폰트의 최신 버전을 다운로드하여 재설치해 보는 것이 좋습니다.`Line` (선) 도형 직접 추가: 가장 확실하게 원하는 위치와 두께의 취소선을 구현하는 방법입니다. 텍스트 레이어 위에 별도의 `Line` (선) 도형을 그려서 취소선처럼 배치합니다. 이 선은 텍스트와 함께 그룹화하거나, 오토 레이아웃 내에서 `Absolute Position`을 사용하여 텍스트 위에 정확히 배치할 수 있습니다. 장점: 선의 두께, 색상, 위치를 완벽하게 제어할 수 있습니다. 단점: 텍스트 내용이 변경될 때마다 선의 길이와 위치를 수동으로 조절해야 할 수 있습니다. (오토 레이아웃과 `Absolute Position`을 잘 활용하면 어느 정도 자동화 가능)다른 폰트 사용 (현재 방법): 현재 사용하시는 것처럼 `Inter` 폰트 등 `strikethrough`가 깔끔하게 적용되는 다른 폰트를 사용하는 것도 유효한 해결책입니다. 다만, 디자인 시스템 내에서 폰트 통일성이 중요한 경우 제한적일 수 있습니다.Figma 버그 리포트 또는 커뮤니티 문의: 만약 특정 폰트에서만 지속적으로 문제가 발생하고 다른 해결책이 없다면, Figma 지원팀에 버그를 리포트하거나 Figma Community에 문의하여 다른 사용자들의 경험이나 해결책을 공유받을 수 있습니다.결론:
가장 권장되는 방법은 프리텐다드 폰트의 다른 버전(Static/Variable)을 테스트해보고, 그래도 문제가 해결되지 않는다면 텍스트 위에 별도의 `Line` 도형을 그려서 취소선을 직접 구현하는 것입니다. 이는 수동 작업이 필요하지만, 가장 정확하게 원하는 디자인을 얻을 수 있는 방법입니다. 폰트 통일성이 매우 중요하다면 이 방법을 고려해 보세요.