y-life 사이트 빌더
코딩 없이 홈페이지를 만드는 도구입니다. 블록을 쌓듯 섹션을 추가하고, 클릭으로 텍스트를 수정하고, 완성된 HTML을 한 번에 다운로드할 수 있습니다. 연플래닝·학원 홈페이지·소개 페이지 모두 이 빌더 하나로 만들 수 있습니다.
코딩 불필요 실시간 편집 실행취소/다시실행 4가지 테마 쇼핑몰 블록 AI 안내

1빌더란 무엇인가

y-life 사이트 빌더(builder.html)는 단일 HTML 파일로 동작하는 시각적 페이지 편집기입니다. 구글 사이트(Google Sites)처럼 블록을 쌓아 홈페이지를 구성하고, 완성하면 독립 HTML 파일로 내보내거나 GitHub Pages에 바로 올릴 수 있습니다.

서버나 데이터베이스가 필요 없습니다. 브라우저만 있으면 됩니다. 작성 내용은 브라우저의 localStorage에 자동으로 저장되어, 창을 닫았다가 다시 열어도 그대로 남습니다.

연플래닝·연학원관리 홈페이지에도 동일하게 적용할 수 있습니다. 아래 연플래닝 적용하기 섹션을 참고하세요.

2주요 기능

✏️
클릭해서 바로 편집
텍스트를 클릭하면 그 자리에서 바로 수정됩니다. 별도 입력창 없음.
🖱️
더블클릭 방사형 메뉴
빈 공간 더블클릭 → 9개 블록 아이콘이 원형으로 펼쳐집니다.
↕️
드래그로 순서 변경
블록 왼쪽 핸들을 드래그해서 섹션 순서를 바꿉니다.
↔️
간격 드래그 조절
블록 하단 스트립을 위아래로 드래그해서 여백을 조정합니다.
↩️
실행 취소 / 다시 실행
Ctrl+Z / Ctrl+Y로 최대 40단계 되돌리기가 됩니다.
🖼️
이미지 업로드
이미지 영역을 클릭하면 파일 탐색기가 열려 바로 교체됩니다.
🎨
4가지 테마
Mint Tide / Warm Earth / Mauve Fog / Forest Dark 중 선택.
🛒
쇼핑몰 블록
상품 카드를 추가해 간이 판매 페이지를 만들 수 있습니다.
🤖
AI 안내 (예정)
Claude Haiku로 홈페이지 제작 과정을 안내받을 수 있습니다.

3툴바 완전 해설

화면 맨 위 검정 막대가 툴바입니다. 구글 사이트와 유사한 구성입니다.

편집 미리보기
↩
실행취소
↪
다시실행
🔗
링크복사
⚙
설정
🗑
전체삭제
AI 발행
  • ①
    편집 / 미리보기 전환 편집 모드에서는 좌측 패널과 블록 컨트롤이 표시됩니다. 미리보기 모드에서는 실제 방문자 화면처럼 보이며, 우측 하단에 연필 아이콘이 나타나 다시 편집 모드로 돌아올 수 있습니다.
  • ②
    ↩ 실행 취소 (Ctrl+Z) / ↪ 다시 실행 (Ctrl+Y) 블록 추가·삭제·텍스트 수정·순서 변경 등 모든 작업을 최대 40단계 되돌릴 수 있습니다.
  • ③
    🔗 링크 복사 현재 페이지 URL을 클립보드에 복사합니다. 미리보기 URL을 공유할 때 사용합니다.
  • ④
    ⚙ 설정 사이트 이름, 파비콘, 메타 설명 등 고급 설정 패널을 엽니다. (추가 개발 중)
  • ⑤
    🗑 전체 삭제 현재 페이지의 모든 블록을 삭제합니다. 확인 창이 먼저 뜹니다.
  • ⑥
    AI 버튼 우측에서 AI 안내 패널을 열고 닫습니다. Claude Haiku로 홈페이지 제작을 도와줍니다. (연결 예정)
  • ⑦
    발행 버튼 HTML 다운로드, GitHub Pages 배포, 임베드 코드 복사 옵션이 나타납니다.

4블록 종류 (16가지)

왼쪽 패널 삽입 탭 또는 캔버스 더블클릭 방사형 메뉴에서 블록을 추가합니다.

히어로
대문 제목+버튼
텍스트
제목+본문 단락
이미지+글
사진 옆에 설명
카드
아이콘 카드 그리드
YouTube
동영상 임베드
지도
Google Maps
버튼
CTA 버튼
소셜
SNS 링크 모음
갤러리
사진 그리드
인용
명언·인용구
구분선
섹션 구분
간격
빈 공간 조절
연락 폼
문의 양식
뉴스
최신 소식 목록
캐러셀
슬라이드 이미지
쇼핑몰
상품 카드 3열

5편집 방법

  • 1
    텍스트 직접 편집 제목, 본문, 버튼 텍스트 등을 클릭하면 그 자리에서 바로 수정됩니다. 수정 후 다른 곳을 클릭하면 자동 저장됩니다.
  • 2
    이미지 교체 이미지 영역에 마우스를 올리면 "이미지 교체" 오버레이가 나타납니다. 클릭하면 파일 탐색기가 열려 로컬 이미지를 선택할 수 있습니다.
  • 3
    블록 순서 변경 (드래그) 블록 왼쪽 끝에 점 6개 핸들이 있습니다. 이 핸들을 드래그해서 다른 위치에 놓으면 순서가 바뀝니다.
  • 4
    블록 간격 조절 (리사이즈 스트립) 각 블록 하단에 얇은 회색 줄이 있습니다. 이 줄을 위아래로 드래그하면 블록의 상하 여백(paddingV)이 실시간으로 변합니다.
  • 5
    방사형 메뉴로 블록 삽입 캔버스 빈 공간을 더블클릭하면 그 위치에 원형 메뉴가 나타납니다. 9가지 블록 아이콘 중 하나를 클릭하면 해당 블록이 삽입됩니다.
  • 6
    속성 패널 (우측) 블록을 클릭하면 오른쪽에 속성 패널이 열립니다. 텍스트 정렬, 배경색, 이미지 방향 등 세부 설정을 조정할 수 있습니다.
  • 7
    블록 제어 버튼 블록에 마우스를 올리면 우측 상단에 ↑ ↓ (이동), 복제, 삭제 버튼이 나타납니다.

6테마 시스템

왼쪽 패널 테마 탭에서 4가지 색상 테마 중 하나를 선택해 사이트 전체 분위기를 바꿀 수 있습니다.

🌿 Mint Tide
기본 테마. 민트·틸 계열. 학습 앱, 집중이 필요한 화면에 적합합니다.
🌾 Warm Earth
따뜻한 베이지·카키 계열. 학부모용 보고서, 안내문에 어울립니다.
🌸 Mauve Fog
소프트 모브 계열. 상담, 감성적인 화면에 좋습니다.
🌲 Forest Dark
딥 포레스트 다크 테마. 야간 모드, 집중 모드에 사용합니다.

7발행 방법

툴바 오른쪽 발행 버튼을 클릭하면 세 가지 방법이 나타납니다.

  • A
    HTML 다운로드 만든 페이지를 독립 HTML 파일로 저장합니다. 이메일로 보내거나 USB에 저장하거나 다른 웹서버에 올릴 수 있습니다. 편집 컨트롤이 제거된 순수 HTML 파일이 만들어집니다.
  • B
    GitHub Pages 배포 yeon-life/yeon-life.github.io 리포지토리에 올려 https://yeon-life.github.io에 공개합니다. PowerShell에서 git push로 진행합니다.
  • C
    임베드 코드 다른 사이트에 이 사이트를 iframe으로 삽입할 수 있는 코드를 복사합니다.
💡 나만의 도메인(예: yeon-plan.kr)을 연결하고 싶다면 도메인 연결 가이드를 참고하세요. 가비아에서 도메인을 구입하고 DNS 설정만 하면 됩니다.

8연플래닝 홈페이지에 적용하기

현재 연플래닝 홈페이지(sites.google.com/view/yeon-eng)는 구글 사이트로 제작되어 있습니다. y-life 빌더를 사용해 독립적인 연플래닝 전용 홈페이지로 이전할 수 있습니다.

📋 권장 페이지 구성

  • 1
    홈 (메인) — 히어로 블록으로 학원 소개, 카드 블록으로 핵심 특징 3가지
  • 2
    수업 소개 — 이미지+글 블록으로 수업 방식 설명, YouTube 블록으로 소개 영상
  • 3
    선생님 소개 — 이미지+글 블록, 인용 블록으로 교육 철학
  • 4
    수업료 안내 — 카드 블록으로 수업 플랜, 쇼핑몰 블록으로 교재 판매
  • 5
    오시는 길 — 지도 블록, 연락 폼 블록

🎨 연플래닝용 추천 설정

  • ✓
    테마: Mint Tide (기본) — 집중, 학습 분위기에 잘 맞습니다
  • ✓
    히어로 블록: 학원 이름 + "함께 성장하는 영어 학습" 같은 한 줄 문구 + 상담 신청 버튼
  • ✓
    소셜 블록: Instagram, YouTube, KakaoTalk 채널 링크
  • ✓
    연락 폼: 학부모 문의를 받을 수 있도록 하단에 배치

🚀 이전 절차

  • 1
    builder.html 열기 — yeon-life.github.io/builder.html 접속
  • 2
    페이지 추가 — 왼쪽 패널 → 페이지 탭 → 페이지 추가 클릭
  • 3
    블록 구성 — 더블클릭 또는 삽입 탭으로 블록을 추가하고 내용 입력
  • 4
    HTML 내보내기 — 발행 → HTML 다운로드
  • 5
    GitHub 업로드 — yeon-life.github.io 리포에 yeon-plan.html로 저장
  • 6
    도메인 연결 (선택) — yeon-plan.kr 같은 전용 도메인 구입 후 CNAME 설정
🌱 연플래닝과 연라이프는 같은 GitHub 저장소(yeon-life.github.io)에서 함께 관리할 수 있습니다. 각 페이지를 별도 HTML 파일(yeon-plan.html, index.html)로 올리면 같은 도메인 아래 여러 사이트를 운영할 수 있습니다.

9앞으로 추가될 기능

AI 홈페이지 조언
Claude Haiku 연결 — 구성 제안, 문구 개선
결제 연동
쇼핑몰 블록에 실제 결제 수단 연결
사이트 설정 패널
사이트 이름·파비콘·OG 태그 설정
공동 편집
여러 사람이 같은 페이지를 함께 수정
폼 제출 수신
연락 폼 제출 내용을 이메일로 수신
다국어 지원
영어·일본어 병행 페이지 제작

10업데이트 기록

  • 2026-04-26툴바 아이콘 추가 (↩ 실행취소, ↪ 다시실행, 🔗 링크복사, ⚙ 설정, 🗑 삭제) · Ctrl+Z/Y 단축키 · 쇼핑몰 블록 · AI 패널 · 방사형 메뉴 (9종) · 좌측 탭 패널 (삽입/페이지/테마)
  • 2026-04-19builder.html 초기 버전 · 기본 블록 편집 · 드래그 순서 변경 · 이미지 업로드 · 간격 드래그 조절
  • 2026-04-19domain-guide.html — 가비아 도메인 연결 가이드 (8단계)
  • 2026-04-19index.html JS SyntaxError 수정 (regex 리터럴 개행 문제) · 관리자 5회 클릭 진입 복구
지금 바로 만들어보세요
클릭 몇 번으로 연플래닝 홈페이지를 완성할 수 있습니다.
사이트 빌더 열기 →