반응형디자인 (responsive design)
쉽게 풀면
컴퓨터 화면, 태블릿, 휴대폰처럼 화면 크기가 달라져도 알아서 보기 좋게 배치가 바뀌는 디자인 방식이에요. 그래서 창 크기를 줄이면 메뉴가 알아서 접히는 식으로 화면이 바뀌어요. 그래서 컴퓨터로 보든 휴대폰으로 보든 화면이 알아서 맞춰져요.
왜 중요한가
반응형디자인은 하나의 웹페이지가 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에 자동으로 레이아웃을 조정해 대응하도록 설계하는 방식으로, 이든 마르코트가 2010년 제안한 개념이 이후 웹 표준 설계의 기본 원칙으로 자리잡았다. 별도의 모바일 전용 사이트를 운영하지 않고도 다양한 기기에서 일관된 경험을 제공할 수 있다는 점이 실무 채택의 핵심 동기다. 다양한 화면 크기의 기기에서도 하나의 코드로 일관된 경험을 제공하는 데 쓰인다.
논문에서는 이렇게 쓰입니다
특정 화면 너비 기준에 따라 레이아웃이 자동으로 재구성되는 반응형 설계 규칙을 설명한다.
화면 크기별 레이아웃 최적화가 사용자 경험에 미치는 영향을 다룬 연구다.
조금 더 깊게 보면
화면 크기만 조정하는 것을 반응형디자인으로 오인하는 경우가 있지만, 실제로는 유동적 그리드, 유연한 이미지, 미디어 쿼리라는 세 가지 기술 요소가 함께 갖춰져야 완전한 반응형으로 볼 수 있다. 적응형디자인이 미리 정의된 몇 개의 고정 레이아웃 중 하나를 선택하는 방식이라면 반응형디자인은 화면 크기에 따라 유동적으로 연속 변화한다는 점에서 구현 방식이 다르다. 반응형 디자인은 하나의 코드와 레이아웃이 화면 너비에 따라 유동적으로 재배열되는 방식으로, 화면 크기별로 아예 다른 레이아웃을 따로 만드는 적응형 디자인과는 구현 방식이 다르다. 작은 화면을 기준으로 먼저 설계한 뒤 큰 화면으로 확장하는 모바일 퍼스트 접근이 이 방식과 흔히 함께 쓰인다.
주의할 점
반응형디자인은 화면 크기 변화에 따른 레이아웃 전환만 고려하고 실제 다양한 기기의 입력 방식 차이를 간과하면 사용성 문제가 발생할 수 있다. 이미지나 표처럼 유동적으로 줄이기 어려운 콘텐츠는 작은 화면에서 별도의 처리 방식이 필요하다. 화면 폭에 따라 요소가 재배열될 때 콘텐츠 우선순위를 미리 정하지 않으면 작은 화면에서 중요한 내용이 밀릴 수 있다.