inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

디자인 시스템 - 스타일 파운데이션

버튼 컴포넌트 제작시 패딩 값 질문

해결된 질문

98

이은종

작성한 질문수 1

0

안녕하세요 강사님, 현업 중 궁금한 점이 생겨 질문 드립니다.
spacing은 항상 4 혹은 8의 배수 로 진행한다면,
버튼 컴포넌트 생성시에도 동일하게 적용이 되는지 궁금합니다.

강사님의 강의를 접하기전에는, 프론트엔드 개발자 분이 무조건 짝수로 맞춰달라는 요청에
패딩을 짝수로 맞췄습니다.
그런데.... 본문에만 적용해야할 행간을
버튼 컴포넌트 폰트에도 동일하게 적용하여 결국엔 버튼 컴포넌트의 최종 크기가 짝수가 아니게 되어버렸습니다. ㅜㅜ

결국 개발자 분이 전부 수습을 하셨고, 이런 계기로 강사님의 강의를 듣게 되었는데요.

제 이야기의 문제점은
1. 버튼 컴포넌트 폰트에 행간 적용
2. 버튼 컴포넌트 패딩 값에 짝수 적용
이라고 생각되어 지는데,

버튼 컴포넌트 전체 너비와 높이가 짝수가 된다면 패딩 값은 홀수로 지정해도 되는것인지 궁금합니다. ㅜㅜ

웹-디자인 디자인-시스템 프로덕트디자인

답변 1

0

DX AI

안녕하세요, 이은종님! 질문 주셔서 감사합니다

패딩값이 홀수여도 괜찮습니다.
말씀하셨듯이 패딩은 상하/좌우에 홀수를 주어도 전체의 값이 짝수가 될 수 있죠.

버튼 컴포넌트의 경우 값이 자연수라면 보편적인 디스플레이에서 픽셀이 깨지지 않기 때문에 꼭 4의 배수나 8의 배수가 아니어도 괜찮습니다.

 

1. 버튼 컴포넌트 폰트에 행간 적용 👉 행간 값은 되도록 짝수를 추천드립니다.

대부분의 디자인 시스템에서 폰트의 행간 값을 px로 변환할 시 짝수가 되도록 맞춥니다.
이렇게 행간을 짝수로 맞춰놓으면 전체적으로 짝수 레이아웃을 유지할 수 있습니다.

[예시 이미지] https://atlassian.design/foundations/typography

image.png


2. 버튼 컴포넌트 패딩 값에 짝수 적용 👉 홀수 사용해도 됩니다. 자연수라면 괜찮습니다.

푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?

0

13

1

수업 자료 문의

0

13

1

css box-sizing 관련 질문

0

28

2

여태 만들던걸 다른 도메인으로 옮길 수도 있을까요?

0

20

1

뉴스페이퍼 테마 관련

0

32

1

지우지 말아야할걸 지운상태로 저장해버렸어요....

0

31

1

잘못된 파일 다운로드

0

35

1

수업자료는 어디서 받나요

0

37

2

토큰 추출을 베리어블+AI 활용 vs 토큰 스튜디오 차이

0

30

2

뉴스페이퍼 스킨을 꼭 사야하나요? 링크주소도 못찾겠어요

0

43

2

저는 일단 워드프레스로 블로그를 만들어 보려고

0

27

2

링크가없어요.. 확인부탁드리겠습니다.!

0

29

1

cafe24에서 했다가 fastcomet으로 변경하려 하는데요 문제가 생겼습니다

0

31

2

'만능으로 쓰이는 기본카드' 강의 내용에 대해 질문드립니다.

0

35

2

html / css 기초는 있습니다..

0

50

2

[무료 강의] AI로 브랜드 가이드라인, 디자인 시스템 구축부터, 앱 제작, 피칭 덱, 카드 캐러셀까지

0

37

1

[무료 강의] AI로 브랜드 가이드라인, 디자인 시스템 구축부터, 앱 제작, 피칭 덱, 카드 캐러셀까지

0

48

1

[무료 강의] AI로 브랜드 가이드라인, 디자인 시스템 구축부터, 앱 제작, 피칭 덱, 카드 캐러셀까지

0

37

1

figma.com/@boldux 계정이 없다고 나옵니다

0

51

2

강의 수강 기간 연장 부탁드리겠습니다

0

39

1

7강 도형+펜툴 중 막혔습니다ㅠㅠㅠ

0

68

2

안녕하세요! 작업 속도를 높여주는 단축키와 플러그인 강의는 없는걸까요?!

0

58

3

플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의

0

352

2

색상 파레트 제작 시, 색상 배합 방법 문의

0

151

1