개인프로젝트: VarGen(4)-기능 기획

윤뿔소·2023년 3월 20일
0

이제 필수 기능인 GPT 생성 기능을 useQuery로 Get해올 수 있으니 이제 내가 원하는 기능을 어떻게 가져올 지 생각하고, 디자인까지도 봐보자

메인 기능

당연히 변수 이름 생성 기능이 메인인데 이거를 어떻게 편한 기능으로서 바꿀 지 생각해봐야한다.

전에 했던 것처럼 글을 쓰고 제출하는 방식은 걍 챗봇과 다를 바가 없기 때문에 클릭 한번으로 변수가 생성토록 해야한다.

어떻게?

기본적으로 명령을 내리는 것은 API 펫칭 해오면서 넣을 수 있는 속성 prompt에 문장을 제출해 결과값을 가져온다.

export const getChatResponse = async (prompt: string): Promise<ChatResponseData> => {
  try {
    const response = await axios.post(
      "https://api.openai.com/v1/completions",
      {
        model: "text-davinci-003",
        // 여기!
        prompt,
        temperature: 0.9,
        max_tokens: 100,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0.6,
        stop: [" Human:", " AI:"],
      },
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPEN_API}`,
        },
      }
    );
    const resText = response.data.choices[0].text;
    const resId = response.data.id;
    return { resText, resId };
  } catch (error) {
    console.error(`Error in getChatResponse: ${error}`);
    throw new Error("Unable to generate chat response");
  }
};

그러면 먼저 명령을 내리는 문장의 컨셉을 세워야한다.

내가 쓰는 문장은 이러하다.

Create 10 bulletin related variable names with camelCase

이렇게 쓰면 매 답변마다 형태가 달라지지도 않고 편하게 가공할 수 있는 모양으로 온다.

이렇게 말이다.

resText: "\n\n1. boardTitle \n2. boardContent\n3. boardCategory\n4. boardUserId\n5. boardItems\n6. boardComments\n7. boardCreatedAt\n8. boardUpdatedAt\n9. boardApprovedStatus\n10. boardDeletedAt"

또한 변수를 집어넣기 편한 문장이다. 예를 들어 camelCase 라든지, related앞에 어떠한 주제라든지 말이다.

그렇게 된다면 변수를 집어넣고, 그 변수에 해당하는 버튼이나 드랍다운 메뉴, 모달같은 걸 추가해서 문장을 변화시킬 수 있다.

Create {countVariable} {subject} related variable names with {namingConvention}

이런 식으로 말이다.

플러스

혹시! 이 기능 말고도 추가적인 기능을 이렇게 해보면 어떻겠냐 아이디어가 있으면 댓글로 말씀 해주세요! 아이디어는 생명

고민

UI에 고민이 조금 있긴 한데 어떻게 변수를 고를 건지 생각이 많다. 버튼식으로 누르고 할건지, 드랍다운으로 누르면 뜨게 만들 것인지, 모달을 눌러 그 데이터를 전달할 것인지 말이다.

많이 고민스러워서 우리의 친구인 AI에게 물어보았따.

사용자가 프롬프트에 대한 countVariable 및 제목을 선택하도록 허용하는 데 사용할 수 있는 다양한 UI 및 디자인 옵션이 있습니다. 다음은 몇 가지 아이디어입니다.

  • 드롭다운 메뉴: 드롭다운 메뉴를 사용하여 사용자가 미리 정의된 옵션 목록에서 countVariable 및 주제를 선택할 수 있습니다. 이는 많은 사용자에게 친숙하고 쉽게 구현할 수 있는 일반적인 UI 패턴입니다.
  • 라디오 버튼: 또 다른 옵션은 라디오 버튼을 사용하여 사용자가 countVariable 및 주제를 선택할 수 있도록 하는 것입니다. 비교적 적은 수의 옵션이 있고 현재 어떤 옵션이 선택되어 있는지 명확히 하려는 경우에 좋은 옵션이 될 수 있습니다.
  • 모달: 사용자가 countVariable 및 주제를 선택할 수 있도록 모달을 사용할 수도 있습니다. 이것은 사용자가 버튼을 클릭할 때 모달을 열어 옵션을 선택할 수 있도록 합니다. 사용자가 선택을 할 때 더 많은 정보나 지침을 제공하려는 경우 좋은 옵션이 될 수 있습니다.
  • 버튼: 버튼을 사용하여 사용자가 countVariable 및 주제를 선택할 수 있도록 할 수 있습니다. 여기에는 다양한 옵션을 나타내는 일련의 버튼을 표시하고 사용자가 버튼을 클릭하여 옵션을 선택할 수 있도록 하는 것이 포함될 수 있습니다. 사용 가능한 옵션을 시각적으로 명확하게 표현하려는 경우 좋은 옵션이 될 수 있습니다.

UI를 구성하고 구현할 때 사용자 경험에 대해 생각하고 가능한 한 명확하고 직관적으로 만드는 것이 중요합니다. 다음은 몇 가지 팁입니다.

  • 사용자가 선택하는 항목을 이해하는지 확인: 옵션에 대해 명확하고 간결한 레이블을 사용하고 사용자가 선택하는 항목을 이해하는 데 도움이 되는 필요한 컨텍스트 또는 설명을 제공합니다.
  • 선택 항목을 쉽게 변경: 사용자가 실수를 하거나 마음이 바뀌는 경우 선택 항목을 변경할 수 있는 명확하고 쉬운 방법을 제공합니다.
  • 디자인 테스트: 실제 사용자와 함께 디자인을 테스트하여 이해하고 사용하기 쉬운지 확인합니다. 사용자의 피드백에 따라 조정해야 할 수도 있습니다.
  • 전반적으로 핵심은 UI를 단순하고 직관적으로 유지하고 사용자가 선택할 때 명확한 지침을 제공하는 것입니다.

이걸 보고 좀 정리가 됐고, 다양한 subject 쪽은 모달로 해서 많은 것들을 한눈에 볼 수 있게 하고, 3개인 namingConvention, 3~4개인 countVariable 쪽에는 간편하게 조절할 수 있는 라디오 버튼이나 드롭다운 메뉴로 할 것이다.

profile
코뿔소처럼 저돌적으로

9개의 댓글

comment-user-thumbnail
2023년 3월 20일

혹시 심심이 기능어떠신가요 ㅎㅎ..

1개의 답글
comment-user-thumbnail
2023년 3월 21일

이러다 태연님 아이언맨 되겠어요

1개의 답글
comment-user-thumbnail
2023년 3월 26일

빨리 완성본을 보고싶어요.. 현기증 나요...

답글 달기
comment-user-thumbnail
2023년 3월 26일

점점 완성 돼가는건가요!!

답글 달기
comment-user-thumbnail
2023년 3월 26일

코드 집어 넣으면 사소한 오타 찾아주는 기능 어떠신가요. 예를 들면 'bulletin' 4개에 'bulIetin' 같은 육안으로 구별하기 힘든 오타들 ㅋㅋ

1개의 답글
comment-user-thumbnail
2023년 3월 26일

빨리 다음 글 주세요..

답글 달기