잡학정보

2025-10-07

블로그에 코드 복사 버튼 기능 넣는 방법 - 블로그스팟, 티스토리 적용 가능

HTML 복사 기능 적용 방법


블로그에 코드 복사 버튼 기능 넣는 방법 - 블로그스팟, 티스토리 적용 가능

블로그에 코드 예시를 공유할 때, 방문자가 마우스로 드래그해 복사하는 과정은 생각보다 번거롭다.

이럴 때 클릭 한 번으로 손쉽게 복사할 수 있는 ‘클립보드 복사 버튼’을 추가하면, UX(사용자 경험)를 크게 향상시킬 수 있다.

이번 포스팅에서는 블로그스팟이나 티스토리 등 HTML 편집이 가능한 블로그에서 쉽게 구현할 수 있는 클립보드 복사 버튼 기능을 소개한다.


별도의 라이브러리 없이 HTML, CSS, JavaScript만으로 구현 가능하며, Clipboard API를 활용해 복사 기능을 간단히 적용할 수 있다.



1. 클립보드 복사 기능이 필요한 이유

코드를 공유하는 블로그나 개발 튜토리얼에서는 가독성뿐 아니라 복사 편의성도 중요하다.

코드 복사 버튼을 추가하면 사용자는 복잡한 선택 없이 클릭 한 번으로 코드를 복사할 수 있어, 페이지 체류 시간과 만족도가 향상된다.

또한 콘텐츠 활용도가 높아지면서 블로그 신뢰도와 재방문율 향상에도 도움이 된다.



2. HTML 코드 : 코드 블록과 버튼 기능

먼저 복사 버튼과 코드 블록을 감싸는 구조를 만든다.

각 코드 블록은 <div>로 감싸고, <button>으로 복사 버튼을 추가한다.

버튼에는 id와 onclick 이벤트를 지정해 어떤 코드를 복사할지 명시한다.


1). 블로그 포스팅에 적용 방법

예시 HTML 코드를 참고하여 다음 아래와 같이 적용 시키면 된다.


- '글쓰기'에서 HTML 코드를 넣으면 된다.

- 색상을 표기한 것은 고정한다.

- 'HTML 코드 복사'는 우측 상단에 특정 단어를 사용하고 싶을 경우 변경

- <pre id="codeBlock1"> ~ </pre> 사이에 복사할 문구를 기입하면 된다.


예시 HTML 코드

<div class="code-container">
<div class="code-header">
<button class="copy-button" id="copyBtn1" onclick="copyCode('copyBtn1', 'codeBlock1')">
HTML Copy
</button>
</div>
<div class="code-body">
<pre id="codeBlock1">
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>예시 페이지</title>
</head>
<body>
    <h3>안녕하세요!</h3>
</body>
</html>
</pre>
</div>
</div>


2). 여러개의 코드 복사하고 싶을 경우

코드를 여러 개 보여주고 싶다면, copyBtn2, codeBlock2 식으로 id를 다르게 설정하면 된다.

쉽게 설명하면 위의 예시안에 1을 전부 2로 바꿔주면된다.


- copBtn1 -> copyBtn2

- codeBlock1 -> codeblock2



3. CSS 코드 : 코드 박스와 버튼 스타일링

다음으로 코드 블록과 버튼의 디자인을 꾸며준다.

아래 예시는 블로그스팟의 Wable 테마를 기준으로 적용된 설정이다.

색상은 원하는 색상으로 변경하면 된다.


1). 스타일 CSS 코드 복사하기

<style>
 .code-container {
  position: relative;
  border: 1px solid var(--wable-color-main);
  border-radius: var(--wable-radius);
  margin: 0 !important;
  overflow: hidden;
 }
 /* 코드 블록 헤더 */
 .code-header {
  background-color: var(--wable-color-body);
  padding: 5px 10px;
  margin: 5px !important;
  border-bottom: 1px solid var(--wable-color-body);
  overflow: auto;
 }  
 .code-body {
  background-color: var(--wable-color-body);
  margin : 5px !important;
  padding: 0 10px;
  overflow-x: auto;
 }  
 /* 실제 코드(pre 태그) 스타일 */
 .code-body pre {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  white-space: no-wrap;
 }
 /* 복사 버튼 스타일 */
 .copy-button {
  float: right;
  padding: 5px 10px;
  background-color: var(--wable-color-main);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.8;
  transition: opacity 0.3s;
 }
 .copy-button:hover {
  opacity: 1;
 }
 .copy-button:active {
  background-color: var(--wable-color-main);
 }
</style>


티스토리에서도 동일한 CSS를 사용하면 된다.

단, 블로그 디자인에 따라 색상 변수를 직접 지정하거나 # 색상값으로 수정해도 무방하다.


2). 스타일 기능 적용 방법

블로그스팟일 경우 테마 편집에서 <head> </head> 사이에 붙여넣기 하면된다.

만일 <style>이 있을 경우 </style> 바로 위에 적용시켜도 무방하다.

다만, 위에서 <style></style>은 제거한 뒤 적용 시켜야 코드 오류가 없다.

어렵다면, 처음과 같이 붙여넣으면 된다.



4. JavaScript 코드 : Clipboard API로 복사 기능 구현

복사 버튼 기능의 가장 중요한 설정이다.

스크립트는 반드시 설정해야 복사 기능이 정상 작동한다.


기능 특이 사항으로는 버튼을 클릭하면 코드가 자동 복사되고, 2초 동안 "복사 완료!" 메시지가 표시된다.


1). 스크립트 코드 복사하기

<script>
function copyCode(buttonId, codeId) {
const codeElement = document.getElementById(codeId);
let codeToCopy = codeElement.innerText || codeElement.textContent;  
codeToCopy = codeToCopy.replace(/</g, '<').replace(/>/g, '>');
if (navigator.clipboard) {
navigator.clipboard.writeText(codeToCopy).then(() => {
const button = document.getElementById(buttonId);
const originalText = button.innerText;
button.innerText = '복사 완료!';            
setTimeout(() => {
button.innerText = originalText;
}, 2000);
}).catch(err => {
console.error('클립보드 복사 실패:', err);
alert('복사에 실패했습니다. 수동으로 복사해 주세요.');
});
} else {
console.error('Clipboard API 미지원');
alert('이 브라우저는 자동 복사 기능을 지원하지 않습니다. 수동으로 복사해 주세요.');
}
}
</script>


2). 스크립트 코드 적용 방법

스타일과 테마에서 똑같이 <head> </head> 사이에 붙여넣기 하면된다.

다만, 스크립트는 단독이므로 단독 붙여넣기로 한다.



5. 적용 순서 정리

구분 내용
1단계 HTML 코드 블록과 복사 버튼 추가
2단계 CSS 스타일 삽입 (디자인 적용)
3단계 JavaScript 코드 삽입 (복사 기능 구현)
4단계 테스트 후 버튼 클릭 시 복사 동작 확인



6. 쉬운 설명

코드에 대하여 이해가 어렵다면 아래와 같이 적용해보자.

통상 테마의 기본 순서는


<head>

<skin></skin>

<style></style>

</head>


이렇게 되어 있다.

너무 어렵다면, </head> 바로 위에 붙여넣기하면 문제 없이 사용 가능하다.

스크립트 적용 위치



7. 주의할 점

1). HTTPS 환경 필수

navigator.clipboard API는 보안상의 이유로 HTTPS 환경에서만 정상 동작한다.

티스토리와 블로그스팟은 기본적으로 HTTPS를 지원하므로 문제 없다.


2). 브라우저 호환성

대부분의 최신 브라우저(크롬, 엣지, 사파리, 파이어폭스)는 Clipboard API를 지원한다.

단, 구형 브라우저에서는 수동 복사 메시지가 표시될 수 있다.


3). HTML 엔티티 변환

코드 블록 내 &lt;와 &gt;와 같은 HTML 엔티티는 자동 복사 시 원본 태그로 변환되므로 코드 구조를 확인해야 한다.



결론 : UX를 높이는 간단한 기능

클립보드 복사 버튼은 블로그 사용자 경험을 크게 개선하는 간단한 기능이다.

복잡한 설정 없이 HTML, CSS, JavaScript 세 가지 구성만으로 구현할 수 있으며, 방문자가 코드 예시를 쉽게 복사할 수 있도록 돕는다.

개발 블로그나 튜토리얼 사이트를 운영한다면 반드시 적용해보길 추천한다.




그럼 끝