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

안녕하세요 SUNA LEE 님 :)

먼저 말씀드리고 싶은건, 디자인에는 여러 방법론이 있습니다. 그리고 저는 그 방법론들 중에 하나를 사용하면서 영상을 만든것입니다, 어떤걸 선택하기에는 개인, 팀, 회사에서 따라 선택되겠죠 ㅎㅎ

저는 황금비율을 고려한 방법론에 대한 설명 전제로 말씀 드린것이고,
실제 참고 사이트들중에서 고정값을 사용한 이유들을 보면,

브라우저가 소수점을 처리하는 브라우저와 그렇지 못한 브라우저의 차이가 있을 수 있습니다.
그래서 오래된 브라우저를 고려해야하는 한국 환경 특성상 고정비율을 사용하는 경우가 많죠,

또한 저처럼 황금비율의 폰트크기 시스템을 사용하는데도 불구하고 정수로 딱딱 떨어지는 사이트 들이 있습니다. 그건 토큰에 후가공을 거쳐 디자이너나, 개발자 모두가 딱 떨어지는 단위의 값을 쓰기로 "약속" 했기 때문인데요, 소수점자리수를 모두 올림처리하거나 내림처리 해서 사용하는 방법이 될 것 같네요 :)

이어서 타이포그래피 역시 저는 heading label paragraph로 나눠서 작업한건, 제가 사용하는 시스템 방식인거고, 구글의 material design 은 headline / subtitle / body / button / caption 이런 방식으로 사용되는 서로간의 "약속" 인것이죠 ㅎㅎ

시스템엔 정답이 없습니다. 시스템은 우리 모두가 이렇게 쓰기로 약속하자~ 에 대한 개념 또는 언어 체계이며, 보다 좋은 방법과 팀원들간의 효율성을 더 끌어올릴 수 있는 다른 네이밍, 또는 구조화가 있다면 얼마든지 변경해서 사용하셔도 좋을듯 합니다 ^^

가장 중요한건 일관성을 유지하는것이 중요하니까요 :)

답변 감사드립니다:)

답변을 읽다보니 또 궁금한 사항이 생겼는데요,
고정값을 사용할 경우 스케일 값의 비율로 일정한 간격을 주지 않고 임의로 80, 54, 52, 44pt 이런 식으로 정해도 되는걸까요?
만약에 임의로 정해도 되는 경우 피그마 토큰에서 스케일 값만 지우고 배운대로 적용하면 될지 궁금합니다!

또, 황금비율의 폰트크기 시스템을 사용하는데도 불구하고 정수로 딱딱 떨어지는 경우 토큰에 후가공을 거친다고 말씀해주셨는데 토큰에 후가공을 거치는게 자세히 어떤건 지 궁금합니다!

안녕하세요 SUNA LEE 님 :)

질문을 정리하면 다음과 같을 수 있겠네요.

1. 스케일값을 사용하지 않고 임의의 값을 사용해도 되는가?

2. 토큰의 후가공은 어떻게 이루어지는가?
   

1번 질문에 대한 답변은, 임의의 값을 사용하셔도 상관없습니다 :) 다만 시스템이 깨지지 않기 위해 계속 그 값을 써주고, 팀원들끼리 공유하면 좋겠네요 ㅎㅎ

2번 질문에 대한 답변은 개발쪽 이야기를 해야 합니다 ㅎㅎ 우리가 만든 피그마 토큰의 자산들 (json)들은 실제로 개발에선 사용이 불가능한 형태입니다. 이유는 값 자체에 또다른 변수가 할당되어있기 때문인데요, "md": {

"value": "{spacing.sm} * {spacing.scale}",

"type": "spacing"

},

이런식으로 나오기 때문이죠, 그래서 피그마 토큰 공식 홈페이지를 가보면 Github 항목에

How to use tokens stored in GitHub in development?

라는 부분이 기재되어 있는데요, 이는 토큰을 실제 개발에 어떻게 사용하는지에 대한 안내가 나와있습니다. 링크 넣어놨으니 확인해보시면 좋을듯 해요 ㅎㅎ

여기서 언급하는건 tokens transformer라는 도구를 사용하여 후가공을 거쳐달라 라고 안내가 되어있고 tokens transformer는 npm 을 통해 다운받아 사용할 수 있습니다. 자세한 사용법은 tokens transformer npm 문서 를 통해 확인해보시면 될듯해요 ㅎㅎ

이렇게 후가공을 거친 토큰은 또 한가지 문제점이 있는데요, 같은 json 포멧이기 때문에 css in js 방법론으론 사용이 가능하나 기타 다른 도구들에선 사용하지 못한다는 문제점들이 있습니다 (tailwindcss,sass,ESModule,etc...) 그래서 이 토큰을 다시 한번 후가공 해주는 작업이 필요합니다.

그때 필요한 도구가 style dictionary 입니다. 이 도구는 많은 사용자들이 사용할 뿐만 아니라, 아토믹 디자인의 저자인 브랜드 프로스트의 블로그 글에도 개시되어있는 도구인데요, 많고 다양한 종류들의 토큰들을 원하는 포멧으로 후가공 처리해줄 수 있는 도구라고 보시면 될 것 같습니다 ^^

여기서 module.js를 따로 세팅해서 후가공을 한번 더 거치게 되는데요, 이때 여러가지 작업들이 이뤄집니다.

예를 들면 폰트사이즈, 간격값 뒤에 전부 px의 문자를 입력해서 내보내줘야 한다던가,
bold, semibold 에게 실제 코드에서 사용가능한 500, 600의 값으로 변환해준다던가,
질문에서 언급하신 폰트의 단위가 17.123213 처럼 떨어질 경우 자바스크립트이기 때문에 자바스크립트의 메서드인 Math.round 또는 Math.floor 의 도구를 사용해 올림과 내림을 결정해 17px 또는 18px로 딱 떨어지게 작업을 한다던가 하는 후가공들이 필요하게 됩니다 .

온라인 강의에서는 디자이너들을 타켓팅으로 하다보니 이러한 설명은 따로 없는데요,

이 부분은 제가 오프라인 강의에서 진행하는 파트이고 개발자들 대상의 수업에서 진행하는 내용이긴 합니다 ㅎㅎ

감사합니다.