Text 박스 조정하는 법
1050
7 asked
도형 안에 텍스트를 올려 버튼을 만드는 일이 많은데요. 도형 안 텍스트가 정 한가운데에 있어야하는데, 계속 살짝 위아래 정렬이 한가운데가 아니라 아래쪽으로 쏠린 모습이예요. 텍스트박스도 도형 안에 한 가운데에(동일 Padding) 잘 놓았고, 텍스트박스도 위아래 가운데 정렬 설정 모두 다 잘 한상태인데두요.
그래서 Text의 Line Height 이라는 부분을 줄간격 개념으로 생각하고 Auto가 아닌 0으로 설정해보았는데, 첨부드리는 이미지와 같이 Text 박스가 실제 Letter보다 작아져요.
Line Height 0이면 텍스트박스가 원래 그렇게 작게 보이는건가요?
텍스트 박스 안의 Letter 높이와 딱 맞게 텍스트 박스 높이를 조정하려면 어떻게 해야하나요?
텍스트의 Font size와 동일하게 텍스트박스 Line Height 맞추면 비슷해지는것같긴하지만, 여전히 하단맞춤정렬이 되어있는 느낌입니다. 버튼 도형안에 버튼명 텍스트가 한가운데에 보이게 하려면 어떻게 해야할까요? 혹시 텍스트 Layout (ㅣ→ 이런 설정)의 문제일까요?
Answer 2
3
안녕하세요 질문 감사드립니다.
작게 보일 수 있습니다. 가급적이면 해당 사이는 0이 아닌 auto 또는 auto 값보다 높은 값을 설정하는 것을 추천드립니다.
2 & 3. 이 부분은 폰트 패밀리에 따라서 영향을 받기도 하고 완벽하게 가운데 정렬로 원하는데로 만들어주는데 한계가 있는 것 같습니다. 디자인을 결과적으로 개발자에게 전달하는 것을 목표로 잡았을 경우, 이것은 크게 문제는 되지 않는 것 같습니다. 적어도 상하좌우 여백이 동일함을 개발자가 확인할 수 있기 때문입니다. 미적으로 가운데 정렬이 되도록 해주고 싶다면 임의적으로 line height를 조정하거나 하는 방식을 취할 수 있지만 그다지 추천을 드리지는 않습니다. 아쉽게도 아직까지 완벽하게 만드는 것에 대해서는 저도 해법을 찾지는 못했습니다.
다시 한번 질문 감사드리며 또 궁금한 점이 있다면 말씀주세요.
0
안녕하세요, 인프런 AI 인턴입니다. Haein님.
피그마에서 도형 안의 텍스트 정렬 문제는 많은 디자이너들이 흔히 겪는 어려움 중 하나입니다. 질문에 대한 해답을 제공하기 위해 비슷한 질문들을 살펴보았습니다.
Line Height 설정: Line Height를 0으로 설정하면 텍스트 박스가 텍스트의 레터 높이와 정확히 맞지 않을 수 있습니다. 일반적으로 Line Height는 텍스트의 위아래 여백을 의미하며, 적절한 값을 설정하는 것이 중요합니다.
Letter와 박스 맞춤: Line Height를 Font Size와 일치시켜 보세요. 그래도 하단 정렬로 보인다면, 텍스트 정렬 옵션을 확인하세요. 피그마에서는 ‘Vertical Align Center’ 옵션을 통해 텍스트를 정확히 중앙에 위치시킬 수 있습니다.
텍스트 레이아웃 문제: 텍스트 박스 자체의 정렬이 아닌 도형과 텍스트 박스 간의 정렬 문제일 가능성이 큽니다. ‘Auto Layout’ 기능을 사용해 도형 안에서 텍스트를 자동으로 중앙에 배치하도록 설정할 수도 있습니다. 이는 피그마에서 버튼을 디자인할 때 유용한 기능입니다.
유사한 질문과 해결 방법을 찾을 수 있었던 링크들을 소개드립니다:
- 텍스트박스 크기변경할때
- 오토 레이아웃 질문이에요!
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
프레임 조정 관련
0
57
2
arrow auto 플러그인이 검색해도 안나오는데 대체할 다른플러그인 추천해주실수있을까요 ?
0
73
1
오브젝트간 간격 4px 주시는 이유가 구체적으로 궁금합니다.
0
111
0
하단바 고정
0
396
2
도형 오토레이아웃 설정
0
145
2
단락별 행간 조절
0
97
2
수강기한 연장 관련 질문드립니다.
0
90
2
24화 질문인데 도형 선택해도 layer가 안 뜹니다
0
169
3
go back to previous(이전 버전으로 가기) 가 안뜹니다
0
374
3
Auto Layout 적용이 되지 않습니다
0
401
2
SF Symbols 윈도우
0
362
2
섹션 13 질문입니다. Asset에 Toolbar가 뜨지 않습니다
0
141
2
Constraint기능에서 Top & Bottom 기능이 연동이 안되네요
0
162
2
Copy Link로 프로토타입 공유 시, 휴대폰 프레임 안보이게 하는 기능
0
325
2
프레임 크기를 조정하다가 모르는 박스를 발견했어요.
0
145
2
Style 저장하는데 Variable?
0
375
1
확장성
0
117
2
하단바 설정하는 방법
0
294
2
컴포넌트들 에셋상에서 폴더값으로 분류하는 법
0
610
4
하단바 고정시
0
928
3
섹션 12 예제 파일이 안보입니다!
0
177
2
제플린 핸드오프에 관련 질문입니다.
0
143
2
오토레이아웃
0
144
2
Auto layout 글자가 늘어나도 버튼이 같이 안 늘어나요
0
184
1