DOI QR코드

DOI QR Code

웹 콘텐츠를 활용한 학습용 타자 연습 어플리케이션의 설계와 구현

Design and Implementation of Typing Practice Application for Learning Using Web Contents

  • Kim, Chaewon (Dept. of Software, Catholic University of Pusan) ;
  • Hwang, Soyoung (Dept. of Software, Catholic University of Pusan)
  • 투고 : 2021.10.05
  • 심사 : 2021.12.08
  • 발행 : 2021.12.31

초록

There are various typing practice applications. In addition, research cases on learning applications that support typing practice have been reported. These services are usually provided in a way that utilizes their own built-in text. Learners collect various contents through web services and use them a lot for learning. Therefore, this paper proposes a learning application to increase the learning effect by collecting vast amounts of web content and applying it to typing practice. The proposed application is implemented using Tkinter, a GUI module of Python. BeautifulSoup module of Python is used to extract information from the web. In order to process the extracted data, the NLTK module, which is an English data preprocessor, and the KoNLPy module, which is a Korean language processing module, are used. The operation of the proposed function is verified in the implementation and experimental results.

키워드

1. 서론

현재 국내에는 다양한 형태의 타자 연습 서비스가 제공되고 있다. 기존의 타자 연습 서비스는 자체에 내장되어있는 글을 따라 적는 방식, 혹은 사용자가 원하는 글을 불러와 타자 연습을 수행하는 방식으로 제공된다. 그리고 타자 연습 기능과 타자 속도를 활용하여 간단한 게임 기능을 제공한다. 본 논문에서는 이와 같은 일반적인 타자 연습의 형태에서 벗어나 웹에서 추출한 정보를 타자 연습의 콘텐츠로 제공하는 학습용 어플리케이션의 설계와 구현을 제시한다. 또한 학습의 집중도를 높일 수 있는 기능으로 동작에 있어 기본 모드와 하이라이트 모드를 고려하였다.

제안하는 어플리케이션은 파이선(Python)의 GUI 모듈인 Tkinter를 사용하여 PC환경에서 동작하도록 구현하였다. 웹의 정보를 추출하기 위해서 파이선의 BeautifulSoup모듈을 사용하였고 추출된 내용을 처리하기 위해 영어 데이터 전처리기인 NLTK(NaturalLanguageToolkit)모듈과 한글을 처리하기 위한 KoNLPy(PythonpackageforNaturalLanguage Processingof theKoreanlanguage)모듈을 사용하였다. 추출하고자 하는 사이트의 URL입력을 통해 HTML태그를 받아오면 해당 태그에서 불필요한 요소들을 제거한 뒤 텍스트 파일로 저장하고 해당 파일은 각 전처리기를 통해 타자 연습을 할 수 있는 형태로 바뀌게 된다. 제안하는 어플리케이션은 URL을 입력할 때 마다 각자 원하는 방식에 맞춰 학습할 수 있도록 서비스를 제공한다.

논문의 구성은 다음과 같다.2장에서 관련 연구에 대해 기술한다. 3장에서는 제안하는 타자 연습을 활용한 학습 어플리케이션의 설계 고려사항을 제시한다. 4장에서는 제안한 어플리케이션의 구현과 실험 결과를 살펴보고 마지막 5장에서 결론과 향후 연구계획에 대해 다룬다.

2. 관련 연구

컴퓨터의 활용이 보편화됨에 따라 컴퓨터의 주요 입력 장치인 키보드를 다루는 것이 기본적으로 요구된다. 이를 위해 타자 연습 기능을 제공하는 서비스가 다양한 형태로 제공되고 있다. 또한 게임을 이용한 학습은 학습자의 흥미유발과 자기주도적인 학습이 가능하다는 점에서 큰 각광을 받고 있으며 타자 연습 기능과 게임 방식을 접목하여 학습 프로그램을 개발하는 사례도 보고되고 있다.

타자 연습을 지원하는 영어 학습 시스템의 설계와 구현 사례에서는 영어 학습에 흥미를 유발하면서 효과적인 학습을 위해 타자 연습을 활용하였다. 해당시스템에는 영어 단어 1280여 개, 숙어 999개, 문장은 예문을 포함하여 2000여 개가 입력되어 있다. 또한사용자가 자신의 목적에 따라 데이터의 삽입, 삭제, 수정이 가능하도록 하였으며 타자 연습과 영어 학습을 겸할 수 있도록 하였다[1].

타자 및 언어 학습을 위한 한․영단어 맞추기 게임 구현의 사례에서도 기존의 대표적인 타자 연습프로그램인 산성비 게임을 응용하여 게임방식을 통한 언어 학습을 지원하고 있다. 이는 한․영단어 맞추기 게임으로 초등학교 고학년들의 효율적인 단어학습을 위해 제안되었다[2].

유니코드를 이용한 안드로이드OS기반의 타자 연습 앱 개발 사례는 스마트폰 사용의 급증으로 사용자들에게 휴대폰으로 간단히 타자 연습을 제공하기 위함이다. 사용자 편의성과 게임요소를 추가하여 활용성을 높일 수 있도록 하였다[3].

원거리에서 블루투스를 활용하여 무선마우스와 무선키보드의 역할을 수행할 수 있는 스마트폰 기반의 어플리케이션 개발 사례도 제시되었으며 이는 직관적인 인터페이스 설계 및 마우스와 키보드의 기능이 통합된 어플리케이션이다[4].

이와 같은 연구 사례와 더불어 현재 국내에서는 다양한 형태로 타자 연습 서비스를 제공하고 있다. 이들 서비스는 대개 자체 내장되어있는 글을 따라 입력하는 방식, 혹은 사용자가 원하는 글을 불러와타자 연습을 하는 방식이다. 따라서 본 논문에서는 이러한 타자 연습의 형태를 보다 개선하여 웹에서 추출한 내용을 타자 연습의 콘텐츠로 제공하는 학습어플리케이션을 착안하였다. 학습자들은 대개 웹 서비스를 통해 다양한 콘텐츠를 수집하고 학습에 활용하고 있다. 이에 방대한 웹 콘텐츠를 수집하고 타자 연습에 적용함으로써 학습 효과를 높일 수 있을 것으로 기대하여 타자 연습을 활용한 학습 어플리케이션을 제안한다.

3. 웹 콘텐츠를 활용한 학습용 타자 연습 어플리케이션의 설계

3.1 기능 구조

웹에는 방대한 자료들이 존재하고 있다.그 자료들을 학습을 위해 사용한다면 간편하고 유용하게 활용될 수 있을 것이다. 본 논문에서는 웹의 정보를 일시적인 검색에 그치지 않고 지속적으로 활용할 수 있도록 타자 연습을 활용한 학습 어플리케이션을 제안한다. 제공하는 주요 기능 구조를 Fig.1에 나타내었다.

MTMDCW_2021_v24n12_1663_f0001.png 이미지

Fig. 1. Functional architecture of the proposed application.

타자 연습을 수행하는데 있어 일반 모드와 하이라이트 모드의 동작을 제공하도록 한다.일반 모드는부가적인 기능 없이 일반적인 타자 연습을 제공하는 모드이고, 하이라이트 모드는 자주 나오는 단어에 하이라이트 표시를 하여 단어를 정확하게 입력하면 일정 점수를 획득하도록 한다.

북마크 기능은 사이트의 제목과 URL을 저장하는 기능이다.북마크의 삽입과 삭제 및 편집이 가능하도록 구성한다. 환경 설정 기능은 타자 연습 모드 설정, 타자 소리 크기 조절, 속도와 정확도의 표시 유무, 다음 화면으로 넘어갈 때 팝업의 유무를 설정할 수 있도록 한다. 하이라이트 모드가 설정되었을 경우에는 강조되는 색상도 변경할 수 있도록 하며 초기 설정 되돌릴 수 있는 초기화 기능을 제공하도록 한다.

텍스트 직접 불러오기 기능은 사용자가 복사해 온 내용을 붙여 넣어 연습하는 기능이다.도움말 기능을 통해 환경 설정 등에 대한 도움말을 제공하도록 한다.

3.2 기능 구동 방안

제안하는 어플리케이션은 파이선 언어를 기반으로 구현하는 것을 고려하여 설계하였으며 제시된 주요 기능의 세부 구동 방안은 다음과 같다.GUI에 대한 요소들은 모두 Tkinter모듈을 사용해 구현하도록 한다[5]. 타자 연습에 사용할 콘텐츠를 추출하기 위해 입력받은 URL의 유효성을 확인하고 해당 사이트가 유효한 것을 파악하면 웹 크롤링을 수행한다 [6,7]. 수집한 콘텐츠에서 이후 학습에 불필요한 태그를 떼어내고 텍스트 파일로 저장한다.텍스트가 영어일 경우는 NLTK모듈을 한글일 경우 KoNLPy모듈을 활용하도록 한다[8,9]. 영어 전처리기 NLTK는 긴 문자열을 분석하기 위해 작은 단위로 나누는데 이것을 토큰화한다고 한다. 토큰은 문장, 단어 등이 될 수 있다. 해당 어플리케이션에서는 문장 단위로 분류 후 단어 단위로 분류하는 토큰 생성 과정을 거쳐 사용하도록 한다. 한글 전처리기 KoNLPy는 형태소 분석 중 명사 추출 기능을 사용하여 어플리케이션에 사용한다. 텍스트 파일이 온전하게 추출되었다면 타자 연습을 진행하는 환경이 나타나도록 한다.

타자의 입력을 효과적으로 나타내기 위해 소리 기능을 추가하였으며, 키 입력이 있을 때마다 파이게임 (PyGame)모듈을 사용하여 소리가 출력되도록 한다. 제안하는 서비스는 학습이 주요 목적이기 때문에 타자 속도와 정확도 표시는 켜고 끌 수 있도록 하였고 학습 진행 중 원하는 페이지로 바로 이동할 수 있도록 페이지 입력창을 통한 이동 기능을 제공한다. 해당 설정과는 별개로 하이라이트 모드의 경우에는 점수가 항상 뜨도록 하고 점수는 하이라이트 처리된 단어를 정확하게 입력하였을 경우 부여되도록 한다.

하이라이트 처리는 NTLK, KoNLPy모듈을 사용해 단어 단위로 나뉜 문자를 바탕으로 단어의 빈출 정도를 측정하고 전체 단어의 개수와 그에 비례하는 빈도를 계산하여 하이라이트 처리가 되도록 한다.

4. 구현 및 실험 결과

제안한 웹 콘텐츠를 활용한 학습용 타자 연습 어플리케이션의 구현 및 실험 결과에 대해 제시한다. 개발환경은 파이선 3.8을 기반으로 관련 패키지를 효율적으로 관리하기 위해 파이참(PyCharm)을 활용하였다. Fig.2는 어플리케이션을 실행한 메인 화면의 모습이다. 각 기능별 버튼과 내용이 상단에 나와 있고 북마크 기능과 텍스트 직접 불러오기 기능이 각각 제시되어 있다.

MTMDCW_2021_v24n12_1663_f0002.png 이미지

Fig. 2. Main screen shot of the proposed application.

환경 설정 기능의 구현 결과와 실험을 Fig. 3에나타내었다.타자 소리의 크기 조정 기능, 속도와 정확도 및 다음화면 창 표시 기능을 설정할 수 있다. 타자 연습의 모드를 일반 모드와 하이라이트 모드로 설정할 수 있으며 일반 모드로 설정할 경우 하이라이트 색 변경 메뉴는 비활성화 된다. 일반 모드에서의 환경 설정 기능은 Fig.4와 같다.

MTMDCW_2021_v24n12_1663_f0003.png 이미지

Fig. 3. Screen shot of settings menu.

MTMDCW_2021_v24n12_1663_f0004.png 이미지

Fig. 4. Screen shot of settings menu in normal mode.

환경 설정에서 물음표 기호를 클릭하면 환경 설정에 대한 도움말을 볼 수 있다.도움말 기능을 Fig. 5에 제시하였다.

MTMDCW_2021_v24n12_1663_f0005.png 이미지

Fig. 5. Help function in settings menu.

북마크 기능은 Fig.2의 북마크 메뉴에서 사용할 수 있다. 더하기 기호가 표시된 버튼을 클릭하면 제목과 URL을 입력하여 북마크를 추가할 수 있다. 기입력된 북마크의 편집 기호를 클릭하면 북마크 내용을 수정할 수 있으며 북마크 수정 기능은 Fig. 6과 같다.

MTMDCW_2021_v24n12_1663_f0006.png 이미지

Fig. 6. Screen shot of bookmark editing.

제안한 어플리케이션의 주 기능에 해당하는 타자 연습 기능의 구현 및 실험 결과는 다음과 같다. Fig. 7은 일반 모드에서 Fig.8은 하이라이트 모드에서 타자 연습 기능을 실행한 결과이다. 해당 내용은 Fig. 2에 제시되었던 첫 번째 북마크를 선택하여 실행한 결과이다. 하이라이트 모드는 단어에 대한 빈출도를계산해 하이라이트 처리가 되도록 하는 모드이다. 본논문에서는 전체 단어의 개수와 각 단어가 해당 페이지 내에서 얼마나 나왔는지 각 개수를 측정한 값을 비교해 많이 나온 단어를 선별해 내어 하이라이트 표시해주도록 하였다. 하이라이트를 적용할 단어의 개수는 다음과 같은 방법으로 선정하였다.

MTMDCW_2021_v24n12_1663_f0007.png 이미지

Fig. 7. Screen shot of typing practice function in normal mode.

MTMDCW_2021_v24n12_1663_f0008.png 이미지

Fig. 8. Screen shot of typing practice function in highlight mode.

\(w c_{-} k o_{-} h l=\frac{t_{-} w c_{-} h l \times w c_{-} k o}{w c_{-} k o+w c_{-} e n}\)       (1)

\(w c_{-} e n_{-} h l=t_{-} w c_{-} h l-w c_{-} k o_{-} h l\)       (2)

수식 (1)과 (2)에서 wc_ko_hl은 하이라이트 될 한글 단어 개수, t_wc_hl은 하이라이트 될 전체 단어 개수, wc_ko는 한글 단어 개수, wc_en은 영어 단어 개수, wc_en_hl은 하이라이트 될 영어 단어 개수이다. 하이라이트 될 전체 단어 개수는 전체 페이지 수에 따라 구분하여 20페이지 이하는 30개, 100페이지 이하는 45개, 100페이지 초과는 60개로 임의선정 하였으며 이와 같은 기준으로 하이라이트 할 단어의 비율을 조정하도록 하였다.

타자 연습을 수행한 결과는 다음과 같다.타자 속도와 정확도가 켜진 상태의 일반 모드를 실행했을 때의 동작으로 Fig.9의 경우에는 추출한 문장과의 오차가 없으므로 정확도 100%로 출력되고 Fig. 10의 경우에는 두 글자 오타가 있어 정확도가 95%로 나오는 것을 확인할 수 있다.

MTMDCW_2021_v24n12_1663_f0009.png 이미지

Fig. 9. Screen shot of typing practice in case that there is no typo.

MTMDCW_2021_v24n12_1663_f0010.png 이미지

Fig. 10. Screen shot of typing practice in case that there are some typos.

타자 속도와 정확도의 측정과 관련하여 전체 평균속도와 정확도를 구하기 위해서 각 문장의 속도와 정확도를 추가로 측정하도록 하였다. 속도는 분당 입력되는 글자 수를 기준으로 두고 정확도를 반영하여 측정하였다. 정확도는 파이선의 표준 라이브러리 difflib에서 SequenceMatcher라는 기능을 이용해 각 문장의 일치도를 수치로 나타내었다. 한글과 영어가 혼용되어 있기 때문에 한글의 경우 평균 2번의 타자로 한 글자가 구성되는 것으로 가정하여 타자수 값 (keycount_ko)을 할당하고 영어의 경우 한문자로 글자가 완성되기 때문에 타자수 값 (keycount_en)에 2를 곱해주었다. 이를 바탕으로 측정한 타자 속도는 다음 수식 (3)과 같다. 전체 단어 수는 all_word, 정확도는 accuracy, 초 단위의 소요시간은 δTime이다.

\(\begin{aligned} \text { speed }=& \text { (keycount_ko }+\text { keycount_en } \times 2 \text {-all_word) } \\ & \times \text { accuracy}/\delta\text{Time} \times 60 \end{aligned}\)       (3)

사용자가 직접 입력한 텍스트를 활용하여 타자 연습을 수행하는 기능은 아래와 같다.Fig.11은 텍스트 직접 불러오기 기능의 메뉴를 나타낸 것이다.

MTMDCW_2021_v24n12_1663_f0011.png 이미지

Fig. 11. Screen shot of direct importing function menu.

사용자가 지정한 텍스트를 저장하는 기능을 Fig. 12에 나타내었다. 그리고 해당 내용으로 타자 연습을 수행하는 기능을 Fig. 13에 제시하였다.

MTMDCW_2021_v24n12_1663_f0012.png 이미지

Fig. 12. Screen shot of storing new text in direct importing function.

MTMDCW_2021_v24n12_1663_f0013.png 이미지

Fig. 13. Screen shot of typing practice in direct importing function.

본 장에서는 제안한 웹 콘텐츠를 활용한 학습용 타자 연습 어플리케이션의 구현과 실험 결과를 기술하였다. 설계에서 제안한 기능 구조에 따라 개별 기능을 구현하였고 전반적으로 제시한 기능이 동작함을 실험을 통해 확인할 수 있었다. 기존의 연구 사례와 국내에서 제공되는 타자 연습 서비스에서는 한정된 데이터를 기반으로 타자 연습 및 학습에의 활용이 이루어졌다. 본 논문에서는 이러한 형태를 개선하여 사용자가 검색한 웹 콘텐츠를 추출하여 학습에 활용하게 함으로써 기존의 타자 연습 및 이와 접목한 학습 어플리케이션의 기능 향상을 볼 수 있었다. 세부개선사항으로 하이라이트 모드 동작에서 발견된 일부 오차의 수정과 타자 속도의 계산에 대한 보다 면밀한 측정방안이 요구된다.

5. 결론

현재 웹에는 수많은 정보가 시시각각 탑재되고 있다. 학습을 보다 효과적이고 흥미롭게 수행하기 위한 방법들도 다양하게 제시되고 있다. 본 논문에서 눈으로 보는 것에서 그쳤을 웹의 자료를 학습에 유용하게 이용하기 위해 웹 콘텐츠를 활용한 학습용 타자 연습어플리케이션을 제안하였다. 현재는 정확한 내용을 추출하기 위해 제한된 사이트의 정보로 한정하고 있지만 원하는 정보를 효과적으로 추출할 수 있도록 기능 개선이 이루어진다면 더 많은 사이트에서 정확하고 필요한 내용만 추출하여 활용할 수 있을 것이다. 또한 학습에 도움이 되는 부가적인 기능을 구현한다면 학습 서비스를 위한 보다 견고한 시스템으로개선시킬 수 있을 것이다.

참고문헌

  1. C.N. Lee, Design and Implementation of an English Learning System Supporting Practice in Typing, Master's Thesis of Kyungnam University, 2001.
  2. S.C. Kim and J.T. Han, "Implementation of Korean/English Word Puzzle Game for Typing and Language Learning," Proceeding of the Conference of the Korea Association of Computer Education, pp. 257-262, 2010.
  3. B.J. In, S.M. Jun, S.J. Kim, Y.S. Yook, H.S. Park, and J.T. Kim, "App Development of Typing Practice based on Android OS using Uni-code," Proceeding of the Fall Conference of the Korea Institute of Information and Communication Engineering, pp. 357-358, 2012.
  4. Y.M. Lim, "The Mouse & Keyboard Control Application based on Smart Phone," Journal of Korea Multimedia Society, Vol. 20, No. 2, pp. 396-403, 2017. https://doi.org/10.9717/KMMS.2017.20.2.396
  5. Tkinter-Tcl/Tk Python Interface(2021), https://docs.python.org/ko/3/library/tkinter.html (accessed April 28, 2021).
  6. Requests: HTTP for Humans, https://docs.python-requests.org/en/master/ (accessed May 4, 2021).
  7. Beautiful Soup Documentation(2020), https://www.crummy.com/software/BeautifulSoup/ bs4/doc (accessed May 4, 2021).
  8. NLTK 3.6.2 documentation(2021), https://www.nltk.org/ (accessed May 12, 2021).
  9. KoNLPy: Korean NLP in Python(2019), https://konlpy.org/en/latest/ (accessed May 12, 2021).