모바일 비교보드 카드 정렬

비교보드의 모바일 뷰에서 카드 셀 정렬이 제대로 되지 않고, 난이도 뱃지가 화면 밖으로 튀어나가던 문제를 잡았다. CSS와 레이아웃 컴포넌트를 조정해서 제한된 모바일 화면 내에서 콘텐츠가 안정적으로 정렬되도록 고쳤다.

좁은 화면에서 터지는 레이아웃

비교보드는 여러 아이템을 카드 형태로 표시하고, 각 카드의 셀에 정보를 담는 UI다. 데스크톱에선 문제없이 펼쳐지지만, 모바일로 가면 화면 폭이 극도로 제한되면서 콘텐츠 배치가 무너진다.

문제는 두 가지였다. 첫째, 카드 셀의 텍스트나 요소들이 설정한 좌측 정렬을 무시하고 뒤틀려서 나타났다. 둘째, 난이도 뱃지처럼 고정된 폭을 가진 요소가 부모 컨테이너 제약을 무시하고 넘어섰다. 특히 두 번째 문제는 사용자가 옆으로 스크롤해야 할 정도로 UX를 해쳤다.

모바일은 데스크톱처럼 "여유 공간에 대충 어댑트"할 수 없다. 부모 폭이 정해지면 그 안에서 모든 자식 요소가 맞춰져야 한다. 이 기본 원칙을 어기는 순간 레이아웃이 깨진다.

CSS와 레이아웃 제약 재설계

모바일에서 이런 버그는 보통 부모-자식 컨테이너의 제약이 불일치하거나, alignment 선언과 overflow 처리가 따로 논다는 데서 비롯된다.

내가 한 수정은 이런 방향이었다:

• 부모 컨테이너 재정의 (src/layouts/Base.astro): 카드 셀 부모의 box-sizing 과 width 를 명시적으로 설정해서 자식이 벗어나는 여지를 없앴다
• CSS 제약 강화 (public/styles.css): 난이도 뱃지에 max-width 제약을 주고, 필요하면 text-overflow: ellipsis 로 긴 콘텐츠를 줄였다
• Alignment 재확인: text-align: left 선언이 제대로 작동하는지 부모의 display, flex-direction 과 함께 재검토했다

핵심은 "자식 요소가 콘텐츠 크기만큼 무한정 팽창하지 않도록" 설계하는 것. 모바일에선 이게 선택이 아니라 필수다.

반응형 UI 설계의 일반적 패턴

비교하기 같은 복합 UI는 모바일에서 항상 같은 문제를 반복한다. 내 경험상 다음 체크리스트가 도움이 된다:

비교보드는 각 행(row)의 높이가 콘텐츠에 따라 달라지고, 뱃지처럼 보조 요소가 섞여 있어서 더 복잡하다. 한 셀이 튀어나가면 전체 정렬이 꼬인다.

팀 차원의 배운 점과 예방법

이 작업을 하면서 팀과 나눈 이야기 중 가장 중요한 건 모바일 우선 설계의 실제 효과다. 데스크톱 먼저 만들고 나중에 모바일을 '줄이는' 방식은 한계가 있다. 모바일의 제약(좁은 폭, 터치 영역, 네트워크)을 먼저 이해하고 거기서 출발하면, 자연스럽게 robust한 구조가 나온다.

둘째로는 반응형 테스트의 현실성. Chrome DevTools의 모바일 뷰 에뮬레이션은 빠르지만, 실제 기기(특히 저사양 안드로이드)에서는 다르게 렌더링될 수 있다. 폰트 엔진, GPU 가속, 터치 오차 등이 달라서다. 정기적으로 실제 기기에서 검증하는 습관이 이런 버그를 줄인다.

셋째, 프로젝트 초기에 CSS 기본 규칙을 정의하는 것의 가치다. 모든 요소에 box-sizing: border-box 를 일관되게 적용하고, 부모 컨테이너의 기본 제약 패턴을 정해두면, 이런 류의 버그를 많이 예방할 수 있다.

이번 수정은 작은 CSS 조정처럼 보이지만, "좁은 화면에서 많은 콘텐츠를 어떻게 안정적으로 담을 것인가"라는 근본 질문에 대한 작은 답이다. 같은 패턴의 버그가 또 나올 때를 대비해, 이 해결책을 팀 위키나 설계 문서에 정리해두면 좋겠다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.