한줄 요약
MS Family Safety 오류와 아들의 게임 시간 약속 불이행에 지쳐,
Claude Code로 하루 만에 직접 로블록스 타이머 앱을 만들기 시작
바쁘시면 이것만 읽어도 돼요:
Claude Code로 아이디어 인터뷰 → PRD → 앱 구현까지 하루에 완성
머릿속 아이디어를 말로 설명하면 AI가 문서 작업 없이 기획서 수준으로 정리해준다
원하는 화면을 구체적으로 묘사하는 것이 핵심 — "FPS 오버레이처럼" 한 문장이 UI 방향을 바꿨다
타이머·팝업 UI는 원하는 모양이 나올 때까지 수십 번 수정이 오갔다 — 이 과정을 각오해야 한다
범위를 먼저 결정해야 완성할 수 있다 — 처음엔 풀 기능을 원했지만 Phase 1만 하기로 결정한 것이 완성의 열쇠
아직 배포 전이지만, 이제 말 대신 앱이 규칙을 집행한다
이런 분들께 도움돼요
자녀의 게임 시간 때문에 매일 스트레스받는 부모
기존 자녀 보호 앱(MS Family Safety 등)이 오류가 잦아 불만인 분
AI 코딩 도구로 내 문제를 직접 해결해보고 싶은 비개발자
---
문제 상황 (Before)
우리 집 아들은 로블록스를 정말 좋아합니다. 문제는 약속한 게임 시간을 칼같이 지키는 경우가 별로 없어서 맨날 실갱이 중이네요.
처음엔 MS Family Safety로 해결하려 했습니다. Windows에 내장된 자녀 보호 기능으로 게임 시간을 제한할 수 있거든요. 그런데 오류가 너무 잦았습니다. 설정한 시간 제한이 갑자기 풀리거나, 앱이 제대로 동작하지 않는 경우가 반복됐습니다.
결국 돌아오는 건 매일 반복되는 구두 협상이었습니다. "한 시간만 하기로 했잖아." "조금만 더요." 이 대화가 매일 쌓이다 보니 정말 지쳤습니다.
그러다 GPTers 22기, 클코 끝판왕....토요일 웹앱 실습에서 "이걸 만들어보자"는 생각이 딱 맞아떨어졌습니다. 오류 없이 돌아가고, 아들이 멋대로 끌 수도 없고, 시간이 되면 게임을 강제 종료하는 앱. 이왕 하는 거 내가 원하는 대로 만들기로 했습니다.
사용한 도구
도구: Claude Code (GPTers 토요일 실습 세션), GPtaku 님의 막강 스킬 풀세트
-> 하네스로 완벽하게 세팅해주심 : 인터뷰->PRD->병렬실행 등등모델: Claude Sonnet
결과물: Electron 데스크탑 앱 (Windows 11 타겟)
특이사항: 맥북으로 개발해서 아들 Windows PC에 배포 예정
작업 과정
아이디어를 PRD로 — 10라운드 인터뷰
개발보다 기획이 먼저였습니다. 막연하게 "로블록스 시간 관리 앱을 만들고 싶다"는 생각만 있었는데, Claude Code가 질문을 하나씩 던지면서 구체화해줬습니다.
어떤 유형의 웹앱을 만들고 싶으세요?여기서 저는 "자녀의 로블록스 게임 시간을 관리하고 통제하는 앱"이라고 직접 입력했습니다. 이후 Claude가 연달아 질문을 이어갔습니다. 사용자가 누구인지, 언제 쓰는지, 뭐가 가장 문제인지, 첫 화면에서 반드시 되어야 할 기능이 무엇인지.
10라운드 인터뷰가 끝나니 PRD 파일 4개가 만들어져 있었습니다. 내가 따로 문서 작업을 한 게 아니라, 질문에 답하다 보니 기획서가 생긴 겁니다.
"아들이 엄청 화낼 것 같은데" — FPS 오버레이 타이머 탄생
처음 만들어진 타이머 화면은 커다란 풀스크린 UI였습니다. 게임 중에 이게 뜨면 화면이 완전히 가려집니다. 보자마자 바로 알았습니다.
실제 사용할 타이머 화면을 보여줘야하는거 아냐??
저런 화면이 게임 중간에 뜨면 화면이 가려서 아들이 엄청 화낼꺼 같은데?
오버레이 화면으로 반투명으로 띄우기로 했었잖아!!그 이후로 타이머 방향이 완전히 바뀌었습니다. 게임 화면 위에 살짝 떠 있는 작은 위젯. FPS 게임에서 프레임 수치가 우측 상단에 작게 뜨는 것처럼요.
게임에서 FPS 오버레이 화면처럼 숫자만 반투명으로 보여지는게 좋을꺼 같아여기서 또 디테일 작업이 시작됐습니다. 폰트를 전자시계 스타일(DSEG7)로 바꾸고, 배경 투명도를 조정하고, 박스 모양을 직사각형으로 고정하고, 숫자 색상이 남은 시간에 따라 초록 → 노랑 → 주황 → 빨강으로 바뀌도록 만들었습니다.
이 과정이 생각보 다 훨씬 길었습니다. 원하는 모양이 나올 때까지 정말 많은 수정이 오갔습니다.
수십 번의 수정 — 타이머와 팝업 UI
솔직히 말하면, 타이머 화면과 경고 팝업 창 형태를 잡는 데 가장 많은 시간이 걸렸습니다.
박스 배경을 더 투명하게, 가로 선이 울퉁불퉁하다, 폰트를 전자시계로, 박스를 직사각형으로…작은 디테일 하나하나를 말로 설명하고 결과를 보고 다시 수정하는 과정이 반복됐습니다.
경고 팝업도 마찬가지였습니다.
경고창 실제처럼 화면 가운데 띄워달라니깐?원하는 동작을 정확히 이해시키기까지 꽤 많은 대화가 필요했습니다. AI가 이해를 못한 게 아니라, 내가 원하는 걸 정확히 말로 표현하는 것 자체가 쉽지 않았습니다.
최종 완성된 경고 팝업의 동작은 이렇습니다:
5분·3분·30초 전: 타이머가 화면 우측 상단에서 정중앙으로 이동 → 경고 메시지 4초 표시 → 원위치 복귀
10초부터 0초까지: 화면 중앙에서 카운트다운 유지
0초: "게임 셧다운..." 메시지와 함께 로블록스 강제 종료
게임 방해 없이, 그러나 확실하게
경고 팝업을 설계하면서 가장 신경 쓴 부분은 균형이었습니다. 게임을 방해해서는 안 되지만, 확실히 알려야 합니다.
게임 중에는 당연히 남은 시간 타이머가 게임을 방해하지 않는 선에서
우측 상단에 불투명으로 보여줘야하고, 경고 팝업은..게임 중에 화면 중간에
잠깐 띄워주되 마찬가지로 게임을 방해하지 않는 반투명 화면으로 3초간
띄워주고 사라진다.그리고 중요한 결정이 하나 더 있었습니다. 정지 버튼을 없앴습니다. 아들이 멋대로 타이머를 멈출 수 없어야 한다는 것이 처음부터 명확한 요구사항이었습니다.
결과 (After)
Before vs After
항목
Before
After
게임 시간 관리
MS Family Safety (오류 잦음) + 말로 협상
앱이 직접 타이머 실행 + 자동 강제 종료
경고 방식
부모가 직접 들어가서 말함
5분·3분·30초·10초 전 자동 팝업
아들의 임의 조작
가능 (설정 우회 시도)
정지 버튼 없음, 종료 불가
게임 종료
협상 후 자발적 종료
시간 되면 로블록스 자동 강제 종료
결과물
Electron 데스크탑 앱 (Windows 11 타겟)
우측 상단 반투명 DSEG7 전자시계 타이머
경고 팝업 (중앙 이동 → 4초 → 복귀)
로블록스 프로세스 강제 종료
게임 세션 기록 (JSON)
아직 아들 PC에 배포 전입니다. 이제 말 대신 앱이 규칙을 집행합니다.
이 과정에서 배운 AI 활용 팁
효과적이었던 것
아이디어를 말로 설명하면 AI가 PRD를 대신 만들어준다 — 기획 문서를 따로 작성할 필요가 없었습니다. 질문에 답하다 보니 기획서가 완성됐습니다.
원하는 화면을 최대한 구체적으로 묘사하라 — "FPS 오버레이처럼"이라는 한 문장이 UI 방향을 완전히 바꿨습니다. 추상적인 설명보다 실제로 본 것, 써본 것에 비유하는 게 훨씬 빠릅니다.
이렇게 하면 안 돼요
UI 디테일을 한 번에 다 설명하려 하지 말 것 — 투명도, 폰트, 박스 모양, 색상을 한꺼번에 설명하면 한꺼번에 틀립니다. 하나씩 확인하고 넘어가는 게 오히려 빠릅니다.
처음부터 풀 기능을 욕심내지 말 것 — 처음엔 타이머 + 대시보드 + 통계까지 한 번에 원했습니다. Phase 1만 하기로 결정한 덕분에 실제로 완성할 수 있었습니다.
다른 업무에 적용한다면?
이 방식 — "말로 아이디어 설명 → AI가 기획 → 앱 구현" — 은 가정 내 문제뿐 아니라 팀 업무에도 그대로 쓸 수 있습니다.
반복되는 보고서 작업을 자동화하는 내부 도구
매주 수동으로 집계하던 데이터를 정리해 주는 대시보드
팀 내 반복 알림을 자동으로 보내주는 봇
개발자가 없어도, 내가 겪는 불편함을 구체적으로 말할 수 있다면 시작할 수 있습니다.
앞으로의 계획
아들 PC에 실제 배포 — 실제 사용해보면서 예상 못한 문제를 찾아낼 것 같습니다. 아들 반응도 궁금합니다.
Phase 2 — 웹 대시보드 연동 — Electron 앱에서 기록한 게임 시간을 웹 대시보드에서 주간/월간 그래프로 볼 수 있도록 연동할 예정입니다.
PC를 강제로 종료하게되면 위 타이머가 리셋될 껄로 예상되어, 그 방지책도 추가 보완을 해야할 것 같습니다.
더 나아가 발전된다면, 요청시간 관리를 부모의 스마트폰에서 요청,승인이 가능토록까지 된다면 Family Safety 앱을 완벽히 대체 가능할듯 싶습니다.
재사용 가능한 프롬프트
프롬프트 1: 아이디어 인터뷰 시작
> [해결하고 싶은 문제]를 해결하는 앱을 만들고 싶어. > 사용자는 [누가 쓰는지]이고, 핵심 문제는 [어떤 상황이 불편한지]야. > 아이디어를 구체화하는 질문을 하나씩 해줘. PRD로 만들어줄 때까지.
프롬프트 2: UI 묘사로 방향 잡기
> 지금 [현재 UI 설명]인데, [실제로 아는 것 — 앱, 게임, 웹사이트 등]처럼 보이게 바꿔줘. > [구체적인 조건 — 크기, 투명도, 위치, 색상 등]이어야 해.
프롬프트 3: 범위 결정
> 오늘 [몇 시간] 안에 완성할 수 있는 현실적인 범위를 정해줘. > 전체 기능은 [전체 기능 목록]인데, 오늘 반드시 돌아가야 할 핵심 3가지만 골라줘.
