화면 문제 해결

내 화면에서 높이 96px짜리 '장바구니에 담기' 상자 안의 글자가 가로로는 가운데인데 세로로는 맨 위에 붙어 있어. 원인은 text-align: center만 쓰고 세로 정렬은 하지 않은 것일 가능성이 높으니, 이 상자를 display: flex; align-items: center; justify-content: center;로 바꿔서 글자가 가로·세로 모두 가운데에 오게 고쳐 줘. 상자 높이는 그대로 두고, 글자가 두 줄이 되어도 가운데가 유지되는지와 390px 폭에서도 같은지 확인해 줘.

내 화면에서 '좋아요 128' 버튼의 하트 아이콘이 글자보다 위로 떠 있고 글자는 아래로 처져 보여. 원인은 인라인 아이콘이 글자 기준선에 맞춰져 있어서일 가능성이 높으니, 버튼을 display: inline-flex; align-items: center; gap: 8px;로 바꿔서 아이콘과 글자의 세로 가운데가 맞게 고쳐 줘. 아이콘 크기를 바꿔도 맞는지, 글자가 길어져 줄이 바뀌어도 어긋나지 않는지 확인해 줘.

내 화면에서 '결제가 끝났어요' 안내 상자에 margin: 0 auto를 줬는데 가운데로 오지 않고 부모 폭 전체를 차지해 한쪽에 붙어 보여. 원인은 상자에 폭이 없어서 margin: auto가 나눌 남은 공간이 없는 것일 가능성이 높으니, 상자에 max-width: 180px;(알맞은 폭)을 주고 margin: 0 auto를 유지하거나 부모를 display: flex; justify-content: center;로 바꿔서 가로 가운데에 오게 고쳐 줘. 390px 폭에서 상자가 화면보다 좁게 줄어드는지와 글자가 길어졌을 때도 가운데가 유지되는지 확인해 줘.

내 화면에서 상단 바의 로고(모모샵)와 메뉴(상품·이벤트·로그인)가 둘 다 왼쪽에 붙어 있어. 로고는 왼쪽 끝, 메뉴는 오른쪽 끝에 놓고 싶어. 원인은 flex 줄에 남는 공간을 나누는 설정이 없는 것일 가능성이 높으니, 상단 바에 display: flex; justify-content: space-between; align-items: center;를 주어서 양 끝으로 벌어지게 고쳐 줘. 메뉴가 길어져 줄이 좁아져도 서로 겹치지 않는지, 390px 폭에서 메뉴가 줄바꿈이나 햄버거로 정리되는지 확인해 줘.

내 화면에서 상품 카드 7개를 flex-wrap으로 놓았는데 마지막 줄의 카드 한 장만 줄 전체 폭으로 늘어나 위의 카드들과 크기가 달라. 원인은 카드에 flex: 1을 줘서 줄마다 남는 공간을 나눠 갖는 것일 가능성이 높으니, 목록을 display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;로 바꾸고 카드의 flex 설정은 지워서 모든 줄의 카드가 같은 크기가 되게 고쳐 줘. 카드 수가 1개·2개일 때와 390px·1440px 폭에서 열 수가 어색하지 않은지 확인해 줘.

내 화면에서 상품 카드 안의 사진이 카드 폭보다 커서 오른쪽으로 삐져나가고, 390px 폭에서는 페이지에 가로 스크롤이 생겨. 원인은 이미지 폭에 한도가 없어서일 가능성이 높으니, 카드 안 이미지에 max-width: 100%; height: auto;를 주어서 카드 폭에 맞춰 줄어들면서 비율은 유지되게 고쳐 줘. 이미지가 찌그러지지 않는지와 390px·1440px 폭에서 가로 스크롤이 없는지 확인해 줘.

내 화면에서 주문 카드의 추적 주소(https://momo.example/orders/tracking/20240117-ABCDEFGHIJKLMN)가 카드 밖으로 삐져나가. 원인은 띄어쓰기가 없는 긴 글자가 줄을 못 바꾸는 데다 flex 칸이 안의 내용보다 좁아지지 못해서일 가능성이 높으니, 글자를 담은 칸에 min-width: 0; overflow-wrap: anywhere;를 주어서 카드 안에서 줄이 바뀌게 고쳐 줘. 한글 문장은 단어 단위로 줄이 바뀌던 그대로 두고, 390px 폭에서 가로 스크롤이 없는지 확인해 줘.

내 화면에서 카드 오른쪽 위 '더보기' 버튼을 누르면 수정·복사·삭제 메뉴가 펼쳐지는데, 카드 아래 경계에서 잘려 첫 항목만 보여. 원인은 카드에 걸린 overflow: hidden일 가능성이 높으니, 카드의 overflow를 visible로 바꾸고 모서리를 둥글게 하려고 걸었던 것이라면 안쪽 이미지에만 border-radius를 주어서 메뉴가 카드 밖으로 온전히 나오게 고쳐 줘. 메뉴가 화면 아래쪽에 있을 때도 가려지지 않는지 확인해 줘.

내 화면에서 가로로 밀어 보는 상품 카드 목록의 카드마다 box-shadow가 있는데, 맨 왼쪽·오른쪽 카드와 아래쪽 그림자가 목록 상자 경계에서 잘려 끊겨 보여. 원인은 목록 상자의 overflow(hidden 또는 가로 스크롤)가 번진 그림자를 자르는 것일 가능성이 높으니, 목록 상자에 그림자가 번질 만큼의 padding(예: 24px)을 주어서 그림자가 온전히 보이게 고쳐 줘. 잘라 낼 필요가 없는 상자라면 overflow: visible로 푸는 것도 알려 주고, 카드 목록을 밀 때 첫·끝 카드가 가장자리에서 어색하게 멈추지 않는지 확인해 줘.

내 화면에서 도움말 팝업에 z-index: 999를 줬는데도 아래 '주문 요약' 카드 뒤에 깔려 두 번째 줄이 가려져. 원인은 팝업이 든 위 카드가 position: relative; z-index: 1로 자기만의 층을 만들었고 아래 카드는 z-index: 2라서 위 카드 전체가 밀리는 것일 가능성이 높으니, 팝업이 든 카드의 z-index를 아래 카드보다 높게 올리거나 팝업을 body 바로 아래로 옮겨 그리는 방식으로 고쳐 줘. 다른 카드가 팝업을 가리지 않는지, 팝업이 닫혔을 때 순서가 어색해지지 않는지도 확인해 줘.

내 화면에서 '구매하기' 버튼이 멀쩡해 보이는데 눌러도 아무 반응이 없어. 개발자 도구로 보니 버튼 위에 투명한 덮개 요소가 놓여 있어서 클릭을 대신 받는 것 같아. 원인은 이 덮개가 클릭을 가로채는 것일 가능성이 높으니, 필요 없는 덮개라면 지우고 장식으로 필요한 것이라면 pointer-events: none;을 주어서 클릭이 버튼까지 통과하게 고쳐 줘. 덮개가 정말 닫힌 상태에서만 사라지는지, 키보드로 버튼을 누르는 것도 되는지 확인해 줘.

내 화면에서 도움말 페이지의 목차 '교환·환불'을 누르면 해당 제목이 위에 고정된 헤더(높이 36px) 뒤로 들어가 안 보여. 원인은 앵커 이동이 제목을 화면 맨 위에 붙이기 때문일 가능성이 높으니, 본문 제목(h2·h3)에 scroll-margin-top을 헤더 높이에 여유를 더해 주어서 이동 뒤에도 제목이 헤더 아래에 보이게 고쳐 줘. 헤더 높이가 모바일에서 달라지면 같이 달라지게 하고, 주소창에 #제목이 붙은 채로 열어도 같은지 확인해 줘.

내 화면에서 '내 계정' 드롭다운을 열면 메뉴 뒤로 아래 본문 글자가 비쳐서 두 글자가 겹쳐 보여. 원인은 드롭다운 상자에 배경색이 없어 투명한 것일 가능성이 높으니, 드롭다운에 background: #fff; 같은 불투명한 배경색을 직접 정해 주어서 뒤의 글자가 가려지게 고쳐 줘. 색 변수를 쓰고 있다면 이름이 정의돼 있는지, 다크 모드에서도 배경이 비지 않는지, 같은 방식으로 투명한 고정 헤더가 더 있는지 확인해 줘.

내 화면에서 상품 카드의 NEW 배지에 position: absolute; top: 6px; right: 6px;를 줬는데, 카드 오른쪽 위가 아니라 화면 맨 위 오른쪽 모서리에 붙어 있어. 원인은 배지를 담은 카드에 position이 없어서 더 바깥 상자가 기준이 된 것일 가능성이 높으니, 카드에 position: relative;를 주어서 배지가 카드 모서리에 붙게 고쳐 줘. 카드가 여러 개인 목록에서도 각 카드에 붙는지, 배지가 카드의 overflow: hidden에 잘리지 않는지 확인해 줘.

내 화면에서 노란 배경 상자에 사진을 꼭 맞게 넣었는데 사진 아래에 몇 픽셀 정도 노란 줄이 남아. 원인은 이미지가 글자처럼 줄 안에 놓여 기준선 아래 공간이 생기는 것일 가능성이 높으니, 이미지에 display: block;을 주어서 아래 틈이 없어지게 고쳐 줘. 이미지를 여러 장 위아래로 이었을 때도 틈 없이 붙는지, 이미지 아래 글이 있는 카드에서 간격이 의도대로 남는지 확인해 줘.

내 화면에서 회색 테두리 상자 안에 float: left로 카드 두 개를 넣었는데 상자는 테두리 선 하나처럼 납작하고 카드가 상자 밖으로 나와 아래 문단과 겹쳐 보여. 원인은 안의 카드가 float이라 상자가 높이를 계산하지 못하는 것일 가능성이 높으니, 상자에 display: flow-root;를 주어서 상자가 카드 높이만큼 늘어나게 고쳐 줘. 가능하면 float 대신 flex나 grid로 바꾸는 것도 제안하고, 카드가 줄을 바꿔 여러 줄이 되어도 상자가 감싸는지 확인해 줘.

내 화면에서 배경색이 있는 주문 목록 상자 안에서 항목 사이 간격은 12px로 맞는데, 첫 항목 위 여백보다 마지막 항목 아래 여백이 12px 더 커 보여. 원인은 항목마다 margin-bottom: 12px을 줘서 마지막 항목도 아래 여백을 가져가는 것일 가능성이 높으니, 목록 부모를 display: flex; flex-direction: column; gap: 12px;로 바꾸고 항목의 margin은 지워서 여백이 항목 사이에만 생기게 고쳐 줘. 목록이 한 줄 격자(grid)일 때도 같은지, 항목이 하나뿐일 때 여백이 이상하지 않은지 확인해 줘.

내 화면에서 하늘색 배경의 헤더 상자 안 제목 h3에 margin-top: 22px을 줬는데, 제목이 헤더 안에서 내려오지 않고 헤더 상자 전체가 22px 아래로 밀려. 헤더 배경은 제목 둘레에 딱 붙어 있어. 원인은 헤더에 padding이나 border가 없어서 제목의 위 여백이 헤더 바깥으로 겹쳐 나가는 것(마진 겹침)일 가능성이 높으니, 헤더에 display: flow-root;를 주어서 여백이 헤더 안에 머물게 고쳐 줘. 아래쪽 여백도 같은지, 헤더에 padding을 줘도 되는지 알려 줘.

내 화면에서 '신상품·인기·할인·기획전' 태그 줄의 간격이 사이마다 달라 어떤 곳은 붙어 있고 어떤 곳은 넓게 벌어져. 원인은 태그마다 margin-left·margin-right를 따로 준 것일 가능성이 높으니, 태그의 margin을 모두 지우고 태그를 담은 부모에 display: flex; flex-wrap: wrap; gap: 8px;를 주어서 간격이 한 값으로 같아지게 고쳐 줘. 태그를 추가해 줄이 바뀌어도 줄 사이 간격이 같은지, 390px 폭에서도 확인해 줘.

내 화면에서 파란 '무료 배송' 배지가 글자에 딱 붙어 답답해서 margin: 14px 24px을 줬는데, 파란 배경 크기는 그대로고 주변 빈틈만 커졌어. 원인은 바깥 여백(margin)을 늘린 것일 가능성이 높으니, margin을 지우고 padding: 10px 20px;으로 바꿔서 파란 배경 안쪽이 넓어지게 고쳐 줘. 배지 옆 글자와의 간격은 부모의 gap으로 따로 정하고, 글자가 길어져 줄이 바뀔 때도 배경이 어색하지 않은지 확인해 줘.

내 화면에서 좁은 안내 카드의 한글이 '배송비' 같은 단어 중간에서 줄이 바뀌어 읽기 불편해. 원인은 한글이 글자 사이에서도 줄바꿈이 허용되는 기본값일 가능성이 높으니, 한글 본문에 word-break: keep-all; overflow-wrap: anywhere;를 주어서 단어 단위로 줄이 바뀌고 아주 긴 낱말만 예외로 끊기게 고쳐 줘. 영어 주소 같은 긴 글자가 상자를 넘지 않는지와 390px 폭에서 어색한 줄바꿈이 없는지 확인해 줘.

내 화면에서 상품 카드의 소개글이 길어서 카드마다 높이가 달라. 소개글을 두 줄까지만 보여 주고 넘치는 글은 끝에 …이 붙게 바꿔 줘. display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;으로 처리하고, 글이 두 줄보다 짧을 때는 그대로 보이게 해 줘. 전체 글을 보는 방법(카드를 누르면 펼치기)도 필요한지 알려 주고, 글 전체는 화면 읽기 프로그램에서도 읽히는지 확인해 줘.

내 화면에서 남은 시간을 보여 주는 타이머 숫자가 바뀔 때마다 옆의 '남음' 글자가 좌우로 흔들려. 원인은 글꼴의 숫자 폭이 숫자마다 달라서일 가능성이 높으니, 숫자가 들어간 요소(타이머·점수·수량·가격)에 font-variant-numeric: tabular-nums;를 주어서 모든 숫자가 같은 폭으로 그려지게 고쳐 줘. 쓰는 글꼴이 이 기능을 지원하는지 확인하고, 지원하지 않으면 대안을 알려 줘.

내 화면에서 알림 목록 한 줄이 '아바타 + 제목 + 시간(3분 전)'인데, 제목이 길면 …이 안 나오고 글자가 알림 상자 끝에서 뚝 잘리면서 '3분 전'이 상자 밖으로 밀려 안 보여. 원인은 한 줄 말줄임 설정이 빠졌고 flex 칸의 min-width가 자동이어서 제목 칸이 글자 폭만큼 늘어나는 것일 가능성이 높으니, 제목에 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;을 모두 주어서 제목만 …으로 줄고 시간은 항상 보이게 고쳐 줘. 제목이 짧을 때는 그대로 보이는지, 줄여진 제목의 전체 글을 마우스를 올리면 볼 수 있게(title 속성) 할 필요가 있는지 알려 줘.

내 화면에서 안내 카드의 본문과 제목이 line-height: 1이라 줄이 서로 닿을 듯이 빽빽해서 읽기 힘들어. 원인은 줄 높이가 글자 크기와 같은 것일 가능성이 높으니, 본문에 line-height: 1.6;, 두 줄이 되는 제목에 line-height: 1.25;를 단위 없는 숫자로 주어서 줄 사이가 여유 있게 고쳐 줘. 글자 크기를 키우거나 줄여도 비율이 유지되는지, 카드 높이가 늘어나 레이아웃이 깨지지 않는지 확인해 줘.

내 화면에서 font-family: "MomoBrand";만 적어 뒀더니 이 글꼴이 없는 폰과 PC에서는 명조체 같은 기본 글꼴로 나와. 원인은 후보가 하나뿐이라 글꼴이 없으면 기기 기본 글꼴로 떨어지는 것일 가능성이 높으니, font-family를 "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;처럼 웹 글꼴 뒤에 여러 기기의 기본 한글 글꼴을 순서대로 적고 맨 끝에 sans-serif를 두어서 어디서나 고딕으로 나오게 고쳐 줘. 쓰는 글꼴 파일을 @font-face로 싣고 있는지, 라이선스상 웹에 써도 되는지도 확인해 줘.

내 화면에서 관리자 주문 목록 화면이 오른쪽에 스크롤 막대가 두 개(바깥 화면 하나, 안쪽 목록 하나)로 나와. 원인은 머리글 아래 목록 상자에 height: 100vh를 줘서 머리글 높이만큼 화면을 넘는 것일 가능성이 높으니, 바깥 틀을 height: 100dvh; display: flex; flex-direction: column; overflow: hidden;으로 하고 목록 상자는 flex: 1; min-height: 0; overflow: auto;로 바꿔서 스크롤이 목록 한 곳에만 생기게 고쳐 줘. 머리글 높이가 바뀌어도 맞는지, 폰 가로·세로 모두에서 바깥 스크롤이 생기지 않는지 확인해 줘.

내 화면에서 장바구니 팝업 안의 목록을 끝까지 내리고 더 내리면 팝업 뒤의 상품 목록 화면이 같이 스크롤돼. 원인은 팝업 목록이 끝에 닿으면 스크롤 움직임이 바깥 화면으로 넘어가는 것일 가능성이 높으니, 팝업 목록에 overscroll-behavior: contain;을 주고 팝업이 열려 있는 동안 body에 overflow: hidden;을 걸어 뒤 화면이 움직이지 않게 고쳐 줘. 팝업을 닫으면 잠금과 원래 스크롤 위치가 그대로 돌아오는지, 아이폰에서도 뒤 화면이 안 움직이는지 확인해 줘.

내 화면에서 장바구니 팝업(높이 280px)을 머리·목록·결제 버튼으로 나눴는데, 목록이 길어도 스크롤이 안 생기고 결제 버튼이 팝업 아래로 밀려 안 보여. 원인은 flex 칸이 내용 높이만큼 늘어나서일 가능성이 높으니, 목록을 감싼 칸에 min-height: 0;을 주고 안의 목록에 height: 100%; overflow: auto;를 주어서 목록 안에서만 스크롤되고 결제 버튼은 늘 보이게 고쳐 줘. 목록이 짧을 때도 팝업이 어색하지 않은지, 폰의 작은 화면에서도 같은지 확인해 줘.

내 화면에서 짧은 '소개' 페이지에서 긴 '상품 목록' 페이지로 이동하면 제목과 상단 메뉴가 왼쪽으로 15px쯤 밀렸다가 돌아와서 덜컹거려. 원인은 긴 페이지에만 스크롤 막대가 생겨 그만큼 가로 공간이 줄어드는 것일 가능성이 높으니, html에 scrollbar-gutter: stable;을 주어서 막대가 없을 때도 자리를 비워 두게 고쳐 줘. 가운데 정렬한 요소가 양쪽 여백이 달라 보이지 않는지, 모달을 열 때 body를 잠가도 움직이지 않는지 확인해 줘.

내 화면에서 상담 채팅창을 열면 가장 오래된 메시지가 보이고 방금 받은 메시지는 아래에 숨어 있어. 새 메시지가 와도 화면이 안 내려가. 원인은 스크롤 상자가 기본으로 맨 위에서 시작하기 때문일 가능성이 높으니, 채팅창을 열 때와 새 메시지가 붙은 뒤에 list.scrollTop = list.scrollHeight;로 맨 아래로 옮기고, 사용자가 위의 옛 메시지를 읽는 중이면 억지로 내리지 않고 '새 메시지' 버튼만 보이게 고쳐 줘. 이미지가 늦게 불러와져 높이가 늘어날 때도 맨 아래가 유지되는지 확인해 줘.

내 화면에서 주문 목록의 머리글 줄에 position: sticky를 줬는데 스크롤하면 그냥 같이 올라가서 사라져. 원인은 머리글에 top 값이 없고 머리글을 감싼 조상에 overflow: hidden이 있어서 sticky의 기준이 바뀐 것일 가능성이 높으니, 머리글에 top: 0;을 주고 조상의 overflow: hidden은 visible로 풀어서 목록을 스크롤하는 동안 맨 위에 붙게 고쳐 줘. 조상의 overflow를 풀 수 없다면 스크롤하는 상자를 sticky의 부모로 옮기는 방법도 알려 주고, 고정 헤더 아래에 둘 때 top 값이 맞는지 확인해 줘.

내 화면에서 주문 페이지 맨 아래의 '결제하기' 버튼이 아이폰 사파리에서 아랫부분이 주소창과 아래 막대 뒤로 들어가 가려져. 원인은 전체 높이를 height: 100vh로 잡은 것일 가능성이 높으니, min-height: 100vh 다음 줄에 min-height: 100dvh;를 덧붙이고 아래 여백에 padding-bottom: env(safe-area-inset-bottom);을 주어서 버튼이 항상 보이는 높이 안에 놓이게 고쳐 줘. viewport 메타 태그에 viewport-fit=cover를 넣어야 하는지도 확인하고, 주소창이 접히고 펴질 때 버튼 위치가 튀지 않는지 알려 줘.

내 화면에서 상품 목록의 '좋아요(하트)'와 '삭제(✕)' 아이콘 버튼이 24px로 작고 2px 간격으로 붙어 있어서, 폰에서 하트를 누르려다 삭제가 눌려. 원인은 누르는 영역이 손가락보다 작은 것일 가능성이 높으니, 아이콘 크기는 그대로 두고 두 버튼에 min-width: 44px; min-height: 44px;와 display: inline-grid; place-items: center;를 주어서 누르는 영역을 넓혀 줘. 버튼 사이 간격이 너무 벌어지지 않는지와 390px 폭에서 한 줄에 들어가는지 확인해 줘.

내 화면에서 로그인 입력칸을 아이폰 사파리에서 누르면 화면이 확대되고 옆으로 밀려. 원인은 입력칸 글자가 14px로 16px보다 작아서일 가능성이 높으니, input·select·textarea의 font-size를 16px 이상으로 올려서 확대가 일어나지 않게 고쳐 줘. 확대를 막으려고 viewport에 maximum-scale=1이나 user-scalable=no를 넣지는 말고, 글자가 커져도 입력칸이 한 줄에 맞는지와 placeholder 크기가 어색하지 않은지 확인해 줘.

내 화면에서 PC에서는 괜찮은데 390px 폰 폭에서는 페이지에 가로 스크롤이 생기고 오른쪽에 빈 공간이 보여. 원인은 폭을 픽셀로 고정한 요소가 화면보다 넓은 것일 가능성이 높으니, 먼저 개발자 도구 콘솔에서 화면 오른쪽 끝(innerWidth)을 넘는 요소를 찾아 알려 주고, 찾은 요소(배너·이미지·표)에 max-width: 100%;를 주어서 화면 폭 안에 들어오게 고쳐 줘. body에 overflow-x: hidden을 덮어씌워 가리기만 하는 방식은 쓰지 말고, 320px부터 1440px까지 가로 스크롤이 없는지 확인해 줘.

내 화면에서 상단 메뉴의 '상품'을 마우스로 올리면 하위 메뉴가 열리는데, 아이폰에서는 '상품'을 한 번 누르면 메뉴만 열리고 이동은 안 되어 두 번 눌러야 해. 원인은 폰이 첫 터치를 마우스 올리기(hover)로 쓰는 것일 가능성이 높으니, 올리면 열리는 규칙을 @media (hover: hover) 안으로 옮기고, 하위 메뉴는 '▾' 버튼을 눌러 열리게(aria-expanded 포함) 따로 만들어서 '상품' 글자는 한 번에 이동하게 고쳐 줘. 키보드로도 메뉴가 열리고 닫히는지, 메뉴 밖을 누르면 닫히는지 확인해 줘.

내 화면에서 폰을 다크 모드로 바꾸면 '배송 안내' 카드의 글자가 어두운 바탕에 묻혀 안 보여. 원인은 카드 글자색은 #1e293b로 고정했는데 배경은 시스템 색(Canvas)에 맡겨 다크 모드에서 어두워졌기 때문일 가능성이 높으니, 카드의 글자색과 배경색을 둘 다 시스템 색(background: Canvas; color: CanvasText;)으로 짝지어 주고 :root에 color-scheme: light dark;를 넣어서 두 모드에서 모두 읽히게 고쳐 줘. 링크·테두리·그림자 색도 다크 모드에서 어울리는지, 글자와 배경의 대비가 4.5:1 이상인지 확인해 줘.

내 화면에서 상품 카드의 배송 날짜와 안내 문구가 연한 회색(#9ca3af)이라 흰 바탕에서 거의 안 보인다는 말을 들었어. 원인은 글자색과 바탕의 대비가 2.5:1쯤으로 기준(4.5:1)에 못 미치는 것일 가능성이 높으니, 보조 글씨 색을 #4b5563처럼 4.5:1 이상이 되는 색으로 바꿔 줘. 다른 곳의 연한 글씨와 입력칸 안내(placeholder)도 같은 기준으로 찾아 알려 주고, 비활성 버튼처럼 일부러 연하게 둔 곳은 예외로 남겨도 되는지 설명해 줘.

내 화면에서 '구매하기' 파란 버튼이 흰 글자만 있고 버튼 몸통이 하얗게 비어 흰 바탕에서는 글자도 안 보여. 원인은 background에 쓴 색 변수 이름이 오타이거나 배경색을 따로 지정하지 않은 것일 가능성이 높으니, 버튼에 background: var(--brand-color, #0369a1);처럼 대체 값이 있는 배경색을 직접 적고 변수 이름이 정의된 것과 같은지 확인해서 고쳐 줘. appearance: none을 쓴 버튼이 더 있는지 찾아서 모두 배경·테두리·글자색이 빠짐없이 지정됐는지 알려 줘.

내 화면에서 페이지를 새로고침하면 처음에 기본 글꼴과 이미지 없는 모습이 보였다가 웹 글꼴과 이미지가 도착하면 제목이 커지고 글이 아래로 밀려. 원인은 웹 글꼴이 늦게 도착하고 이미지 자리를 미리 잡지 않은 것일 가능성이 높으니, @font-face에 font-display: swap;을 주고 대신 쓸 글꼴에 size-adjust를 맞춰 글자 크기 차이를 줄이고, 대표 이미지에는 aspect-ratio나 width·height를 정해 자리를 미리 잡아 줘. 가장 중요한 글꼴은 preload로 먼저 부르는 것이 알맞은지, 느린 3G 환경으로 느리게 열어도 글이 밀리지 않는지 확인해 줘.

내 화면에서 상품 카드의 사진 자리에 깨진 그림 아이콘(엑박)과 alt 글자만 나오고, 사진 높이가 사라져 아래 글이 위로 끌려 올라와. 원인은 이미지 주소가 틀리거나 파일이 없는 것일 가능성이 높으니, 먼저 개발자 도구 네트워크 탭에서 이미지 요청이 404인지 보고 올바른 경로와 확장자로 고쳐 줘. 그와 함께 그림이 안 와도 자리가 무너지지 않도록 이미지에 width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e2e8f0;를 주고, alt에 '모모 머그컵 사진'처럼 무엇인지 적어 줘. 이미지 불러오기에 실패했을 때 대신 보여 줄 그림이 필요한지도 알려 줘.