웹사이트 제작에 흥미가 붙어
다양한 웹사이트의 효과를 만들어 보는 중입니다.
얼마전부터 계속 보이는 한 광고가 있었는데요.
바로 이녀석 입니다.
웹사이트를 타고 들어가면
/
1) 로딩창 애니메이션 효과가 뜹니다
2) 3개의 게이지 바가 올라갑니다.
3) 새로운 팝업창이 뜨면서 안내문과 함께 “확인”버튼을 눌러야 합니다.
※ 개인적으로 저는 자동매매 (AI를 이용한 자동매매 포함) 은 별로 좋아하지 않고
이런 리딩 사이트도 좋아하지 않습니다. 단지 이 웹사이트의 효과를 구현해보고 싶었습니다.
1단계 : 동그란 로딩 애니메이션 효과와 “AI분석중..” 이라는 문구를 동그라미 안에 넣은 모습
2단계는 이 로딩 효과가 3초뒤에 종료된 이후에 게이지 바가 올라가야 합니다.
이후 다양한 시행착오를 겪었습니다
팝업창이 시간이 지나도 종료되지 않거나 효과가 제대로 구현되지 않거나 GPT가 코드를 생략하거나 중간에 멈추는 경우입니다.
그리고 마침내 구현하여
3단계의 팝업 코드를 만드는데 성공했습니다.
디테일한 색상과 폰트 굵기 등은 더 수정을 해야겠지만
GPT와 코드작성을 하며 느낀것은 다음의 것들입니다.
1) 코드작성을 잘 한다면 노코드의 한계를 뛰어넘을수 있다. 예를들면 이런 팝업창 효과는 아임웹에서 지원하지 않는 효과인데, 코드를 사용하여 지원하지 않는 효과까지 구현이 가능
2) GPT에게 상황설명을 자세히 잘 해주어야 한다. 예시이미지를 첨부해주면 더 좋다.
3) 코드를 짤때는 단계별로 한단계씩 완성시켜 나간다.
4) 수정을 할때는 동시에 여러개를 수정하지말고 한개씩 수정한다
5) HTML / 자바스크립트 기본적인 부분을 알아두면 훨씬 많은 도움이 된다. 기본적인건 익혀나가자. 처음에는 GPT에게 주석을 달아달라고 하자.
입니다.
GPT가 계속 중간에 끊어지는 이슈로 로그가 깔끔하게 정리가 되지 않아
로그를 다시 정리하여 보완하도록 하겠습니다.
완성코드
#9기_문과생도AI
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 분석중...</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: Arial, sans-serif;
background-color: #111;
color: white;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
}
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#loading-wrapper {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
#loading-content {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 100px;
height: 100px;
animation: spin 2s linear infinite;
}
#loading-text {
position: absolute;
font-size: 1em;
color: white;
}
#popup, #confirmation-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 400px;
padding: 20px;
background-color: #fff;
color: #000;
text-align: center;
border-radius: 10px;
z-index: 1000; /* 이 값을 증가시켜 최상단에 위치하도록 조정 */
}
.analysis-text {
position: absolute; /* 텍스트 위치를 절대적으로 지정 */
width: 100%;
height: 100%;
line-height: 20px; /* 텍스트를 수직 중앙에 위치 */
text-align: left; /* 텍스트를 왼쪽에 위치 */
padding-left: 10px; /* 내부 여백으로 왼쪽에 여유 공간 생성 */
z-index: 2; /* 텍스트를 바(bar) 위에 위치하도록 z-index 설정 */
color: #fff; /* 텍스트 색상은 흰색으로 설정 */
}
.analysis-item {
position: relative; /* 텍스트를 포함할 수 있도록 relative 설정 */
margin: 10px 0;
background-color: #ddd;
height: 20px;
border-radius: 5px;
overflow: hidden;
}
.analysis-bar {
position: absolute; /* 상대적 위치 설정 */
left: 0;
top: 0;
height: 100%;
width: 0%;
background-color: #3498db;
border-radius: 5px;
animation: fillBar 2s forwards;
z-index: 1; /* 바(bar)를 텍스트 뒤에 위치하도록 z-index 설정 */
}
button {
padding: 10px 20px;
margin-top: 20px;
font-size: 1em;
color: #fff;
background-color: #3498db;
border: none;
border-radius: 5px;
cursor: pointer;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fillBar {
from { width: 0%; }
to { width: 100%; }
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="loading-wrapper">
<div id="loading-content"></div>
<div id="loading-text">AI 분석중...</div>
</div>
<div id="popup">
<h2>분석 결과</h2>
<div class="analysis-item">
<div class="analysis-bar"></div>
<div class="analysis-text">차트분석 완료</div>
</div>
<div class="analysis-item">
<div class="analysis-bar"></div>
<div class="analysis-text">뉴스분석 완료</div>
</div>
<div class="analysis-item">
<div class="analysis-bar"></div>
<div class="analysis-text">시황분석 완료</div>
</div>
</div>
<div id="confirmation-popup">
<p>종목발굴이 완료됐습니다. 종목을 확인해보시겠습니까?</p>
<button id="confirm-btn">확인</button>
</div>
<script>
// 문서 로딩 완료 후 스크립트 실행
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function(){
document.getElementById('loading-wrapper').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
document.getElementById('popup').style.display = 'block';
setTimeout(function(){
document.getElementById('popup').style.display = 'none'; // 첫 번째 팝업 숨김
document.getElementById('confirmation-popup').style.display = 'block'; // 두 번째 팝업 표시
}, 5000); // 첫 번째 팝업이 사라지고 두 번째 팝업이 나타나기까지의 시간
}, 3000); // 초기 로딩 후 첫 번째 팝업 표시까지의 시간
// '확인' 버튼 클릭 이벤트 수정
document.getElementById('confirm-btn').addEventListener('click', function() {
document.getElementById('confirmation-popup').style.display = 'none'; // '확인' 버튼 클릭 시 두 번째 팝업 숨김
document.getElementById('overlay').style.display = 'none'; // 오버레이도 숨김
});
});
</script>
</body>
</html>