소개

그래서 저는 코드 조각을 공유하고 논의하기 위한 플랫폼인 CodeStash를 작업해 왔습니다. 이는 Reddit과 Stack Overflow 사이의 일종의 교차점입니다. 멋진 부분? Google Gemini에서 제공하는 코드 조각을 설명하는 AI가 내장되어 있습니다. 형편없는 JavaScript이든 Python 코드이든 CodeStash를 사용하면 사용자가 필요에 따라 AI 설명을 요청할 수 있습니다. 하지만... AI 설명은 약간 엇갈릴 수 있습니다. 일부 사용자는 응답이 매우 유용하다고 생각할 수도 있고 다른 사용자는 어떻게 될까요? 그다지 많지는 않습니다. 이것이 Formbricks가 등장하는 곳입니다.

이 게시물에서는 사용자가 AI 답변을 얻은 후 설문조사에 Formbricks를 추가하여 유용하다고 생각하는지 확인하는 방법을 보여 드리겠습니다. 앱 내 피드백이 궁금하거나 Formbricks가 귀하의 프로젝트에 어떻게 적용될 수 있는지 알고 싶다면 계속 기다려주세요!

왜 설문조사에 신경쓰나요?

AI는 인상적이지만 현실을 직시하자. 때로는 목표를 놓치기도 합니다. 설명이 도움이 되었는지 사용자에게 직접 물어봄으로써 CodeStash를 미세 조정하는 데 사용할 수 있는 정직하고 즉각적인 피드백을 얻을 수 있습니다. 그리고 Formbricks를 사용하면 빠르고 번거롭지 않은 설문조사를 앱에 직접 추가하는 것이 매우 간단해졌습니다. 윈윈.

CodeStash에 Formbrick 추가(Next.js 포함)

Formbricks 추가는 간단했고 설정에는 10분도 채 걸리지 않았습니다. 따라서 "이 설문조사 내용을 모두 추가할 시간이 없습니다"라고 생각하신다면 제 말을 믿으세요. 생각보다 빠릅니다. 분석 내용은 다음과 같습니다.

1단계: Formricks 계정 만들기

Formbricks를 시작하려면 이 빠른 시작 가이드의 단계를 따르세요.

2단계: Formbrick 설치

먼저 Formbricks 패키지가 필요합니다. 이 명령을 실행하여 설치한 후 다음 단계를 따르세요:

npm install @formbricks/js zod

이제 app/formbricks.tsx 파일을 만듭니다.

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import formbricks from "@formbricks/js";

export default function FormbricksProvider() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    formbricks.init({
      environmentId: "",
      apiHost: "",
      userId: "", //optional
    });
  }, []);

  useEffect(() => {
    formbricks?.registerRouteChange();
  }, [pathname, searchParams]);

  return null;
}

이제 app/layout.tsx 파일을 업데이트하세요.

// other imports
import FormbricksProvider from "./formbricks";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
      {children}
    
  );
}

3단계: 설문조사 삽입

AI 설명이 제공되면 사용자에게 어떤 점이 마음에 들었는지 묻는 설문조사 팝업이 표시됩니다. 응답에 설문조사 구성 요소를 직접 삽입하는 방법은 다음과 같습니다.

Formbricks 계정에서 새 설문조사를 생성하고 설정 아래 설문조사 트리거에서 "ai_answer" 키를 사용하여 코드 트리거를 추가하세요.

이제 코드 어디에서나 formricks.track("ai_answer") 메서드를 사용하여 프로그래밍 방식으로 설문조사를 시작할 수 있습니다.

예를 들어...

import formbricks from "@formbricks/js";
import axios from "axios";

await axios
  .get("/ai/explain")
  .then((res) => {
      formbricks.track("ai_answer");
});

4단계: 설문조사 질문 사용자 정의

Formbricks 대시보드에서 원하는 내용에 맞게 설문조사를 조정하세요. 나는 다음과 같은 질문을 던졌습니다:

“이 설명이 도움이 되었나요?” (예, 아니오)
“AI 설명을 어떻게 개선할 수 있나요?” (선택 과목)

설문조사로 인해 사용자가 너무 산만해지지 않도록 설문조사를 짧고 단순하게 만들었습니다.

가장 좋은 점은 무엇인가요? 설문조사가 자주 표시되도록 설정할 수 있으므로 사용자가 설명을 요청할 때마다 스팸을 보내는 일이 없습니다.

스크린샷

실제 피드백 보기

응답이 들어오기 시작하면 Formbricks는 모든 훌륭하고 깔끔한 데이터를 제공합니다. 이제 무엇이 효과가 있는지, 무엇이 혼란스러운지, 한두 가지 조정이 필요한 것이 무엇인지 알 수 있습니다.

마무리

CodeStash에 Formbricks를 추가하면 사용자 경험을 방해하지 않고 솔직한 피드백을 쉽게 수집할 수 있습니다. 따라서 사용자 피드백을 염두에 두고 구축하고 있다면 Formbricks를 사용해 보세요!

읽어주셔서 감사합니다. 여러분도 저만큼 이러한 도구에 관심이 있으시다면 Formbricks의 GitHub 저장소 ⭐에 별표를 표시하는 것을 잊지 마세요. CodeStash가 마음에 드신다면 해당 도구에도 별표를 주세요!

참고자료

1. Formbricks 문서
2. Next.js 문서