강의

멘토링

로드맵

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

platform_Biz님의 프로필 이미지
platform_Biz

작성한 질문수

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

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

Auto layout 관련

작성

·

24

0

image.png

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

 

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

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

답변 3

0

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

안녕하세요. 답장이 늦어져 죄송합니다.

관련해서 영상을 찍어서 보내드립니다.
https://youtu.be/tSOXx119In0

확인을 해보니, 각각의 태그 박스를 선택하신 후, Hug를 선택해주시면 됩니다. 그리고 모든 태그 박스가 선택된 박스에 대해서는 Wrap 처리를 해주시면 됩니다.

Hug를 해준다는 것은 박스 안의 요소 (이 경우에는 텍스트)를 감싸 안아준다는 의미입니다. 그래서 텍스트가 많아져도 그것을 감싸 안아주기 위해서 태그 박스도 좌우로 함께 늘어나게 됩니다.

 

확인해보시고 질문 있으시면 말씀주세요.

감사합니다.

0

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

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

platform_Biz님의 프로필 이미지
platform_Biz
질문자

안녕하세요. 선생님

메일을 10/15에 보냈는데, 아직 답변을 못받아서요~ 혹시 링크 안들어가지는 걸까요? AI 답변은 이해하는데 한계가 있습니다.

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

작성한 질문수

질문하기