반응형이라는 말이 실제로 뜻하는 것

견적서에 반응형이라고 적혀 있으면 대개 그냥 넘어갑니다.

요즘은 다 그렇게 만든다는 말만 듣고 계약하게 되지요.

그런데 같은 말을 쓰면서 결과가 다른 경우가 있습니다.

화면 크기에 맞춰 배치가 바뀌는 것

같은 주소로 들어가는데 컴퓨터에서는 세 칸으로, 휴대전화에서는 한 칸으로 보이는 방식입니다. 화면 폭을 읽어서 배치를 바꾸는 구조입니다.

내용은 하나인데 보이는 모양이 달라지는 것이지요. 글과 사진을 따로 관리하지 않아도 됩니다.

그래서 주소가 하나고 관리도 한 번만 하면 됩니다.

검색에서도 하나의 주소로 쌓이는 편이 유리합니다

모바일 전용 사이트와 다릅니다

예전에는 휴대전화용 주소를 따로 만드는 방식을 많이 썼습니다.

그러면 두 개를 각각 고쳐야 하고, 한쪽만 수정되어 내용이 어긋나는 일이 생깁니다.

지금도 그렇게 만드는 곳이 있으니 어느 방식인지 확인하십시오. 주소가 두 개로 나뉘어 있으면 그 방식입니다.

견적서의 반응형이 실제로 무엇을 뜻하는지 물어보시면 됩니다.

그냥 줄어들기만 하는 경우

가장 흔한 문제입니다. 배치는 그대로인데 크기만 작아지는 것이지요. 반응형이라고 적혀 있어도 이런 경우가 있습니다.

그래도 보이기는 하잖아요

글자가 너무 작아 손가락으로 확대해야 읽히면 대부분 그냥 나갑니다. 보이는 것과 읽히는 것은 다릅니다.

휴대전화에서 확대하지 않고 읽을 수 있는지가 기준입니다. 한 손으로 들고 읽어 보시면 바로 압니다.

눌리는지도 봐야 합니다

전화 걸기 버튼이나 메뉴가 손가락으로 누르기에 충분히 큰지 확인하십시오. 손이 큰 분들 기준으로 보시면 됩니다.

버튼끼리 너무 붙어 있으면 옆의 것이 눌립니다.

문의 양식의 입력 칸도 마찬가지입니다. 작으면 그 자리에서 포기합니다.

직접 본인 휴대전화로 처음부터 끝까지 해 보시는 것이 가장 확실합니다. 문의 보내기까지 끝내 보십시오.

표와 사진이 문제가 됩니다

가로로 긴 표는 작은 화면에서 잘리거나 옆으로 밀립니다.

큰 사진을 그대로 쓰면 느려집니다. 화면 크기에 맞춰 다른 사진을 내려 주는 방식이 있습니다.

가격표나 비교표가 있는 사이트라면 이 부분을 꼭 확인하십시오.

표가 깨져 보이면 그 페이지는 안 보는 것과 같습니다

시안 단계에서 같이 봐야 합니다

컴퓨터 화면 시안만 보고 승인하면 모바일은 나중에 맞추게 됩니다. 순서가 뒤집히는 것이지요.

그러면 억지로 끼워 넣은 모양이 됩니다.

처음부터 두 화면을 함께 보여 달라고 요청하십시오.

요즘은 모바일을 먼저 그리고 큰 화면을 나중에 맞추는 방식도 씁니다.

완성된 뒤에 본인과 가족의 휴대전화로 각각 열어 보십시오. 기종에 따라 다르게 보이기도 합니다.

태블릿이 있으면 그것도 보시고요.

느리게 열리는지도 함께 봅니다. 밖에서 데이터로 여는 상황을 생각하셔야 합니다.

이상한 곳을 사진으로 찍어 한 번에 전달하시면 수정이 빨라집니다.

하나의 주소인지, 읽히는지, 눌리는지, 표와 사진이 괜찮은지를 봅니다.

네 가지를 본인 휴대전화로 확인해 보시면 됩니다. 전문 지식이 필요한 일이 아닙니다.

전주에서 제작을 진행 중이시라면 시안 승인 전에 이 확인을 넣으시는 것을 권합니다.

인쇄와 접근성도 한 번은 봅니다

견적서나 안내문을 출력해 쓰는 업종이라면 인쇄했을 때 깨지지 않는지 확인해 두십시오.

글자 크기를 키워 보는 분들도 있습니다. 그때 배치가 무너지지 않는지도 봅니다.

색만으로 구분해 둔 부분이 있으면 알아보기 어려운 경우가 있습니다.

모든 것을 맞출 필요는 없지만 한 번은 확인해 두시면 좋습니다

#반응형웹 #모바일최적화 #웹사이트제작 #사용성