Layrr

Layrr는 Narnia가 만든 명령줄 도구로, 브라우저와 개발 서버 사이에 자리한다. 브라우저 코딩 에이전트 인터페이스라고 생각하면 된다. 보고 있는 페이지에 작은 오버레이를 주입하고, 클릭한 요소를 그것을 렌더링한 코드로 되짚어 연결하며, 그 위치를 지시와 함께 코딩 에이전트에 넘긴다. 핵심 제안은 단순하다. 버그는 브라우저에 보이지만 파일은 보이지 않는다. Layrr가 그 간극을 메운다.

누구를 위한 것인가. 이미 웹 앱을 로컬에서 돌리고 있고, 이미 AI 코딩 에이전트를 신뢰하는 개발자다. 기억에 의존해 페이지를 설명하는 대신, 의도한 버튼이나 카드, 제목을 그대로 가리킨다. 그러면 프롬프트에서 추측이 사라진다.

가장 큰 한계는 적용 범위다. Layrr는 소스 코드 수정을 위한 비주얼 에디터이지, 완전한 디자인 도구나 호스팅 플랫폼이 아니다. 로컬 앱과 동작하는 개발 서버, Git 저장소를 전제로 하고, 설정한 에이전트에 의존한다. CLI로 제공되므로 설치할 GUI 앱도, 특정 IDE에 대한 종속도 없다. 다시 말해 터미널에 익숙한 것이 조건에 포함된다.

시작하기

1. npm i -g layrr로 CLI를 전역 설치하고, 로컬 웹 프로젝트의 루트에서 실행한다.
2. 평소처럼 개발 서버를 켜고, Layrr가 브라우저와 그 서버 사이의 프록시 역할을 하게 둔다.
3. 브라우저에서 앱을 열고 요소 위로 커서를 옮긴 뒤 클릭한다(여러 개를 잡으려면 Shift+클릭). 변경하려는 정확한 범위를 선택할 수 있다.
4. 문구, 간격, 색상, 레이아웃, 컴포넌트 전체 등 조정 내용을 평범한 말로 설명한다.
5. 에이전트의 편집을 검토하고, Git 기록에서 [layrr] 커밋을 확인하며, 원하는 결과가 아니면 되돌린다.