* 위 스샷 파일(dictionary_search.html) 구글 드라이브 다운로드 링크: (여러 사람이 몰리면 막힐 수 있습니다. 그 경우 출처 링크(네이버 블로그)로 가서 다운로드 받으시기 바랍니다.)
https://drive.google.com/uc?export=download&id=16elWVr5m6mH9TVaDwJlGXLyntGzPhhKY
* 출처 링크: https://blog.naver.com/walire/223573986198
----------------
제가 예전에 영어책 집필할 때, 특정 단어, 숙어에 대한 의미, 예문 등을 다양한 사이트에서 검색할 필요가 있었는데, 그때 각각의 사이트에 가서 검색어를 입력하는 것이 너무 귀찮았습니다. 그래서, 엑셀로 링크 생성기를 만들어 사용했었는데, 이번에 그 엑셀파일을 html 파일로 만들어보았습니다.
사용법은 간단합니다. 위 html 파일을 다운로드 받은 후 열면 위 스샷과 같은 화면이 브라우저에서 열립니다. 검색창에 여러분이 원하는 단어나 숙어를 넣고 [엔터]를 치거나 확인 버튼을 누릅니다. 11종의 사전 링크가 생성되는데 링크를 클릭하면 새탭에서 열립니다. 아래는 Longman (dream)을 클릭했을 때의 화면입니다. (사실 사용자 입장에서 가장 편리한 건, 링크를 클릭하면 새탭이 아니라, 링크 오른쪽에 해당 사이트가 바로 뜨는 임베딩(embedding) 방식인데, 대부분의 사이트에서는 이러한 iframe 임베딩을 금지하고 있습니다. 제 파일에 포함된 11종 사이트 역시 이를 금지합니다.)
링크 중 Sketch 엔진이나 Thesaurus 사전은 생소하실 수 있는데, 직접 클릭해보시기 바랍니다.
사실 위 html 파일은 영어선생님이나 영어 교재개발자가 아니면 그리 유용하지 않을 수 있습니다. 하지만, 아래와 같은 생각할 거리를 줄 수 있습니다.
두서없이 적어봅니다.
엑셀 파일은 MS 엑셀이 있어야 열 수 있지만, html 파일은 브라우저가 있는 모든 기기에서 간편하게 열 수 있습니다.
첨부파일과 같이 인터넷 서버와 연동되지 않는 개별 html 파일도 브라우저에서 북마크해놓을 수 있습니다. 크롬의 경우 url 오른쪽에 있는 별표를 체크하거나 Ctrl + D를 누르면 북마크할 수 있습니다. 엑셀의 경우 해당 파일이 있는 폴더로 들어가 더블클릭을 해야 열리지만, html 파일의 경우 북마크에서 클릭하면 간편하게 열립니다.
MS엑셀의 경우 각각의 사용자가 자기 니즈에 맞게 쉽게 수정할 수 있는 반면 html은 코드에 대한 어느 정도 지식이 있어야 가능합니다. 하지만, Chat GPT가 나오면서 코드를 전혀 모르는 사람도 GPT에게 자기 요청 사항을 얘기하고 코드를 수정해달라고 할 수 있습니다.
html 첨부는 유료 GPT에서만 가능한데, 무료를 사용하고 계신 경우 dictionary_search.html을 메모장에서 연 후, 그 전부를 복사하여 아래와 같이 prompt 창에 붙여넣기 하시기 바랍니다. (다만, 너무 긴 html의 경우 글자수 제한에 걸릴 수 있습니다.)
물론, html이나 css를 조금이라도 아시는 분은 GPT의 도움 없이 html 파일을 윈도우 메모장이나 전용 editor에서 열어 바로 수정하실 수 있습니다. 아래는 메모장으로 html 코드를 연 모습인데, 여기에서 lightgreen을 lightyellow로 바꿔보시기 바랍니다.
코드를 전혀 모르지만 좀 도전적인 분들은 11종의 리스트 외에 다른 사전 링크를 추가해보시기 바랍니다. 힌트를 좀 드리자면, 어느 사이트에서 특정 단어를 검색했을 때 나타나는 url을 GPT에게 알려주면서 이 사이트를 추가해달라고 해야 합니다. 예를 들어, youtube의 경우 dream을 검색하면 url은 https://www.youtube.com/results?search_query=dream 로 변합니다.
GPT의 도움으로 사전 링크를 생성하는 것과는 전혀 다른 간단한 웹페이지를 하나 만들어보시기 바랍니다.
혹시 코드만 알려주고 다운로드 링크를 주지 않으면, 알려준 코드를 복사하여 메모장에 붙여넣기 하고 파일 이름을 하나 정하여 저장해주시기 바랍니다. (예, abc.html)
여러분의 상상력을 발휘해보시기 바랍니다. 아이가 있는 집에서는, 화면에 1~3개의 질문 버튼을 표시하고, 그중 하나를 클릭하면 대답을 하는 웹페이지를 만들어보실 수 있습니다.
<질문 버튼 예시>
거울아, 거울아, 세상에서 가장 예쁜 아이가 누구야? / (자기 아이 이름 답하게 함 ^^) (거울 이미지 웹페이지에 포함시킬 수도; 구체적인 방법은 GPT에게 문의 바람)
2~9까지 버튼 8개 만들고, 그중 하나 클릭하면 해당 숫자의 구구단을 출력하게 함 (구구단을 배우는 아이가 있는 집에서 추천; 3을 누르면 3단이 화면에 나와야)
GPT가 나오면서 코딩 입문에 대한 허들이 많이 낮아졌습니다.
예전에는 html, css, javascript를 배울 때, 기초부터 차근차근 배우는 게 대세였다면, 이제 GPT에게 아주 간단하지만 실용적인 코드를 하나 짜달라고 하고, 이 코드를 살펴보고, 이 코드에서 무언가를 바꿀 때 어떤 게 변화되는지를 관찰하는 것으로 시작할 수 있습니다. 이런 활동을 통하여 부담없는 시행착오를 한 후 체계적인 수업/인강을 들으면, 그렇지 않을 때보다 수업에 대한 집중도가 올라갑니다. (특히 아이가 있는 가정에서는 부모님이 아이와 함께 이러한 활동을 해봄으로써 코딩을 더 친숙하게 접할 수 있습니다. )
코드의 각 라인에 대한 설명을 원하는 경우, 코드와 함께 아래와 같은 prompt를 GPT에 입력하면 친절하게 알려줍니다.
Prompt> 아래 HTML 코드의 각 줄을 차례대로 아주 쉽게 설명해주세요. 코딩을 전혀 모르는 사람도 이해할 수 있도록, 기본 개념부터 설명해 주세요.
------
(html 코드)
그럼 이만....
감사합니다.