클라이언트가 스크린샷 한 장을 던지고 "이거랑 비슷하게 만들어주세요" 하면, 소스 파일이 없어서 하나하나 다시 그려야 했잖아요. 이제 그 스크린샷 자체가 편집 가능한 피그마 파일이 됩니다.
다들 이 상황 한 번쯤 겪었죠?
레퍼런스는 딱 이미지 한 장인데 소스 파일이 없는 상황, 디자이너라면 낯설지 않을 거예요. 경쟁사 앱 스크린샷, 오래된 프로젝트의 PNG 익스포트, 클라이언트가 메신저로 보낸 캡처 한 장 — 전부 다 "이거 참고해서 만들어주세요"로 시작하는 작업이죠.
Codia AI 측 설명에 따르면 디자이너의 86.5%가 완전한 페이지 하나를 설계하는 데 최소 하루 이상 걸린다고 해요. 스크린샷을 보고 그대로 다시 그리는 작업이면 시간이 더 들고요.
Figma가 906명의 디자이너를 조사한 자체 리포트에서도 흐름은 같아요. AI 도구 덕분에 더 빠르게 작업한다는 응답이 89%였어요. 스크린샷을 편집 가능한 레이어로 바꿔주는 플러그인도 그 흐름의 일부고요.
그래서인지 피그마 커뮤니티에는 2년 넘게 같은 질문이 꾸준히 올라와요 — "스크린샷을 편집 가능한 피그마 레이어로 바꿀 방법 없나요?"라는 스레드 하나가 조회수 2,486을 넘길 정도로요.
Codia의 작동 방식은 단순 이미지 삽입이 아니에요. 스크린샷을 업로드하면 AI가 레이아웃·텍스트·폰트·컴포넌트를 스캔해서, 텍스트박스·도형·그룹으로 구성된 실제 레이어 트리를 만들어줘요. OCR로 텍스트를 따로 뽑아내고, 리스트뷰·컨테이너 같은 구조도 구분해서 재구성해요.
그럼 어떤 도구를 써야 하는데?
스크린샷을 피그마로 바꿔주는 도구는 Codia 하나가 아니에요. 목적에 따라 답이 갈려요.
| 도구 | 강점 | 이럴 때 추천 |
|---|---|---|
| Codia AI | UI 구조 인식, HTML/PSD/PDF 입력 지원, 배치 API(최대 1,000장), 코드 생성 연계 | 대량 마이그레이션, 코드까지 이어지는 워크플로우 |
| image.to.design | 오토레이아웃 출력이 강함, 순정 피그마 플러그인 UX | 피그마 안에서만 끝내는 설계 작업 |
| Banani | 오토레이아웃 우선, 매끄러운 UX | 매일 반복하는 변환 작업 |
| Refore | 픽셀 단위 벡터화 모드 | 벡터 충실도가 중요한 작업 |
정확도만 놓고 보면 Codia와 image.to.design 사이에 큰 차이는 없어요 — 깔끔한 스크린샷 기준으로 5~10% 정도예요. 결과물 품질은 도구보다 원본 스크린샷 화질에 더 좌우된다는 뜻이죠.
다만 진짜 실무자 후기를 보면 도구 선택보다 더 자주 걸리는 문제가 있어요. 오토레이아웃이에요. 실사용 후기를 보면 무료 플랜은 1440×1440 이하 이미지만 처리되고, 오토레이아웃 기능은 아예 지원하지 않는다고 해요. "빠른 프로토타입 작업에는 충분히 쓸 만한 툴"이라는 평가와 함께요.
Codia의 공식 가이드도 이 지점을 인정해요. 자유형 레이아웃은 절대 위치로 고정되고, 로컬에 폰트가 없으면 기본 폰트로 대체된다고요. 변환은 초안을 만들어주는 것이지, 완성본을 만들어주는 게 아니에요.
흔한 실패 패턴 — 버튼이 눌러도 반응 없는 통 이미지로 나올 때
원인은 셋 중 하나예요. ① 스크린샷을 다시 캡처한 스크린샷(재인코딩 손실), ② 커스텀 CSS 스타일링, ③ 텍스트와 이미지가 겹친 경우. 해결은 원본 화면에서 새로 PNG를 뽑거나, 문제 버튼만 따로 크롭해서 변환하는 거예요.
3분 안에 시작하는 법
- Figma 커뮤니티에서 플러그인 설치
"Codia AI Design: Screenshot to Editable Figma Design"을 검색해서 추가하세요. - 계정 만들고 스크린샷 업로드
PNG·JPG·WebP 파일을 드래그&드롭하거나 피그마 안에서 바로 선택하면 돼요. - 필요한 영역만 잘라서 변환
전체 화면 대신 버튼·카드처럼 문제가 될 만한 요소만 따로 크롭하면 결과물이 더 깔끔해요. - 레이어 트리 검수
텍스트 편집 가능 여부, 그룹핑, 간격, 컴포넌트화가 됐는지 하나씩 확인하세요. - 오토레이아웃은 직접 잡기
Codia는 절대 위치로 나오니까, 반응형이 필요한 프레임은 오토레이아웃을 수동으로 적용해야 해요.
