Hallmark

무엇을 하나요

AI로 만든 웹 페이지는 왜 비슷하게 천박해 보일까요? Hallmark는 그 질문에서 출발한 스킬입니다. 에이전트에게 "학급 소개 페이지 만들어 줘"라고 했을 때, 디자인 템플릿 수준의 결과물이 나오도록 맞춰 주는 지침 모음입니다.

스킬이 만들어낸 실제 화면

아래는 모두 이 스킬의 공식 스크린샷입니다. 21가지 테마 중 세 가지를 골라 봤습니다. 어느 하나를 골라도 "AI가 만들었다는 티"가 나지 않도록, 여백·타이포·색 비례가 일관되게 잡혀 있습니다.

▲ 출처: Hallmark 공식 저장소 docs/screenshots (MIT 라이선스 — 출처 표기와 함께 재게시)

일반 AI 페이지와 뭐가 다른가

	지시만 잘해서 만든 페이지	Hallmark를 쓴 페이지
디자인 결정	에이전트가 매번 임의로 → 결과가 들쭉날쭉	테마 21종 중 선택 + 테마 규칙 준수 → 결과가 안정적
"AI 냄새"	보라 그라데이션·과한 아이콘·만능 문구	슬롭(slop) 판정 게이트를 통과해야 완성
반복 제작	할 때마다 톤이 달라짐	같은 테마면 학년도가 바뀌어도 톤 유지

학교에서의 활용 상상

• 학급 소개 페이지 — 개학 첫 주, 학생 사진과 한마디를 모아 한 페이지로. 테마만 바꾸면 매년 새롭게.
• 수행평가 과제 전시 — 학생 작품을 전시 페이지로 묶어 학부 설명회에 활용.
• 동아리·행사 안내 — 축제 포스터를 넘어, 클릭해 보는 안내 페이지로.

솔직한 한계. 테마와 예시가 영어권 감각으로 되어 있어, 한국어 학교 페이지로 쓰려면 한글 타이포·문구를 교사가 다듬어야 합니다. 스킬 사용 자체는 Claude Code·Codex 같은 AI 에이전트가 필요합니다 — 학생이 혼자 쓰는 도구가 아니라 교사의 제작 도구로 권합니다(교사 개인용 권장).

원본 스킬 저장소 ↗ 공식 소개 사이트 ↗

예시 체험

고1 정보 — 학교 독서 동아리 소개 웹페이지 만들기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기

선생님이 입력한 내용

고등학교 1학년 정보 교과 '웹 페이지 제작' 단원. 교사가 학생들에게 보여 줄 예시로, 학교 독서 동아리를 소개하는 한 페이지짜리 웹사이트가 필요한 상황이다.

고등학교 1학년 정보 수업에서 '웹 페이지 제작' 단원을 가르쳐요. 학생들에게 예시로 보여 줄 페이지가 하나 필요한데, 우리 학교 독서 동아리 '초록 서랍'을 소개하는 한 페이지짜리 웹사이트를 만들어 주세요. 보는 사람은 우리 학교 학생(특히 새로 온 1학년)이고, 다 읽고 나서 동아리에 들어오고 싶게 만드는 게 목적이에요. 분위기는 차분한 편집물 같은 느낌(editorial)으로 해 주세요. 내용은 모두 한국어로 쓰고, 실제로 확인되지 않은 숫자는 넣지 말아 주세요.

나온 결과

목요일 네 시, 도서실 가장 안쪽 창가 자리. 종이 냄새와 지우개 가루, 저마다 펼쳐 놓은 책 한 권. 초록 서랍은 그 자리에서 시작되었습니다. 시간 — 매주 목요일 오후 네 시, 오십 분 처음 오는 사람 — 다 읽지 않아도 됩니다. 듣기만 해도 됩니다.

직접 해 보기 — 3단계

1. Claude Code·Cursor 같은 AI 에이전트에 저장소 안내대로 이 스킬(홀마크)을 설치한다.
2. 학년·과목, 무엇을 보여 줄지, 보는 사람, 원하는 분위기를 적은 문장을 붙여 넣는다. 위 문장 그대로 넣어도 된다.
3. 나온 HTML 파일을 브라우저로 열어 한국어와 색·여백이 제대로 보이는지 확인하고, 확인되지 않은 숫자가 들어갔는지도 살핀 뒤 고친다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (hallmark) · 확인일 2026-10-16. 이 스킬은 따로 설치해 실행하는 프로그램이 아니라, AI 에이전트가 저장소가 정한 순서와 규칙을 따라 HTML·CSS를 쓰게 하는 대화형 스킬이다. 그래서 이 예시도 스킬의 절차(구조 고르기 → 테마 고르기 → 규칙에 맞춰 코드 쓰기 → 슬롭 검사)를 그대로 밟아 나온 HTML 한 장을, 헤드리스 브라우저로 위쪽 1600px까지 찍은 것이다. 스킬이 고른 구조는 'Long Document', 테마는 'Newsprint'이며 화면의 배치는 손대지 않았다. 스킬 테마의 기본 서체(Playfair Display·Crimson Pro)에는 한글이 없어, 같은 역할을 하는 한글 서체(Nanum Myeongjo·Gowun Batang·IBM Plex Sans KR)로 바꿔 넣었다. '초록 서랍'이라는 동아리 이름과 모임 시간, 책 목록은 모두 꾸민 수업 예시 값이며 실제 동아리 정보가 아니다. 스킬 규칙이 정한 대로 확인되지 않은 성과 수치(회원 수, 향상도 따위)는 넣지 않았다. 실제 안내 페이지로 쓰려면 학교·동아리 정보와 링크를 확인해 고쳐야 한다.

써 보려면

1. 저장소 Nutlope/hallmark를 엽니다.
2. 설치가 필요합니다. 절차는 저장소 안내를 따릅니다.
3. 이 기록에는 API 키가 필요하지 않다고 되어 있습니다.

출처

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 소개 글과 화면 예시는 발굴·재구성 과정에서 작성했습니다. 정보 정정 요청

라이선스