Cursor 디자인 모드로 시각적 이미지 편집 및 AI 채팅 연동 자동화하기
초급20분2026-04-03
Cursor의 디자인 모드를 활용하여 이미지 내 특정 영역을 시각적으로 지정하고 편집 지시사항을 작성합니다. 편집된 이미지와 지시사항을 AI 채팅에 입력하여 수정된 디자인이 반영된 React 또는 HTML 컴포넌트 코드를 생성합니다.
이 실습은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- Cursor 디자인 모드를 활성화하고 사용할 수 있다
- 이미지의 특정 영역을 선택하고 편집할 수 있다
- 편집된 이미지를 AI 채팅창에 연동하여 코드를 생성할 수 있다
어떻게 진행해요
1. 샘플 이미지 준비하기
2. Cursor 디자인 모드 활성화
3. 이미지 영역 선택 및 편집
4. AI 채팅으로 넘기고 코드 생성하기
AI 튜터가 각 단계를 하나씩 안내해줄 거예요