[육아 스케줄 어플] STEP 1. 기획부터 UI 디자인까지, AI와 뚝딱!

안녕하세요! 전(全)자동입니다!

 

지난 프롤로그에서는 워킹맘 아내의 복직과 함께 찾아온 혼돈의 픽업 라이딩, 그리고 이를 해결하기 위해 직접 어플을 만들기로 결심한 눈물겨운(?) 사연을 전해드렸죠. 오늘부터는 본격적으로 AI(챗GPT, 제미나이 등)와 대화하며 코딩 없이 '가족 맞춤형 육아 스케줄 공유 어플'을 만들어가는 첫 번째 과정(STEP 1)을 공개합니다. 전문 개발자들처럼 복잡한 코드를 나열하지는 않겠습니다.

 

코딩 비전공자인 평범한 아빠가 '어떤 생각(기획)을 가지고 AI에게 어떻게 질문(프롬프트)했는지', 그 바이브코딩(Vibe Coding)의 생생한 과정을 공유해 보겠습니다.

1. STEP 1의 목표: "지금 당장 어딘데?!"를 가장 직관적으로 보여주기

시중의 캘린더 앱들이 가진 가장 큰 단점은 '너무 많은 정보'를 작은 화면에 욱여넣었다는 것이었습니다. 운전대를 잡고 당장 아이를 픽업하러 가야 하는 맞벌이 부부에게 필요한 건 전체 월간 일정이 아니라, '지금 시간 기준으로 가장 임박한 다음 일정(Next)'입니다.

그래서 어플 개발의 첫 단추인 STEP 1에서는 복잡한 데이터베이스(DB) 연결은 뒤로 미루고, 스마트폰 화면에서 가장 직관적으로 보일 수 있는 '화면 껍데기(UI/UX)'를 기획하는 데 집중했습니다.

• 핵심 1. 직관적인 컬러 코딩: 글씨를 읽지 않아도 색깔만으로 무슨 학원인지 알 수 있게 할 것 (수학: 파란색, 영어: 초록색 등)
• 핵심 2. Next 일정의 거대화: 앱을 켜자마자 제일 상단에 'Next: 미술 (14:00 - 15:00)'처럼 가장 임박한 일정을 크게 띄울 것
• 핵심 3. 비활성화 처리: 이미 픽업이 끝난 지난 일정은 회색으로 흐리게 처리하여 혼선을 줄일 것

2. 코딩은 AI가, 아빠는 프롬프트 엔지니어링!

머릿속에 있는 기획안을 실제 스마트폰 화면으로 구현하기 위해, 저는 챗GPT와 제미나이를 켜고 아래와 같이 구체적인 명령(프롬프트)을 내렸습니다. 코드를 몰라도 우리가 일상어로 개떡같이 말하면 AI가 찰떡같이 알아듣고 코드를 짜주는 세상입니다.

💡 전(全)자동 아빠의 실제 AI 프롬프트

"너는 10년 차 수석 프론트엔드 개발자야. 나는 코딩을 모르는 기획자고, '육아 데일리 스케줄러' 스마트폰 웹앱을 만들 거야.

[핵심 요구사항]
1. 모바일 반응형: 스마트폰 앱처럼 깔끔하고 예쁘게 디자인해 줘.
2. Next 일정 강조: 화면 최상단 박스에 현재 시간 기준으로 '가장 임박한 다음 일정'을 크게 띄워 줘. (예: Next: 미술 14:00)
3. 파스텔톤 컬러 코딩: 학원별로 부드러운 배경색을 줘. (수학: 파스텔 블루, 영어: 파스텔 그린, 피아노: 파스텔 퍼플, 미술: 파스텔 핑크)
4. 전체 일정 리스트: 상단 Next 박스 아래에는 오늘 하루 전체 시간표를 순서대로 나열하고, 현재 시간보다 지난 일정은 회색으로 흐리게 비활성화 처리해 줘."

3. 단 1분 만에 완성된 '아빠표 스케줄러' 첫 화면

프롬프트를 입력하자마자 AI는 1분도 채 되지 않아 완벽한 웹 화면(HTML/CSS/JS) 코드를 뱉어냈습니다. 저는 그저 AI가 짜준 코드를 복사해서 파일로 저장하고 실행해 보았을 뿐입니다. 결과는 어땠을까요?

제가 머릿속으로만 그리던 화면이 스마트폰 브라우저 위에 정확하게 구현되었습니다! 시간이 지나면 자동으로 다음 일정이 상단의 'Next' 칸으로 갱신되고, 이미 다녀온 학원 일정은 시각적으로 흐려집니다. 이제 운전 중 신호 대기 시 스마트폰을 힐끗 보는 것만으로도 '색깔'과 '큰 글씨'를 통해 다음 픽업 장소를 직관적으로 파악할 수 있게 되었습니다.

4. 다음 STEP 2 예고: 구글 앱스 스크립트(GAS)로 부부 실시간 공유하기

STEP 1에서는 화면의 예쁜 껍데기(UI)를 만들고 기능이 제대로 작동하는지 확인하는 것까지 훌륭하게 성공했습니다. 하지만 이 어플의 진짜 존재 이유는 '부부간의 실시간 스케줄 공유'입니다. 내 폰에서 일정을 변경하면, 회사에 있는 아내의 폰에도 실시간으로 바뀌어 있어야 완벽한 스케줄 전쟁 대비가 가능하니까요!

 

그래서 다음 STEP 2에서는 바이브코딩 시즌 1, 2에서도 요긴하게 써먹었던 마법의 도구, '구글 스프레드시트'와 '구글 앱스 스크립트(GAS)'를 활용해 보겠습니다. 엑셀을 쓰듯 편하게 구글 시트에 우리 아이 스케줄을 텍스트로 입력해두면, 앱이 실시간으로 그 데이터를 읽어와 예쁜 화면에 뿌려주는 '우리 가족만의 무료 데이터베이스(DB)' 구축 과정을 상세히 보여드릴 예정입니다.

 

아빠의 생존형 바이브코딩은 계속됩니다!