leros.kr 혁신적 홈페이지 만들기

GitHub 레포 생성

github.com → New repository → 이름: leros-homepage → Public → Create

커서에서 폴더 열기

커서 실행 → File → Open Folder → leros-homepage 폴더 선택

Zero-Layout 구조

전통적인 Header/Footer/Section 경계를 완전히 제거합니다. 모든 콘텐츠는 position: fixed로 고정되고 스크롤에 따라 변형됩니다.

/* 핵심 CSS */
.canvas-section {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Z-Axis Scroll (공간 확장)

스크롤 값을 CSS transform: scale()과 opacity에 매핑하여 '공간을 파고드는' 느낌을 구현합니다.

/* Scroll Observer JS */
window.addEventListener('scroll', () => {
  const scrollPercent = window.scrollY / 
    (document.body.scrollHeight - window.innerHeight);
  
  // 심볼 확장: 1 → 3배
  symbol.style.transform = `scale(${1 + scrollPercent * 2})`;
  
  // 텍스트 서서히 등장
  headline.style.opacity = Math.min(scrollPercent * 2, 1);
});

Underground Menu (숨겨진 푸터)

화면 하단 5vh 영역에 호버 시에만 법인 정보와 개인정보처리방침이 담긴 메뉴가 슬라이드업으로 등장합니다.

/* HTML 구조 */
<div class="underground-trigger"></div>
<div class="underground-menu">
  © 레로스 | 대표자: 윤승현
  <a href="privacy.html">개인정보처리방침</a>
</div>

/* CSS */
.underground-menu {
  bottom: -100%;
  transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.underground-menu.visible {
  bottom: 0;
}

GPU 가속 최적화

모든 애니메이션 요소에 will-change: transform과 transform: translateZ(0)을 적용하여 60fps를 유지합니다.

.symbol, .headline, .project-icon {
  will-change: transform, opacity;
  transform: translateZ(0);
}

첫 화면 (0-5%)

중앙에 "Leros" 텍스트만 표시. 극강의 단순함 (10단어 이하).

헤드라인 (10-30%)

심볼 확장과 함께 "삶에 여유의 한 조각을"이 서서히 등장.

철학 (30-50%)

레로스 브랜드 철학 2~3문장. 고대 그리스어 '여유'와 '조각'의 의미.

프로젝트 (50-70%)

무지개숲 카드 등장. 파스텔 그라데이션 placeholder 아이콘.

Contact (70-90%)

이메일 링크 서서히 등장.

기본 구조

"privacy.html 만들어줘.
상단에 '무지개숲 개인정보처리방침' 제목,
본문에 '현재 개인정보처리방침을 준비중입니다. 
문의사항은 contact@leros.kr로 연락주세요.' 문구,
index.html과 동일한 디자인 스타일"

GitHub에 파일 업로드

커서 터미널에서:

git init
git add .
git commit -m "The Leros Canvas v1.0"
git remote add origin https://github.com/[계정]/leros-homepage.git
git push -u origin main

GitHub Pages 활성화

GitHub 레포 → Settings → Pages → Source: main 브랜치, / (root) → Save

커스텀 도메인 입력

Pages 설정에서 Custom domain: leros.kr 입력 → Save

자동으로 CNAME 파일이 레포에 생성됩니다.