이 글은 img-compressor처럼 파일 입력, 옵션, 결과 목록이 한 화면에 같이 있는 UI를 기준으로 작성했습니다. 이런 화면은 작은 컴포넌트 구조뿐 아니라, 작은 화면에서 텍스트와 버튼이 겹치지 않는지, 마우스 없이도 끝까지 조작할 수 있는지를 함께 확인해야 합니다.

카드가 늘어나는 순간부터 레이아웃이 흔들린다

파일 도구 화면은 처음에는 단순합니다. 파일 선택 영역, 품질 옵션, 실행 버튼 정도만 보입니다. 하지만 사용자가 여러 장을 처리하면 결과 카드가 추가되고, 각 카드에는 이미지 미리보기, 파일명, 원본 크기, 출력 크기, 감소율, 다운로드 버튼이 들어갑니다. 작은 화면에서는 이 정보들이 쉽게 겹치거나 버튼 안의 글자가 잘릴 수 있습니다. 그래서 결과 카드는 고정 폭보다 반응형 그리드에 맡기고, 긴 파일명은 줄바꿈 또는 말줄임 정책을 정해야 합니다.

옵션 영역은 한 줄에 억지로 넣지 않는다

품질값, 최대 너비, 최대 높이, 포맷 선택을 모두 한 줄에 넣으면 데스크톱에서는 깔끔해 보일 수 있습니다. 하지만 모바일에서는 각 입력이 너무 좁아지고, 숫자 입력과 라벨이 분리되어 보입니다. 옵션은 화면 폭에 따라 1열 또는 2열로 자연스럽게 내려가야 합니다.

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

이런 구조는 옵션이 추가되어도 비교적 안정적입니다. 새로운 체크박스나 선택지가 생겨도 전체 레이아웃을 다시 짜지 않아도 됩니다. 작은 화면에서 모든 정보를 같은 크기로 보여 주면 사용자는 중요한 값을 찾기 어려우므로, 파일명·출력 크기·다운로드 버튼을 우선하고 원본 크기와 감소율은 보조 정보로 작게 두는 편이 좋습니다.

파일 선택 영역은 버튼처럼 보여도 입력이어야 한다

드래그 앤 드롭 영역을 크게 만들면 사용자는 파일을 끌어다 놓을 수 있습니다. 하지만 키보드 사용자에게는 실제 input type="file"에 접근할 수 있어야 합니다. 시각적으로 커스텀 버튼을 만들더라도 라벨과 입력이 연결되어 있어야 하고, 포커스 상태가 보여야 합니다.

<label htmlFor="image-files">이미지 선택</label>
<input id="image-files" type="file" accept="image/*" multiple />

입력을 완전히 숨기고 클릭 이벤트만 남기는 방식은 조심해야 합니다. 스크린리더가 어떤 파일을 선택해야 하는지 알 수 없거나, 키보드로 조작하기 어려울 수 있습니다.

처리 중 메시지는 상태 변화로 전달한다

이미지를 압축하는 동안 화면에는 진행 상태가 보입니다. 이 정보가 시각적으로만 보이면 보조기술 사용자는 작업이 시작됐는지 알기 어렵습니다. 진행 메시지 영역에 적절한 라이브 영역을 두거나, 버튼 상태와 텍스트를 함께 바꾸는 방식이 필요합니다. 예를 들어 “3개 중 2번째 파일 압축 중” 같은 문구는 단순한 장식이 아니라 상태 정보입니다.

아이콘만 있는 버튼은 이름이 필요하다

결과 카드에는 다운로드, 삭제, WebP 변환 같은 버튼이 들어갈 수 있습니다. 아이콘만 표시하는 버튼이라면 aria-label 또는 보이는 텍스트로 목적을 제공해야 합니다. 특히 여러 카드가 반복될 때는 “다운로드”만으로 부족할 수 있고, 파일명을 함께 포함하면 더 명확합니다.

<button aria-label="profile.png 압축 결과 다운로드">
  다운로드
</button>

제일 좁은 화면부터, 그리고 키보드로 확인한 것

레이아웃 점검은 가장 좁은 화면부터 시작하는 편이 효율적이었습니다. 320px 너비에서 파일 선택 버튼과 실행 버튼의 글자가 잘리는지, 긴 한글 파일명과 공백이 포함된 이름이 카드 밖으로 튀어나오는지를 먼저 봅니다. 결과 카드가 1열로 내려왔을 때 미리보기와 다운로드 버튼의 순서가 어색하지 않은지도 같은 화면에서 확인할 수 있습니다.

접근성 점검은 마우스를 쓰지 않고 키보드만으로 파일 선택부터 압축 실행, 다운로드, 삭제까지 끝까지 가 보는 방식으로 했습니다. 이 과정에서 파일 입력의 라벨이 실제 입력과 제대로 연결되어 있는지, 처리 중 상태가 시각적인 문구뿐 아니라 버튼의 비활성 상태로도 함께 드러나는지가 드러났습니다. 결과 카드가 여러 개 반복될 때 각 버튼의 이름이 서로 구분되지 않으면 어떤 파일의 다운로드 버튼인지 알 수 없었고, 오류 메시지를 빨간 글자 색으로만 표시했을 때는 색을 구분하지 못하는 환경에서 같은 정보가 전달되지 않는다는 점도 확인했습니다.

이미지 미리보기의 대체 텍스트와 데스크톱 밀도

압축 결과 미리보기는 장식에 가까울 수도 있고, 사용자가 결과를 확인하는 핵심 정보일 수도 있습니다. 파일명을 기반으로 대체 텍스트를 제공하면 어떤 파일의 미리보기인지 구분할 수 있습니다. 다만 압축 품질을 대체 텍스트로 설명할 수는 없으므로, 크기와 감소율 같은 수치는 별도 텍스트로 제공해야 합니다. 데스크톱에서는 결과 카드를 여러 열로 배치해 한 번에 비교할 수 있게 하되, 카드 폭이 너무 좁아지면 파일명과 버튼이 다시 깨질 수 있으므로 최소 폭을 둡니다. 압축 도구는 반복 작업에 쓰일 가능성이 높기 때문에, 화면을 화려하게 만드는 것보다 스캔하기 쉬운 정보 구조가 더 중요합니다.