"반응형 홈페이지가 대체 뭐지?"

사실 개발자가 아니라면 반응형 홈페이지라는 말은 평소에 접하기 힘든 말이죠.

하지만 홈페이지 제작 홍보글을 보다보면 빠지지않고 등장하는 단어가 바로 반응형 디자인인데요

한국에서 인터넷을 사용하는 인구 10명 중 7명이 모바일을 통해 웹서핑이나 쇼핑을 한다고 하니 (관련기사)

내 홈페이지를 방문하는 고객을 위해서라고 반응형으로 제작하는게 유리한데요.

그렇다면 왜 반응형으로 제작해야하는지 이유를 알아야겠죠?

이번 포스팅에서 반응형 디자인이 무엇인지 장점과 단점을 상세하게 알려드리겠습니다.

반응형 홈페이지란?

사용자가 보는 화면크기에 맞춰 작은화면에서는 작은화면에 맞는 디자인을

큰 화면에서는 큰 화면에 맞는 디자인을 보여주도록 제작된 홈페이지를 반응형 홈페이지라고 합니다.

화면이 매우 작은 아이폰 SE 부터 27인치가 넘는 모니터까지 홈페이지를 방문하는 사용자 화면의 크기는 다양할 수 있는데요.

홈페이지를 들어갔을때 디바이스별로 화면이 깨지지않고 잘 나온다면 해당 홈페이지는 반응형으로 제작된 홈페이지 입니다.

한번 클래시웹 홈페이지를 예시로 들어보겠습니다.

클래시웹 홈페이지는 모바일, 테블릿, 데스크탑 각각의 화면 크기에 맞게 모든 페이지가 디자인되었는데요.

사진과 같이 각 화면에 크기에 대응되도록 디자인을 설계하고 홈페이지를 제작합니다.

따라서 사용자가 어떤 디바이스로 홈페이지를 방문하던, 불편함을 느끼지 않고 홈페이지에 머물게 할 수 있습니다.

반응형 홈페이지는 어떤식으로 제작될까?

반응형 홈페이지를 디자인할때는 모바일, 테블릿, 데스크탑 화면을 기준으로 나누고 각각 따로 디자인한 후 재조합하는데요.

홈페이지를 방문하는 사람들의 대부분 모바일, 데스크탑 기기를 사용하기 때문에 2가지를 기준으로 두기도 합니다.

즉 쉽게 풀어서 설명하면

✅ 데스트탑에서는 데스크탑 크기에 맞는 디자인을 따로 제작

✅ 모바일 화면에서 보여줄 디자인을 따로 제작 (필요시 테블릿까지)

각각의 디자인을 취합하여 최종적인 디자인을 완성하게 됩니다. (개발적 의미와 조금 다를수 있습니다)

어떤식으로 제작하는지 사실 홈페이지 제작을 맡기는 의뢰자 입장에서 알 필요가 없는데요.

다만 이 부분을 이해하셨다면 제작 단가를 이해하시는데 많은 도움이 되실겁니다.

홈페이지를 반응형으로 제작해야하는 결정적인 이유

1. 유저경험(UX)이 크게 향상된다

홈페이지 안에서 스크롤, 클릭, 페이지 전환과 같은 모든 액션들을 전문적인 용어로 유저경험(UX)이라고 부르는데요.

홈페이지 내에서 유저에게 불편함을 주지않는다면 그만큼 방문한 고객이 더 오래 머물게됩니다.

즉 체류시간이 길어지게 되죠.

반대로 화면에 비해 글씨가 너무 작거나 (혹은 너무크거나), 이미지가 깨져보이는 등 좋지 못한 경험을 지속적으로 시킨다면

유저는 빠르게 홈페이지를 빠져나갈겁니다.

2. 구글 SEO에 유리하다.

홈페이지를 이용하는 고객은 다양할 수 있습니다. 젋은 사람들이 방문할 수도 있고, 반대로 나이가 많으신 분들도 방문할 수 있죠.

혹은 몸이 조금 불편한 사람들도 이용할 수 있습니다.

이런 부분들을 고려해서 모든사람들이 편하게 이용할 수 있도록 제작해야하는데요.

이를 잘 지켰을 때 웹 접근성을 잘 지킨 홉페이지라고 부릅니다.

구글에서는 이런걸 측정할 수 있도록 내부적으로 Lighthouse를 제공해주고 있습니다.

반응형으로 제작되지 않은 홈페이지를 Lighthouse에서 검사해보면 접근성이 크게 떨어지는걸 확인할 수 있습니다.

접근성이 떨어진다는 건 구글이 내부적으로 모바일에선 사용자들이 이용하기 불편하구나라고 인식하게 되고

SEO 불이익이 있을 수 있습니다.

또한 체류시간도 낮게 나오게되니 이 또한 영향이 가게 됩니다.

단점은 어떤게 있을까?

화면 하나를 만드는게 아닌 2개, 많게는 3개까지 고려해서 제작하기 때문에 홈페이지 제작 시간이 늘어나게 됩니다.

또한 하나의 화면만 개발하는 것에 비해 반응형 홈페이지 제작은 비용적인 측면에서 큰 메리트를 느끼지 못할 수 있습니다.

그럼에도 불구하고 홈페이지를 제작할때는 반응형으로 디자인하는 것을 추천드립니다

많은 사람들이 모바일 기기를 통해 인터넷을 사용하고 있고,

내 홈페이지를 소개할 때 "이건 데스크탑으로 봐야해" 라는 말을 생략할 수 있으니까요.