📘 UI SmartPicker: AI 기반 UI 편집 도구

UI SmartPicker는 브라우저와 VS Code를 연결하여 개발 생산성을 혁신적으로 높여주는 도구입니다. 브라우저에서 수정하고 싶은 UI 요소를 클릭하면, VS Code가 해당 소스 코드를 즉시 찾아주고, AI(ChatGPT, Claude 등)에게 전달할 수 있는 최적화된 프롬프트를 자동으로 생성해 줍니다.

✨ 주요 기능

🎯 정확한 코드 탐색: 복잡한 React/Vue/Angular 프로젝트에서도 스마트 매칭 알고리즘을 통해 정확한 파일과 라인 위치를 찾아냅니다.
📸 스마트 캡처: 요소의 전후 맥락을 파악할 수 있도록 적절한 여백을 포함하여 스크린샷을 찍습니다.
🤖 AI 프롬프트 생성: 코드 위치, 스크린샷, 화면 맥락이 포함된 프롬프트를 자동으로 생성하여 클립보드에 복사합니다.
🔌 간편한 연결: 로컬 서버 방식을 사용하여 설정 없이 즉시 작동하며, 필요시 포트를 변경할 수 있습니다.

📥 설치 방법

1. VS Code 확장 프로그램 (Server)

Visual Studio Code의 Extensions (Ctrl+Shift+X) 탭을 엽니다.
UI SmartPicker를 검색하여 설치합니다.
설치 후 VS Code 하단 상태바(Status Bar)에 Picker: 54321 아이콘이 표시되는지 확인합니다.

2. Chrome 확장 프로그램 (Client)

Chrome 웹 스토어에서 UI SmartPicker를 검색하여 브라우저에 추가합니다.
설치 후 툴바의 고정핀(📌)을 눌러 확장 프로그램 아이콘을 고정해 두면 편리합니다.

⚙️ 초기 설정 및 연결 (중요!)

이 도구는 **VS Code(서버)**와 **Chrome(클라이언트)**이 통신하는 방식으로 작동합니다. 특히 WSL 환경에서 개발할 경우, 브라우저(Windows)가 WSL 내부의 서버를 찾을 수 있도록 **Host(IP 주소)**와 Port(포트) 설정이 일치해야 합니다.

기본 설정 (WSL 최적화)

Host (서버 주소): 172.28.87.39 (현재 WSL IP 기본값)
Port (포트 번호): 54321

WSL 환경에서의 설정 방법

WSL의 IP 주소는 네트워크 환경에 따라 변경될 수 있습니다. 만약 연결이 되지 않는다면 다음 과정을 확인하세요.

WSL IP 확인: WSL 터미널에서 다음 명령어를 실행합니다.
```
hostname -I
```
Chrome 확장 설정:
- 브라우저 우측 상단 UI SmartPicker 아이콘 우클릭 > 옵션(Options) 클릭
- VSCode Server Host: 위에서 확인한 IP 주소를 입력 (예: 172.x.x.x)
- VSCode Server Port: 54321 입력 후 Save 버튼 클릭

🔧 세부 설정 변경

1. VS Code 설정 변경

File > Preferences > Settings (Ctrl+,) 메뉴로 이동합니다.
UI SmartPicker를 검색합니다.
Ui Smart Picker: Port: 원하는 포트 번호로 변경합니다.
- 서버는 저장 즉시 변경된 포트로 자동 재시작됩니다.

2. Chrome 확장 설정 변경

아이콘 우클릭 > 옵션(Options) 메뉴로 이동합니다.
VSCode Server Host: 서버가 실행 중인 주소 (기본: WSL IP)를 입력합니다.
VSCode Server Port: VS Code 설정과 동일한 포트 번호를 입력합니다.
Save 버튼을 눌러 설정을 저장합니다.

🚀 사용 가이드

VS Code 실행: 프로젝트 폴더를 열어두세요. (상태바에 Picker: 54321 확인)
Picker 활성화: 브라우저에서 UI SmartPicker 아이콘을 클릭합니다.
- 아이콘 배지가 **초록색(ON)**으로 변합니다.
요소 선택: 수정하고 싶은 UI 요소 위에 마우스를 올리고 클릭합니다.
- 요소가 초록색 박스로 하이라이트됩니다.
AI에게 요청:
- VS Code가 자동으로 해당 파일의 코드를 열어줍니다.
- 클립보드에 프롬프트가 이미 복사되어 있습니다.
- ChatGPT나 Claude 채팅창에 Ctrl+V (붙여넣기) 하세요.

UI SmartPicker (VSCode)

Liorium