UI 디자인이 서툴러서 브라우저 상에서 AI에게 UI 수정을 지시할 수 있는 Vite 플러그인을 만들어 보았다

만든 것

브라우저 상에서 수정하고 싶은 UI를 클릭하여 수정 지시를 내리면, 3가지 패턴의 UI 수정안을 AI가 제시해 주는 Vite 플러그인입니다. 제시된 안은 그 자리에서 바로 비교할 수 있으며, 마음에 드는 것을 골라 코드에 반영할 수 있습니다.

• 리포지토리: https://github.com/NKMAK/claude-ui-variants
• 소개 페이지: https://nkmak.github.io/claude-ui-variants/

만들게 된 동기

UI 디자인이 서툴러서 생각만큼 세련된 UI를 좀처럼 만들지 못하고 있었습니다. 개수하고 싶은 UI를 코드 베이스로 지정하고 수정 내용을 AI에게 지시해도, 한 번에 원하는 UI가 나오지 않아 여러 번 대화를 주고받아야 하는 경우가 많았습니다.

그래서 브라우저 상에서 개수하고 싶은 UI를 직접 지정하고, 몇 가지 패턴의 안을 비교하며 GUI 상에서 UI를 채택할 수 있는 도구가 있다면 편리하겠다고 생각하여 이 플러그인을 작성했습니다.

무엇을 할 수 있는가

실제 사용법을 데모 앱을 예로 들어 5단계로 소개합니다.

스텝 1: UI 수정 모드로 전환하기

화면 오른쪽 하단의 Inspector 버튼을 클릭하여 UI 수정 모드를 켭니다.

스텝 2: 수정하고 싶은 UI 선택하기

수정하고 싶은 요소에 커서를 맞추고 클릭합니다. 모드가 켜져 있는 동안에는 요소에 호버하면 선택 범위가 하이라이트됩니다.

스텝 3: 어떤 UI로 만들고 싶은지 입력하기

요소를 선택하면 오른쪽에 패널이 열립니다. Instruction 란에 어떤 느낌으로 수정하고 싶은지 입력합니다.

이번에는 다음과 같은 지시를 내려보겠습니다.

01, 02, 03과 같이 번호를 매겨주세요. 또한, hero headline과 같은 제목은 타이틀이므로 굵게(bold) 처리해 주세요.

스텝 4: AI에게 수정 요청하기

Generate 버튼을 눌러 AI에게 수정을 요청합니다. 잠시 기다리면 수정안이 3개 생성됩니다. 아래 예시에서는 "번호 매기기", "제목을 굵게 하기" 등 각각 조금씩 다른 안들이 나열되어 있습니다.

스텝 5: 3가지 안 중에서 마음에 드는 것을 채택하기

생성된 3가지 안을 Prev / Next로 전환하며 비교합니다. 화면 표시도 실시간으로 바뀌기 때문에 실제 모습을 확인하면서 고를 수 있습니다. 마음에 드는 안을 찾았다면 그 안을 채택하여 코드에 반영합니다.

구조 소개

사용한 기술

이 도구는 하나의 Vite 플러그인이지만, 내부적으로는 역할이 다른 3개의 파트가 협력하여 작동합니다. 사용 중인 주요 기술은 다음과 같습니다.

영역	사용 기술	역할·보충
조작 UI (브라우저 상)	Preact + @preact/signals / Shadow DOM	요소 선택·지시 입력·베리에이션 전환. Shadow DOM을 사용하여 대상 앱의 스타일과 격리
...	Vite	플러그인의 호스트. HMR로 라이브 프리뷰
클릭 위치 매칭	Babel	클릭한 요소를 소스 위치에 대응시킴
베리에이션 격리	git worktree + git diff	각 안을 작업 트리에서 격리하여 테스트
데모 앱	React	-

전체 흐름 (시퀀스 다이어그램)

요소를 클릭한 후 안을 적용하기까지의 흐름을 시퀀스 다이어그램으로 나타내면 다음과 같습니다.

클릭한 요소를 소스에 대응시키기 (data-ui-source)

화면의 요소를 클릭했을 때, 그것이 소스 코드의 어디에 해당하는지 파악하지 못하면 AI는 어디를 수정해야 할지 알 수 없습니다. 이를 해결하기 위해 빌드 시 플러그인의 transform 훅을 사용하여, JSX 요소에 data-ui-source라는 속성을 자동으로 붙여줍니다.

속성 값은 "app 루트 상대 경로:행:열"입니다. 예를 들어 다음과 같은 속성이 빌드 시 자동으로 삽입됩니다.

<button data-ui-source="src/components/Playground.tsx:19:11">...</button>

구현 방식으로는 Babel로 소스를 AST로 파싱하고, 소문자로 시작하는 내장 요소(div...

또 button

등의 요소)에 대해 속성을 추가하고 있습니다. 클릭되었을 때는 이 속성을 읽는 것만으로 소스 상의 정확한 위치로 돌아갈 수 있습니다.

git worktree로 여러 안을 안전하게 시도하기

여러 안을 즉시 비교해 보고 싶기 때문에, 각각의 UI 코드는 작업 트리 (working tree)로부터 격리하고 싶습니다. 여기서 사용하고 있는 것이 git worktree입니다. 베리에이션 (variation)마다 worktree를 전환하고, 그 안에서 코드를 수정하고 있습니다.

git worktree add <variant용 디렉토리> HEAD

원래의 작업 트리에는 손을 대지 않으므로, 안을 생성 및 프리뷰 (preview)하는 동안 메인 작업 트리에 영향을 주지 않습니다. 마음에 드는 안을 채택할 때만 메인 작업 트리에 적용합니다. 폐기할 때도 git reset과 같은 조작이 아니라 처음에 찍어둔 스냅샷 (snapshot)으로부터 되돌리기 때문에, 관계없는 변경 사항을 끌어들이지 않습니다.

마치며

만약 UI 디자인에 어려움을 느끼시는 분이나, 편리할 것 같다고 느끼신 분이 계신다면 꼭 GitHub 리포지토리 (repository)에 접속해서 사용해 보세요!

Discussion