들어가기 전에
스노로즈 홈 화면 하단에는 후원 계좌번호가 안내되어 있지만, 게시글 외부 유출을 막기 위한 정책으로 사이트 내 우클릭이 제한되어 있어 복사가 다소 불편했습니다.
이 불편함을 줄이고, UX 측면에서 후원 계좌 정보를 간편하게 이용할 수 있도록 Clipboard API를 활용한 복사 기능을 구현하게 되었어요.
셀프 요구사항
- 홈 화면 Footer에 표시된 후원 계좌번호를 클릭하면 자동으로 클립보드에 복사되도록 구현하기
- 복사 성공 또는 실패 시, 토스트 메시지를 통해 사용자에게 결과 안내하기
구현 과정
블로그나 공식 문서를 살펴보면 여전히 execCommand 메서드를 사용하는 예시가 많지만, 현재는 deprecated 상태라 대신 Clipboard API 사용이 권장됩니다.
필요한 기능이 단순 텍스트 복사이므로, 시스템 클립보드의 읽기·쓰기 권한을 제공하는 Clipboard 인터페이스를 사용했어요.
공식 문서에 따르면, 모든 Clipboard API 메서드는 비동기적으로 동작하며, 클립보드 접근이 완료되면 Promise를 반환하게 됩니다.
-
위의 경우를 제 프로젝트에 적용해 보았을때 read(), write(), readText()인 경우 복사에 실패하고 writeText()일 경우에만 복사에 성공하게 됩니다.
- read() - 클립보드에서 복합 데이터 읽기 (예: HTML, 이미지 등)
- 결과: 복사 실패 메시지 출력
- write() - 클립보드에 복합 데이터 쓰기
- 결과: 복사 실패 메시지 출력
- readText() - 클립보드에서 텍스트 읽기
- 결과: 복사 성공 메시지 출력 + 복사 기능 적용 안됨
- writeText() - 클립보드에 텍스트 쓰기 (복사)
- 결과: 복사 성공 메시지 출력 + 복사 기능 정상 작동
- read() - 클립보드에서 복합 데이터 읽기 (예: HTML, 이미지 등)
코드 작성하기
export default function Footer() {
const { toast } = useToast();
const textToCopy = '복사할 메시지';
const handleCopy = () => {
navigator.clipboard
.writeText(textToCopy)
.then(() => {
toast(TOAST.COPY_AND_PASTE.SUCCESS);
})
.catch((error) => {
toast(TOAST.COPY_AND_PASTE.FAIL);
});
};
return (
<footer className={style.footer}>
<div className={style.info}>
<span onClick={handleCopy}>
{textToCopy}
</span>
</div>
<div>
...
</div>
</footer>
);
}실패 케이스 테스트 하기
콘솔에 아래 코드를 입력한 뒤, 복사할 영역을 선택하면 ‘복사 실패’라는 토스트 메시지가 표시됩니다.
// 콘솔에 붙여넣어 실행 후, 후원 계좌 클릭
navigator.clipboard.writeText = () => Promise.reject(new Error('강제 실패'));마치며
UX를 개선하고 싶은 마음도 있었고, 아직 공식 문서를 참고하는 데 익숙하지 않아 연습해보고 싶은 마음도 있었어요. 다행히 해당 공식 문서는 비교적 이해하기 쉬웠고, 적용도 수월했던 것 같아요 :)
내가 구현한 후원 계좌 복사 기능이 학생들에게 더 나은 접근성을 제공해, UX 향상으로 이어지면 좋겠습니다.