프리텐다드 폰트 사용관련프리탠다드 홈페이지에서 다운받고 보니 다운로드가 두가지 버전이있습니다!Pretendard와 Pretendard variavle. 인데 디자이너는 어떤걸 쓰는게 좋은가요! 그리고 왜 두개로 나눠지는지 혹시 아신다면 궁금합니다!.개인적으로 범쌤님이 자주쓰는 폰트가 궁금합니다! (프리탠다드, 슈트 등) 3가지 정도 알려주실수 있으신가요! 강의 타이포 편에 서 'heading' 'label' 'paragraph' 이렇게 쓰시는걸 봤습니다. 짧은 저의 지식으로는 사이즈는 다 같은데 굶기만 다른걸로 이렇게 이름을 나누시는건지 궁금하고, heading은 제목이라고 해석이 되는데 label과 'paragraph가 좀 와닿지가 않았습니다!. 현업에서도 이렇게 사용되는지 궁금합니다..! (저는 그간 참고한게 title, subtitle, body) 였습니다!.피그마 토큰 깃허브로 핸드아웃 따라중이였는데 이제는 pro로 유료버전이 되야! 가능한가 봅니다. 2023년 피그마 업데이트에 보니까 피그마도 토큰같은 기능을 variavles이름으로 낸다고 하는데 :-)..새로운 레슨 찍어주실 생각은 없으신가요...! 다른 강의도 들어봤지만 범쌤이 짱이에요...거기다가 질문 답변도 주시고 흑흑 텍마이머니..(지갑을 흔든다)혹시 디자인 시스템 가이드 참고하시는것 있으신가요? 저는 컬러네임 정하는게 정말 어려웠는데 범쌤 덕분에 시스템 컬러와 악센트 등 잘 참고 하고 있습니다. 항상 감사드립니다!

카테고리

질문 & 답변
세부 분야

UX/UI
해결 여부

해결됨

안녕하세요 범쌤님!

23.10.30 17:51 작성 조회수 330

프리텐다드 폰트 사용관련
1. 프리탠다드 홈페이지에서 다운받고 보니 다운로드가 두가지 버전이있습니다!
  1. Pretendard와 Pretendard variavle. 인데 디자이너는 어떤걸 쓰는게 좋은가요! 그리고 왜 두개로 나눠지는지 혹시 아신다면 궁금합니다!.
개인적으로 범쌤님이 자주쓰는 폰트가 궁금합니다! (프리탠다드, 슈트 등) 3가지 정도 알려주실수 있으신가요!
강의 타이포 편에 서 "heading" "label" "paragraph" 이렇게 쓰시는걸 봤습니다. 짧은 저의 지식으로는 사
이즈는 다 같은데 굶기만 다른걸로 이렇게 이름을 나누시는건지 궁금하고, heading은 제목이라고 해석이 되는데 label과 "paragraph가 좀 와닿지가 않았습니다!.
현업에서도 이렇게 사용되는지 궁금합니다..! (저는 그간 참고한게 title, subtitle, body) 였습니다!.
피그마 토큰 깃허브로 핸드아웃 따라중이였는데 이제는 pro로 유료버전이 되야! 가능한가 봅니다. 2023년 피그마 업데이트에 보니까 피그마도 토큰같은 기능을 variavles이름으로 낸다고 하는데 :-)..새로운 레슨 찍어주실 생각은 없으신가요...! 다른 강의도 들어봤지만 범쌤이 짱이에요...거기다가 질문 답변도 주시고 흑흑 텍마이머니..(지갑을 흔든다)
혹시 디자인 시스템 가이드 참고하시는것 있으신가요? 저는 컬러네임 정하는게 정말 어려웠는데 범쌤 덕분에 시스템 컬러와 악센트 등 잘 참고 하고 있습니다.

항상 감사드립니다!

디자인 시스템 with 피그마

답변 1

답변을 작성해보세요.

범쌤

지식공유자

2023.10.31

안녕하세요 이샘님 😀

variable font(가변글꼴)를 사용하면 기존에 웹,앱 사이트에서 폰트를 두께별로 여러분 불러오는 일을 한번에 처리할 수 있는 차세대 글꼴 포멧입니다.

가변글꼴을 사용한다면 웹서비스를 개발할 때 서버 필요한 폰트 요청(request)를 두께별로 불러오지 않고 단 한번의 호출만으로 여러가지 두께를 사용할 수 있으므로 이는 굉장히 큰 장점입니다.

다만 아직 대중화가 되어있지 않고, 사용하는 디자이너분들이 많이 없기에 일반 서체를 더 많이 사용하게 되는것이죠, 근래에 나온 폰트들은 기본 폰트의 크기 뿐만 아니라, 가변폰트까지 모두 지원하므로 최신 폰트들은 다운받았을 경우 상당수가 포함되어 있습니다.

그리고, 아마도 가변폰트 말고 woff, woff2 라는 확장자를 보셨을텐데요, otf,ttf는 웹에서 사용하기에 폰트의 용량이 크므로 이를 경량화(subsetfont) 시킨 폰트를 변환(converting) 과정을 거쳐 사용하게 됩니다.

디자인 컨셉마다 사용하는 폰트가 너무 다양해서 딱히 집어서 말씀드리긴 어려울듯 합니다 ^^; 대체적으로 무난하게 제일 많이 쓰는 폰트는 Pretendard 입니다 😄

제가 보여드린건 아주 작은 예시일 뿐이며, 회사에서 만들어내는 산출물의 결과물에 따라 달라질 수 있습니다.(e.g 뽑아내는 디자인의 아웃풋마다 폰트가 달라야 할 경우, 웹과 앱에서의 폰트가 달라야 할 경우)
이런 경우 회사의 컨벤션에 맞게 네이밍이 변경될 수있으며 정확한 명명규칙을 가지고 있다면 어떤 단어를 사용하셔도 무방합니다.

제가 heading, label, paragraph 네이밍을 사용한건 개발자에게도 익숙한 경험을 주기 위해서 사용했습니다.

개발자들은 다음의 단어들을 보고 태그를 유추 하거나 뜻을 이미 알고 있기 때문에 보다 익숙한 경험을 가지게 됩니다.

heading - html 코드에 존재하는 <h1></h1> 태그는 heading의 약어를 사용하고, 암묵적으로 제목을 나타내는 태그로 사용됩니다.

label - <label></label> 태그는 사용자가 어떤 정보를 입력받을 (input태그) 때 입력받을 필드의 소제목으로 무슨 내용이 들어갈지 적어야 하는 태그로 사용됩니다. 암묵적으로 어떤 글의 중제목으로 이해할 수 있습니다.

paragraph - <p></p> 태그는 웹상에 글이 긴 문단, 문장을 담을때 사용하는 태그입니다. 암묵적으로 글이 긴 텍스트박스라는걸 이해할 수 있습니다.

제가 방금 확인해본 결과로는 pro 버전이 아니여도 깃헙에 토큰을 등록할 수 있는 걸로 보입니다. 어떤 부분에서 안되고 있는지 에러 메시지는 무엇이라고 뜨는지 알려주시면 보다 정확한 답변 드리도록 하겠습니다.

피그마 자체에서 variable 기능을 지원하고있고 점점 이를 확대해 나가고 있습니다. 다만 이 기능들은 아직까지 유료 버전 사용자만 이용할 수 있는 기능이며 이 기능은 앞으로 더욱더 강력해질 예정입니다.

다른 학생분께서 tokenstudio와 variable에 대한 질문에 답변을 남긴 내용이 있어 같이 공유드립니다.
https://www.inflearn.com/questions/1006552/%ED%86%A0%ED%81%B0%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4-%EB%A1%9C%EC%BB%AC%EB%B2%A0%EB%A6%AC%EC%97%90%EC%9D%B4%EB%B8%94

차후 피그마 강의 예정은 내년 중순 6월 이후에 (피그마가 6월마다 대규모 업데이트를 진행합니다) 디자인 시스템 강의가 아닌 피그마 기초 툴 강의를 기획중에 있습니다. 피그마를 처음 접하는 분들을 위한 내용으로 피그마에서 제공하는 다양한 기능들을 어떻게 사용하고 응용할 수 있는지에 대해 다뤄볼 예정입니다. (오프라인 강의가 많아지면 더 늦어질 수 있습니다 🥹)

5. 저는 대체적으로 해외 유명 IT 회사들이 만들어놓은 디자인 시스템들을 보며 참고하는 경우가 많습니다.
보다보면 어디는 네이밍이 꼭 이래야한다 여기선 이 규칙이 정답이다는 전혀 보이지 않고 각자의 회사 구성원들(팀원)간의 합의가 이루어지고 컨벤션이 정해진 내용들로 규칙을 만들어 나가는 모습들을 볼 수 있습니다.

우버 디자인 시스템
구글 디자인 시스템
마이크로 소프트 디자인 시스템
애플 디자인 시스템
아마존 디자인 시스템
IBM 디자인 시스템

등등.. 찾아보면 다양한 자료들이 존재합니다.