[UIUX] 브레이크포인트란? + 개발자에게 어떻게 전달하나

 

브레이크포인트란?

반응형 디자인에서 레이아웃이 변화되는 지점을 의미

 

🚩 넷플릭스 사이트를 늘렸다 줄였다 해보면 브레이크 포인트가 뭔지 알 수 있다.

데스크톱 사이즈였다가?

태블릿 사이즈면 이렇게!

모바일사이즈가 되면 이렇게!

 

대표적으로 사용하는 브레이크 포인트 mobile : 0~599 tablet : 600~1024 desktop : 1024~

 

 

 

개발자에게는 어떻게 전달하나?

피그마 - Responsively - Playground (Community) 템플릿

 

 

예시처럼, 기기를 다양하게 쓰게 되는 서비스라면 (ex. OTT) 
우리 서비스가 지원할 기기에 대해 명시하고, 그 기기 사이즈마다 브레이크 포인트를 설정(개발자와 논의 필요)하여, 
기획 구성이 아예 달라진다면 그에 맞게 포인트마다 반응형 디자인을 설계한다!

 

브레이크 포인트 마다 템플릿을 디자인해주되, 각 프레임을 반응형 처리!