'html' 태그의 글 목록
후니 기록공간
개발공부기록/Electron 데스크톱 앱 개발
[Electron 데스크톱 앱 개발] #4: UI 디자인 개선하기 (랜덤 룰렛)
2026.09.15
✨ 목표지난 글에서는 Electron을 이용해 간단한 랜덤 룰렛 프로그램을 만들어봤습니다.이번 글에서는 기존에 만든 랜덤 룰렛의 화면을 조금 더 다듬어 실제로 사용할 수 있는 데스크톱 앱 형태로 개선해보겠습니다.이번 작업에서는 앱 창 크기부터 화면 구성, 색상, 참가자 관리 기능까지 함께 수정했습니다.🎨 앱 디자인 변경 후 완성된 화면✔️ 1. Electron 창 설정 변경하기먼저 main.js에서 Electron 창의 기본 설정을 변경합니다.기존에는 테스트를 위해 단순히 창의 크기만 지정했지만, 이번에는 실제 프로그램처럼 사용할 수 있도록 창의 크기와 배경색 등을 설정했습니다.const { app, BrowserWindow, Menu } = require('electron');const createW..
개발공부기록/Electron 데스크톱 앱 개발
[Electron 데스크톱 앱 개발] #3: 첫 번째 Electron 앱 만들기 (랜덤 룰렛)
2026.09.15
✨ 목표이번 글에서는 앞에서 준비한 Electron 개발환경을 이용해 간단한 랜덤 룰렛 프로그램을 만들어보겠습니다.단순히 Hello Electron!을 출력하는 것을 넘어, 직접 화면을 구성하고 버튼을 클릭하면 참가자 중 한 명을 랜덤으로 선택하는 프로그램을 만들어봅니다.이번에는 다음과 같은 기능을 구현해보겠습니다.랜덤 룰렛 화면 구성참가자 추가 및 삭제 룰렛 실행 랜덤 당첨자 표시 간단한 설정창 구성 처음부터 복잡한 기능을 만들기보다는 Electron에서 HTML, CSS, JavaScript로 데스크톱 앱을 만드는 과정을 직접 경험해보는 것을 목표로 하겠습니다.✔️ 1. 프로젝트 파일 구성하기먼저 #2에서 생성한 Electron 프로젝트를 그대로 사용합니다. 현재 프로젝트에는 다음과 같은 파일..