재현할 화면 업로드
웹사이트, 인터페이스 또는 구성 요소의 선명한 스크린샷을 선택하세요. 전체 배치와 읽을 수 있는 글자를 포함하고, 특별히 신경 써야 할 부분은 짧게 입력하세요.
스크린샷을 넣고, 웹페이지를 받으세요
이미지 HTML 변환
스크린샷을 브라우저에서 열 수 있는 웹페이지로 바꿉니다. 레이아웃을 확인하고 글을 수정한 뒤 CSS가 포함된 반응형 HTML 파일을 다운로드하세요.
스크린샷
웹페이지나 인터페이스의 스크린샷 한 장을 올려 시작하세요.
여기에 스크린샷을 붙여 넣을 수도 있습니다. 큰 이미지는 변환 전에 축소합니다.
실제 결과 먼저 보기
HTML 웹페이지
실제 HTML 웹페이지 미리보기
스크린샷을 실제 HTML 페이지로
여기서 화면과 모바일 배치를 확인하고 글을 수정한 뒤 HTML 파일을 다운로드하세요.
스크린샷에서 웹페이지로
세 단계로 완성하는 HTML 파일.
빈 화면에서 시작하지 않고 이미지에 보이는 페이지를 재구성합니다. 다운로드 전에 실제 결과를 확인할 수 있습니다.
실제 웹페이지 확인
생성된 HTML이 바로 화면에 표시됩니다. 원본과 비교하고 모바일 배치를 확인한 뒤, 누락된 자료나 근사 표현에 관한 안내를 살펴보세요.
글을 다듬고 다운로드
도구에서 문구를 수정하고 .html 파일을 다운로드하세요. 브라우저에서 열거나 개발자에게 전달하고, 페이지 제작을 이어갈 수 있습니다.
실제 스크린샷 → HTML 변환 사례
다양한 레이아웃, 직접 확인하는 HTML 결과.
GPT-6 Luna로 실제 생성한 결과입니다. 원본 스크린샷과 생성된 페이지를 비교하고, 크레딧을 사용하지 않고 미리 보거나 HTML을 다운로드하세요.
처음 세 원본 화면은 이 사례를 위해 직접 만든 데모입니다. 모델에는 이미지와 요구사항만 전달했으며 원본 HTML은 제공하지 않았습니다. 예제 결과는 원본의 영어 문구를 유지합니다.
01 / 마케팅 웹사이트
랜딩 페이지
탐색 메뉴, 두 열로 된 첫 화면, 제품 도해, 장점을 소개하는 카드 세 개.
도해는 CSS와 SVG로 재구성했으며, 원본 이미지 파일을 추출한 것이 아닙니다.
02 / 요금제와 비교
요금 안내 페이지
요금제 세 개, 강조된 추천 요금제, 기능 목록과 비교 표.
가격과 문구를 유지합니다. 구매 버튼은 모양만 재현하며 결제에 연결되어 있지 않습니다.
03 / 전자상거래 레이아웃
상품 상세 페이지
상품 갤러리, 선택 항목, 가격, 배송 정보와 상품 설명.
상품 이미지는 대체 표시임을 명시했습니다. 장바구니와 결제 로직은 포함되지 않습니다.
04 / 데이터 중심 화면
분석 대시보드
지표 네 개, 시각화 영역 세 개, 탐색 메뉴와 다섯 행의 주문 표.
차트 모양은 근사치입니다. 이 사례는 반응형 화면 점검 후 모델로 한 번 수정했습니다.
최종 결과물
열어 볼 수 있는 페이지. 보관할 수 있는 파일.
최종 결과물은 HTML 웹페이지입니다. 생성 결과를 보는 데 개발 환경이 필요하지 않습니다.
.html
your-page.html
스타일이 포함된 독립형 HTML 문서입니다. 다운로드한 다음 Chrome, Safari, Firefox 또는 Edge에서 바로 열 수 있습니다.
스크린샷만으로 원본 사진, 별도 폰트 파일, 서버 기능을 복구할 수는 없습니다. 도구가 부족한 부분을 알려 주므로 필요한 자료를 바꾸거나 기능을 연결할 수 있습니다.
- 실제 화면부터 확인
저장하기 전에 모바일 너비를 포함한 실제 페이지를 확인하세요.
- 문구 직접 수정
코드를 쓰지 않고 브라우저에서 제목, 항목 이름, 본문을 수정할 수 있습니다.
- HTML과 CSS를 한 파일로
다운로드한 페이지를 여는 데 빌드나 프레임워크 설치가 필요하지 않습니다.
- 검토 사항 안내
대체 표시된 자료와 추정된 반응형 동작 또는 차트를 확인할 수 있습니다.
선명한 원본이 더 좋은 결과를 만듭니다
레이아웃을 알아볼 수 있게 준비하세요.
이미지 HTML 변환은 화면에 보이는 내용을 바탕으로 합니다. 몇 가지를 준비하면 결과를 훨씬 편하게 활용할 수 있습니다.
한 페이지 또는 한 영역씩 캡처
랜딩 페이지, 요금 영역 또는 인터페이스의 깨끗한 스크린샷을 사용하세요. 긴 웹사이트는 전체를 작게 압축하기보다 의미 있는 영역으로 나누어 변환하세요.
글자를 선명하고 온전하게 유지
가능하면 원본 스크린샷을 사용하고 탐색 메뉴, 제목, 카드의 가장자리를 포함하세요. 잘린 문구, 작은 글씨, 흐릿한 화면 사진은 재현을 어렵게 합니다.
외관과 기능을 구분
상품 페이지의 모양은 재현할 수 있지만 재고, 결제 로직, API는 스크린샷에 없습니다. HTML을 정적 시작점으로 활용하고 필요한 기능을 연결하세요.
공개 전 좁은 화면 점검
데스크톱 스크린샷에는 원래의 모바일 규칙이 나타나지 않습니다. 카드 배치, 탐색 메뉴 접근성, 표가 자체 영역 안에서 가로로 스크롤되는지 확인하세요.
변환 전 자주 묻는 질문
이미지 HTML 변환 안내
이미지를 HTML로 어떻게 변환하나요?
웹페이지나 인터페이스의 선명한 스크린샷을 올리고 필요한 요구사항을 입력한 뒤 ‘HTML로 변환’을 선택하세요. 실제 페이지를 데스크톱과 모바일로 확인하고 HTML 파일을 다운로드하면 됩니다. 결과를 사용하려고 코드를 복사할 필요는 없습니다.
웹페이지를 받나요, 코드만 받나요?
화면에 표시되는 웹페이지 미리보기와 CSS가 포함된 .html 파일을 받습니다. 다운로드한 파일을 두 번 클릭하면 브라우저에서 열 수 있습니다. 텍스트와 배치는 실제 HTML 요소로 구성하며, 스크린샷 전체를 웹페이지에 붙여 넣는 방식이 아닙니다.
무료로 이용할 수 있나요?
게스트는 가입 없이 하루 두 번 변환할 수 있으며 전체 서비스 처리량 제한이 적용됩니다. 무료 횟수는 네트워크 단위이며 UTC 자정에 초기화되므로 같은 네트워크에서는 공유될 수 있습니다. 로그인한 사용자는 완료된 변환마다 4크레딧을 사용합니다. 실패하거나 사용할 수 없는 결과는 무료 횟수 또는 크레딧을 돌려드립니다. 네 가지 예제는 무료로 확인하고 다운로드할 수 있습니다.
코딩 없이 결과를 수정할 수 있나요?
네. ‘페이지 글 수정’을 선택해 문구를 바꾸고 적용하세요. 미리보기와 다운로드 파일에 모두 반영됩니다. ‘생성된 글 복원’으로 처음 결과로 돌아갈 수 있습니다. 수정은 브라우저 안에서만 이루어지며 AI를 다시 호출하거나 데이터베이스를 변경하지 않습니다.
반응형 HTML과 CSS가 생성되나요?
스크린샷을 HTML과 CSS로 재구성하고 좁은 화면에 맞게 배치를 조정합니다. 다만 이미지는 한 가지 화면 크기만 보여 주므로 모바일 동작은 추정합니다. 두 미리보기를 확인하고 필요한 너비에서 다운로드 파일을 열어 보세요. 특히 복잡한 표와 대시보드는 점검이 필요합니다.
모든 이미지, 폰트, 상호작용이 재현되나요?
아니요. 스크린샷에는 원본 이미지 파일, 폰트, 소스 코드나 서버가 포함되어 있지 않습니다. 얻을 수 없는 사진과 복잡한 삽화는 설명이 붙은 대체 표시로 만들고 차트는 근사할 수 있습니다. 로그인, 결제, 검색 같은 기능은 연결되지 않습니다. 접기·펼치기 같은 HTML 기본 동작은 스크립트 없이 작동할 수 있습니다.
어떤 스크린샷이 적합한가요?
랜딩 페이지, 요금 안내, 상품 페이지, 대시보드 등의 선명한 PNG, JPG, WebP 이미지가 적합합니다. 한 번에 한 페이지나 영역을 올려 주세요. 작은 글자, 매우 긴 캡처, 화면을 찍은 사진, 잘린 조작 요소는 재현하기 어렵습니다. 최대 15 MB까지 지원하며 큰 이미지는 처리 전에 축소합니다.
HTML 파일을 제 웹사이트에 사용할 수 있나요?
내보낸 파일을 시작점으로 쓰거나 개발자에게 전달할 수 있습니다. 공개 전 사용 권한이 있는 자료를 추가하고 실제 링크, 폼, 기능을 연결하세요. 결과는 정적 HTML 문서이며 React 프로젝트, WordPress 테마, 호스팅된 사이트는 아닙니다.
생성 중 페이지를 떠나면 어떻게 되나요?
돌아온 후 작업 패널에서 백그라운드 작업 결과를 복구할 수 있습니다. 게스트 결과는 최대 한 시간, 로그인 사용자 결과는 최대 24시간 임시 보관합니다. 오래 보관할 HTML은 다운로드하세요. 브라우저 안에서 수정한 글은 저장된 작업 결과에 포함되지 않습니다.
다른 결과가 필요하신가요?