PPSTUDIO 인사이트 목록

02 / 05 · PRODUCT DESIGN

점심먹개 모바일 화면을 320px와 키보드로 점검한 기록

바로 추천받고 싶을 때와 메뉴를 직접 둘러보고 싶을 때는 필요한 화면이 다릅니다. 점심먹개는 퀵픽과 대표 추천을 먼저 보여 주고 메뉴판과 상세 필터로도 들어갈 수 있게 했습니다. 이 경로들을 작은 화면에 배치하면서 버튼이 가려지거나 키보드 이동이 끊기는 곳을 확인했습니다.

작성 PPStudio 운영자게시 2026-08-02검토 2026-09-05

FIELD EVIDENCE

빠른 선택에서 실제 행동까지 이어지는 세 장면

빠른 선택과 대표 추천, 메뉴판과 조건 필터가 배치된 점심먹개 모바일 홈
01 · 빠른 진입퀵픽과 대표 추천을 먼저 만납니다.
빠른 메뉴 선택 항목을 펼친 점심먹개 모바일 화면
02 · 선택 확장필요할 때 전체 퀵픽을 펼칩니다.
대표 메뉴와 추천 이유, 검색과 지도 찾기가 표시된 점심먹개 모바일 결과
03 · 행동 연결비교하고 검색과 지도로 이어갑니다.

운영 서비스를 390×844 환경에서 직접 확인한 화면입니다. 빠른 진입, 선택 확장, 추천 이유와 검색·지도 행동의 순서를 보여줍니다.

모든 사용자에게 같은 입력 단계를 요구하지 않았습니다

상세 필터부터 보여주면 통제감은 높지만 간단한 결정을 원하는 사용자가 불필요한 입력을 거쳐야 합니다. 반대로 무작위 버튼만 제공하면 빠르지만 결과가 마음에 들지 않을 때 개입할 방법이 없습니다.

홈에서는 익숙한 상황을 담은 퀵픽과 대표 추천을 먼저 제공하고, 전체 메뉴를 훑고 싶은 사용자는 메뉴판으로, 조건을 직접 조정하려는 사용자는 필터로 이동하게 했습니다. 어느 경로도 필수 입력이 아니며 빠른 경로를 사용한 뒤에도 후보 비교와 재시도가 가능합니다.

선택지를 없애기보다 지금 필요한 선택지만 먼저 보여주는 방식입니다. 기능의 수는 유지하되 처음 마주치는 화면의 요구사항을 줄이는 것을 목표로 삼았습니다.

우선 환경
390×844 모바일
최소 검증 폭
320px
선택 경로
퀵픽·대표 추천·필터/메뉴판
브라우저 검사
모바일·데스크톱 28개 시나리오

AFTER RECOMMENDATION

추천 뒤의 행동까지 한 흐름으로 설계했습니다

추천 결과는 메뉴 이름을 보여주는 것으로 끝나지 않습니다. 대표 메뉴, 짧은 추천 이유, 다른 후보, 일반 검색과 주변 식당 찾기의 순서를 분명히 해 사용자가 실제 점심 선택으로 이어갈 수 있게 했습니다.

검색과 지도 버튼을 결과 카드 하단에 두고 메뉴 이름과 이유보다 먼저 시선을 빼앗지 않게 했습니다. 버튼 주변의 장식과 설명 밀도도 줄여 다음 행동이 무엇인지 식별하는 일을 우선했습니다.

결과가 마음에 들지 않으면 다른 후보를 넘겨 보거나 필터를 바꿔 다시 추천받을 수 있습니다. 검색과 지도는 메뉴를 고른 뒤에 사용할 수 있도록 남겼습니다.

반응형 검사는 화면 폭보다 사용 시나리오로 나눴습니다

같은 모바일 폭에서도 홈, 메뉴판, 저장 목록, 필터와 공개 문서는 서로 다른 문제가 생깁니다. 대표 화면 한 장을 캡처하는 데 그치지 않고 실제 이동 경로별 시나리오를 두어 320px부터 데스크톱까지 가로 넘침, 요소 겹침과 누락 이미지를 확인합니다.

네트워크와 콘솔 오류도 레이아웃 검사와 함께 확인합니다. 화면이 정렬돼 보여도 메뉴 데이터 요청이나 버튼 동작이 실패하면 사용할 수 있는 화면으로 보지 않습니다.

390×844 화면은 운영 서비스의 대표 모바일 장면을 기록하는 기준이고, 320px는 핵심 본문과 조작이 잘리지 않아야 하는 최소 검증 폭입니다. 특정 기기 한 대의 결과를 전체 모바일 품질로 일반화하지 않습니다.

키보드와 보조 기술에서 정보 순서를 다시 확인했습니다

링크와 버튼에는 보이는 포커스 표시를 두고 Tab 키로 실제 도달할 수 있는지 확인합니다. 탭 인터페이스는 방향키, Home과 End로 이동할 때 선택 상태와 연결된 패널이 함께 바뀌는지 검사합니다.

문서에는 하나의 명확한 H1을 두고 제목 단계를 건너뛰지 않게 했습니다. 의미 있는 이미지에는 기능을 설명하는 대체 텍스트를 제공하고 반복 장식은 빈 대체 텍스트로 보조 기술에서 제외합니다. 모션 감소 설정에서는 전환 시간을 사실상 제거합니다.

자동 검사는 내부 링크, canonical, 이미지 크기와 대체 텍스트 같은 반복 항목을 맡고, 실제 브라우저 검사는 포커스 순서와 화면 밀도처럼 사람이 판단해야 하는 부분을 맡습니다.

REPEATABLE CHECKS

검증 가능한 품질 규칙으로 남겼습니다

반응형과 접근성은 출시 직전 한 번 확인하는 체크리스트가 아니라 화면을 바꿀 때 다시 실행할 수 있는 규칙으로 관리합니다. 정적 문서와 실제 앱 화면을 분리해 검사하고 결과가 달라지면 관련 시나리오도 함께 수정합니다.

이 검사로 확인한 범위는 지정한 화면 크기와 키보드 동작까지입니다. 실제 보조기기의 읽기 순서와 기기별 확대 동작은 별도 확인이 필요합니다.

  • 320px에서 가로 넘침 없이 핵심 기능 사용하기
  • 빠른 선택과 상세 조정을 서로 대체 가능한 경로로 제공하기
  • Tab과 방향키로 주요 인터페이스 조작하기
  • 자동 검사와 실제 브라우저 검사를 함께 반복하기

작은 화면에서 지킨 순서

퀵픽으로 바로 고른 뒤에도 필터로 돌아갈 수 있고, 추천이 마음에 들지 않으면 메뉴판을 열 수 있습니다. 작은 화면에서 지키려던 것은 이 이동 경로였습니다. 다음 화면을 추가할 때도 돌아오는 버튼과 키보드 순서부터 확인할 생각입니다.