모션그래픽 폰트 조합, 최적의 짝은? 폰트 페어링 스킬로 쇼츠에 65쌍 입혀 본 기록
모션그래픽에 들어가는 폰트 조합, 어떤 짝이 좋을까요? 폰트 페어링 스킬의 규칙으로 무료 폰트 짝 65개를 만들어 쇼츠 두 편에 입혀 보고, 자막에서 잘 읽히는 조합과 무너지는 폰트, 추천 조합 8가지를 실제 화면으로 정리했습니다.
Claude에게 화면 디자인이나 모션그래픽을 맡겨 보면 구성은 그럴듯한데 어딘가 "AI가 만들었네" 싶은 결과가 자주 나옵니다. 색이나 레이아웃 탓으로 돌리기 쉬운데 제 경험으로는 폰트가 차지하는 몫이 꽤 큰 것 같습니다. 폰트를 따로 정해 주지 않으면 비슷한 기본 고딕 하나로 제목부터 자막까지 다 채우기 때문입니다.
저는 쇼츠·릴스 모션그래픽을 Claude Code로 만들고 있습니다(쇼츠·릴스 로컬 자동화 제작기 참고). 제 채널 폰트는 이미 정해 두고 잘 쓰고 있었지만 수강생들에게는 여러 템플릿을 보여 줘야 했습니다. 같은 영상도 폰트만 바꾸면 분위기가 꽤 달라진다고 느끼던 참이었습니다. 그러다 스레드에서 Claude 스킬 하나를 소개한 글을 읽었습니다. 폰트 짝을 골라 주는 스킬이라기에 그 GitHub 레포를 직접 테스트해 봤습니다.
이번 글에서는 "모션그래픽에 들어가는 폰트의 최적의 조합은?"이라는 질문을 들고 무료 폰트 짝 65개를 실제 쇼츠 두 편에 입혀 보면서 어떤 폰트가 자막에서 잘 읽히고 어떤 폰트가 무너지는지 정리해 보겠습니다. 마지막에는 수강생 템플릿으로 고른 조합 8가지도 붙였습니다.
(작성일 2026-10-21 기준입니다. 폰트 라이선스는 바뀔 수 있어서 상업 작업 전에는 원문을 한 번 더 확인하시는 걸 권장합니다.)
사용 도구 및 준비물
폰트 페어링 스킬 한눈에 보기
테스트한 레포는 시퀀스스튜디오(Instagram @sequence_ai)가 공개한 font-pairing-skill입니다. 분위기만 말하면 한글·영어 폰트 짝을 골라 주는 Claude 스킬입니다. 고르는 폰트는 상업적으로 써도 되는 무료 폰트뿐이고 스킬 문서와 스크립트는 MIT 라이선스입니다. 작성일 기준 별 13개인 아주 작은 레포입니다.
폰트 페어링(font pairing)은 한 화면에 쓸 폰트 두세 개를 역할별로 골라 짝을 짓는 일입니다. 소개팅 주선과 비슷합니다. 둘 다 튀는 사람끼리 붙이면 부딪히니 성격이 다른 둘을 붙여야 서로가 살아납니다. 레포에는 한글 30개(눈누)와 영어 24개(구글 폰트) 폰트, 추천 짝 18개, 짝 고르는 규칙 12개가 들어 있습니다. 쓰는 법은 한국어로 말하면 됩니다. README에는 이런 예시 문장이 실려 있습니다.
차분한 전시 포스터에 어울리는 폰트 짝 골라줘 이 카드뉴스 폰트 페어링해줘 한글+한글로 귀여운 조합 3개만
저는 대화형 사용법보다 규칙 쪽이 더 궁금했습니다. 포스터 한 장 말고 움직이는 영상에도 그대로 통할지 보고 싶었습니다. 아래는 규칙 12개 중 이번 실험에서 자주 떠올린 것들입니다.
- 성격이 반대인 폰트끼리 짝 짓기 (굵은 고딕과 가는 명조, 고딕과 손글씨)
- 숫자와 영어는 영문 폰트에 맡기기
- 본문은 담백하게 두고 개성은 제목에서만
- 필기체·손글씨는 한두 낱말만
- 폰트 파일을 나눠 줄 때는 재배포 조건 확인하기
해 보니 규칙이 늘 맞지는 않았습니다. 고딕끼리도 굵기와 폭이 다르면 짝이 잘 보였습니다. 명조 본문도 짧은 안내 문구에서는 꽤 버텼습니다. 규칙은 출발점 정도로만 삼으면 될 것 같습니다.
폰트 역할 세 가지와 무료 폰트 모으기
쇼츠 한 편에 들어가는 글자는 맡은 일에 따라 화면 아래 종이 띠 자막이나 목록 같은 자막·본문, 크게 뜨는 강조 자막과 카드 제목, 그리고 강조 자막 안에 섞이는 영어와 숫자로 나뉩니다. "9개의 Claude Code"라는 자막이라면 "9개의"는 강조 폰트가, "Claude Code"는 영문 폰트가 맡습니다.
제 채널은 강조에 학교안심 알림장, 자막·본문에 SUIT와 프리텐다드, 영문에 Instrument Serif를 씁니다. 이 기본 조합으로 만든 실제 화면이 아래 카드입니다.
실험은 Claude Code에게 맡겼습니다. 처음 보낸 요청은 이랬습니다.
https://github.com/Sequence-st/font-pairing-skill -> 이거보고 어울리는 폰트쌍들을 좀 발굴해주세요. 폰트 다운받고요. 우리가 쓰던건 잘 쓰고 있어서 괜찮은데요. 수강생들에게 여러 템플릿으로 보여줘야해서 폰트만 다른거 써도 좀 확 산다고 저는 느끼고 있습니다. 그래서 여러가지 템플릿을 만들기 위해 우선 이 폰트 페어링 여러종류(종류가 많을 수록 좋음)을 발굴해주세요. 그리고 기존에 만들었던 영상들에서 폰트만 바꿔서 여러개 렌더링해놔도 좋을 거 같아요!
Claude Code가 짝 이름만 바꿔 넣으면 같은 영상이 다른 폰트로 다시 나오게 해 줬습니다. 덕분에 영상은 그대로 두고 폰트만 비교할 수 있었습니다.
폰트는 레포의 54개에서 시작해 구글 폰트와 눈누에서 더 받아 111개(한글 78, 라틴 33)를 모았습니다. 거르는 기준으로는 눈누 라이선스 표만 썼습니다. 영상과 임베딩이 모두 「사용 가능」인 폰트만 넣다 보니 쿠키런, 잘난체, 레페리포인트, 을유1945, 마포꽃섬, KoPub은 빠졌습니다. 남은 폰트 중에도 에스코어드림, 어그로체, 서울알림체, 교보손글씨 2019, 태백체 등 20개는 영상에 쓰는 건 괜찮지만 폰트 파일을 남에게 나눠 주면 안 됩니다. 수강생 자료를 만들 때는 이 차이가 중요했습니다.
받은 폰트는 같은 문장으로 한 줄씩 찍어 보며 눈으로 확인했습니다.
맨 위 몇 줄처럼 띄어쓰기 자리에 ☒ 상자가 찍히는 폰트가 있습니다. 폰트 안에 띄어쓰기 글자가 아예 없어서 생기는 일입니다. 리디바탕, 교보손글씨 2019, G마켓 산스, 잉크립퀴드체가 그랬습니다. 웹 브라우저는 다른 폰트로 알아서 채워 주지만 프로그램에 따라서는 아래 왼쪽처럼 상자가 그대로 남기 때문에, 이 폰트들을 디자인 툴에서 쓰신다면 띄어쓰기가 제대로 나오는지 봐 두시는 게 좋겠습니다.
같은 장면에 폰트만 바꿔 보기
실험에는 영상 두 편을 썼습니다. 하나는 38초짜리로, 셀카 영상으로 쇼츠를 만드는 오픈소스를 소개했습니다(셀카 영상 하나로 쇼츠 만들기 참고). 다른 하나는 51초짜리이고 교안 만들 때 쓰는 오픈소스 세 개를 다뤘습니다(교안 만들 때 쓰는 오픈소스 3가지 참고). 짝마다 장면 9개를 정지 화면으로 뽑아 나란히 놓고 비교했습니다.
"편집에 몇 시간씩"이 뜨는 장면 하나에 폰트 조합을 차례로 바꿔 입혀 봤습니다.
명조를 쓰면 다큐처럼 차분해지고 두꺼운 고딕을 쓰면 썸네일처럼 시끄러워집니다. 손글씨라면 공부 노트처럼 가벼운 느낌입니다. 카드와 셀카, 배경이 그대로여도 분위기는 이렇게 달라집니다. 다만 이 장면은 카드와 셀카가 겹친 바쁜 화면이라 차이는 대부분 아래 강조 자막 한 줄에서 납니다.
처음 만든 65쌍을 한 장에 모은 시트입니다. 칸이 작아서 분위기를 훑어보는 데까지만 도움이 됩니다.
같은 영상의 9장면도 조합 네 개로 한 줄씩 늘어놓았습니다. 맨 위가 기본 조합이고 그 아래로 주아와 마루 부리, 나눔손글씨 펜과 프리텐다드, 배민 을지로체와 SUIT 순서입니다.
차이가 가장 큰 곳은 아래쪽 강조 자막과 "9개의 Claude Code"처럼 영어가 섞인 줄입니다. 나눔손글씨 펜을 넣으면 강조 자막이 메모처럼 보입니다. 같은 문장이 배민 을지로체에서는 간판 같아집니다. 셀카 위 작은 자막은 대부분 담백한 고딕으로 두어서 조합이 달라도 거의 비슷합니다.
같은 후킹 문장도 폰트에 따라 인상이 갈립니다. 왼쪽에는 검은고딕과 우아한 세리프를, 오른쪽에는 에이투지체와 프리텐다드를 입혔습니다.
목록 자막에 개성 강한 폰트를 넣어 보기도 했습니다.
목록까지 갈무리 픽셀체를 쓴 조합은 콘셉트는 분명하지만 1~2초 안에 훑어 읽기에는 버겁습니다. 게임이나 레트로처럼 분위기가 읽는 속도보다 중요할 때만 쓸 만해 보였습니다.
시트만으로는 글자가 작아서 같은 자막을 원본 영상 프레임에서 크게 잘라 다시 비교했습니다. 기본 조합, 에이투지체와 프리텐다드, 함렡과 아스타 산스, 나눔손글씨 펜과 프리텐다드를 위에서부터 차례로 놓았습니다.
크게 놓고 보면 기본 조합과 에이투지체는 굵기와 밀도가 비슷하게 이어집니다. 함렡은 각진 부리가 또렷합니다. 나눔손글씨 펜은 획이 가늘고 글자가 작아 존재감이 줄어들고 어두운 바탕 위의 빨간 강조 글자는 특히 약해 보입니다. 카드 맨 위의 큰 제목만 보고 고르면 실제 영상과 인상이 꽤 다를 수 있습니다.
폰 화면 폭으로 줄이면 어떤지도 궁금해서 같은 프레임을 가로 390px로 축소해 봤습니다. 실제 폰은 화면이 더 선명해서 이보다는 잘 보입니다. 기기에서 직접 재생해 본 건 아닙니다.
이 크기에서도 아래 자막은 네 조합 모두 읽힙니다. 다만 함렡으로 바뀐 위쪽 작은 라벨과 나눔손글씨 펜의 "9개의"는 작고 가늘어집니다.
강조 폰트는 작은 카드 제목까지 같이 바뀝니다. 그래서 큰 제목에서 좋아 보이는 폰트가 작은 라벨에서도 괜찮은지는 따로 봐야 했습니다.
본명조는 작은 라벨에서 획이 가늘어지는 반면 검은고딕과 카페24 아네모네는 라벨까지 굵고 빽빽해집니다. 에이투지체는 기본 조합보다 조금 굵지만 정돈된 편입니다. 큰 제목용 폰트를 고를 때는 작은 글자도 같이 봐야 할 것 같습니다.
자막에서 무너진 폰트들
65쌍이 실제로 읽히는지는 판정만 맡은 별도의 Claude가 따로 가렸습니다. 어떤 폰트인지 알려 주지 않고 비교 시트를 보여 주는 방식이었습니다. 사람이 실제 폰으로 본 테스트는 아닙니다. 여기서 8쌍이 떨어졌습니다.
떨어진 폰트들이 어디서 무너졌는지 하나씩 적었습니다.
- 모이라이 원은 윤곽선만 있는 장식체라 작은 자막에서 글자가 사라집니다.
- 그랜디플로라 원은 획이 머리카락처럼 가늘어 어두운 배경에 묻힙니다.
- 동해독도는 휘갈긴 붓글씨라 작게 들어가면 알아보기 어렵습니다.
- 꾸불림체는 "줄이고"의 "이"가 "허"처럼 보였습니다.
- HS여름물빛체는 글자마다 높이가 튀고, 같이 붙인 Yellowtail의 "90%"가 "901."처럼 읽혔습니다.
- 개구는 글자 사이가 넓어서 낱말로 잘 묶이지 않습니다.
- 가석은 획이 아주 굵어 작아지면 글자 속이 메워집니다.
- Syne은 숫자 9가 소문자 g처럼 보였습니다.
8쌍 중 4쌍이 손글씨·붓 계열이었습니다. 포스터는 원하는 만큼 들여다볼 수 있지만 쇼츠 자막은 1~2초 떠 있다가 사라집니다. 그러니 손글씨는 큰 강조 한두 낱말에만 쓰는 편이 안전한 것 같습니다.
폰트 자체의 문제인지 크기 문제인지 궁금해서 세 폰트는 따로 크게 그려 봤습니다. 폰트만 그린 줄을 왼쪽에 두고 오른쪽 영상 자막과 견줬습니다.
HS여름물빛체의 "줄"이 처지는 건 폰트 원래 모양입니다. 개구의 넓은 자간도 폰트 기본값이었습니다. 가석은 크게 그리면 글자 속이 남는데 자막 크기로 줄면서 메워졌습니다. 떨어진 폰트들은 작은 자막과 어두운 배경에 맞지 않았을 뿐이라고 보는 게 맞을 것 같습니다. 큰 제목이나 밝은 배경에서라면 결과가 다를 수 있습니다.
작은 칩 안에 영어가 들어갈 때도 조심할 게 있었습니다. "Apache-2.0" 같은 영어 라벨은 글자가 조금만 커져도 옆 칩과 붙었습니다(왼쪽). 영문 크기를 다시 맞춘 뒤에야 칩 사이에 틈이 생겼습니다(오른쪽). 폰트를 바꿀 때마다 영어가 섞인 작은 라벨도 같이 봐 두면 좋습니다.
여기까지 나온 숫자를 한 장에 모았습니다.
추천하는 폰트 조합 8가지
57쌍을 다 영상으로 만들면 오히려 고르기 어려워서 분위기가 겹치지 않는 8개만 템플릿 영상으로 만들었습니다. 두 번째로 보낸 요청입니다.
적당한건 템플릿 영상으로 간단하게 적절히 선정하고요. 나머지 폰트들은 시트 형태로 이미지로 만들어두고 수강생들이 고르게 할 수 있으면 좋을거같아요
고를 때는 분위기가 서로 겹치지 않는지, 화면에서 또렷하게 읽히는지, 폰트 파일까지 수강생에게 나눠 줄 수 있는지를 따졌습니다. 그래서 여기 고른 8개는 분위기별 견본에 가깝습니다. 조합마다 써 보니 좋았던 곳과 조심할 점을 같이 적었습니다.
| 조합 이름 | 강조 · 본문 · 영문 | 어울리는 곳 | 조심할 점 |
|---|---|---|---|
| 클린 테크 | 에이투지체 · 프리텐다드 · Bricolage Grotesque | AI 툴·앱 소개·IT 팁 | 고딕끼리라 대비는 작고 인상은 익숙한 편 |
| 리서치 리포트 | 함렡 · 아스타 산스 · Newsreader | 리서치·보고서·비교 분석 | 작은 라벨이 가늘어지고, 복잡한 화면과는 톤이 어긋날 수 있음 |
| 다큐 명조 | 본명조 · 프리텐다드 · Playfair Display | 다큐·사회 이슈·역사 | 작은 카드 라벨까지 명조라 획이 약해짐 |
| 이벤트 붓글씨 | 검은고딕 · 프리텐다드 · Yellowtail | 이벤트·메뉴·오픈 소식 | 붓 느낌은 영어에만 있음. 숫자 9가 낯설고 작은 라벨은 무거움 |
| 오스퀘어 임팩트 | 카페24 아네모네 · 프리텐다드 · Archivo Black | 짧은 훅·랭킹 | 작은 카드까지 굵고 빽빽해 오래 보면 피로함 |
| 동네 가게 | 주아 · 마루 부리 · Young Serif | 디저트·굿즈·동네 가게 | 개성 있는 폰트가 셋이라 긴 목록에는 무거움 |
| 공부 노트 | 나눔손글씨 펜 · 프리텐다드 · Caveat | 공부법·짧은 메모 | 영상 자막에서는 가늘고 작아 존재감이 약함 |
| 을지로 레트로 | 배민 을지로체 · 수트 · Abril Fatface | 노포·맛집·레트로 | 레트로 인상이 강해 IT 소개에는 안 맞음 |
(오스퀘어 임팩트에 쓴 카페24 아네모네는 파일 이름이 Cafe24Ohsquare라서 두 이름으로 불리는데, 같은 폰트입니다.)
어그로체와 나눔명조, 서울알림체, 원스토어 모바일POP체, 빙그레 따옴체를 쓴 조합도 보기 좋았지만 폰트 파일을 나눠 줄 수 없어서 템플릿에서는 뺐습니다. 영상에 쓰는 것 자체는 괜찮습니다.
템플릿 영상에서 같은 구간을 잘라 네 개씩 붙였습니다. 먼저 강조 자막 "편집에 몇 시간씩"이 뜨는 구간입니다.
다음은 목록 자막과 형광펜 강조가 함께 나오는 구간입니다. 목록은 대부분 담백한 고딕이라 비슷합니다. 조합의 성격은 노란 형광펜 줄과 아래 강조 자막에서 드러납니다.
영어가 섞인 "9개의 Claude Code" 구간은 조합끼리 차이가 가장 큽니다.
교안 도구 영상에서도 같은 네 조합을 확인했습니다. "90% 줄이고 싶으면", 라이선스 칩, "Diagram Design은"이 이어지는 구간입니다.
템플릿 영상의 자막이 위 비교 화면과 같은 폰트로 나왔는지는 프레임을 뽑아 비교 화면 옆에 붙여 대조했습니다.
나머지 조합은 수강생이 번호로 고를 수 있게 시트로 만들었습니다. 한눈에 보기 시트 3장은 모든 조합을 같은 두 장면으로 보여 줘서 위아래로 훑으며 비교할 수 있습니다. ▶는 템플릿 영상이 있는 조합, ⚠는 폰트를 직접 설치해야 하는 조합입니다.
마음에 드는 조합이 있으면 카드를 열어 봅니다. 카드에는 조합 이름(그 조합의 폰트로 씀), 분위기, 강조·자막·영문 폰트 이름, 같은 세 장면, 어울리는 곳, 폰트 파일을 나눠 줄 수 있는지가 들어 있습니다. 템플릿 중 몇 장을 붙입니다.
이벤트 붓글씨 조합은 레포 추천 짝(검은고딕과 Yellowtail)을 거의 그대로 가져왔습니다. 이름은 붓글씨지만 한글은 검은고딕이고 붓 느낌은 영어에만 있습니다. ⚠ 조합 카드에는 아래쪽에 직접 설치 링크가 붙습니다. 어그로체를 쓴 후킹 강의 카드가 그 예입니다.
개인적인 생각 & 한계점
"모션그래픽에 들어가는 폰트의 최적의 조합은?"이라는 질문으로 시작했지만 정답이 하나로 정해지지는 않았습니다. 그래도 이번 화면에서 먼저 고른다면 정보를 빠르게 전달하는 영상은 에이투지체와 프리텐다드, 설명하고 분석하는 영상은 함렡과 아스타 산스입니다. 원래 쓰던 학교안심 알림장 조합도 여기에 들어갑니다. 알림장 조합은 새 후보들과 나란히 놓아도 복잡한 화면에서 잘 버텼습니다. 굳이 바꾸는 게 개선이라고 보기는 어려웠습니다.
조합을 고를 때 제가 챙긴 기준입니다.
1. 강조 폰트는 작은 글자에서도 확인하기 큰 제목에서 멋있던 명조나 아주 굵은 고딕이 작은 카드 라벨에서는 가늘어지거나 뭉개졌습니다.
2. 손글씨는 큰 강조 한두 낱말에만 떨어진 8쌍 중 절반이 손글씨였고 살아남은 손글씨도 자막 크기에서는 존재감이 약했습니다.
3. 한글과 영어는 굵기와 높이가 이어지는지 보기 한글과 영어가 같은 무게로 읽히는지, 숫자가 제대로 보이는지가 폰트 종류보다 더 중요해 보였습니다.
4. 나눠 줄 거라면 재배포 조건부터 보기 좋았던 조합 몇 개가 폰트 파일을 나눠 줄 수 없다는 이유 하나로 템플릿에서 빠졌습니다.
폰트 짝 하나만 정해 줘도 Claude 결과물의 인상이 달라지는 건 분명히 보였습니다. 다만 그게 AI 티를 얼마나 줄이는지, 조회수나 반응으로 이어지는지까지 잰 건 아닙니다. 여러 조합을 같은 장면에 직접 입혀 보고 본인 콘텐츠에 맞는 짝 3~5개를 정해 두는 데서 나만의 디자인 시스템이 시작된다고 생각합니다.
이번 실험에는 한계도 있습니다.
- 실험한 영상은 두 편이고 둘 다 어두운 배경의 세로 쇼츠입니다. 밝은 배경이나 가로 영상에서는 결과가 다를 수 있습니다.
- 읽히는지는 AI가 렌더 이미지를 보고 판정했고 사람이 실제 폰으로 본 테스트는 아닙니다. 수강생 반응도 아직 재지 않았습니다.
- 라이선스는 작성일에 원문을 보고 정리한 참고 정보이고 법률 자문이 아닙니다. (최대한 확인했지만 틀린 부분도 있을 수 있습니다.)
이 글을 마치며 & Reference
이번 글에서는 폰트 페어링 스킬의 규칙으로 무료 폰트 짝 65개를 만들어 쇼츠 두 편에 입혀 보고 자막에서 잘 읽히는 조합과 무너지는 폰트, 템플릿으로 고른 8가지를 정리했습니다. 다음 글에는 기회가 되면 이 조합들을 밝은 배경의 영상과 실제 폰 화면에서도 확인해 보고 수강생들이 어떤 조합을 고르는지도 정리해 보겠습니다.
관련 글
- 셀카 영상 하나로 쇼츠 만들기, avatar-shorts 예시 영상 뜯어보기: 이번 실험에 쓴 첫 번째 영상의 원본 도구
- 교안 만들 때 쓰는 오픈소스 3가지: 이번 실험에 쓴 두 번째 영상의 글 버전
- Claude Code 프론트엔드 디자인 도구 5종: 폰트 말고 다른 쪽에서 AI 티를 줄이는 도구들
- Opus 5.5 영상 프롬프트 475개 모음: 모션그래픽 영상을 프롬프트로 만드는 예시 모음
- 쇼츠·릴스 로컬 자동화 제작기: 이번 실험에 쓴 쇼츠 제작 과정 이야기
Reference
- Sequence-st/font-pairing-skill : 이번 실험의 출발점. 규칙 12개 문서(
skills/font-pairing-seqc/references/rules.md)만 읽어도 폰트 고르는 기준이 잡힙니다. - 눈누 : 한글 무료 폰트 모음. 폰트마다 인쇄·웹·영상·임베딩 등 6칸 라이선스 표가 있어서 상업 이용 여부를 확인하기 좋습니다.
- Google Fonts : 영문 폰트와 일부 한글 폰트. 대부분 SIL OFL 라이선스라 재배포 조건이 단순한 편입니다.
긴 글 읽어주셔서 감사합니다 :)
추가 학습 자료 신청
ZEXEA 메인 사이트의 자료 신청 페이지로 이동합니다. 이름·이메일·전화번호 등의 입력이 필요합니다. 블로그 글과 실습 예제는 신청 없이 모두 읽을 수 있습니다.
관련 가이드
셀카 영상 하나로 쇼츠 만들기, Claude Code 오픈소스 avatar-shorts 예시 영상 뜯어보기
셀카 영상 하나로 쇼츠 만들기를 Claude Code 오픈소스 avatar-shorts로 해 본 기록입니다. 27초 원본이 무음 정리, 훅 재배치, 자막, 모션그래픽을 거쳐 26초 쇼츠가 되는 과정을 직접 잰 수치와 결정 기록으로 살펴봅니다.
전체 과정 보기교안 만들 때 쓰는 오픈소스 3가지, Diagram Design·Presenton·Quarkdown 직접 써 본 결과
교안 만들 때 쓸 만한 오픈소스 3가지를 정리했습니다. Diagram Design으로 업무 흐름도를, Quarkdown으로 표지·목차·쪽 번호가 있는 교재 PDF를 직접 만들어 본 과정과 Presenton의 PPT 생성 방식을 담았습니다.
전체 과정 보기Claude Code 프론트엔드 디자인 도구 5종, AI 티 나는 웹사이트를 고치는 스킬·CLI 사용법
Claude Code로 만든 웹사이트의 AI 티를 줄이는 디자인 도구 5종. Awesome DESIGN.md, Taste Skill, Image to Code, Playwright CLI, Vercel 규칙 스킬의 정체와 설치법, 쓰는 시점, 직접 돌려본 결과를 정리했습니다.
전체 과정 보기