width=100%를 적용하면 전체 화면을 채우는거라고 생각하게 되었습니다. 그런데, 이게 반응형이냐?

짧은 답변: 네.

긴 답변:

애초에 "반응형"이란 무엇이냐부터 다루는 편이 좋을 것 같습니다. 반응형이라는 용어는 적응형이 아닌 것을 설명하기 위해 도입된 용어에 가까운데, 왜냐면, 태초의 모바일 웹은 항상 이런 URL 형태였기 때문입니다.

m.naver.com
m.daum.net
m.facebook.com

왜 이런 URL이었을까요? 왜 항상 원래의 PC버전 사이트 주소 앞에 m.이 붙었던 것일까요? 이게 멋있어서? 물론 그런 이유도 있었을지 모르지만 궁극적으로는 원래의 PC버전 웹사이트를 모바일에 그대로 보여주면 모든 게 너무 작게 보여서 안되겠다 보니 모바일이라는 환경에 적응한 웹사이트와 스타일시트를 따로 구성할 필요가 생겼던 겁니다. 메뉴 위치, 사이트 구조, 심지어 웹페이지 로딩 속도와 이미지 품질까지 하나하나 다 다른, 모바일에 완전히 적응한 별도의 사이트 말이죠.

여기서는, 이 과정에서 '모바일은 화면 너비가 작으니까, 사진을 보여줄 때는 웬만하면 width: 100%; 줘서 전체 너비를 사용하는 사진이 되도록 한다'가 모범 사례로 정착했다는 사실 정도만 기억하고 넘어가겠습니다.

아무튼 그랬는데 어느 날인가 사람들이 미디어쿼리라는 것이 적용 가능하다는 사실을 발견해냅니다. 어? 화면 너비가 max-width: 768px을 만족할 때는 글자 크기를 더 키울 수가 있네?? 그럼 글자 크기 말고도 다른 것도 얼마든지 다 맘대로 바꿀 수 있는 거 아냐??? 아니지 잠깐만 기다려봐 그러면 애초에 PC버전 사이트 하나 모바일버전 사이트 하나 별도로 만들면서 유지비를 두 배로 낼 필요가 없잖아? 그냥 화면 너비가 크냐 작으냐에 따라 잘 반응하는 웹사이트와 CSS를 하나만 개발하고 그거만 신경 쓰면 되는 거 아니야??

이 발견 이후로 웹사이트를 딱히 어떤 기기 환경에 적응시킬 필요 없이 그냥 일단 로딩부터 다 한 다음 자기가 로딩된 환경에 반응을 하는 웹사이트를 만들자는 패러다임이 정립됐는데 그걸 오늘날 반응형 웹 디자인이라고 부르게 되었습니다. 이를테면 이런 사이트들이 반응형이지요. 접속하신 다음, 새로고침 없이, 브라우저 창 크기만 바꿔 보세요.

https://developer.mozilla.org/ko/docs/Learn/CSS (모질라재단 개발자용 문서 사이트)
https://yuptogun.com (음... 제 개인홈페이지입니다. 막상 예시가 잘 안떠오르네요)

그리고 반응형 웹은 적응형 웹보다 더 까다롭고 뭔가 좀더 복잡한 관계로 좀더 복잡한 모범 사례와 관행들이 제시되어 왔습니다. 이를테면 사진을 보여줄 때 width: 100%를 잡는 건 모바일일 때나 적절한 것이고 PC 브라우저에서마저 그렇게 반응했다간 오히려 더 이상해지니까, 넓은 화면일 경우에는 max-width: 640px; 같은 제약을 굳이 추가로 걸어 줘야 전체적으로 자연스러워 보인다는 사실이, 나중에 새삼스럽게 밝혀지게 된 식입니다. 이밖에도 질문자님이 장차 궁금해하실 만한 엄청나게 많은 주제들이 이미 엄청나게 많이 다뤄진 바 있습니다.

자 이제 기술적인 얘기를 하면서 정리해 볼까요.

• 사진을 넣을 때 너비를 100% 잡아주는 것은 왜 그럴까요? 그게 반응형이라서 그런 거냐고요? 정확히 말해서는, 반응형 웹 디자인을 할 때 모바일 환경에 대한 사진 크기 처리의 가장 일반적인 관행이 너비 100%이기 때문에 그렇습니다. (모든 너비 100% 이미지가 무조건 반응형인 것은 아니며, 이미지 너비 100%를 주기만 하면 무조건 반응형 웹 디자인이 되는 것도 아닙니다. 상사님께서는 아마 이 부분을 꼽주고 싶으셨던 모양입니다.)
• 너비 100%를 적용하면 화면 전체를 채우게 되나요? 정확히 말해서는, 그 이미지를 직접 감싸고 있는 존재의 너비의 100%를 채우게 됩니다. 그리고 그 '감싸는 존재'(어려운 용어로 컨테이너)의 너비가 결과적으로 화면 전체 너비일 경우, 그 이미지는 결과적으로 화면 가로 전체를 채우는 겁니다.
• 그럼 도대체 뭘 어떻게 해야 '반응형 웹'이 되는 걸까요? 이 주제를 가지고는 능히 논문도 쓸 수 있겠지만 여기서는 간단하게만 이해합시다. 새로고침 없이 여러 환경에서 각각 최적화된 웹 경험을 할 수 있으면 그게 반응형 웹입니다. 너비 100%라는 스타일 설정은 그 원대한 목표를 향한 긴 여정의 한 걸음인 거고요.

여기까지가 제가 이해한 것이며 틀린 정보가 있을 수 있으니 여기서부터는 직접 체험하면서 학습하시기를 강력히 권고합니다. 아무튼 어느 정도는 도움이 됐기를 바랍니다.