사이트별 크롬 확대율 다를 때, Make 시나리오로 자동 설정

크롬에서 유튜브는 150%, 네이버는 기본 크기로 따로 쓰고 싶은데, 설정 바꾸면 전체가 같이 바뀌어버리죠. 크롬 브라우저의 기본 확대 기능이 탭별 혹은 사이트별 설정을 지원하지 않고 전역 설정으로만 동작하기 때문입니다. 이 글에서는 Make(구 Integromat) 시나리오를 활용하여 사이트 주소를 입력하면 자동으로 크롬 확대율을 적용하는 CSS 파일을 생성하고, 이를 브라우저와 연동하는 완벽한 자동화 방법을 단계별로 설명합니다.

브라우저 확대율 제어의 기술적 원리와 CSS 접근법

크롬 브라우저의 기본 확대 기능은 렌더링 엔진 수준에서 페이지 전체의 스케일을 조정합니다. 사용자가 Ctrl과 +를 누르면 브라우저는 현재 탭의 도메인에 관계없이 확대 비율을 110%, 125% 식으로 올립니다. 이 설정은 세션을 종료하면 초기화되거나, '전체 페이지 확대' 옵션을 켜면 모든 사이트에 동일하게 적용됩니다. 이는 각 사이트의 레이아웃 특성에 따라 다른 배율을 선호하는 사용자에게 큰 불편함을 줍니다.

이러한 브라우저의 기본 확대 기능은 전역적인 설정을 강제하기 때문에, 특정 웹사이트는 크게 보고 싶고 다른 웹사이트는 기본 크기로 유지하고 싶을 때 유연하게 대처하기 어렵습니다. 예를 들어, 시각적인 정보를 많이 다루는 디자인 관련 사이트나 이미지가 중요한 쇼핑몰은 150% 이상으로 확대하여 세부 사항을 더 명확하게 보고 싶을 수 있습니다. 반면에 텍스트 위주의 정보 제공 사이트나 개발 문서 등은 100% 기본 크기로 보는 것이 가독성 측면에서 더 효율적일 수 있습니다. 하지만 크롬의 기본 기능으로는 이러한 개별적인 설정을 저장하고 자동으로 적용하는 것이 불가능합니다.

이 문제를 해결하는 가장 확실한 방법은 브라우저의 기본 기능이 아닌 CSS의 zoom 속성을 활용하는 것입니다. CSS zoom 속성은 요소의 크기를 배수 단위로 조정할 수 있게 해줍니다. 예를 들어, 특정 도메인의 body 태그에 zoom: 1.5를 적용하면 해당 페이지는 150% 크기로 렌더링됩니다. Google Chrome 개발자 문서(developer.chrome.com)에 따르면, 표준 CSS 명세는 아니지만 대부분의 브라우저가 이 속성을 지원하며 레이아웃 흐름을 유지하면서 크기만 조정하는 데 유용합니다. 이는 단순히 폰트 크기만 키우는 것과는 달리, 페이지 전체의 레이아웃과 요소 간의 상대적 크기까지 함께 조정되어 좀 더 자연스러운 확대 효과를 제공합니다.

하지만 매번 개발자 도구를 열어 CSS를 입력하는 것은 자동화가 아닙니다. 여기서 Make(구 Integromat)의 역할이 중요해집니다. 사용자가 원하는 사이트 주소와 배율을 데이터베이스에 입력하면, Make가 이를 읽어 CSS 파일로 자동 변환해주는 시스템을 구축해야 합니다. 실제 사용자들은 Make가 워크플로우 자동화에 있어 UI 기반 구성 덕분에 접근성이 뛰어나다고 평가합니다. 클리엔 사용자의 실제 후기를 보면, "Make가 Workflow 자동화하기엔 UI로 구성되어 있어서 쉽더라구요"라는 의견이 있을 정도로 복잡한 로직도 시각적으로 관리할 수 있습니다(clien.net). 이러한 Make의 시각적 인터페이스는 코딩 경험이 많지 않은 사용자들도 쉽게 자동화 워크플로우를 설계하고 관리할 수 있도록 돕습니다. 이 글에서 소개할 방법은 바로 이러한 Make의 강점을 활용하여 크롬의 확대율 제어라는 불편함을 해소하는 실제적인 솔루션을 제공합니다.

Photo by Hebert Santos on Pexels

구글 시트를 활용한 설정 데이터베이스 구축

자동화의 첫 단계는 사이트별 설정 값을 저장할 데이터베이스를 만드는 것입니다. 별도의 SQL 서버 없이도 구글 시트(Google Sheets)를 충분히 활용할 수 있습니다. 구글 시트는 실시간 협업은 물론 Make와의 연동성이 매우 뛰어나기 때문입니다. 새 시트를 생성하고 첫 번째 행에 헤더를 입력합니다. A1 셀에는 '도메인', B1 셀에는 '확대율'이라고 입력합니다.

데이터 입력 예시는 다음과 같습니다. A2 셀에는 'youtube.com', B2 셀에는 '1.5'를 입력합니다. A3 셀에는 'naver.com', B3 셀에는 '1.0'을 입력합니다. 이렇게 설정된 시트는 Make 시나리오의 데이터 소스가 됩니다. 만약 100개 이상의 사이트를 등록해야 한다면 시트 성능을 위해 데이터 유효성 검사를 적용하는 것이 좋습니다. 데이터 탭에서 데이터 유효성 검사 기능을 켜고, A열에는 텍스트(도메인 형식), B열에는 0.1부터 5.0 사이의 숫자만 허용하도록 설정하여 오류를 방지할 수 있습니다. 예를 들어, A열에는 '맞춤 규칙'을 선택하고 '텍스트가 다음 정규식과 일치'를 선택하여 `^([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$` 와 같은 정규식을 사용하여 유효한 도메인 형식을 검사할 수 있습니다. B열에는 '숫자'를 선택하고 '범위'를 지정하여 0.1에서 5.0 사이의 값만 입력되도록 제한할 수 있습니다. 이러한 데이터 유효성 검사는 Make 시나리오가 잘못된 데이터로 인해 오류를 발생시키는 것을 방지하고, 전체 자동화 시스템의 안정성을 높여줍니다.

데이터베이스가 구축되면 시트의 URL을 복사해 둡니다. 이 URL은 Make 시나리오를 구성할 때 'Google Sheets' 모듈의 연결 정보로 사용됩니다. 시트 이름은 'ZoomSettings' 등 직관적인 이름으로 변경하는 것이 좋습니다. 이 과정에서 시트의 ID는 URL의 '/d/'와 '/edit' 사이에 있는 긴 영문 문자열입니다. 예를 들어 URL이 'docs.google.com/spreadsheets/d/1A2b3C4d5E6f7G8h9I0j/edit'라면 ID는 '1A2b3C4d5E6f7G8h9I0j'입니다. 이 ID를 메모장에 적어두세요. 이 ID를 통해 Make는 특정 구글 시트 파일에 정확하게 접근할 수 있습니다. 또한, 시트 내 여러 탭이 있다면, Make에서 해당 탭 이름을 정확히 지정해야 합니다. 예를 들어, 'ZoomSettings' 시트 안에 'GeneralZoom'이라는 탭이 있다면, Make의 Google Sheets 모듈에서 해당 탭 이름을 선택해야 합니다. 이러한 세부 설정은 Make 시나리오의 정확성을 높이는 데 중요한 역할을 합니다.

Make 시나리오 구성: 데이터를 CSS 코드로 자동 변환

이제 Make(구 Integromat) 대시보드로 이동하여 새 시나리오를 생성합니다. 시나리오의 목표는 구글 시트의 데이터를 읽어와 CSS 문법으로 변환한 뒤, 이를 하나의 파일로 저장하는 것입니다. Make 시나리오 기본화면은 모듈 간의 연결을 시각적으로 보여주어 직관적입니다. 실제 사용자 후기에서도 "자동화 하신것에 대해 정말 잘 정리하셨네요... make 시나리오 기본화면이 저렇게"라는 언급이 있을 정도로 흐름도 파악이 쉽습니다(clien.net).

시나리오 구성은 총 4개의 모듈로 이루어집니다. 각 모듈은 특정 기능을 수행하며, 이들이 순차적으로 연결되어 전체 자동화 워크플로우를 완성합니다. Make의 시각적인 인터페이스는 각 모듈의 역할을 명확히 보여주며, 마치 레고 블록을 조립하듯 원하는 자동화 로직을 구현할 수 있도록 돕습니다.

Text Aggregator 모듈의 설정이 가장 중요합니다. Aggregate to 필드는 'Text'로 설정합니다. Target 구조는 'Text'로 둡니다. Section 필드에 다음 CSS 템플릿을 입력해야 합니다.

@-moz-document domain("{{Domain}}") {
  html {
    zoom: {{Zoom}} !important;
  }
}

여기서 {{Domain}}과 {{Zoom}}은 Google Sheets 모듈에서 가져온 변수를 매핑합니다. !important 속성을 사용하여 사이트 자체의 CSS 설정보다 우선 적용되도록 강제합니다. 이 시나리오가 실행되면 결과물은 다음과 같은 텍스트 블록이 됩니다.

@-moz-document domain("youtube.com") {
  html {
    zoom: 1.5 !important;
  }
}
@-moz-document domain("naver.com") {
  html {
    zoom: 1.0 !important;
  }
}

크롬 확장 프로그램 연동 및 실제 적용 테스트

Make 시나리오를 통해 생성된 CSS 코드를 브라우저에 적용하려면 이를 저장할 공간이 필요합니다. 가장 쉬운 방법은 Make가 생성한 텍스트를 구글 드라이브의 CSS 파일로 저장하는 것입니다. 시나리오에 마지막 모듈을 추가합니다. Google Drive > Upload a File 모듈을 사용합니다. File Name 필드에는 'custom_zoom.css'를 입력하고, Folder ID에는 CSS 파일을 저장할 드라이브 폴더 ID를 입력합니다. Data 필드에는 앞서 Text Aggregator의 결과 값을 연결합니다. 이 모듈은 같은 이름의 파일이 존재하면 덮어쓰기(Overwrite)하므로, 시트 데이터가 변경될 때마다 CSS 파일이 최신 상태로 유지됩니다.

이제 크롬 브라우저로 이동하여 'Stylus'와 같은 사용자 스타일 관리 확장 프로그램을 설치합니다. Stylus는 특정 도메인에 CSS를 적용하는 데 특화된 오픈소스 확장 프로그램입니다. 설치 후 확장 프로그램 아이콘을 클릭하고 '관리' 페이지로 들어갑니다. 여기서 '새 스타일 작성'을 클릭합니다. 하지만 우리는 수동으로 코드를 작성하는 것이 아니라, Make가 생성한 파일을 불러오겠습니다. Stylus는 외부 파일을 직접 import하는 기능이 제한적일 수 있으므로, 대신 다음 과정을 수행합니다.

구글 드라이브에 업로드된 'custom_zoom.css' 파일을 웹 브라우저에서 볼 수 있도록 공유 설정을 변경해야 합니다. 파일 우클릭 -> 공유 -> '링크가 있는 모든 사용자'로 변경합니다. 생성된 웹 주소를 복사합니다. 이 주소는 보통 'https://drive.google.com/uc?id=...' 형태로 변환하여 사용하는 것이 좋습니다. 이제 Stylus의 코드 편집기에 Make가 생성한 전체 CSS 코드를 복사하여 붙여넣습니다. Stylus 확장 프로그램의 '새 스타일 작성' 기능에서 'URL' 필드에 위에서 복사한 구글 드라이브 파일의 공유 URL을 붙여넣습니다. 그리고 '모든 URL'에 적용되는 스타일로 설정합니다. 이렇게 하면 Make 시나리오가 실행되어 구글 드라이브의 CSS 파일이 업데이트될 때마다 Stylus는 자동으로 최신 CSS를 읽어와 적용하게 됩니다. 실제 적용 테스트를 위해 유튜브와 네이버 등 설정한 사이트를 방문하여 확대율이 의도한 대로 적용되는지 확인합니다. 만약 적용되지 않는다면, CSS 코드의 !important 플래그가 제대로 작동하는지, 또는 다른 CSS 충돌이 없는지 확인해 볼 필요가 있습니다. 또한, Stylus 확장 프로그램 설정에서 'CSS 적용 순서'를 확인하여 사용자 스타일이 우선 적용되도록 설정하는 것도 중요합니다. 만약 확장 프로그램이 CSS 파일을 제대로 불러오지 못한다면, Make 시나리오의 Google Drive 모듈에서 파일 이름이나 폴더 ID 설정을 다시 한번 확인하고, 구글 드라이브의 공유 권한이 올바르게 설정되었는지 점검해야 합니다.

실제 적용 시나리오 예시:

이 과정을 통해 사용자는 복잡한 코딩 없이도 원하는 웹사이트의 확대율을 자유롭게 설정하고 자동화할 수 있습니다. Make의 강력한 연동성과 Stylus의 유연성이 결합되어 사용자 경험을 크게 향상시키는 솔루션입니다. 만약 특정 사이트에서 확대율이 제대로 적용되지 않는다면, 해당 사이트의 CSS 구조를 개발자 도구로 확인하여 html 태그 외에 다른 요소에 `zoom` 속성을 적용해야 하는지 검토해 볼 수 있습니다. 예를 들어, 일부 복잡한 웹 애플리케이션의 경우, body 태그나 특정 컨테이너 요소에 `zoom`을 적용해야 할 수도 있습니다.

시나리오 고도화 및 한계점 분석

지금까지 구축한 Make 시나리오는 기본적인 사이트별 확대율 적용 자동화를 제공합니다. 하지만 여기서 멈추지 않고 몇 가지 기능을 추가하여 더욱 강력하고 유연한 시스템으로 발전시킬 수 있습니다. 예를 들어, 특정 웹사이트의 경우 확대율을 다르게 적용하고 싶을 때가 있습니다. 예를 들어, 'news.com'이라는 사이트에서 일반적인 1.2배 확대 외에, 특정 뉴스 기사 페이지에서는 1.5배로 확대하고 싶을 수 있습니다. 이러한 세부적인 설정을 위해 구글 시트에 '하위 경로' 또는 '특정 URL 패턴'과 같은 추가 열을 생성하고, Make 시나리오에서 해당 정보를 파싱하여 더 정교한 CSS 규칙을 생성하도록 확장할 수 있습니다.

또한, 현재는 CSS 파일을 구글 드라이브에 저장하고 Stylus 확장 프로그램이 이를 읽어오는 방식을 사용하고 있습니다. 하지만 Make 시나리오에서 직접 CSS 파일을 생성하여 로컬에 다운로드하거나, FTP 서버 등에 업로드하여 웹 서버를 통해 제공하는 방식도 고려해 볼 수 있습니다. Make는 다양한 클라우드 스토리지 서비스(Dropbox, OneDrive 등) 및 FTP 모듈을 지원하므로, 사용자의 환경에 맞는 저장 방식을 선택할 수 있습니다. 만약 Make가 직접 CSS 파일을 생성하여 브라우저 확장 프로그램에 직접 적용하는 기능이 있다면 훨씬 더 간편해질 것입니다. 하지만 현재로서는 외부 파일 참조 방식이 가장 현실적인 대안입니다.

고도화 옵션:

• 세부 URL 패턴 적용: 구글 시트에 '경로' 또는 'URL 패턴' 열을 추가하여 특정 URL 경로에만 다른 확대율을 적용합니다. Make 시나리오에서 정규 표현식 등을 활용하여 이 패턴을 매칭합니다.
• 확대율 기반 스타일 다양화: 단순히 zoom 속성 외에 폰트 크기, 줄 간격 등 다른 CSS 속성도 함께 제어할 수 있도록 확장합니다.
• 우선순위 설정: 여러 규칙이 충돌할 경우 적용될 우선순위를 지정하는 기능을 추가합니다.
• 사용자 지정 테마 적용: 특정 도메인에 대해 미리 정의된 여러 CSS 테마 중 하나를 선택할 수 있도록 합니다.
• 실시간 미리보기 기능: Make 시나리오 실행 시, 생성될 CSS 코드를 미리 확인하고 수정할 수 있는 기능을 구현합니다.

하지만 이 자동화 방법에는 몇 가지 한계점도 존재합니다. 첫째, @-moz-document 구문은 Firefox에서 주로 사용되는 기능으로, Chrome에서는 모든 브라우저에서 동일하게 작동하지 않을 수 있습니다. Chrome에서는 Stylus와 같은 확장 프로그램이 CSS를 적용하는 방식 자체가 이러한 도메인별 규칙을 지원하기 때문에 문제가 없지만, 다른 브라우저나 환경에서는 동작 방식이 달라질 수 있습니다. 둘째, Make의 무료 플랜은 작동 횟수에 제한이 있습니다. 많은 수의 웹사이트를 등록하거나 자주 변경하는 경우, 유료 플랜으로 업그레이드가 필요할 수 있습니다. 셋째, 웹사이트의 구조가 복잡하거나 동적으로 콘텐츠를 로드하는 경우, CSS zoom 속성이 예상대로 작동하지 않거나 레이아웃이 깨질 수 있습니다. 이럴 경우, CSS를 좀 더 세밀하게 조정하거나 다른 접근 방식을 고려해야 할 수 있습니다.

또한, Make 시나리오가 실행되는 주기에 따라 CSS 파일 업데이트에 약간의 지연이 발생할 수 있습니다. 예를 들어, 15분 간격으로 설정된 경우, 구글 시트에서 데이터를 변경한 후 실제 CSS 파일에 반영되기까지 최대 15분이 소요될 수 있습니다. 이러한 지연 시간을 최소화하기 위해 Make 시나리오의 폴링 간격을 줄이거나, 수동 실행 기능을 활용하는 것이 좋습니다. 마지막으로, 이 솔루션은 사용자가 직접 설정하고 관리해야 한다는 점에서 완전 자동화라고 보기는 어렵습니다. 하지만 기존의 불편함을 획기적으로 개선하고, 개인화된 브라우징 환경을 구축하는 데에는 매우 효과적인 방법입니다. 이러한 한계점들을 인지하고, 자신의 사용 패턴에 맞게 시나리오를 조정하고 발전시켜 나가는 것이 중요합니다.