워드프레스 블로그 게시글에 각주를 추가하는 방법

각주는 글을 작성할 때 본문 내의 특정 부분의 정보를 보충하거나 출처를 밝히기 위해 본문 하단에 입력되는 주석입니다. 각주는 논문이나 법률 서적 등에서 많이 사용되지만, 위키피디아, 나무위키 등의 사이트에서도 사용되고 있습니다.

워드프레스에서는 플러그인을 사용하여 쉽게 각주를 추가할 수 있습니다. 플러그인 사용을 원치 않는 경우 간단한 방법으로 각주를 달 수 있습니다. 이 글에서는 플러그인을 사용하지 않고 각주를 다는 방법에 대하여 설명합니다.

플러그인을 사용하여 워드프레스 블로그 게시글에 각주를 다는 방법

워드프레스에는 무료 혹은 유료 플러그인을 사용하여 쉽게 기능을 확장할 수 있습니다. 무료 각주 플러그인으로 다음과 같은 플러그인이 있습니다.

Easy Footnotes와 Footnotes Made Easy는 플러그인 설명 페이지가 한글로 번역되어 있으므로 한국어 페이지에서 이 플러그인의 기능 설명을 확인할 수 있습니다.

이 두 플러그인은 나무위키나 위키피디아의 각주 시스템과 비슷하게 말풍선이 표시됩니다.

쉽게 각주를 달고 싶은 경우 이러한 플러그인을 설치하여 테스트해보시기 바랍니다.

다만, 플러그인을 사용할 경우, 추후 플러그인 업데이트가 안 되면서 방치되거나 워드프레스 플러그인 저장소에서 제거될 수도 있습니다. 예를 들어, Footnotes라는 각주 플러그인이 있었지만 2022년 11월에 제거되었습니다.^[1]

플러그인을 사용하지 않고 수동으로 워드프레스 블로그 게시글에 각주를 다는 방법

워드프레스에서 각주를 다는 방법은 HTML을 조금 알면 쉽게 가능합니다. 기본적으로 다음과 같은 방법으로 각주를 달면 됩니다.

먼저 본문 하단에 HTML 앵커 링크로 각주(Footnote)를 생성합니다.
위첨자로 앵커 번호를 추가하고 링크를 설정합니다.
위의 과정을 반복하여 모든 각주를 생성하고 저장합니다.
방문자가 각주 번호를 클릭하면 해당 번호에 해당하는 각주로 이동합니다.

본문 하단에 HTML 앵커 링크로 각주 생성

본문 하단에 각주 텍스트를 입력하고, 해당 블록 설정에서 HTML 앵커를 지정합니다.^[2]

예시에서는 편의상 HTML 앵커를 footnote-숫자(예: footnote-1, footnote-2)로 지정했습니다.

각주 번호 추가하기

이제 각주 번호가 표시될 부분에 [1], [2]...와 같은 형식으로 각주 번호를 추가합니다.

위의 그림과 같이 위첨자(Superscript)를 적용하면 번호가 위첨자로 표시됩니다.

번호를 생성하고 위첨자 스타일을 적용했다면 해당 번호를 선택하고 링크 아이콘을 클릭하여 링크를 설정합니다. (Ctrl+K 단축키를 사용하여 쉽게 링크 설정도 가능합니다.)

앞 단계에서 해당 각주에 대하여 입력한 HTML 앵커 텍스트를 링크로 입력합니다(예: #footnote-1, #footnote-2, ...).

이제 방문자가 각주 번호를 클릭하면 하단의 각주로 이동합니다.

(선택 사항) 각주 내용 미리보기

위키피디아(Wikipedia)나 나무위키에서는 각주 번호 위에 마우스를 올리면 각주 내용이 팝업 박스로 표시됩니다.

위의 그림과 같이 각주 콘텐츠 미리 보기가 가능하도록 하고 싶은 경우 다음과 같은 자바스크립트(JavaScript)를 사용할 수 있습니다.

// This script displays a tooltip with footnote content.
// Wait until the document is fully loaded before executing the script
document.addEventListener("DOMContentLoaded", function() {
  // Create a new div element for the tooltip
  var tooltip = document.createElement("div");

  // Assign the 'tooltip' class to this div, 
  // which applies the tooltip styles defined in the CSS
  tooltip.className = 'tooltip'; 

  // Add the tooltip div to the body of the document
  document.body.appendChild(tooltip);

  // Find all anchor tags where the href attribute starts with '#footnote'
  document.querySelectorAll("a[href^='#footnote']").forEach(function(anchor) {
    // Extract the innerHTML of the footnote corresponding to this anchor tag
    var footnoteContent = document.querySelector(anchor.getAttribute('href')).innerHTML;

    // When the mouse hovers over the anchor tag, display the tooltip
    anchor.addEventListener('mouseover', function() {
      tooltip.innerHTML = footnoteContent; // Set the content of the tooltip
      tooltip.style.display = 'block'; // Display the tooltip
    });

    // When the mouse moves over the anchor tag, move the tooltip
    anchor.addEventListener('mousemove', function(e) {
      tooltip.style.top = (e.pageY - tooltip.offsetHeight - 10) + 'px'; // Set tooltip position
      tooltip.style.left = (e.pageX - (tooltip.offsetWidth / 2)) + 'px'; // Set tooltip position
    });

    // When the mouse stops hovering over the anchor tag, hide the tooltip
    anchor.addEventListener('mouseout', function() {
      tooltip.style.display = 'none'; // Hide the tooltip
    });

    // When the anchor tag is clicked, smoothly scroll to the footnote
    anchor.addEventListener('click', function(event) {
      event.preventDefault(); // Prevent the default click action
      // Scroll to the footnote element, with smooth scrolling enabled
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
});

위의 스크립트에는 각주 번호를 클릭할 때 부드럽게 이동하는 코드도 포함되어 있습니다.

각주 번호가 footnote-1 등과 같이 footnote-숫자일 경우에 작동하도록 코드가 만들어졌습니다. 각주 번호 규칙이 다른 경우(예: fn-1, fn-2...)에는 상기 코드를 적절히 수정하세요.

그리고 다음 커스텀 CSS 코드를 외모 » 사용자 정의하기 » 추가 CSS에 추가합니다.

/* This style block is for tooltips created by our JavaScript script */

.tooltip {
  display: none; /* Initially the tooltip is not displayed */
  position: absolute; /* The tooltip is positioned absolutely to its nearest positioned ancestor */
  border: 1px solid #333; /* The tooltip has a border that is 1px wide, solid, and dark grey */
  background-color: #161616; /* The tooltip's background color is a darker grey */
  border-radius: 5px; /* The tooltip's corners are slightly rounded */
  padding: 10px; /* The tooltip has a bit of padding to give space around the text */
  color: #fff; /* The color of the tooltip text is white */
  font-size: 12px; /* The size of the tooltip text is 12 pixels */
  z-index: 100; /* The tooltip will appear on top of other positioned elements that have lower z-index */
  max-width: 300px; /* The maximum width of the tooltip is 300 pixels. Adjust to your preference */
  word-wrap: break-word; /* If the tooltip text is too long to fit, it will break onto the next line */
  overflow-wrap: break-word; /* More modern version of word-wrap, does the same thing */
  hyphens: auto; /* If the text breaks onto a new line, insert a hyphen. Not fully supported in all browsers */
}

코드를 적절히 수정하여 원하는 스타일로 만드시기 바랍니다.

위의 스크립트와 CSS 코드를 적용하면 다음 영상과 비슷하게 작동합니다. GeneratePress 테마에서 테스트했습니다. 테마와 관계 없이 위에 제시된 자바스크립트 코드와 CSS가 올바르게 로드되고 블로그 게시글에서 각주를 제대로 추가했다면 정상적으로 작동할 것입니다.

각주를 사용해도 될까?

각주는 구시대적이어서 더 이상 필요하지 않다고 주장하는 사람들도 있습니다. 특히 웹에서는 하이퍼링크를 달 수 있기 때문에 각주가 필요하지 않을 수 있습니다. 부가적인 정보도 바로 아래에 추가하는 것도 가능할 것입니다. 하지만 경우에 따라서는 각주를 사용하여 본문 하단에 추가 정보를 입력하는 것이 더 효율적일 수도 있습니다.

각주로 출처 사이트를 표기할 경우에 각주의 링크를 클릭하여 외부 사이트로 이동하여 이탈률이 늘어날 우려가 있거나, 각주를 추가하는 것이 번거롭게 여겨지는 경우에도 각주 사용을 피하는 것이 바람직할 것입니다.

각주를 사용하는 경우 본문 가독성을 높이고 SEO 개선에 도움이 되도록 적용하는 방법에 대해 고민해 보는 것도 좋을 것 같습니다.

[1]. 플러그인에 보안 취약점이 발견되어 기간 내에 수정이 되지 않는 경우에 플러그인이 워드프레스 저장소에서 제거될 수 있습니다. 경우에 따라서는 플러그인 개발자의 요청에 의해 삭제될 수도 있습니다.

[2]. HTML 앵커는 동일 페이지 또는 다른 특정 위치의 텍스트 또는 이미지에 대한 링크를 식별하는 HTML 태그이며 워드프레스에서는 각 블록 설정의 고급 섹션에서 설정할 수 있습니다. 구텐베르크 초기에는 일부 블록(예: 제목 블록)에만 앵커 설정이 가능했지만, 지금은 모든 블록에 설정할 수 있도록 업데이트되었습니다.