✨ 목표
이번 글에서는 앞에서 준비한 Electron 개발환경을 이용해 간단한 랜덤 룰렛 프로그램을 만들어보겠습니다.
단순히 Hello Electron!을 출력하는 것을 넘어, 직접 화면을 구성하고 버튼을 클릭하면 참가자 중 한 명을 랜덤으로 선택하는 프로그램을 만들어봅니다.
이번에는 다음과 같은 기능을 구현해보겠습니다.
- 랜덤 룰렛 화면 구성
- 참가자 추가 및 삭제
- 룰렛 실행
- 랜덤 당첨자 표시
- 간단한 설정창 구성
처음부터 복잡한 기능을 만들기보다는 Electron에서 HTML, CSS, JavaScript로 데스크톱 앱을 만드는 과정을 직접 경험해보는 것을 목표로 하겠습니다.
✔️ 1. 프로젝트 파일 구성하기
먼저 #2에서 생성한 Electron 프로젝트를 그대로 사용합니다.
현재 프로젝트에는 다음과 같은 파일이 있습니다.
electron-app
├─ node_modules
├─ .gitignore
├─ index.html
├─ main.js
├─ package-lock.json
├─ package.json
└─ README.md
이번에는 룰렛 화면을 구성하기 위해 CSS와 JavaScript 파일을 추가하겠습니다.
최종적으로 다음과 같은 구조를 만들 예정입니다.
electron-app
├─ node_modules
├─ .gitignore
├─ index.html
├─ main.js
├─ package-lock.json
├─ package.json
├─ README.md
├─ script.js
└─ style.css
💡 참고
이번 글에서는 별도의 프레임워크 없이 HTML, CSS, JavaScript를 이용해 기본적인 Electron 앱을 만들어봅니다.
✔️ 2. 룰렛 화면 만들기
먼저 index.html을 수정해 룰렛 프로그램의 기본 화면을 만들어보겠습니다.
여기서는 프로그램 제목과 룰렛 결과, 버튼, 참가자 목록 등을 배치합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>랜덤 룰렛</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>🎰 Random Roulette</h1>
<div id="result">
룰렛을 돌려보세요!
</div>
<button id="spinButton">🎲 룰렛 돌리기</button>
<h2>참가자</h2>
<ul id="participantList"></ul>
<input type="text" id="participantInput" placeholder="참가자 이름 입력">
<button id="addButton">참가자 추가</button>
<script src="script.js"></script>
</body>
</html>HTML에서는 프로그램에 필요한 기본적인 요소만 먼저 배치합니다.
이 단계에서는 아직 버튼을 눌러도 실제 기능은 동작하지 않습니다.
✔️ 3. 기본 화면 꾸미기
다음으로 style.css를 생성하고 프로그램의 기본적인 화면을 꾸며보겠습니다.
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 40px;
}
h1 {
margin-bottom: 40px;
}
#result {
font-size: 32px;
font-weight: bold;
margin-bottom: 30px;
}
button {
padding: 10px 20px;
margin: 5px;
cursor: pointer;
}
input {
padding: 10px;
margin-top: 20px;
}CSS를 적용하면 Electron 창에서 조금 더 프로그램다운 형태로 화면이 표시됩니다.
✔️ 4. 참가자 추가 기능 만들기
이제 JavaScript를 이용해 참가자를 추가하는 기능을 만들어보겠습니다.
script.js 파일을 생성하고 다음 코드를 작성합니다.
const participants = [];
const participantInput = document.getElementById('participantInput');
const participantList = document.getElementById('participantList');
const addButton = document.getElementById('addButton');
addButton.addEventListener('click', () => {
const name = participantInput.value.trim();
if (!name) {
return;
}
participants.push(name);
participantInput.value = '';
renderParticipants();
});
function renderParticipants() {
participantList.innerHTML = '';
participants.forEach((name) => {
const li = document.createElement('li');
li.textContent = name;
participantList.appendChild(li);
});
}이제 참가자 이름을 입력하고 참가자 추가 버튼을 누르면 참가자 목록에 이름이 추가됩니다.
✔️ 5. 랜덤 룰렛 기능 만들기
참가자 목록이 준비되었으니 이제 실제 룰렛 기능을 만들어보겠습니다. ( script.js )
const spinButton = document.getElementById('spinButton');
const result = document.getElementById('result');
spinButton.addEventListener('click', () => {
if (participants.length === 0) {
result.textContent = '참가자를 먼저 추가해주세요!';
return;
}
const randomIndex = Math.floor(Math.random() * participants.length);
const winner = participants[randomIndex];
result.textContent = `🎉 ${winner} 당첨!`;
});여기서는 참가자 배열에서 랜덤한 위치의 참가자를 선택합니다.
예를 들어 참가자가 다음과 같이 있다면,
짱구
철수
훈이
맹구
유리
룰렛 버튼을 클릭할 때마다 참가자 중 한 명이 랜덤으로 선택됩니다.
✔️ 6. Electron에서 실행
이제 지금까지 만든 프로그램을 Electron에서 실행해 보겠습니다.
VS Code 터미널에서 다음 명령어를 실행합니다.
npm start
정상적으로 실행되면 Electron 창에 우리가 만든 랜덤 룰렛 화면이 나타납니다.
참가자 이름을 추가한 후 🎲 룰렛 돌리기 버튼을 클릭하면 참가자 중 한 명이 랜덤으로 선택됩니다.
'개발공부기록 > Electron 데스크톱 앱 개발' 카테고리의 다른 글
| [Electron 데스크톱 앱 개발] #6: Electron 앱 설치 오류 원인 확인하기 (0) | 2026.09.16 |
|---|---|
| [Electron 데스크톱 앱 개발] #5: Electron 앱 패키징하기 (Windows 실행 파일 만들기) (0) | 2026.09.16 |
| [Electron 데스크톱 앱 개발] #4: UI 디자인 개선하기 (랜덤 룰렛) (0) | 2026.09.15 |
| [Electron 데스크톱 앱 개발] #2: Electron 개발환경 준비하기 (Node.js + Electron 설치) (0) | 2026.09.14 |
| [Electron 데스크톱 앱 개발] #1: Electron 입문, 데스크톱 앱 개발을 시작해보자 (0) | 2026.09.11 |