대표 프레임 크기(Max Width)

Question

에릭쌤~ MaxWidth가 프레임 크기라고 보면 되는 거죠? 그런데 figma에서만 해도 프레임이 폰/태블릿/PC별로 선택지가 넘 많은데 각각 어떤 기준으로 프레임 크기를 선택해서 작업하는 것이 좋을까요? 폰/태블릿/PC별로 현재 사람들이 가장 많이 사용하는 기기를 기준으로 잡자니 정확한 데이터를 얻는 것 자체가 어려운데요 혹시 이런 정보에 대해 참고하시는 사이트가 있는지도 궁금합니다~

에릭 · Answer

Max H님 안녕하세요. 좋은 질문 감사드립니다. 폰/태블릿/PC별로 선택지가 많다는 것에 공감합니다. 말씀하신대로 처음 시작하는 입문자의 입장에서는 어느 것을 기준으로 잡아야 할지 애매할 수 있는데요. 이럴 경우, 데이터를 찾아가면서 내가 이것저것 테스트해보면서 부딪혀볼 수도 있겠지만, 업계에서 많이 사용되는 방식으로 적용해보면서 일단 시작하는 것도 좋은 방법입니다. 그중 하나가 Bootstrap입니다. 저 역시 여기서 제공하는 포맷으로 화면의 기준을 잡고 일을 했습니다. 웹개발 업계에서 많이 활용하는 프레임워크 중 "Bootstrap"이라는 게 있습니다. 여기서는 개발자들이 모든 것을 처음부터 개발하는 것이 아니라, 더 쉽게 개발을 할 수 있도록 재사용할 수 있는 오픈 소스들을 제공하는 곳인데요. (제가 개발자가 아니다 보니, Bootstrap의 기원이나 더 자세한 설명은 드리기는 어려울 것 같아 참고 글 공유합니다.) Bootrap 소개 관련 블로그 글 . Bootstrap에서는 기본적으로 제공하는 그리드 시스템이 있습니다. 어느 시점부터 화면상의 구성을 다르게 가져갈 건지, Gutter는 어떻게 할 것인지에 대한 정의가 이루어져 있어요. Bootstrap Grid 여기에서는 화면을 5가지로 나누고 있습니다. Extra Small (X < 576px)은 일반적인 모바일 Small (768px > X &ge; 576px) 은 조금 작은 사이즈의 태블릿 Medium (992px > X &ge; 768px) 은 태블릿 Large (1200px > X &ge; 992px) 와 Extra Large (X &ge;1200px)는 PC라고 보시면 됩니다. 이를 기준으로 Frame의 Width와 Container Width를 적용하여 작업을 할 수 있습니다. 제가 글로만 쓰자니 모든 것을 설명드리기가 한계가 있었는데 마침 피그마 커뮤니티에 오픈 소스로 Bootstap기반으로 Frame을 만들어 놓은 분이 있네요. ㅎㅎ 아래 자료도 함께 보시기 바랍니다. https://www.figma.com/community/file/781437135012875695 그러면 참고가 되셨기를 바라고 또 궁금한 점 있으면 말씀주세요^^ 감사합니다.

Max H · Answer

와우~ 정성껏 답변해주셔서 감사합니다 도움이 되었어요 ^^