스캔하거나 문서를 내보내면 PDF 페이지가 뒤집혀 있거나 옆으로 돌아가 있거나 잘못된 방향으로 표시될 때가 있습니다.

문서를 수동으로 다시 만드는 대신 사용자는 일반적으로 페이지를 회전하고 수정된 버전을 저장하는 간단한 방법이 필요합니다.

현대 브라우저는 JavaScript를 직접 사용하여 이를 가능하게 합니다.

이 튜토리얼에서는 JavaScript를 사용하여 브라우저 기반 PDF 회전기를 만들게 됩니다.

이 도구는 사용자가 PDF 파일을 업로드하고 페이지를 미리보기하며, 선택한 페이지를 회전시키고, 방향을 변경하고, 업데이트된 PDF를 생성하고, 최종 결과를 미리보기하고, 파일 이름을 변경하고, 브라우저에서 직접 모든 것을 다운로드할 수 있게 합니다.

모든 작업은 완전히 클라이언트 측에서 이루어지며 백엔드 서버가 필요 없습니다.

목차

1. PDF 회전 작동 방식

2. 프로젝트 설정

3. 어떤 라이브러리를 사용하고 있는가요?

4. 업로드 인터페이스 만들기

5. 업로드된 PDF 페이지 미리보기

6. 회전할 페이지 선택하기

7. 회전 옵션 적용하기

8. 회전된 PDF 생성하기

9. 최종 PDF 미리보기 및 다운로드

10. 실제 문서에서 PDF 회전이 유용한 이유

11. 데모: PDF 회전 도구는 어떻게 작동하는가

12. 실제 사용에서 중요한 주의사항

13. 피해야 할 일반적인 오류

14. 결론

PDF 회전은 어떻게 작동하는가

PDF 회전은 PDF 페이지의 방향 데이터를 업데이트하여 작동합니다.

실제 콘텐츠를 수동으로 수정하는 대신, JavaScript 라이브러리는 페이지를 프로그래밍 방식으로 회전시키고 문서의 업데이트된 버전을 내보낼 수 있습니다.

브라우저는 PDF 파일을 로드하고 페이지 정보를 읽으며 90°, 180°와 같은 회전 값이나 가로 방향 설정을 적용한 후 새로운 다운로드 가능한 PDF를 생성합니다.

모든 작업은 브라우저 내에서 직접 발생합니다.

이렇게 하면 프로세스가 빠르고, 프라이빗하며, 외부 서버에 파일을 업로드하지 않고도 쉽게 사용할 수 있습니다.

프로젝트 설정

이 프로젝트는 의도적으로 간단합니다.

HTML 파일 하나, JavaScript 파일 하나, 그리고 PDF 처리 라이브러리만 필요합니다.

모든 것이 JavaScript를 사용하여 브라우저 내부에서 실행됩니다. 백엔드 서버나 데이터베이스는 필요하지 않습니다.

어떤 라이브러리를 사용하도록 할까요?

우리는 브라우저에서 직접 PDF 파일을 편집하기 위해 PDF-lib 라이브러리를 사용할 거예요.

CDN을 사용하여 추가해 주세요:

<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

이 라이브러리는 우리가 다음과 같은 작업을 가능하게 해줍니다:

• PDF 문서 로드

• 페이지 회전

• 방향 변경

• 업데이트된 PDF 내보내기

업로드 인터페이스 만들기

기본 업로드 입력으로 시작하세요:

<input type="file" id="pdfUpload" accept="application/pdf">

<button onclick="rotatePDF()">
  Rotate PDF
</button>

이렇게 하면 사용자가 브라우저에서 직접 PDF 파일을 업로드할 수 있습니다.

도구 내에서 업로드 섹션의 모습은 다음과 같습니다:

업로드된 PDF 페이지 미리보기

PDF 파일을 업로드한 후, 사용자는 회전을 적용하기 전에 브라우저 내에서 직접 페이지를 미리보을 수 있습니다.

미리보기 섹션에는 회전 제어가 포함되어 사용자가 최종 PDF를 생성하기 전에 필요에 따라 페이지를 개별적으로 회전할 수 있습니다.

미리보기를 렌더링하려면 먼저 업로드된 PDF 문서를 로드합니다.

const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);

const totalPages = pdfDoc.getPageCount();

다음으로 동적으로 페이지 미리보기를 렌더링합니다.

for (let i = 0; i < totalPages; i++) {
  const page = pdfDoc.getPage(i);

  console.log("Rendering page:", i + 1);
}

사용자는 왼쪽 및 오른쪽 네비게이션 버튼을 사용하여 페이지를 이동할 수 있습니다.

회전 버튼은 각 미리보기 카드에도 부착할 수 있습니다:

rotateLeftBtn.addEventListener("click", () => {
  rotatePage(currentPage, -90);
});

rotateRightBtn.addEventListener("click", () => {
  rotatePage(currentPage, 90);
});

이렇게 하면 업데이트된 PDF를 생성하기 전에 페이지 방향을 확인하기가 더 쉬워집니다.

페이지 미리보기 섹션의 모습은 다음과 같습니다.

회전할 페이지 선택

모든 문서에 모든 페이지를 회전할 필요는 없습니다.

일부 사용자는 짝수 페이지만, 홀수 페이지만, 또는 문서 내 특정 페이지만 회전하고 싶을 수 있습니다.

이 도구는 사용자가 최종 PDF를 생성하기 전에 어떤 페이지에 회전 변경을 적용할지 선택할 수 있게 합니다.

예를 들어, 사용자는 다음과 같이 회전 범위를 선택할 수 있습니다.

const selectedMode = document.querySelector(
  'input[name="pageMode"]:checked'
).value;

특정 페이지 범위도 지원됩니다.

const customPages = document
  .getElementById("customPages")
  .value;

이렇게 하면 사용자는 어떤 문서 페이지가 수정될지 더 많은 제어를 가질 수 있습니다.

도구 내부에서 페이지 선택 제어의 모양은 다음과 같습니다.

회전 옵션 적용

페이지가 선택되면 사용자는 브라우저 내에서 다양한 회전 작업을 직접 적용할 수 있습니다.

페이지는 왼쪽으로 90도 회전, 오른쪽으로 90도 회전, 180도 뒤집기 또는 세로 또는 가로 방향으로 전환할 수 있습니다.

PDF-lib를 사용한 간단한 예시는 다음과 같습니다.

const page = pdfDoc.getPage(pageIndex);

page.setRotation(
  PDFLib.degrees(90)
);

페이지를 왼쪽으로 회전하려면:

page.setRotation(
  PDFLib.degrees(-90)
);

동적으로 방향 설정을 적용할 수도 있습니다:

if (orientation === "landscape") {
  page.setRotation(PDFLib.degrees(90));
}

이러한 제어 요소는 사용자가 브라우저 내에서 스캔된 문서와 잘못된 페이지 레이아웃을 수정할 수 있게 합니다.

도구 내에서 회전 제어 요소가 어떤 모습인지 보여드리겠습니다:

회전된 PDF 생성

회전 설정이 구성된 후, 사용자는 브라우저 내에서 업데이트된 PDF를 직접 생성할 수 있습니다.

이 도구는 선택된 페이지를 처리하고 회전 변경을 적용하여 즉시 다운로드할 수 있는 새 PDF 파일을 내보냅니다.

예를 들어:

const pdfBytes = await pdfDoc.save();

다음으로 다운로드 가능한 파일을 만듭니다:

const blob = new Blob(
  [pdfBytes],
  { type: "application/pdf" }
);

const url = URL.createObjectURL(blob);

마지막으로 다운로드를 트리거합니다:

const link = document.createElement("a");

link.href = url;
link.download = "rotated-document.pdf";

link.click();

이 전체 워크플로우는 브라우저 내에서 로컬로 실행되며 백엔드 서버가 필요하지 않습니다.

도구 내에서 생성 버튼의 모습은 다음과 같습니다:

최종 PDF 미리보기 및 다운로드

처리가 완료되면 도구는 회전된 문서의 실시간 미리보기를 표시합니다.

사용자는 최종 파일 다운로드 전에 업데이트된 페이지를 검토할 수 있습니다.

인터페이스는 총 페이지 수와 파일 크기와 같은 추가 문서 세부 정보를 표시합니다.

생성된 PDF 다운로드 전에 파일 이름 변경 옵션이 있습니다.

예를 들어, 사용자는 파일을 이렇게 이름을 바꿀 수 있습니다:

const fileName = prompt(
  "Enter PDF name:",
  "rotated-document"
);

미리보기 섹션에는 왼쪽과 오른쪽 네비게이션 컨트롤이 포함되어 있어 사용자가 브라우저 내에서 직접 회전된 페이지를 브라우징할 수 있습니다.

문서의 세부 정보도 동적으로 표시될 수 있습니다:

fileSizeElement.textContent =
  formatFileSize(blob.size);

pageCountElement.textContent =
  pdfDoc.getPageCount();

이는 사용성을 향상시키고 다운로드하기 전에 사용자가 최종 출력을 확인하는 데 도움이 됩니다.

최종 출력 섹션의 모습은 다음과 같습니다:

실제 문서에서 PDF 회전이 유용한 이유

PDF 회전은 작은 기능처럼 보일 수 있지만, 일상적인 문서 처리에서 매우 흔한 문제를 해결합니다.

스캔된 문서, 모바일 스캔, 청구서, 증서, 사무 파일 등 많은 문서가 잘못된 방향으로 저장됩니다. 일부 페이지는 옆으로 돌아가거나 뒤집혀 있거나, 세로와 가로 레이아웃이 섞여 있습니다.

파일을 다시 열어서 스캔하는 대신 사용자는 브라우저 내에서 페이지 방향을 빠르게 수정할 수 있습니다.

예를 들어, PDF 회전은 일반적으로 다음과 같은 경우에 사용됩니다.

• 스캔된 계약서

• 청구서와 영수증

• 정부 서류

• 학술 문서

• 건설 도면

• 풍경 보고서

• 모바일 카메라가

여러 페이지의 PDF를 작업할 때 특정 페이지만 수정해야 할 때 매우 유용합니다.

일부 사용자들은 회전할 수만 원하는 경우가 있습니다.

• 짝수 페이지

• 홀수 페이지

• 특정 페이지

• 풍경 페이지만

그래서 현대 PDF 도구에서 페이지 기반 회전 제어가 중요합니다.

브라우저 기반 PDF 회전도 프라이버시를 향상시킵니다. 업로드된 문서는 외부 서버로 전송되지 않고 사용자의 기기에 남아 있습니다.

데모: PDF 회전 도구는 어떻게 작동하는지

단계 1: PDF 업로드

사용자는 먼저 브라우저 기반 도구에 PDF 문서를 직접 업로드합니다.

업로드 섹션은 드래그 앤 드롭과 수동 파일 선택을 모두 지원합니다.

업로드 인터페이스의 모습은 다음과 같습니다.

단계 2: PDF 페이지 미리보기

문서를 업로드한 후, 도구는 페이지 미리보기를 자동으로 생성합니다.

미리보기 섹션에는 회전 옵션이 포함되어 있어 사용자가 필요에 따라 문서 페이지를 회전할 수 있습니다.

도구 내의 미리보기 섹션입니다:

3단계: 회전 설정 구성

사용자는 이제 PDF 페이지가 어떻게 회전할지 선택할 수 있습니다.

도구는 다음을 지원합니다:

• 왼쪽으로 회전

• 오른쪽으로 회전

• 180도 뒤집기

• 세로 방향

• 가로 방향

사용자는 회전이 모든 페이지에 적용되는지 아니면 특정 페이지에만 적용되는지 선택할 수 있습니다.

회전 설정 패널이 어떤 모습인지 아래와 같습니다.

4단계: 회전된 PDF 생성

모든 설정이 완료되면 사용자는 생성 버튼을 클릭하여 회전을 적용합니다.

브라우저는 문서를 로컬에서 처리하고 즉시 업데이트된 PDF를 생성합니다.

도구 내에서 생성 버튼이 여기 있습니다:

5단계: 최종 출력 미리보기

처리가 완료되면 도구는 브라우저 내에서 회전된 PDF 미리보기를 직접 표시합니다.

사용자는 왼쪽 및 오른쪽 컨트롤을 사용하여 페이지별로 이동하여 최종 출력을 확인할 수 있습니다.

인터페이스는 다음을 표시합니다:

• 총 페이지 수

• 파일 크기

• 출력 파일명

최종 미리보기 섹션입니다:

6단계: PDF 파일 이름 변경 및 다운로드

다운로드 전에 사용자는 브라우저 내에서 생성된 PDF 파일을 직접 이름을 변경할 수 있습니다.

이름을 변경한 후, 업데이트된 문서를 즉시 다운로드할 수 있습니다.

이름 변경 및 다운로드 섹션입니다:

실제 사용에서 중요한 주의사항들

스캔된 PDF 파일을 사용할 때는 페이지 방향 문제가 매우 흔합니다.

일부 문서에는 다양한 방향이 섞여 있을 수 있어 특정 페이지는 세로로 되어 있고 다른 페이지는 가로로 되어 있을 수 있습니다.

페이지별로 회전을 적용하는 것은 전체 문서를 맹목적으로 회전하는 것보다 더 나은 결과를 주는 경우가 많습니다.

또한 큰 PDF 파일은 브라우저 내에서 처리 시간을 증가시킬 수 있습니다.

예를 들어:

if (file.size > 50 * 1024 * 1024) {
  alert("Large PDF files may process slowly.");
}

영구 변경 사항을 적용하기 전에 페이지를 미리 미리보는 것은 또 다른 유용한 최적화입니다.

이렇게 하면 사용자가 페이지 방향을 확인하고 업데이트된 문서를 다운로드하기 전에 오류를 줄일 수 있습니다.

브라우저 내에서 모든 것이 로컬로 실행되므로 업로드된 문서는 사용자의 기기에서 영원히 벗어나지 않아 프라이버시와 보안이 향상됩니다.

주의해야 할 일반적인 오류

일반적인 실수는 페이지를 여러 번 실수로 회전하는 것입니다.

예를 들어, 연속적인 90도 회전을 적용하면 예상치 못한 방향 변경이 발생할 수 있습니다.

다른 문제는 회전을 적용하기 전에 페이지 선택을 무시하는 것입니다.

사용자는 특정 문서 부분이 아닌 모든 페이지를 실수로 회전할 수 있습니다.

큰 스캔된 PDF 파일도 렌더링 및 미리보기 생성을 느리게 할 수 있습니다.

업로드된 파일을 처리하기 전에 검증하면 손상된 워크플로우를 피할 수 있습니다.

if (!file || file.type !== "application/pdf") {
  alert("Please upload a valid PDF file.");
  return;
}

잘못된 미리보기 동기화는 또 다른 흔한 문제입니다.

페이지 미리보기가 회전 후 새로 고침되지 않으면 사용자는 xuất khẩu된 PDF가 올바르더라도 회전이 실패했다고 생각할 수 있습니다.

각 회전마다 미리보기를 동적으로 업데이트하면 전반적인 경험을 향상시킵니다.

결론

이 튜토리얼에서는 JavaScript를 사용하여 브라우저 기반 PDF 회전기를 만들었습니다.

PDF 파일 업로드, 문서 페이지 미리보기, 선택한 페이지 회전, 페이지 방향 변경, 업데이트된 PDF 생성 및 브라우저 내에서 최종 문서 다운로드하는 방법을 배웠습니다.

더 중요한 것은 현대 브라우저가 백엔드 서버에 의존하지 않고 로컬에서 실용적인 PDF 편집 작업을 처리하는 방법을 보셨다는 것입니다.

이 접근 방식은 도구를 빠르고, 프라이빗하며, 사용하기 쉽게 유지합니다.

또한 여기서 실시간 도구를 시도해 볼 수 있습니다: AllInOneTools - PDF Rotator Tool.

이 워크플로우를 이해하면 PDF 페이지 추출, 주석, 문서 정리, 디지털 서명 또는 고급 편집 도구와 같은 기능을 추가로 확장할 수 있습니다.

그리고 그때부터 일들이 정말 흥미로워지기 시작합니다.