큰 화면에서 보던 웹페이지를 작은 화면에서 그대로 축소하면 읽기 어렵습니다. 반응형은 같은 내용을 화면 폭에 맞게 다시 배치해서 누구나 읽기 쉽게 만드는 방법입니다.
공식 문서에서도 반응형 웹 디자인은 여러 화면 크기에서 잘 보이도록 배치와 크기를 조정하는 방법이라고 설명합니다. 웹에서는 아주 기본이 되는 생각입니다.
데스크톱용, 태블릿용, 휴대전화용을 각각 따로 만드는 것이 아니라, 같은 내용이 폭에 따라 다른 배열로 보이게 만드는 것이 반응형입니다.
반응형을 처음 배울 때 제일 이해하기 쉬운 변화는 카드 줄 수입니다. 큰 화면에서는 세 장이 나란히 보이던 카드가 작은 화면에서는 한 장씩 아래로 내려옵니다.
그냥 전체 화면을 축소하면 글자가 너무 작아지고 버튼도 누르기 어려워집니다. 작은 화면에서는 읽는 순서와 버튼 크기를 다시 정리해야 합니다.
MDN 문서도 반응형을 여러 화면 크기와 해상도에서 잘 보이도록 만드는 설계라고 설명합니다. 그 핵심은 사용하기 쉬워야 한다는 점입니다.
반응형은 아무 때나 모양이 바뀌는 것이 아닙니다. 어떤 폭 근처에서는 큰 화면 규칙을 쓰고, 더 좁아지면 작은 화면 규칙으로 바꾸는 식으로 생각합니다.
큰 화면에서는 사진과 설명을 옆으로 나란히 둘 수 있습니다. 작은 화면에서는 사진을 먼저, 설명을 아래에 두어 위에서 아래로 읽기 쉬운 순서를 만드는 편이 좋습니다.
브라우저 도구를 쓰면 휴대전화와 비슷한 폭에서 페이지가 어떻게 보이는지 확인할 수 있습니다. 그래서 배포 전에 줄 수, 버튼 크기, 가로 넘침을 점검할 수 있습니다.
반응형은 “모바일도 잘 보이게”라는 말만으로는 부족합니다. 큰 화면과 작은 화면에서 무엇이 어떻게 바뀌는지 같이 적어야 AI가 안정적으로 만듭니다.
좋은 반응형 요청은 몇 열인지, 어떤 순서인지, 무엇이 크게 보여야 하는지를 포함합니다. 막연한 말은 AI가 추측하게 만들고 결과도 들쑥날쑥해집니다.
집에서는 만들고 싶은 페이지를 하나 정한 뒤, 큰 화면에서의 배치와 작은 화면에서의 배치를 따로 스케치해 옵니다. 다음 시간에는 이 스케치를 AI 반응형 명령으로 바꿉니다.
반응형은 큰 화면용 페이지를 그냥 줄이는 것이 아니라, 같은 내용을 화면 폭에 맞게 다시 배치하는 방법입니다. 큰 화면에서는 옆으로 나누고, 작은 화면에서는 아래로 쌓는 식으로 생각하면 쉽습니다.
큰 화면에서는 카드 3열로 보여줘. 중간 화면에서는 2열로 바꿔줘. 작은 화면에서는 카드가 한 줄에 하나씩 쌓이게 해줘. 버튼은 손가락으로 누르기 쉽게 크게 보여줘.
제목 위치: ________________________________
사진 위치: ________________________________
카드 줄 수: _______________________________
제목 위치: ________________________________
사진 위치: ________________________________
카드 줄 수: _______________________________
크게 보여야 할 버튼: ______________________
반응형: 화면 폭에 따라 배치를 바꾸는 방식입니다.
큰 화면: 가로 공간이 넓어서 옆배치를 쓰기 좋은 상태입니다.
작은 화면: 가로 공간이 좁아서 아래배치를 쓰기 좋은 상태입니다.
가로 넘침: 화면 밖으로 내용이 튀어나와 옆으로 밀리는 문제입니다.