반응형

PC에서 잘 만든 화면을 폰으로 열었더니 글자가 삐져나오고 배치가 엉망일 때가 있어요. 분명 컴퓨터에선 멀쩡했는데 말이죠. 이때 필요한 개념이 반응형이에요.

반응형은 화면 크기에 맞춰 레이아웃이 자동으로 바뀌게 만드는 방식이에요. 물을 떠올리면 쉬워요. 큰 컵에 담으면 크게, 작은 컵에 담으면 작게, 그 모양에 딱 맞춰 담기잖아요. 반응형 화면도 똑같이 PC에선 넓게 펼치고, 폰에선 좁게 접어서 어디서든 보기 좋게 맞춰줘요.

요즘은 방문자 상당수가 폰으로 봐요. 그래서 반응형은 선택이 아니라 기본이에요.

바이브코딩에서 “폰에서 깨져요”라는 상황을 만나면, AI에게 “모바일 반응형으로 맞춰줘”라고 하면 대부분 정리해줘요. 처음부터 “반응형으로 만들어줘”라고 못박아 시작하면 이 문제를 아예 줄일 수 있고요. 단어 하나 아는 것만으로 재작업이 확 줄어드는 지점이에요.