반응형 웹을 도입한 이유

Som·2023년 5월 24일

프로젝트 회고 -반응형 도입기-

목록 보기

1/2

3차 프로젝트를 시작할 당시 팀원들은 한번도 반응형 웹 페이지를 만들어 본 적이 없었다. 그래서 팀원들 모두 반응형 웹 디자인을 도입하길 원했고, 프론트 팀장으로써 디자인과 개발과정에 반응형을 적극적으로 반영하기로 했다.
요즘 웹사이트는 대부분 반응형을 도입하고 있지만, 특히 우리 프로젝트의 목적은 "누구나 쉽게 온라인에서 명화 감상하기" 였기 때문에 모바일로도 명화를 감상할 수 있어야 했다.
그래서 반응형 웹에 대해 찾아보는중, 반응형 웹과 비슷한 개념이 존재한다는 것을 알게 되었다.

반응형 웹(Responsive Web)은 감지된 화면의 크기에 따라서 자동으로 페이지가 재배열되는 유동적인 접근 방식이다.
하나의 템플릿으로 만들어지며, 미디어쿼리(Media Queries)를 통해 화면 크기에 따라 레이아웃을 변경한다.

반응형과 비슷한 개념으로, 적응형 웹(Adaptive Web)이 존재한다.
적응형 웹은 서버 또는 브라우저에서 기기를 감지한 후, 각 기기에 적합한 템플릿을 각각 제공한다.
모바일용, 데스크탑 등 디바이스별로 독립적인 템플릿을 만들고, 각 디바이스에 맞는 페이지를 별도로 제작하는 방식이다. 대표적인 예시로는 네이버가 있다. pc로 접속 시 주소가 naver.com이지만, 모바일로 접속할때는 m.naver.com 이 된다.

그래서 반응형 웹과 적응형 웹 중 어떤 것을 선택해야할까? 성능적인 측면에서는 적응형 웹이 우위인 것 같았다.
반응형 웹은 기기와 관계없이 모든 콘텐츠를 다운받아 일부 콘텐츠만 사용하게 되지만, 적응형 웹은 감지된 기기에 맞는 콘텐츠만 다운받아 사용하게 된다.
따라서 적응형 웹의 로드 속도가 더 빠르다.
또한 반응형 웹은 하나의 템플릿으로 만들어지기 때문에 기존에 존재하던 사이트를 재구축해야한다는 단점이 있다. 반면, 적응형 웹은 다른 기기용 템플릿을 또 만들면 된다.

위의 비교글만 보면 적응형 웹이 더 좋아보인다. 그럼에도 불구하고 반응형을 선택한 이유는 다음과 같다.
적응형 웹이 가져다주는 성능의 이점을 제대로 누릴 만큼 프로젝트의 규모가 크지 않다. 적응형 웹은 결국 여러 디바이스에 적절한 템플릿을 각각 개발해야하면서 템플릿간 일관성도 신경써야하는데, 이러한 작업이 프로젝트의 규모에 비해서 효율적이지 않다는 결론을 내렸다. ~~내 선택이.. 맞겠지?~~

반응형 웹을 제작하기로 했다면, 한가지 고려해야할 사항이 있다.
데스크탑을 기준으로 제작할 것인지, 아니면 모바일을 기준으로 제작할 것인지 생각해야한다.
데스크탑을 우선으로 디자인한다면 큰 화면을 기준으로 작은 화면으로 옮겨가는 디자인일 것이다. 그래서 Breakpoint를 max-width로 설정한다.
```
@media (max-width: 768px) {
  font-size: 20px;
}
```
모바일을 우선으로 디자인하면 작은 화면을 기준으로 큰 화면으로 조절되므로 min-width를 사용하면 된다.
```
@media (min-width: 768px) {
 font-size: 20px;
}
```
이전에는 데스크탑 우선이 보편적이었지만 요즘은 모바일 우선으로 개발하는 경우도 많다고 한다. 하지만, 우리 프로젝트는 "명화 감상"이 목적이므로, 작은 모바일 기기를 우선으로 개발하기에는 적합하지 않다고 생각했다.

그래서 명화를 큰 화면으로 잘 보여줄 수 있는 데스크탑 우선으로 개발하기로 결정했다!

반응형 웹을 적용하면서 나는 생각지도 못한 문제와 마주쳤다. hover와 관련된 문제인데, 어떤 문제가 있었고 어떻게 해결했는지 추후 기술할 것이다.

참고

https://javannspring.tistory.com/211

궁금한건 못참아