브라우저OS: 웹 기반 마이크로 운영체제 UI 샌드박스

Introduction

BrowserOS is a highly ambitious and impressive project that simulates a functional, customizable desktop operating system environment entirely within a single browser tab. It showcases a robust, OS-like user experience built from the ground up with modern web technologies.

This project demonstrates a deep understanding of browser APIs, efficient DOM manipulation, and complex application architecture, resulting in a smooth and performant interactive experience.

Features

• Advanced Windowing System: A complete window management system where windows can be dragged, resized, minimized, maximized, and closed. It includes z-index management to handle window focus and overlap.
• Desktop Environment: A familiar desktop interface with a dynamic wallpaper and a grid for icons.
• Taskbar & Start Menu: A fully functional taskbar that displays open applications and a start menu for discovering and launching all available apps.
• Persistent Virtual File System (VFS): Leverages IndexedDB to create a persistent in-browser file system. Users can create, read, and manage virtual files and folders, with all changes saved across browser sessions.
• Drag-and-Drop Icons: Desktop icons can be freely dragged and rearranged to organize the workspace.
• Core Applications: A suite of essential mini-applications to demonstrate the OS's capabilities:
  • File Explorer: Browse and interact with the virtual file system.
  • Calculator: A simple, functional calculator for basic arithmetic.
  • Rich Text Editor: A basic text editor with formatting options and the ability to save files to the VFS.
  • Terminal: A command-line interface to interact with the VFS using commands like ls and cat.
  • Settings: An application to personalize the OS, starting with custom desktop wallpapers.
• Personalization: Users can customize their desktop wallpaper by providing a URL, and the setting persists across sessions.
• Centralized State Management: Utilizes a Redux-like pattern for robust and predictable management of application, window, and system state.
• Modular Architecture: The code is organized into clean, reusable modules and components (UI, services, apps).

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6+): The primary language for all logic and functionality.
• IndexedDB: For the persistent Virtual File System.
• No external frameworks or libraries: Built entirely with vanilla JavaScript to showcase core web development skills.

Demo: Running Locally

This project is designed to be simple to run. No complex build steps or dependencies are required.

Step 1: Clone the Repository

First, clone this repository to your local machine using Git:

git clone <repository-url>
cd browser-os-sandbox

Step 2: Serve the Project

Because browser security policies restrict file:// access for features like ES6 Modules, you need to serve the files from a simple local web server.

If you have Python installed, you can use its built-in HTTP server.

For Python 3:

python -m http.server 8000

For Python 2:

python -m SimpleHTTPServer 8000

If you have Node.js installed, you can use the serve package:

npx serve .

Step 3: Open in Browser

Once the server is running, open your favorite web browser and navigate to:

http://localhost:8000

You should see the BrowserOS desktop environment load and be ready to use.