문의드립니다!

Question

안녕하세요, 강사님! 친절하고 상세하게 답변 남겨주셔서 감사합니다:) 남겨주신 답변 참고해서 제가 임의로 폰트 사이즈를 정한 후 피그마 토큰에 적용해 보았는데요, 제대로 작업한게 맞는지 궁금해서요. 스케일값 없이 작업했는데 한 번 확인해주시면 감사하겠습니다~! { "140": { "value": "140%", "type": "lineHeights" }, "150": { "value": "150%", "type": "lineHeights" }, "160": { "value": "160%", "type": "lineHeights" }, "170": { "value": "170%", "type": "lineHeights" }, "Default": { "value": "16", "type": "fontSizes" }, "heading": { "H1": { "value": "{Default} * 5", "type": "fontSizes" }, "H2": { "value": "{Default} * 4", "type": "fontSizes" }, "H3": { "value": "{Default} * 3.375", "type": "fontSizes" }, "H4": { "value": "{Default} * 3", "type": "fontSizes" } }, "subtitle": { "S1": { "value": "{Default} * 2.25", "type": "fontSizes" }, "S2": { "value": "{Default} * 1.75", "type": "fontSizes" }, "S3": { "value": "{Default} * 1.375", "type": "fontSizes" } }, "button": { "button": { "value": "{Default} + 2", "type": "fontSizes" } }, "Pretendard": { "value": "Pretendard", "type": "fontFamilies" }, "bold": { "value": "Bold", "type": "fontWeights" }, "firescope_red": { "value": "#bd382b", "type": "color" }, "content primary": { "value": "#1c1918", "type": "color" }, "body": { "B1": { "value": "{Default}", "type": "fontSizes" }, "B2": { "value": "{Default}", "type": "fontSizes" } }, "caption": { "C1": { "value": "{Default} - 2", "type": "fontSizes" }, "C2": { "value": "{Default} - 4", "type": "fontSizes" } }, "Heading": { "H1": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.H1}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "H2": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.H2}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "H3": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.H3}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "H4": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.H4}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }, "Subtitle": { "S1": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{semiBold}", "lineHeight": "{150}", "fontSize": "{subtitle.S1}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "S2": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{semiBold}", "lineHeight": "{150}", "fontSize": "{subtitle.S2}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "S3": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{semiBold}", "lineHeight": "{150}", "fontSize": "{subtitle.S3}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }, "semiBold": { "value": "SemiBold", "type": "fontWeights" }, "regular": { "value": "Regular", "type": "fontWeights" }, "medium": { "value": "Medium", "type": "fontWeights" }, "Button": { "Button": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{160}", "fontSize": "{button.button}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }, "Body": { "B1": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{semiBold}", "lineHeight": "{160}", "fontSize": "{body.B1}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "B2": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{medium}", "lineHeight": "{160}", "fontSize": "{body.B2}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }, "Caption": { "C1": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{regular}", "lineHeight": "{170}", "fontSize": "{caption.C1}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "C2": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{regular}", "lineHeight": "{170}", "fontSize": "{caption.C2}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } } }

범쌤 · Answer

안녕하세요 SUNA LEE 님 :) 작성해주신 토큰 확인 해봤을 때 잘 작성해주신것 같습니다 ㅎㅎ 다만, 임의의 값을 넣어서 크기를 만드는건 좋으나, 나름의 규칙성을 가져야 시스템이 효율적이지 않을까 라는 생각을 가져봅니다. 지금 작성된 토큰에는 x5, x4, x3.375, x3 이런식으로 규칙적이지 않은 값들이 곱해지고 있는것 같은데요, 개발자 입장에서 보면 규칙적인 값이 곱해지는게 아니기 때문에 개발 작업이 오히려 더 힘들어 질 수 있을것 같아요 제가 오프라인 수업에서 항상 하는 이야기가 있습니다. "시스템을 구성할 때는 항상 handoff를 고려하며 작업해야 한다" 인데요, 내가 만든 토큰이 어떻게 내보내지는지를 고민해야 하며 개발자가 토큰을 받았을 때 처리가 복잡해진다면, 그건 비효율적인 시스템이 될 수 있다는 것이죠, 오히려 개발자 입장에서는 일정규칙을 가지고 폰트가 증가하고 정수값이 아닌 소수의 값이 떨어지는걸 더 선호할 수 있을것 같아요, 이 부분은 같이 일하는 개발자에게 의사를 물어보는게 제일 좋을듯 보입니다 ^^& (만약 제가 저 토큰을 받는 개발자라면 일관된 규칙을 사용하는 걸 선호)