Web Guide태블릿중간 화면반응형
태블릿 화면을 따로 고려해야 할까
모바일도 아니고 PC도 아닌 크기에서 화면이 어색해지는 경우가 있습니다.
태블릿 비중이 낮다고 무시하면, 그 중간 크기에서 레이아웃이 무너집니다.
01태블릿만의 문제가 아니다
태블릿 사용자가 적다고 해서 중간 크기 화면을 무시할 수는 없습니다. PC에서 브라우저 창을 반만 열어 쓰는 사용자도 같은 크기를 봅니다.
또 화면이 접히는 기기나 가로로 돌린 휴대폰도 중간 크기가 됩니다.
01
태블릿
세로와 가로가 각각 다른 크기가 됩니다.
02
창을 반만 연 PC
두 창을 나란히 쓰는 사용자. 생각보다 많습니다.
03
가로로 돌린 휴대폰
영상을 보거나 표를 볼 때 돌립니다.
04
접히는 기기
펼치면 태블릿 크기가 됩니다.
05
작은 노트북
화면이 작은 노트북도 중간 크기에 가깝습니다.
02자주 생기는 문제
PC용 레이아웃이 그대로 적용되면 요소가 좁아져 답답해지고, 모바일용이 적용되면 여백이 지나치게 많아집니다.
특히 3열이나 4열 배치가 어중간하게 남는 경우가 문제입니다.
카드가 너무 좁음
PC의 4열이 그대로 남아 카드가 좁고 글자가 뭉칩니다.
여백이 과함
모바일 1열이 적용되어 좌우가 텅 빕니다.
메뉴 애매
PC 메뉴는 넘치고 햄버거는 공간이 아깝습니다.
이미지 왜곡
비율이 맞지 않아 늘어나거나 잘립니다.
표 잘림
PC 기준 표가 넘쳐 가로 스크롤이 생깁니다.
03중간 단계를 하나 두면 된다
복잡하게 대응할 필요는 없습니다. 모바일과 PC 사이에 한 단계를 두고 2열 배치 정도로 처리하면 대부분 해결됩니다.
메뉴도 이 구간에서 어떻게 할지 정하면 됩니다.
모바일 — 1열
모든 요소가 세로로 쌓임
중간 — 2열
카드와 목록을 2열로. 대부분 이것으로 충분
PC — 3~4열
설계한 대로의 배치
대형 — 최대 폭 제한
무한정 늘어나지 않게
04터치도 고려한다
태블릿은 화면이 크지만 터치로 조작합니다. PC 레이아웃을 그대로 쓰면 버튼이 작아 누르기 어렵습니다.
또 마우스를 올렸을 때 나타나는 효과는 터치에서 동작하지 않습니다.
터치 크기 유지화면이 커도 버튼은 손가락 크기로 유지합니다.
호버 의존 금지마우스를 올려야 나오는 메뉴는 터치에서 안 됩니다.
메가메뉴 대응호버로 펼치는 방식은 탭으로도 동작하게 합니다.
가로·세로 전환기기를 돌렸을 때 레이아웃이 자연스럽게 바뀌는지 확인합니다.
CHECK POINT
□ 모바일과 PC 사이 중간 단계가 정의되어 있는가
□ 중간 크기에서 카드가 2열로 배치되는가
□ 좌우 여백이 지나치지 않은가
□ 브라우저 창을 반만 열어 확인했는가
□ 터치로 조작할 수 있는 버튼 크기인가
□ 호버에 의존하는 메뉴가 터치에서도 동작하는가
□ 기기를 가로로 돌렸을 때 확인했는가
#태블릿#중간 화면#반응형#브레이크포인트#터치 조작#호버#레이아웃#홈페이지 디자인#웹비스타#홈페이지 제작