SCSS → CSS 변환 — 브라우저에서 바로 돌리는 Sass 컴파일러

아니요. 변환은 전부 이 브라우저 안에서 끝나며 코드는 어디로도 보내지 않고 저장하지도 않습니다. 회사 소스나 설정 파일을 붙여 넣어도 됩니다. 이 브라우저에 남는 것은 마지막으로 연 변환뿐이고, 코드는 남기지 않습니다. 변환기(컴파일러) 파일 자체는 이 사이트에서 내려받지만, 받은 뒤로는 코드가 브라우저 밖으로 나가지 않습니다.

방향마다 주소가 따로 있습니다. Pug ⇄ HTML 탭은 /codeconv 와 /codeconv/html-pug 두 주소를 가지며, 설정 줄 가운데의 ⇄ 버튼을 누르면 화면과 함께 주소도 바뀝니다. 그래서 지금 보고 있는 방향을 그대로 링크로 보낼 수 있고, 뒤로 가기를 누르면 직전 방향으로 돌아옵니다. ⇄ 를 누를 때 결과가 있으면 그 결과가 반대 방향의 입력으로 옮겨 가므로, 바꾼 코드를 되돌려 원래와 같은지 바로 확인할 수 있습니다.

탭바 오른쪽 끝의 "모든 변환" 을 누르면 마크업·스타일·스크립트·데이터 묶음으로 열여섯 방향을 모두 보여 줍니다. 받아야 하는 변환기가 있는 방향에는 파일 크기(예: 694KB)가 함께 적혀 있어서, 누르기 전에 잠깐 기다릴 일이 있는지 알 수 있습니다. 사이트 어디에서나 쓰는 Ctrl/⌘+K 로도 각 변환으로 바로 갈 수 있습니다.

그 구문들은 다른 파일을 읽어 오는 명령인데, 브라우저에는 접근할 파일 시스템이 없습니다. 서버에서 처리하면 가능하지만 그러려면 코드를 서버로 보내야 해서, 이 도구는 그 길을 택하지 않았습니다. 불러오려던 파일의 내용을 같은 칸에 직접 붙여 넣으면 그대로 변환됩니다. Less 의 @import 도 같은 사정입니다.

일부러 빼지 않습니다. 중첩만 정리합니다. 어떤 값을 변수로 둘지는 그 프로젝트의 디자인 규칙이 정할 일인데, 자동으로 뽑으면 $color-1·$size-3 처럼 뜻을 알 수 없는 이름이 생겨 오히려 읽기 어려워집니다. var(--x) 같은 CSS 변수도 그대로 둡니다 — SCSS 변수로 바꾸면 빌드 시점에 값이 고정되어 런타임에 테마를 바꾸는 동작이 사라지기 때문입니다. CSS → Less 도 같은 규칙입니다.

달라지지 않습니다. 선택자를 중첩으로 묶을 뿐 순서와 뜻을 바꾸지 않고, 미디어 쿼리·!important·@font-face 는 그대로 둡니다. 쉼표로 묶인 선택자(.a, .b)는 쪼개면 선언이 복제되므로 통째로 둡니다. 검사에서도 바꾼 SCSS 를 다시 CSS 로 컴파일해 원래와 같은 뜻인지 확인합니다. 설정 줄의 ⇄ 버튼으로 직접 확인해 볼 수 있습니다.

아니요. 이 도구는 타입을 걷어내기만 합니다(Sucrase). 타입이 맞는지 보려면 편집기나 tsc --noEmit 을 쓰세요. 대신 그만큼 빠르고 받는 파일도 작습니다 — 타입 검사까지 하는 컴파일러는 수 MB 라 웹 페이지에서 받기에 부담스럽습니다. namespace 나 declare module 처럼 타입 전용 구문은 비워지거나 그대로 남을 수 있습니다.

대부분 그대로 됩니다. class 는 className 으로, for 는 htmlFor 로, style 문자열은 객체로, 주석은 {/* */} 로 바꾸고 SVG 속성(stroke-width)도 카멜 케이스(strokeWidth)로 고칩니다. 다만 onclick="save()" 같은 속성은 React 가 함수만 받기 때문에 () => { save() } 로 감싸 두는데, 그 함수가 컴포넌트 안에 있어야 동작합니다. value·checked 가 그대로 남으면 바꿀 수 없는 입력칸이 되므로 defaultValue·defaultChecked 로 바꿀지 결정해야 합니다. 이런 자리는 변환 뒤 문제 패널이 알려 줍니다.

화면의 결과를 복사해 메모장에 붙여 저장하면 엑셀이 UTF-8 인 줄 모르고 읽어서 그렇습니다. 내려받기 버튼으로 받은 파일에는 BOM 을 붙여 두었으니 그대로 열면 깨지지 않습니다. 중첩된 값은 a.b 모양의 열로 펴고, 쉼표·따옴표·줄바꿈이 든 값은 규격대로 따옴표로 감싸므로 엑셀에서 열이 밀리지 않습니다. 반대로 엑셀에서 복사한 표는 CSV → JSON 방향에 그대로 붙여 넣으면 됩니다 — 탭으로 구분된 것도 알아서 읽습니다.

붙여 넣은 값만 보고 지은 타입이라 한 번 읽어 보는 것이 좋습니다. 배열 안의 객체들은 모두 훑어서 어떤 객체에만 있는 키에 ? 를 붙이고, null 이 섞인 값에는 | null 을 더합니다. 하지만 지금 숫자가 들어 있는 자리라도 실제 응답에서는 null 이나 문자열이 올 수 있습니다. 중첩된 객체는 키 이름에서 딴 이름(address → Address)으로 따로 선언하고, 이름이 겹치면 뒤에 번호를 붙입니다.

진짜 컴파일러를 쓰기 때문입니다. dart-sass 는 혼자 약 694KB(압축 기준), less.js 는 약 53KB 입니다. 모든 방문자가 받을 필요는 없는 용량이라서 그 방향을 처음 쓸 때만 내려받습니다. 한 번 받으면 브라우저가 기억하므로 다음부터는 바로 열립니다. 반대로 JSON·CSV·XML·HTML → Pug·HTML → JSX 는 추가로 받는 파일이 아예 없어서 오프라인에서도 동작합니다.

React 를 불러오는 과정이 따로 필요합니다. 이 도구는 JSX 문법을 createElement 호출로 바꿔 줄 뿐, 여러 파일을 하나로 묶거나(번들) 옛 브라우저용으로 문법을 낮추지(트랜스파일) 않습니다. import 문도 그대로 남으므로 Vite·webpack 같은 번들러에 그대로 넣으면 됩니다. React 17 부터 쓰는 자동 런타임이 필요하면 런타임 설정을 automatic 으로 바꾸세요.