AI가 만든 사이트 UI가 깨질 때: 모바일·카드·이미지 로딩 점검 순서

1. 먼저 모바일에서 실제로 끝까지 눌러본다

브라우저 개발자 도구의 모바일 보기만으로는 부족할 때가 많습니다. 실제 휴대폰에서 사이트를 열어보고, 첫 화면부터 핵심 버튼까지 눌러봐야 합니다.

확인할 것:

• 첫 화면에서 핵심 문구와 버튼이 바로 보이는가
• 카드가 화면 밖으로 삐져나가지 않는가
• 버튼 텍스트가 박스 밖으로 나오지 않는가
• nav나 로그인 아이콘이 겹치지 않는가
• 스크롤 중 이미지가 뜨면서 화면이 밀리지 않는가

AI는 데스크톱 미리보기 기준으로는 화면을 잘 맞추지만, 실제 모바일 사용성까지 항상 확인하지는 못합니다.

2. 카드 높이 문제는 텍스트와 이미지 둘 다 본다

카드 높이가 제각각이면 보통 텍스트만 의심합니다. 하지만 실제로는 이미지가 원인일 때도 많습니다.

예를 들어 카드 안 이미지가 서로 다른 비율이면, 로딩된 뒤 카드 높이가 다시 계산됩니다. 어떤 카드는 인물이 잘리고, 어떤 카드는 여백이 커지고, 어떤 카드는 버튼이 아래로 밀립니다.

확인할 것:

• 카드 이미지 비율이 일정한가
• 이미지 영역에 고정된 기준 높이나 aspect-ratio가 있는가
• 긴 제목이나 설명이 들어와도 버튼 위치가 유지되는가
• 모바일에서 카드가 한 줄씩 자연스럽게 쌓이는가

카드는 예쁜 박스가 아니라 반복 UI입니다. 하나만 맞는 것이 아니라 여러 카드가 같이 있을 때 안정적으로 보여야 합니다.

3. 이미지 로딩 전후의 화면 흔들림을 본다

AI가 만든 사이트에서 자주 보이는 문제가 이미지 로딩 전후 흔들림입니다. 처음에는 빈 영역이 없다가 이미지가 늦게 뜨면서 아래 콘텐츠가 밀리는 현상입니다.

사용자는 이걸 "사이트가 불안정하다"고 느낍니다. 특히 첫 화면의 큰 이미지나 카드 이미지에서 심하게 보입니다.

확인 방법은 간단합니다.

1. 새로고침을 여러 번 해본다
2. 느린 네트워크 환경에서 열어본다
3. 이미지가 뜨기 전 공간이 확보되어 있는지 본다
4. 이미지가 뜬 뒤 텍스트와 버튼이 움직이는지 본다

해결은 보통 이미지 영역의 크기 기준을 먼저 잡는 것에서 시작합니다. CSS로 비율을 잡거나, 프레임워크의 이미지 컴포넌트에 width와 height 기준을 명확히 줘야 합니다.

4. nav와 언어 선택 UI는 z-index만 보지 않는다

헤더, nav, 언어 선택 드롭다운, 로그인 아이콘이 겹치면 z-index만 올려서 해결하려는 경우가 많습니다. 하지만 z-index만 올리면 다른 화면에서 또 겹칠 수 있습니다.

먼저 봐야 할 것은 구조입니다.

• 모바일 헤더 높이가 충분한가
• 드롭다운이 열릴 공간이 있는가
• sticky 헤더와 애니메이션 영역이 겹치지 않는가
• 로그인 아이콘과 메뉴 버튼의 터치 영역이 충분한가
• 언어 선택 UI가 닫히는 조건이 명확한가

AI는 보이는 문제를 빨리 덮기 위해 z-index를 크게 주는 경우가 있습니다. 단기적으로는 위로 올라오지만, 나중에 모달이나 다른 드롭다운과 충돌할 수 있습니다.

5. 한 번에 다 고치지 말고 화면 단위로 나눈다

UI가 여러 군데 깨졌을 때 가장 위험한 요청은 "전체적으로 정리해줘"입니다. AI는 전체 스타일을 다시 잡으려다가 원래 괜찮던 부분까지 바꿀 수 있습니다.

요청은 이렇게 나누는 편이 좋습니다.

• 홈 첫 화면의 이미지 위치만 고쳐줘
• 카드 섹션의 높이와 이미지 비율만 맞춰줘
• 모바일 nav 간격만 정리해줘
• 언어 선택 드롭다운이 헤더와 겹치지 않게 해줘
• 데스크톱 스타일은 유지하고 모바일 breakpoint만 수정해줘

작게 나누면 수정 후 검수도 쉬워집니다. 어디가 좋아졌고 어디가 그대로인지 눈으로 확인할 수 있습니다.

정리

AI가 만든 사이트의 UI가 깨질 때는 디자인 감각보다 점검 순서가 중요합니다.

1. 실제 휴대폰에서 끝까지 눌러본다
2. 카드 높이는 텍스트와 이미지 비율을 함께 본다
3. 이미지 로딩 전후 화면이 밀리는지 확인한다
4. nav와 드롭다운은 구조와 터치 영역까지 본다
5. 수정 요청은 화면 단위로 작게 나눈다

UI 문제는 작아 보여도 고객의 첫인상에 바로 영향을 줍니다. 특히 AI로 만든 MVP라면 "일단 보이는 화면"에서 "안정적으로 검수 가능한 화면"으로 한 번 정리하는 과정이 필요합니다.

관련 글: AI로 만든 MVP 화면이 흔들릴 때, 실제로 수정한 순서, iOS Safari에서만 화면이 깨질 때, Lovable로 만든 사이트 수정이 안 될 때