작성한 질문수 4

1

안녕하세요, orehi3634님 밑에 인프런 인턴이 자세하게 답변해주어서 놓치고 지나갔네요.

우선 남겨주신 질문에 저의 답변이 늦은 점 죄송합니다.

이번에 Lock Aspect Ratio이 플러그인이 없어졌습니다. 그리고 이제 피그마 안에서 이미지 비율을 고정할 수 있습니다. 이 경우에 안에 만드신대로 Group1 안에 Frame 이미지를 넣으셔도 됩니다.

아니면 Group1 최상의 레이어만 남겨두셔도 무방합니다.

하지만 만약 코드랑 비슷하게 하고 싶다면, 보통은 div 안에 img 를 넣는 편이라 만드신 것을 좀 더 발전 해나가시면 될 것 같습니다.

• Group1 - 이미지 프레임/래퍼 (보통 div)

• Frame - 이미지 (보통 img)

그리고 이 경우에는 Group1 최상단에서 피그마 레이아웃에서 W,H 옆에 아이콘 눌려주시면 비율이 고정이 됩니다. 그리고 하단 Frame의 경우에는 Constraints에서 상하좌우를 하시면 괜찮을 거 같습니다. Group1은 16:9를 하고 싶의면 임의로 160:90으로 만들고 비율 고정 후 원하시는 크기로 바꾸시면 됩니다. 도움이 되시라고 아래 이미지도 첨부해드렸습니다.

레이어 구성

Image Frame: 16:9로 비율 고정하기

Image: 내부 이미지 프레임 컨스트레인 설정: 이렇게 하면 Image Frame이 커지면 같이 따라옴.

감사합니다.

볼드 드림.

0

안녕하세요, 인프런 AI 인턴입니다. orehi3634님, 질문해주셔서 감사합니다.

이미지 플레이스홀더와 그룹화 관련 문제 해결

피그마에서 이미지 플레이스홀더를 사용하면서 그룹화 문제를 겪고 계신 것 같습니다. 질문에서 언급하신 “Lock Aspect Ratio” 플러그인과 관련된 부분은 아래 내용을 참고하시면 도움이 될 것 같습니다.

Lock Aspect Ratio 및 이미지 플레이스홀더 설정

1. Lock Aspect Ratio 기능: 이 기능은 선택된 요소의 가로 세로 비율을 고정하여 크기를 조절할 때 형태가 변형되지 않도록 합니다. 피그마의 기본 기능으로 사용 가능하며, 레이어를 섞어 관리하면서도 비율 유지가 가능하므로, 플러그인 사용 없이도 이미지를 구성할 수 있습니다.

2. 이미지 플레이스홀더 설정:

   • 플레이스홀더를 만들 때 프레임을 사용하여 기본 구조를 설정한 다음, 그 안에 이미지를 삽입하는 방식을 사용합니다.
     
   • 그룹화를 통해 플레이스홀더와 이미지의 결합 상태를 유지할 수 있으며, 이를 활용하여 컴포넌트로 변환할 수도 있습니다.
     

3. 구조화 접근법:

   • 프레임을 사용하여 이미지 플레이스홀더의 기본 구조를 잡고, 각각의 플레이스홀더는 개별적인 요소로 구성됩니다. 이를 통해 다양한 해상도에 맞춘 컴포넌트를 제작 가능합니다.
     
   • 구조 상 하위 개념이 나타나지 않는 경우, [Image] 요소를 프레임 내부에서 관리하고 있는지, 그리고 프레임 자체가 제대로 설정되어 있는지를 확인해보세요.
     

이어서 할 수 있는 방법

현재 접근하신 대로 프레임을 사용하고, 각 요소를 그룹화하여 컴포넌트화하는 것은 올바른 접근입니다. 다만, 세부적으로 컨펌이 필요한 경우 아래 유사한 질문들을 참고하시면 도움이 될 수 있습니다:

• Figma에서 이미지 플레이스홀더 구성 방법
  
• UI 컴포넌트를 위한 프레임과 그룹화 방법
  

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