디자인 시안이 넘어왔는데 코드가 없다. 색상 코드, 폰트 패밀리, 간격값을 하나씩 뜯어서 컴포넌트로 옮기는 일을 반복해본 적 있다면, 이 글이 바로 그 시간을 줄이는 방법을 다룬다. Claude Code가 URL 하나로 시각 정보를 읽고 수정 가능한 컴포넌트 초안까지 뽑아주는 흐름이 실제로 가능한지, 어떻게 검증하는지 순서대로 정리했다.
1. 왜 지금 이걸 봐야 하나
프론트엔드 작업에서 UI 복제는 크게 두 단계로 나뉜다. 첫째, 시각 정보를 파악하는 단계(색상, 폰트, 레이아웃, 간격). 둘째, 그걸 실제로 쓸 수 있는 코드로 옮기는 단계.
첫 번째 단계는 눈으로 보면 빠르다. 문제는 두 번째다. Figma 링크가 있어도 개발자가 토큰 하나씩 옮겨야 하고, 디자인이 업데이트될 때마다 그 작업이 반복된다. 스크린샷 기반 도구를 써봐도 결과가 이미지 수준에서 멈추거나, 나온 코드가 너무 날것이라 실무에 바로 붙이기 어렵다.
Claude Code가 최근 X에서 화제가 된 이유가 여기 있다. URL만 던지면 색상·폰트·레이아웃을 읽고, 그 자리에서 컴포넌트 초안을 만들어주는 데모가 공개됐다. 단순 복사가 아니라 이후에 수정이 가능한 코드로 나온다는 점이 핵심이다.
화면을 찍어서 비슷하게 구현하는 것과, 토큰이 살아있고 구조가 잡힌 컴포넌트를 받는 것 사이에는 실무 효율에서 큰 차이가 난다. 어느 쪽에 가까운지가 이 워크플로의 판단 기준이 된다.
2. 핵심 아이디어
결론부터: Claude Code에 URL을 입력하면, 페이지의 시각 구조를 분석해 React(또는 지정한 프레임워크) 컴포넌트 초안으로 변환해준다. 이때 색상은 CSS 변수나 Tailwind 토큰으로, 폰트는 font-family 스택으로, 레이아웃은 Flexbox/Grid 구조로 정리된다.
이 과정이 기존 방식과 어떻게 다른지 표로 정리하면 다음과 같다.
| 방식 | 색상 추출 | 코드 출력 | 수정 가능성 |
|---|---|---|---|
| 스크린샷 → 수동 옮기기 | 직접 색상 피킹 | 없음 | 처음부터 작성 |
| Figma Dev Mode | 토큰 단위 확인 | CSS 스니펫 | 붙이기 후 조정 필요 |
| Claude Code URL 입력 | 자동 분석 | 컴포넌트 구조 초안 | 즉시 수정 가능 |
단, "초안"이라는 말을 주의해야 한다. 완성 코드가 아니라 시작점이다. 구조가 잡혀있고 토큰이 분리돼 있다는 것이지, 그대로 프로덕션에 올리면 안 된다. 이 차이를 놓치면 3섹션의 검증 단계를 건너뛰게 된다.
3. 바로 따라하는 방법
Claude Code를 설치한 환경에서 아래 순서대로 진행한다. 터미널에서 작업 디렉터리로 이동한 뒤 시작한다.
Step 1 — 프로젝트 초기화
# 기존 React 프로젝트가 없다면
npx create-react-app my-clone-app --template typescript
cd my-clone-app
Step 2 — Claude Code 실행 후 URL 전달
claude
Claude Code 인터랙티브 모드가 열리면 다음처럼 입력한다.
이 URL의 UI를 분석해서 React + TypeScript 컴포넌트로 초안을 만들어줘.
색상은 CSS custom properties로, 레이아웃은 Flexbox 기반으로 잡아줘.
URL: https://example.com/target-page
Step 3 — 출력 확인
Claude Code가 생성한 파일을 확인한다.
# 생성된 컴포넌트 목록 확인
ls src/components/
# 색상 토큰이 제대로 분리됐는지 확인
grep -r "var(--" src/components/
기대 출력 예시:
src/components/
HeroSection.tsx
NavBar.tsx
CardGrid.tsx
tokens.css
tokens.css 안에 색상 변수가 정리돼 있어야 한다.
/* tokens.css — 예시 */
:root {
--color-primary: #1a1a2e;
--color-accent: #e94560;
--font-heading: 'Inter', sans-serif;
--spacing-section: 64px;
}
Step 4 — 렌더링 확인
npm start
브라우저에서 원본 URL과 나란히 열어 색상, 폰트, 레이아웃 간격 세 가지를 먼저 비교한다.
4. 운영할 때 조심할 점
인증이 필요한 페이지는 분석 범위가 줄어든다. 로그인 후에만 보이는 대시보드나 어드민 UI는 Claude Code가 URL만으로 접근할 수 없다. 이 경우 Figma 링크나 스크린샷을 함께 제공하는 방식으로 우회한다.
폰트 라이선스는 별도로 확인한다. 분석 결과에 font-family: 'Söhne' 같은 유료 폰트가 포함될 수 있다. 코드에서 폰트 이름이 자동으로 들어왔다고 해서 사용 권한이 생기는 건 아니다. 라이선스 확인 후 오픈소스 대체 폰트로 교체하는 과정이 필요하다.
반응형 분기점은 데스크톱 기준으로만 나온다. Claude Code가 URL을 분석하는 뷰포트는 보통 데스크톱 너비다. 모바일 레이아웃까지 필요하면 모바일 스크린샷이나 별도 지시를 추가해야 한다.
# 모바일 분기점 추가 요청 예시
claude
> 위 컴포넌트에 375px 기준 모바일 레이아웃을 Tailwind breakpoint로 추가해줘
동적 인터랙션은 초안에 없다. 호버 효과, 애니메이션, 드롭다운 동작은 정적 분석으로는 잡히지 않는다. 구조 초안을 받은 뒤 인터랙션은 직접 추가해야 한다.
코드 품질 검토는 PR 단계에서 반드시 한다. 생성된 코드에 중복 스타일, 인라인 스타일 혼재, 접근성 속성 누락 등이 있을 수 있다. 바로 머지하지 말고 리뷰 단계를 거친다.
자주 묻는 질문
Claude Code UI 복제 워크플로는 언제 쓰는 게 좋을까?
기존 서비스 화면을 참고해 새 프로젝트에 비슷한 구조를 빠르게 잡아야 할 때 가장 효과적이다. 디자인 시안은 있는데 코드가 없는 상황, 또는 레거시 HTML에서 컴포넌트 기반으로 마이그레이션하는 작업에도 유용하다. 완전히 새로운 디자인을 만드는 용도보다는, 이미 있는 UI를 작업 가능한 코드 형태로 빠르게 가져오는 용도에 맞다.
적용하기 전에 무엇을 확인해야 할까?
대상 URL이 공개 접근 가능한지, 사용 중인 폰트와 이미지 에셋의 라이선스가 허용 범위인지 먼저 체크한다. 그다음 출력 형식(React, Vue, plain HTML 등)과 스타일링 방식(CSS Modules, Tailwind, styled-components)을 미리 지정하면 초안 품질이 높아진다. 아무 지시 없이 URL만 던지면 Claude Code가 기본값으로 판단하는데, 그 결과가 프로젝트 컨벤션과 맞지 않을 수 있다.
결과가 제대로 나왔는지 어떻게 검증할까?
색상 토큰, 폰트, 레이아웃 세 가지를 기준으로 본다. 색상은 원본 페이지의 배경·텍스트·강조색을 브라우저 개발자 도구로 확인한 뒤 생성된 CSS 변수값과 대조한다. 폰트는 computed 스타일에서 font-family를 확인한다. 레이아웃은 원본과 나란히 띄워 간격과 정렬을 육안으로 비교하고, 픽셀 단위 오차보다는 구조적 일치 여부를 먼저 본다.
마무리
Claude Code에 URL을 던지면 색상 토큰이 분리된 컴포넌트 초안이 나온다. 완성 코드가 아니라 수정 가능한 시작점이라는 걸 기억하고, 폰트 라이선스 확인과 모바일 분기점 추가, PR 리뷰를 건너뛰지 않으면 실무에서 쓸 수 있는 워크플로가 된다.
🐦 X에서 더 빠르게: @baegseungh7061
📚 이 시리즈 더 보기: 전체 글 목록
💌 새 글 알림: X 팔로우 또는 블로그 RSS 구독