반응형 & 디바이스

"반응형으로 해주세요"는 PC 시안만 주면 안 된다는 뜻이기도 합니다. 최소한 PC·모바일 두 벌, 보통은 태블릿까지 세 벌의 시안이 필요합니다. 이걸 모르고 견적을 내면 작업량이 두세 배가 됩니다.

반응형과 헷갈리기 쉽지만 작업 방식과 견적이 다릅니다. 반응형은 하나를 유연하게, 적응형은 여러 벌을 따로. 한국 실무에서는 PC용/모바일용 페이지를 아예 분리(m.도메인)하는 적응형이 아직도 꽤 있습니다.

기기 이름이 아니라 숫자로 정해서 전달해야 합니다. "아이폰에서는"이 아니라 "767px 이하에서는"입니다. 아이폰도 기종마다 폭이 다릅니다.

모바일 브라우저는 주소창이 스크롤에 따라 사라졌다 나타나면서 뷰포트 높이가 계속 바뀝니다. 그래서 "화면 높이 100%"로 만든 요소가 튀는 문제가 자주 생깁니다.

좁은 화면부터 만들면 정말 중요한 것만 남기게 되어 결과적으로 더 정리된 화면이 나옵니다. 다만 클라이언트가 PC 시안부터 보고 싶어 하는 경우가 많아, 순서를 미리 합의해두세요.

한국 웹 업계에서만 쓰는 축약어입니다. 화면설계서 파일명도 보통 메인_PC.png, 메인_MO.png로 나눕니다. MO는 mobile의 약자입니다.

하단 고정 버튼이 홈 바에 가려지는 문제가 대표적입니다. 아이폰에서만 나타나서 안드로이드로 테스트하면 못 잡습니다. 하단에 고정 요소가 있다면 반드시 실제 기기로 확인하세요.

최소 44×44px(Apple 기준) 또는 48×48dp(Google 기준)이 권장값입니다. 아이콘이 16px이어도 주변 여백을 포함해 44px을 확보해야 합니다. 이게 부족하면 "버튼이 잘 안 눌려요" 문의가 들어옵니다.

모바일에서 100vh는 함정입니다. 주소창이 사라졌다 나타나면서 높이가 바뀌기 때문에 화면이 튀거나 스크롤이 생깁니다. 요즘은 100dvh라는 개선된 단위를 씁니다 — 개발자에게 이 단어를 언급하면 바로 통합니다.

사용자가 브라우저에서 글자를 크게 설정해도 px는 안 커집니다. 접근성 때문에 글자 크기는 rem으로 지정하는 걸 권장합니다. 다만 시안에서는 px로 표기하고, 변환은 개발이 하는 게 일반적입니다.

지원 범위를 계약서에 반드시 못 박으세요. "모든 브라우저"는 존재하지 않는 요구입니다. 보통 Chrome·Safari·Edge 최신 2개 버전 + 모바일 Safari/Chrome 정도로 정합니다. 오래된 브라우저를 포함하면 공수가 크게 늘어납니다.

"앱 만들어주세요"는 견적을 낼 수 없는 요청입니다. 네이티브는 iOS·안드로이드 두 벌을 각각 만들어야 하고, 앱스토어 심사와 배포까지 포함됩니다. 웹앱은 그 과정이 없습니다. 예산과 일정이 몇 배 차이 납니다.