지식 · IT·데이터·DX
반응형 웹
Responsive Web Design
📂IT·데이터·DX⏱읽기 1분📊입문🔗관련 4
반응형 웹이란?
한 줄 정의
화면 크기에 맞춰 레이아웃이 자동으로 바뀌어, PC·태블릿·모바일 어디서나 보기 좋게 만드는 웹 디자인 방식.
⚡ 3줄 요약
- 화면 크기에 맞춰 자동 재배치
- PC·모바일 어디서나 보기 좋게
- 모바일 시대 필수
반응형 웹은 하나의 사이트가 기기 화면 크기에 따라 스스로 배치를 바꾸는 것입니다. 넓은 PC에선 3단, 좁은 모바일에선 1단으로 접히는 식입니다. 예전처럼 PC용·모바일용 사이트를 따로 만들지 않고 하나로 대응합니다.
지금은 모바일 접속이 다수라 사실상 필수입니다. 검색에도 영향을 줍니다(모바일 친화성). 바이브 코딩으로 사이트를 만들 때 'AI야, 모바일에서도 잘 보이게 반응형으로 만들어줘'라고 요청하면, AI가 화면 크기별 규칙(미디어 쿼리)을 적용해 줍니다.
💡 쉽게 말하면
물이 그릇 모양에 맞춰 담기듯 — 화면 크기에 맞춰 레이아웃이 자동으로 바뀝니다.
실무에서 왜 중요한가
방문자 대부분이 모바일입니다. 반응형이 아니면 절반의 사용자가 불편을 겪습니다.
유래와 출처
웹 디자이너 이선 마콧(Ethan Marcotte)이 2010년 글에서 'Responsive Web Design'이라는 개념과 이름을 제시하며 대중화됐습니다.
출처 · Ethan Marcotte, 'Responsive Web Design'(2010) · 원문 보기
사례로 이해하기
예를 들어, 반응형으로 만든 사이트의 동작을 봅시다.
- PC — 넓은 화면에선 메뉴가 가로로 펼쳐지고 3단으로 배치됩니다.
- 태블릿 — 중간 화면에선 2단으로 줄어듭니다.
- 모바일 — 좁은 화면에선 1단으로 접히고 메뉴가 햄버거 버튼이 됩니다.
- 규칙 — 화면 크기별 규칙(미디어 쿼리)이 이를 자동 처리합니다.
- 결과 — 하나의 코드로 모든 기기에 대응합니다.
관련 용어
HTML · CSS · 자바스크립트웹페이지를 이루는 세 가지 기본 요소 — HTML은 구조(뼈대), CSS는 디자인(옷), 자바스크립트는 동작(움직임).프론트엔드 · 백엔드프론트엔드는 사용자가 보는 화면(앞단), 백엔드는 그 뒤에서 데이터·로직을 처리하는 서버 쪽(뒷단). 웹 개발의 두 축.프레임워크 · 라이브러리라이브러리는 필요할 때 꺼내 쓰는 '기능 모음집', 프레임워크는 그 위에서 개발의 '틀·골격'을 제공하는 것. 바퀴를 다시 발명하지 않게 해준다.SEO · SEMSEO는 검색에서 자연 노출을 높이는 최적화, SEM은 검색 광고 등 유료로 노출을 사는 마케팅. 둘 다 '검색하는 고객'을 잡는다.
이 용어와 연결된 교육
📚디지털 트랜스포메이션나눔경영컨설팅 기업교육 · 대면/온라인과정 보기 →이 주제로 사내 교육이 필요하신가요?
담당자 맞춤 커리큘럼·견적을 바로 받아보세요.
자주 묻는 질문
반응형 웹은 '브라우저에서 열리는 사이트'가 기기에 맞게 바뀌는 것이고, 앱은 별도로 설치하는 프로그램입니다.
네. 모바일 방문이 다수이고 검색 평가에도 영향을 줘, 사실상 기본입니다.
반응형 웹은 '하나의 웹'이 화면에 맞춰 바뀌는 것, 앱은 별도 설치 프로그램입니다.
모바일 방문이 많은 시대라 사실상 필수입니다. 모바일에서 불편하면 이탈합니다.