본문으로 건너뛰기
oh-my-design

/hangul한국어 조판·문구 스킬

같은 화면, 다른 한국어

스킬 없이 만든 화면과 /hangul로 만든 화면이에요. 조판과 문구 말고는 모두 같아요. /hangul은 코딩 에이전트에게 한국어 조판 규칙 14가지와 문구 규칙 14가지를 알려 주는 스킬이에요. 보고서, 공지, 보도자료 같은 문서도 상황에 맞는 문체로 써요.

설치하기규칙 28가지 보기

3초마다 저절로 바뀌어요. 누르면 멈춰요.

스킬 없이

반가워요, 지우님! 오늘도 스마트한 금융 생활을 시작해보세요

고객님의 총 자산

24,680,000원

지난달보다 +1,250,000원

내 계좌송금하기

최근 보낸 사람

  • 엄마
  • 민준
  • 서연
  • 하늘

송금이 성공적으로 완료되었습니다!

소중한 마음까지 빠르게 전달되었어요

놓치면 후회하는 특별한 혜택! 지금 바로 확인하세요

모아 주요 지표

이미 많은 사람들이 모아와 함께하고 있어요.

320만 명+

함께하는 사용자

12조 원+

누적 송금액

4.9

앱 평점

2026년 9월 기준

송금하시겠습니까?

5만원이 즉시 이체되어집니다.

취소확인

오류가 발생했습니다. 잠시 후 다시 시도해주세요.

금일 이체 한도는 500만원입니다.

/hangul

반가워요, 지우님

내 총 자산

24,680,000원

지난달보다 +1,250,000원

내 계좌송금하기

최근 보낸 사람

  • 엄마
  • 민준
  • 서연
  • 하늘

엄마에게 5만 원을 보냈어요

방금 · 수수료 0원

이번 달 혜택 보기

모아 주요 지표

이미 많은 사람들이 모아와 함께하고 있어요.

320만 명+

함께하는 사용자

12조 원+

누적 송금액

4.9

앱 평점

2026년 9월 기준

엄마에게 5만 원을 보낼까요?

보내면 바로 엄마 계좌로 들어가요.

닫기보내기

인터넷 연결이 끊겼어요. 연결을 확인하고 다시 보내 주세요.

오늘 보낼 수 있는 금액은 500만 원이에요.

  • HG-1 한글 글꼴부터
  • HW-12 과장과 느낌표 빼기
  • HW-8 사용자가 한 일로
  • HG-7 제목 자간은 −0.03em까지
  • HW-5 버튼은 하는 일로
  • HW-4 오류는 원인과 다음 행동
  • HW-2 5만 원, 500만 원
  • HG-3 작은 글자도 11px 이상

조판

같은 문구, 다른 조판

두 화면의 문구는 똑같아요. 글꼴과 글자 크기, 자간, 행간, 줄바꿈만 바꿨어요.

3초마다 저절로 바뀌어요. 누르면 멈춰요.

스킬 없이

반가워요, 지우님

HG-1

내 총 자산

24,680,000원

지난달보다 +1,250,000원

내 계좌송금하기

최근 보낸 사람

  • 엄마
  • 민준
  • 서연
  • 하늘

엄마에게 5만 원을 보냈어요

방금 · 수수료 0원

HG-6 · HG-4

이번 달 혜택 보기

모아 주요 지표

이미 많은 사람들이 모아와 함께하고 있어요.

HG-7 · HG-10

320만 명+

함께하는 사용자

12조 원+

누적 송금액

4.9

앱 평점

2026년 9월 기준

HG-3

엄마에게 5만 원을 보낼까요?

보내면 바로 엄마 계좌로 들어가요.

닫기보내기

인터넷 연결이 끊겼어요. 연결을 확인하고 다시 보내 주세요.

오늘 보낼 수 있는 금액은 500만 원이에요.

/hangul

반가워요, 지우님

HG-1

내 총 자산

24,680,000원

지난달보다 +1,250,000원

내 계좌송금하기

최근 보낸 사람

  • 엄마
  • 민준
  • 서연
  • 하늘

엄마에게 5만 원을 보냈어요

방금 · 수수료 0원

HG-6 · HG-4

이번 달 혜택 보기

모아 주요 지표

이미 많은 사람들이 모아와 함께하고 있어요.

HG-7 · HG-10

320만 명+

함께하는 사용자

12조 원+

누적 송금액

4.9

앱 평점

2026년 9월 기준

HG-3

엄마에게 5만 원을 보낼까요?

보내면 바로 엄마 계좌로 들어가요.

닫기보내기

인터넷 연결이 끊겼어요. 연결을 확인하고 다시 보내 주세요.

오늘 보낼 수 있는 금액은 500만 원이에요.

  1. HG-1

    한글 글꼴부터

    글꼴 목록이 Arial로 시작하면 숫자는 Arial로, 한글은 기기 글꼴로 따로 그려져요.

  2. HG-7

    제목 자간

    −0.064em을 −0.02em으로. 측정한 한국 서비스에서 제목 자간이 −0.03em보다 좁은 곳은 한 곳뿐이었어요.

  3. HG-6 · HG-4

    본문 자간과 행간

    자간 −0.02em을 0으로, 행간 1.25를 1.5로

  4. HG-10

    단어째 줄바꿈

    음절 사이에서 줄을 바꾸면 한 단어가 두 줄로 갈라져요. /hangul은 단어째 다음 줄로 넘겨요.

  5. HG-3

    작은 글자

    안내 문구를 10px에서 13px로

문구

같은 화면, 다른 문구

두 화면의 조판은 똑같아요. 문구만 바꿨어요.

3초마다 저절로 바뀌어요. 누르면 멈춰요.

스킬 없이

반가워요, 지우님! 오늘도 스마트한 금융 생활을 시작해보세요

HW-12 · HW-13

고객님의 총 자산

HW-8

24,680,000원

지난달보다 +1,250,000원

내 계좌송금하기

최근 보낸 사람

  • 엄마
  • 민준
  • 서연
  • 하늘

송금이 성공적으로 완료되었습니다!

소중한 마음까지 빠르게 전달되었어요

HW-8 · HW-13

놓치면 후회하는 특별한 혜택! 지금 바로 확인하세요

HW-12 · HW-13

모아 주요 지표

이미 많은 사람들이 모아와 함께하고 있어요.

320만 명+

함께하는 사용자

12조 원+

누적 송금액

4.9

앱 평점

2026년 9월 기준

송금하시겠습니까?

HW-11

5만원이 즉시 이체되어집니다.

HW-2 · HW-8 · HW-11
취소확인
HW-5

오류가 발생했습니다. 잠시 후 다시 시도해주세요.

HW-4

금일 이체 한도는 500만원입니다.

HW-2 · HW-7 · HW-11
/hangul

반가워요, 지우님

HW-12 · HW-13

내 총 자산

HW-8

24,680,000원

지난달보다 +1,250,000원

내 계좌송금하기

최근 보낸 사람

  • 엄마
  • 민준
  • 서연
  • 하늘

엄마에게 5만 원을 보냈어요

방금 · 수수료 0원

HW-8 · HW-13

이번 달 혜택 보기

HW-12 · HW-13

모아 주요 지표

이미 많은 사람들이 모아와 함께하고 있어요.

320만 명+

함께하는 사용자

12조 원+

누적 송금액

4.9

앱 평점

2026년 9월 기준

엄마에게 5만 원을 보낼까요?

HW-11

보내면 바로 엄마 계좌로 들어가요.

HW-2 · HW-8 · HW-11
닫기보내기
HW-5

인터넷 연결이 끊겼어요. 연결을 확인하고 다시 보내 주세요.

HW-4

오늘 보낼 수 있는 금액은 500만 원이에요.

HW-2 · HW-7 · HW-11

  1. HW-8

    사용자가 한 일로

    ‘송금이 성공적으로 완료되었습니다!’ 대신 ‘엄마에게 5만 원을 보냈어요’

  2. HW-12 · HW-13

    과장과 느낌표 빼기

    놓칠까 봐 걱정시키지 않고, 받는 것을 말해요.

  3. HW-5

    버튼은 하는 일로

    ‘확인 · 취소’ 대신 ‘보내기 · 닫기’

  4. HW-4

    무슨 일인지와 다음 행동

    ‘오류가 발생했습니다’ 대신 끊긴 이유와 할 일을 말해요.

  5. HW-2 · HW-7

    띄어쓰기와 쉬운 말

    ‘500만원’은 ‘500만 원’으로, ‘금일’은 ‘오늘’로

  6. HW-11

    말투 하나로

    합쇼체와 해요체가 섞인 화면을 해요체 하나로

/hangul의 규칙 28가지

조판 규칙은 W3C 명세, KRDS·SEED·TDS 공개 문서, 한국 서비스 67곳을 잰 값에서, 문구 규칙은 「한글 맞춤법」과 국립국어원 자료, KRDS·앱인토스·SEED 공개 문서, 한국어 연구에서 가져왔어요. 프로젝트의 DESIGN.md에 타이포그래피 값이나 말투가 있으면 그것을 먼저 따라요.

조판 14가지

  1. HG-1글꼴 목록 맨 앞에 한글 글꼴
  2. HG-2<html lang="ko">로 문서 언어 밝히기
  3. HG-3본문은 16px, 11px 아래로는 쓰지 않기
  4. HG-4본문 행간은 1.5
  5. HG-5제목과 UI 행간은 1.3–1.45
  6. HG-6한글 본문 자간은 0
  7. HG-7제목 자간은 −0.03em까지만
  8. HG-8한글에 break-all 쓰지 않기
  9. HG-9긴 URL과 ID에는 overflow-wrap: anywhere
  10. HG-10keep-all은 컴포넌트마다 정하기
  11. HG-11한글에 기울임꼴 쓰지 않기
  12. HG-12글꼴에 있는 굵기만 쓰기
  13. HG-13숫자는 1,000원처럼, 한 화면에 한 방식으로
  14. HG-14말줄임은 CSS로, 말줄임표 안에서 줄 바꾸지 않기

문구 14가지

  1. HW-1맞춤법대로: 돼요, 됐어요, 할게요, 며칠
  2. HW-2띄어쓰기: 할 수 있어요, 할 때, 준비 중이에요
  3. HW-3문장 부호: 2026. 10. 24., 10:20, 버튼에는 마침표 없이
  4. HW-4오류 문구는 무슨 일인지와 지금 할 일을 함께
  5. HW-5버튼은 누르면 일어나는 일로: 송금하기, 닫기
  6. HW-6한 문장에는 한 가지만
  7. HW-7쉬운 말로: 금일 대신 오늘
  8. HW-8데이터가 아니라 사용자가 한 일로: 저장했어요
  9. HW-9같은 내용이면 할 수 있는 쪽으로
  10. HW-10사물은 높이지 않기: 커피가 나왔어요
  11. HW-11한 화면에는 한 가지 말투, 브랜드가 정한 대로
  12. HW-12겁주거나 죄책감을 주지 않기
  13. HW-13느낌표는 드물게, 오류 문구에는 쓰지 않기
  14. HW-14대체 텍스트에 ‘이미지·사진’ 쓰지 않기

설치하고, 평소처럼 요청하세요

npx oh-my-design-cli@latest

hangul 스킬만 받으려면 이렇게 설치해요.npx skills add kwakseongjae/oh-my-design --skill hangul

“이 화면 한글 줄바꿈이 이상해”, “오류 문구 다듬어 줘”, “한국어 랜딩 만들어 줘”처럼 말하면 돼요. 새 화면을 만들 때는 규칙을 적용하고, 이미 있는 코드는 점검해서 고칠 곳을 표로 알려 줘요. 이미 쓴 문구는 바꾸기 전에 먼저 물어봐요.

이 페이지의 moa 화면은 규칙을 보여 주려고 만든 예시예요.