웹 기반 파워포인트 프레젠테이션 제작 | 프론트엔드 개발

소개

이 프로젝트에서는 프론트엔드 기술을 사용하여 웹 기반 PowerPoint (PPT) 프레젠테이션을 만드는 방법을 배우게 됩니다. 이러한 유형의 PPT 는 배포 및 보기에 더 편리하며, 프론트엔드 기술의 레이아웃 및 상호 작용 기능을 최대한 활용할 수 있습니다.

👀 미리보기

Web PPT preview demo

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다.

PPT 페이지 간 전환을 위한 switchPage 함수 구현 방법
키보드 누름 및 버튼 클릭과 같은 사용자 입력을 처리하여 PPT 페이지를 탐색하는 방법
PPT 페이지 간 탐색을 처리하기 위한 goLeft 및 goRight 함수 구현 방법
기본 HTML 지식을 가르치기 위해 PPT 슬라이드에 콘텐츠를 추가하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

프론트엔드 기술을 사용하여 웹 기반 PowerPoint (PPT) 프레젠테이션 생성
PPT 페이지를 표시하고 숨기기 위해 DOM 조작
사용자 입력을 처리하고 UI 를 적절하게 업데이트
HTML 관련 콘텐츠를 PPT 형식으로 구성하고 제시

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── css
│   └── style.css
├── images
│   ├── left-small.svg
│   └── right-small.svg
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

여기서:

css/style.css는 스타일시트입니다.
images 폴더에는 페이지에서 사용되는 아이콘이 포함되어 있습니다.
js/index.js는 페이지의 JavaScript 파일입니다.
js/jquery-3.6.0.min.js는 jQuery 파일입니다.
index.html은 메인 페이지입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

switchPage 함수 구현

이 단계에서는 PPT 페이지 간 전환을 위해 switchPage 함수를 구현하는 방법을 배우게 됩니다.

js/index.js 파일을 엽니다.
switchPage 함수를 찾아 다음 코드를 추가합니다.

function switchPage() {
  $("section").eq(activeIndex).show().siblings().hide();
  $(".btn.left").toggleClass("disable", activeIndex === 0);
  $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);
  $(".page").text(`${activeIndex + 1} / ${sectionsCount}`);
}

설명:

$("section").eq(activeIndex).show().siblings().hide();: 이 줄은 현재 페이지 (section) 를 표시하고 다른 모든 페이지를 숨깁니다.
$(".btn.left").toggleClass("disable", activeIndex === 0);: 이 줄은 사용자가 첫 번째 페이지에 있을 때 "이전" 버튼에 disable 클래스를 추가하고, 다른 페이지에 있을 때는 해당 클래스를 제거합니다.
$(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);: 이 줄은 사용자가 마지막 페이지에 있을 때 "다음" 버튼에 disable 클래스를 추가하고, 다른 페이지에 있을 때는 해당 클래스를 제거합니다.
$(".page").text(${activeIndex + 1} / ${sectionsCount});: 이 줄은 페이지 하단 왼쪽에 있는 페이지 번호 표시를 업데이트합니다.

js/index.js 파일을 저장합니다.

이제 switchPage 함수가 구현되었으며, 페이지 전환 기능이 예상대로 작동해야 합니다.

사용자 입력 처리

이 단계에서는 PPT 페이지를 탐색하기 위해 키보드 누름 및 버튼 클릭과 같은 사용자 입력을 처리하는 방법을 배우게 됩니다.

js/index.js 파일을 엽니다.
이벤트 리스너 코드를 찾아 다음 코드를 추가합니다.

// Listening for user presses of the space and arrow keys
$(document).on("keydown", (e) => {
  e.preventDefault();
  // TODO
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// Listening to button click events
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

설명:

첫 번째 이벤트 리스너는 문서에서 keydown 이벤트를 수신 대기합니다. 사용자가 스페이스바 또는 오른쪽 화살표 키를 누르면 goRight() 함수가 호출됩니다. 사용자가 왼쪽 화살표 키를 누르면 goLeft() 함수가 호출됩니다.
두 번째 이벤트 리스너 세트는 "이전" 및 "다음" 버튼의 클릭 이벤트를 수신 대기합니다. 사용자가 "이전" 버튼을 클릭하면 goLeft() 함수가 호출됩니다. 사용자가 "다음" 버튼을 클릭하면 goRight() 함수가 호출됩니다.

js/index.js 파일을 저장합니다.

이제 사용자 입력 처리가 구현되었으며, 사용자는 키보드 또는 버튼을 사용하여 PPT 페이지를 탐색할 수 있습니다.

goLeft 및 goRight 함수 구현

이 단계에서는 PPT 페이지 간 탐색을 처리하기 위해 goLeft 및 goRight 함수를 구현하는 방법을 배우게 됩니다.

js/index.js 파일을 엽니다.
goLeft 및 goRight 함수를 찾아 다음 코드를 추가합니다.

// Functions for switching to the next sheet
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// Functions for switching the previous sheet
function goRight() {
  // TODO
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

설명:

goLeft 함수는 사용자가 첫 번째 페이지에 있는지 확인합니다. 그렇다면 아무 작업도 수행하지 않고 반환합니다. 그렇지 않으면 activeIndex 변수를 감소시키고 switchPage 함수를 호출하여 표시를 업데이트합니다.
goRight 함수는 사용자가 마지막 페이지에 있는지 확인합니다. 그렇다면 아무 작업도 수행하지 않고 반환합니다. 그렇지 않으면 activeIndex 변수를 증가시키고 switchPage 함수를 호출하여 표시를 업데이트합니다.

js/index.js 파일을 저장합니다.

이제 goLeft 및 goRight 함수가 구현되었으며, 사용자는 키보드 또는 버튼을 사용하여 PPT 페이지를 탐색할 수 있습니다.

페이지의 최종 효과는 다음과 같아야 합니다.

Image Description

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

웹 기반 HTML 프레젠테이션 빌더

소개