극초보 바이브코딩 #10 · HTML 파일 하나

글자 수 세기 (공백 포함·제외·바이트)

"500자 이내" 자기소개서, 하나, 둘, 셋 셀 수는 없죠. 붙여넣으면 바로 세요. 그런데 "몇 글자"는 하나의 숫자가 아니에요. 무엇을 한 글자로 세느냐를 정해야 해요.

바로 쓰기: 글자 수 세기

글은 이 브라우저 안에서만 세요. 쓰던 글은 이 브라우저에만 남아요. 제출하는 곳마다 공백·줄바꿈·바이트를 세는 기준이 다를 수 있으니 안내문을 꼭 확인하세요.

1AI에게 세 줄로 요청하기

HTML 파일 하나로, 글을 붙여넣으면 글자 수를 세어 주는 페이지를 만들어줘.
글 넣는 칸 아래에 공백 포함 글자 수를 크게 보여줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

연습할 때는 진짜 자기소개서나 회사 문서를 AI 대화창에 붙여넣지 말고 아무 글로 하세요. 요청문에는 글 대신 "이런 페이지를 만들어줘"만 넣으면 돼요.

2연습장에서 실행하기

3미션: 자소서 쓰는 날을 위해

  1. 기본: 붙여넣으면 글자 수가 바뀐다

    공백 포함 글자 수가 크게 보여야 해요.

  2. 👍 하나는 몇 글자일까 ⭐

    안녕하세요 👍👨‍👩‍👧🇰🇷를 넣고 눈으로 세어 보세요. 모두 9개예요. 페이지는 몇이라고 하나요? 힌트: "눈에 보이는 글자 하나를 1로 세어줘. 이모지도 한 개는 1이야"처럼 기준을 말로 정해 주세요.

  3. 공백 빼고, 줄·어절도

    공백 제외 글자 수, 줄 수, 어절(띄어쓰기로 나뉜 덩어리) 수. 힌트: 줄바꿈과 탭도 공백으로 칠지, 빈 줄은 셀지 정하고 짧은 글로 손계산과 맞춰 보세요.

  4. 한도를 넘으면 빨갛게

    한도 칸, 차오르는 막대, 넘으면 빨갛게, "몇 자 남음/초과" 글. 힌트: 넘었을 때 어떻게 보일지 한 줄을 꼭 넣으세요.

  5. 바이트로도 세기

    한글 3바이트 방식과 2바이트 방식을 나란히. 영문·숫자·공백은 1바이트예요. 어느 방식인지는 제출하는 곳마다 달라요.

  6. 자유

    결과 복사, 새로고침해도 글이 남게, 어두운 화면, 드래그한 부분만 세기…

안 될 때 확인할 것

증상원인과 해결
이모지를 넣었더니 눈으로 센 것보다 크다이모지 한 개를 여러 칸으로 셌어요. 미션 2
같은 글인데 다른 사이트에서는 숫자가 다르다줄바꿈·공백을 세는 기준이 달라요. 그 사이트의 안내문 확인
한도를 넘었는데 아무 표시가 없다"넘으면 빨간색으로 바꾸고 몇 자 초과인지 알려줘"
maxlength로 제한했더니 이모지가 반만 들어간다입력 제한은 칸 수로 세요. 입력을 막지 말고 숫자와 색으로만 알리기
미션을 했더니 원래 기능이 사라졌다"기존 기능은 그대로 두고, 전체 코드를 처음부터 끝까지 줘"

실험: 글자 하나는 컴퓨터에 몇 칸일까?

엄지 이모지는 눈에는 1개지만 컴퓨터는 2칸, 가족 이모지는 8칸, 깃발은 4칸이라는 그림

세는 방법이 세 가지라서 숫자가 달라져요. 아래 표는 지금 이 브라우저가 실제로 센 값이에요. 칸에 아무 글이나 넣어 비교해 보세요.

컴퓨터는 이모지를 여러 조각을 이어 붙여서 그려요. 가족 이모지는 사람 셋을 특수한 이음 글자로 이은 모양이라 칸이 8개예요. 그래서 "칸 수"로 세는 코드는 이모지가 많을수록 숫자가 부풀어요.

한글 '한'은 요즘 방식(UTF-8)으로 3바이트, 옛 방식으로 2바이트. 어느 쪽으로 세는지는 사이트마다 다르고 이모지는 옛 방식에 담을 수 없다는 그림

바이트도 방식에 따라 달라요. 요즘 방식(UTF-8)은 한글 한 글자가 3바이트, 옛 방식(CP949 계열)은 2바이트예요. 옛 방식에는 이모지를 담을 방법이 없어요. 윈도우식 줄바꿈은 글자 2개(\r\n)로 세기도 해서 곳마다 1바이트 차이가 나기도 해요.

블로그에서 자세히 보기: 극초보 바이브코딩 #10 원문

이전·다음 실습: #9 N빵 정산기 · #11 집중 타이머

자주 묻는 질문

공백 포함과 공백 제외 중 뭘 봐야 하나요?

제출하는 곳의 안내를 따르세요. 자기소개서 시스템은 대개 "공백 포함 ○자"로 적혀 있지만 회사마다 달라요.

줄바꿈은 글자로 세나요?

이 도구는 공백 포함 수에 줄바꿈을 1글자로 세고, 공백 제외 수에서는 뺍니다. 다른 사이트는 다르게 셀 수 있어요.

글이 저장되거나 전송되나요?

전송하지 않아요. 쓰던 글은 다시 열 때를 위해 이 브라우저에만 남아요.