Refero Styles vs Design Extractor
Design Extractor는 입력한 어떤 공개 URL에서든 DESIGN.md를 만들어요. 이 파일은 Google의 DESIGN.md 사양을 따르며, 페이지에서 고른 각 컴포넌트를 코딩 에이전트가 다시 만들 수 있는 HTML과 CSS 레시피로 제공해요. 각 레시피는 실제 사이트와 대조해 확인하거나, 확인하지 못한 경우 그 이유를 표시해요. 특정 국가의 방문자에게만 응답하는 사이트에서도 작동해요.
Refero Styles는 웹사이트 스타일을 모은 대규모 무료 라이브러리로, 각 스타일의 색상, 타이포그래피, 간격, 컴포넌트를 여러 형식으로 제공해요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
확인 (출처: styles.refero.design, 스타일 페이지 중 하나 및 스타일 사이트맵). 제공 내용과 가격은 바뀔 수 있으니, 결정하기 전에 해당 사이트를 확인하세요.
Design Extractor를 선택하는 이유
Google의 DESIGN.md 사양을 따라요
YAML 프런트매터에는 사양이 정의한 속성만 쓰고, 임의의 최상위 키는 없어요. 표준 섹션은 Overview부터 Do's and Don'ts까지 사양의 순서대로 배치돼요. 프런트매터의 컴포넌트 항목은 사양의 8개 속성만 리터럴 값으로 사용해요. 무료 DESIGN.md 검사기로 어떤 파일이든 확인할 수 있어요.
페이지에서 고른 컴포넌트마다 레시피 제공
페이지에서 고른 헤더, 푸터, 버튼, 입력 필드, 카드 등의 컴포넌트는 각각 레시피로 제공돼요. 리터럴 값을 쓴 정제된 HTML과 CSS이며, DESIGN.md의 Components 섹션 안에 들어가요. 각 레시피에는 구성 요소와 사이트에서 확인된 hover, focus 상태가 나열되어 있어서, 코딩 에이전트가 컴포넌트를 추측하지 않고 다시 만들 수 있어요.
실제 사이트와 대조해 확인
각 레시피는 단독으로 렌더링되어 실제 사이트와 대조 확인돼요. 렌더링된 구성 요소를 페이지에서 측정한 값과 비교하는 구조 일치 검사, 그리고 실제 요소를 새로 캡처한 이미지와의 픽셀 비교를 거쳐요. 실패한 레시피는 다시 만들어 다시 확인해요. 그래도 통과하지 못하면 그 이유를 표시하며, 검증된 것으로 제공하지 않아요. 결과 페이지에서는 컴포넌트가 얼마나 일치하는지, 사이트의 색상과 텍스트 스타일을 얼마나 반영했는지 보여 줘요: 갤러리의 Stripe를 확인해 보세요.
지역 제한 사이트에서도 작동
일부 사이트는 특정 국가의 방문자에게만 응답해요. 이런 이유로 추출이 실패하면 결과 페이지에서 국가 선택기를 제공하는데, 페이지가 열리는 것으로 확인된 국가가 먼저 나와요. 선택한 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). 추출이 실패하면 크레딧을 환불해 드려요.
나란히 비교
| Refero Styles | Design Extractor | |
|---|---|---|
| 사양 준수 | 제공하지 않음 | Google의 DESIGN.md 사양을 따라요: 프런트매터에는 사양의 속성만 있고 임의의 최상위 키는 없으며, 표준 섹션은 사양의 순서대로, 컴포넌트 항목은 사양의 8개 속성과 리터럴 값으로 제한돼요. |
| 컴포넌트 레시피 | 각 컴포넌트는 역할, 치수와 함께 글로 설명되며, HTML은 포함되지 않아요. | 헤더, 푸터, 버튼, 입력 필드, 카드 등 페이지에서 고른 각 컴포넌트를 Components 섹션에 정제된 HTML과 CSS 레시피로 제공해서, 코딩 에이전트가 다시 만들 수 있어요. |
| 실제 사이트와 대조 확인 | 제공하지 않음 | 예. 각 레시피는 단독으로 렌더링되어 실제 사이트와 대조 확인돼요: 구성 요소의 구조 일치 검사와 픽셀 비교. 통과하지 못한 컴포넌트는 그 이유를 표시하며, 검증된 것으로 제공하지 않아요. |
| 지역 제한 사이트 | 제공하지 않음 | 예. 일부 국가의 방문자를 차단하는 사이트라면, 실패한 추출에서 국가 선택기를 제공하고(페이지가 열리는 국가가 먼저 나와요), 그 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). |
| 서비스 성격 | refero.design의 UI 레퍼런스 제품인 Refero가 만든 웹사이트 스타일 무료 라이브러리(베타). | 생성기: 공개 URL을 입력하면 그 사이트의 DESIGN.md를 돌려줘요. |
| 원하는 웹사이트를 즉시 | 제공하지 않음 | 예. 공개 URL을 붙여 넣으면 바로 추출이 시작돼요. |
| 범위 | 스타일 사이트맵에 나열된 스타일 페이지 1,342개. | 모든 공개 웹사이트, 그리고 미리 추출한 브랜드 갤러리. |
| 스타일당 형식 | DESIGN.md(compact 및 extended), Tailwind v4, CSS 변수, 디자인 토큰. | DESIGN.md 하나. 프런트매터에 토큰, HTML과 CSS로 된 컴포넌트 레시피 포함. |
| 가격 | 둘러보기와 복사는 무료예요. | 선불 크레딧, 구독 없음. 팩은 US$5(50크레딧)부터이며, Pro 추출은 10크레딧이 들어요. |
| 최신성 | 스냅샷이에요. Apple 스타일은 2026-09-20에 추출되었어요. | 실행하는 순간의 실제 사이트에서 만들어요. |
| 에이전트 접근 | 각 스타일 페이지에서 Claude, ChatGPT, Cursor, Codex 등을 위한 Refero의 MCP로 연결돼요. | 어떤 URL이든 받는 추출 도구를 갖춘 원격 MCP 서버. Claude Code, claude.ai, ChatGPT, Codex, Cursor 등 클라이언트에서 사용할 수 있어요. |
| 브라우저 확장 프로그램 | 제공하지 않음 | 지금 보고 있는 탭을 추출하는 Chrome 확장 프로그램. |
Refero Styles에서 제공하는 것
- 다크 모드 SaaS나 에디토리얼 레이아웃 같은 분위기별로 둘러볼 수 있는 웹사이트 스타일 무료 라이브러리.
- 스타일당 여러 형식: DESIGN.md(compact 및 extended), Tailwind v4, CSS 변수, 디자인 토큰.
- Claude, ChatGPT, Cursor, Codex 등을 위한 Refero의 MCP 링크.
라이브러리 vs 원하는 URL을 즉시
Refero Styles에서 옮겨 오는 방법
- Design Extractor 홈페이지에 사이트 URL을 붙여 넣고 Pro 추출을 실행하세요.
- 결과를 저장소 루트에 DESIGN.md로 저장하고, AGENTS.md나 CLAUDE.md의 안내는 그대로 두세요. 직접 편집한 내용은 무료 DESIGN.md 검사기로 확인하세요.
- 또는 에이전트에게 맡기세요: MCP 서버를 연결하고 사이트를 추출해 달라고 요청하세요.
결론
라이브러리에 있는 사이트뿐 아니라 어떤 공개 사이트든, 실제 사이트와 대조해 확인한 컴포넌트 레시피가 담긴 DESIGN.md가 필요하다면 Design Extractor를 선택하세요. 지금 보이는 사이트의 모습을 읽고 Google의 사양을 따르며, 페이지에서 고른 컴포넌트마다 레시피를 제공하고, 통과하지 못한 레시피는 그 이유를 표시해요. 지역 제한 사이트도 추출할 수 있어요. 에이전트가 MCP로 실행할 수 있어요.
다른 비교
getdesign.md vs Design Extractor
미리 만들어진 DESIGN.md 파일을 큐레이션한 컬렉션과, 어떤 URL에서든 만드는 사양 준수 DESIGN.md(실제 사이트와 대조해 확인한 컴포넌트 레시피 포함)를 비교해요.
designmd.me vs Design Extractor
URL을 DESIGN.md로 바꾸는 두 생성기를 사양 준수, 컴포넌트 레시피, 실제 사이트와의 대조 확인, 가격 기준으로 비교해요.
TypeUI vs Design Extractor
탭의 스타일로 자체 템플릿을 채우는 TypeUI의 무료 Chrome 확장 프로그램과, 실제 사이트와 대조해 확인한 컴포넌트 레시피가 담긴 사양 준수 DESIGN.md를 비교해요.
FAQ
Refero Styles vs Design Extractor: 자주 묻는 질문
Refero Styles 및 Design Extractor에 대한 짧은 답변이에요. 2026-10-20에 확인했어요.
네. 2026-10-20 기준으로 styles.refero.design에서 스타일을 둘러보고 복사하는 것은 무료였어요. 페이지에는 refero.design의 Refero MCP로 연결되는 링크가 있어요.
아니요. Refero Styles에는 직접 URL을 제출하는 방법이 없고, 라이브러리에서 골라야 해요. Design Extractor는 실행하면 어떤 공개 URL에서든 DESIGN.md를 만들어요.
아니요. Design Extractor는 파일 하나를 만들어요. Google의 사양을 따르는 DESIGN.md로, 프런트매터에는 토큰이 담기고, 페이지에서 고른 각 컴포넌트는 정제된 HTML과 CSS 레시피로 담겨요. 코딩 에이전트가 이 파일을 읽고 프로젝트에서 쓰는 스타일을 작성해요.
각 컴포넌트 레시피를 단독으로 렌더링해 실제 사이트와 비교해요. 구성 요소를 페이지에서 측정한 값과 비교하는 구조 일치 검사, 그리고 실제 요소를 새로 캡처한 이미지와의 픽셀 비교를 거쳐요. 통과하지 못한 레시피는 그 이유를 표시하며, 검증된 것으로 제공하지 않아요.
2026-10-20 기준으로 스타일 사이트맵에는 스타일 페이지 1,342개가 나열되어 있었어요.
Design Extractor는 다른 국가에서 추출을 실행할 수 있어요. 이런 이유로 추출이 실패하면 결과 페이지에서 국가 선택기를 제공하고(페이지가 열리는 국가가 먼저 나와요), 그 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). 추출이 실패하면 크레딧을 환불해 드려요.