인프런 커뮤니티 질문&답변
작성한 질문수
강의 자료 스타일 가이드(타이포그래피) 관련 문의
해결된 질문
작성
·
293
0
안녕하세요, 강의자료에서 스타일 가이드 > 타이포그래피 관련하여 질문드립니다!! 실무 경험이 부족하다보니 신입, 1인 디자이너로 반응형 웹 리뉴얼 진행 중에 스타일 가이드 제작이 쉽지 않아서요~ 강사님께서 만드신 타이포그래피 가이드를 그대로 실무에 적용해도 괜찮을지 궁금합니다!! 실무에서 많이 쓰는 타이포 그래피 사이즈인지 궁금합니다! 도움 부탁 드립니다!!
답변 2
1
질문 주셔서 감사합니다.
저는 우선 만들기 전에 개발자분과 상의한 후 정하시는 걸 추천드려요!
보통 개발자 분들은 처음부터 새로 만드는 것보다 UI 프레임워크(Chakra UI나 MUI)를 쓰시거든요. 개발자에게 물어보시고 사용하는 프레임워크와 유사하게 쓰시는 걸 추천드려요.
그 이유는 디자인, 개발 사이에 간극을 줄이고 수정을 적게 하기 위해서입니다. 기본 틀에서 시작하고 만약 필요하면 추가하는 방식을 추천드려요.
MUI의 경우는 구글 머리티얼의 타이포 그래피 구조를 사용하시면 되구요.
https://m3.material.io/styles/typography/type-scale-tokens
또한 Tailwindcss도 유명한데, 그걸 사용한다면 이링크에 들어가서 비슷하게 만드시는 걸 추천드려요.
https://tailwindcss.com/docs/font-size
제 강의는 다른 유명한 디자인 시스템을 보고 만들었습니다. 그렇기 때문에 그 회사에 필요한 디자인 시스템 예시로 만들었기 때문에 "강의화이팅" 님의 회사의 시스템과 다를 수 있습니다. 그렇기 때문에 반드시 개발자와 상의 후 정하시는 걸 추천드립니다.
하지만 타이포그래피의 경우는 몇 개 비교 해보시면 아시겠지만 큰 틀에서는 모두 비슷합니다!
Heading, Body
스케일이 몇배수로 커지는지
Line height를 PX, %로 정할지
0
자세한 설명 해주셔서 감사합니다! 개발자분께서 머터리얼 가이드 기준으로 사용하셨다고 관리하는 프레임워크 링크도 공유해 주셨는데요! 그 프레임워크 보는것이 익숙하지 않아서 자세히 못 봤습니다ㅠㅠ
프레임 워크를 살펴봐야겠네요! 감사합니다 강사님!