Claude Artifacts로 글자 수 점검기 만들기

짧은 지원서 답변이나 프로필 소개, 공지문도 글자 수 제한에 맞추려면 여러 번 고치게 됩니다. 다시 쓸 수 있는 점검기가 있으면 수정한 글을 붙여 넣고 제한을 바꾸면서 얼마나 더 쓸 수 있는지 바로 확인할 수 있습니다.

Claude Artifacts를 활용하면 프로그래밍 지식이 없어도 이런 작은 도구를 만들어 볼 수 있습니다. 목표는 계산 기준을 직접 확인하고 내일도 다시 열어 쓸 수 있는 도구를 얻는 것입니다. 이 글은 만들 도구의 동작 명세와 확인 방법을 제안하며, Claude에서 실제 제작·실행한 결과를 보고하는 글은 아닙니다.

기능과 계산 기준부터 정하기

첫 버전은 단순하게 만드세요. 텍스트 입력란 하나, 수정 가능한 양의 정수 제한값, 실시간 글자 수, 남은 수 또는 초과한 수를 보여 주는 상태 표시가 있으면 됩니다. ‘비우기’와 ‘예시 불러오기’ 버튼도 넣습니다. 제한을 넘은 초안도 살펴볼 수 있도록 자동으로 줄이거나 공백을 지우거나 입력을 막지 않게 요청하세요.

만들기 전에 무엇을 한 글자로 셀지 정합니다. 여기서는 공백과 줄바꿈을 포함한 유니코드 코드 포인트를 기준으로 합니다. Windows와 구형 Mac의 줄바꿈은 계산할 때만 줄바꿈 하나로 통일하고, 붙여 넣은 원문은 바꾸지 않습니다. 단순 이모지 😀는 1개지만, 조합된 이모지는 여러 코드 포인트로 이루어질 수 있습니다. 이 기준은 눈에 보이는 글자 수나 모든 사이트의 계산 방식과 같다는 뜻이 아닙니다. JavaScript 문자열 반복자 문서에서 코드 포인트와 눈에 보이는 조합 문자가 어떻게 다른지 확인할 수 있습니다.

제출처가 바이트 수를 세거나, 이모지를 다르게 처리하거나, 공백을 제외한다면 도구의 명세도 바꿔야 합니다. 실제로 사용하기 전에 짧은 예시를 제출처의 자체 카운터와 비교하세요. 최종 판단은 제출처의 계산 기준을 따릅니다.

Claude에 직접 쓸 수 있는 도구 요청하기

웹이나 데스크톱에서 Claude에 로그인하고 새 대화를 시작합니다. 현재 Artifacts 도움말에 따르면 Free, Pro, Max, Team, Enterprise 플랜에서 아티팩트를 만들 수 있습니다. Settings > Capabilities 또는 조직의 기능 설정에서 ‘Cloud code execution and file creation’이 켜져 있어야 합니다. 관리 계정에서는 관리자가 이 설정의 접근을 제어할 수 있습니다.

반복 사용 글자 수 점검기 프롬프트를 사용하세요. 작은 대화형 아티팩트와 함께, 외부 라이브러리·네트워크 호출·AI 요청·초안 저장 없이 단독 실행할 HTML 파일을 요청합니다. 이는 생성할 도구에 대한 요구사항이므로, 그대로 구현되었다고 가정하지 말고 받은 파일을 확인해야 합니다.

각 입력란과 버튼에 명확한 이름을 붙이고, 색만으로 상태를 구분하지 않으며, 좁은 화면에서도 읽기 편한 배치를 요청하세요. 만드는 동안에는 가상의 예시를 쓰면 됩니다. 실제 지원서 내용을 넣을 필요는 없습니다.

숫자를 믿기 전에 동작 확인하기

아래는 정한 계산 기준을 확인하기 위한 가상의 테스트와 기대 결과입니다. Claude에서 관찰한 실행 결과가 아닙니다. 제한을 5로 설정하세요.

빈 입력: 글자 수 0, 남은 수 5가 표시되고 오류가 없어야 합니다.
abcde: 5이며 ‘제한에 도달’로 표시됩니다. abcdef: 6이며 ‘1 초과’로 표시됩니다.
앞뒤 공백을 포함한 a : 3이어야 합니다. 공백이 임의로 삭제되면 안 됩니다.
A 다음에 줄바꿈 하나, 그다음 B: 3이어야 합니다. Windows 방식의 줄바꿈도 같은 결과가 나와야 합니다.
한글😀: 3입니다. 👍🏽: 코드 포인트 기준으로 2입니다.

제한값을 비우거나 0, 음수, 소수로 바꿔 보세요. 통과 표시 대신 올바른 값을 입력하라는 메시지가 나와야 합니다. ‘비우기’는 입력과 결과를 초기화하고, 제한값을 바꾸면 상태가 즉시 갱신되어야 합니다. 결과가 다르면 정확한 입력값, 기대 결과, 실제 표시 결과를 Claude에 알려 수정한 뒤 테스트를 다시 해 보세요. AI 답변을 검증할 때도 같은 습관이 도움이 됩니다.

다시 쓸 수 있는 파일로 보관하기

생성된 HTML 파일을 내려받아 브라우저로 엽니다. 요청한 대로 네트워크 호출과 초안 저장 기능이 빠졌는지 코드를 검토하세요. 코드를 잘 모른다면 검토 도움을 받으세요. 앞의 테스트를 반복한 다음, 네트워크 연결을 끊고 새로고침해 기본 기능이 계속 작동하는지도 확인합니다. Anthropic의 Artifacts 소개에는 HTML을 포함한 내보내기가 안내되어 있지만, 아티팩트 종류에 따라 내보내기 옵션이 다릅니다. 필요하면 단독 실행 파일을 명시적으로 요청하세요.

입력 내용이 없는 도구와 계산 기준을 함께 보관하세요. 수정할 때는 Artifacts 탭으로 돌아갈 수 있고, 내려받은 파일이 잘 작동하면 평소에는 빠르게 열어 확인할 수 있습니다. 마지막에는 실제 글을 제출처에 붙여 넣고 최종 글자 수를 확인하세요.

기능 지원 여부 확인일: 2026년 10월 19일. 제품 발표일을 뜻하지 않습니다.