graphAI - 5일차 까지의 정리

1일차

무언가를 만들때 아이디어는 사소한 불편함에서 시작한다고 생각한다

ai를 사용할때 이전 과정으로 돌아가면 한참 스크롤을 올려야 해서 불편했던 경험이 있다

특히 ai가 코드를 작성하도록 할때 이런점이 많이 불편했는데

코드 자체의 분량이 많기도 할 뿐더러

이전 과정으로 돌아가서 시작하려면 데이터가 섞여 할루시네이션이 일어나기도 하고

그렇다고 메세지를 중간부터 다시보내면 자금까지의 메세지가 초기화 된다

 

그래서 메세지를 좀 펼처놓고 보면 좋겠다는 생각이 들었다
메세지를 펼처놓는 김에 분기를 만들어 한 질문에서 여러 갈래로 뻗어 나갈 수 있도록 하고

대화에서 진행되던 과정을 다른 대화로 가져와 이전 대화 기록을 공유한다면 더 좋을 것이다

머릿속에 떠오른건 트리구조를 가진 그래프였다
질문과 답변이 노드를 구성하고 선들로 답변의 진행과정을 표현하면 괜찮지 않을까 싶었다

 

아이디어의 핵심을 요약하자면 그래프 구성, 질문의 분기, 질문의 통합 3가지 일듯 하다

 

노드와 그래프를 사용하니 react flow를 써보기로 했다

 

아이디어를 생각만 하고 던져두는 편이라 1일차에서 2일차로 넘어가는데 1달이 걸렸다

안까먹고 만든게 용하다

 

 

2일차

 

노드를 만들고 분기되는 것을 구현했다

요즘 AI가 정말 좋더라
만드는 속도가 배로 뛴 느낌이다

 

 

 

 

3일차

UI를 좀 둥글게 바꿔 보았다
난 분명 스타일만 바꿨는데 버그가 대량으로 발생해서 고생했다

 

 

4잁차

AI를 연결했다
질문노드와 답변노드를 분리했다.

 

 

5일차

AI의 힘을 빌려 UI를 더 깔끔하게 만들었다
이제 좀 내가 원했던 디자인이 나오는것 같았다

 

 

 

한 노드가 부모노드 여러개를 가지고 그 아래서 ai에게 질문하면

모든 부모노드의 데이터를 기반으로 답변하도록 했다

코드를 수정했더니 버그가 또 대량으로 나와서 겨우 고쳤다

 

 

중간 결과물

 

처음 계획했던 대로 한눈에도 잘 들어오고 분기도 잘 되고 통함도 잘 된다

2번째 사진에서는 가장 아래있는 노드들이 자신의 부모노드를 바탕으로 답변해

질문의 통합이 잘 구현된 모습을 볼 수 있다