소개
안녕하세요, Make 유튜브 쇼츠 자동화 스터디를 계기로
고양이 퀴즈 채널을 운영하고 있습니다!
개설한지 10일차이고, 총 40개의 쇼츠를 업로드 했고
1K가 나온 콘텐츠가 4개 생겼습니다.
유튜브 채널 보러가기
제가 쇼츠를 운영하면서 가장 많이 신경 쓴건
퀴즈 디자인인데요, 고양이 퀴즈이다 보니
귀여운 느낌의 디자인이 필요했어요.
그래서 퀴즈 템플릿 디자인을 수정하는데
시간을 정말 많이 투자했습니다.
수정 방법을 배워 보고 싶다고 하셔서
최대한 따라서 쉽게 하실 수 있는 것들로 골라서 설명을 해보겠습니다!
진행 방법
Make 시나리오의 HTML 모듈 확인하기
[문제, 답의 HTML(Tailwind CSS)] 라는 모듈에서 퀴즈 템플릿을 수정할 수 있습니다. 해당 모듈을 클릭해주세요.HTML 에디터로 수정하기
Make에서 바로 HTML을 수정하는 것은 쉽지 않습니다. 칸이 매우 작아요 ㅠㅠ
HTML을 수정하는 2가지 방법을 추천드릴게요.html code editor (초보자용)
설명
간단하게 사용할 수 있는 웹 HTML 에디터 입니다.
가이드
Make 코드 복사
에디터 왼쪽 칸에 붙여넣기
에디터 오른쪽 칸에서 미리보기 확인
(Tip. 우측 하단 화살표 누르고 쭉 늘리면 화면이 위아래로 늘어나요)코드 복사해서 Make에 붙여넣기
Vscode (중급자용)
설명
위의 코드 에디터는 가독성이 안좋다고 생각하신다면, Vscode라는 코드 에디터를 설치하는 것도 추천드립니다. 저는 Vscode로 코드를 옮겨서 수정하고 있어요.
링크 : https://code.visualstudio.com/
가이드
html 파일 생성 후 Make 코드 복사
코드 복사 후 html formatter에서 포맷 예쁘게 바꿔주기
(Tip. Vscode 코드를 Make에 바로 붙여넣으면
포맷이 깨지는 문제가 있어요! 포맷을 한번 바꿔주셔야해요)
링크 : https://webformatter.com/htmlCopy를 눌러서 코드 복사한 뒤 Make로 붙여넣기
텍스트 글꼴 변경하기
설명
글꼴은 구글에서 제공하는 폰트를 사용하면 되는데요
아래 링크로 들어가주세요.
가이드
설정 안내 : 들어가시면 제가 미리 내용 과 언어 설정을 Korean으로 해두었습니다.
Preview는 원하시는 내용으로 바꾸셔도 되고, 언어 설정은 Korean을 그대로 써주세요. Korean으로 설정하셔야 한국어를 지원하는 폰트만 나오게 됩니다.글꼴 선택 : 원하시는 글꼴을 선택해보세요. 저는 Gothic A1을 클릭해보겠습니다.
Get Font > Get Embed Code를 차례대로 눌러주세요.Change Style 클릭 > 모든 굵기의 스위치를 오른쪽으로 변경
(모든 굵기를 다 사용하겠다는 뜻입니다)필요한 굵기만 선택해도 되는데, 나중에 변경하기 귀찮으니 모두 선택해줍니다.
화면에 보이는 영역까지만 긁어서 복사한 뒤,
HTML 코드 에디터에서 링크를 교체해주세요.마지막으로
font-family를 복사한 뒤,
코드에서 font-family 라고 되어 있는 부분을 교체해주세요.오른쪽 미리보기에서 글꼴이 바뀌었는지 확인해보세요.
[Before : Noto Sans KR]
[After : Gothic A1]에디터에서 코드 전체를 복사한 뒤 > Make에 붙여넣어주세요.
Before, After 모두 이런 방식으로 변경하시면 됩니다.
텍스트 크기 변경하기
font-size속성을 변경하면 크기가 바뀝니다.rem 앞에 있는 숫자를 바꿔주세요. 수치가 높을수록 더 커집니다.
예시 : 1rem, 2rem, 2.5rem, 3rem... (소수점 입력해도 OK)
[Before : 질문 크기가 5rem 일 때]
[After : 질문 크기가 3rem 일 때]
텍스트 굵기 변경하기
font-weight속성을 변경하면 굵기가 바뀝니다.100 단위로 변경할 수 있고, 수치가 높을수록 더 굵어집니다.
예시 : 100, 200, ... 700, ...
텍스트 색상 변경하기
color속성을 변경하면 색상이 바뀝니다.white, black, yellow 같은 영어 기본 단어를 쓸 수도 있고
6자리 컬러 코드를 입력하는 것도 가능합니다.6자리 컬러 코드 찾는 방법
원하시는 색상을 클릭하신 후, # 옆에 있는 6자리 코드를 복사해주세요.
#와 6자리 코드를 붙여서 color 속성을 변경해주세요.
마지막은 꼭 코드 전체를 Make에 붙여 넣어 주시는 것! 잊지마세요 😄
텍스트 잘리는 지점 조절하기
텍스트가 단어 채로 잘리지 않고 글자 단위로 잘리는 현상이 있으실텐데요.
이 때는
word-break라는 속성을 활용해주면 됩니다.
줄바꿈을 할때 단어를 기준으로 해주는 고마운 속성입니다 👍.question안에 아래의 코드를 넣 어주세요!word-break: keep-all;
결과와 배운 점
가이드를 쓰면서 느낀 점
스터디원 분들의 얘기를 들어보면
코드를 수정하는 일이 낯설 것 같 다는 생각이 들었어요.
그래도 에디터 도움을 받으면 미리보기가 지원되니까
따라하실 수 있을 것 같습니다!
최대한 쉽게 설명해보려고 노력했는데
도움이 꼭 되었으면 좋겠네요!
도움이 되셨다면 제 유튜브에 놀러오셔서
영상들이 어떤지 후기도 부탁드리겠습니다 😄 (피드백 너무 소중해요!!)
유튜브 채널 보러가기요즘 하고 있는 것
수동으로 하던 작업들을 모두 자동으로 변경했습니다 (퀴즈 검수 등..)
스터디장님의 조언대로 자동 업로드는 꾸준히 해주고, 조회수 잘 나온 소재들로 기획 영상을 직접 올려보는 방식을 해보려고 합니다.대신 자동 생성의 단점인 할루시네이션(거짓말 하는 현상)을 줄이기 위해 퀴즈의 정확도를 올리는데 시간을 들이고 있습니다.
제가 원하는 대로 나올 수 있도록
이미지와 퀴즈 생성 프롬프트를 열심히 수정해보고 있습니다.영상을 끝까지 보게 유도하도록 새로운 상호작용을 넣었습니다.
(ex. 정답 맞추면 "퍼펙트! 하나만 더 맞춰보자~")
다음 3편에서는 퀴즈 정확도를 올리기 위해서 했던 시도들과
이미지 & 퀴즈 생성 프롬프트를 어떻게 커스텀 했는지도
다뤄보겠습니다~!이전 글