강의

멘토링

로드맵

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

platform_Biz님의 프로필 이미지
platform_Biz

작성한 질문수

UXUI 디자인 6주 완성 챌린지 (w. 피그마)

[실전 예제3] 홈 화면으로 시안 작업하기

Auto layout 관련

작성

·

14

0

image.png

안녕하세요. 표제 관련 문의 드립니다.

 

수업대로 박스 생성 후 텍스트를 넣었고 그룹화한 다음에 add auto layout을 하였습니다. 이렇게 구두 박스를 만들고 복사해서 스니커즈를 만드려는데, auto layout이 됐음에도 텍스트가 프레임 밖으로 삐져 나옵니다.

구두 프레임 width를 hug로 맞추면 복사한 프레임 내 텍스트가 삐져나오는 현상을 막을 수는 있으나 선생님이 하신 것처럼 구두는 width를 작게 시작해서 스니커즈같이 긴 것은 긴대로. 이런식으로 구현하려면 어떻게 해야 하나요?

답변 2

0

에릭님의 프로필 이미지
에릭
지식공유자

안녕하세요. 문의 감사합니다. 제가 어떻게 구현하셨는지 확인해보면 더 잘 답변을 드릴 수 있을 것 같아요. 제 이메일 ericworld121@gmail.com으로 해당 피그마 파일 링크를 보내주실 수 있을까요?

0

안녕하세요, 인프런 AI 인턴입니다. platform_Biz님.

피그마에서 Auto Layout을 사용하여 버튼 크기를 동적 텍스트에 맞게 조절하는 과정에서 발생한 문제를 해결하는 방법에 대해 설명드리겠습니다.

문제는 텍스트가 Auto Layout을 사용함에도 불구하고 프레임 밖으로 나가는 현상입니다. 이를 해결하려면 각 프레임의 Width와 관련된 설정을 적절히 조정해야 합니다.

해결 방법

  1. Auto Layout 설정 확인:

    • 텍스트와 함께 프레임을 선택한 후, 오른쪽 속성 패널에서 Auto Layout 관련 설정을 확인하십시오.
    • 각각의 프레임(Wrap) 설정이 Hug Contents로 되어 있는지 확인하세요. 이렇게 설정하면 텍스트의 길이에 맞게 프레임이 자동으로 조정됩니다.
  2. 텍스트 박스의 Resize 설정:

    • 텍스트 박스의 리사이즈 옵션이 Auto Height로 설정되어 있어야 합니다. 이렇게 하면 텍스트의 길이에 따라 높이가 자동으로 조절됩니다.
  3. Padding and Spacing 설정:

    • Auto Layout의 간격 조정 옵션에서도 Padding과 Element 간 Spacing을 조정하여 텍스트가 제대로 중앙에 위치하며, 프레임 내부에서 균형 잡히도록 해야 합니다.
  4. 기본 프레임 크기 조절:

    • 만약 초기에 설정해 둔 프레임의 Width가 너무 작게 설정되어 있다면, 초기에 기본적으로 가질 수 있는 Width 크기를 좀 더 크게 설정해보는 것도 방법일 수 있습니다.

아래의 링크에서 유사한 질문과 답변을 참조하여 더 많은 정보를 얻으실 수 있습니다:

이러한 정보가 프레임과 텍스트의 동적 레이아웃 설정에 도움이 되길 바랍니다. 더 궁금한 점이나 추가적인 질문이 있다면 언제든지 말씀해 주세요. 지식공유자님께서도 곧 답변을 추가해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

platform_Biz님의 프로필 이미지
platform_Biz

작성한 질문수

질문하기