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