반응형 디자인 (Responsive Design)
별칭: responsive design · responsive UI · 반응형 · 반응형 화면 · 반응형 디자인
화면 크기와 입력 방식에 맞춰 레이아웃과 요소 크기가 바뀌는 웹 설계 방식.
반응형 디자인은 데스크탑, 태블릿, 휴대폰처럼 화면 크기가 다른 환경에서도 같은 웹앱을 읽고 조작하기 좋게 만드는 방법이다. 수업에서는 목록과 상세 패널이 모바일에서 세로로 쌓이도록 다듬는 단계로 등장한다.
정의
반응형 디자인은 화면 크기, 입력 방식, 글자 크기, 기기 특성에 맞춰 웹페이지의 레이아웃과 요소 크기가 유연하게 바뀌도록 설계하는 방식이다. CSS media query, 유동 그리드, flexible layout, 반응형 이미지 같은 기술을 함께 사용한다.
왜 중요한가
데스크탑에서 보기 좋은 화면이 휴대폰에서도 좋은 것은 아니다. 카드가 너무 좁아지거나 버튼이 작아지거나 상세 패널이 화면 밖으로 밀리면 사용자는 금방 이탈한다. 특히 업무 도구형 웹앱은 반복해서 쓰기 때문에 모바일 조작성이 중요하다.
Semiclass에서의 의미
모바일 망토 단계에서는 생활정보 보드의 목록과 상세 패널이 작은 화면에서 세로로 쌓이고, 검색·필터·저장 버튼이 손가락으로 누르기 좋은 크기를 갖게 만든다. 이 작업은 디자인 꾸미기가 아니라 실제 사용 가능성을 확보하는 단계다.
주의할 점
반응형은 단순히 화면 폭에 따라 글자를 줄이는 작업이 아니다. 정보 우선순위, 터치 영역, 스크롤 흐름, 긴 텍스트 줄바꿈, 이미지 비율, 접근성을 함께 봐야 한다. 데스크탑 기준 화면을 그대로 축소하면 모바일에서 거의 항상 깨진다.