ChatGPT 웹 페이지의 스크린샷을 사용하여 HTML + CSS 코드 작성

스크린샷을 사용하여 HTML과 CSS 코드를 작성하는 방법

 

웹 페이지의 스크린샷을 저장한 후 drop&drag를 이용하여 웹 페이지에 구성되는 HTML과 CSS 코드를 만들어줍니다.

 

프로토타입으로 뭔가 퀵 하게 만들때 매우 편리해 보입니다.

 

[준비물]
1. Visual Studio Code

https://code.visualstudio.com/
2. Docker

Visual Studio Code - Code Editing. Redefined

https://www.docker.com/
3. Git

Docker: Accelerated Container Application Development

https://git-scm.com/
4. Open API 회원가입

Git

https://platform.openai.com/docs/overview

4 - 1. Open Api(API KEY) GPT-4버전 이어야 함

API KEY

4 - 2. 최소 10달러 결제
결제하는 이유는 10달러를 결제해야 GPT-4 API를 쓸수 있음 최초 결제 후 30분 기다려야 함
or
gpt 4 종량제 가입하면 됨(월 2만원 ~)

 

GPT-4 버전의 API를 사용하려면 아래와 같이 10달러를 결제 하고

 

실제 GPT-4 모델이 올라와 있는지 확인해야한다.

GPT 버전

 

5. screenshot-to-code 오픈소스 다운로드

https://github.com/abi/screenshot-to-code#-examples

5 - 1. 비쥬얼 스튜디오에 폴더를 생성 후 아래 소스 다운로드

git clone https://github.com/abi/screenshot-to-code.git

 

5 - 2. env 수정

깃 설명에는 backend에서 생성 하는걸로 나와있는대 실제론 screenshot-to-code 루트에 만들면된다.(두 개다 만들어도 상관없다.)

echo "OPENAI_API_KEY=sk-your-key" > .env

.env 파일에 open api 키 입력(인코딩 utf-8로 변경)

변경 안하고 컴포즈를 실행하면 인코딩 에러가 난다.

5 - 3. 도커 컴포즈 실행
docker-compse up -d --build

docker-compse

6. 접속
http://localhost:5173/

8. 테스트

스샷을 올려 본다 4가지 설정이 있으며 본인에게 맞는 설정의 코드로 변환시켜준다.

기본적으로 데스크탑 / 모바일버전도 생성해준다.

 

그럼 오늘도 보람찬 생존 ^.^