서브 이미지

사업소개

반응형웹이란?

위시웹 반응형 홈페이지 제작 안내

서브 메뉴

컨텐츠 영역

컨텐츠 영역

“하나의 홈페이지 모든 기기에!

모든 화면 크기에 반응하여
자동으로 최적화되어 출력되는 웹사이트

반응형웹(Responsive Web)이란 PC 모니터, 노트북, 태블릿, 모바일(스마트폰) 등 어떠한 새로운 기기에도 화면 크기에 맞게 반응하는 웹사이트를 말합니다.
다양한 화면 크기의 스마트 기기가 계속 출시되고 있는 지금, 웹사이트 제작 분야에서 가장 최신 기술이자 앞으로도 대세가 될 전망은 반응형웹입니다.

반응형웹반응형웹반응형웹반응형웹

반응형으로 제작된 웹사이트를 PC에서 접속하였을 때 인터넷 창의 크기를 옆으로 줄이면
하단에 스크롤바가 생기지 않고 화면이 재구성되는 것을 확인할 수 있습니다.

일반 웹반응형웹

즉, 반응형웹은 어떤 화면 크기의 스마트 기기에서도 최적화된 화면으로 출력된다는 것을 의미합니다.

그럼, 반응형웹이 아닌 일반 웹사이트를 스마트폰에서 본다면 어떨까요?

  • 스마트폰으로 일반
    웹사이트 접속

  • 스마트폰으로 반응형
    웹사이트 접속

일반 웹사이트를 스마트폰으로 접속하면 폭이 좁은 스마트폰 화면에 PC 화면 비율 그대로 축소되어 나오기 때문에
글자나 사진이 너무 작게 보여 가독성이 많이 떨어지고 메뉴나 버튼이 너무 작아서 터치하기 어렵습니다.
그러나 반응형웹은 스마트폰 화면 크기에 최적화되어 출력되기 때문에 가독성이 뛰어남은 물론
방문자가 원하는 메뉴를 클릭하거나 문의 글을 쉽게 작성할 수 있으며, 전화걸기 버튼으로 쉽게 전화 문의를 할 수 있습니다.

홈페이지는 반응형으로!

홈페이지는 반드시 반응형웹으로 제작하세요!

스마트폰이 출시된 이후 모바일 인터넷 접속률이 매년 꾸준히 증가하여, 지금은 전체 인터넷 접속량 중 모바일 접속률이 90%를 차지한다고 합니다.
그래서 요즘은 모바일 접속자를 배려한 반응형웹이 완전한 트렌드로 자리잡아 반응형 웹사이트가 꾸준히 늘고 있는 추세입니다.
이제는 반드시 반응형웹으로 홈페이지를 제작하셔야 합니다.

자주묻는질문

  • Q

    화살표

    내용보기

    반응형웹은 제작 비용이 높은가요?
    A 반응형웹은 해상도(화면 크기)에 따라 레이아웃이 자동 변형됩니다.
    즉, 점/선/면, 이미지, 위치, 배치, 정렬, 폰트 크기, 두께, 간격, 여백 등 모든 요소가 화면 크기에 반응하여 최적화된 디자인으로 변형되는 웹사이트입니다.
    따라서 반응형웹을 제작하려면 화면 해상도를 바꿔가며 페이지 내부의 모든 요소들을 가장 보기 좋은 스타일로 바꾸는 작업을 추가해야하기 때문에 일반 웹사이트 제작에 비해 제작 기간이 훨씬 많이 소요되어 통상적으로 제작 단가가 높습니다.
  • Q

    화살표

    내용보기

    어떤 업체에서는 반응형웹인데도 견적이 저렴하던데 문제가 있지는 않나요?
    A 반응형웹이 제작하기 까다로운 이유는 화면 크기에 따라 각각 가장 보기 좋은 스타일로 변경해주어야 하기 때문입니다.
    그런데 몇몇 업체에서는 가격을 낮추기 위해 (=제작 기간을 줄이기 위해) 화면 크기에 맞는 스타일을 보기 좋게 바꾸지 않고 그대로 출력되게 하는 무성의한 방식으로 제작하기도 합니다.
    또는 반응형웹이 비교적 최근의 웹 제작 기술이기 때문에 반응형웹 제작에 대한 노하우가 부족한 업체인 경우도 많습니다.

    폰트 크기로 예를 들면, PC에서 보기 좋은 크기와 모바일에서 보기 좋은 크기가 다르기때문에 각각 크기를 다르게 지정해주어야 하는데 이러한 작업을 생략하여 모바일에서 폰트가 너무 크거나 작게 보이는 것입니다.
    그리고 복잡한 이미지나 일러스트, 복잡한 구성의 표를 모바일 화면에 맞게 재편집하지 않고 PC 화면 그대로 사용하게 되면 모바일에서 찌그러져 나오게 됩니다.
    그밖에 인터넷 창을 줄였을 때, 하단에 스크롤바가 생긴다면 그 해상도의 기기에서는 화면이 잘려서 나온다는 것을 의미합니다.

    모바일에서 내용이 너무 작아서 읽기 힘든 부분이 많다면 반응형웹의 퀄리티와 제작 기술력이 많이 떨어지는 것이니 꼭 업체의 포트폴리오를 모바일에서 확인해 보세요.
    반응형웹의 가장 큰 장점은 모든 기기에서 최적화된 화면으로 출력된다는 점인데, 이러한 장점을 전혀 살리지 않은 무성의한 제작 방식으로 가격만 낮춘 것이며, 이런 결과물은 반응형웹으로 제작하는 것이 의미가 없고 낮은 퀄리티 때문에 업체의 신뢰감에 부정적인 영향을 줄 수 있습니다.
  • Q

    화살표

    내용보기

    어떤 웹사이트가 반응형웹인지, 그리고 잘 만든 반응형웹인지는 어떻게 확인하나요?
    A 쉽게 한마디로 요약하면 PC에서 인터넷 창을 줄이면서 볼 때 웹사이트의 화면 구성이 바뀌면 반응형웹이며,
    어떤 창 크기에서도 화면에 맞게 예쁘게 잘 바뀐다면 잘 만든 반응형웹입니다.

    먼저 PC에서 인터넷을 접속하여 웹사이트를 확인해보세요.
    반응형웹은 어떤 해상도에서도 화면이 잘리지 않고 화면 크기에 최적화되어 출력되는 것을 목적으로 제작하기 때문에, 인터넷 창을 줄였을 때 하단에 스크롤바가 생기지 않고 내용이 화면에 맞게 재구성됩니다. 만일, 창을 줄이는 중간에 잠깐이라도 스크롤바가 생기는 부분이 있다면 완성도가 떨어지는 반응형웹입니다.
    넷북이나 태블릿, 폴더블폰 등 중간 단계의 해상도를 가진 기기들도 다양하고 또 새로운 해상도의 기기가 계속 출시되고 있기 때문에 절대 스크롤바가 생겨서는 안 됩니다.

    그리고, 완성도가 높은 반응형웹은 모든 해상도에서 최적화된 크기와 디자인으로 제작합니다.
    인터넷 창을 모바일 화면 정도로 많이 줄였을 때 폰트 크기가 줄어들지 않는다면 모바일에서 너무 크게 보이기 때문에 보기 좋지 않습니다.
    복잡한 표나 이미지의 경우 모바일에서는 구성을 재편집하여 작은 화면에서도 잘 보이도록 세심하게 제작해야 하는데, 그렇지 않으면 표는 찌그러지고, 인포그래픽 내의 텍스트는 글자가 너무 작아져 가독성이 떨어집니다.

    즉, 기기별로 너무 크게 보이는 부분은 알맞게 줄여야 하고, 너무 작게 보이는 부분은 알맞게 키워야 하는 등 세심한 작업이 필요합니다.

    이 내용으로 인터넷 창을 줄였을 때

    • 반응형웹이 아님

    • 낮은 퀄리티의 반응형웹

    • 위시웹의 반응형웹

  • Q

    화살표

    내용보기

    위시웹은 타사의 저가형 반응형웹에 비해 완성도나 가격은 어떤가요?
    A 저희 위시웹은 가격을 낮추기 위해 무성의하고 완성도가 떨어지는 결과물로 꼼수를 부리는 것은 올바르지 않다고 판단하였습니다.
    그래서 지난 수년간 완성도가 높은 반응형웹을 제작하는데 있어 까다롭고 시간이 많이 소요되는 부분들을 보다 쉽고 빠르게 제작할 수 있는 방법을 끊임없이 연구하고 개발하여 현재 반응형웹 코딩과 디자인 등 자동화할 수 있은 모든 부분들을 자동화하여 가격을 낮추게 되었습니다.

    그리고 해상도마다 각각 별도의 스타일 작업을 자체 개발한 반응형웹 에디터를 통해 보다 간편하게 입력할 수 있어 제작 기간을 단축하였고 그만큼 비용을 낮출 수 있게 되었습니다.

    위시웹은 각분야의 경력 15년 이상인 기획자와 디자이너, 개발자를 보유하여 완성도 있는 결과물을 제작할 수 있는 전문 인력 시스템을 갖추었습니다.
    타사처럼 낮은 품질과 획일화된 업종별 템플릿을 선택하는 방식이 아닌 위시웹 전문 디자이너가 제작한 고품질의 디자인 컨셉을 선택하여 컨설팅을 통해 맞춤 제작을 제공하는 방식으로 합리적이고 효율적인 프로세스를 제공하여 완성도 높은 반응형 웹사이트를 저렴하게 제작해 드리고 있습니다.
  • Q

    화살표

    내용보기

    위시웹의 반응형웹 자동화 시스템은 무엇인가요?
    A 위시웹의 반응형웹 자동화 시스템은 웹페이지 내의 디자인적인 모든 요소들의 크기와 형태, 배치, 두께, 간격 등 PC에서 보기좋은 스타일과 모바일이나 태블릿 등 작은 화면에서 보기 좋은 스타일의 특징과 패턴을 분석ㆍ연구하여 화면 크기에 따라 자동으로 변형될 수 있도록 개발한 시스템입니다. 그리고 자동화 시스템을 통해 자동 변형된 결과가 전문 디자이너의 관점에서 좋지 않다고 판단되는 부분에 대해서는 수동으로 보완하여 최상의 결과를 이끌어내는 제작 방식입니다.
    즉, 반응형웹 최적화 작업 중 여러 부분이 자동으로 이루어지고, 나머지 부분은 수동으로 세심하게 작업하는 것입니다.

    이러한 반응형웹 최적화 작업을 거치지 않는 업체는 가격은 저렴할지 몰라도 퀄리티가 많이 떨어지고,
    퀄리티가 높은 유명 에이전시의 경우 최적화 작업을 일일이 수동으로 하기 때문에 제작 기간이 길어져 제작 비용이 높은 것입니다.