디자이너가 Cursor AI로 진짜 서비스 만들기
바이브 코딩으로 어디까지 가능할까?
AI를 활용해 진짜 도움이 되는 도구를 만들고 싶었습니다.
입시 미술 수업에서 반복되는 패턴, 학생들이 겪는 어려움을 떠올리며
‘연습용 실기 타이머’를 직접 만들어보기로 했습니다.
이번 글에서는 그 아이디어를 실제 웹앱으로 구현하고, 사용자 테스트까지 진행한 과정을 정리했습니다.
왜 '타이머'를 개발했을까?
입시생에게 가장 필요한 건 ‘실전처럼 연습하는 습관’입니다.
단계별 흐름 없이 무작정 시간을 쏟는 연습은 개선 없이 반복되기 쉽습니다.
그래서 스케치부터 정리까지 흐름을 따라갈 수 있는 타이머를 만들기로 했습니다.
(자세한 내용은 1화에서 확인할 수 있습니다.)
"입시 미술과 프로덕트 디자인, 그리고 AI"
- 입시 미술, 디자인 역량에 도움이 될까?
▶️ 1화 바로가기
웹앱 흐름 구조
이번 프로젝트의 MVP는 다음과 같은 구조로 구성했습니다.
1. 시험 설정 (Session Setup)
감성적 문구로 응원해 주며 시험을 시작합니다.실기 유형(발상과 표현, 사고의 전환 등)과 주제를 입력하고
전체 시간과 각 단계(스케치, 채색, 묘사, 정리)의 시간을 설정합니다.
단계별 시간을 설정하지 않으면 1/4로 자동 분배합니다.
2. 시험 진행 (Timer)
학생들은 단계별로 노출되는 Tip을 가장 좋아했습니다.전체 타이머는 실기 시험처럼 감소형으로 작동합니다.
각 단계 시작 시, 경과 시간과 단계별 팁이 함께 노출됩니다.
단계가 종료되면 ‘완료’를 누르며 연습 흐름을 이어갑니다.
3. 시험 회고 (Session Detail)
각 단계에서 소요된 시간을 정리해 보여줍니다.
전체 소요 시간, 단계별 기록을 확인하고 연습을 되돌아볼 수 있습니다.
시험을 마친 뒤엔 전체 페이지를 이미지로 저장할 수 있습니다.
(MVP에선 이전 시험 기록을 확인할 수 없기 때문에, 이미지 저장 기능으로 우회했습니다.)
커서로 어떻게 개발했는가
커서가 직접 커밋하고 배포까지 해주고 있습니다. 빌드에 성공하길 기도하며 기다립니다.이번 프로젝트는 Cursor로 개발했습니다.
GitHub와 Vercel을 연동해 배포하고, 가비아에서 구매한 midegaja.com 도메인을 연결했습니다.
기획부터 디자인, 개발, 배포까지 모두 혼자서 직접 구현했습니다.
개발 환경은 Next.js + TypeScript 기반이며, 전체 로직은 App Router 구조로 구성했습니다.
단계별 상태 관리, 타이머 로직, 페이지 간 데이터 흐름은 모두 커서에서 작성한 프롬프트 기반 코드로 구현했습니다.
데이터 추적과 분석을 위한 연동 작업
테스트 클릭 시, 슬랙으로 '사사삭' 알림이 옵니다.실제 사용 데이터를 수집하고, 사용자 흐름을 분석하기 위해
GA4(Google Analytics 4)와 Slack을 연동했습니다.
GA4는 Google Tag Manager를 활용해 유입, 클릭, 이탈 경로를 추적했습니다.
Slack은 예상치 못한 이탈, 에러 로그 등을 실시간으로 받아볼 수 있도록 Webhook을 적용했습니다.
특히 타이머 페이지에서는 브라우저 종료 이벤트를 감지해,
userId, sessionId, currentStep, elapsed 시간을 Slack으로 전송했습니다.
디버깅과 유저 리텐션 분석을 동시에 고려하였습니다.
사용자 테스트에서 얻은 인사이트
학원 학생들에게 MVP를 실제 사용해 보도록 요청했고, 아래와 같은 피드백을 받았습니다.
1. 화면이 꺼지면 타이머도 정지된다
아이패드나 모바일 환경에서 화면이 꺼지면 타이머가 멈추는 이슈가 발견되었습니다.
이는 웹앱 구조의 특성상, 브라우저가 백그라운드에서 자바스크립트 실행을 제한하기 때문입니다.
특히 모바일 운영체제에서는 화면이 꺼지거나 앱이 백그라운드로 전환될 경우, 배터리 및 리소스 절약을 위해 자바스크립트 타이머의 실행이 지연되거나 완전히 중단되는 현상이 자주 발생한다고 합니다...
2. 단계별 완료 버튼을 잘 누르지 않는다
학생들은 그림에 몰입한 나머지, 스케치부터 정리까지 단계를 따라가지 않고
그림이 끝난 뒤 한 번에 버튼을 누르는 경우가 많았습니다.
특히 채색과 묘사의 경계가 모호해 타이머 상에서 명확한 구분이 어렵다는 의견도 있었습니다.
3. 사용자를 식별할 수 없다
로그인 기능 없이 만든 MVP였기 때문에,
같은 사람이 여러 번 사용할 경우 세션을 구분할 방법이 없었습니다.
유저 기반 데이터 분석이 어렵다는 점에서 인증 구조의 중요성을 다시 느꼈습니다.
커서를 사용하며 느낀 점
구글 시트를 연동하다가 발생한 이슈를 해결했을 때, 기쁜 나머지 감정적 피드백을...커서는 코드 제안 기능이 뛰어나고, 초보자도 빠르게 결과물을 만들 수 있다는 장점이 있습니다.
하지만 실제 개발 흐름에서 몇 가지 한계도 경험했습니다.
파일 간 흐름 파악이 어렵고, 작은 수정도 범위 명시가 필요합니다.
조건 분기나 상태 의존성이 있는 로직은 한눈에 구조를 보기 어렵습니다.
(당연하지만) 환경변수 설정을 정확히 해야 에러 없이 작동합니다.
커서는 빠르게 작동하는 MVP 제작엔 최적화되어 있지만,
복잡한 구조로 확장되는 서비스에선 디버깅과 유지보수 측면에서 제약이 있다는 걸 체감했습니다.
끝까지 만들어보는 힘
담당자가 모두 임지민...!아이디어를 기획으로, 기획을 디자인으로, 디자인을 제품으로!
누군가 ‘사용하게 만드는 것’까지 해내는 일은 생각보다 복잡하고 오래 걸립니다.
하지만 실제 사용자 앞에 놓인 화면을 보게 되면, 그 시간과 노력이 확신으로 바뀝니다.
처음엔 AI 활용 역량을 기르기 위해 시작한 프로젝트였지만,
지금은 학원 학생들이 실기 타이머를 실제 연습에 유용하게 활용하고 있는 모습을 직접 보며
뿌듯함과 함께 ‘정말 도움이 되는 도구를 만들었구나’라는 성취감을 느꼈습니다.
하단의 링크에서 타이머를 직접 사용해 볼 수 있습니다.
