그누보드 환경에서 fullPage.js 및 풀스크린 스크롤 인터랙션 적용 가이드

• 목록
• 스크랩

그누보드 환경에서 fullPage.js 및 풀스크린 스크롤 인터랙션 적용 가이드

그누보드를 운영하거나 개발하는 과정에서 fullPage.js 등 풀스크린 스크롤 라이브러리를 적용할 때 발생할 수 있는 주요 설정 방법, 서브페이지 전파 오류, 그리고 tail.php 출력 누락 문제를 해결할 수 있도록 돕습니다.

fullPage.js 서브페이지 중복 작동 문제 확인

그누보드에서 메인 페이지에만 적용하려던 fullPage.js 스크립트가 서브페이지까지 영향을 미치는 원인은 주로 공통 레이아웃 파일(head.php 또는 head.sub.php 등)에 스크립트와 스타일시트가 조건 없이 전역으로 포함되어 있거나, 모든 페이지에서 공통으로 실행되도록 설정되었기 때문입니다.

확인 및 점검 순서

1. 공통 파일 포함 여부 확인: head.php 또는 head.sub.php 파일에 fullPage.js 관련 CSS 및 JS 파일이 조건문 없이 선언되어 있는지 확인합니다.
2. 메인 페이지 조건문 적용: 메인 페이지에서만 리소스가 로드되도록 아래와 같이 if(defined('_INDEX_')) 조건문을 사용하여 분기 처리를 적용합니다.

<?php if(defined('_INDEX_')) {?>
<link rel="stylesheet" href="fullpage.min.css">
<script src="fullpage.min.js"></script>
<?php }?>

참고 사항

• 제공된 자료에 따르면 메인 페이지 전용으로 fullPage를 구현할 때 tail.php의 푸터 영역 등을 fullPage 구조 내(section)에 포함시키기 위해 요소를 복제하고 원본을 제거하는 등의 스크립트 처리 사례가 존재합니다.

fullPage.js 적용 시 tail.php와 하단 푸터가 출력되지 않는 구조적 이유와 해결 방법

그누보드 메인 index.php에 fullPage.js를 적용했을 때 하단의 tail.php나 푸터 영역이 보이지 않거나 잘려 나가는 현상은, fullPage.js가 페이지 전체를 화면 높이 단위의 독립된 섹션(section) 구조로 강제 재구성하는 과정에서 발생합니다.

원인 파악

• fullPage.js는 초기화될 때 지정한 컨테이너 내부의 요소들을 개별 화면 단위의 섹션으로 감싸거나 배치하므로, 일반적인 HTML 문서 구조의 흐름 바깥에 놓이게 됩니다.
• tail.php에는 단순한 footer 내용뿐만 아니라 레이아웃을 닫는 래퍼(wrapper)나 컨테이너 등의 태그가 함께 포함되어 있어 메인 페이지 내에서 일반적인 방식으로 불러오기에는 구조가 복잡해지기 쉽습니다.

해결 방법 및 조치 순서

1. 푸터 영역을 fullPage 내부 섹션으로 포함시키기
   • 메인 페이지에서만 fullPage를 사용하는 경우, 실행하기 전에 footer 요소를 자식 요소들까지 포함하도록 복제한 뒤 fullPage 내부의 새로운 섹션으로 밀어넣고 원본 footer를 제거하는 방식을 고려할 수 있습니다.
   • 또는 아래와 같이 tail.php를 포함하는 코드를 fullPage의 마지막 section 요소 내부에 직접 배치하는 방식을 적용합니다.

<section class="section fp-auto-height">
<?php include_once(G5_PATH.'/tail.php');?>
</section>

1. 높이 자동 조절 옵션 확인
   • 푸터나 하단 영역의 콘텐츠가 화면 높이보다 길거나 남을 경우 섹션 내에서 잘릴 수 있으므로, fullPage 연동 시 fp-auto-height 클래스를 활용해 해당 섹션만 자동으로 스크롤이 생기거나 높이가 조절되도록 설정해야 합니다.

fullPage.js 버전별 라이선스 정책과 다운로드

라이선스 정책

• 버전 2 (예: 2.9.7 버전): 무료로 사용할 수 있습니다.
• 버전 3 이후: 유료 라이선스 및 라이선스키가 필요하며, 무단으로 사용할 경우 개발자 도구에서 라이선스를 등록하라는 경고문이 표시됩니다.

다운로드 방법

• 공식 다운로드 링크 및 GitHub 저장소를 통해 유료 또는 무료 버전을 내려받아 사용할 수 있습니다.

fullPage.js 대체 오픈소스 라이브러리

fullPage.js의 버전 3 이후 유료화 및 라이선스 정책, 갱신 비용 등으로 인해 대안을 찾을 때 활용할 수 있는 오픈소스 대체 라이브러리 정보입니다.

Pageable

• 특징: MIT 라이선스를 적용하여 상업적 이용이 가능한 풀페이지 스크롤 소스입니다.
• 활용: 마우스휠 스크롤을 통해 전체화면 단위로 페이지를 이동하는 랜딩페이지나 원페이지 형태를 구현할 때 fullPage.js의 대안으로 사용할 수 있습니다.

상황별 판단 가이드

• 내 상황: 그누보드 메인 페이지에 풀스크린 스크롤 효과(fullPage.js)를 적용하려는 경우
  • 선택 기준: 공통 레이아웃 파일(head.php, head.sub.php 등)에 스크립트와 스타일이 조건 없이 전역 포함되어 있는지, 혹은 서브페이지에서도 작동하는지 확인합니다.
  • 다음 행동: 그누보드 메인 판별 상수인 defined('_INDEX_') 조건문을 활용하여 메인 페이지에서만 관련 리소스와 초기화 코드가 로드되도록 분기 처리를 적용합니다.

실전 FAQ

• **Q. fullPage.js 적용 시 하단 푸터가 잘리거나 보이지 않을 때
  • fullPage.js는 컨테이너 내부를 화면 단위 섹션으로 재구성하므로, tail.php를 마지막 섹션 태그(class="section fp-auto-height") 내부에 직접 포함하거나 스크립트로 푸터 요소를 섹션 내부로 이동시켜야 합니다.
• **Q. 버전별 라이선스 정책 차이
  • 3 버전 이후는 유료 라이선스가 필요하며 무단 사용 시 경고문이 표시됩니다. 무료 사용이 필요하다면 2.9.7 버전을 고려하십시오.
• **Q. 유료 정책의 대안
  • MIT 라이선스로 상업적 이용이 가능한 오픈소스 라이브러리인 Pageable을 검토할 수 있습니다.

참고자료

기타 참고자료

• sir.kr — fullpage.js 사용해보신분께 - SIR - 개발자 커뮤니티
• sir.kr — fullpage.js 를 적용했는데 질문 좀 드려요~ - SIR - 개발자 커뮤니티
• mong-development.tistory.com — 전체페이지 스크롤 fullpage.js 사용법 알아보기
• m.blog.naver.com — fullpage.js fullpage.js를 대체할 마우스휠스크롤 풀페이지 전체화면 이동 제이쿼리 jquery 스크립트 (랜딩페이지 원페이지) : 네이버…
• sir.kr — 메인페이지 체크 - SIR - 개발자 커뮤니티
• kiss7.kr — 메인페이지라면... 조건문 > 웹제작/운영 | 키스세븐