Inflearn brand logo image

인프런 커뮤니티 질문&답변

askare님의 프로필 이미지
askare

작성한 질문수

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

[실습✨] 타이포그래피 스타일과 기본 베리어블 등록하기

타이포그래피 배리어블 등록 관련 질문

작성

·

47

0

쌤 안녕하세요, 타이포그래피 배리어블 등록 관련 질문드려요!

브랜드가 1개예요. 컬러 배리어블 등록시에는 브랜드 컬러와 Theme을 등록하지 않았어요.

Sematic Typography 등록 시에 font family는 Theme을 등록하지 않은 경우, 어디에 등록해서 사용하는 것이 좋을지 궁금합니다!

아직 경험이 많지 않아서요~

쌤의 예제 파일을 참고하면서 등록하다보니 헷갈려서 질문드려요!

도움 부탁 드립니다!!

실무에도 유용한 강의와 예제 공유해주셔서 항상 감사합니다!

 

theme.png.webp

 

semantic typography.png.webp

 

답변 2

0

볼드 UX님의 프로필 이미지
볼드 UX
지식공유자

질문 주셔서 감사합니다.

만약 브랜드가 하나이면, Theme은 아예 지우시면됩니다.

Semantic의 폰트패밀리의 경우는 바로 Primitivie의 폰트패밀리로 연결하시면 됩니다.

 

궁금하시면 점 있으시면 언제든지 질문주세요!

감사합니다.

askare님의 프로필 이미지
askare
질문자

감사합니다👍

0

안녕하세요, 인프런 AI 인턴입니다.

askare님, 타이포그래피 배리어블 등록 관련 질문 주셔서 감사합니다! 브랜드가 하나인 경우, 타이포그래피 배리어블의 font family를 어디에 등록하는 것이 좋을지 궁금해 하셨군요.

보통 font family를 설정할 때는 Sematic Typography 내에 직접 등록하여 사용하는 것이 일반적입니다. Sematic Typography는 텍스트의 의미에 맞게 스타일을 적용하기 때문에, 브랜드의 통일성과 일관성을 유지하는 데 도움이 됩니다. 이 때 font family는 모든 텍스트에 공통적으로 적용되어야 하므로, 별도로 Theme에 등록하지 않아도 됩니다. 만약 다양한 폰트를 사용해야 한다면, 각 폰트를 사용 목적에 맞게 구분하고, Sematic Typography의 한 부분으로 설정하시면 됩니다.

이미지의 등록 정보를 참조하여 heading, body 등으로 구분한 후, 각기 다른 폰트 패밀리를 지정하여 적용해 보세요. 예를 들어, 제목과 본문에 각각 다른 폰트를 사용하여 각각의 용도에 맞는 스타일링을 하는 것처럼 말입니다.

강의와 제공된 예제 파일을 참고하시면서 진행하시다 보면 점점 익숙해지실 겁니다. 실무에서도 그 이점을 충분히 활용하실 수 있을 거예요.

이미지의 내용을 살펴보시면 GUI 인터페이스로 폰트 속성들을 관리할 수 있는 디자인 툴임을 알 수 있으며, 다양한 폰트 설정 및 스타일을 한 눈에 볼 수 있도록 구조화되어 있습니다. 이를 통해 스타일을 미리 시각적으로 검토하며 등록할 수 있어 유용합니다.

이미지 URL:
1. Typography Them Variables
2. Typography Management Interface

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

askare님의 프로필 이미지
askare

작성한 질문수

질문하기