HTML - 반응형 웹사이트

오늘날 우리는 PC를 넘어서 스마트폰, 태블릿 등 다양한 디스플레이를 통해서 웹사이트를 접속한다. 반응형 웹이란 이러한 시대적 변화에 따라 접속하는 디스플레이 종류에 맞는 화면과 구성요소의 크기 및 위치가 조정되는 사이트를 말한다. 내가 어떤 모바일 기기로 접속하든 간에 모든 콘텐츠들을 보기 쉽게 최적화해서 보여준다니 이 얼마나 친절한가! 그렇다면 이제 어떤 사이트를 반응형 웹사이트라고 할 수 있는지 예시들로 확인해보도록 하자. 

 

Reference #1. CJ 문화재단 (https://www.cjazit.org/)

 

 

 

 

 

상단 차례대로 아이폰 12 mini, 아이패드, 노트북 (LG 그램)에서 접속한 CJ 문화재단 홈페이지 화면이다. 뭐가 다른가 하고 보니, 휴대폰과 아이패드로 접속했을 때엔 오른쪽 상단에 메뉴 버튼(*햄버거 버튼)이 있고 PC로 접속했을 땐 저 버튼이 없다. 비교적 작은 모바일 기기 화면 안에서는 손가락으로 클릭할 수 있는 영역이 크지 않기 때문에 메뉴들을 메뉴 버튼 안에 모두 숨겨놓은 것이고, 반대로 PC 화면은 상대적으로 큰 화면에서 손가락이 아닌 마우스로 이동 및 클릭이 자유롭기 때문에 메뉴를 숨겨놓을 필요가 없이 모두 보여주는 것이다. 내가 접속한 기기에 따라서 지정된 해상도 분기점(*Break Point)에 맞춰 메뉴 버튼이 보였다가 안보였다가 하는 것을 확인할 수 있다. 

 

*햄버거 버튼: 햄버거 버튼이란 이름 그대로 수평 막대 모양 아이콘 3개가 햄버거와 비슷하다고 하여 이름 붙여졌다. 보통 메뉴나 옵션을 보여주고자 할 때 사용된다,

 

*Break Point: 브레이크 포인트는 반응형 웹에서 사이즈가 변화하는 지점을 말한다. Mobile에서 태블릿 사이즈로 넘어가는 분기점, 태블릿 사이즈에서 PC 사이즈로 넘어가는 분기점을 의미한다. 이렇게 미리 지정한 해상도 분기점을 기준으로 사용자가 접속한 기기 해상도에 맞는 화면을 보여주는 것이다.

 

 

 

Reference #2. Ted (https://www.ted.com/)

 

 

 

 

또 다른 예시로 TED사이트를 살펴보면 CJ 문화재단과 동일하게 휴대폰과 아이패드로 접속했을 때엔 좌측 상단에 메뉴 버튼이 있고, PC로 접속했을 때는 버튼 없이 메뉴명이 펼쳐져 보이는 것을 확인할 수 있다. 또 TED로고 이미지도 모바일 기기에서는 상단 정중앙에 위치하는 반면, PC 해상도에서는 좌측으로 로고를 이동시키고 우측에 메뉴와 로그인, 검색 기능을 위치시키고 있다. 같은 URL로 접속했지만 화면이 큰 PC에서는 가로로 넉넉하고 길게, 작은 모바일일수록 아래쪽으로 길게 콘텐츠를 늘어뜨림으로써 결국엔 동일한 콘텐츠를 경험할 수 있게 된다. 반응형 웹이 어떤 것인지 그 개념을 조금 파악했다면, 이제 반응형 웹으로 제작된 사이트를 다양한 해상도로 확인해볼 수 있는 방법에 대해 살펴보고 장점과 그 한계에 대해 살펴보자!

 

How?

반응형 웹으로 제작을 하고는 있는데 또는 확인해보고 싶은 사이트는 있는데, 테스트는 어떻게 해야 하는지 막막할 수 있다. 보통 이럴 땐 크롬 브라우저를 이용한다. 내가 확인하고 싶은 사이트 URL에 접속해서 F12 (개발자 도구)를 클릭하면 우측 상단에 휴대폰 모양의 디바이스 툴바 아이콘이 있다. 해당 아이콘을 클릭해서 원하는 해상도를 지정해서 테스트가 가능하다. 하지만 크롬 브라우저의 개발자 도구를 활용해서는 한계가 있고, 여러 디바이스의 화면을 한눈에 볼 수 없다는 단점이 있다.

 

 

Pros and Cons

• 디바이스 기기 호환성

가로 해상도 540px을 넘어서면서 레이아웃이 달라짐을 확인할 수 있다.

 

 

앞서 말했듯이 반응형 웹은 PC, 스마트폰, 태블릿 등 모든 사이즈에 대응하기 때문에 갤럭시, 아이폰, 아이패드 등 모바일 기기의 다양한 사이즈에 맞는 화면을 보여줄 수 있다. 다른 한편으로는 가까운 미래에 또는 사이트 제작을 위해 개발을 하던 와중에 새로운 휴대폰이 출시되었다고 가정해보자. 엄청난 혁신적인 해상도 변화가 있지 않는 한! 어느 정도 해상도의 대한 대응이 가능하다. 모든 OS의 특정 기기 사이즈마다의 개별 화면을 만들 수는 없기 때문에 보통 반응형 웹을 제작할 때에는 작업에 앞서 고려해야 할 해상도를 먼저 지정한다. 해상도 별 분기점 즉, Break Point를 정하는 것이다. 

 

 

삼성전자 웹사이트를 살펴보면 가로 540px 화면 (좌측 이미지)에서 541px로 넘어가면서 레이아웃이 바뀌는 것을 볼 수 있다. 540px를 브레이크 포인트로 잡아서 해당 해상도를 기점으로 레이아웃의 변화를 주게끔 설정해두었기 때문이다. 앞서 언급한 크롬 브라우저 개발자 도구를 통해서 반응형 웹으로 제작된 홈페이지의 브레이크 포인트를 확인해볼 수 있는 점을 참고하자. 몇몇 대형 사이트를 방문해보면 주로 어느 정도의 px에서 분기 작업이 이루어지는지 파악해볼 수 있다. 어떤 디바이스로 접속해도 적절히 모든 콘텐츠를 제공하면 사용성이 뛰어나게 되며, 사용자가 웹 사이트에서 보내는 시간이 길어지면서 결과적으로 기업이 원하는 행동에 더 가까워질 수 있다. 

 

 

• 도메인 구분 없는 동일한 URL

반응형 웹으로 만들어진 사이트는 같은 url 주소로 접속할 수 있다.

 

모바일 기기에서 크롬 등의 브라우저로 네이버를 접속하면 내가 분명 naver.com (웹 도메인)으로 접속해도 앞에 ‘m’이 자동으로 붙어서 네이버로 연결되는 것을 볼 수 있다. 모바일에 최적화된 전용 웹페이지를 호출하기 위해서 서브 도메인으로 m.naver.com (모바일 도메인)을 설정해두었기 때문이다. 하지만 반응형 웹은 PC/Mobile 모두 동일한 url 주소를 사용하기 때문에 url 도메인 구분이 필요 없다. 삼성전자 홈페이지를 예시로 보면 아이폰에서 크롬으로 접속했을 때와 PC에서 크롬으로 접속했을 때, 동일한 URL로 접속되고 모바일에 최적화된 웹페이지를 호출하는 것을 확인할 수 있다. 기업 입장에서는 모바일용의 별도 도메인을 설정 또는 작업하지 않아도 되고, 단일화된 도메인 주소로 하여금 고객에게 더욱 확실한 아이덴티티를 확립시킬 수 있다는 장점이 있다. 

 

 

• 간편한 유지보수와 모니터링

웹 사이트가 별도의 모바일 웹으로 분리되어 있다면 PC버전과 모바일 버전으로 두 개의 웹 사이트를 만들게 될 것이고, 새로운 내용이나 콘텐츠가 추가되고 수정될 때마다 개별적으로 추가 및 수정하는 작업이 필요하다. 두 사이트 모두 같은 콘텐츠를 담지만, 결국에는 PC용과 모바일용 두 버전으로 제작되어야 하는 것이다. 개발 이후에도 지속적으로 사이트 일부를 수정하고 운영하는 작업을 유지보수 작업이라고 칭하는데, 반응형으로 사이트를 제작하면 유지보수가 비교적 간편해진다. 

---

이쯤 되면 모든 웹사이트를 다 반응형으로 만들면 참 좋겠네요!라는 생각이 들 수 있다. 결론부터 말하자면 모든 분야에 적합한 구현 방식은 아니라고 말할 수 있다. 아래 몇 가지 이유들을 토대로 반응형 웹의 한계를 살펴보자.

 

• 많은 콘텐츠를 보여주기엔 한계가 있다

화면 크기가 사용자 디바이스의 따라 유동적으로 변하기 때문에 많은 내용이 들어가면 디자인 및 구현의 한계가 있다. *카드 UI와 같이 정적인 디자인을 적용할 수밖에 없다. 이런 이유로 모바일/PC 버전을 각각 제작하는 것에 비해 100% 만족스러운 디자인을 제공하기에는 힘들다는 뜻이다.

*카드 UI: 카드 UI란 콘텐츠가 있는 영역을 카드처럼 나열하여 보여주는 화면을 말한다. 이미지로 구성되거나 이미지와 텍스트가 함께 구성될 수 있다. 카드의 크기와 배치를 조정할 수 있기 때문에 반응형 웹을 제작할 때 자주 쓰인다.

 

 

• 로딩 속도가 느려질 수 있다

너무 많은 콘텐츠를 불러오려면 로딩 속도가 길어지기 때문에 성능적인 문제가 발생할 수 있고, 이로 인하여 사용자 이탈률이 증가할 수 있다. 제작하려는 사이트의 콘텐츠 양이 많을 땐 이러한 이슈도 함께 고려할 필요가 있다.

 

 

• 레이아웃 변경이 어렵다

한 번 만들어놓고 새로운 콘텐츠를 넣고 빼는 작업이 결코 쉽지 않다. 기존에 잡아 두었던 레이아웃의 변경이 어렵다는 의미이다. 하나의 해상도를 기준으로 작업하는 것이 아닌, 각 해상도 별 분기점을 기준으로 콘텐츠 위치를 잡아두기 때문에 새로운 것을 추가하는 작업의 공수가 적지 않다. 

반응형 웹은 복잡하지 않고 비교적 적은 콘텐츠를 가질 때 적합합니다.

 

이러한 이유들 때문에 반응형 웹은 주로 정적인 회사 소개 페이지나, 많은 기능이 없는 블로그 커뮤니티 등을 포함할 때 제작하곤 한다. 

*정적 페이지: 이미 서버 (데이터 저장 공간)에 저장된 HTML, CSS, JavaScript 파일을 사용자의 요청에 따라 호출하는 페이지를 말한다. 관리자가 서버에 있는 데이터 내용을 바꾸지 않는 한, 언제 접속해도 늘 똑같은 고정된 웹 페이지를 보게 된다.

 

 

Conclusions

시간이 지나면 지날수록 점점 더 적은 수의 사람들이 PC를 통해 인터넷을 접속하고 있다. 단순히 스마트폰을 넘어서 다양한 모바일 기기가 웹 트래픽의 많은 부분을 차지하고 있기 때문에 반응형 웹의 개념과 작동을 이해하는 것이 중요하다. 사이트를 제작하는 기획자 또는 관련 기술자의 입장에서는 만들고자 하는 페이지가 어떤 특성을 가지는지 먼저 파악하고 결정해야 한다.