JavaScript로 클립보드에 텍스트 복사하는 방법 (예제 코드 포함)

웹 개발을 하다 보면 버튼 클릭 한 번으로 텍스트를 클립보드에 복사하는 기능을 구현해야 하는 경우가 자주 있습니다. 이 글에서는 JavaScript를 사용해 클립보드에 텍스트를 복사하는 방법을 실제 동작하는 예제와 함께 단계별로 살펴보겠습니다.

JavaScript로 클립보드에 텍스트 복사하기

다음은 입력 필드에 있는 텍스트를 클립보드에 복사하는 전체 코드입니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
button {
    border: none;
    outline: none;
    background-color: rgb(191, 187, 255);
    color: black;
    font-weight: bold;
    padding: 10px;
}
input {
    padding: 10px;
}
</style>
</head>
<body>
<h1>클립보드 예제</h1>
<h2>아래 버튼을 클릭해 텍스트를 복사한 후, 원하는 곳에 붙여넣어 보세요</h2>
<input type="text" value="Hello World" class="textInput" />
<button class="copy">텍스트 복사</button>
<script>
document.querySelector(".copy").addEventListener("click", copyText);
function copyText() {
    var copyText = document.querySelector(".textInput");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");
    alert("복사된 텍스트: " + copyText.value);
}
</script>
</body>
</html>

출력

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

JavaScript로 클립보드에 텍스트 복사하는 방법 (예제 코드 포함)

'텍스트 복사' 버튼을 클릭하면 −

JavaScript로 클립보드에 텍스트 복사하는 방법 (예제 코드 포함)

코드 핵심 설명

select(): input 요소 안의 텍스트 전체를 선택합니다.
setSelectionRange(0, 99999): 모바일 환경 등에서도 텍스트 전체가 선택되도록 선택 범위를 지정합니다.
document.execCommand("copy"): 현재 선택된 텍스트를 클립보드에 복사합니다.

참고: 최신 Clipboard API 사용하기

document.execCommand()는 현재 폐기(deprecated)된 기술이므로, 최신 브라우저에서는 비동기 방식의 Clipboard API를 사용하는 것이 권장됩니다. HTTPS 환경에서 다음과 같이 더 간결하게 구현할 수 있습니다.

function copyText() {
    const text = document.querySelector(".textInput").value;
    navigator.clipboard.writeText(text)
        .then(() => alert("복사된 텍스트: " + text))
        .catch(err => console.error("복사 실패:", err));
}

두 방식 모두 사용자 제스처(버튼 클릭 등)에 의해 호출되어야 하며, 이는 악성 스크립트가 임의로 클립보드에 접근하는 것을 막기 위한 브라우저 보안 정책입니다. 프로젝트의 대상 브라우저 범위에 따라 적절한 방식을 선택해 적용하시기 바랍니다.