웹 페이지에서 버튼 하나만 클릭하면 입력된 텍스트가 자동으로 클립보드에 저장되는 '클립보드에 복사(Copy to Clipboard)' 기능은 사용자 편의성을 크게 높여 주는 대표적인 UI 요소입니다. 이 글에서는 JavaScript를 활용해 이 기능을 간단하게 구현하는 방법을 완전한 예제 코드와 함께 살펴보겠습니다.
예제 코드
다음은 HTML, CSS, JavaScript를 모두 포함한 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>클립보드 복사 기능</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input,
button {
padding: 8px;
}
</style>
</head>
<body>
<h1>클립보드 복사 기능 만들기</h1>
<input class="textCopy" type="text" />
<button class="Btn">텍스트 복사</button><br /><br />
<input type="text" placeholder="여기에 붙여넣기" />
<h3>위의 버튼을 클릭하면 텍스트 상자의 내용이 클립보드로 복사됩니다.</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let textCopyEle = document.querySelector(".textCopy");
BtnEle.addEventListener("click", () => {
textCopyEle.select();
document.execCommand("copy");
});
</script>
</body>
</html>
실행 결과
첫 번째 텍스트 상자에 아무 문장이나 입력한 뒤 '텍스트 복사' 버튼을 클릭하면 해당 텍스트가 클립보드에 복사됩니다.
이후 하단의 '여기에 붙여넣기' 텍스트 상자 안에서 마우스 오른쪽 버튼을 클릭해 '붙여넣기'를 선택하거나, 단축키(Ctrl+V)를 누르면 복사된 텍스트가 그대로 붙여넣어지는 것을 확인할 수 있습니다.
작동 원리
이 기능은 단 두 줄의 핵심 코드로 구현됩니다.
textCopyEle.select()— 입력 필드의 전체 텍스트를 선택 상태로 만듭니다. 클립보드 복사는 반드시 선택된 텍스트를 대상으로 동작하기 때문에 이 과정이 필요합니다.document.execCommand("copy")— 현재 선택된 텍스트를 클립보드로 복사하는 브라우저 내장 명령을 실행합니다.
버튼에는 addEventListener("click", ...)로 클릭 이벤트 리스너를 등록하여, 사용자가 버튼을 누를 때마다 위 두 동작이 순서대로 실행되도록 했습니다.
참고: 최신 방식인 Clipboard API
document.execCommand()는 현재 폐기(deprecated)된 API로, 앞으로 지원이 중단될 수 있습니다. 최신 브라우저에서는 비동기 방식의 Clipboard API를 사용하는 것이 권장됩니다.
navigator.clipboard.writeText(textCopyEle.value)
.then(() => alert("복사되었습니다!"))
.catch(() => alert("복사에 실패했습니다."));
Clipboard API는 HTTPS 환경에서만 동작하고 성공·실패 여부를 Promise로 반환하기 때문에, 더 안정적이고 직관적인 에러 처리가 가능하다는 장점이 있습니다. 다만 구형 브라우저 호환성이 필요하다면 위 예제처럼 execCommand("copy") 방식을 대안으로 활용할 수 있습니다.