그록(Grok) 비디오 비율 9:16으로 강제 변경하는 완벽한 콘솔 스크립트 가이드

그록 썸네일

개발자 도구(F12)를 활용한 UI 자동화 제어 및 Radix UI 우회 기법

그록(Grok) 웹사이트에서 이미지를 생성하거나 비디오를 만들 때, UI 상에 없는 '9:16' (세로형 숏폼 비율)을 강제로 선택하고 싶을 때가 있습니다. 단순하게 생각하면 개발자 도구(F12)를 열어 버튼의 텍스트나 내부 React State를 조작하거나, 네트워크 패킷(Fetch)을 가로채서 서버로 가는 데이터를 조작하는 '해킹' 방식을 떠올리기 쉽습니다.

하지만 최신 프론트엔드 환경(특히 Radix UI 등)에서는 이런 방식이 오히려 독이 될 수 있습니다. 오늘은 왜 복잡한 백엔드 우회 방식이 실패했는지, 그리고 어떻게 '실제 사람의 물리적 조작'을 흉내 낸 DOM 스크립트가 완벽한 해결책이 되었는지 정리해 보겠습니다.

1. 실패한 접근: 오버엔지니어링의 함정

초기에는 브라우저 내부의 상태(State)를 직접 조작하거나 통신 패킷을 가로채는 방식(Fetch Interceptor)을 시도했습니다. 서버로 날아가는 JSON 페이로드에 "aspectRatio": "9:16"을 몰래 끼워 넣는 데는 성공했죠.

하지만 결과는 실패였습니다. 그 이유는 다음과 같습니다.

  • UI 동기화 실패: 네트워크 데이터만 몰래 바꿨기 때문에, 사용자가 보는 화면의 버튼은 여전히 '2:3'에 머물러 있어 직관적인 피드백을 받을 수 없었습니다.
  • 상태 관리의 격리: 최신 React 기반 UI는 단순한 DOM 조작(element.value = '9:16')만으로는 내부 상태 머신을 업데이트하지 않습니다.

2. 완벽한 해결책: 인간의 클릭을 시뮬레이션하라

복잡한 해킹 방식 대신, 실제 사용자가 마우스를 움직여 메뉴를 열고 9:16을 클릭하는 과정을 브라우저 단에서 완벽하게 흉내 내는 정공법(UI Automation)이 정답이었습니다.

아래는 브라우저 콘솔창에 입력하여 즉시 사용할 수 있는 완성된 자바스크립트 코드입니다.

// === 메뉴 자동 열기 + 9:16 선택 ===
(() => {
    // 1. 종횡비 버튼 찾기
    let btn = document.querySelector('button[aria-label="종횡비"]');
    
    if (!btn) {
        btn = Array.from(document.querySelectorAll('button')).find(b => {
            const label = b.getAttribute('aria-label') || '';
            const txt = b.textContent || '';
            return label.includes('종횡비') || txt.includes('2:3') || txt.includes('9:16');
        });
    }

    if (!btn) {
        console.error('❌ 종횡비 버튼을 찾을 수 없습니다.');
        return;
    }

    // 2. 강력 클릭으로 메뉴 열기 (Radix UI 우회)
    btn.scrollIntoView({block: 'center'});
    btn.focus();
    btn.click();

    // 단순 click()을 무시하는 최신 UI를 속이기 위한 마우스 이벤트 발송
    ['mousedown', 'mouseup', 'click'].forEach(type => {
        btn.dispatchEvent(new MouseEvent(type, {
            bubbles: true,
            cancelable: true,
            view: window
        }));
    });

    try {
        btn.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
        btn.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
    } catch(e) {}

    // 3. 9:16 항목 선택 (렌더링 대기)
    setTimeout(() => {
        document.querySelectorAll('*').forEach(el => {
            const txt = (el.textContent || '').trim();
            
            if (txt.includes('9:16') || txt.includes('수직')) {
                el.scrollIntoView({block: 'center'});
                el.click();
                el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
                console.log('✅ 9:16 비율 선택 완료!');
            }
        });
    }, 600);
})();

3. 이 코드가 완벽하게 작동하는 핵심 원리

① Radix UI의 방어막 무력화

최신 웹 애플리케이션에 적용된 UI 컴포넌트(Radix UI 등)는 봇(Bot)이나 단순 스크립트의 .click() 이벤트를 무시하는 경우가 많습니다. 위 코드는 MouseEvent와 PointerEvent를 조합하여 '진짜 사람이 마우스 버튼을 눌렀다 떼는' 하드웨어적 신호를 발생시켜 브라우저를 완벽하게 속입니다.

② 비동기 렌더링(DOM) 타이밍 제어

드롭다운 메뉴는 평소에 HTML 상에 존재하지 않다가, 버튼을 누르는 순간 DOM 트리에 추가됩니다. 버튼을 누르자마자 '9:16' 글자를 찾으면 실패합니다. 이 코드는 setTimeout을 이용해 메뉴가 화면에 완전히 그려질 시간(0.6초)을 기다린 후 타겟을 추적하여 정확히 클릭합니다.

③ 정상적인 시스템 흐름 탑승

시스템을 억지로 해킹하는 것이 아니라, 제공된 UI의 정상적인 루트를 그대로 밟았기 때문에 그록의 내부 State 로직과 서버 전송 데이터가 알아서 동기화됩니다. 눈에 보이는 화면도 즉시 9:16으로 바뀌어 완벽한 UX를 제공합니다.

💡 요약 및 인사이트

자동화 스크립트를 작성할 때 백엔드를 우회하는 오버엔지니어링보다, 프론트엔드 환경에서 인간의 행동을 가장 정밀하게 모방하는 DOM 제어 스크립트가 때로는 가장 강력하고 안정적인 해결책이 될 수 있습니다. 복잡한 문제를 만났을 때는 가장 직관적인 '사용자의 행동 패턴'으로 돌아가 보는 것을 추천합니다.