💡

들어는 봤는데.. 초보 클라이언트를 위한 반응형 웹 ‘99% 정리’

대학생들의 입학 선물 부동의 1위가 노트북에서 아이패드로 바뀌었습니다.

스마트폰 보급으로 모바일 트래픽이 증가했단 건 옛날 뉴스이고, 이제는 패드, 태블릿에, 접었다 펼치는 휴대폰까지 정~말 다양한 하드웨어들이 우리 생활 속에 자리 잡았습니다.

때문에 최근 서비스들은 거의 필수적으로 반응형 웹을 제작하는데요. 도대체 반응형 웹이 뭔지, 외주 개발에서 중요한 것만 딱 뽑아보도록 하겠습니다.

반응형 웹을 한마디로 정리하면?

“접속하는 디스플레이 종류에 맞게 화면과 구성 요소의 크기 및 위치가 조정되는 사이트”

라고 할 수 있습니다.

말인 즉, 웹페이지 개발 한번으로 모바일과 태블릿, PC까지 모두 커버 가능하다는 말이죠.

PC 웹, 모바일 웹을 따로 개발하지 않아도, 나의 고객들이 어떤 기기로 접속하든 화면 크기와 정보를 자동으로 맞춰서 제공해준다니, 정말 안 할 이유가 없죠?

심지어 반응형 웹의 경우 단일 도메인 주소를 이용합니다. 우리가 대부분 필요한 사이트를 찾을 때, 사용 기기와 무관하게 같은 주소를 통해 접속할 수 있는 이유죠.

이는 브랜드 정체성 구축에도 도움이 됩니다. 늘상 이용하는 서비스인데, 매번 번거롭게 PC와 모바일 따로따로 주소를 입력하거나 외워야 한다면, 비교적 사용이 줄어들 수 밖에 없겠죠.

유지 보수 또한 경제적이고 효율적입니다. 기기마다 따로 코드를 개발/관리할 필요가 없기 때문이죠.

엠브이픽의 유지 보수 체계가 궁금하다면? 엠브이픽의 3가지 유지 보수 체계

이렇게나 장점이 많은 반응형 웹이지만, 안타깝게도 만능은 아닙니다.

반응형 웹은 ‘브레이크 포인트’라는 분기점이 존재합니다. 화면이 이 포인트를 넘어 일정 규모 이상 축소/확대되면 해당 포인트에 맞는 화면 구성과 해상도를 가져오는 시스템이죠.

그런데 이 브레이크 포인트 근처, 즉 전환 기점과 비 전환 기점 사이의 애매한 지점에서 이미지나 폰트, 기능 탭들이 서로 충돌하거나 잘리는 현상이 존재합니다.

홈페이지의 수 많은 이미지와 개별적인 기능, 콘텐츠들을 100% 맞추는 건 기술적으로 불가능하지만,

핵심 문구가 누락되거나, 일부 기능이 숨겨지는 등의 오류는 사용성, 고객 만족과 직결되는 부분이기에 절대 있어서는 안되는 일이죠.

출처 : 수영구청(좌), 부평구청(우) 홈페이지

결론적으로 반응형 웹의 완성도는 얼마나 꼼꼼하게 레이아웃을 구성하고, 다양한 기종에서 테스트를 실시하는지의 싸움이라고 볼 수 있는데요.

여기서 살짝 저희 엠브이픽을 자랑하며 마무리할까 합니다.

아래는 엠브이픽의 테스트 기종 목록과 사진인데요.

엠브이픽의 최신 기종부터 9년 전 구형 모델까지, 50종이 넘는 테스트 기기들을 거친다면?
반응형 웹, 어쩌면 ‘만능’일지도 모르겠네요! 

필독 컨텐츠 목록 가기 → 필독 컨텐츠 한눈에 보기

(주)엠브이픽｜대표이사 안진범

사업자등록번호 622-86-01351

부산광역시 수영구 수영로 642번길 28 엠브이픽 빌딩 2~5층

MVPick 대표 고객센터

대표번호 070-4287-2051

이메일 help@mvpick.net