저번시간에 예고했던대로 이미지 슬라이드 배너를 chatGPT로 구현하는 방법을 알아보겠습니다.
즉 chatGPT 프로그래밍 혹은 chatGPT 코딩 혹은 chatGPT 웹사이트 제작을 알아보도록 하겠습니다.
들어가기에 앞서, chatGPT로 이미지 슬라이드 배너를 구현하는것은 구체적으로 chatGPT가 사용자의 요구에따라 HTML/CSS/JS 코딩을 대신 해주는 개념 입니다.
그리고 chatGPT로 웹사이트를 구현하기 위해선 HTML/CSS/JS를 "직접 구현"하는 능력까진 필요 없을지라도, HTML/CSS/JS의 문법들을 "구분" 할수 있는정도의 능력은 필요합니다.
위 이미지와 같은 케러쉘을 구현하기위해 키워드 들을 떠올려 봅시다.
”이미지 3개“
”각각의 이미지가 7초의 간격으로 자동으로 슬라이드 됨“
”별도의 버튼은 필요없음“
”이미지의 중앙에 별도의 텍스트가 존 재“
”한화면에 이미지가 꽉참“
이제 이것을 단계별로 다음과 같이 chatGPT에게 정리하여 요구하면 됩니다.
이에 대한 chatGPT의 대답은 다음과 같습니다.
HTML:
<div class="carousel">
<img src="/images/imageslide/building1.jpg" alt="Image 1">
<img src="/images/imageslide/building2.jpg" alt="Image 2">
<img src="/images/imageslide/building3.jpg" alt="Image 3">
<button class="prev" onclick="prevImage()">Previous</button>
<button class="next" onclick="nextImage()">Next</button>
</div>
CSS:.
carousel {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
.carousel button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 18px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.carousel button.prev {
left: 0;
}
.carousel button.next {
right: 0;
}
JavaScript:
const images = document.querySelectorAll('.carousel img');
let currentImage = 0;
function showImage(n) {
images[currentImage].classList.remove('active');
currentImage = (n + images.length) % iimages[currentImage].classList.add('active');
}
function nextImage() {
showImage(currentImage + 1);
}
function prevImage() {
showImage(currentImage - 1);
}
showImage(currentImage);
위 코드들은 제가 chatGPT에게 "이미지 3개가 들어가는 케러쉘(=이미지 슬라이드 배너)를 구현해줘" 라고 요구했을때 chatGPT가 10초도 안되는 시간만에 구현해준 코드입니다.
이제 이 코드들을 복사해서 각자만의 툴 (cafe24 디자인 보관함에서 킬수있는 스마트 편집기 /VSC 등)으로 직접 테스트 해보세요.
테스트 결과 위 화면같이 구현이 됐는데요, 이미지 양옆에 버튼이 있어서 버튼을 누르면 이미지가 변경되는 방식입니다. 이제 이걸 7초마다 자동으로 변경되게끔 다음과같이 chatGPT에게 요구해보겠습니다.
HTML:
<div class="carousel">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
*HTML코드는 기존 그대로, 버튼부분만 삭제하도록 수정되었습니다.
CSS:
.carousel {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
JavaScript:
const images = document.querySelectorAll('.carousel img');
let currentImage = 0;function showImage(n) {
images[currentImage].classList.remove('active');
currentImage = (n + images.length) % images.length;
images[currentImage].classList.add('active');
}
function nextImage() {
showImage(currentImage + 1);
}
// 자동 슬라이딩 기능 추가
let intervalId = setInterval(nextImage, 7000);
function resetInterval() {
clearInterval(intervalId);
intervalId = setInterval(nextImage, 7000);
}
// 마우스가 이미지 위에 있을 때 슬라이딩 멈추기
const carousel = document.querySelector('.carousel');
carousel.addEventListener('mouseenter', () => {
clearInterval(intervalId);
});
// 마우스가 이미지 위에서 벗어날 때 다시 슬라이딩 시작
carousel.addEventListener('mouseleave', () => {
resetInterval();
});
showImage(currentImage);
*위 코드에서, 빨간부분은 chatGPT가 사용자가 요구하지 않아도 알아 서 추가해준 부분입니다.본 예제에선 위 기능은 필요없다 판단하여 삭제하였습니다.
chatGPT가 구현해준 위 코드를 테스트해봅시다.
그 결과, 버튼이 사라지고, 7초마다 이미지가 자동으로 변경되는 것을 확인할수 있습니다.
화면 중앙에 텍스트를 추가하기에 앞서, 이미지 크기가 상하로 찌부되어 있으니 이미지의 크기를 늘리도록 다음과 같이 chatGPT에게 질문 해봅시다.
chatGPT의 조언에 따르면 css 파일의 .carousel 클래스의 “width”와 “height”부분을 조정시, 이미지를 조절할수있으므로 상대크기 단위인 “width:100vw”와 “height:100vh”로 변경해보겠습니다.
이미지가 정상적으로 “화면에 꽉차게” 늘어난 것을 확인할 수 있습니다.
마지막으로, 이미지 가운데에 텍스트를 올릴 수 있도록 chatGPT에게 요구해보도록 합시다.
chatGPT가 여기까지 코드를 구현해주었을 때, 중간에서 스톱을 눌렀습니다. 이유는 우리가 구현하고자 하는 텍스트 태그는 이미지의 변화와 상관없이 불변한 하나의 태그만 존재하면 되는데 위의 코드는 각 이미 지마다 텍스트 태그를 하나씩 구현하는 꼴이기 때문입니다. 따라서 중간에 chatGPT의 대답을 멈추고 다음과같이 다시 질문을 하였습니다.
위 이미지의 chatGPT의 대답에 따르면,
<div class="carousel-caption">
<h2>이미지 제목</h2>
<p>이미지 설명</p>
</div>
HTML에선 이부분만 추가하면 될것이고,
.carousel-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
padding: 10px;
}
CSS에선 이부분만 추가하면 될것입니다. 이것들을 추가하여 실행을 해봅시다.
실행결과 위 이미지와 같이 목표하고자 하던 케러쉘 즉 이미지 슬라이드 배너가 완성돼었습니다.
들어가기에 앞서 말씀 드린것처럼, HTML/CSS/JS 문법을 "구분"할수 있는 정도의 수준은 돼야 본 글을 이해하실수 있으셨을 겁니다.
HTML/CSS/JS를 전혀 몰라서 구분조차도 못하시는 분들에겐 외계어 혹은 나는 도저히 할수없는 어려운일 로 느껴지셨을지도 모르겠네요.
HTML/CSS/JS를 적당히 "구분" 할수 있는 정도의 능력을 가지는건 정말 쉽습니다. 넉넉한 마음으로 천천히 진행해도, 시간이 그리 오래 걸리지 않을겁니다.
다만 이정도의 능력으론 간단한 웹사이트 구현조차도 사실살 불가능 했습니다만,
chatGPT가 있기때문에 그냥 구분 하는 정도의 능력만으로도 웹사이트를 만들수 있는 범위가 무궁무진 해졌습니다.
최소 몇년을 투자해야 가질수있는 개발능력을, 몇주~한달만 설렁설렁 공부해도 개발할수 있게끔 chatGPT가 도와준다 라고해도 과언이 아닐겁니다.
아무튼, 앞으로 저는 카페24 모듈을 활용한 개발과 더불어 chatGPT 프로그래밍, chatGPT코딩, chatGPT 웹사이트 개발을 동시에 기재할 생각입니다.
이 두가지 능력을 적절히 혼합하다보면, CAFE24를 통한 쇼핑몰/기업 홈페이지 구축 및 운영에 아주 큰 힘을 갖게될것입니다.