목록으로
교육·학습을 위한 AI 활용
AI와 함께 만든 나만의 공부 타이머: 얼음 공부 타이머 제작기
AI와 함께, 시간이 지날수록 얼음이 녹는 웹 공부 타이머를 만들어 누구나 사용할 수 있게 공개한 학습 도구 제작 사례입니다.
🤖 활용 AI 도구
Muse
1. 왜 만들었나: 숫자로만 남은 시간을 보면 집중이 흐트러졌다
공부를 시작하려고 책상에 앉아도, 타이머의 숫자를 자꾸 확인하게 될 때가 있습니다. "아직도 40분이나 남았네"라는 생각이 들면 오히려 집중이 깨졌습니다. 그래서 남은 시간을 숫자로 압박감 있게 보여주기보다, 시간이 지나가는 모습을 눈으로 느낄 수 있는 타이머를 만들고 싶었습니다. 여기서 떠올린 이미지가 얼음이었습니다. 얼음은 시간이 지날수록 조금씩 작아지고, 아래에는 물웅덩이가 생깁니다. 공부가 끝나는 순간을 "얼음이 다 녹는 순간"으로 바꾸면, 타이머가 단순한 숫자판이 아니라 하나의 장면이 될 수 있다고 생각했습니다. 또 하나 더 욕심을 낸 점이 있습니다. 끝나는 시간을 정확히 모르게 만드는 것입니다. 목표 시간을 정하되 실제 집중 시간은 앞뒤로 조금 달라지게 하면, 사용자는 시계를 계산하기보다 지금 하는 공부에 더 집중할 수 있습니다. 얼음 공부 타이머는 이 두 가지 아이디어에서 출발했습니다.
2. 무엇을 만들었나: 얼음이 녹는 속도로 시간을 보여주는 웹 타이머
얼음 공부 타이머는 별도 설치 없이 웹 브라우저에서 바로 실행되는 공부 타이머입니다.
주요 기능은 다음과 같습니다.
1시간부터 8시간까지 1시간 단위로 목표 시간을 설정할 수 있습니다.
실제 집중 시간은 설정한 시간에서 ±30분 범위 안에서 무작위로 정해집니다. 예를 들어 2시간을 고르면 실제 시간은 1시간 30분에서 2시간 30분 사이에서 정해집니다.
시간이 지날수록 얼음이 작아지고, 균열이 더 잘 보이며, 아래 물웅덩이가 커집니다.
일시정지와 계속하기 기능을 사용할 수 있습니다.
실수로 종료하지 않도록 끝내기 버튼은 한 번 더 눌러 확인하는 방식으로 만들었습니다.
공부 중 화면이 꺼지지 않도록 화면 꺼짐 방지를 시도하고, 완료되면 알림음이 울립니다.
모바일 화면과 어두운 화면 모드에서도 보기 좋게 반응형으로 구성했습니다.
가장 중요하게 생각한 것은 "기능이 많은 타이머"가 아니라 "공부를 시작하고 끝까지 유지하게 돕는 타이머"였습니다. 그래서 화면에는 꼭 필요한 정보만 남기고, 얼음의 변화가 중심이 되도록 구성했습니다.
3. AI를 어떻게 활용했나
3-1. 아이디어를 기능으로 바꾸는 단계
처음부터 완성된 설계도가 있었던 것은 아닙니다. AI 어시스턴트와 대화하면서 막연한 생각을 실제 기능으로 바꿔 나갔습니다. 처음 요청은 단순했습니다. 공부 시간을 설정하면 얼음이 서서히 녹는 것처럼 보이는 웹 공부 타이머를 만들고 싶어. 시작, 일시정지, 리셋 버튼이 필요해. 이 요청을 바탕으로 타이머의 기본 구조가 만들어졌습니다. 이후에는 사용하면서 느낀 점을 하나씩 말하며 기능을 다듬었습니다.
3-2. 대표 프롬프트와 수정 과정
아래 프롬프트는 제작 과정에서 반복해서 사용한 요청 방식을 제출용으로 정리한 것입니다.
프롬프트 1: 기본 타이머 만들기
1시간부터 8시간까지 목표 시간을 고를 수 있는 공부 타이머를 만들어줘. 시간이 지날수록 얼음이 녹는 모습이 보이고, 시작·일시정지·다시 시작 버튼이 필요해. 이 단계에서는 시간 설정, 남은 시간 표시, 시작과 일시정지 같은 기본 흐름을 만들었습니다.
프롬프트 2: 랜덤 집중 시간 넣기
목표 시간을 정해도 실제 끝나는 시간은 ±30분 안에서 무작위로 정해지게 해줘. 사용자가 끝나는 시간을 계산하기보다 공부에 집중했으면 좋겠어. 이 요청으로 얼음 공부 타이머만의 핵심 규칙이 생겼습니다. 사용자는 목표의 크기는 정하지만, 정확한 종료 시각은 얼음이 정합니다.
프롬프트 3: 얼음이 녹는 느낌 살리기
시간이 지날수록 얼음이 작아지고 물웅덩이가 커지게 해줘. 얼음에 균열이 조금씩 더 보이게 하면 녹는 느낌이 더 살 것 같아.
이 단계에서 타이머는 단순한 진행률 표시를 넘어, 시간이 흐르는 장면을 보여주는 도구로 바뀌었습니다.
프롬프트 4: 실제 사용성 다듬기
공부 중에 화면이 꺼지지 않게 해주고, 끝나면 부드러운 알림음이 울리게 해줘. 실수로 끝내기 버튼을 누르지 않게 한 번 더 확인하는 방식이면 좋겠어.
이 요청을 통해 화면 꺼짐 방지, 완료 알림음, 종료 재확인 같은 실제 사용 기능이 들어갔습니다.
프롬프트 5: 모바일에서 쓰기 좋게 만들기
휴대폰에서도 얼음과 버튼이 잘 보이게 화면을 조정해줘. 어두운 모드에서도 눈이 편했으면 좋겠어.
이 과정을 거쳐 휴대폰과 컴퓨터, 밝은 모드와 어두운 모드에서 모두 사용할 수 있는 화면이 되었습니다.
3-3. AI가 한 일과 내가 한 일
AI는 코드의 초안을 빠르게 만들고, 오류가 생겼을 때 원인을 좁히고, 화면 구성을 바꾸는 데 도움을 줬습니다. 하지만 완성 여부는 AI의 말만으로 판단하지 않았습니다. 제가 직접 확인한 부분은 다음과 같습니다.
시작 버튼을 누르면 실제로 타이머가 흐르는지 확인했습니다.
일시정지를 누른 뒤 다시 시작했을 때 시간이 이어지는지 확인했습니다.
목표 시간을 바꿀 때 실제 집중 시간 범위가 함께 바뀌는지 확인했습니다.
얼음이 진행률에 맞춰 작아지고 물웅덩이가 커지는지 눈으로 확인했습니다.
휴대폰에서 버튼과 숫자가 잘리는 곳은 없는지 확인했습니다.
완료 화면과 알림음이 정상적으로 나오는지 확인했습니다.
AI가 코드를 만들어주는 것과 실제로 쓸 수 있는 도구가 되는 것은 달랐습니다. 버튼 하나를 눌러보고, 이상한 부분을 다시 말하고, 또 확인하는 과정이 반복되면서 결과물이 완성됐습니다.
4. 공개까지: 혼자 쓰는 도구에서 누구나 쓰는 도구로
처음에는 개인적으로 사용할 타이머였지만, 만들다 보니 다른 학생도 쓸 수 있겠다는 생각이 들었습니다. 그래서 GitHub Pages를 이용해 웹에 공개했습니다. 공개 주소는 다음과 같습니다.
https://dodobebetoto123-d.github.io/ice-study-timer/
설치할 앱도, 회원가입도 필요 없습니다. 링크를 열면 바로 목표 시간을 정하고 공부를 시작할 수 있습니다. 코드 저장소도 공개해 두어, 다른 사람이 구조를 보고 자신만의 타이머로 바꾸어 볼 수도 있습니다. 이 사례에서 중요하게 생각하는 성과는 거창한 숫자가 아닙니다. AI와의 대화로 만든 결과물이 실제로 열리고, 눌러보고, 공부 시간 동안 켜둘 수 있는 도구가 됐다는 점입니다. 아이디어가 말로만 끝나지 않고 링크 하나로 공유되는 경험이 가장 큰 결과였습니다.
5. 이 사례가 다른 학생에게도 도움이 되는 이유
얼음 공부 타이머의 제작 방식은 다른 학생도 따라 할 수 있습니다.
첫째, 처음부터 어려운 기술을 목표로 하지 않아도 됩니다. "공부할 때 불편한 점 하나"에서 시작하면 됩니다.
둘째, AI에게 한 번에 완벽한 결과물을 요구하지 않아도 됩니다. 기본 기능을 만들고, 직접 써보고, 불편한 점을 하나씩 고치는 방식이 더 현실적입니다.
셋째, 결과물을 공개하면 피드백을 받을 기회가 생깁니다. 링크 하나로 공유할 수 있기 때문에, 친구나 같은 반 학생이 써보고 느낀 점을 말해줄 수도 있습니다.
넷째, 이 방식은 공부 타이머에만 쓸 수 있는 방법이 아닙니다. 단어 암기, 발표 순서 정하기, 운동 시간 기록, 독서 시간 관리처럼 생활 속 작은 불편을 해결하는 도구로도 확장할 수 있습니다.
6. 아쉬운 점과 앞으로 바꾸고 싶은 점
아쉬운 점도 있습니다. 실제 집중 시간이 무작위로 정해지는 방식은 집중에는 도움이 될 수 있지만, 정해진 시간에 맞춰 공부해야 하는 사람에게는 부담이 될 수도 있습니다. 그래서 앞으로는 랜덤 모드와 정확한 타이머 모드를 선택할 수 있게 바꾸고 싶습니다. 또한 브라우저마다 화면 꺼짐 방지나 알림음 동작이 다를 수 있습니다. 이 부분은 여러 기기에서 더 테스트해봐야 합니다. 공부 기록을 남기는 기능도 추가하면, 하루에 몇 번 얼음을 녹였는지 돌아볼 수 있을 것입니다. 앞으로는 과목별 목표 시간을 저장하거나, 친구와 같은 시간에 얼음을 꺼내 함께 집중하는 기능도 넣어보고 싶습니다. 혼자 공부하더라도 누군가와 같은 목표를 향해 가는 느낌을 줄 수 있기 때문입니다.
7. AI를 책임 있게 사용하기 위해 지킨 점
이 제작 과정에서 개인정보는 입력하지 않았습니다. 이름, 학교, 연락처 같은 정보는 코드와 글에 포함하지 않았습니다. AI가 만든 코드를 그대로 믿지 않으려고 했습니다. 실행해보고, 버튼을 눌러보고, 휴대폰으로 열어보며 이상한 부분을 직접 확인했습니다. 공개 저장소에 올리기 전에는 어떤 내용이 공개되는지도 확인했습니다. 또한 이 글에서는 AI를 활용한 과정을 숨기지 않았습니다. 어떤 부분을 AI에게 요청했고, 어떤 부분을 직접 확인하고 결정했는지 구분해 적었습니다. AI를 쓴다는 것보다, AI가 만든 결과를 사람이 검토하고 책임지는 과정이 더 중요하다고 생각합니다.
8. 마무리: AI는 시작을 쉽게 만들고, 완성은 사람이 한다
얼음 공부 타이머를 만들면서 느낀 점은 AI가 코딩의 시작을 훨씬 쉽게 만들어준다는 것입니다. 만들고 싶은 모습을 말하면, AI가 그 생각을 화면과 코드로 바꾸는 출발점을 만들어줍니다. 하지만 거기서 끝나지는 않았습니다. 실제로 공부할 때 쓸 수 있는 도구가 되려면, 눌러보고, 기다려보고, 불편한 점을 찾고, 다시 고치는 과정이 필요했습니다. 그 과정은 AI가 대신해줄 수 없는 부분이었습니다. 그래서 이 사례의 핵심은 "AI가 다 만들었다"가 아닙니다. AI와 대화하며 아이디어를 실제 도구로 바꾸고, 직접 검증해 공개까지 마친 과정입니다. 공부를 돕는 작은 도구 하나에서 시작했지만, 그 과정 자체가 AI를 배우고 활용하는 공부가 됐습니다.
AI 활용 고지
본 사례의 웹앱 제작 과정에서는 AI 어시스턴트를 아이디어 정리, 코드 작성 보조, 오류 원인 파악, 화면 구성 수정에 활용했습니다. 최종 기능 확인과 공개 여부는 직접 실행하고 검토해 결정했습니다. 본 원고의 구성 정리에도 AI의 도움을 받았으며, 출품작 링크와 기능 설명은 실제 공개된 웹앱을 기준으로 확인했습니다.
공부를 시작하려고 책상에 앉아도, 타이머의 숫자를 자꾸 확인하게 될 때가 있습니다. "아직도 40분이나 남았네"라는 생각이 들면 오히려 집중이 깨졌습니다. 그래서 남은 시간을 숫자로 압박감 있게 보여주기보다, 시간이 지나가는 모습을 눈으로 느낄 수 있는 타이머를 만들고 싶었습니다. 여기서 떠올린 이미지가 얼음이었습니다. 얼음은 시간이 지날수록 조금씩 작아지고, 아래에는 물웅덩이가 생깁니다. 공부가 끝나는 순간을 "얼음이 다 녹는 순간"으로 바꾸면, 타이머가 단순한 숫자판이 아니라 하나의 장면이 될 수 있다고 생각했습니다. 또 하나 더 욕심을 낸 점이 있습니다. 끝나는 시간을 정확히 모르게 만드는 것입니다. 목표 시간을 정하되 실제 집중 시간은 앞뒤로 조금 달라지게 하면, 사용자는 시계를 계산하기보다 지금 하는 공부에 더 집중할 수 있습니다. 얼음 공부 타이머는 이 두 가지 아이디어에서 출발했습니다.
2. 무엇을 만들었나: 얼음이 녹는 속도로 시간을 보여주는 웹 타이머
얼음 공부 타이머는 별도 설치 없이 웹 브라우저에서 바로 실행되는 공부 타이머입니다.
주요 기능은 다음과 같습니다.
1시간부터 8시간까지 1시간 단위로 목표 시간을 설정할 수 있습니다.
실제 집중 시간은 설정한 시간에서 ±30분 범위 안에서 무작위로 정해집니다. 예를 들어 2시간을 고르면 실제 시간은 1시간 30분에서 2시간 30분 사이에서 정해집니다.
시간이 지날수록 얼음이 작아지고, 균열이 더 잘 보이며, 아래 물웅덩이가 커집니다.
일시정지와 계속하기 기능을 사용할 수 있습니다.
실수로 종료하지 않도록 끝내기 버튼은 한 번 더 눌러 확인하는 방식으로 만들었습니다.
공부 중 화면이 꺼지지 않도록 화면 꺼짐 방지를 시도하고, 완료되면 알림음이 울립니다.
모바일 화면과 어두운 화면 모드에서도 보기 좋게 반응형으로 구성했습니다.
가장 중요하게 생각한 것은 "기능이 많은 타이머"가 아니라 "공부를 시작하고 끝까지 유지하게 돕는 타이머"였습니다. 그래서 화면에는 꼭 필요한 정보만 남기고, 얼음의 변화가 중심이 되도록 구성했습니다.
3. AI를 어떻게 활용했나
3-1. 아이디어를 기능으로 바꾸는 단계
처음부터 완성된 설계도가 있었던 것은 아닙니다. AI 어시스턴트와 대화하면서 막연한 생각을 실제 기능으로 바꿔 나갔습니다. 처음 요청은 단순했습니다. 공부 시간을 설정하면 얼음이 서서히 녹는 것처럼 보이는 웹 공부 타이머를 만들고 싶어. 시작, 일시정지, 리셋 버튼이 필요해. 이 요청을 바탕으로 타이머의 기본 구조가 만들어졌습니다. 이후에는 사용하면서 느낀 점을 하나씩 말하며 기능을 다듬었습니다.
3-2. 대표 프롬프트와 수정 과정
아래 프롬프트는 제작 과정에서 반복해서 사용한 요청 방식을 제출용으로 정리한 것입니다.
프롬프트 1: 기본 타이머 만들기
1시간부터 8시간까지 목표 시간을 고를 수 있는 공부 타이머를 만들어줘. 시간이 지날수록 얼음이 녹는 모습이 보이고, 시작·일시정지·다시 시작 버튼이 필요해. 이 단계에서는 시간 설정, 남은 시간 표시, 시작과 일시정지 같은 기본 흐름을 만들었습니다.
프롬프트 2: 랜덤 집중 시간 넣기
목표 시간을 정해도 실제 끝나는 시간은 ±30분 안에서 무작위로 정해지게 해줘. 사용자가 끝나는 시간을 계산하기보다 공부에 집중했으면 좋겠어. 이 요청으로 얼음 공부 타이머만의 핵심 규칙이 생겼습니다. 사용자는 목표의 크기는 정하지만, 정확한 종료 시각은 얼음이 정합니다.
프롬프트 3: 얼음이 녹는 느낌 살리기
시간이 지날수록 얼음이 작아지고 물웅덩이가 커지게 해줘. 얼음에 균열이 조금씩 더 보이게 하면 녹는 느낌이 더 살 것 같아.
이 단계에서 타이머는 단순한 진행률 표시를 넘어, 시간이 흐르는 장면을 보여주는 도구로 바뀌었습니다.
프롬프트 4: 실제 사용성 다듬기
공부 중에 화면이 꺼지지 않게 해주고, 끝나면 부드러운 알림음이 울리게 해줘. 실수로 끝내기 버튼을 누르지 않게 한 번 더 확인하는 방식이면 좋겠어.
이 요청을 통해 화면 꺼짐 방지, 완료 알림음, 종료 재확인 같은 실제 사용 기능이 들어갔습니다.
프롬프트 5: 모바일에서 쓰기 좋게 만들기
휴대폰에서도 얼음과 버튼이 잘 보이게 화면을 조정해줘. 어두운 모드에서도 눈이 편했으면 좋겠어.
이 과정을 거쳐 휴대폰과 컴퓨터, 밝은 모드와 어두운 모드에서 모두 사용할 수 있는 화면이 되었습니다.
3-3. AI가 한 일과 내가 한 일
AI는 코드의 초안을 빠르게 만들고, 오류가 생겼을 때 원인을 좁히고, 화면 구성을 바꾸는 데 도움을 줬습니다. 하지만 완성 여부는 AI의 말만으로 판단하지 않았습니다. 제가 직접 확인한 부분은 다음과 같습니다.
시작 버튼을 누르면 실제로 타이머가 흐르는지 확인했습니다.
일시정지를 누른 뒤 다시 시작했을 때 시간이 이어지는지 확인했습니다.
목표 시간을 바꿀 때 실제 집중 시간 범위가 함께 바뀌는지 확인했습니다.
얼음이 진행률에 맞춰 작아지고 물웅덩이가 커지는지 눈으로 확인했습니다.
휴대폰에서 버튼과 숫자가 잘리는 곳은 없는지 확인했습니다.
완료 화면과 알림음이 정상적으로 나오는지 확인했습니다.
AI가 코드를 만들어주는 것과 실제로 쓸 수 있는 도구가 되는 것은 달랐습니다. 버튼 하나를 눌러보고, 이상한 부분을 다시 말하고, 또 확인하는 과정이 반복되면서 결과물이 완성됐습니다.
4. 공개까지: 혼자 쓰는 도구에서 누구나 쓰는 도구로
처음에는 개인적으로 사용할 타이머였지만, 만들다 보니 다른 학생도 쓸 수 있겠다는 생각이 들었습니다. 그래서 GitHub Pages를 이용해 웹에 공개했습니다. 공개 주소는 다음과 같습니다.
https://dodobebetoto123-d.github.io/ice-study-timer/
설치할 앱도, 회원가입도 필요 없습니다. 링크를 열면 바로 목표 시간을 정하고 공부를 시작할 수 있습니다. 코드 저장소도 공개해 두어, 다른 사람이 구조를 보고 자신만의 타이머로 바꾸어 볼 수도 있습니다. 이 사례에서 중요하게 생각하는 성과는 거창한 숫자가 아닙니다. AI와의 대화로 만든 결과물이 실제로 열리고, 눌러보고, 공부 시간 동안 켜둘 수 있는 도구가 됐다는 점입니다. 아이디어가 말로만 끝나지 않고 링크 하나로 공유되는 경험이 가장 큰 결과였습니다.
5. 이 사례가 다른 학생에게도 도움이 되는 이유
얼음 공부 타이머의 제작 방식은 다른 학생도 따라 할 수 있습니다.
첫째, 처음부터 어려운 기술을 목표로 하지 않아도 됩니다. "공부할 때 불편한 점 하나"에서 시작하면 됩니다.
둘째, AI에게 한 번에 완벽한 결과물을 요구하지 않아도 됩니다. 기본 기능을 만들고, 직접 써보고, 불편한 점을 하나씩 고치는 방식이 더 현실적입니다.
셋째, 결과물을 공개하면 피드백을 받을 기회가 생깁니다. 링크 하나로 공유할 수 있기 때문에, 친구나 같은 반 학생이 써보고 느낀 점을 말해줄 수도 있습니다.
넷째, 이 방식은 공부 타이머에만 쓸 수 있는 방법이 아닙니다. 단어 암기, 발표 순서 정하기, 운동 시간 기록, 독서 시간 관리처럼 생활 속 작은 불편을 해결하는 도구로도 확장할 수 있습니다.
6. 아쉬운 점과 앞으로 바꾸고 싶은 점
아쉬운 점도 있습니다. 실제 집중 시간이 무작위로 정해지는 방식은 집중에는 도움이 될 수 있지만, 정해진 시간에 맞춰 공부해야 하는 사람에게는 부담이 될 수도 있습니다. 그래서 앞으로는 랜덤 모드와 정확한 타이머 모드를 선택할 수 있게 바꾸고 싶습니다. 또한 브라우저마다 화면 꺼짐 방지나 알림음 동작이 다를 수 있습니다. 이 부분은 여러 기기에서 더 테스트해봐야 합니다. 공부 기록을 남기는 기능도 추가하면, 하루에 몇 번 얼음을 녹였는지 돌아볼 수 있을 것입니다. 앞으로는 과목별 목표 시간을 저장하거나, 친구와 같은 시간에 얼음을 꺼내 함께 집중하는 기능도 넣어보고 싶습니다. 혼자 공부하더라도 누군가와 같은 목표를 향해 가는 느낌을 줄 수 있기 때문입니다.
7. AI를 책임 있게 사용하기 위해 지킨 점
이 제작 과정에서 개인정보는 입력하지 않았습니다. 이름, 학교, 연락처 같은 정보는 코드와 글에 포함하지 않았습니다. AI가 만든 코드를 그대로 믿지 않으려고 했습니다. 실행해보고, 버튼을 눌러보고, 휴대폰으로 열어보며 이상한 부분을 직접 확인했습니다. 공개 저장소에 올리기 전에는 어떤 내용이 공개되는지도 확인했습니다. 또한 이 글에서는 AI를 활용한 과정을 숨기지 않았습니다. 어떤 부분을 AI에게 요청했고, 어떤 부분을 직접 확인하고 결정했는지 구분해 적었습니다. AI를 쓴다는 것보다, AI가 만든 결과를 사람이 검토하고 책임지는 과정이 더 중요하다고 생각합니다.
8. 마무리: AI는 시작을 쉽게 만들고, 완성은 사람이 한다
얼음 공부 타이머를 만들면서 느낀 점은 AI가 코딩의 시작을 훨씬 쉽게 만들어준다는 것입니다. 만들고 싶은 모습을 말하면, AI가 그 생각을 화면과 코드로 바꾸는 출발점을 만들어줍니다. 하지만 거기서 끝나지는 않았습니다. 실제로 공부할 때 쓸 수 있는 도구가 되려면, 눌러보고, 기다려보고, 불편한 점을 찾고, 다시 고치는 과정이 필요했습니다. 그 과정은 AI가 대신해줄 수 없는 부분이었습니다. 그래서 이 사례의 핵심은 "AI가 다 만들었다"가 아닙니다. AI와 대화하며 아이디어를 실제 도구로 바꾸고, 직접 검증해 공개까지 마친 과정입니다. 공부를 돕는 작은 도구 하나에서 시작했지만, 그 과정 자체가 AI를 배우고 활용하는 공부가 됐습니다.
AI 활용 고지
본 사례의 웹앱 제작 과정에서는 AI 어시스턴트를 아이디어 정리, 코드 작성 보조, 오류 원인 파악, 화면 구성 수정에 활용했습니다. 최종 기능 확인과 공개 여부는 직접 실행하고 검토해 결정했습니다. 본 원고의 구성 정리에도 AI의 도움을 받았으며, 출품작 링크와 기능 설명은 실제 공개된 웹앱을 기준으로 확인했습니다.
