AI가 만든 Next.js 모바일 화면 깨질 때 7분 점검 5단계

AI가 만든 Next.js 화면을 브라우저 큰 창에서 볼 때는 괜찮았는데, 휴대폰으로 열자 카드가 오른쪽으로 밀리고 버튼 문구가 잘리는 순간이 있습니다. 이때 바로 "반응형으로 다시 만들어줘"라고 말하면 AI가 컴포넌트 전체를 갈아엎고, 데스크톱에서 맞던 디자인까지 흔들릴 수 있습니다.

먼저 해야 할 일은 전체 재작성이 아닙니다. 모바일에서 깨지는 조건을 7분 안에 좁히는 것입니다. 원인을 고정 폭, grid 컬럼, 이미지 비율, 긴 텍스트, 수정 범위로 나누면 AI에게도 훨씬 작은 요청을 줄 수 있습니다.

AI가 만든 Next.js 화면이 데스크톱과 모바일에서 다르게 보이는 상황

MDN의 responsive design 문서는 반응형 레이아웃을 화면 크기와 기기에 맞춰 유연하게 조정하는 방식으로 설명합니다. media queries 문서는 뷰포트 같은 조건에 따라 CSS를 다르게 적용할 수 있다고 안내합니다. 그래서 지금 볼 문제는 "AI가 틀렸다"가 아니라 어떤 화면 폭에서 어떤 규칙이 버티지 못하는가입니다.

1분에는 같은 화면을 모바일 폭으로 다시 고정합니다

먼저 같은 URL을 320px, 390px, 768px 폭으로 봅니다. Chrome 개발자 도구의 기기 모드나 실제 휴대폰 중 하나면 충분합니다. 중요한 것은 "모바일에서 이상하다"가 아니라 "390px에서 가격 카드가 오른쪽으로 40px 넘친다"처럼 말할 수 있는 상태입니다.

AI에게 캡처 없이 "모바일이 깨져"라고 말하면, AI는 레이아웃 전체를 다시 짤 가능성이 큽니다. 반대로 깨진 폭과 위치를 주면 수정 범위가 작아집니다.

390px 폭에서 pricing 카드 3개 중 두 번째 카드가 오른쪽으로 넘칩니다.
데스크톱 1024px 이상 레이아웃은 유지하고, 모바일 폭에서만 줄바꿈되게 고쳐 주세요.

이 한 문장만 있어도 AI가 grid, flex, width 쪽을 먼저 보게 됩니다.

2분에는 고정 폭과 최소 폭을 찾습니다

모바일만 깨질 때 가장 먼저 볼 것은 w-[720px], min-w-[480px], w-screen, max-w-none 같은 폭 관련 className입니다. 초보자가 직접 CSS를 전부 이해하지 못해도 괜찮습니다. 깨진 컴포넌트에서 w-, min-w, max-w, overflow, px-를 검색하면 됩니다.

특히 AI가 랜딩 페이지를 만들 때는 카드와 표를 예쁘게 보이게 하려고 큰 고정 폭을 넣을 때가 있습니다. 데스크톱에서는 안정적으로 보이지만 모바일에서는 그 폭이 그대로 남아 화면 밖으로 밀립니다.

고정 폭이 보이면 바로 지우지 말고, 먼저 이 질문을 던집니다.

이 고정 폭이 모바일에서도 필요한가, 아니면 md 이상에서만 적용돼야 하나?

Tailwind를 쓰고 있다면 w-[720px]를 w-full md:w-[720px]처럼 나눌 수 있습니다. 모든 상황에 맞는 답은 아니지만, 모바일 기본값을 먼저 작게 만들고 큰 화면에서만 넓히는 방향이 안전합니다.

3분에는 grid와 flex가 줄바꿈되는지 봅니다

Tailwind responsive design 문서는 breakpoint 접두사를 이용해 화면 폭에 따라 다른 utility를 적용하는 방식을 안내합니다. 그래서 grid-cols-3가 모바일에 그대로 있으면 세 칸이 좁은 폭 안에 억지로 들어가며 깨질 수 있습니다.

다음 조합을 먼저 의심합니다.

보이는 코드	모바일에서 생길 수 있는 문제	먼저 바꿔 볼 방향
`grid-cols-3`	카드 3개가 한 줄에 압축됨	`grid-cols-1 md:grid-cols-3`
`flex-nowrap`	버튼이나 탭이 화면 밖으로 나감	`flex-wrap` 또는 모바일 세로 배치
`gap-10 px-12`	여백만으로 본문 폭이 부족해짐	모바일 여백을 줄이고 큰 화면에서 키움
긴 버튼 문구	버튼 높이와 폭이 동시에 깨짐	문구 줄바꿈 또는 아이콘 분리

여기서 목표는 예쁜 최종 디자인을 한 번에 만드는 것이 아닙니다. 모바일에서 한 줄에 있어야 하는 것과 내려가야 하는 것을 분리하는 것입니다.

4분에는 이미지와 비율이 카드 폭을 밀어내는지 확인합니다

카드 안 이미지가 원인일 때도 많습니다. 예를 들어 img나 Image가 부모보다 큰 폭을 갖거나, 비율이 없는 이미지가 로딩되면서 카드 높이를 갑자기 바꿀 수 있습니다. Next.js Image 문서는 responsive layout에서 sizes가 브라우저가 적절한 이미지 크기를 고르는 데 쓰인다고 설명합니다.

다음 세 가지를 봅니다.

이미지가 w-full로 부모 폭 안에 들어오는가.
카드에 overflow-hidden이 필요한 디자인인가.
Image를 쓴다면 sizes가 실제 레이아웃 폭과 맞는가.

이미지가 원인이라면 AI에게 "반응형으로 고쳐줘"보다 이렇게 말하는 편이 낫습니다.

카드 이미지는 부모 카드 폭을 넘지 않아야 합니다.
모바일에서는 이미지가 w-full로 줄어들고, 데스크톱의 카드 비율은 유지해 주세요.
Next.js Image의 sizes가 필요하면 함께 조정해 주세요.

7분에는 AI에게 수정 범위를 작게 넘깁니다

마지막에는 원인 후보를 하나로 정리해서 AI에게 넘깁니다. 여기서 중요한 문장은 "전체를 다시 만들지 말라"가 아니라 "유지할 것과 바꿀 것"을 함께 주는 것입니다.

아래 프롬프트를 그대로 붙여 넣고, 괄호 안만 바꿔도 됩니다.

아래 컴포넌트에서 모바일 레이아웃만 고쳐 주세요.

상황:
- 390px 폭에서 [깨지는 요소]가 오른쪽으로 넘칩니다.
- 데스크톱 1024px 이상 레이아웃은 현재 디자인을 유지해야 합니다.

먼저 확인할 것:
- 고정 width, min-width, w-screen 사용 여부
- grid-cols 또는 flex nowrap 때문에 줄바꿈이 막혔는지
- 이미지나 긴 버튼 문구가 부모 폭을 넘는지

수정 조건:
- 관련 컴포넌트와 className만 최소 수정
- 데이터 구조, API 호출, 라우팅은 건드리지 않기
- 수정 후 320px, 390px, 768px에서 확인할 체크리스트도 알려주기

이 프롬프트의 핵심은 AI가 건드릴 범위를 줄이는 데 있습니다. 모바일 깨짐은 대부분 한두 className에서 시작하지만, 요청이 넓으면 AI는 파일 전체를 바꾸려 합니다. 반대로 화면 폭, 깨진 요소, 유지할 범위를 주면 수정이 작아집니다.

오늘은 깨진 화면을 보자마자 다시 만들지 말고, 390px 캡처 한 장과 의심 className 세 줄을 먼저 모읍니다. 그 다음 AI에게 위 프롬프트를 주면 디자인을 버리지 않고 모바일 문제만 좁히는 작업으로 바꿀 수 있습니다.