이종현

Posted on Jul 26

디자인 시안을 리액트 컴포넌트로 변환하는 드래그 캡처 워크플로우

디자인 시안을 보면서 리액트 컴포넌트를 직접 타이핑하는 작업은 생각보다 맥락 전달이 어렵다. 색상 코드, 패딩 값, 중첩 구조를 말로 설명하다 보면 프롬프트가 길어지고 LLM의 응답도 뭉개진다. PromptShot을 쓰면 디자인 시안에서 원하는 영역을 드래그해 캡처하고, 그 이미지와 프롬프트를 한 번에 클립보드에 담아 Cursor나 Claude에 곧바로 붙여넣을 수 있다. 결과는 완벽히 작동하는 리액트 컴포넌트 프로토타입이다.

디자인 요소를 리액트 코드로 변환할 때의 기술적 요구사항

리액트 컴포넌트 생성 프롬프트가 잘 작동하려면 LLM에 전달하는 맥락이 구체적이어야 한다. 텍스트만으로는 한계가 있다.

LLM이 유용한 컴포넌트 코드를 생성하려면 최소한 다음 정보가 필요하다.

시각 구조 — 요소의 배치, 계층, 여백
색상과 타이포그래피 — 정확한 값(#1A1A2E, font-size: 14px 등)
인터랙션 범위 — 버튼인지, 인풋인지, 카드인지
컴포넌트 경계 — 어디까지가 한 컴포넌트인지

이 정보를 텍스트 프롬프트로만 전달하려면 묘사에 상당한 공을 들여야 한다. 그리고 묘사가 조금만 부정확해도 LLM은 엉뚱한 구조를 만든다. 이미지를 함께 넘기면 이 비용이 줄어든다 — 시각 구조는 이미지 한 장이 훨씬 정확하게 전달한다.

현재 Claude, GPT-4o, Gemini 모두 이미지 입력을 지원하며, Cursor의 채팅 패널도 이미지를 붙여넣으면 비전 모델로 처리한다. 즉, 이미지와 텍스트 프롬프트를 함께 제공하는 멀티모달 접근이 리액트 컴포넌트 생성의 가장 직접적인 경로다.

컴포넌트 단위 영역 캡처와 프롬프트 생성 흐름이란?

컴포넌트 단위 캡처가 핵심이다. 전체 화면을 캡처하면 LLM이 어느 부분을 컴포넌트로 추출해야 하는지 판단을 스스로 해야 한다. 그 판단이 개발자 의도와 다를 수 있다.

PromptShot의 영역 캡처는 Alt+Shift+S로 시작한다. 단축키를 누르면 십자 커서가 나타나고, 원하는 영역을 드래그하면 그 영역만 PNG로 잘린다. Figma 미리보기, Storybook, 실제 서비스 화면 어디서든 동작한다 — 브라우저 탭이면 충분하다.

캡처한 직후의 흐름은 이렇다.

영역 드래그 → PNG 캡처
PromptShot 팝업에서 Alt+1(프롬프트 + 이미지 복사) 또는 Alt+2(이미지만 복사) 선택
LLM 도구에 붙여넣기

Alt+1을 선택하면 클립보드에 미리 작성된 LLM용 프롬프트 텍스트와 PNG 이미지가 함께 담긴다. Cursor 채팅 패널이나 Claude 웹 인터페이스에 Ctrl+V 하면 이미지와 프롬프트가 동시에 삽입된다.

이 흐름에서 중요한 점은 페이지 내용이 서버로 전송되지 않는다는 것이다. 캡처와 프롬프트 조합은 전부 브라우저 안에서 로컬로 처리된다.

PromptShot 이미지 데이터를 프롬프트와 함께 클립보드에 담는 방법

Alt+1로 복사하면 클립보드에 두 가지가 담긴다 — 프롬프트 텍스트와 PNG 이미지. 이 조합이 멀티모달 프롬프트의 핵심이다.

기본 프롬프트 템플릿은 캡처 영역을 리액트 컴포넌트로 만들어달라는 지시를 포함하지만, PromptShot 팝업에서 직접 편집할 수 있다. 리액트 컴포넌트 생성 프롬프트를 더 정밀하게 제어하고 싶다면 다음 요소를 추가하면 효과적이다.

추가 지시 항목	예시 표현	효과
스타일링 방식	"Tailwind CSS를 사용해줘"	프로젝트 스택에 맞는 코드 생성
컴포넌트 타입	"함수형 컴포넌트로 작성"	훅 패턴 자동 적용
상태 범위	"로컬 state만 사용"	Context나 Redux 불필요 시 명시
TypeScript 여부	".tsx 타입 선언 포함"	타입 안전성 확보
Props 설계	"재사용 가능하게 props로 분리"	하드코딩 방지

프롬프트 템플릿은 저장해두고 재사용할 수 있다. 같은 프로젝트에서 반복되는 컴포넌트 패턴(예: 카드, 모달, 폼 필드)이라면 템플릿을 고정해두면 캡처할 때마다 별도 작성이 필요 없다.

개발 환경에 컴포넌트 추출 붙여넣기 및 적용 방법

Alt+1로 복사한 내용을 Cursor에 붙여넣는 방법을 단계별로 정리했다.

Step 1 — Cursor 채팅 패널 열기

Ctrl+L로 사이드 채팅 패널을 연다. 여기에 Ctrl+V를 누르면 이미지와 텍스트 프롬프트가 함께 삽입된다. Cursor는 이미지가 붙여넣어지면 자동으로 비전 지원 모델(Claude Sonnet, GPT-4o 등)을 활성화한다.

Step 2 — 컴포넌트 파일 경로 지정

채팅 입력 전에 @파일명.tsx로 생성 위치를 지정하거나, 프롬프트에 직접 명시한다. 예를 들어 "이 이미지를 기반으로 src/components/PricingCard.tsx 파일을 만들어줘"라고 추가하면 Cursor가 해당 경로에 파일을 생성하거나 수정한다.

Step 3 — 생성된 코드 검토 및 Apply

Cursor가 코드를 생성하면 채팅 패널의 "Apply" 버튼으로 파일에 적용한다. 이때 diff 뷰가 열리므로 변경 사항을 확인하고 Accept할 수 있다.

Step 4 — Storybook이나 개발 서버에서 렌더링 확인

컴포넌트를 localhost에서 렌더링해보면 이미지와의 시각적 차이가 드러난다. 이 차이를 다시 캡처해 "이 부분의 패딩이 맞지 않는다"고 재프롬프트하는 방식으로 반복 개선이 가능하다.

Step 5 — Claude 웹에서 작업할 경우

Claude 웹 인터페이스(claude.ai)에서도 동일하다. 채팅 입력창에 Ctrl+V를 누르면 이미지 섬네일과 텍스트가 함께 첨부된다. 코드 블록으로 응답이 오면 그대로 복사해 IDE에 붙여넣는다. 파일 생성 자동화는 없지만, 설계 검토나 컴포넌트 구조 논의 단계에 적합하다.

이 워크플로우에서 반복 주기는 짧다. 캡처 → 붙여넣기 → 확인 → 재캡처의 루프가 한 화면 안에서 이루어진다. 컨텍스트 스위칭 없이 브라우저와 IDE만 오간다.

어떤 컴포넌트 유형에 드래그 캡처가 특히 유효한가?

모든 컴포넌트에 이 방식이 같은 효과를 내는 건 아니다. 시각적 복잡도가 낮은 컴포넌트는 텍스트 프롬프트만으로도 충분할 때가 많다.

드래그 캡처가 특히 효과적인 경우는 다음과 같다.

디자인 핸드오프 초기 단계 — Figma 링크를 받았지만 디자인 토큰이 코드로 연결되지 않은 상황
레거시 UI 클론 — 기존 서비스의 특정 영역을 새 프로젝트에 동일하게 재현해야 할 때
복잡한 카드·레이아웃 — 그리드 구조, 중첩 플렉스박스, 여러 상태(hover, disabled)가 있는 컴포넌트
서드파티 UI 참조 — 경쟁사나 레퍼런스 사이트의 특정 패턴을 구현할 때

반대로 순수 로직 컴포넌트(데이터 fetching, Context Provider 등)나 텍스트만으로 명확히 설명되는 컴포넌트는 굳이 캡처가 필요 없다. 시각 정보가 의사결정의 핵심일 때 이 방식이 가치를 발휘한다.

PromptShot 리액트 컴포넌트 생성 가이드와 AI 코딩 프롬프트 작성법을 함께 보면 워크플로우를 더 빠르게 세팅할 수 있다.

자주 묻는 질문

PromptShot이 캡처한 이미지는 외부 서버로 전송되나요?

아니다. 캡처와 클립보드 처리는 전부 브라우저 내부에서 로컬로 이루어진다. 페이지 내용이나 이미지 데이터가 PromptShot 서버로 전송되지 않는다. LLM API 호출은 사용자가 직접 붙여넣는 시점에 해당 LLM 서비스(Cursor, Claude, ChatGPT 등)로만 이루어진다.

Figma 미리보기 탭에서도 영역 캡처가 가능한가요?

가능하다. Figma 웹 앱은 브라우저 탭에서 실행되므로 Alt+Shift+S를 누르고 원하는 컴포넌트 영역을 드래그하면 캡처된다. Figma 플러그인이 필요 없다.

리액트 컴포넌트 생성 프롬프트에 어떤 내용을 추가해야 코드 품질이 높아지나요?

스타일링 방식(Tailwind, CSS Modules, styled-components), TypeScript 사용 여부, Props 구조, 상태 관리 범위를 명시할수록 LLM이 프로젝트 컨벤션에 맞는 코드를 생성한다. 이 항목들을 PromptShot 템플릿에 저장해두면 매번 작성하지 않아도 된다.

`Alt+1`과 `Alt+2`의 차이는 무엇인가요?

Alt+1은 LLM용 프롬프트 텍스트와 PNG 이미지를 함께 클립보드에 복사한다. Alt+2는 이미지만 복사한다. 이미 프롬프트가 준비된 상태에서 이미지만 추가하고 싶을 때 Alt+2를 쓴다.

Cursor 외에 어떤 도구에서 이 워크플로우를 쓸 수 있나요?

Claude 웹(claude.ai), ChatGPT, Gemini 등 이미지 입력을 지원하는 LLM이라면 동일하게 동작한다. 클립보드에서 이미지를 붙여넣을 수 있는 인터페이스면 충분하다. VS Code의 GitHub Copilot Chat도 이미지 붙여넣기를 지원하는 버전에서는 같은 방식으로 사용할 수 있다.

디자인 시안에서 리액트 컴포넌트 프로토타입까지의 거리는 맥락을 얼마나 정확히 전달하느냐에 달려 있다. PromptShot의 영역 드래그 캡처는 그 맥락 — 시각 구조, 색상, 레이아웃 — 을 이미지로 직접 넘기고, 텍스트 프롬프트와 함께 클립보드 한 번으로 LLM에 전달한다. 손으로 묘사하는 시간이 줄고, LLM이 컴포넌트 구조를 더 정확하게 잡는다. 디자인 컴포넌트 추출 속도를 높이는 PromptShot 가이드에서 구체적인 세팅을 확인해보자.