소개
이 프로젝트의 목표는 아이의 감정을 분석해 부모가 더 잘 이해하고 소통할 수 있도록 돕는 것입니다. 동시에 아이에게 일상을 기록하고 돌아보는 것에 대한 기쁨을 느끼게 해주고 싶었습니다.
진행 방법
사용 도구 및 구성
Lovable: 프론트엔드 + 백엔드를 모두 구현 가능한 노코드 툴로 선택
선택 이유: GitHub 연동을 통해 자유도 높은 수정 가능 / UI 구현이 간편함 / 디자인이 예쁨
n8n: 자동화 백엔드 워크플로우 도구로 활 용
웹폼 제출 시 n8n의 webhook으로 감지 → 이메일 확인 → 기존 회원/신규 회원 분기 처리
신규 회원일 경우 Supabase DB에 저장 후, 트리거로 n8n 워크플로우2 실행해서 관리자에게 신규 회원 추가 메일 발송
Supabase: 사용자 데이터 저장용 데이터베이스로 활용
💡 Lovable에서 직접 DB 연동이 가능하지만, 무료 플랜 한계로 인해 n8n으로 우회 구성함. 다만 성능 문제로 추후에는 백엔드 코드로 직접 구현 예정.
프롬프트 설계
### 목적 및 맥락
- 홈페이지 제작 목적 : AI 펜팔 서비스(PenpAI) 사용자 등록 및 자동화된 메일 시스템 구축을 위한 웹 인터페이스 제공
- 홈페이지 주요 기능 : AI 펜 팔 서비스(PenpAI)의 상세소개 페이지, 사용자 등록 페이지(form으로 구현), 로그인, 로그인 했을 때 우리아이의 감정 리포트 확인
### 타겟 설정
- 주요 방문자 유형 : 초등 중등 자녀를 둔 부모
- 방문자 기대 행동 : 서비스 신청, 자녀 등록, 감정 리포트 확인(월별)
### 디자인 및 기능
- 원하는 디자인 느낌 : 따뜻하고 심플한 느낌
- 필수 포함 메뉴 : 서비스 소개(AI 친구에 대한 소개, 감정 리포트에 대한 소개), 신청 폼, 로그인
- 필요 기능 :
- 서비스 신청 폼(전송버튼 클릭시 n8n 워크플로우가 동작하도록 함)
- 로그인/로그아웃
- 메일 송수신 및 감정 분석 대시보드
- 플로팅 바가 모든 페이지에 띄워져있어서 클릭하면 바로 문의하기 폼이 나타나고, 전송버튼 누르면 바로 n8n이 동작하게끔 함 실제 구현 화면
결과와 배운 점
다양한 노코드 툴을 조합하여 꽤 정교한 사용자 흐름과 자동화를 구현할 수 있었음
n8n과 Supabase 연동을 통해 비동기 처리 및 조건 분기 처리를 유연하게 처리 가능
감정 분석 모델은 아직 도입 전이지만, 다음과 같은 계획이 있음:
Hugging Face나 Clova Sentiment API 중에서 테스트 후 결정
월별 감정 트렌드와 키워드 기반 추천 대화 예시 제공
앞으로의 계획
감정 분석 모델을 붙여서 '아이의 감정을 부모가 잘 이해할 수 있는 대화 추천 기능'을 도입
예: "요즘 아이가 자주 '외로워' 라는 말을 해요. 다음과 같은 대화를 시도해보세요."
지난 글
https://www.gpters.org/nocode/post/complete-15-minutes-our-c6WkBVoAV3o9kX0