제품 사진과 정보로 상품 상세페이지 만들기
사진과 디자인이 들어 있는 시작 파일에, 원하는 구성과 가격을 넣어 완성해요.
ChatGPT 로그인과 파일 생성 기능이 필요해요. PC에서 HTML 파일을 받아 브라우저로 열어요.

사진 아래 설명과 그래프도 볼까요?
큰 유자 사진 아래에 설명과 연구 그래프가 이어져요. 원물에 관한 연구와 완제품의 영양정보는 구분해서 읽어요.
상세 설명으로 이동01시작 파일을 올리고 부탁해요
아래 파일 하나를 받아 ChatGPT의 새 대화에 첨부하세요. 사진과 디자인은 이미 들어 있어요.
첨부한 상품 상세페이지의 디자인과 사진은 그대로 두고, 판매 구성을 12병 한 상자 29,800원으로 바꿔줘. 수량·합계·배송 계산까지 맞춘 HTML 파일 하나로 내려받게 해줘.
답변의 HTML 파일을 내려받아 더블클릭해 여세요. 사진도 파일 안에 있어 따로 옮기지 않아도 돼요.
첨부할 파일이나 받는 방법이 헷갈린다면
입력창 옆 첨부 버튼으로 hado-start.html을 올리세요. 완성 예시와 시작 파일은 서로 다른 파일이에요.
HTML은 브라우저에서 여는 웹페이지 파일이에요. 코드만 받았다면 “사진을 포함한 HTML 파일로 내려받게 해줘.”라고 이어서 부탁하세요. 직접 받아 열어 본 뒤 확인해요.
답변의 파일 링크를 열면 ChatGPT 라이브러리의 ‘다운로드’로 받을 수 있어요. 화면과 파일 전달 방식은 계정에 따라 달라질 수 있어요.
무료 계정에서 같은 기능이 되는지는 확인하지 않았어요. 한도나 결제 안내가 나오면 멈춰도 괜찮아요. 결과가 계정에 보관될 수 있으니 가상 자료로 연습하세요.
02열어 보고, 바꾸고 싶은 것만 말해요
한 상자는 배송비 포함 32,800원, 두 상자는 무료배송으로 59,600원인지 확인해요. 그다음 같은 대화에서 구성만 다시 바꿔 보세요.
같은 디자인으로 6병 한 상자 16,800원으로 바꿔줘. 사진과 글꼴, 배송 조건, 논문 내용은 그대로 둬. 수정한 HTML 파일을 내려받게 해줘.
새 파일을 받아 열고 6병 16,800원으로 바뀌었는지 확인하세요. 한 상자는 배송비를 더해 19,800원이에요.
내 상품을 소개하려면 무엇을 적으면 될까요?
“이 사진으로 상품 상세페이지 만들어줘.”처럼 시작해도 괜찮아요. 예시처럼 꾸미고 싶다면 시작 파일도 함께 주고 “이 디자인을 유지해줘.”라고 말하세요.
내 상품 사진과 확인한 상품명·구성·가격·배송 조건을 함께 첨부하세요. 아직 모르는 것은 ‘미정’이라고 적고, 고객 정보나 회사 기밀은 넣지 마세요.
시작 파일에는 가상 유자 음료의 사진과 설명이 들어 있어요. 다른 상품에 쓰려면 사진·설명·영양정보·출처도 그 상품에 맞춰 바꿔야 해요. 디자인 틀을 제공한 연습이며, 짧은 문장만으로 이 디자인을 처음부터 만든 예시는 아니에요.
무엇을 바꿨고 무엇을 확인했는지 내 말로 한 문장만 정리해 보세요.
실제로 판매하기 전에 확인해 주세요
유자 원물의 연구 결과는 이 음료의 함량이나 건강 효과가 아니에요. 다른 상품에 연구 수치를 그대로 쓰지 마세요. 원재료·알레르기·영양정보와 필요한 상품 표시를 실제 제품 기준으로 확인해야 해요.
배송과 교환·반품 조건도 확인하세요. 이 수업은 학습용 상품 페이지까지이며 주문·결제·회원 저장·쇼핑몰 등록 기능은 연결하지 않아요.
실제 아이폰 제작과 초보자 직접 확인은 아직 하지 않았어요. 체크한 내용은 저장하거나 전송하지 않아요.
다른 수업 보기