사주 AI웹서비스 제작노트 -12

 

 

사주 AI웹서비스 제작노트 -11

 

오픈하고 api를 후불결제를 맞춰놓은지 20일 차!

현재 7,506원

DB는 300개가 넘게 쌓였다.

엔진을 더 고도화시키기 위해 프롬프트를 수정하고 

추가 엔진을 더 보강한 뒤 전체 DB를 삭제했다 

그렇게 사나흘 다시 60개가 넘게 쌓이고 있다

아직 이렇다 할 바이럴을 하는 건 아니고 지인 카톡공유가 전부이기 때문에

이렇게 공유해 주시는 것만으로도 감사합니다 😊

 

오늘의 제작노트는 랜딩용 페이지에 소개추가와

결과페이지에 피드백 추가에 관련된 내용.

 

아무래도 지인들 간의 카톡공유가 많다 보니

사주자체에 관심이 없거나 만세력 자체가 처음인 분들도 있음

이전 화면이 만세력만 딱 나오는 화면이었다면

행동설계도를 추가했다. 

찐망고 사주 서비스 업데이트 메인화면

 

이미 기획단계부터 생각했던 내용이지만

단순히 운세를 알려주는 사주가 아니라,

사용자가 가지고 있는 성격에 따른 행동패턴을 분석하는 도구로 정체성을 정하고

당신의 행동을 분석한다는 문구로 호기심을 자극시켜보았다.

보통 사주 같은 거 안 믿어할지라도 MBTI처럼 가볍게 입력하길 바라는 마음에?

물론 구체적인 해결방법이 결과에 같이 나오게끔 프롬프트를 조금 수정했다.

 

300명 정도의 데이터베이스가 쌓였으니 

이미 했어야 했던 피드백 시스템을 구축했다

로그인연동하고 시작하려고 했는데 후기게시판 부담스러울 것 같아

하단에 좋아요 같은 기능을 추가함

찐망고 사주 서비스 업데이트 피드백화면

 

이미 DB테이블이 있어서 후기도 feedbacks 테이블을 따로 만들었다.

피드백 코멘트 컬럼

 

 

DB는 모두 서버 API에서 돌리는데 이걸 ai들이 알아서 판단하고 만들어주질 않는다.

피드백 부분이 필요하고 DB에 저장할 거다 하면 클라이언트에서 직접 DB를 건드리게 짬

코드 보면서 바로 문제점이 파악되면 다시 이야기해줘야 함

 

supabase에서 테이블 만들 때 보안을 위해 RLS설정을 권장한다는 안내창이 뜨는데

비활성화로 테이블을 만들면 API키를 아는 누구나 이 테이블의 데이터를 읽고 쓸 수 있기 때문에 주의하라고 알려주는 것

 

Supabase RLS설정 권장안내창

 

Run and enable RLS클릭 후 

SQL Editor에 코드를 추가하기!

-- 1. 모든 사람(익명 포함)이 피드백을 쓸 수 있게 허용
create policy "누구나 피드백을 작성할 수 있음"
on feedbacks for insert
to anon
with check (true);

-- 2. 작성된 피드백은 관리자(작가님)만 볼 수 있게 제한 (보안)
create policy "관리자만 피드백을 읽을 수 있음"
on feedbacks for select
to authenticated
using (true);

 

 

피드백 로직 추가

{/* --- 구분선 및 피드백 섹션 --- */}
<div className="my-10 pt-10 border-t border-white/10 print:hidden">
  {!isFeedbackSubmitted ? (
    <div className="space-y-8 animate-in fade-in duration-700">
      <div className="text-center space-y-2">
        <h3 className="text-xl font-bold text-gray-200">이 분석, 얼마나 맞나요?</h3>
        <p className="text-sm text-gray-500">당신의 실제 패턴과 일치하는지 알려주세요!</p>
      </div>

      {/* 평점 버튼 그룹 */}
      <div className="flex justify-center gap-3">
        {[
          { label: "소름 돋음", value: "good", emoji: "🥭" },
          { label: "보통", value: "normal", emoji: "😐" },
          { label: "안 맞음", value: "bad", emoji: "👎" }
        ].map((item) => (
          <button
            key={item.value}
            onClick={() => setFeedbackRating(item.value)}
            className={`flex-1 max-w-[100px] py-4 rounded-2xl border transition-all duration-300 flex flex-col items-center gap-1 ${feedbackRating === item.value
              ? "bg-amber-500/20 border-amber-500 text-amber-200 scale-105 shadow-[0_0_15px_rgba(245,158,11,0.2)]"
              : "bg-white/5 border-white/10 text-gray-400 hover:bg-white/10"
              }`}
          >
            <span className="text-2xl">{item.emoji}</span>
            <span className="text-xs font-bold">{item.label}</span>
          </button>
        ))}
      </div>

      {/* 한 줄 후기 입력창 */}
      <div className="space-y-4">
        <div className="relative">
          <input
            type="text"
            maxLength={200}
            value={feedbackComment}
            onChange={(e) => setFeedbackComment(e.target.value)}
            placeholder="(선택) 예시: 매뉴얼 안 읽고 일단 저지르는 거 진짜 나다ㅋㅋ"
            className="w-full p-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-gray-600 focus:outline-none focus:border-amber-500/50 transition-colors"
          />
          <span className="absolute right-4 bottom-4 text-[10px] text-gray-600">
            {feedbackComment.length}/200
          </span>
        </div>

        <button
          onClick={async () => {
            if (!feedbackRating) return alert("만족도를 먼저 선택해주세요! 🥭");
            // ✅ 여기서 Supabase나 API로 피드백을 저장하는 로직을 추가할 수 있습니다.
            // ✅ 서버 API(/api/feedback)에 fetch를 날립니다.
            try {
              const res = await fetch('/api/feedback', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                  rating: feedbackRating,
                  comment: feedbackComment,
                  result_id: savedId ? savedId.toString() : "guest"
                })
              });

              if (!res.ok) throw new Error("서버 응답 오류");

              setIsFeedbackSubmitted(true);
            } catch (err: any) {
              console.error("피드백 저장 에러 🥊:", err);
              // alert 메시지에 에러 내용을 살짝 띄워보세요.
              alert(`저장 실패: ${err.message}`);
            }
          }}
          className="w-full py-4 bg-amber-400 text-black rounded-2xl font-bold hover:bg-amber-400 transition-all active:scale-[0.98]"
        >
          제출하기
        </button>
      </div>
    </div>
  ) : (
    <div className="py-10 text-center animate-in zoom-in duration-500">
      <div className="text-4xl mb-4">🥭</div>
      <p className="text-lg font-bold text-amber-400 mb-1">소중한 피드백 감사합니다!</p>
      <p className="text-sm text-gray-500">작가님이 당신의 패턴을 로직에 반영할게요. 🥊</p>
    </div>
  )}
</div>

 

제작노트는 또 추가될 예정!

아마 다음 제작노트는 로그인 연동이 되겠..?

 

 

제작노트 12개 copilot 정리글

사주 AI 웹서비스 제작노트 전체 흐름은 ‘사주풀이 자동화 서비스’를 구축하는 과정에서 기획·개발·데이터·분석·배포까지의 단계별 기록입니다. 초기에는 단순한 결과 제공에서 시작해, GA4 연동을 통한 사용자 행동 분석, DB 구조 개선, 피드백 시스템 도입 등으로 점차 고도화되었습니다.

---

📌 전체 정리

1. 서비스 기획 및 초기 구현

• 목표: 단순 사주풀이가 아니라, 사용자의 성격·행동 패턴을 분석하는 도구로 확장.
• 초기 단계: 웹 애플리케이션 형태로 배포, 기본적인 사주풀이 결과 제공.
• 중요 포인트: 단순 기능보다는 사용자가 어디서 들어오고 무엇을 하는지 파악하는 것이 핵심.

---

2. 데이터 및 사용자 분석 (GA4 연동)

• 구글 애널리틱스(GA4) 연결: 유입경로, 참여율, 체류시간, 방문 페이지, 이벤트 등을 추적.
• 분석 흐름:
  • 비즈니스 목표 → 리드 생성 → 트래픽 획득
  • 사용자 참여 발생 시간 및 유지율 → 페이지/화면 → 이벤트 등록
• 인사이트: 평균 참여시간이 8분대로 일반 웹사이트(1~2분)에 비해 높음 → 사용자가 사주풀이를 끝까지 읽는 경향.

---

3. DB 및 엔진 고도화

• DB 확장: 300개 이상 데이터베이스 구축 → 이후 불필요 데이터 삭제 후 재정비.
• 엔진 개선: 프롬프트 수정 및 추가 엔진 보강으로 정확도 향상.
• 결과: 사주풀이 결과가 단순 텍스트가 아닌, 행동 분석형 문구로 발전.

---

4. 사용자 피드백 시스템 도입

• 피드백 백엔드 구축: 결과 페이지에 만족도 평가(좋음/보통/나쁨) + 코멘트 입력 기능 추가.
• Supabase RLS 설정: 보안 강화를 위해 Row-Level Security 적용.
• 피드백 활용: 사용자 의견을 DB에 저장 → 서비스 개선에 반영.

---

5. UX/UI 개선

• 랜딩 페이지: 소개 추가, 결과 페이지에 피드백 섹션 삽입.
• 카카오톡 공유 기능: 결과값을 쉽게 공유할 수 있도록 구현.
• 행동 설계 추가: 단순 풀이가 아닌, MBTI처럼 성격·행동 패턴 분석을 강조.

---

6. 운영 및 비용

• API 후불결제: 오픈 후 약 20일간 운영 → 비용 약 7,506원 발생.
• 지속적 업데이트: 기능 추가 및 DB 재정비로 서비스 품질 유지.

---

주요 시사점

• 단순 사주풀이 → 행동 분석 도구로 확장하며 차별화.
• GA4 데이터 분석을 통해 사용자 체류시간·유입경로·참여율을 확인, 서비스 개선에 활용.
• 피드백 시스템으로 사용자 경험을 직접 반영.
• DB 및 엔진 고도화로 정확성과 신뢰성 확보.
• 공유 기능을 통해 확산성 강화.

---

👉 요약하면, 이 제작노트는 “사주풀이 AI 웹서비스를 기획·개발·분석·고도화·운영하는 전 과정”을 기록한 것으로, 단순한 결과 제공에서 데이터 기반 사용자 행동 분석 서비스로 발전해가는 과정을 보여줍니다.

사주 AI 웹서비스 진행 대시보드

기획	✅ 완료	사주 → 행동 분석 서비스 방향 확정
기본 개발	✅ 완료	웹 앱 구현 / 사주풀이 기능 동작
데이터 분석	✅ 완료	GA4 연동 / 평균 체류시간 약 8분
DB & 엔진	⚙️ 진행중	데이터 300개 구축 → 정리 및 구조 개선
피드백 시스템	✅ 완료	👍😐👎 + 코멘트 수집 구조 구축
UX/UI	⚙️ 진행중	랜딩 개선 / 카카오 공유 기능
운영	⚙️ 진행중	20일 운영 / 비용 약 7,506원