1. WebAssembly(Wasm)를 이용한 클라이언트 사이드 포맷팅
이 방식은 브라우저 내부에 내장된 Wasm 가상 머신을 활용하여 Ruby 코드를 실시간으로 포맷팅합니다. ruby_wasm 젬을 사용하여 Ruby VM을 Wasm 바이너리로 패키징하고, SyntaxTree와 Rouge 라이브러리를 포함시킵니다.
- 작동 원리: 브라우저의 화면 크기 변화를 감지하여 JavaScript가 Wasm 내의 Ruby 코드를 실행합니다.
SyntaxTree.format함수에 현재 컬럼 너비를 전달하여 AST(Abstract Syntax Tree) 기반으로 코드를 재구성합니다. - 한계점: 가장 혁신적인 시도처럼 보이지만, Ruby VM과 관련 라이브러리를 포함한 바이너리 크기가 약 50MB에 달합니다. 단순한 기술 아티클을 읽기 위해 대용량 파일을 다운로드해야 한다는 점은 실제 서비스 적용에 큰 걸림돌이 됩니다.
2. Hidden DOM 요소를 활용한 서버 사이드 사전 렌더링
가장 단순하면서도 강력한 방식으로, 정적 사이트 생성기(예: nanoc)를 통해 빌드 시점에 다양한 중단점(Breakpoint)에 맞춘 코드 버전을 미리 생성하는 전략입니다.
- 구현 방법: 하나의 코드 블록에 대해 40, 80, 120 컬럼 너비의 HTML 요소를 각각 생성하고
data-width속성을 부여합니다. 이후 CSS 미디어 쿼리를 사용하여 현재 화면 너비에 해당하는 요소만display: block으로 표시하고 나머지는 숨깁니다. - 장점: JavaScript 의존성이 전혀 없으며 브라우저의 기본 기능만을 사용하므로 성능 저하가 없습니다. 복잡한 로직 없이도 완벽한 반응형 코드를 제공할 수 있어 저자가 가장 선호하는 방식입니다.
3. Hotwire 및 Turbo Frames를 이용한 동적 교체
GitHub의 Pull Request 페이지처럼 수많은 코드 블록이 존재하는 대규모 페이지에서는 Hidden DOM 방식이 DOM 요소의 개수를 3배로 늘려 성능 문제를 야기할 수 있습니다. 이를 해결하기 위해 Hotwire의 Turbo Frames를 도입합니다.
- 동적 로딩 전략: 각 코드 스니펫을
<turbo-frame>으로 감싸고 고유 ID를 부여합니다. 화면 크기가 변경되어 중단점이 바뀌면, JavaScript가 각 프레임의src속성을 해당 너비의 전용 URL로 업데이트합니다. - 최적화: 브라우저 캐시를 활용하면 동일한 리소스에 대한 반복 요청을 방지할 수 있습니다. 이 방식은 초기 로딩 시 DOM 크기를 최소화하면서도 필요할 때만 최적화된 코드를 가져오는 효율적인 데이터 관리 모델을 제시합니다.