· 톺아보기

PC/모바일

워크플로위 + 유저스크립트 = 빈칸 문제 자동으로 만들기

토마토사진가 · · 수정

조회 13,344 · 공감 18 · 댓글 12

안녕하세요? 


영어 지문에 빈칸 뚫거나, 네모칸에서 맞는 어휘 고르기 문제를 자주 만드는데 매번 귀찮아서 워크플로위에 적용할 스타일을 만들어봤습니다. 제가 처음부터 만든 건 당연히 아니고 여기저기서 주워서, 구글링하고, 시행착오를 거쳤네요. 


1. 워크플로위 workflowy.com 에서 학습 자료 제작

-  빈칸으로 뚫고 싶은 곳은 그냥 밑줄 서식을 적용합니다. 

- 네모칸 적용할 곳은 bold 서식으로 

- 기타 정답 표시 등은 하이라이트 기능 이용


11111.png




2. 탬퍼몽키, Stylus 크롬 확장 설치 후, 스타일을 추가합니다. 

탬퍼몽키와 Stylus를 크롬 브라우저에 설치합니다. 특정 사이트의 스타일을 바꿀 수 있게 됩니다. 


- 탬퍼몽키 확장 : https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

- Stylus 확장 : https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

- Stylus 추가할 스타일 : https://www.thiscodeworks.com/610b9a20f724050014f7d222#!




3. 이제 웹에서 workflowy.com 으로 브라우저 접속해, 해당 문서로 이동 후, 

스타일을 적용합니다. 그럼 아래처럼 보입니다. 

22222.png


우선 본문 폰트와 영어 서체를 변경해서 보기 좋게 바꾸었어요 (나눔바른고딕, Georgia)

보시다시피 밑줄은 글자색 흰색으로 변경 후 민트색 배경색 적용해서 일단 답이 보이게 해두었습니다. 이렇게 한 이유는 인쇄 단계에서 배경색만 걷어내서 지우기 위해서입니다. 그냥 텍스트 색상을 흰색으로 처리하니까 브라우저에서 흰색 인쇄를 거부하셔서.. 글자색은 투명처리 후 그림자 효과를 넣었네요... ㄷㄷ

볼드체 처리했던 부분은 네모칸(외곽선) 효과가 생긴 걸 볼 수 있습니다. border 처리하면 형광펜이랑 겹쳐서 안 예뻐서 outline 적용했어요. 

정답에 표시한 형광펜(노란색)은 그대로 보입니다. 태그에 적용한 색상도 마찬가지. 



4. 이제 학생에게 제공하는 인쇄 단계에서 크롬 브라우저 인쇄설정에서 "배경 그래픽"을 제외하고 PDF나 종이로 뽑아내면 학생들을 위한 시험지가 됩니다. 


333333.png


형광펜이 모두 제거되었습니다. 

태그는 외곽선만 남습니다. 

정답에 덧칠했던 노란색 형광펜이 사라져서 A/B 고르기 네모박스가 되었습니다. 

밑줄에 적용된 형광펜이 사라지면서 빈칸이 되었습니다. 




5. 왜 이런 짓을?

- 한글에서 하나하나 빵꾸 뚫고 정답지 만드는 수고를 덜어보자. 

- 출퇴근 길에도 아이폰/아이패드 앱으로 자료를 제작하고 수정하자. 

- 복수의 PC에서 브라우저 동기화를 통해 동일한 작업 환경을 유지하자

- 혼자 공부할 내용 정리 후 혼자 시험보고 싶을 때도 유용할 듯 싶네요. 


이 강좌에서 사용한 샘플 자료를 확인하시기 바랍니다.


원고 작성 텍스트 웹에서 보기 : https://workflowy.com/s/ebs-day16-i-h1/LK2Sepofr7sN8KLY

최초 원고 스타일 적용 없이 PDF로 인쇄 : https://bit.ly/3xq2hs3

스타일 적용 후 PDF 인쇄 : https://bit.ly/37kSN6C

스타일 적용 후, 배경그래픽 적용 없이 PDF 인쇄 : https://bit.ly/3ivJlnH



출처 : 본인 블로그

https://seoulrain.net/2021/08/05/cloze-test-with-workflowy/


출처 : https://seoulrain.net/2021/08/05/cloze-test-with-workflowy/

댓글 12

  1. 몬트리올최병장 ·
    퀴즈렛말고 워크플로위를 구독할껄 그랬네요... ㅠ
  2. 토마토사진가 ·
    @몬트리올최병장님 어.. 워크플로위는 구독 안 하셔도 대부분의 기능을 이용할 수 있습니다 ㅎㅎ
  3. 명랑청년™ · · 공감 1
    워크 플로위를 이렇게도 쓸 수 있군요!
    멋지십니다! 이런 걸 공개해주시다니! 플래쉬카드 디럭스도 그렇고 늘 감사한 마음 뿐입니다.
  4. 토마토사진가 ·
    명랑청년™님// 앗 감사합니다!!
  5. 마늘 ·
    서울비님 매번 큰 도움 얻고 갑니다. 감사합니다.^^
    알려주신 Stylus 적용이 이상하게 크롬에서 안 먹히네요. 다른 확장 프로그램하고 엉켜서 그런거 같기도 하고 ㅠㅠ
    저랑 비슷한 분 계신가요?
  6. 토마토사진가 ·
    마늘님// 탬퍼몽키 설치하셨는지와 혹시 광고차단 중인지 한 번 보세요🙂
  7. 토마토사진가 ·
    공감Ditto님// 브라우저 말씀이신가요? 인쇄 단계에서 배율을 조정하시면 될 겁니다.
  8. 토마토사진가 ·
    @공감Ditto님 데스크톱에서는 보기 배율만 조정하게 되어 있어서, 아마 기본 폰트가 14px 내외로 잡혀있던 걸로 압니다.

    1) 브라우저에서 인쇄하시거나,
    2) 기본 앱에서 Ctrl + Shift + I 로 개발자 창 여시고 폰트 상대 배율을 조정하는 방법이 있습니다.
    https://i.imgur.com/IVfiSFr.png

    다만 영구적으로 고정되지는 않더군요.
    저는 주로 인쇄할 때는 브라우저에서 하는 편입니다.
  9. tholstoy ·
    혹시 텍스트 형광펜 하이라이트 넣는건 단축키 없나요? 유용한 정보 감사합니다
  10. 토마토사진가 ·
    @tholstoy님 있습니다! Ctrl + Shift + H 입니다.
    일단 최초에는 마우스로 한 번 지정해주시고, 그 다음 작업에서는 최근에 적용한 색상을 단축키로 반복해 적용할 수 있습니다.
  11. tholstoy · · 공감 1
    @서_울__비님 감사합니다. 이 기능을 이제 알았네요

팁과강좌 최근 글

팁과강좌 목록 더 보기