이지웹 스쿨
EasyWeb School
처음 쓰는 학생을 위한 안내 Guide for beginner students
웹 프로젝트를 만들고 테스트하는 방법 How to create and test web projects
1. 개요 Overview
이지웹 스쿨은 학생들이 웹 브라우저나 데스크톱 앱 환경에서 직접 HTML, CSS, JavaScript 코드를 입력하여 웹사이트를 만들고 바로 테스트할 수 있는 학습용 도구입니다. 구동되는 기기와 환경에 따라 저장되는 방식에 미세한 차이가 있으므로 본 사용 방법을 충분히 읽고 안전하게 코드를 관리해 보세요.
EasyWeb School is an educational tool that allows students to write HTML, CSS, and JavaScript code to build websites and test them instantly in browsers or desktop app environments. Since saving behaviors slightly differ depending on the device and platform, please read this guide carefully to keep your code safe.
2. 프로젝트 시작 방법 Starting a Project
이지웹 스쿨에서는 코딩을 연습할 때 크게 두 가지 방식으로 프로젝트를 설계해 나갈 수 있습니다.
In EasyWeb School, you can design your coding practice in two main ways.
2.1. index.html 하나로 코딩 시작하기 Start with a Single index.html File
처음 웹사이트 만들기를 배우거나 짧은 시간 동안 실습을 할 때는 하나의 index.html 파일 안에 모든 코드를 다 적는 것이 가장 쉬워요.
- 어떻게 하나요? 메인 화면에서
[새 프로젝트 시작]을 누르고, 프로젝트 이름을 쓴 뒤index.html파일 하나만 체크해서 만들면 돼요. - 좋은 점: 여러 파일을 왔다 갔다 하지 않아도 되어 편리해요. 인공지능(AI)에게 코드를 물어볼 때도 "파일 하나로 합쳐서 짜줘"라고 부탁하면 간단하게 복사해서 붙여넣을 수 있어요.
- 코드 작성 요령: 웹사이트에 들어갈 글이나 그림(HTML)은 평소대로 쓰고, 꾸미는 코드(CSS)는
<style>태그 안에, 움직이게 만드는 코드(JavaScript)는<script>태그 안에 모아서 함께 작성해요.
When you are new to coding or practicing during a short lesson, it is intuitive to write content (HTML), styling (CSS), and behavior (JavaScript) all in a single index.html file.
- How to start: Click
[Start New Project]on the dashboard, type a project name, and select onlyindex.htmlas the starting file. - Advantages: Managing code is easy since you do not need to navigate between multiple files. When asking AI for code, you can simply ask to 'write everything inside a single HTML file'.
- Integration: Place CSS inside
<style>...</style>tags, and JavaScript inside<script>...</script>tags within the same file.
2.2. 여러 파일(HTML·CSS·JS)로 나누어 작업하기 Split into HTML, CSS, and JS Files
시간표, 퀴즈, 타이머 등 기능이 풍부하고 본격적인 웹 어플리케이션을 완성하고자 할 때는 파일별로 역할을 독립시키는 다중 파일 실전 방식이 좋습니다.
- 시작 방법: 메인 대시보드에서
[새 프로젝트 시작]시 시작 파일로index.html,style.css,script.js세 개를 모두 골라 생성합니다. - 장점: 글 내용과 스타일(꾸밈), 동적 기능 코드가 섞이지 않아 수정하기에 매우 편하며, 실제 프로 개발자들과 동일한 업계 표준 파일 구조로 실무 협업 감각을 기를 수 있습니다.
- 중요한 연결 코드: 파일들이 분리되어 있으므로,
index.html파일 상단이나 하단에 반드시 아래의 연결 코드를 기입해야 조립되어 연동됩니다.
<!-- [1] style.css 파일 연결하기 (html의 <head> 구역 안에 기재) -->
<link rel="stylesheet" href="style.css">
<!-- [2] script.js 파일 연결하기 (html의 <body> 종료 태그 직전에 기재) -->
<script src="script.js"></script>When building fully functional web applications like timetables, quizzes, or timers, it is best to separate roles into individual files.
- How to start: Click
[Start New Project]on the dashboard, and select all three files:index.html,style.css, andscript.js. - Advantages: Modifying parts is clean because layout, style, and interactive scripts do not get mixed up. It helps you practice using industry-standard file structures.
- Crucial Link Code: Since files are separate, you must write linking tags in
index.htmlto wire them together:
<!-- [1] Linking style.css (Write inside the <head> tags of index.html) -->
<link rel="stylesheet" href="style.css">
<!-- [2] Linking script.js (Write right before the closing </body> tag of index.html) -->
<script src="script.js"></script>3. 작업 저장 및 복원 방법 Saving & Resuming Work
이지웹 스쿨은 학생들이 만든 코딩 작품을 잃어버리지 않고 안전하게 보관할 수 있도록 여러 단계의 저장 기능들을 제공해요.
EasyWeb School provides a multi-layer saving system to protect your data across various environments.
3.1. 1분마다 알아서 저장되는 자동 저장 1-Minute Background Auto-save
이지웹 스쿨에서는 일일이 저장 버튼을 누르지 않아도 돼요. **1분(60초)마다 여러분이 쓴 코드를 감지해서 알아서 자동 저장**해 주기 때문이에요. 다른 파일로 바꾸거나 메인 화면으로 나가도 내가 고친 부분이 그대로 안전하게 보관됩니다.
⚙️ 만약 자동 저장을 끄고 수동으로 저장하고 싶다면, 우측 상단 [⚙️ 편의 기능] 메뉴에서 `⏱️ 자동 저장` 스위치를 꺼서 직접 조절할 수 있어요 (기본적으로는 코드가 날아가지 않게 켬으로 되어 있어요).
In EasyWeb School editor mode, the app **automatically detects and saves code changes in the background every 60 seconds (1 minute)** without requiring you to manually click save. When auto-save is enabled, switching between files or navigating back to the home dashboard saves your progress silently without annoying confirm prompts.
⚙️ You can toggle this on or off via `⏱️ Auto-save` in the [Tools] menu in the top right (enabled by default to prevent accidental work loss).
3.2. 웹 브라우저 저장 시 주의할 점 (삭제 위험) Browser Virtual Storage Limitations
- 인터넷 사용 기록(쿠키 및 캐시)을 직접 삭제했을 때
- 태블릿이나 폰의 보안 정리 앱을 켜서 임시 파일을 지웠을 때
- 아이패드/아이폰(Safari 브라우저)에서 일주일(7일) 동안 이 사이트에 접속하지 않았을 때 (기기 보안 정책상 자동 삭제됨)
3.3. '작업 백업' 기능으로 되돌아갈 지점 만들기 Using Backup Slots & Restoring Checkpoints
코딩을 하다가 코드가 망가졌을 때, 잘 작동하던 상태로 시간을 되돌릴 수 있는 타임머신(백업) 기능이에요. 파일 목록 아래의 **[작업 백업]** 메뉴에서 사용해요.
- 작업 백업하기 (타임머신 저장): 웹사이트가 잘 돌아가는 상태라면, 빈 슬롯 번호(1~3번) 중 하나를 고르고
[백업 저장]을 누르세요. 그 순간의 상태가 저장돼요. - 백업 복원하기 (시간 되돌리기): 코드를 더 작성하다가 엉망이 되거나 실행이 안 된다면, 아까 저장한 번호를 고르고
[백업 복원]을 누르세요. 저장했던 깨끗한 상태로 바로 돌아갈 수 있어요!
The **[Backup Work]** panel at the bottom of the sidebar lets you create snapshots of your work at "success checkpoints".
- Save Backup: Select a slot (1–3) and click
[Save Backup]to freeze all your text codes in a database snapshot. - Restore Backup: If your script gets messy, select the slot and click
[Restore Backup]to roll back to that checkpoint instantly.
3.4. 내 컴퓨터에 ZIP 파일로 보관하기 (가장 안전!) Saving Permanently as a ZIP Archive
인터넷 창 청소나 기기 정책으로 코드가 지워지는 것을 완전히 막는 **가장 확실하고 안전한 방법은 내 컴퓨터에 ZIP 파일로 저장하는 것**이에요.
- ZIP 파일로 저장하기: 코딩 화면 우측 상단의
[ZIP 압축]버튼을 누르면, 내가 만든 모든 코드와 이미지 폴더가 하나의[프로젝트이름].zip압축 파일로 내 컴퓨터의 다운로드 폴더에 저장돼요. **학교 수업이 끝나고 컴퓨터를 끄기 전에는 무조건 이 버튼을 눌러 파일을 받아두는 습관을 기르세요!** - ZIP 파일 불러와서 이어하기: 다음 수업 시간에 이지웹 스쿨에 접속해서 메인 화면의
[ZIP 파일 가져오기]를 누른 뒤, 받아두었던 ZIP 파일을 선택해 주세요. 내가 만들던 상태 그대로 완벽하게 돌아가 코딩을 계속할 수 있어요.
**The only way to permanently protect your work from browser cleanup policies is by exporting a ZIP archive backup**.
- Save Work (ZIP Export): Click the
[Download ZIP]button in the top right to download a package containing all your files (including images) to your computer's Downloads folder. Always click this before leaving the classroom! - Load Work (ZIP Import): When you return to EasyWeb School, click
[Import ZIP File]on the dashboard and select your saved ZIP to restore your workspace and resume coding immediately.
4. 다른 컴퓨터나 스마트폰에서 작업 이어하기 Resuming Work on a Different Device
학교 컴퓨터실에서 만들던 작품을 내 스마트폰이나 태블릿(아이패드, 갤럭시 탭 등)으로 가져가 집에서 이어서 만들 수 있어요. 아래 순서대로 해보세요!
- 컴퓨터에서 다운로드: 쓰던 컴퓨터 화면에서 우측 상단의
[ZIP 압축]을 클릭해 ZIP 파일을 받아둡니다. - 내 모바일 기기로 보내기: 다운로드받은 ZIP 파일을 메일, 카카오톡, 구글 드라이브나 무선 전송(에어드랍 AirDrop, 퀵셰어 QuickShare 등)을 사용하여 나의 스마트폰이나 태블릿으로 전송해요.
- 태블릿/폰에서 열기: 태블릿이나 스마트폰으로 이지웹 스쿨 사이트에 접속한 뒤, 메인 화면 하단에 있는
[ZIP 파일 가져오기]를 누르고 전송받은 ZIP 파일을 골라 줍니다. - 이어서 만들기: 이제 모바일 맞춤 코딩 창에서 우측 상단 `줄 바꿈` 기능을 켠 다음, 화면 크기에 맞게 편하게 글을 쓰고 미리보기를 보며 코딩을 이어가세요!
EasyWeb School is designed to support cross-device learning even in offline-first environments. Use the steps below to migrate your work.
- Export from PC: Click
[Download ZIP]in the top right on your PC browser to save your project as a ZIP archive. - Transfer File: Send the ZIP file to your mobile device (iPad, Galaxy Tab, phone) using email, messaging apps, Bluetooth (AirDrop/QuickShare), or cloud drives.
- Import on Mobile: Open EasyWeb School on your mobile device's browser, scroll to the bottom of the dashboard, and click
[Import ZIP File]to upload the ZIP. - Resume Coding: Customize your screen with the word wrap toggle to write code easily, and check changes in the live preview window!
5. 인터넷 창(웹 브라우저) vs 컴퓨터 프로그램(데스크톱 앱) 차이점 Comparison: Web Browser vs Desktop App
이지웹 스쿨은 무설치로 바로 열리는 **웹사이트 버전**과 내 컴퓨터에 직접 설치하는 **데스크톱 프로그램 버전**이 있어요. 나에게 잘 맞는 방식을 선택해 보아요!
| 구분 항목 | 🌐 인터넷 창으로 쓰기 (웹 브라우저) | 💻 프로그램 설치해서 쓰기 (데스크톱 앱) |
|---|---|---|
| 설치와 준비 | 인터넷 주소만 입력하면 회원가입이나 설치 없이 바로 시작할 수 있어요. | 내 윈도우(Windows)나 맥(macOS) 컴퓨터에 프로그램 파일을 깔아서 써요. |
| 코드가 보관되는 곳 | 지원 브라우저는 사용자가 허용한 실제 폴더, 그 밖의 환경은 브라우저 저장소와 ZIP 백업 | 사용자가 선택한 내 컴퓨터의 실제 프로젝트 폴더 |
| 스마트폰으로 테스트 | 모바일 브라우저에서 화면 미리보기를 사용할 수 있어요. | localhost는 앱을 실행한 컴퓨터 안에서만 열립니다. 휴대폰 공개 주소 기능은 제공하지 않아요. |
| 내 이미지 넣기 | 파일 불러오기 창을 켜서 이미지들을 가상으로 하나씩 넣어주어야 해요. | 내가 폴더를 만들고 평소처럼 마우스로 파일들을 자유롭게 끌어다 넣으면 돼요. |
EasyWeb School is available as both a web version for instant access and a native desktop app for computer systems.
| Features | 🌐 Web Browser Version | 💻 Desktop App Version (Electron) |
|---|---|---|
| Convenience | No setup, run instantly on any device via URL | Requires installer package (Windows exe / macOS dmg) |
| Storage | A user-approved folder in supported browsers, or browser storage with ZIP backup elsewhere | Saves directly to the project folder selected by the user |
| localhost Test | Unsupported (Browser sandbox limits external connections) | Runs a localhost preview inside the app with user-approved hardware permissions |
| Images | Imported and mapped virtually in the browser | Fully supports local asset structures and drag-and-drop |
6. 자주 묻는 질문 (FAQ) Frequently Asked Questions (FAQ)
질문을 누르면 답변을 볼 수 있습니다. 이지웹 스쿨 사용 중 막히는 부분을 해결해 보세요. Click a question to view its answer. Find solutions to common problems while using EasyWeb School.
Q. 코딩 창을 닫았더니 작성 중인 프로젝트가 사라졌어요! 복구할 수 있나요? Q. I closed the tab and my project is gone! Can I recover it?
인터넷 창 버전의 경우 컴퓨터 쿠키나 임시 파일이 비워지지 않았다면, 대시보드로 돌아가서 이어서 만들기 ➔ [최근 프로젝트 목록]에서 찾아 다시 열 수 있어요.
하지만 임시 파일이 정리되었거나, 아이패드나 아이폰(Safari 브라우저)에서 7일 넘게 접속하지 않아 자동으로 지워진 경우에는 절대 복구할 수 없어요! 이지웹 스쿨은 학생들의 개인 정보를 서버에 모으지 않고, 오직 각자의 기기에만 잠시 담아두기 때문이에요. 그렇기 때문에 중요한 작업을 했거나 수업이 끝나갈 때는 꼬옥 우측 상단 `[ZIP 압축]` 버튼을 눌러 내 파일로 받아 보관해 주세요!
For the web version, if your browser cache has not been cleared, you can find it under the **Open Existing Project ➔ Recent Projects** list on the dashboard.
However, if your browser database was cleared due to automatic cache cleaner utilities or Safari's 7-day inactivity purge policy, recovery is impossible. EasyWeb School does not store your projects on external servers. Therefore, always make sure to click `[Download ZIP]` in the top right to download your code package to your computer before finishing up!
Q. 데스크톱 앱은 어디에서 다운로드하나요? Q. Where can I download the Desktop App?
화면 맨 오른쪽 위의 **[데스크톱 앱]** 글자를 클릭하면, 내 컴퓨터(Windows나 Mac)의 종류에 맞는 전용 프로그램을 바로 받아서 설치할 수 있어요.
Click the **[Desktop App]** link in the top right of the navigation bar to download installers for Windows (`.exe`) and macOS (`.dmg`).
Q. ZIP 파일로 복원했는데 미리보기 화면에서 이미지가 보이지 않습니다. Q. I imported a ZIP file, but images are missing in the preview.
이미지가 든 폴더 이름과 경로를 잘못 썼거나, 컴퓨터의 실제 주소(예: C:/...)를 그대로 썼을 때 나타나는 가장 대표적인 코딩 실수예요.
- 폴더 위치 확인: 왼쪽 파일 목록에서
images폴더를 누르고, 그 아래에 이미지 파일(예:cat.png)이 올바르게 들어있는지 확인해 보세요. - 코드 확인하기: 내 코드에
<img src="C:/Users/Desktop/cat.png">처럼 내 컴퓨터 안의 주소를 다 써두면, 파일을 옮기거나 다른 기기에서 열 때 이미지가 보이지 않아요.<img src="images/cat.png">와 같이 프로젝트 폴더 안에서의 상대 경로(상대적인 주소)를 맞추어 수정해 보세요!
This happens when relative paths are incorrect, or absolute folder addresses are used in code.
- Check layout: Verify that your image file (e.g. `cat.png`) is placed inside the `images` folder in your file tree.
- Verify path code: If the code points to absolute local locations like `<img src=\"C:/Users/Desktop/cat.png\">`, it breaks on other machines. Correct it to a relative path: `<img src=\"images/cat.png\">` and click save.
Q. 스마트폰이나 태블릿 터치 스크린에서 키보드로 긴 코드를 칠 때 가로 화면이 너무 좁아 답답합니다. Q. On mobile touch screens, typing long code lines makes horizontal scrolling tedious.
이럴 때는 긴 글자들을 줄지어 보여주는 `줄 바꿈 (Word Wrap)` 편의 기능을 사용하면 정말 편해요!
⚙️ 화면 우측 상단의 [⚙️ 편의 기능]을 누른 뒤, `↔️ 줄 바꿈` 스위치를 켜보세요. 가로로 엄청 길어서 화면 밖으로 벗어났던 긴 코드들이 경계선에 맞춰 저절로 다음 줄로 쏙 들어가 아래로 정렬돼요. 좌우로 번거롭게 스크롤을 넘기지 않고도 편하게 코드를 쓸 수 있답니다. (몇 번째 줄에서 에러가 났는지 정확하게 확인하고 싶을 때는 줄 바꿈을 다시 끄고 확인하면 줄 번호와 줄 끝이 매칭되어 보기 쉬워져요!)
You can use the built-in **Word Wrap** feature designed specifically for narrow viewports!
⚙️ Click the **[Tools]** menu dropdown and toggle **`↔️ Word Wrap`** on. The text editor will wrap long lines automatically (`pre-wrap`), eliminating horizontal scrolls. Turn it off when you need to align line numbers for error checking.
Q. 마이크로비트 피지컬 AI에서 동작 인식률을 100%로 높이려면 어떻게 착용해야 하나요? Q. How should I wear the micro:bit sensors to achieve maximum physical AI accuracy?
가장 중요한 핵심은 '단단한 밀착 고정'과 '학습과 테스트 시의 착용 위치 일치'입니다!
- 스트랩 팽팽히 밀착: 센서가 헐렁거리면 점프나 달리기 시 센서 혼자 덜렁거리며 가속도 노이즈가 발생합니다. 스트랩 밴드를 손목/발목에 흔들림 없이 탄탄히 고정하세요.
- USB 단자 하늘(위쪽) 방향: 2번 손목 보드는 팔꿈치 방향, 3번 발목 보드는 무릎 방향으로 USB 포트가 위를 향해야 중력(+1G) 축과 상하 가속도가 일치합니다.
- 위치와 각도 불변: 데이터를 수집(학습)할 때 착용했던 위치/각도와 웹 게임에서 테스트할 때의 착용 상태가 같아야 AI가 95% 이상 최고 정확도로 동작을 맞힙니다.
The golden rules are 'snug fastening' and 'consistent placement between training and testing'!
- Snug strap fit: Fasten straps tightly to prevent wobbling or twisting during movement.
- USB pointing upward: Keep USB ports facing upward (toward elbow and knee) for consistent vertical acceleration.
- Consistent placement: Ensure the sensor position and orientation during gameplay strictly matches the training setup.
Q. 통합 스튜디오(Studio)에서는 어떤 기능을 사용할 수 있나요? Q. What features are available in the Integrated Studio?
통합 스튜디오는 화면 구성(Visual), 블록 코딩(Blocks), 코드 보기(Code), 텔레메트리(Telemetry) 4가지 렌즈를 하나의 상시 라이브 무대(Always-Visible Live Stage)와 함께 제공하는 웹 저작 환경이에요.
- 다중 씬(Multi-Scene) 관리: 여러 장면을 추가·전환하며 복합 웹 프로젝트를 구성할 수 있어요.
- 코어 객체 팩 및 직접 조작: 버튼, 텍스트, 컨테이너, 캔버스 스테이지 등을 마우스/키보드로 배치하고 크기를 조절해요.
- 프로젝트 변수 및 사용자 정의 함수: 안전한 코드명 변수와 순수 값/동작 함수를 블록으로 조합해요.
- 단일 통합 히스토리: 시각 편집, 블록, 변수, 함수, 코드 캡슐의 모든 변경을 하나의 실행 취소(Ctrl+Z)/다시 실행(Ctrl+Y)으로 완벽하게 제어해요.
The Integrated Studio provides 4 authoring lenses (Visual, Blocks, Code, Telemetry) alongside an Always-Visible Live Stage.
- Multi-Scene Management: Create and switch between multiple scenes in a single project.
- Core Object Pack: Visually compose buttons, text, containers, and canvas stages with responsive layouts.
- Variables & Custom Functions: Define project variables and reusable pure value/action functions.
- Unified Atomic History: Enjoy unified Undo (Ctrl+Z) and Redo (Ctrl+Y) across visual, block, state, and code edits.