브레이크 포인트(Break Point)
데스크탑, 노트북, 모바일, 테블릿 등과 같은 다양한 디바이스를 사용하는 유저를 고려하여 화면 크기에 맞춰 적절한 레이아웃을 노출시킬 수 있는 반응형 웹 디자인을 하고 계시는 분도 많이 계시죠? 레이아웃이 변경되는 기준값을 정하는 것을 '브레이크 포인트(Break Point)' 라고 하는데요, 반응형 웹디자인을 진행할 경우 브레이크 포인트를 잡아주는 것도 중요합니다.
아래 사진과 같이 데스크탑에서 보는 화면과 모바일로 보는 화면 레이아웃이 달라지는 것을 볼 수 있습니다.
특정 화면에서 보이는 레이아웃을 다르게 하기 위해서는 브레이크 포인트 설정이 필요한데 기준점을 정하는 것에
정답이 없기에 이 부분은 내부적으로 이야기 후 지정하시면 됩니다.
피그마(Figma) 사용하시면 'Breakpoints'라는 플러그인을 활용해 보셔도 좋을 것 같습니다.