태블릿 대응 내비게이션
휴대폰에서 쓰던 내비게이션 앱을 하나의 앱으로 폰과 태블릿에서 모두 쓰도록 넓혔습니다. 태블릿은 차 안에 두고 내비게이션 단말처럼 쓰는 경우를 기준으로 삼았습니다. 운전 중에 보는 화면이라 폰 화면을 그대로 키우면 안내가 읽히지 않고 조작이 번거로워지므로, 공통 기능은 하나로 두고 기기별 화면 차이를 따로 나눠 관리하는 구조를 설계했습니다. 작업은 앱 구조 설계부터 태블릿 화면과 해상도 대응까지입니다.
공통 기능은 하나로, 화면 차이는 기기별로 나눈 앱 구조
내비게이션 앱 하나가 폰과 태블릿을 모두 지원하도록 앱 구조를 설계했습니다. 길찾기와 경로 안내 같은 공통 기능은 그대로 유지하고, 기기마다 달라지는 화면 구성만 따로 나눠 관리했습니다. 기능을 고칠 때는 한 곳만 손보면 되고, 화면은 기기 크기에 맞춰 따로 다듬을 수 있습니다.
지도 · 경로 안내 · 주변 정보 · 조작을 넓게 나눈 태블릿 배치
태블릿용 내비게이션 화면은 지도, 경로 안내, 주변 정보, 조작 영역 네 부분으로 나눠 배치했습니다. 폰 화면을 그대로 늘리지 않고, 넓어진 면적에 맞춰 네 영역을 각각 더 넓고 보기 쉽게 다시 구성했습니다. 영역마다 얼마나 자리를 줄지는 차 안에서 태블릿을 내비게이션 단말로 쓰는 상황을 기준으로 정했습니다.
운전 중 짧은 눈길에도 읽히게 정한 차량용 화면 기준
태블릿 내비게이션은 차 안에 두고 운전 중에 보는 화면이라, 가독성과 조작성을 먼저 따졌습니다. 운전자는 화면을 오래 볼 수 없으므로 안내 문구와 거리 표시가 짧은 눈길에 읽혀야 합니다. 조작도 몇 번의 터치로 끝나는 쪽을 기준으로 화면을 다듬었습니다.
크기와 해상도가 달라도 흔들리지 않는 지도와 안내
폰과 태블릿은 화면 크기와 해상도가 서로 달라, 같은 레이아웃을 그대로 쓰면 지도와 안내가 어긋나 보입니다. 기기별 크기와 해상도 차이를 고려해 화면 구조를 조정하고, 지도 화면과 안내 화면이 어느 기기에서든 안정적으로 표시되게 했습니다. 이 작업은 먼저 만든 휴대폰판의 기반을 더 큰 화면으로 넓힌 것이고, 여러 기기를 함께 지원하는 다음 버전으로 이어졌습니다.
이 작업의 포인트
하나의 앱으로 폰과 태블릿을 함께 지원하는 구조
지도 · 경로 안내 · 주변 정보 · 조작 영역을 넓힌 태블릿 화면
기기마다 다른 화면 크기와 해상도 대응
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…