이 글은 이미지 압축 도구처럼 입력, 옵션, 결과 목록이 한 화면에 같이 있는 UI를 기준으로 작성했습니다. 실제 구현에서는 컴포넌트 구조뿐 아니라 작은 화면에서 텍스트와 버튼이 겹치지 않는지 확인해야 합니다.
문제: 결과 카드가 늘어나면 레이아웃이 먼저 무너진다
파일 도구 화면은 처음에는 단순합니다. 파일 선택 영역, 품질 옵션, 실행 버튼 정도만 보입니다. 하지만 사용자가 여러 장을 처리하면 결과 카드가 추가되고, 각 카드에는 이미지 미리보기, 파일명, 원본 크기, 출력 크기, 감소율, 다운로드 버튼이 들어갑니다. 작은 화면에서는 이 정보들이 쉽게 겹치거나 버튼 안의 글자가 잘릴 수 있습니다.
그래서 결과 카드는 고정 폭보다 반응형 그리드에 맡기고, 긴 파일명은 줄바꿈 또는 말줄임 정책을 정해야 합니다. 이미지 미리보기는 비율을 고정해 카드 높이가 매번 크게 흔들리지 않게 만드는 편이 좋습니다.
옵션 영역은 한 줄에 억지로 넣지 않는다
품질값, 최대 너비, 최대 높이, 포맷 선택을 모두 한 줄에 넣으면 데스크톱에서는 깔끔해 보일 수 있습니다. 하지만 모바일에서는 각 입력이 너무 좁아지고, 숫자 입력과 라벨이 분리되어 보입니다. 옵션은 화면 폭에 따라 1열 또는 2열로 자연스럽게 내려가야 합니다.
.option-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}이런 구조는 옵션이 추가되어도 비교적 안정적입니다. 새로운 체크박스나 선택지가 생겨도 전체 레이아웃을 다시 짜지 않아도 됩니다.
결과 정보의 우선순위를 정한다
작은 화면에서 모든 정보를 같은 크기로 보여 주면 사용자는 중요한 값을 찾기 어렵습니다. 이미지 압축 결과에서 가장 중요한 정보는 파일명, 출력 크기, 다운로드 버튼입니다. 원본 크기와 감소율은 보조 정보로 작게 둘 수 있습니다. WebP 변환 버튼은 이미 변환된 경우 다운로드 버튼으로 바뀌거나 비활성 상태가 명확해야 합니다.
카드 안에 카드처럼 보이는 중첩 UI를 많이 넣는 것도 피해야 합니다. 결과 하나는 하나의 카드로 충분하며, 그 안에서는 라벨과 값의 간격을 일정하게 유지하는 편이 읽기 쉽습니다.
모바일 점검 체크리스트
- 320px 너비에서도 파일 선택 버튼과 실행 버튼의 글자가 잘리지 않는지 확인합니다.
- 긴 한글 파일명과 공백이 포함된 파일명이 카드 밖으로 나가지 않는지 확인합니다.
- 결과 카드가 1열로 내려왔을 때 미리보기와 다운로드 버튼 순서가 자연스러운지 확인합니다.
- 옵션 입력의 라벨과 값이 서로 떨어져 보이지 않는지 확인합니다.
- 처리 중 진행 메시지가 다음 콘텐츠를 덮지 않는지 확인합니다.
데스크톱에서는 밀도를 높인다
데스크톱에서는 결과 카드를 여러 열로 배치해 한 번에 비교할 수 있게 하는 것이 좋습니다. 다만 카드 폭이 너무 좁아지면 파일명과 버튼이 다시 깨질 수 있으므로 최소 폭을 둡니다. 압축 도구는 반복 작업에 쓰일 가능성이 높기 때문에, 화면을 화려하게 만드는 것보다 스캔하기 쉬운 정보 구조가 더 중요합니다.
