[DESIGN] 작은 화면 주요 UI 깨짐 대응

[kbh0218]

📝 기능 설명

작은 폰 화면에서 우선적으로 문제가 확인된 주요 UI를 개선합니다.

현재 작은 화면에서는 일부 고정 크기 요소로 인해 폴더 카드가 1열로만 표시되거나,
검사 애니메이션과 결과 아이콘/제목이 과하게 커져 하단 버튼 영역이 화면 밖으로 밀리는 문제가 있습니다.

이번 작업에서는 전체 반응형 개선을 한 번에 진행하기보다,
사용성에 직접 영향을 주는 화면을 우선 대상으로 정리합니다.

📋 구현할 Task

• 작은 화면에서 폴더 카드가 1열로만 배치되지 않도록 카드 너비 또는 그리드 계산 방식을 조정했는가?
• 작은 화면에서도 가능한 경우 폴더 카드가 2열로 표시되는가?
• 링크 검사 중 화면에서 검사 애니메이션 크기를 작은 화면 기준으로 조정했는가?
• 링크 검사 중 화면에서 애니메이션, 제목, 안내 문구, 검사 대상 카드가 화면 안에서 자연스럽게 배치되는가?
• 검사 결과 화면에서 결과 아이콘과 제목 크기/간격을 조정했는가?
• 검사 결과 화면에서 확인/저장 버튼이 작은 화면에서도 화면 하단에 밀려 사라지지 않는가?
• 홈 화면에서 작은 화면 기준으로 과하게 크게 보이는 글씨 크기 또는 섹션 간격을 조정했는가?
• 기존 Typography 토큰은 유지하고, 필요한 화면에서만 compact 스타일을 적용했는가?
• ScrollView 화면의 하단 콘텐츠가 탭바에 가려지지 않도록 bottom padding을 보정했는가?
• 작은 Android 화면에서 우선 적용 대상 화면을 확인했는가?
• 변경 후 기존 라우팅과 스캔/저장/폴더 흐름이 깨지지 않는지 확인했는가?

📎 우선 적용 대상

• 폴더 화면

  • app/(tabs)/(folder)/index.tsx
  • components/ui/folder-card.tsx
  • 문제: 작은 화면에서 폴더 카드가 1줄에 1개씩만 표시되어 오른쪽 여백이 크게 남음
  • 목표: 작은 화면에서도 가능한 경우 2열 그리드 유지

• 링크 검사 중 화면

  • app/(tabs)/(home)/scanning.tsx
  • 문제: 검사 애니메이션이 너무 커서 검사 대상 카드가 화면 안에 보이지 않음
  • 목표: 작은 화면에서 애니메이션 크기와 세로 간격 조정

• 검사 결과 화면

  • app/(tabs)/(home)/scan-result.tsx
  • app/(tabs)/(home)/scan-result-caution.tsx
  • app/(tabs)/(home)/scan-result-block.tsx
  • components/ui/result-status-icon.tsx
  • 문제: 결과 아이콘과 제목이 크게 표시되어 확인/저장 버튼이 아래로 밀려 보이지 않을 수 있음
  • 목표: 작은 화면에서 아이콘 크기, 제목 크기, 상단 간격, 하단 여백 조정

• 홈 화면

  • app/(tabs)/(home)/index.tsx
  • 문제: 작은 화면에서 일부 글씨 크기와 섹션 간격이 크게 느껴짐
  • 목표: 작은 화면 기준으로 제목/섹션 크기 또는 간격 보정

📎 참고한 작은 화면 문제

• 폴더 화면

  • 폴더 카드가 한 줄에 1개씩만 배치되어 오른쪽 여백이 크게 남음
  • 폴더 카드 고정 너비로 인해 화면 비율 대비 카드 배치가 어색해 보임

• 링크 검사 중 화면

  • 애니메이션과 제목 영역은 보이지만, 검사 대상 카드가 화면 안에 보이지 않음
  • 세로 공간이 작은 기기에서는 전체 콘텐츠 배치 또는 간격 조정 필요

• 검사 결과 화면

  • 결과 아이콘과 제목이 크게 표시되어 하단 버튼 영역이 화면 아래로 밀림
  • 판정 이유 카드까지는 보이지만 검사 대상 카드/확인 버튼 영역이 작은 화면에서 잘릴 수 있음

• 홈 화면

  • 작은 화면에서 섹션 제목 크기와 카드 간격이 크게 느껴짐
  • 콘텐츠와 하단 탭바 간 여백 보정 필요

📎 추가 내용

• 이번 이슈에서는 작은 화면에서 시급한 UI 깨짐을 우선 개선합니다.
• 큰 화면 대응, 전체 화면 반응형 기준 정리, 태블릿/웹 레이아웃 대응은 필요 시 별도 이슈로 분리할 수 있습니다.
• 버튼, 아이콘, 탭바처럼 고정 크기가 유지되어야 하는 요소는 사용성을 해치지 않는 선에서만 조정합니다.

스크린샷

• 홈화면

• 폴더 화면

• 링크 추가 화면

• 검사 중 화면

• 검사 결과 화면

참고용으로, 태블릿에서 화면 캡쳐입니다