적응형디자인 (adaptive design)

디자인학
한 줄 정의: 미리 정의된 몇 가지 화면 크기별 레이아웃을 준비해두고 기기 환경에 맞는 레이아웃을 선택적으로 제공하는 인터페이스 디자인 방식이다.

쉽게 풀면

화면 크기별로 미리 몇 가지 디자인을 만들어놓고, 그중 딱 맞는 것을 골라서 보여주는 방식이에요. 그래서 휴대폰용, 태블릿용, 컴퓨터용 화면을 각각 따로 만들어 두는 방식이에요. 그래서 화면 크기별로 미리 준비해 둔 몇 가지 레이아웃 중 하나가 뜨는 거예요.

왜 중요한가

적응형 디자인은 미리 정한 몇 가지 화면 폭(예: 모바일·태블릿·데스크톱)마다 별도 레이아웃을 준비해 기기 조건에 따라 골라 보여 주는 접근입니다. 기기별로 성능과 콘텐츠를 세밀하게 최적화할 수 있어, 서버 측에서 기기를 판별해 가벼운 페이지를 내려 주는 커머스나 뉴스 서비스에서 실무적으로 채택됩니다. 정해진 화면 구간마다 최적화된 레이아웃을 제공해 완성도를 높이는 접근이다.

논문에서는 이렇게 쓰입니다

"적응형디자인 방식에 따라 모바일, 태블릿, 데스크톱 각각에 대해 별도로 최적화된 세 가지 레이아웃이 제공되었다."

고정된 화면 구간별로 별도 설계된 레이아웃을 제공한 적응형 접근 사례를 설명한다.

"적응형디자인을 도입한 이후 모바일 이용자의 이탈률이 데스크톱 전용 레이아웃 대비 유의하게 감소하였다."

화면 크기별로 별도 레이아웃을 제공하는 적응형 접근이 실제 이용 행태 개선으로 이어질 수 있음을 보여주는 검증 사례이다.

조금 더 깊게 보면

반응형 디자인은 유동 그리드로 어떤 폭에서도 연속적으로 변하는 반면, 적응형은 정해진 중단점 사이에서는 고정 레이아웃이라는 점이 핵심 차이입니다. 미리 정하지 않은 폭의 기기가 등장하면 어색해지는 것이 약점이고, 레이아웃을 여러 개 유지해야 하므로 관리 비용도 큽니다. 실제 현장에서는 두 방식을 섞어 쓰는 경우가 많아 명확히 이분하기 어렵다는 점도 유념해야 합니다. 적응형 디자인은 미리 정의된 몇 가지 화면 폭 구간마다 별도의 레이아웃을 준비해 전환하는 방식으로, 유동적으로 늘고 줄어드는 반응형 디자인보다 각 구간에서의 완성도를 더 세밀하게 조정할 수 있다. 다만 구간 사이 화면 크기에서는 최적화가 되지 않아 어색해 보일 수 있다는 약점도 함께 지닌다.

주의할 점

적응형디자인은 정의되지 않은 중간 크기의 화면에서는 최적화되지 않은 레이아웃이 표시될 수 있다는 한계가 있다. 미리 정의한 구간 수가 적으면 특정 화면 크기에서 레이아웃이 어색해 보일 수 있다. 미리 정의된 구간 사이의 화면 크기에서는 레이아웃이 최적화되지 않아 어색해 보일 수 있다.

관련 용어