클로드&쳇지피티를 활용하여 질문을 분석하고 노코드MVP를 제작(부분)해보기

[GPTerS 활용스터디 사례]
클로드와 버블로 매월 MVP 만드는 1인 개발 스터디 중 활용

1. 소개

• 1인이 MVP개발 활용사례로서 학생들의 질문 생성 능력 향상을 목표로 함. 현대 사회에서 질문 능력의 중요성이 증가하고 있지만, 학생들의 능력은 개선이 필요함. 

• 질문생성, 공유, 평가기능을 갖춘 플랫폼QuestionCraft를 통해 능력향상을 도모함.

• AI 시대에 맞는 질문 평가 시스템을 제공하여 호기심과 즐거움을 자극함. 

한국어와 중국어가 지원되는 모바일 앱

[ 출처 : 노코드/로우코드 / 앨리스  ]
https://www.gpters.org/nocode/post/keulrodeuwa-beobeulro-maeweol-mvp-mandeuneun-1in-gaebal-seuteodi---1juca-OipzldNGbGunBTP  ] 


2. 흥미로운 포인트

1) 질문 능력 향상의 중요성을 강조한 창의적 접근 :

  • 질문능력을 개선하기 위한 QuestionCraft 플랫폼을 기획한 점, AI 시대에 맞는 교육적 도구로서 강력한 가능성을 제시하고 있음.

2) 학생들의 호기심과 즐거움을 자극하는 시스템 설계: 

  • 질문 생성, 공유, 평가라는 플랫폼의 기능을 통해 학생들이 단순히 질문을 만드는 것을 넘어, 자신의 호기심을 구체화하고 평가를 통해 동기를 부여받을 수 있다는 점에서 학습 효과를 극대화할 수 있음.

    3) 노코드 도구와 AI 결합으로 빠른 실행력 :

  • Bubble과 OpenAI API, 그리고 Claude를 활용하여 적은 개발 지식으로도 강력한 기능을
    구현했다는 점이 주목되고, 특히 노코드 플랫폼인 Bubble을 활용하여
    효율적이고 직관적인 UI를 구현한 점은 개발지식이 적은이들에게 도움이 됨.

    화면에 한국어와 영어 텍스트가 표시되는 화면

3. 제작(활용) 목표

  • 해당 1인 MVP 개발 활용스터디를 습득하는 것.

  • 흥미로운 포인트에서 추가 응용하여 페르소나형 분석으로 쇼핑(관심품목 등)리스트를 이끌어내는 부분을 응용하는 것. 질문형 분석 단계의 주요 메뉴를 제작해 보고자 함.

    네트워크 다이어그램 이미지

  [ 출처 : 노코드/로우코드 /앨리스  ]

   [ 출처 : 클로드/ 직접구현]

 4. 진행 방법

1) 질문프로세스 분석

  • 활용사례에서 질문을 하면 OPEN api 에서 응답분석후 결과를 점수로 시각화하는 단계 확인  

    휴대전화 화면에 표시된 한국어 스크린샷

    [ 출처 : 쳇지피티/ 질문프로세스분석 직접구현]

    2-1) ChatGpt(canvas) & 클로드 활용

  • 구조도(IA) 작성: Claude를 사용하여 정보 구조IA를 추가 설계함.

  • Claude로 "웹UI 디자인 생성 "이라는 프롬프트를 통해 주요 화면 설계를 시도함.

 

2-2) 클로드 활용

  • 프로젝트 가안작성 : 질문선택을 통한 페르소나형 관심(제품)도출 화면을 구현

    한국 모바일 앱 스크린샷

     [ 출처 : 클로드활용 직접구현 ]
    https://drive.google.com/file/d/1fpByvHdhWOTSqfF-6KzRCj2smXLC2l5T/view?usp=sharing


    3) Open API연결

  •  serp api : google shooping api 외  / chatgpt api  연결 예정

    장바구니가 있는 웹사이트의 스크린샷

4) 버블(Bubble)을 활용한 화면구현

 • 인덱스(UI) 구현 진행: 서비스빌더 기능숙지 필요함

거품

• 이후 활용이 편리한 wix 웹빌더를 통해 화면 구현 해봄.


5. 활용 도구

• Claude: IA(Information Architecture) 작성 및 기본 UI 및  Artifact 기능을 통해 생성 AI로부터 얻은 결과를 사용.
• Bubble: 노코드를 활용하여 질문 생성 및 평가 플랫폼을 개발. 반응형 웹 디자인을 구현하기 위해 활용해봄, 
• OpenAI API:  AI 기반의 질문 평가 시스템을 구축하기 위해 사용.

6. 활용결과와 배운 점


< 과정중 시행착오 >

• 쳇 지피티 유료사용중이라 최대한 여기서 웹 UI 화면을 구현하고자 시도
 1) 웹의 구조IA는 코딩(파이썬 등)으로 나오는데, 코딩활용할 뷰어(visual studio 등) 재습득해야 했음
 2) 클로드 파일첨부 : 쳇지피티에서 생성되어진 코딩 파일업로드 후 IA 생성 해결

• 클로드 Artifect의 기능 사용시
  1) 클로드 파일첨부 : 웹 페이지캡쳐 후 화면 UI를 돌출해서 비교해 보기도 함.
2) 클로드 Artifect의 1일 사용량 제한으로 쳇지피티 교차 사용함.

• 버블(Bubble) 사용의 이해 필요
  1) 버블에서 설정 편집기와 워크-플로우를 다루는 데 어려움이 있었음.
2) 화면UI 구현 과정에서 반응형 디자인에 대한 추가 학습이 필요했음.

< 배운 점 등 >

  • 클로드 Artifect와 쳇지피티 canvas기능을 교차하여 구조(IA)를 도출하는 과정임.

  • 프로그램 언어(파이선 등 ) 에 대한 비주얼스튜디오, 노코드 편집기에서 활용한 점.

  • Bubble 편집기 사용이 익숙하지않아  wix를 사용하고 웹 화면을 확인해 봄.

    (반응형코딩 적용없이 Html/CSS만 적용해 봄) 

7. 제작해 보려는 부분

 • 버블(bubble)로 질문분석 및 메인등 주요화면 웹 페이지 만들기

 • 고객 질문에 대한 평가척도 기준 만들기

 • 고객성향 질문 구성 , 방식 ( 서술 ? / 버튼형 예정)
  MBTI 기반 분석/  Big Five 성격 분석 (OCEAN) / 심리 테마 분석 (스토리 기반)  이미지 선택 기반의 직관 분석 (Visual Test) 등
  ( ex : 쇼핑고객 이란 타켓일 때,, 적정질문 구성 선택해 보기 )

 • 고객질문에 대한 페르소나형 표현,  상세보기 아이디어 구성 해보기

8. 도움받은 글 & 도움받고자 하는 부분

 •설문조사 활용 : 스머지서비스 등을 활용하여 성향분석의 일부를 적용 가능하다고 하나
아이템의 컨셉상 어색할수 있어 구현시 링크 연결정도로,,,, 생각 중~

 •고객성향 질문지 실제데이터 근거해서 작성한 부분이 있다면 적용해보고 싶음.

 •현재는 최종 고객의 페르소나 분석 후, 쇼핑(관심)리스트를 돌출해 보고자 함. 

* 질문하기 및 질문분석의 활용사례를 1차 따라하는것이 목적이나,
그 과정에서 적용해볼 아이템을 넣어 페르소나 (성향별)에 따른 관심부분을 찾아가는것을
살펴보고자 함. 😍 😁

2

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요