AI 모바일 화면 깨짐, 3분 수정 프롬프트 7가지

AI 코딩 도구가 만든 화면은 노트북에서는 그럴듯한데 휴대폰 크기로 줄이면 갑자기 깨지는 경우가 많습니다. 카드가 옆으로 삐져나가고, 버튼 글자가 두 줄로 눌리고, 긴 코드나 URL이 화면 밖으로 밀립니다. 이때 바로 "반응형으로 고쳐줘"라고 쓰면 AI는 전체 레이아웃을 다시 짜거나 필요 없는 라이브러리를 붙일 수 있습니다.

초보자에게 먼저 필요한 것은 CSS 전체 강의가 아닙니다. 깨진 화면의 폭, 깨진 영역, 기대하는 동작, 수정 제한을 3분 안에 묶는 방식입니다. 이 네 가지를 주면 AI는 추측으로 화면을 갈아엎기보다 지금 넘치는 지점부터 보게 됩니다.

첫 30초에는 모바일 폭과 깨진 영역을 고정합니다

developer.chrome.com의 Chrome Developers Device Mode 문서는 Chrome DevTools가 모바일 뷰포트 시뮬레이션을 제공한다고 설명합니다. 실제 기기 검사를 완전히 대체한다는 뜻은 아니지만, 초보자가 같은 폭에서 문제를 재현하기에는 충분히 유용합니다. 먼저 개발자 도구를 열고 390px 또는 430px 같은 휴대폰 폭으로 화면을 줄입니다.

AI에게는 "모바일에서 깨져요"보다 아래 정보가 더 잘 작동합니다.

확인한 화면 폭: 390px
깨진 위치: 가격 카드 3개가 있는 섹션
증상: 세 번째 카드가 오른쪽으로 밀려 화면 밖으로 나감
기대 동작: 모바일에서는 카드가 한 줄에 하나씩 세로로 쌓이면 좋겠음

이 네 줄은 원인보다 증상을 먼저 고정합니다. 원인을 모르는 상태에서 flex, grid, media query를 먼저 말하면 AI가 넓게 추측할 수 있습니다. 반대로 어느 폭에서 어느 영역이 어떻게 깨지는지 말하면 수정 범위가 좁아집니다.

다음 1분에는 원인 후보를 4개로만 나눕니다

모바일 레이아웃 깨짐은 대부분 몇 가지 후보로 줄어듭니다. developer.mozilla.org의 MDN viewport 문서는 width=device-width가 기기의 CSS 픽셀 폭을 기준으로 뷰포트를 잡는 값이라고 설명합니다. 이 설정이 빠져 있으면 모바일 브라우저가 예상과 다른 폭으로 페이지를 렌더링할 수 있습니다.

그다음은 CSS입니다. developer.mozilla.org의 MDN media query 문서는 화면 폭, 방향, 해상도 같은 조건에 따라 CSS를 적용할 수 있다고 설명합니다. 같은 MDN의 flex-wrap 문서는 flex 항목을 한 줄에 둘지 여러 줄로 감쌀지 정하는 속성이라고 설명하고, overflow-wrap 문서는 긴 단어와 문자열이 줄 안에서 넘치지 않게 줄바꿈을 넣을 수 있게 합니다.

초보자는 아래 4개만 먼저 의심하면 됩니다.

meta viewport가 빠졌는지 확인합니다.
카드나 섹션에 width: 900px 같은 고정 폭이 있는지 봅니다.
display: flex인데 줄바꿈이나 모바일 방향 전환이 없는지 봅니다.
긴 URL, 이메일, 코드 문자열이 줄바꿈 없이 박혀 있는지 봅니다.

여기서 중요한 것은 정답을 맞히는 일이 아닙니다. AI에게 "전체를 반응형으로 바꿔줘"가 아니라 "아래 4개 후보 중 어디가 가장 가능성이 높은지 먼저 판단해 줘"라고 시키는 것입니다.

AI에게 붙일 프롬프트는 수정 범위를 먼저 막습니다

아래 프롬프트를 그대로 붙여 넣고 대괄호만 바꿉니다.

지금 React/Next.js 화면이 데스크톱에서는 보이지만 모바일에서 깨집니다.

확인한 폭:
[예: Chrome DevTools 390px]

깨진 영역:
[예: pricing-card 섹션, 세 번째 카드가 오른쪽으로 넘침]

현재 코드:
[관련 컴포넌트와 CSS 또는 Tailwind class]

기대 동작:
[예: 모바일에서는 카드가 한 줄에 하나씩 세로로 쌓이고, 버튼 글자는 넘치지 않아야 함]

요청:
1. 원인을 viewport, 고정 폭, flex/grid, 긴 텍스트 줄바꿈 중에서 먼저 분류해 주세요.
2. 전체 화면을 새로 만들지 말고 깨진 영역의 최소 수정만 제안해 주세요.
3. 새 패키지 설치, 새 디자인 시스템, 전체 구조 변경은 하지 마세요.
4. 수정 전후에 확인할 화면 폭 3개를 알려 주세요.

이 프롬프트의 핵심은 세 번째 줄이 아니라 두 번째 요청입니다. "최소 수정"을 먼저 걸어야 AI가 멀쩡한 섹션까지 바꾸지 않습니다. 버튼 하나가 넘치는데 라우팅 구조나 상태 관리까지 바꾸는 답변이 나오면 다시 좁혀야 합니다.

수정 범위가 너무 큽니다.
지금 모바일 overflow를 해결하기 위한 최소 CSS 변경만 다시 제안해 주세요.
컴포넌트 구조 변경과 새 파일 생성은 제외하고,
바뀌는 class 또는 CSS 속성만 보여 주세요.

답변을 받으면 7가지만 보고 적용합니다

AI가 수정안을 주면 바로 붙이지 말고 아래 7가지를 봅니다. 이 검토는 긴 코드 리뷰가 아니라 모바일 깨짐을 더 키우지 않기 위한 저장 전 확인입니다.

깨진 영역의 파일만 바뀌는지 봅니다.
width, max-width, min-width 중 무엇을 바꾸는지 확인합니다.
flex-wrap, grid-template-columns, flex-direction 같은 레이아웃 속성이 문제와 연결되는지 봅니다.
긴 텍스트에는 overflow-wrap이나 줄바꿈 처리가 있는지 봅니다.
버튼과 입력창의 글자가 부모 너비 안에 남는지 봅니다.
390px, 768px, 데스크톱 폭에서 다시 확인할 수 있는지 봅니다.
새 패키지나 전역 CSS 변경이 들어오지 않았는지 봅니다.

두 개 이상 설명이 안 되면 적용을 늦춥니다. 모바일 수정은 작은 CSS 한두 줄로 해결될 때가 많지만, 전역 스타일을 바꾸면 다른 페이지가 같이 흔들릴 수 있습니다. 초보자일수록 "어디에 적용되는 CSS인지"를 AI에게 다시 물어봐야 합니다.

다시 깨지면 스크린샷보다 변경 전후를 줍니다

수정 후에도 깨지면 "아직 안 돼요"라고만 보내지 않습니다. 같은 폭에서 전후 상태를 비교해야 합니다.

제안한 수정안을 적용했습니다.

변경한 파일:
[파일명]

다시 확인한 폭:
390px, 768px, 1440px

결과:
390px에서는 카드가 세로로 쌓이지만 버튼 글자가 두 줄로 눌립니다.
768px에서는 카드 간격이 너무 넓습니다.
1440px에서는 기존과 같습니다.

요청:
방금 수정에서 좋아진 점과 새로 생긴 문제를 나눠 주세요.
이번에도 최소 CSS 변경만 제안해 주세요.

이렇게 쓰면 AI가 이전 답변의 가정을 다시 점검합니다. 특히 390px만 맞추고 768px 태블릿 폭을 망치는 일이 줄어듭니다. 모바일 수정은 한 폭만 보는 작업이 아니라 작은 화면, 중간 화면, 기존 데스크톱 화면을 함께 지키는 작업입니다.

오늘 남길 결과물은 모바일 수정 메모 7줄입니다

이번 루틴의 목표는 반응형 CSS를 한 번에 외우는 것이 아닙니다. AI에게 화면을 다시 맡기기 전에 문제를 작게 고정하는 것입니다. 지금 깨진 화면이 있다면 아래 7줄만 먼저 채웁니다.

확인한 폭:
깨진 영역:
깨진 증상:
기대 동작:
관련 파일:
수정 금지 범위:
다시 확인할 폭:

이 7줄이 있으면 "모바일에서 예쁘게 고쳐줘"보다 훨씬 안전한 요청이 됩니다. 오늘은 깨진 화면 하나를 골라 390px, 768px, 데스크톱 폭에서 같은 메모를 남기세요. 그다음 AI에게 최소 수정만 요청하면, 반응형 수정이 전체 재작업으로 번질 가능성이 줄어듭니다.

참고 출처

MDN, viewport meta tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
MDN, Using media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using
MDN, flex-wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-wrap
MDN, overflow-wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-wrap
Chrome Developers, Device Mode: https://developer.chrome.com/docs/devtools/device-mode

모바일에서 깨진 AI 화면, 3분 수정 프롬프트 7가지