오리지널 디자인 소스가 사라졌거나 오래되었거나, 애초에 존재하지 않았던 웹사이트를 다시 디자인해야 하는 팀이 많습니다. 프로덕션 페이지는 종종 UI의 유일하게 정확한 버전이며, 이를 Figma로 수작업 트레이싱하는 데는 화면 하나당 며칠이 걸리기도 합니다.
웹사이트를 Figma로 바꾸는 방식은 이 문제를 해결합니다. Codia AI에 실시간 URL을 주거나 HTML/CSS를 붙여 넣으면, 편집 가능한 Figma 파일이 생성됩니다. 프레임, 텍스트 레이어, 컴포넌트, 디자인 토큰까지 포함됩니다. 디자이너는 프로덕션 페이지를 처음부터 다시 만들지 않고도 감사, 리디자인, 문서화, 디자인 시스템 추출을 할 수 있습니다.
관련 Codia 제품: Codia HTML to Figma.
이 가이드는 웹사이트-to-Figma와 스크린샷-to-Figma, HTML-to-Figma를 언제 써야 하는지, 랜딩 페이지 / SaaS 앱 / 이커머스 / 마케팅 사이트별 팁, 캡처 준비, 변환 후 정리까지 모두 다룹니다.
언제 웹사이트를 Figma로 변환할까
다음과 같은 상황에서는 이 워크플로를 선택하세요.
- 원본 Figma 파일이 없거나 오래되어서 프로덕션이 기준이 될 때
- 리디자인을 시작하면서 현재 페이지를 편집 가능한 기준점으로 삼고 싶을 때
- Figma 소스와 실제 배포본의 차이를 점검하고 싶을 때
- 경쟁사 조사를 하면서 단순 스크린샷이 아니라 편집 가능한 참고 자료가 필요할 때
- 실서비스 UI를 다시 Figma로 옮겨 디자인 시스템 작업에 활용하고 싶을 때
- 기존 페이지에서 디자인 시스템을 추출하고 싶을 때
- 인수받은 마케팅 사이트를 디자인 운영 체계 안으로 편입하고 싶을 때
웹사이트-to-Figma vs 스크린샷-to-Figma vs HTML-to-Figma
세 워크플로는 목적이 비슷하지만 입력값과 트레이드오프가 다릅니다.
| 워크플로 | 입력 | 가장 적합한 경우 |
|---|---|---|
| 웹사이트 to Figma | 실시간 URL | 페이지가 브라우저에서 열리고, 실제 CSS 계산값과 폰트명 같은 소스 수준 힌트가 필요할 때 |
| 스크린샷 to Figma | PNG/JPG | 라이브 페이지에 접근할 수 없을 때(유료 벽, 내부망, 삭제됨, 이미지밖에 없을 때) |
| HTML to Figma | 원본 HTML/CSS | 소스 코드를 가지고 있고 최대한 높은 충실도가 필요할 때 |
실무에서는 보통 세 가지를 섞어 씁니다. 현재 서비스나 경쟁사 사이트는 실시간 URL로, 영감 보드나 접근 불가한 자료는 스크린샷으로, 엔지니어링 중심 작업은 원본 HTML로 변환합니다.
워크플로
- URL과 뷰포트를 정합니다. 데스크톱, 태블릿, 모바일 중 무엇을 캡처할지 결정하고, 반응형 커버리지가 필요하면 각 브레이크포인트를 따로 캡처합니다.
- 페이지를 정리합니다. 쿠키 배너를 닫고, 팝업과 채팅 위젯을 내리고, 필요한 경우 로그인 상태를 맞추고, 폰트와 지연 로딩 이미지가 모두 뜰 때까지 기다립니다.
- 핵심 상태를 따로 캡처합니다. 내비게이션 열림, 모달 열림, 빈 상태, 요금제 토글, 호버 카드, 모바일 메뉴, 로그인 상태는 별도 작업으로 저장해야 합니다.
- 변환을 실행합니다. Codia AI가 레이아웃, 타이포그래피, 색상, 아이콘, 이미지, 컴포넌트 구조를 분석합니다.
- 결과를 Figma에서 엽니다. 캡처한 뷰포트마다 별도 프레임이 생성됩니다.
- 아래 체크리스트로 검토합니다.
- 내비게이션, 히어로, 기능 카드, 푸터, CTA 블록처럼 반복 섹션을 컴포넌트로 묶습니다.
시나리오별 팁
마케팅 랜딩 페이지
- 긴 페이지는 섹션 단위로 나눠 변환하세요. 히어로, 기능, 사회적 증거, 요금제, FAQ, 푸터를 따로 캡처하면 Auto Layout 구조가 더 깔끔합니다.
- 히어로 일러스트와 장식용 그라디언트는 보통 래스터로 들어옵니다. 팀에서 수정 가능성이 필요하면 디자인 시스템의 벡터 자산으로 교체하세요.
- 요금제 표는 해당 구간만 집중해서 캡처하면 더 잘 나옵니다.
- A/B 테스트 변형은 각각 따로 변환한 뒤 Figma에서 나란히 놓고 비교하세요.
SaaS 앱 화면
- 실제 제품 화면에는 개인화되었거나 민감한 데이터가 들어갈 수 있습니다. 데모 계정이나 빈 상태를 사용하세요.
- 사이드바, 상단 내비, 모달은 여러 화면에서 반복됩니다. 한 화면을 변환한 뒤 공통 크롬을 컴포넌트화하고, 같은 컴포넌트를 쓰는 추가 화면을 이어서 변환하세요.
- 빈 상태, 에러 상태, 로딩 상태는 원본 Figma에 빠져 있는 경우가 많아서 따로 캡처할 가치가 큽니다.
- 데이터 그리드나 테이블처럼 밀도가 높은 화면은 스크린샷 to Figma의 대시보드 팁을 참고하세요.
이커머스 사이트
- 상품 갤러리는 이미지 자리표시자로 들어오는 경우가 많으니 실제 상품 사진으로 교체하세요.
- 옵션 선택기, 사이즈 선택, 수량 스테퍼는 컴포넌트화하기 좋은 대상입니다.
- PDP, 장바구니, 결제 흐름을 함께 변환하면 구매 여정 전체를 반영한 디자인 시스템을 만들 수 있습니다.
경쟁사 리서치
- 경쟁사 랜딩 페이지를 편집 가능한 Figma 참고 자료로 변환하면, 단순한 스크린샷이 아니라 구조, 카피, 레이아웃, 시각적 위계를 분석할 수 있습니다.
- 여러 경쟁사 캡처를 하나의 Figma 파일에 묶어 나란히 비교하세요.
- 캡처는 영감과 분석 용도로만 쓰고, 1:1 복제는 피하세요. 발표나 배포 전에 반드시 자사 브랜드에 맞게 다시 다듬어야 합니다.
프로덕션 UI를 다시 Figma로 문서화
- 실제 제품의 트래픽이 높은 페이지부터 하나씩 변환하세요.
- 복구한 색상과 타이포 스타일은 가져온 뒤 Figma 라이브러리에 매핑하세요. 보고서가 시스템과 맞지 않는 색상이나 스타일을 표시해 줍니다.
- 이것이 "Figma 소스 vs 프로덕션" 드리프트를 줄이는 기반입니다.
변환 후 정리할 것
가져온 결과를 강력한 편집 가능한 초안으로 보고 아래를 확인하세요.
- 폰트. 웹 폰트는 Figma에서 처음 열 때 대체될 수 있습니다. 디자인 시스템의 폰트로 매핑하세요.
- 텍스트 스타일. 임시 타이포그래피를 디자인 시스템 토큰으로 바꾸세요.
- 아이콘. 래스터 아이콘은 라이브러리의 SVG 자산으로 교체하세요.
- 배경 이미지. 잘라내기를 정확히 하고, 필요하면 장식용 배경을 디자인 시스템 자산으로 교체하세요.
- 반복 섹션. 카드, 내비 항목, 버튼, 푸터를 Figma 컴포넌트로 묶으세요.
- 반응형 제약. 브레이크포인트를 넘나들어야 하는 프레임은 Auto Layout을 다시 구성하세요.
- 서드파티 위젯. 채팅 말풍선, 쿠키 배너, 분석 오버레이는 디자인 시스템에 들어갈 요소가 아닙니다. 제거하세요.
- 색상 토큰. 복구한 색상을 디자인 시스템의 색상 토큰에 매핑하세요.
흔한 함정
잘못된 뷰포트를 캡처하는 것. 1440px 캡처만으로는 375px에서 페이지가 어떻게 보이는지 알 수 없습니다. 필요한 브레이크포인트를 모두 캡처하세요.
오버레이를 닫지 않는 것. 쿠키 배너, 채팅 위젯, Hotjar 설문이 그대로 들어오면 정리 작업이 늘어납니다. 먼저 닫으세요.
개인화된 상태를 캡처하는 것. 실제 사용자 데이터, 이름, 내부 툴 화면이 섞이지 않도록 로그아웃하거나 데모 계정을 쓰세요.
긴 페이지를 한 번에 스크롤 캡처하는 것. 긴 페이지는 섹션별 캡처가 더 잘 변환됩니다.
인터랙션 상태를 빼먹는 것. 메뉴, 모달, 호버 카드, 빈 상태는 기본 캡처에 포함되지 않습니다. 별도 작업으로 저장하세요.
변환을 디자인 그 자체로 보는 것. 결과물은 기준선입니다. 그다음에 필요한 디자인 정리, 컴포넌트화, 리디자인 판단이 실제 작업입니다.
API와 배치 변환
한 번만 쓰는 디자인 작업이라면 플러그인과 웹 앱만으로 충분합니다. 하지만 에이전시가 수백 개 클라이언트 사이트를 옮기거나, 내부 팀이 전체 제품 표면을 문서화하거나, 디자인 운영팀이 시장별 브랜드 감사를 할 때처럼 많은 페이지를 처리해야 한다면 Visual Struct API를 사용할 수 있습니다. URL을 받아 페이지를 캡처하고, 구조화된 JSON을 반환해 Figma로 넘기거나 후속 디자인 파이프라인에 연결할 수 있습니다.
배치 엔드포인트는 대량 URL을 넣고, 처리가 끝나면 웹훅 콜백으로 알려 줍니다.
FAQ
어떤 웹사이트든 Figma로 변환할 수 있나요?
대부분의 보이는 웹 페이지는 유용한 편집 초안이 됩니다. 동적으로 많이 변하는 앱, 캔버스 중심 페이지(3D, WebGL), 개인화 화면은 추가 정리가 필요할 수 있습니다. 자동 캡처를 막는 사이트는 대신 스크린샷 기반 워크플로를 써야 합니다.
반응형 레이아웃도 캡처되나요?
지정한 뷰포트가 캡처됩니다. 반응형 커버리지가 필요하면 데스크톱, 태블릿, 모바일을 따로 캡처하세요.
인터랙티브 상태도 캡처되나요?
보이는 상태만 캡처됩니다. 메뉴, 모달, 호버 카드, 빈 상태는 별도 작업으로 저장해야 합니다.
변환된 파일에 실제 코드가 들어가나요?
아니요. Figma는 디자인 도구이고 코드 소스가 아닙니다. 웹사이트에서 코드로 가고 싶다면 웹사이트 → Figma → Figma to Code로 가거나, 스크린샷을 캡처한 뒤 바로 Screenshot to Code를 사용할 수 있습니다.
경쟁사 리서치에 도움이 되나요?
네. Figma 안에서 편집 가능한 참고 자료는 단순 스크린샷보다 분석과 리디자인 계획에 훨씬 유용합니다. 다만 반드시 영감용 자료로만 보고, 1:1 복제는 피하세요.
인증이 필요한 페이지는 어떻게 하나요?
로그인된 브라우저 세션이나 임시 데모 계정을 사용하세요. 민감한 고객 데이터가 캡처 입력값에 들어가서는 안 됩니다.
사이트 전체를 한 번에 변환할 수 있나요?
개별 디자인 작업이라면 페이지별로 캡처하세요. 수십~수백 페이지를 한 번에 처리해야 한다면 Visual Struct API의 배치 엔드포인트를 사용하세요.