brunch

You can make anything
by writing

C.S.Lewis

by 감각 Feb 19. 2021

반응형 홈페이지

반응형 홈페이지가 무엇인지 알아보자.

홈페이지 제작을 하려고 의뢰주시는 분들 중 반응형 홈페이지가 어떤 것인지 헷갈려 하시는 분들이 꽤 많다. 반응형 홈페이지는 단순히 모바일에서도 홈페이지가 나오는 것이 아닌 말그대로 반응을 해야 반응형 홈페이지이다. 모바일도 함께 홈페이지가 나오고 싶은 경우에는 PC버전 홈페이지와 모바일 버전 홈페이지를 각각 따로 제작해도 문제가 없다. 그렇다면 PC, 모바일 버전 홈페이지와 반응형 홈페이지가 어떻게 다른지 함께 살펴보자.



반응형 홈페이지

반응형 홈페이지는 한 개의 홈페이지가 다양한 비율을 가진 디바이스에서 화면이 재조정되는 홈페이지를 뜻한다. 어떤 느낌인건지 이미지로 확인해보자.


우선, 아래 이 홈페이지의 경우 반응형 홈페이지로 되어있다.



얼핏보면 다른 점을 찾을 수 없겠지만 위 이미지는 PC버전으로 보았을 때 이다.

다시 한 번 반응형 홈페이지의 정의를 생각해보자. 반응형 홈페이지는 다양한 화면 비율에 맞게 화면이 재조정된다고 했다. 그렇다면 같은 홈페이지를 다른 화면으로 보면 어떻게 될까?





위 이미지처럼 같은 홈페이지이지만 화면 크기에 따라 화면의 컨텐츠 구성들의 배치가 조금씩 변경되는 것을 알 수 있다. 중요한 것은 한 개의 홈페이지가 이렇게 화면이 변해야 반응형 홈페이지인 것이다. 그렇다면 PC, 모바일 버전 홈페이지를 제작하면 어떻게 될까? 아래 이미지는 PC버전 홈페이지이다.



PC의 화면 비율에 맞게 작업이 되었기 때문에 PC버전으로 보았을 땐 정상적이지만, 창을 줄이게 된다면



아래와 같이 화면이 잘려 스크롤이 생기게 된다. 반응형 홈페이지에서 보여준 예시 홈페이지의 경우 창 크기를 줄여도 전혀 스크롤이 생기지 않는다. 그렇다면 모바일 버전 홈페이지는 어떻게 될까?





위 이미지는 모바일 버전 홈페이지를 PC로 확인했을 때 화면이다. 아까 반응형 홈페이지처럼 화면이 커지거나 작아진다고 그에 맞게 반응하는 것이 아닌 이렇게 고정되어 있다. 따라서 태블릿으로 봤을 때도 화면이 알맞게 되는 것이 아니라 그냥 저 상태 그대로 표시가 된다. 짤리던, 여백이 생기던..







그렇다면 어떤 홈페이지가 더 좋은 홈페이지라고 할 수 있을까? 


사실 이 질문에 답은 없다. 반응형 홈페이지는 물론 다양한 디바이스에서 굴욕적이기 않게 화면이 표시되는 장점이 있지만  PC, 모바일 버전 홈페이지를 제작하는 것보다 비용이 더 많이 발생할 수 밖에 없다. 반응형 홈페이지는 PC, 태블릿, 모바일의 3단계 작업을 거쳐야 하기 때문인대 디자인, 코딩도 3번 해야하기 때문에 기간도 오래걸리고 비용도 더 많이 든다. 그래서 보통은 기업에서 많이 제작하긴 하지만 특별히 추천해드리지 않는다. 사시 일반 방문자는 이 홈페이지가 반응형인지 그냥 일반 홈페이지인지는 거의 모르기 때문이다. PC, 모바일 버전 홈페이지만 제작해도 모바일에서 홈페이지 확인이 가능하기 때문이다. 모든 상황에 맞는 제작방법이 있으니 잘 알아보고 제작하는 것이 가장 좋은 방법이다.








작가의 이전글 도메인과 호스팅
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari