적응형과 반응형 (1) 목표와 방법, 무슨 관계인가

디자이너: “이번 개편은 반응형으로 갈까요, 적응형으로 갈까요?”

개발자: “브레이크포인트 몇 개로 할지만 정해주시면 돼요.”

30초 만에 끝나는 대화지만 정해진 건 하나도 없다. 브레이크포인트 개수는 둘 중 무엇을 고르든 나오는 숫자다. 적응형으로 가도 폭이 갈리는 지점은 있고, 반응형으로 가도 구조를 갈아엎는 지점은 남는다. 브레이크포인트 개수만 합의하고 헤어지면 정작 무엇이 갈리는지는 손도 안 댄 채 다음 주에 시안을 그리기 시작한다.

디자이너가 두 낱말을 두고 아는 건 대개 여기까지다. 반응형은 화면이 줄면 레이아웃이 알아서 바뀌는 것, 적응형은 기기별로 따로 만드는 것. 그런데 이 둘은 애초에 나란히 놓고 고를 수 있는 이름이 아니다. 같은 회의에서 반응형과 적응형을 주고받은 두 사람이 서로 다른 것을 정하고 헤어지는 이유가 여기 있다.

적응이 목표고, 반응형은 그 목표를 브라우저에서 이루는 방법이고, 적응형은 그 뒤에 그 목표의 이름에 붙은 서로 다른 세 가지다. 두 이름이 어디서 나왔는지, 적응형이 지금 무엇을 가리키는지를 차례로 보고, 그래서 회의에서 무엇을 물어야 하는지로 닫는다.

적응이라는 말을 처음 쓴 글이 가리킨 것은 지금의 반응형이다

두 이름은 십 년 간격을 두고 나왔고, 뒤에 온 이름이 앞선 이름이 하려던 일을 가져갔다. 십 년 사이를 A List Apart에 실린 글 두 편이 잇는다.

먼저 2000년이다. John Allsopp이 A List Apart에 쓴 글에는 적응할 수 있다는 것이 곧 접근성이라는 제목의 섹션이 있고, 그 아래에 지금까지 한 말을 한 줄로 줄이면 적응하는 페이지를 만들라는 것이라고 적혀 있다. 그 적응이 무엇인지도 같은 글이 못 박는다. 비율이나 그 밖의 상대값으로 레이아웃을 잡으면 그것만으로 적응하는 페이지가 된다는 것이다. 그리고 픽셀이나 포인트 같은 절대 단위는 피하라고 적는다.John Allsopp, A Dao of Web Design, A List Apart, 2000-04-07. 섹션 제목은 Adaptability is accessibility이고, 그 아래 문장은 Everything I’ve said so far could be summarized as: make pages which are adaptable이다. Layouts 섹션에 Using percentages (or other relative values) to specify page layout in CSS automatically creates adaptive pages가 있고, The Way 섹션에 Absolute units, like pixels and points are to be avoided가 있다. 화면 크기별로 고정폭 버전을 여러 벌 만들라는 대목은 이 글에 없다. 2026년 7월에 원문을 열어 네 대목과 각각이 어느 섹션에 있는지까지 확인했다.

한 번 멈춰야 한다. 적응이라는 말이 웹 디자인에서 처음 가리킨 것이 지금 우리가 반응형이라 부르는 바로 그것이다. 비율로 짜서 화면을 따라 흐르는 레이아웃 말이다. 그리고 지금 업계가 적응형이라 부르는 고정폭 여러 벌은, 같은 글이 피하라고 한 절대 단위 쪽에 서 있다.

십 년 뒤인 2010년, Ethan Marcotte는 Allsopp의 글에서 뽑은 문장을 글머리에 얹고 시작한다. 그리고 목표를 이루는 재료 세 가지를 묶어 이름을 붙였다. 유동 그리드, 유연한 이미지, 미디어 쿼리다.Ethan Marcotte, Responsive Web Design, A List Apart, 2010-05-25. 원문은 Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design이다. 글머리에 얹힌 인용은 Allsopp의 A Dao of Web Design에서 온 것으로, We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility가 그 일부다. 미디어 쿼리는 그 셋 중 하나뿐이고 나머지 두 가지가 값을 미리 확정하지 않는 쪽을 맡는다. 브레이크포인트 개수로 반응형을 정의할 수 없는 근거가 여기 있다.

같은 글에서 Marcotte는 자기 방식을 매체에 더 적응적이라고 설명한다. 맞서는 이름으로 쓴 게 아니라 자기가 이루려는 목표를 가리키는 형용사로 썼다.같은 글. 원문은 We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them이다.

그래서 관계를 한 문장으로 적으면 이렇다. 적응은 하려는 일이고, 반응형은 적응을 브라우저에서 해내는 방법이다. 하려는 일과 그 방법을 같은 줄에 놓고 하나를 고르라는 물음은, 빠르게 갈까요 자동차로 갈까요와 같은 물음이다.

적응이라는 이름이 가리키던 것은 반응형이 가져갔다. 그러고 나서 적응형이라는 이름에 서로 다른 세 가지가 붙었다.

적응형이라는 이름 하나가 서로 다른 셋을 가리킨다

지금 적응형이라 불리는 것은 세 가지고, 세 가지 다 반응형과 맞선 자리에 있지 않다. 하나는 이름을 갈라놓은 쪽조차 반응형의 한 종류로 정의한 것이고, 하나는 레이아웃이 아니라 아예 다른 얘기고, 하나는 1차 출처가 없다.

첫 줄부터 본다. 주소는 하나인데 서버가 접속한 기기를 보고 다른 HTML을 내려보내는 구성이다. 두 이름을 갈라놓은 쪽인 NN/g조차 이걸 반응형 디자인의 한 판이라고 정의한다. 반대편에 세운 게 아니라 자기 안에 넣은 것이다.Raluca Budiu, Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site?, NN/g, 2016-02-14. 정의는 Adaptive design is a version of responsive design in which the server detects the capabilities of a client device and only sends content and features that can be appropriately displayed on that device이다. 앞부분의 a version of responsive design이 이 판정의 근거다. Google은 같은 구성을 dynamic serving이라 부르고, 그 문서가 웹사이트 구성으로 드는 이름 셋에 적응형은 없다.Google Search Central, Mobile site and mobile-first indexing best practices. 구성 이름 셋은 Responsive design, Dynamic serving, Separate URLs다. dynamic serving은 Uses the same URL regardless of device. This configuration relies on user-agent sniffing and the Vary: user-agent HTTP response header to serve a different version of the HTML to different devices로 적혀 있다. 이 문서는 어느 구성에도 adaptive라는 이름을 붙이지 않는다. 그러니 적응형이 서버 판별을 뜻한다는 말은 업계 한 곳이 붙인 이름이지 표준 이름이 아니다. 이 뜻으로 말한 사람과 합의하면 정해지는 것은 백엔드 구성이다. 서버가 무엇을 보고 무엇을 갈아 끼우는지가 다음 주 일감이 된다.

둘째 줄은 Aaron Gustafson이 쓴 책 제목의 적응형이다. 이건 레이아웃을 짜는 방식이 아니라 단계적 향상(progressive enhancement)을 가리킨다. 기술 사정과 상관없이 내용에 닿게 해주자는 태도에 가깝고, 폭이나 브레이크포인트 얘기가 아니다.Aaron Gustafson, Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement, 1판(2011)의 1장 무료 공개본. 정의는 a philosophy aimed at crafting experiences that serve your users by giving them access to content without technological restrictions이고, 1장 안에 고정폭이나 브레이크포인트를 다루는 대목은 없었다. 내가 확인한 범위는 1장까지다. 반응형과 맞서는 자리가 아니라 축이 아예 다르다. 이 뜻으로 말한 사람과 합의하면 정해지는 것은 지원 범위다. 어느 브라우저에서 무엇까지 되고 무엇이 빠져도 되는지가 그 자리에서 정해진다.

셋째 줄이 회의에서 제일 자주 쓰이는 뜻이다. 폭을 몇 개 정해 그 수만큼 시안을 그리고, 각 시안 안의 값은 사람이 그 자리에서 확정한다. 그런데 이 뜻의 1차 출처를 나는 찾지 못했다. 폭 여섯 개를 늘어놓은 목록이 널리 돌지만 그 목록을 처음 쓴 글을 못 찾았으니, 누구의 정의라고 적을 수가 없다. 앞에서 본 것과 이어 붙일 것은 하나 있다. 적응이라는 말을 처음 쓴 글이 피하라고 한 절대 단위가 지금 그 말을 달고 돌아왔다는 것이다. 이 뜻으로 말한 사람과 합의하면 정해지는 것은 다음 주에 그릴 시안 장수다.

세 가지 다 마찬가지다. 회의에서 붙잡을 것은 이름이 아니다. 적응형이라는 말이 나오면 물어볼 것은 하나다. 화면이 어디서 갈리나요, 하고 물으면 된다. 서버에서라고 답하면 첫째, 브라우저에서라고 답하면 둘째, 우리 시안에서라고 답하면 셋째다.

적응이 처음 무슨 뜻이었든 지금 쓰임은 굳었다는 반론

여기까지 읽고도 반대할 수 있고, 그 반대는 약하지 않다. 낱말 뜻은 처음 쓰인 뜻이 아니라 지금 쓰임이 정한다는 것이다. 2000년에 adaptive가 무슨 뜻이었는지는 사전 얘기지 오늘 견적서와 일정표에 적히는 뜻이 아니다. 지금 이 두 낱말은 서로 다른 작업 방식을 가리키는 이름으로 이미 굳었고, 현장에서는 실제로 둘 중 하나를 골라 계약하고 일정을 짠다. 스무 해 전 글을 들고 와서 원래는 그런 뜻이 아니었다고 하는 건 실무가 아니라 고증이다.

맞다. 낱말 뜻은 쓰임이 정한다. 스무 해 전 용례를 들고 상대가 틀렸다고 하는 건 회의에서 안 통하고, 통해서도 안 된다. 두 낱말이 지금 서로 다른 작업 방식을 가리키며 쓰이는 것도 사실이다.

그래도 이 반론이 못 덮는 데가 네 군데 있다. 첫째, 쓰임이 정한다는 말이 성립하려면 쓰임이 하나여야 한다. 그런데 지금 쓰임은 세 가지고, 그 셋이 서로 다른 자리에서 값을 정한다. 한 낱말이 세 가지로 쓰이면 굳은 게 아니라 아직 안 굳은 것이다.

둘째, 세 가지를 하나씩 놓고 봐도 둘 중 하나 고르기가 안 나온다. 첫째 뜻은 두 이름을 갈라놓은 쪽의 정의조차 반응형의 한 판으로 두고, 둘째 뜻은 레이아웃이 아니라 축이 다르다. 셋째 뜻만 반응형의 재료와 어긋나는데, 그것도 폭을 미리 정해 둔 값 하나 단위에서 어긋나는 것이다. 이건 처음 쓰인 뜻 얘기가 아니라 지금 쓰이는 정의의 얘기다.

셋째, 그래서 회의에 넘기는 것은 낱말 강의가 아니라 질문 하나다. 화면이 어디서 갈리나요. 30초 걸리고 두 낱말을 한 번도 안 쓴다.

넷째, 이 반론이 맞는 경우를 하나 인정하고 간다. 팀이 자체 용어집을 갖고 있고 그 안에서 뜻이 하나로 합의돼 있으면, 그 팀 안에서는 그 이름으로 골라도 된다. 다만 넘기는 사람과 받는 사람이 다른 팀이면 그 합의가 문 밖에서 안 통한다.

정리: 적응이라는 목표가 반응형이라는 방법을 담고 있다

적응은 하려는 일의 이름이고, 반응형은 그 일을 해내는 방법의 이름이다. 적응이 반응형을 담고 있지 둘이 마주 서 있지 않고, 적응형은 두 이름과 나란히 놓이는 세 번째 선택지가 아니라 앞 이름에 뒤늦게 붙은 서로 다른 세 가지다. 그 셋은 하나가 반응형의 한 종류로 정의돼 있었고, 하나는 레이아웃 얘기가 아니었으며, 하나는 근거를 찾지 못했다. 셋을 가르는 기준은 화면이 어디서 갈리느냐 하나였다.

다음 회의에서 반응형이냐 적응형이냐를 묻지 말고 화면이 어디서 갈리는지를 물어라. 서버에서라는 답과 우리 시안에서라는 답은 다음 주에 할 일이 아예 다르다.