나만의 상품 상세 웹사이트 만들기

ChatGPT로 이미지와 HTML 생성부터 GitHub 배포까지 한 번에

Oct 26. 2025

웹사이트 제작, 특히 상품 상세 페이지를 만드는 일은 전통적으로 HTML/CSS와 디자인 기술이 필요했습니다. 그래서 많은 사람들이 머릿속에는 멋진 페이지를 그려놓고도, 손끝에서 그 꿈을 구현하지 못하고 답답해하곤 했습니다.

하지만 ChatGPT와 같은 대형 언어 모델(LLM)을 활용하면, 코딩 지식이 많지 않아도 즉시 사용가능한 HTML 코드와 이미지 파일을 생성할 수 있는 시대가 되었습니다. 그냥 말을 걸듯 설명만 하면, 금세 HTML 코드가 완성되고 이미지도 척척 만들어집니다.

웹페이지를 배포하는 것 또한 도메인 주소 및 호스팅 서비스 없이도 손쉽게 GitHub를 통해 무료로 배포할 수 있습니다.

AI로 웹페이지 제작의 문턱 낮추기

이 글에서는 저의 실습 과정을 중심으로, 누구나 따라할 수 있는 단계별 웹 제작과 배포 전략을 소개합니다.

단계 1 – ChatGPT로 HTML 및 이미지 만들기

상품 정보(상품명, 설명, 가격, 주요 특징 등)를 준비합니다.

ChatGPT 활용하여 아래와 같이 요청합니다.

프롬프트:

“이 상품 정보를 기반으로 상품 상세 페이지용 HTML 코드를 만들어줘”

“상품 이미지를 만들어줘"

“상품 이미지를 '상품명.png'로 해서 HTML 코드에서 연결해줘”

이 과정에서 불필요한 버튼이나 QR 코드, 공유 링크 등은 제거하고, 핵심 정보만 남기도록 조정할 수 있습니다.

ChatGPT에서 html 코드의 [미리보기] 버튼을 클릭하여, 화면이 제대로 표시되는지 확인합니다.

단계 2 – 로컬 환경에서 테스트

ChatGPT에서 생성한 HTML 코드를 복사합니다.

메모장을 열고, HTML 코드를 붙여넣은 후 [파일] 메뉴에서 [다른 이름으로 저장]을 선택합니다.

[파일 이름]을 index.html 로 입력하고, [파일 형식]은 '모든 파일(*.*)'을 선택합니다. 인코딩은 'URF-8'로 설정되어 있는 것을 확인합니다. 저장 위치를 선택하고 [저장] 버튼을 클릭합니다.

ChatGPT에서 생성한 PNG 이미지를 다운로드 받아 HTML 파일과 같은 폴더에 넣습니다.

index.html 파일을 더블클릭하여 웹브라우저에서 열리는 것을 확인하세요.

브라우저에서 바로 확인 가능하므로, 코딩 초보자도 쉽게 테스트할 수 있습니다.

단계 3 – GitHub에 올리기

GitHub 계정 생성(없다면) 및 로그인(있다면) 합니다.

새 Repository 생성합니다.

[Repository name] 칸에 이름을 적습니다. 예) product

로컬의 HTML 파일과 PNG 이미지를 GitHub에 업로드합니다.

저장소가 생성되면, 보이는 페이지에서 [uploading an existing file] 링크를 클릭하세요!

모든 파일을 드래그앤드롭으로 [Drag additional files here ...]칸에 넣으세요! 파일명이 뜨면, 하단의 [Commit chagnes] 버튼을 클릭합니다.

다음과 같이, 정상적으로 파일이 업로드 되었습니다.

GitHub Pages 활성화할 차례입니다. 상단의 [Settings] 탭을 클릭하세요.

Settings 페이지의 왼쪽 목록에서 [Pages] 항목을 클릭하세요.

Pages 페이지에서 [Source]는 "Deploy from a branch"로 되어 있고, 그 아래 [Branch]에서 "None"을 클릭하여 드롭다운 목록 중 "main"을 클릭하세요! 그러면 바로 옆에 [/(root)] 드롭다운 목록과 [Save] 버튼이 등장할텐데, [Save] 버튼을 클릭합니다.