theORQL: 프론트엔드 개발, 이제 커서로!
theORQL은 UI 스크린샷을 기반으로 UI와 코드 간 매핑을 수행하는 AI 기반 프론트엔드 도구임
크롬(Chrome) 브라우저에서 UI 상호작용을 시뮬레이션하고 시각적으로 검증하여 UI 수정의 정확성(UI Fix Accuracy)을 높임
VS Code 및 크롬(Chrome) 확장 프로그램으로 제공되며, 1200회 이상 다운로드를 기록함
theORQL의 작동 원리: UI → 코드 매핑
theORQL은 UI 스크린샷을 분석하여 UI 요소와 해당 코드 간의 관계를 파악한다. 이는 컴퓨터 비전 기술(Computer Vision Technology)을 활용하여 UI 요소의 시각적 특징을 추출하고, 이를 코드베이스(Codebase)와 매칭하는 방식으로 이루어진다.
UI 요소 인식: 객체 감지(Object Detection) 및 이미지 분할(Image Segmentation) 기술을 통해 UI 구성 요소 식별
코드 매핑: UI 요소의 속성(색상, 위치, 크기 등)을 기반으로 코드 내 해당 요소 탐색
자동화된 UI 테스트: 매핑된 정보를 바탕으로 실제 브라우저 상호작용 시뮬레이션
이러한 과정을 통해 개발자는 코드 수정 후 UI 변경 사항을 시각적으로 검증할 수 있다.
크롬(Chrome) 브라우저 통합: 디버깅 및 검증
theORQL은 크롬(Chrome) 브라우저와 긴밀하게 통합되어 개발자가 UI 수정을 효율적으로 디버깅하고 검증할 수 있도록 지원한다. 특히, 실시간 UI 업데이트(Real-time UI Updates) 기능을 통해 코드 변경 사항을 브라우저에서 즉시 확인 가능하다.
시각적 검증: 변경된 UI 요소가 의도한 대로 표시되는지 시각적으로 확인
상호작용 시뮬레이션: 사용자 액션(User Actions) 시뮬레이션을 통해 UI 동작 검증
디버깅 지원: 크롬(Chrome) 개발자 도구(Developer Tools)와 연동하여 문제 발생 시 디버깅 용이
이러한 기능은 UI 수정 과정에서 발생하는 오류를 줄이고, 개발 생산성을 향상시키는 데 기여한다.
VS Code 확장 기능: 개발 환경 통합
theORQL은 VS Code 확장 기능으로 제공되어 개발 환경 내에서 UI 수정 및 검증 작업을 수행할 수 있도록 지원한다. VS Code 내에서 theORQL을 사용하면 별도의 도구 전환 없이 UI 관련 작업을 처리할 수 있어 개발 효율성을 높일 수 있다.
코드 편집: VS Code에서 직접 UI 관련 코드 수정
UI 검증: theORQL을 통해 수정된 UI의 시각적 검증
통합된 워크플로우: 코드 수정 → 검증 → 커밋(Commit)의 일관된 워크플로우 제공
VS Code와의 통합은 theORQL의 사용성을 높이고, 개발자가 UI 수정에 집중할 수 있도록 돕는다.
![[theORQL] Cursor for frontend. Build and debug in Chrome and VS Code.](https://static.devday.kr/thumbnails-w1200/ph-1085684-bf78ae07.webp)
