픽스드, 플루이드 반응형 레이아웃 그리드 적용 질문

안녕하세요, 볼드 멘토님!

픽스드, 플루이드 반응형 레이아웃 중에 많이 사용되는 케이스가 어떤 것일까요? 오토레이아웃 적용해서 반응형 웹 사이트 디자인 중인데요! Pc 사이즈 먼저 제작 후 모바일, 패드 사이즈 제작하려던 중, 헷갈리는 부분이 있어서요! 콘텐츠 이미지 사이즈를 픽스드 처럼 동일하게 적용할지 고민하다가 (픽스드로 디바이스마다 이미지 사이즈를 비슷하게 적용하려니 어색해보여서요) 플루이드로 시도했는데요~ 이미지 사이즈 축소 기준을 어떻게 맞춰야 할지 헷갈려서요! 좌우마진, 거터 정해서 플루이드로 시도해봤는데요! 뭔가 설정이나 사용법이 부족한 것인지 이미지 사이즈를 수동으로 조절하게 돼서요! 콘스트레이트 설정도 안 보이구요ㅠㅠ
콘텐츠(이미지, 카드ui) 플루이드 적용 방법 조언(컨스트레이트 설정 안 보임, 자동 조절처럼 안되는 이유), 또는 첨부 자료 부탁드려도 될까요?ㅠㅠ

안녕하세요! 항상 좋은 질문 주셔서 감사합니다.

반응형은 쉬우면서도 항상 어려운 부분인 것 같습니다.

웹사이트마다 모두 달라서 무엇이 정답이다라고 할 수는 없지만 제가 공유해 드린 피그마 스타일 가이드라인 특정 브레이크 부분(Breakpoints) 이상부터는 Fixed이고 그 아래는 Fluid로 되어 있습니다.

이는 토스 toss.im을 메인 웹사이트를 보더라도 동일합니다.

1140px 이상은 고정형(Fixed)입니다.

1140 px 이하는 플루이드(Fluid)형식입니다.

결국 둘다 사용하셔야 두 개가 동일하지만 세팅이 다른 피그마 프레임이 나오겠죠.

콘텐츠 같은 경우는 수평 사이즈에 따라 유동적이게 바꾸고 싶으시면,

오토레이아웃이 덮여진 최상위 레이어의 경우는 FIll을 통해서 크기를 설정하시는 것을 추천드리고요.
하위 레이어의 경우(상위레이어가 그룹인 경우)는 컨스트레인(Contrain) 부분에서 Scale 또는 Top&bottom, Left&Top 또는 Center(상황에 따라)를 설정하시는 것을 추천드립니다.

제 생각에는 컨스트레인(Constrain)이 안보이는 것은 지금 만드신 컨텐츠 ui가 최상위 레이어거나 오토레이아웃이 덮혀져 있는 경우인 것 같습니다. 이 경우는 프레임 안에 따로 이미지를 만드시거나 오토레이아웃이 덮힌 경우 Fill을 적용해주실 것을 추천드립니다.

제가 피그마 파일 첨부해드렸으니 한번 뜯어 보시기 바랍니다.

보라색 이미지는 오토레이아웃이 덮힌 최상위 레이어의 경우 컨스트레인이 없습니다. 이 경우는 FIll로 유동성 있게 만들었구요.
구름 이미지는그룹 아래 하위 레이어로 컨스트레인이 나오고 카드 유아이의 사이즈에 따라 유동적으로 변하는데, 저는 Top&Bottom 그리고 Left&Right를 사용해서 만들어보았습니다.

만약 이해가 안되시면 안되는 부분이나 작업하고 계신 파일을 저에게 보내주시면 한번 봐 드리겠습니다.

boldplus.ux@gmail.com

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