이미지·텍스트 도구 개편 기록: 입력 기준과 결과 설명 맞추기

이미지·텍스트 도구의 디자인을 개편했던 기록을, 입력과 결과를 어떻게 연결해 설명할지에 초점을 맞춰 보강했습니다. 카드 모양이나 버튼 배치가 같아도 각 도구의 결과 의미는 다릅니다. 글자 수는 무엇을 한 글자로 세는지, 이미지 품질은 파일 크기를 얼마나 줄인다는 뜻인지부터 분명해야 합니다.

기능별 파일과 설명을 함께 찾기

현재 저장소에서는 템플릿, 브라우저 스크립트, 언어별 문구를 나눠 관리합니다. 대표적인 확인 위치는 다음과 같습니다.

화면 문구만 수정하면 계산 함수와 설명이 달라질 수 있습니다. 그래서 기능을 확인할 때는 입력 요소에서 시작해 처리 함수, 결과 요소, 사용 가이드 순서로 대조합니다.

글자 수 도구: 숫자를 보여주는 것과 기준을 알려주는 것

현재 구현은 문자열의 length, 공백 제거 후 길이, 정규식으로 찾은 단어, TextEncoder가 만든 UTF-8 바이트 수를 각각 표시합니다. 서로 다른 기준이므로 결과가 같을 필요는 없습니다.

앞선 도구 검증에서 같은 입력으로 확인한 결과는 다음과 같습니다.

두 번째 예시에서 이모지는 화면에 한 그림으로 보이지만 현재 문자열 길이 계산에서는 2로 셉니다. JavaScript의 length는 UTF-16 코드 단위 수이기 때문입니다. 눈에 보이는 글자 덩어리 수를 요구하는 서비스와는 결과가 다를 수 있으므로 입력을 보낼 대상의 기준도 확인해야 합니다. MDN 문자열 length 설명

이 차이를 오류처럼 숨기기보다 예시와 함께 설명하는 것이 결과 화면의 역할입니다. 글자 수 계산기에서 같은 입력을 넣어 비교할 수 있습니다.

이미지 도구: 품질 숫자는 절감률이 아닙니다

현재 이미지 압축 코드는 파일을 읽고 이미지로 디코딩한 다음 Canvas에 그려 toBlob()으로 새 파일을 만듭니다. 최대 너비가 원본보다 작으면 비율을 유지해 높이를 계산합니다.

예를 들어 2400×1600 이미지의 최대 너비를 1200으로 설정하면 코드상 계산 크기는 1200×800입니다. 이 값은 크기 계산 예시이며, 실제 압축 파일을 만들어 측정한 용량이나 성능 수치가 아닙니다.

품질 82는 JPEG·WebP 인코더에 넘기는 0.82 값에 해당합니다. 파일을 82% 줄인다는 의미가 아닙니다. 현재 코드는 PNG 출력에는 이 품질값을 넘기지 않습니다. 품질 인수의 적용 범위와 Blob 생성은 MDN toBlob 문서에서 확인할 수 있습니다.

성공 화면에도 예외를 보여주기

투명 PNG를 JPEG로 내보내거나 투명도 유지 조건을 충족하지 못하면 현재 코드가 흰 배경을 채웁니다. 또한 새 파일이 원본보다 클 때는 결과 메타에 ‘증가’라고 표시합니다. ‘압축 완료’라는 말만 보고 결과가 언제나 작아졌다고 오해하지 않도록 입력·출력 용량과 형식을 함께 보여주는 이유입니다.

위 이미지는 이전 개편의 기록입니다. 최신 구현의 용량 절감률을 입증하는 전후 측정 이미지로 사용하지 않습니다.

반복해서 적용할 점검 순서

1. 정상 입력 하나를 정하고 계산 또는 변환 기준을 적습니다.
2. 같은 입력에서 실제 화면의 숫자·형식·다운로드 결과를 기록합니다.
3. 빈 입력, 지원하지 않는 형식, 경계값일 때 안내를 확인합니다.
4. 설명의 예시가 현재 코드와 맞는지 비교합니다.
5. 모바일에서 결과와 예외 안내가 함께 보이는지 확인합니다.

이미지 도구의 실제 파일 크기·손상 파일·대용량 처리 검증은 별도 작업으로 남아 있습니다. 이번 기록은 확인된 처리 흐름과 기존 글자 수 실측을 구분해 정리한 것입니다. 이미지 압축 도구의 결과 파일을 확인할 때도 이 구분을 적용할 수 있습니다.

여러 번 실행한 결과를 관리하는 방법은 랜덤 추첨의 후보와 기록 관리에서 이어집니다.