온라인에서 압축된 코드를 읽기 좋게 정리하세요

형식을 선택해 코드 정렬하기

각 형식의 전용 페이지에서 해당 언어에 필요한 세부 정보를 확인하세요.

• JavaScript 정렬JavaScript
• CSS 정렬CSS
• HTML 정렬HTML
• XML 정렬XML
• JSON 정렬JSON

코드 압축이란 무엇인가요?

코드 압축은 실행에 필요하지 않은 일부 공백, 줄바꿈, 주석 등을 제거해 코드 파일의 크기를 줄이는 작업입니다. JavaScript 압축 도구는 지역 변수 등의 이름을 줄이거나 표현식을 바꾸기도 합니다. 개발자는 읽기 쉬운 소스 파일을 유지하고, 빌드 도구는 배포용으로 작은 파일을 생성합니다. 이러한 변환은 동작을 유지하는 것을 목표로 하지만, 실제 영향은 언어와 압축 도구, 설정에 따라 달라집니다. 따라서 배포 파일의 모습은 작성자가 편집한 소스와 크게 다를 수 있습니다.

파일 크기가 작아지면 전송량을 줄일 수 있으며, 네트워크 압축과 캐시를 함께 사용하면 더욱 유용합니다. 절감량은 원본 파일과 빌드 설정에 따라 달라지므로 일정한 감소율이나 페이지 속도 향상을 보장하지는 않습니다. 대신 가독성이 떨어집니다. 스크립트나 스타일시트가 빽빽한 한 줄로 되어 있으면 조건문을 따라가거나 선택자를 찾기 어렵습니다. 사본을 정렬하면 검토하기 쉬운 구조를 얻으면서 원래 빌드 파일과 배포 설정은 비교용으로 보관할 수 있습니다.

이 코드 정렬 도구는 어떤 일을 하나요?

LFUnminify는 압축된 코드에 읽기 쉬운 서식을 적용합니다. 선택된 포매터에 따라 들여쓰기와 블록 및 연산자 주변 공백, 줄바꿈을 추가합니다. 덕분에 빽빽한 한 줄을 읽지 않고도 중첩 구조를 따라가거나 값을 찾고 함수를 살펴볼 수 있습니다. 모든 문장을 무조건 한 줄씩 배치하는 방식은 아니며, 실제 정렬 범위는 입력 내용과 감지된 언어에 따라 달라집니다.

내부적으로는 대부분의 JavaScript 팀이 이미 사용하는 포매터인 Prettier를 브라우저 안에서 직접 실행합니다. 따라서 결과는 평소 사용하는 편집기가 일반 소스 파일에 적용하는 서식과 같으며, 기계가 만든 것처럼 낯설지 않고 익숙하게 느껴집니다. 감지는 자동입니다. 무엇이든 붙여 넣으면 도구가 JavaScript, CSS, HTML, XML, JSON 중 어느 것인지 판단한 뒤 그에 맞게 정렬합니다.

코드 정렬로 원래 프로젝트를 재구성할 수는 없습니다. 빌드 과정에서 제거된 이름, 주석, 소스 파일은 서식만으로 복구되지 않습니다. 소스 맵이나 원본 저장소에서 부족한 맥락을 얻을 수는 있지만, 이 도구는 이를 불러오거나 스택 추적의 위치를 다시 연결하지 않습니다. 결과는 제공한 파일에 남아 있는 이름과 프로그램 구조를 유지한 채 검토하기 쉽게 만든 작업용 사본입니다.

지원하는 코드 형식

편집기 하나로 다섯 가지 언어를 다룹니다. LFUnminify는 붙여 넣은 내용을 읽고 어떤 언어인지 판단한 뒤 해당 문법을 위해 만들어진 파서에 넘깁니다. 메뉴에서 형식을 고를 필요가 전혀 없으며, 확장자가 잘못된 파일도 올바르게 처리됩니다.

• ES6 이후 문법, 모듈, 비동기 코드, JSX를 포함한 JavaScript를 지원합니다. webpack, Vite, esbuild, Terser로 생성한 번들을 살펴볼 때 주로 사용합니다.
• 최신 문법, 사용자 지정 속성, 미디어 쿼리, 중첩 규칙을 포함한 CSS를 지원합니다. Tailwind, Sass, PostCSS로 컴파일한 스타일시트를 살펴보기에 좋습니다.
• 내장 script 블록과 style 블록을 포함한 HTML을 지원합니다. 이 블록들은 긴 한 줄로 남지 않고 마크업과 함께 정렬됩니다.
• 사이트맵, RSS 피드, SVG 파일, SOAP 엔벨로프, 줄바꿈 하나 없이 전달된 설정 파일을 포함한 XML을 지원합니다.
• 깊게 중첩된 API 응답, 패키지 매니페스트, 설정 파일, 로그 데이터 등의 JSON을 지원합니다.

코드 정렬 도구가 필요한 순간

코드 압축 해제는 단순한 호기심보다는 구체적인 문제를 해결할 때 유용합니다. 다른 사람이 작성한 코드나 직접 작성했지만 더 이상 읽기 어려워진 코드에서 답을 찾는 빠른 방법입니다.

• 운영 환경의 버그 조사. 번들을 정렬하면 한 줄에서 읽기 어려웠던 함수와 분기 구조가 드러납니다. 원래 스택 추적의 위치가 새 서식에 자동으로 연결되지는 않으므로, 가능하면 브라우저 디버깅 도구와 소스 맵을 함께 사용하세요.
• 외부 스크립트 검토. 분석 태그, 채팅 위젯, 제휴 스크립트를 사이트에 넣기 전에 정렬해 보세요. 어떤 정보를 수집하고, 어느 도메인과 통신하며, 저장소에 무엇을 기록하는지 살펴볼 수 있습니다.
• 컴파일된 스타일시트 읽기. 유틸리티 프레임워크는 거대한 한 줄짜리 CSS 파일을 생성합니다. 정렬하면 캐스케이드를 살펴보고 우선 적용되는 규칙과 직접 작성한 재정의가 무시되는 이유를 파악할 수 있습니다.
• API 응답 검토. 네트워크 탭에서 복사한 JSON 데이터는 정렬 전에는 읽기 어렵습니다. 서식을 적용하면 구조와 중첩 관계, 누락된 필드를 빠르게 확인할 수 있습니다.
• 실제 코드에서 배우기. 잘 만든 라이브러리가 문제를 어떻게 해결하는지 읽는 것은 실력을 높이는 좋은 방법입니다. 파일을 정렬하면 그 구현을 훨씬 편하게 살펴볼 수 있습니다.

LFUnminify 사용 방법

편집기에 코드를 넣는 방법은 세 가지입니다. 왼쪽 패널에 바로 붙여 넣거나, 파일 열기를 눌러 기기에 있는 파일을 가져오거나, 입력 영역에 파일을 끌어다 놓으세요. 운영 중인 사이트의 파일을 살펴보려면 페이지 소스 보기나 브라우저 개발자 도구에서 내용을 복사해 여기에 붙여 넣으세요. 또는 .js, .css, .html, .xml, .json 파일로 저장한 뒤 파일 열기로 불러올 수 있습니다.

정렬은 자동으로 시작하므로 따로 버튼을 찾을 필요가 없습니다. 입력을 멈추면 도구가 언어를 감지한 뒤 오른쪽 패널에 구문 강조가 적용된 결과를 표시합니다. 결과 전체를 한 번의 클릭으로 클립보드에 복사하거나 적절한 파일명으로 다운로드해 평소 사용하는 편집기에서 열 수 있습니다.

긴 파일을 다룰 때 도움이 되는 두 가지가 있습니다. 정확한 위치를 가리키거나 두 버전을 나란히 비교해야 할 때는 줄 번호를 켜세요. 이 설정은 다음 방문에도 유지됩니다. 그리고 감지된 형식이 예상과 다르다면 그 자체가 단서인 경우가 많습니다. JSON이라고 생각했는데 JavaScript로 인식되는 파일은 JSONP 응답이거나 대입문으로 감싼 설정인 경우가 흔합니다.

코드는 사용자의 기기를 떠나지 않습니다

정렬은 페이지와 함께 불러온 코드를 사용해 브라우저 안에서 로컬로 실행됩니다. LFUnminify는 편집기 입력을 정렬 서버로 업로드하거나 데이터베이스에 저장하지 않으며, 처리에 계정도 필요하지 않습니다. 파일 열기나 끌어다 놓기로 불러온 파일도 로컬에서 읽습니다. 필요한 페이지 리소스가 로드된 뒤에는 입력할 때마다 처리용 네트워크 요청을 보낼 필요가 없습니다.

로컬 처리는 내부 번들, 고객 프로젝트, 설정 파일의 내용을 이 서비스에 업로드하지 않고 검토하고 싶을 때 유용합니다. 어떤 파일을 열고 어떤 사본을 다운로드할지는 사용자가 직접 결정합니다. 이 도구는 원격 파일을 대신 가져오지 않으므로 먼저 직접 저장하거나 복사하세요. 편집기를 사용하는 데 계정이 필요하지 않으며, 원격 서버의 처리 대기열에도 의존하지 않습니다.

LFUnminify는 왜 무료인가요?

LFUnminify는 Ludovic Frank가 만든 무료 도구 모음에 속하며, 비밀번호 생성기, 파비콘 생성기, 색상 팔레트 도구 등과 함께 제공됩니다. 이유는 간단합니다. 개발자가 매주 여러 번 찾는 작은 도구를 쓰려고 가입하거나 광고를 거치거나 사용 한도를 신경 쓸 필요는 없어야 합니다. 이 도구에는 계정, 사용량 제한, 제품 내 유료 전환 유도가 없습니다.

실제로 작동하는 작업 사례이기도 합니다. 이 모음의 모든 도구는 고객 프로젝트와 같은 방식으로 개발하고 유지하는 실제 애플리케이션입니다. 포트폴리오 페이지보다 저희의 작업 방식을 더 잘 보여 줍니다. 맞춤형 웹 개발, 템플릿을 넘어선 본격적인 애플리케이션, 기술 자문이 필요하다면 페이지 하단의 링크에서 저희를 만나실 수 있습니다.

자주 묻는 질문