웹 기본
반응형 웹페이지(Responsive Web)
반응형 웹은 같은 페이지가 화면 크기에 맞춰 배치와 요소 크기를 조정하도록 만드는 방식입니다.
쉬운 설명
스터디 소개 페이지를 PC와 휴대전화에서 열었을 때 각각 읽고 사용하기 편해야 해요. 반응형 웹은 같은 내용을 화면 크기에 맞게 재배치해요. 넓은 화면의 두 열을 좁은 화면에서는 한 열로 바꾸거나, 이미지가 화면 밖으로 나가지 않게 할 수 있어요. PC 화면 전체를 작게 축소해서 보여 주는 것과는 달라요.
이런 상황에서 만나요
PC에서는 소개 글 옆에 신청 안내가 있는데, 휴대전화에서는 두 영역이 너무 좁아져요. 좁은 화면에서는 소개 글 다음에 신청 안내가 오도록 배치를 바꾸려는 상황이에요.
소개 글과 신청 안내의 순서를 유지하며 배치해요
함께 만드는 첫 웹 앱
토요일 오전에 만나요
함께 만드는 첫 웹 앱
토요일 오전에 만나요
내용이 잘리지 않음
읽는 순서 유지
신청 기능에 접근 가능
- 1소개 글 옆에 신청 안내를 놓을 공간이 있어요.
- 2소개 글 다음에 신청 안내를 보여 줘요.
- 3크기만 줄이지 말고 같은 작업을 마칠 수 있는지 확인해요.
AI에게 “좁은 화면에서는 소개 글 아래로 신청 안내를 옮기고, 가로 스크롤 없이 읽을 수 있게 해 줘”라고 요청해 보세요. PC·태블릿·휴대전화 너비와 그 중간에서도 내용이 잘리거나 순서가 어색해지지 않는지 확인해요.
헷갈리기 쉬운 점
반응형이면 모바일에서 쓸 준비가 끝난 건가요?
배치가 맞는 것과 사용하기 편한 것은 별도 확인이 필요해요. 글자가 너무 작지 않은지, 버튼을 누르기 쉬운지, 키보드가 열렸을 때 입력할 수 있는지, 이미지가 늦게 뜨지 않는지도 살펴봐야 해요.
공간이 부족하다고 필요한 설명이나 신청 기능을 모바일에서 숨기면 사용자가 작업을 마치지 못할 수 있어요. 콘텐츠의 중요도와 읽는 순서를 정한 뒤 배치를 조정하세요.
왜 알아야 할까요?
한 페이지를 여러 화면에서 공유할 때 생기는 문제를 구체적으로 점검할 수 있어요. 화면 크기에 맞춰 무엇을 줄이고 무엇을 다시 배치할지도 판단하기 쉬워져요.
조금 더 자세히
반응형 구성에는 유연한 너비, Grid·Flexbox 같은 배치 방식, 화면에 맞는 이미지와 미디어 쿼리 등이 쓰입니다. 미디어 쿼리 하나만 추가했다고 전체 페이지가 자동으로 반응형이 되는 것은 아닙니다.
모바일 브라우저에서 의도한 너비로 표시하려면 viewport 설정도 확인합니다. 이미지의 표시 크기와 내려받는 파일 크기는 다르므로, 화면에 맞는 이미지 파일을 제공하는 구성도 필요할 수 있습니다.
직접 사용할 때 확인해 보세요
- 여러 너비와 중간 크기를 확인한다
- 콘텐츠의 읽는 순서를 유지한다
- 이미지와 긴 글의 가로 넘침을 확인한다
관계 지도
