외국 UI 카드, 블로그에 그대로 못 붙인다 — 21st.dev 배치만 참고해 한국어 프롬프트 카드 3개 만들기
좋은 프롬프트를 모아 블로그에 올려도 독자가 실제로 쓰기까지는 몇 단계가 더 걸립니다. 어디까지가 프롬프트인지 헷갈리고, 휴대폰에서는 긴 글이 칸 밖으로 넘치고, 복사 버튼을 눌렀더니 제목까지 같이 딸려 오기도 합니다. 해외 UI 사이트에는 이런 문제를 깔끔하게 정리한 카드 디자인이 많지만, 대부분 React(리액트)로 만든 것이라 블로그 본문에 그대로 붙일 수 없습니다.
이번에는 해외 UI 자료실 21st.dev에서 카드 예제 하나를 골라 정보 배치만 참고하고, 우리 블로그에 맞는 한국어 프롬프트 카드 3개(회의 메모 정리 / 수업 활동 아이디어 / 공지문 다듬기)를 HTML·CSS로 직접 만드는 과정을 알려드리겠습니다. 완성한 카드는 이 글 중간에 그대로 넣어 두었습니다. 화면을 만드는 데 쓴 프롬프트 3개도 함께 드립니다.
UI(유아이) — 사용자가 보고 누르는 화면 요소. 버튼, 카드, 메뉴 같은 것입니다.
React(리액트)·컴포넌트 — 웹 화면을 부품(컴포넌트) 단위로 만드는 도구입니다. 별도 프로젝트 안에서 코드를 변환(빌드)해야 화면이 됩니다.
클립보드 — 복사한 내용이 잠시 머무는 곳. 브라우저는 보안 때문에 웹페이지가 클립보드에 쓰는 것을 막기도 합니다.
360px 폭 — 작은 스마트폰 화면 너비. 이 폭에서 글자가 넘치지 않으면 대부분의 휴대폰에서 읽을 수 있습니다.
| 대상 | 프롬프트 자료를 블로그·카페·학교 홈페이지에 정리해 두고 싶은 교사·강사·실무자 |
| 만드는 것 | 제목·사용 상황·프롬프트·복사 버튼이 있는 카드 3개 (독립 데모 파일 + 블로그 본문용 조각) |
| 준비물 | 카드에 넣을 한국어 프롬프트, AI 채팅 도구(클로드·ChatGPT·제미나이 중 하나), 크롬 같은 브라우저 |
| 비용 | 이 글의 실습은 21st.dev 회원 가입 없이 카드 페이지를 보고 배치만 참고합니다. 코드를 복사해 쓰려면 이용 조건을 따로 확인하세요 |
| 걸리는 시간 | 카드 내용 준비 30분, 화면 만들기·점검 30분 안팎 |
1. 우리가 만들 자료실 모습
먼저 완성 모습을 정해 두면 참고 사이트에서 무엇을 봐야 할지가 분명해집니다. 우리 카드에 꼭 필요한 것은 여섯 가지입니다. 그중 가장 중요한 원칙은 복사되는 범위를 눈에 보이게 구분하는 것입니다. 독자가 버튼을 눌렀을 때 AI 채팅창에 붙여 넣을 프롬프트 본문만 복사되어야 합니다.
2. 참고 카드 고르기 — 무엇을 보고, 무엇은 가져오지 않나
21st.dev는 React 컴포넌트·템플릿·테마를 모아 둔 사이트입니다. 첫 화면에는 "12,000+ crafted React components, templates, and shadcn themes"라고 소개되어 있고, 구성 요소를 'Copy prompt'로 복사해 클로드 코드·커서 같은 AI 도구에 붙여 넣으면 내 프로젝트에 만들어 주는 흐름을 안내합니다. 카드 분류 페이지에서 공개 예제 Course Design Cards(작성자 kristen17)를 골라 열어 보았습니다.
| 확인한 것 | 확인 결과 (2026-10-11) |
|---|---|
| 예제 주소 | 21st.dev/@kristen17/components/course-design-cards — 원 출처로 CodePen 주소가 함께 표시됨 |
| 기술 형태 | React(TSX) 코드. 사용 예시가 'import React'로 시작하고, 프로젝트 안의 컴포넌트 파일을 불러오는 구조 |
| 복사 방법 | 'Copy prompt' 버튼, 코드 'Copy' 버튼, 'CLI' 버튼이 있음 (설치 명령 문구 자체는 확인하지 못함) |
| 카드에 담긴 정보 | 예시 데이터 항목: 날짜 · 제목 · 설명 · 진행률 · 사람 사진 2장 · 남은 기간 |
| 이용 조건 | 컴포넌트 페이지에는 라이선스 표시가 없었음. 사이트 약관(2026-07-20 개정)은 다른 곳에 옮겨 쓸 때 원 컴포넌트 페이지로 가는 링크를 요구하고, 무단 재배포를 금지함 |
| 요금 | 첫 화면과 요금 페이지의 무료 복사 횟수 안내가 서로 달라 보여 단정하지 않음. 쓰기 전에 요금 페이지를 직접 확인하세요 |
예시 데이터의 순서에서 배울 점은 정보의 위계입니다. 작은 메타 정보(날짜) → 굵은 제목 → 짧은 설명 → 상태와 행동 순으로 내려갑니다. 우리 카드에서는 이것을 상황 태그 → 제목 → 사용 상황 → 프롬프트 본문 → 복사 버튼으로 바꿔 씁니다. 반대로 원 예제의 코드, 문구, 색 조합, 사진은 가져오지 않았습니다. 이 글의 카드는 배치 원리만 참고해 처음부터 새로 만든 것입니다.
3. React 예제를 블로그에 그대로 붙이면 안 되는 이유
React 컴포넌트는 독립된 부품이 아니라 프로젝트 안에서 변환(빌드)되어야 화면이 되는 코드입니다. import 문, Tailwind 같은 스타일 도구, 여러 파일이 함께 있어야 돌아갑니다. 반면 Blogger 같은 블로그 본문은 이미 만들어진 HTML과 CSS를 그대로 보여 주는 곳이고, 스크립트는 편집 과정에서 막히거나 바뀌는 경우가 많습니다. 그래서 React 코드를 본문에 붙여 넣으면 화면 대신 코드 글자가 보이거나 아무것도 나오지 않습니다. 길은 하나입니다. 배치 원리만 가져오고, 블로그가 이해하는 HTML·CSS로 새로 만드는 것입니다.
4. 한국어 콘텐츠 먼저 준비하기
화면보다 내용이 먼저입니다. 카드 하나마다 "언제 쓰는지 / 무엇을 넣는지 / 무엇을 받는지"가 한 줄로 정리되어야 디자인도 단순해집니다. 이번에 새로 쓴 카드 3개의 내용은 아래와 같습니다.
| 카드 | 이럴 때 씁니다 | 독자가 넣을 것 | 받는 결과 |
|---|---|---|---|
| 회의 메모 정리 | 급히 받아 적은 메모를 회의록으로 | 회의 메모 원문 (이름은 가명 권장) | 개요 · 결정 사항 · 할 일 표(담당자·기한) · 확인 질문 |
| 수업 활동 아이디어 | 단원은 정해졌는데 활동이 안 떠오를 때 | 학년·과목, 성취기준, 시간·준비물·모둠 인원 | 활동 3개의 진행 순서·결과물·평가 관점·대처법 |
| 공지문 다듬기 | 딱딱한 공지 초안을 30초 안에 읽히게 | 공지 초안, 받는 사람 | 제목 · 핵심 3줄 · 다듬은 본문 · 바꾼 이유 표 |
세 프롬프트 모두 역할 → 입력칸 → 출력 형식 → 지킬 것 → 완료 조건 순서입니다. 바꿔 넣을 부분은 [대괄호]로 표시했고, '메모에 없는 내용은 만들지 말 것', '날짜·금액은 초안 그대로' 같은 사실 보호 규칙을 넣었습니다. 각 카드의 입력 예시는 이 글을 위해 만든 가상 자료입니다.
5. 완성한 카드 3개 — 카드 속 프롬프트
아래가 이번에 만든 카드입니다. 회색 칸이 복사되는 프롬프트 본문이고, 각 카드의 '가상 입력 예시 보기'를 펼치면 어떤 자료를 넣으면 되는지 볼 수 있습니다. 프롬프트를 복사해 AI 채팅창에 붙여 넣은 뒤, 괄호 부분에 자신의 자료를 넣어 쓰면 됩니다.
직장·학교 공통회의 메모 정리 회의 중에 급히 받아 적은 메모를 참석자에게 보낼 회의록으로 바꿀 때
프롬프트 본문 (복사되는 부분)
너는 회의록을 정리하는 행정 담당자야. 아래 [회의 메모]를 참석자에게 보낼 회의록으로 정리해 줘. [회의 메모] (여기에 메모를 붙여 넣기) 출력 형식 1. 회의 개요: 날짜 · 참석자 · 안건 2. 결정된 사항: 번호 목록 3. 할 일 표: 담당자 | 할 일 | 기한 4. 다음 회의 전에 확인할 질문 지킬 것 - 메모에 없는 내용은 만들지 말고 '확인 필요'로 표시 - 한 항목은 두 줄 이내 - 완료 조건: 모든 할 일에 담당자와 기한이 있거나 '미정'으로 표시됨
넣을 것: 회의 메모 원문(이름은 가명 권장)
가상 입력 예시 보기
10/14 학년 협의 / 김·박·이 선생님 - 체험학습 장소 후보: 과학관, 수목원 → 과학관으로 잠정 - 버스 견적: 박 선생님, 금요일까지 - 학부모 안내문 초안: 이 선생님 - 비 올 때 대안: 아직 못 정함
교사·강사수업 활동 아이디어 단원과 수업 시간만 정해져 있고, 학생이 직접 해 볼 활동이 떠오르지 않을 때
프롬프트 본문 (복사되는 부분)
너는 [학년] [과목] 수업을 돕는 수업 설계 도우미야. [단원 또는 성취기준]에 맞는 학생 활동 아이디어 3개를 제안해 줘. 조건 - 수업 시간: [45분] - 준비물: [교실에 있는 것만] - 모둠: [4명] 아이디어마다 아래 순서로 1. 활동 이름 2. 진행 순서(도입·전개·정리, 분 단위) 3. 학생이 만드는 결과물 4. 평가할 때 볼 점 1가지 5. 예상되는 어려움과 대처 지킬 것 - 확인할 수 없는 통계·연구 결과를 인용하지 말 것 - 안전 주의가 필요한 활동은 [주의]로 표시 - 완료 조건: 세 활동 모두 시간 합계가 수업 시간 안에 들어감
넣을 것: 학년·과목, 단원 또는 성취기준, 시간·준비물·모둠 인원
가상 입력 예시 보기
학년·과목: 중학교 1학년 기술 성취기준: 생활 속 불편을 찾아 해결 아이디어를 스케치로 표현한다 수업 시간: 45분 준비물: A4 용지, 색연필, 포스트잇 모둠: 4명
기관·학교 행정공지문 다듬기 길고 딱딱한 공지 초안을 읽는 사람이 30초 안에 핵심을 알도록 고칠 때
프롬프트 본문 (복사되는 부분)
너는 [받는 사람]에게 보내는 공지문을 다듬는 편집자야. 아래 [공지 초안]을 읽는 사람이 30초 안에 핵심을 알 수 있게 다듬어 줘. [공지 초안] (여기에 초안을 붙여 넣기) 출력 형식 1. 제목 한 줄 2. 핵심 3줄: 무엇을 / 언제 / 받는 사람이 할 일 3. 다듬은 본문 4. 바꾼 부분과 이유 표: 원래 문장 | 바꾼 문장 | 이유 지킬 것 - 날짜·시간·금액·장소는 초안 그대로 두고, 서로 어긋나면 '확인 필요'로 표시 - 존댓말, 한 문장은 50자 안팎 - 완료 조건: 초안의 날짜와 숫자가 다듬은 본문에 빠짐없이 들어 있음
넣을 것: 공지 초안, 받는 사람(학부모·주민·직원 등)
가상 입력 예시 보기
받는 사람: 1학년 학부모 초안: 안녕하십니까. 본교에서는 다음 주 수요일(10월 22일) 1학년 현장체험학습을 실시할 예정이오니 참고하시기 바랍니다. 참가비 12,000원은 10월 17일(금)까지 스쿨뱅킹으로 납부하여 주시기 바라며, 점심 도시락은 각 가정에서 준비하여 주시기 바랍니다. 우천 시에도 실내 일정으로 진행됩니다.
버튼으로 복사되지 않으면 회색 프롬프트 칸을 한 번 누르세요. 본문 전체가 선택되면 Ctrl+C(휴대폰은 길게 눌러 복사)로 복사할 수 있습니다.
이 카드들은 AI오토마타 응용 프롬프트입니다. 21st.dev의 카드 예제는 화면 배치를 참고했을 뿐, 프롬프트 내용과는 관계가 없습니다.
6. 화면 제작 프롬프트 3개 — 첫 제작 / 결과 점검 / 문제 수정
위 카드는 아래 세 프롬프트 순서로 만들었습니다. 위의 카드 속 프롬프트가 업무에 쓰는 것이라면, 여기 세 개는 카드 화면을 만드는 것입니다. AI는 링크 속 사이트를 직접 보지 못할 수 있으니, 참고 카드는 주소 대신 내가 관찰한 배치 특징을 글로 적어 넣습니다. 세 프롬프트 모두 같은 결과물(카드 3개짜리 데모 파일)을 다룹니다.
언제 쓰나요? 카드에 넣을 한국어 텍스트가 다 준비되었고, 처음으로 화면을 만들 때 씁니다.
A. 첫 제작 — 외부 프레임워크 없는 독립 데모 만들기
입력 예시 — 대상 독자: "스마트폰으로 블로그를 보는 교사·실무자" / 카드 텍스트: 위 5장의 카드 3개 내용 전체 / 배치 특징: "작은 태그 → 굵은 제목 → 회색 설명 → 프롬프트 칸 → 아래쪽 파란 버튼" / 기관 색: #1a73e8
확인할 결과 — 파일 하나가 나오고, 브라우저로 열었을 때 카드 3개가 보이며, 버튼을 누르면 '복사했습니다' 같은 알림이 나오는지 봅니다. 메모장에 붙여 넣어 제목이 섞이지 않았는지도 확인하세요.
언제 쓰나요? 첫 데모가 나온 직후, 블로그에 올리기 전에 문제를 찾을 때 씁니다. 이 단계에서는 고치지 않고 점검만 시킵니다.
B. 결과 점검 — 360px 폭·줄바꿈·초점·복사 범위
입력 예시 — A 프롬프트로 받은 demo.html 코드 전체를 붙여 넣습니다.
확인할 결과 — 다섯 줄짜리 표가 나와야 합니다. AI는 화면을 직접 보지 못하는 경우가 많으므로, '직접 확인 필요'로 나온 항목은 휴대폰이나 브라우저 개발자 도구의 모바일 보기로 직접 확인합니다.
언제 쓰나요? 점검 표에서 '문제'가 나왔을 때, 그리고 블로그 본문에 넣을 조각을 만들 때 씁니다.
C. 문제 수정 — 문제 항목만 고치고 블로그용 조각 만들기
입력 예시 — 데모 코드 + "2번 문제: 긴 대괄호 입력칸이 360px에서 칸 밖으로 나감" 같은 점검 표 + 복사 함수: copyToClipboard(id)
확인할 결과 — 독립 데모 파일과 블로그용 조각이 따로 나오는지, 조각에 <script>가 없는지, 카드 텍스트가 그대로인지 확인합니다.
7. 복사와 모바일 화면 확인 — 실제 결과
완성한 독립 데모(demo.html)를 크로미움 브라우저로 데스크톱 폭(1280px)과 360px 폭에서 열어 확인했습니다. 아래는 그 실제 결과입니다.
| 확인 항목 | 결과 |
|---|---|
| 복사 범위 | 카드 3개 모두, 복사된 글자가 프롬프트 본문과 정확히 같았습니다. 제목·사용 상황·입력 예시는 포함되지 않았습니다 |
| 360px 폭 | 가로 스크롤 없음, 칸 밖으로 넘친 요소 없음. 카드가 한 줄에 하나씩 쌓입니다 |
| 키보드 | Tab 순서: 프롬프트 칸 → 입력 예시 → 복사 버튼. 버튼에서 ←/→ 키로 옆 카드 버튼으로 이동, Enter로 복사 |
| 복사가 막힐 때 | 자동 복사를 일부러 막은 상태에서 버튼을 누르면 본문 전체가 선택되고 "Ctrl+C를 누르세요" 안내가 나왔습니다 |
블로그 본문에 넣은 카드(5장)는 같은 디자인이지만 스크립트를 뺀 조각이라, 복사 버튼이 블로그에 이미 있는 복사 기능을 부르도록 바꿨습니다. 버튼이 동작하지 않는 환경을 대비해 회색 프롬프트 칸을 한 번 누르면 본문 전체가 선택되도록 해 두었습니다. 브라우저·앱에 따라 동작이 다를 수 있으니, 직접 써 보고 안 되면 알려 주세요.
8. 자주 생기는 문제 3가지와 고치는 법
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| 복사했더니 제목까지 붙어 나온다 | 버튼이 카드 전체(제목 포함)를 복사 대상으로 잡음 | 프롬프트 본문 칸에만 id를 붙이고, 버튼이 그 id만 가리키게 합니다. C 프롬프트에 "복사 범위는 본문 id만"이라고 적으세요 |
| 휴대폰에서 글이 카드 밖으로 삐져나온다 | 줄바꿈 없는 긴 영어·주소·[입력칸]이 폭을 밀어냄 | 본문 칸에 줄바꿈 허용(white-space:pre-wrap)과 긴 단어 끊기(overflow-wrap:anywhere)를 넣습니다 |
| 붙여 넣었더니 블로그의 다른 글자 모양까지 바뀌었다 | CSS가 pre, button 같은 전체 선택자로 작성됨 | 모든 선택자 앞에 .aa-cardlib를 붙이고, 같은 페이지에 카드가 여러 묶음이면 id에 글 번호를 붙입니다 |
- 21st.dev의 컴포넌트 코드를 직접 복사해 쓰려면 해당 항목의 라이선스와 사이트 약관, 요금 페이지를 먼저 확인하세요. 약관은 다른 곳에 옮겨 쓸 때 원 컴포넌트 페이지 링크를 요구합니다.
- React 코드를 블로그 본문에 그대로 붙여 넣지 마세요. 빌드가 필요한 코드라 화면이 나오지 않습니다.
- 다른 사람의 로고·문구·사진·색 조합을 그대로 가져오지 말고, 배치 원리만 참고해 새로 만드세요.
- 회의 메모·공지 초안에 실명·연락처가 있다면 가명으로 바꾼 뒤 AI에 넣으세요.
함께 보면 좋은 글
출처 (확인일 2026-10-11)
- 21st.dev 첫 화면 — 사이트 소개, React·shadcn 형식, Copy prompt 흐름
- Course Design Cards (kristen17) — 참고한 카드 예제의 주소·기술 형태·예시 데이터 항목
- 21st.dev 이용약관 — 콘텐츠 소유, 재배포, 원 페이지 링크 요구
- 21st.dev 요금 — 유료 플랜 구성 (가격·무료 범위는 변동 가능하므로 직접 확인)
댓글
댓글 쓰기