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

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

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

1. 반응형의 경우 픽스(Fixed), 플루이드(Fluid) 레이아웃 무엇이 더 쓰이는가요?

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

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

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

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

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

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

1. 오토레이아웃이 덮여진 최상위 레이어의 경우는 FIll을 통해서 크기를 설정하시는 것을 추천드리고요.

2. 하위 레이어의 경우(상위레이어가 그룹인 경우)는 컨스트레인(Contrain) 부분에서 Scale 또는 Top&bottom, Left&Top 또는 Center(상황에 따라)를 설정하시는 것을 추천드립니다.

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

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

https://drive.google.com/file/d/1og1DgNlW5hev4lAAtVbfYr1e2RnWLSRB/view?usp=sharing

• 보라색 이미지는 오토레이아웃이 덮힌 최상위 레이어의 경우 컨스트레인이 없습니다. 이 경우는 FIll로 유동성 있게 만들었구요. 

• 구름 이미지는그룹 아래 하위 레이어로 컨스트레인이 나오고 카드 유아이의 사이즈에 따라 유동적으로 변하는데, 저는 Top&Bottom 그리고 Left&Right를 사용해서 만들어보았습니다.

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

boldplus.ux@gmail.com