Cursor IDE로 술레 뽑는 룰렛 만들기
어
어둠의 개발자
Cursor IDE를 활용하여 간단한 룰렛 게임을 만들어 보았어요. 이 튜토리얼에서는 HTML, CSS, JavaScript를 사용하여 룰렛을 구현하며, 프롬프트를 어떻게 작성하면 좋을지 위주로 적어봤어요.
1. 프로젝트 준비
-
Cursor IDE에서 새 프로젝트 생성
-
새 프로젝트를 만든 후, 프로젝트 폴더 내에 다음 파일들을 생성합니다.
index.htmlstyle.cssscript.js
-
새 프로젝트를 만든 후, 프로젝트 폴더 내에 다음 파일들을 생성합니다.
-
각 파일의 역할
- index.html: 기본 문서 구조, 사용자 입력, 버튼 요소 등을 설정해요.
- style.css: 화면 배치와 디자인 요소를 설정해요.
- script.js: 룰렛 그리기, 회전 애니메이션, 결과 계산 등의 로직을 구현해요.
3. 프롬프트 작성
처음엔 아래 프롬프트로 시작했어요. 보통 그냥 만들어달라고 하면 쓸데없는 기능이 추가되거나 생각한 거랑 다른 결과물이 나올 가능성이 높기 때문에 만들 기능을 명시해달라고 요청했어요.
아래 기능들은 딱 생각했던 정도의 기능이어서 바로 만들어달라고 했어요.
만들어준 코드들은 아래와 같아요.
2. HTML 작성
아래 코드를 index.html 파일에 작성했어요.
3. CSS 스타일링
style.css 파일에 아래와 같이 작성하여 기본 레이아웃을 구성했어요.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
text-align: center;
}
h1 {
margin-bottom: 2rem;
color: #333;
}
.input-section {
margin-bottom: 2rem;
}
form {
display: flex;
gap: 1rem;
justify-content: center;
}
input {
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.roulette {
width: 300px;
height: 300px;
margin: 2rem auto;
border: 2px solid #333;
border-radius: 50%;
position: relative;
transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.player-slice {
position: absolute;
width: 50%;
height: 2px;
left: 50%;
top: 50%;
transform-origin: left;
background-color: #333;
}
.player-name {
position: absolute;
transform-origin: left;
left: 60%;
top: -10px;
}
.result {
margin: 1rem 0;
font-size: 1.2rem;
font-weight: bold;
min-height: 2rem;
}
.players-list {
margin-top: 2rem;
text-align: left;
}
.players-list ul {
list-style: none;
margin-top: 1rem;
}
.players-list li {
padding: 0.5rem;
border-bottom: 1px solid #eee;
}
@media (max-width: 600px) {
.roulette {
width: 250px;
height: 250px;
}
}
4. JavaScript로 룰렛 구현
script.js 파일에 아래 코드를 작성했어요. 이 코드는 룰렛의 각
구간을 그린 후, 버튼 클릭 시 회전 애니메이션을 실행하고, 회전이 멈추면 당첨된
구간을 계산해 알려줬어요.
```js
function initRoulette() {
const players = [];
const form = document.getElementById('playerForm');
const playersList = document.getElementById('playersList');
const roulette = document.getElementById('roulette');
const
spinButton = document.getElementById('spinButton');
const
result = document.getElementById('result'); function
addPlayer(name) {
players.push(name);
updatePlayersList();
updateRoulette();
spinButton.disabled =
players.length < 2;
} function
updatePlayersList() {
playersList.innerHTML =
players
.map(player =>
`<li>${player}</li>`)
.join('');
} function updateRoulette()
{
roulette.innerHTML = '';
const sliceAngle = 360 / players.length;
players.forEach((player,
index) => {
const slice =
document.createElement('div');
slice.className = 'player-slice';
slice.style.transform = `rotate(${index * sliceAngle}deg)`;
const nameLabel =
document.createElement('div');
nameLabel.className = 'player-name';
nameLabel.textContent = player;
nameLabel.style.transform = `rotate(${sliceAngle / 2}deg)`;
slice.appendChild(nameLabel);
roulette.appendChild(slice);
});
} function spin()
{
const rounds = 5; // 기본 회전 수
const randomDegree = Math.random() * 360; // 추가 랜덤
각도
const totalRotation = (rounds * 360) +
randomDegree;
spinButton.disabled = true;
result.textContent = '';
roulette.style.transform = `rotate(${totalRotation}deg)`;
setTimeout(() => {
const winningIndex = Math.floor(
(360 - (totalRotation % 360)) / (360
/ players.length)
);
result.textContent = `당첨:
${players[winningIndex]}`;
spinButton.disabled = false;
}, 3000);
} // 이벤트 리스너
form.addEventListener('submit', function(e) {
e.preventDefault();
const input =
document.getElementById('playerName');
const
name = input.value.trim();
if (name && !players.includes(name)) {
addPlayer(name);
input.value = '';
}
}); spinButton.addEventListener('click', spin);
} //
앱 초기화
document.addEventListener('DOMContentLoaded', initRoulette);
```
잘 만들어준 거 같은데 조금 아쉬운 부분들이 있어요.
- 디자인이 안 이뻐요.
- 영역 구분이 정확히 안되네요.
- 당첨 기준이 모호해요.
먼저 디자인을 개선해달라고 요청했어요.
짠! 아까보단 훨씬 나아졌네요.
그리고 2번을 해결하기 위해 아래와 같이 프롬프트를 작성했어요.
지금도 매끄럽진 않지만 아까보단 나아진 거 같아요.
이런 식으로 간단하게 룰렛을 만들어 볼 수 있었어요.
원래는 화살표가 가리키는 영역의 사람이 걸려야 하는데 자꾸 다른 사람이 걸리더라구요. 이건 로직을 몇번 고쳐달라고 했는데 개선이 잘 안 되서 코드를 보면서 직접 연구해봐야 할 거 같아요!