목록으로
교육·학습을 위한 AI 활용
[focus with me]친구와 함께 쓰는 집중 타이머 위젯
매일 할 일을 등록해 과제·과목별 집중 시간을 측정하고, 같은 방 친구와 실시간으로 공유하며, 하루치 완료 기록으로 남기는 데스크톱 위젯
🤖 활용 AI 도구
Chat GPT, Claude code
① 만들게 된 계기?
공부하는 학생이 유튜브 스터디윗미나 디스코드 화면공유를 켜 두는 이유는 감시받기 위해서가 아니다.
약한 상호 책임감 때문이다. 옆에 누가 있으면 딴짓을 덜 한다. 그뿐이다.
그런데 그 효과를 얻기 위해 카메라를 키기 위해 세팅을 해야 하는 등 신경써야 할 것이 너무 많다.
반대로 흔한 집중 타이머 앱들은 이러한 수고는 없지만 혼자다. 뽀모도로 25분을 재 주는 것 이상은 하지 않는다.
기록은 남지만 그 기록을 보는 사람은 나 하나이고, 그래서 안 켜도 그만이다.
이 앱은 그 사이를 노렸다.
'study with me'의 효과만 남기고 비용은 화면 구석 285px로 줄인다.
카메라도 마이크도 없다. 방 코드 하나만 친구와 맞추면 서로가 지금 무엇을 얼마나 하고 있는지 실시간으로 보인다.
② 활용한 AI와 역할?
역할을 나눠서 두 개의 AI를 썼다. 디자인은 ChatGPT, 개발은 Claude Code.
2.1 ChatGPT : 캐릭터 설계와 디자인 전량
개발보다 먼저 막힌 것이 그림이었다. 위젯의 절반은 캐릭터가 차지하는 구조인데, 그림을 그릴 줄 몰랐다.
먼저, '공부하는 사람 옆에 있어도 부담스럽지 않은 존재'라는 조건에서 출발해 Chatgpt를 활용해 동물·표정·자세의 방향을 잡았다.
할 일을 등록할 때마다 다른 고양이 캐릭터가 배정되도록 36장을 뽑았고 자세와 소품이 조금씩 다른 같은 고양이여야 했기 때문에, 하나를 뽑고 끝내는 것이 아니라 동일한 캐릭터성을 유지한 채 변주를 반복 생성하는 방식으로 작업했다.
2.2 Claude Code : 개발 전 과정
코딩은 Claude Code로 진행했다.
- 먼저 원하는 기능과 목적, 전체적인 UI를 적고 필요한 기능을 문서화 하였다.
- 직접 친구와 함께 테스트를 해보며 '집중모드', '창 투명도 및 크기 조절', '캐릭터 모션 수정', '친구 온라인 상태 표시', '완료 시 응원 메세지 표시' 등의 기능을 추가해갔다.
- 검증을 자동화했다. AI를 활용해 화면을 오프스크린으로 띄워 41개 항목을 자동 검사했다. 레이아웃 오버플로, 타이머 증가, 친구 타이머의 시각 복원, 실시간 크기 변경, 오프라인 판정 규칙까지 확인하고 스크린샷을 남긴다. 손으로 확인했다면 창 크기가 5px 어긋나 있던 문제 같은 것은 계속 새어 나갔을 것이다.
2.3 Claude Code : API 연결 및 보안 강화
친구와 실시간으로 상태를 주고받으려면 서버가 필요한데 서버를 직접 만들 수는 없었다. 이 부분에서 AI의 도움이 결정적이었다.
- 먼저 AI에게 요청하여 선택지를 비교해 주는 단계부터 시작했다. 의논 결과, 실시간 동기화, 무료 한도, 개인 프로젝트라는 조건에서 Firebase Realtime Database를 골랐다.
- 웹 앱 등록 → 설정값 발급 → 'firebase-config.js'에 채우기까지 연결 절차에 대한 배경 지식이 전무했지만 AI의 도움을 받아 콘솔의 어느 메뉴에서 무엇을 눌러야 하는지 단계별로 따라가며 진행했다. 공식 문서만 보고 혼자 했다면 며칠이 걸렸을 부분이 반나절에 끝났다.
- 보안을 위해 설정 파일을 분리했다. 개인 API 키가 그대로 저장소에 올라가지 않도록 firebase-config.example.js와 실제 설정 파일을 분리하고 .gitignore에 등록하는 처리까지 함께 했다.
- API가 없어도 동작하게 만들었다. 설정 파일이 없거나 깨져도 앱이 종료되지 않고 혼자 쓰기 모드로 진입하도록 했다. 집중 타이머의 취지를 살리고자 외부 서비스는 부가 기능이지 전제 조건이 아니라는 원칙을 코드로 강제했다.
③ 활용 결과 (사진 첨부)
만들 수 없던 것을 만들었다
- 디자이너 없이 캐릭터 36종과 UI 전체를 확보했다.
- 서버 개발 경험 없이 실시간 동기화되는 데스크톱 앱을 완성했다.
- 기획 → 구현 → 실사용 검증 → 회귀 수정의 4단계 사이클을 혼자 돌렸다.
또한, AI를 검증 없이 쓰면 안 된다는 것을 배웠다
AI의 판단이 틀린 경우도 있었다. 자동으로 창이 뜨는 경로를 정리할 때 필요한 경로까지 같이 제거해서 할 일이 하나도 없을 때 입력창이 안 뜨는 문제가 생겼다. 실사용 테스트에서 발견해 복원했다. AI가 낸 답을 실제로 써 보고 판정하는 과정이 반드시 필요하고 사람이 직접 손으로 실행해봐야 불편한 점을 캐치할 수 있다는 것을 배웠다.
마지막으로 만든 앱을 직접 쓰면서 생긴 변화도 있다. 학습 습관이 데이터로 바뀌었다.
내 일정을 보다 더 체계적으로 관리할 수 있게 되었다. 할 일별로 시간을 재기 시작하자 수학 82분, 영어 단어 암기 34분, 국어 모의고사 풀기 80분처럼 실제 집중 시간과 불 필요한 소요 시간을 확인할 수 있었다.
④ 나만의 차별점과 개선포인트?
- 친구와 공유되는 타이머
이 앱의 핵심 기능이다. 혼자 시간을 재는 앱은 이미 많다. 이 앱은 같은 방 코드를 쓰는 사람끼리 서로의 타이머가 보인다. 완료 기록도 공유되어 친구가 오늘 무엇을 몇 분에 끝냈는지 탭 하나로 확인할 수 있다.
- 집중 모드, 나만 보기
집중 모드는 친구 카드만 전부 숨긴다. 방에는 그대로 남아 있으므로 내 상태는 친구에게 계속 보인다. 화면의 방해는 받지 않으면서 계속 참여할 수 있는 장치이다. 친구에게 보여주기 싫은 할 일도 존재한다. 그런 경우에 해당 할 일만 '나만 보기'를 체크해 내 로컬에서만 카운트되는 타이머를 추가할 수 있다.
- 목적에 맞게 커스텀하여 쓰는 위젯
친구의 타이머가 방해가 된다 : 집중 모드
화면을 비우고 싶다 : 창 내리기 (인강을 전체화면으로 볼 때, 화면을 공유할 때, 문제를 풀 때타이머를 끄지 않고도 방해받지 않을 수 있다.)
눈에 덜 띄었으면 한다 : 불투명도 조절
이 할 일은 감추고 싶다 : 나만 보기
기록은 나만 보고 싶다 : 완료 목록 비공개
중요한 것은 어느 것도 연결을 끊지 않는다는 점이다. 부담은 줄이되 함께 있는 상태는 유지된다.
- 완료하면 뜨는 무작위 응원 메시지
할 일을 완료하면 "오늘의 한마디" 와 함께 응원 문구가 3초간 뜬다. "잘했어요! 계속 이 속도로 🔥", "오늘도 착실하게 달성 중! ✅" 같은 것들이 준비되어 있고 매번 무작위로 뽑힌다.
작은 장치지만 완료가 기록으로만 끝나지 않도록 한다. 목록에 한 줄 추가되고 마는 것과 뭔가 반응이 돌아오는 것은 다음 할 일을 시작하게 만드는 힘이 다르다. 매번 다르게 주어 계속 새로운 할 일을 완료하고 싶어지도록 설계했다.
⑤ 다른 사람도 따라 할 수 있나요?
개발 지식이 전혀 필요 없다.
1. 설치 파일(exe)을 받아 실행한다. 자동으로 바탕화면에 바로가기가 생성된다.
2. 첫 실행에서 닉네임과 방 코드를 입력한다.
3. 함께 공부할 친구에게 방 코드만 알려 준다. 같은 코드를 쓰는 사람끼리 서로의 진행 상황이 보인다.
계정 가입도, 로그인도, 친구 추가도 없다. 방 코드 문자열 하나가 전부다.
방 코드를 비워 두면 혼자 쓰기 모드로 동작하기 때문에 같이 쓸 친구가 없어도 그냥 타이머로 쓸 수 있다.
공부하는 학생이 유튜브 스터디윗미나 디스코드 화면공유를 켜 두는 이유는 감시받기 위해서가 아니다.
약한 상호 책임감 때문이다. 옆에 누가 있으면 딴짓을 덜 한다. 그뿐이다.
그런데 그 효과를 얻기 위해 카메라를 키기 위해 세팅을 해야 하는 등 신경써야 할 것이 너무 많다.
반대로 흔한 집중 타이머 앱들은 이러한 수고는 없지만 혼자다. 뽀모도로 25분을 재 주는 것 이상은 하지 않는다.
기록은 남지만 그 기록을 보는 사람은 나 하나이고, 그래서 안 켜도 그만이다.
이 앱은 그 사이를 노렸다.
'study with me'의 효과만 남기고 비용은 화면 구석 285px로 줄인다.
카메라도 마이크도 없다. 방 코드 하나만 친구와 맞추면 서로가 지금 무엇을 얼마나 하고 있는지 실시간으로 보인다.
② 활용한 AI와 역할?
역할을 나눠서 두 개의 AI를 썼다. 디자인은 ChatGPT, 개발은 Claude Code.
2.1 ChatGPT : 캐릭터 설계와 디자인 전량
개발보다 먼저 막힌 것이 그림이었다. 위젯의 절반은 캐릭터가 차지하는 구조인데, 그림을 그릴 줄 몰랐다.
먼저, '공부하는 사람 옆에 있어도 부담스럽지 않은 존재'라는 조건에서 출발해 Chatgpt를 활용해 동물·표정·자세의 방향을 잡았다.
할 일을 등록할 때마다 다른 고양이 캐릭터가 배정되도록 36장을 뽑았고 자세와 소품이 조금씩 다른 같은 고양이여야 했기 때문에, 하나를 뽑고 끝내는 것이 아니라 동일한 캐릭터성을 유지한 채 변주를 반복 생성하는 방식으로 작업했다.
2.2 Claude Code : 개발 전 과정
코딩은 Claude Code로 진행했다.
- 먼저 원하는 기능과 목적, 전체적인 UI를 적고 필요한 기능을 문서화 하였다.
- 직접 친구와 함께 테스트를 해보며 '집중모드', '창 투명도 및 크기 조절', '캐릭터 모션 수정', '친구 온라인 상태 표시', '완료 시 응원 메세지 표시' 등의 기능을 추가해갔다.
- 검증을 자동화했다. AI를 활용해 화면을 오프스크린으로 띄워 41개 항목을 자동 검사했다. 레이아웃 오버플로, 타이머 증가, 친구 타이머의 시각 복원, 실시간 크기 변경, 오프라인 판정 규칙까지 확인하고 스크린샷을 남긴다. 손으로 확인했다면 창 크기가 5px 어긋나 있던 문제 같은 것은 계속 새어 나갔을 것이다.
2.3 Claude Code : API 연결 및 보안 강화
친구와 실시간으로 상태를 주고받으려면 서버가 필요한데 서버를 직접 만들 수는 없었다. 이 부분에서 AI의 도움이 결정적이었다.
- 먼저 AI에게 요청하여 선택지를 비교해 주는 단계부터 시작했다. 의논 결과, 실시간 동기화, 무료 한도, 개인 프로젝트라는 조건에서 Firebase Realtime Database를 골랐다.
- 웹 앱 등록 → 설정값 발급 → 'firebase-config.js'에 채우기까지 연결 절차에 대한 배경 지식이 전무했지만 AI의 도움을 받아 콘솔의 어느 메뉴에서 무엇을 눌러야 하는지 단계별로 따라가며 진행했다. 공식 문서만 보고 혼자 했다면 며칠이 걸렸을 부분이 반나절에 끝났다.
- 보안을 위해 설정 파일을 분리했다. 개인 API 키가 그대로 저장소에 올라가지 않도록 firebase-config.example.js와 실제 설정 파일을 분리하고 .gitignore에 등록하는 처리까지 함께 했다.
- API가 없어도 동작하게 만들었다. 설정 파일이 없거나 깨져도 앱이 종료되지 않고 혼자 쓰기 모드로 진입하도록 했다. 집중 타이머의 취지를 살리고자 외부 서비스는 부가 기능이지 전제 조건이 아니라는 원칙을 코드로 강제했다.
③ 활용 결과 (사진 첨부)
만들 수 없던 것을 만들었다
- 디자이너 없이 캐릭터 36종과 UI 전체를 확보했다.
- 서버 개발 경험 없이 실시간 동기화되는 데스크톱 앱을 완성했다.
- 기획 → 구현 → 실사용 검증 → 회귀 수정의 4단계 사이클을 혼자 돌렸다.
또한, AI를 검증 없이 쓰면 안 된다는 것을 배웠다
AI의 판단이 틀린 경우도 있었다. 자동으로 창이 뜨는 경로를 정리할 때 필요한 경로까지 같이 제거해서 할 일이 하나도 없을 때 입력창이 안 뜨는 문제가 생겼다. 실사용 테스트에서 발견해 복원했다. AI가 낸 답을 실제로 써 보고 판정하는 과정이 반드시 필요하고 사람이 직접 손으로 실행해봐야 불편한 점을 캐치할 수 있다는 것을 배웠다.
마지막으로 만든 앱을 직접 쓰면서 생긴 변화도 있다. 학습 습관이 데이터로 바뀌었다.
내 일정을 보다 더 체계적으로 관리할 수 있게 되었다. 할 일별로 시간을 재기 시작하자 수학 82분, 영어 단어 암기 34분, 국어 모의고사 풀기 80분처럼 실제 집중 시간과 불 필요한 소요 시간을 확인할 수 있었다.
④ 나만의 차별점과 개선포인트?
- 친구와 공유되는 타이머
이 앱의 핵심 기능이다. 혼자 시간을 재는 앱은 이미 많다. 이 앱은 같은 방 코드를 쓰는 사람끼리 서로의 타이머가 보인다. 완료 기록도 공유되어 친구가 오늘 무엇을 몇 분에 끝냈는지 탭 하나로 확인할 수 있다.
- 집중 모드, 나만 보기
집중 모드는 친구 카드만 전부 숨긴다. 방에는 그대로 남아 있으므로 내 상태는 친구에게 계속 보인다. 화면의 방해는 받지 않으면서 계속 참여할 수 있는 장치이다. 친구에게 보여주기 싫은 할 일도 존재한다. 그런 경우에 해당 할 일만 '나만 보기'를 체크해 내 로컬에서만 카운트되는 타이머를 추가할 수 있다.
- 목적에 맞게 커스텀하여 쓰는 위젯
친구의 타이머가 방해가 된다 : 집중 모드
화면을 비우고 싶다 : 창 내리기 (인강을 전체화면으로 볼 때, 화면을 공유할 때, 문제를 풀 때타이머를 끄지 않고도 방해받지 않을 수 있다.)
눈에 덜 띄었으면 한다 : 불투명도 조절
이 할 일은 감추고 싶다 : 나만 보기
기록은 나만 보고 싶다 : 완료 목록 비공개
중요한 것은 어느 것도 연결을 끊지 않는다는 점이다. 부담은 줄이되 함께 있는 상태는 유지된다.
- 완료하면 뜨는 무작위 응원 메시지
할 일을 완료하면 "오늘의 한마디" 와 함께 응원 문구가 3초간 뜬다. "잘했어요! 계속 이 속도로 🔥", "오늘도 착실하게 달성 중! ✅" 같은 것들이 준비되어 있고 매번 무작위로 뽑힌다.
작은 장치지만 완료가 기록으로만 끝나지 않도록 한다. 목록에 한 줄 추가되고 마는 것과 뭔가 반응이 돌아오는 것은 다음 할 일을 시작하게 만드는 힘이 다르다. 매번 다르게 주어 계속 새로운 할 일을 완료하고 싶어지도록 설계했다.
⑤ 다른 사람도 따라 할 수 있나요?
개발 지식이 전혀 필요 없다.
1. 설치 파일(exe)을 받아 실행한다. 자동으로 바탕화면에 바로가기가 생성된다.
2. 첫 실행에서 닉네임과 방 코드를 입력한다.
3. 함께 공부할 친구에게 방 코드만 알려 준다. 같은 코드를 쓰는 사람끼리 서로의 진행 상황이 보인다.
계정 가입도, 로그인도, 친구 추가도 없다. 방 코드 문자열 하나가 전부다.
방 코드를 비워 두면 혼자 쓰기 모드로 동작하기 때문에 같이 쓸 친구가 없어도 그냥 타이머로 쓸 수 있다.
