클로드 아티팩트로 시각장애인에게 도움되는 접근성 슬라이드 만들기

배경 및 목적

얼마전 시각장애인 고등학교 청소년 친구들에게 두 번에 걸쳐 챗GPT 기본 사용법과 챗GPT를 활용한 글쓰기를 하는 수업을 진행했습니다.

첫 수업에서는 시각장애인 친구들에 대한 정보가 많이 없다보니 여러 유튜브를 찾아보며 강의안을 작성했는데, 생각보다 시각장애인들이 편하게 사용할 수 있도록 알려주는 것이 쉽지 않았습니다.

7월에 있었던 첫 번째 수업에서는 챗GPT의 개념과 프롬프트를 잘 사용하는 법,
음성으로 챗GPT를 사용하는 방법 등을 알려줄 수 있었고,
두번째 수업에서는 챗GPT를 활용해 책만들기 수업을 진행했습니다.

전맹인 친구들도 있기 때문에 너무 여러가지 도구를 사용하는 것은 어렵다는걸 알게되어
두번째 수업에서는 오픈카톡방을 사용했고, Askup 채널에 가입하도록 했습니다.
이 수업에 사용된 도구는 챗GPT, Askup, 오픈채팅방, 북크리에이터입니다.

필요한 자료와 예시 프롬프트를 넣어주고, 완성된 글은 카톡방에 복사해 올려두도록 하고
저와 보조강사님이 북크리에이터에 올리는 방식으로 수업을 진행했습니다.

아이들의 결과물은 이렇게 북크리에이터에 올려두었습니다.

수업을 마치고,
학생들이 수업내용을 복습할 수 있도록 접근성 페이지를 만들면 좋을 것 같았습니다.
슬라이드 내용을 읽어주는 페이지를 만들 수 있을까? 싶어 클로드 아티팩트로 시도해봤습니다.

참고 자료

지난번 드론님 발표에서 피아노 건반을 만들어 소리를 낼 수 있다는 부분을 알게되고,
테스트해보며 소리나는 것을 확인했던터라, 충분히 가능할 것 같았습니다.

테스트 해보실 분은 피아노 아래 링크에서 확인해보시면 되는데 조금 기다려야 소리가 납니다.

https://claude.site/artifacts/5fd6d238-42f9-45de-9931-68484cac7cca

활용 툴

초기에 클로드만 사용해서 기능이 가능한지 체크했고, 디자인 개선을 하며 버튼 제너레이터 사이트 활용

실행 과정

우선 테스트로 사용할 내용을 챗GPT에게 '챗GPT 프롬프트를 잘 사용하는 방법' 을 작성해달라고 요청했고, 이 내용을 클로드 프롬프트에 입력해 작성했습니다.

총 8개의 내용을 받았구요.

저시력 친구도 있고, 전맹 친구들도 있어 슬라이드에 너무 많은 내용보다는 한 페이지에 하나의 메세지만 들어가도록 하여 간단한 내용으로 슬라이드를 만들고, 내용을 읽어주는 버튼을 요청했습니다.

클로드 아티팩트에는 다음과 같이 요청했습니다.

처음에는 이런식으로 나옵니다.
슬라이드는 별로여도 읽어주기 기능은 구현되더라구요.
대신 상단 타이틀은 안읽어줘서 제목까지 읽어달라고 요청했습니다.

슬라이드마다 높이가 달라서 수정해달라고 여러번 요청했지만 말을 안들었구요.

또 여러번 시행착오를 거치다가 나중에는 픽셀을 고정해달라고 요청하고, 모바일에서 볼 때는 반응형으로 작성해달라고 요청했습니다.

높이 지정하고, 반응형으로 해달라고 해봤더니 괜찮아졌네요.

리액트로는 디자인의 한계가 느껴져 중간부터 html, css, 자바스크립트로 요청했구요.

조금 더 깔끔하게 나왔어요.

요렇게 까지 나왔었습니다.

여러 작업들을 거치다 제한수가 다해 나머지는 발표일 새벽에 조금 더 작업했습니다.

<시행착오.....>

샘플 예시를 작성해 올려주고 내용페이지 수정요청. 시행착오...오류...

중간에 슬라이드 디자인을 픽스한 후에는 버튼 제너레이터 사이트에서 css를 가져와 버튼 스타일 수정을 요청해봤구요.

요렇게까지 나왔습니다.

조금 나아진 것 같아요.

그 후에도 이런저런 요청들을 해봤는데 계속 에러가 나고, 원하는 결과가 안나와 최종적으로 작업을 마쳤습니다.

<최종작업 링크>

https://claude.site/artifacts/62030fda-3c0c-4fa9-a92d-17aa7b44ee8b

결과 및 인사이트

시각장애 학생들에게 수업을 해보며 접근성의 문제가 생각보다 크다고 느끼며, 최근에 접근성에 관해 관심이 많이 생겼습니다.

흡족하지는 않지만, 클로드 아트팩트로 슬라이드 생성과 읽어주기 기능구현이 가능했고, 슬라이드 디자인도 어느정도 잘 만들어 준 것 같아요.
아이들에게 복습 자료를 만들어 전달할 수 있을 것 같습니다.

2번의 수업동안 아이들이 잘 따라와주었지만 수업 시간에 못 끝낸 세명의 친구들이 있었어요. 늦게라도 올리면 북크리에이터 작업을 진행하겠다고 했는데요.

수업마친 후 저녁쯤 오픈카톡방에 학생들이 글을 올려줘서 얼마나 기특하던지...

북크리에이터에 작업한 후 최종 링크를 전달해주었는데, 좋아할지는 잘 모르겠네요. (표현이 따로 없는...ㅋ)
그래도 약간의 도음을 받았지만, 자신과 AI가 만든 첫 결과물이니 좋아할 것 같아요.

(이미지는 본인이 직접 만든 친구도 있고, 글을 요약해 이미지 프롬프트 요청을 제가 대신해서 작업한 친구들도 있어요. 그런데, 직접 만든 친구들의 이미지가 본인이랑 굉장히 비슷해서 샘들끼리 놀랐다는..^^;)

아이들 글을 읽는데 뭔지 모를 감동이... ^^;
짬나실 때 한 번 읽어보세요~ ^^

북크리에이터 링크가 모바일에서는 읽어주기 기능이 잘 안되지만, PC로 보시면 읽어주기 기능이 잘 됩니다.

<시각장애 친구들이 작업한 챗GPT로 책만들기 결과물>

제목 : 느림의 미학
작가 : 박준희 & AI
https://read.bookcreator.com/hjqXcPN3O0dcMAviv9Hk65NI5ci2/JjPhWc-dQa6LfY5q_Y9nLQ

제목 : 시간의 균열
작가 : 허재혁 & AI
https://read.bookcreator.com/yqpsYq9D4sg7TRqFExjx0hLc6A32/ukvoiLCuTUuk4LXGQfYZOg

제목 : 제임스와 포부트 할아버지의 특별한 여름
작가 : 전인준 & AI
https://read.bookcreator.com/hjqXcPN3O0dcMAviv9Hk65NI5ci2/VtMLo_NqT4KlRI03d6pLKg

제목 : 닫힌 마음의 문
작가 : 김시원 & AI
https://read.bookcreator.com/hjqXcPN3O0dcMAviv9Hk65NI5ci2/H5Dn45jDRhirySRwWKDgRA

제목 : 내가 그리는 길
작가 : 이완서 & AI
https://read.bookcreator.com/hjqXcPN3O0dcMAviv9Hk65NI5ci2/lkgdOVkDS4eAGwvxvAmrPg

(덧)

4주동안 김승우님이 잘 이끌어주셔서 클로드 아티팩트로 슬라이드만들기 스터디를 잘 마칠 수 있었습니다.

기간동안 커서와 넵킨도 알려주셔서 좋았어요. ^^

함께하신 스터디원 분들께도 감사드립니다. ^^

🔥<24기 AI 스터디> 9/21 모집 마감 🔥