Cursor AI 에서 원하는 부분만 확실히 수정하기

 

 

Cursor AI 에서 원하는 부분만 확실히 수정하기

- AI Agent에게 바로 수정을 명령하는 방법이 아닌, 수작업과 병행하는 방법입니다.

*간단하고 짜잘한 수정의 경우입니다.

 

 

 

- AI로 어느 정도 만들어진 상태에서 계속 AI로 수정하다보면 돈이 다 떨어집니다.

- 그래서 수작업 수정을 하게되었는데,

- 빌드하지 않고, 화면을 보면서 바로바로 실시간 수정이 필요했죠.

- 화면 띄우고, 엘리먼트 선택해서, 값들을 수정하는 정도 말이죠.

- 내부 브라우저와 인스펙터의 조합으로 UI를 제공하니, 매우 편리합니다.

- 수정이 된 상태에서 Apply를 통해 AI 에이전트에게 코드에 반영하는 거만 시키는거죠.

- 그럼 확실하게 내가 원하는 부분만 정확히 수정할 수 있죠.

 

 

 

 

 

 

 

1. npm run dev 실행합니다

- Cursor Terminal에서 npm run dev 실행후

- 상위의 : 로컬 주소를 클릭합니다.

  ( ctrl + 클릭 )

 

 

 

 

 

 

 

 

 

2. Open in Cursor Browser

- 커서 내부 브라우저를 열게합니다.

 

 

 

 

 

 

 

 

3. 화면분할 (Split Editor)

- 코드와 프리뷰 화면은 분리합니다.

 

 

 

 

 

 

 

 

 

4. 화면 위치 이동

- 그냥 드래그하면 떨어져 나오고, 스플릿한 화면으로 움직여야 합니다.

 

 

 

 

 

 

 

 

 

 

5. Select Element 로 화면에서 UI  선택하면 우측에 연동되어 보여짐

- CSS Inspector 아이콘을 클릭하면 컴포넌트 인스펙터 창이 열립니다.

- 엘리먼트 아이콘을 클릭해서 원하는 분분을 화면에서 선택하거나, 리스트에서 선택합니다.

 

 

 

 

 

 

 

 

 

6. 인스펙터에서 값들을 직접 수작업 수정하고, 코드에 적용하는 것은 AI에게 시키기

- 인스펙터 창이 수정하기 쉽게 되어있어, 엘리먼트 선택하고, 값들을 수정해보면서 실시간 확인한 후,

- 우측 상단 apply를 누르면 AI 에이전트에게 전달됩니다.

 

 

 

3개 변경사항이 있다고 뜬다.

에이전트 우측 아이콘을 클릭하여, 자동 수정을 하도록 한다. (Apply만 해도 자동 수정되기도 합니다)

 

 

 

AI가 알아서 코드를 수정하며, 에이전트의 좌측상단 파일명 클릭하면 실제 코드 페이지를 열어준다. 

그곳에는 수정된 영역이 표시되면. keep을 눌러줘서 영구히 수정 반영된 코드를 저장한다.

 

 

전체 화면 레이아웃입니다.

좌측에 파일브라우저창, 코드창, 중간에 브라우저 창이 있고, 우측에 인스펙터창, 그리고 옆에 에이전트

 

 

 

 

 

 

 

 

'반자동 수정하기' 순서입니다.

1. npm run dev / open cursor in browser 선택 / Inspector 창 열기

2. 수정하고 싶은 엘리먼트를 선택한다.

3. 인스펙터에서 값들을 수정한다.

4. Apply 누른다. (+에이전트 실행)

5. 수정 진행 완료되면 파일명이 뜨니, 그것을 클릭해서 코드를 확인하고, Keep버튼을 누른다.

 

끝

 

 

 

 

 

 

 

Ps.다른 방법으로 Development Tools를 열어서 수정해보는 방법도 있습니다. (ctrl+Shift+I)

 

 

 

 

 

 

 

 

 

BR.h