[UNIKER 1기] 비전공자 개발일지(4) | 프로토타입과 AI API 연결하기, 디자인 수정, 방향성 재정립

이전 이야기

 

지난주까지 HTML형태로 프로토타입을 만들고, 디자인 MD를 1차로 적용해보았다.

이번주에는 제작한 프로토타입에 AI API를 연결하고, 디자인 세부 수정과 서비스 방향성 재정립을 해보았다.

 

이번 주 한눈에 보기

 

- 사용 도구: 코덱스, 깃헙

- 산출물: 프로토타입 URL

 

지난주에는 무료 버전 Gemini API를 연결해 테스트를 진행했지만, 크레딧 제한으로 인해 여러 명이 동시에 사용하는 환경에서는 원활하게 작동하지 않는 문제가 있었다. 이에 따라 유니커 주최 측에서 추천해 준 Codex Exec API를 새롭게 연결하기로 결정했고, 우선은 로컬 환경에서 안정적으로 작동하는 것을 목표로 개발을 진행했다.

 

이번 주에도 팀원끼리 역할을 나눠 진행했다.

 

(1) 프론트엔드: 세부 디자인 수정, 폰트 적용 문제 해결

(2) 백엔드: 코덱스 API 연결

(3) 디자인: 디자인 MD 수정

 

나는 이중에서도 프론트엔드를 담당했다.

 

---

1.  HTML 초안 수정하기
QA 수행 기준 HTML 수정하기

 

지난 번 1차로 만들었던 HTML에 기반해 QA시트도 만들었었다.

 

 

QA 체크리스트는 Claude를 활용해 생성했는데, 무려 97개의 점검 항목이 만들어졌다.

아직 AI API를 연결하지 않은 채팅 기능을 제외한 나머지 기능을 중심으로 QA를 진행했고, 그 과정에서 수정이 필요한 사항들을 하나씩 정리했다.

 

그중 하나는 채팅방에서 이미지가 일부만 정상적으로 적용되는 문제였다. 같은 방식으로 이미지를 등록했음에도 어떤 이미지는 정상적으로 표시되고, 어떤 이미지는 적용되지 않는 현상이 발생했다. 수정 요청을 정확하게 전달하기 위해서는 먼저 원인을 파악하는 것이 필요하다고 판단했다.

 

원인을 확인해 보니 이미지 용량과 파일 확장자가 문제였다. 이미지 용량이 2MB를 초과하면 업로드가 되지 않았고, 지원하지 않는 파일 확장자 역시 적용되지 않았다.

 

그래서 오류 상황을 ① 이미지 용량 초과와 ② 지원하지 않는 파일 형식으로 구분하고, 각 상황에 맞는 경고 문구가 표시되도록 수정을 요청했다.

 

아주 잘 적용된 모습

 

이 외에도 QA를 진행하며 발견한 자잘한 오류와 UI 개선 사항들을 하나씩 수정했다. 이제 HTML 기반의 프로토타입은 어느 정도 안정화되었다. 다음 단계는 AI API를 연동해 실제 채팅 기능을 구현하는 것이다.

 

2. AI API 연결하기

 

팀원이 원래 제미나이 API에 학습되어있던 캐릭터별 채팅 페르소나를 CODEX exec로 옮겨주었다.

팀원이 API 연결법이나 세팅을 깃헙에 올려주어서, 코덱스에게 이를 토대로 HTML에 연결해주고, 버전을 2.0으로 올려달라고 했다.

 

 

목표 설정으로 될 때 까지 진행해달라고 해서, 실행되기를 기다렸는데...

작동이 되지 않았다!!!

 

오류 사항을 수정해 달라고 요청한 뒤, HTML에 API를 직접 연결하는 대신 HTTPS 환경에서 접속할 수 있는 형태로 구현해 주었다. 덕분에 AI API를 연동한 채팅 기능도 정상적으로 테스트할 수 있었다.

다만 현재 페이지는 Codex Exec API를 연동한 팀원의 로컬 서버에서 실행되고 있기 때문에, 해당 팀원이 서버를 켜 두어야만 정상적으로 접속할 수 있었다. 즉, 다른 사람이 언제든 접속할 수 있는 형태로 배포된 서비스는 아니었다.

 

디자인 MD도 조금 수정한 모습..

 

아래는 실제로 구현된 서비스와 AI와의 대화 예시이다.

대화의 맥락은 비교적 잘 이해하는 편이었지만, 같은 표현을 반복하거나 질문만 연달아 이어가는 경우가 많았다. 

 

대화의 질이 떨어지니, 우리 서비스의 차별성이나 독특함이 많이 줄어드는 듯한 문제가 발생했다. 이런 간단한 반응은 기존의 챗 GPT나 다른 AI 메신저 서비스로 할 수 있는데, 뭔가 서비스의 방향성이 명확하지 않으니 이도저도 아니게 애매해지는 느낌..?

 

앞으로 각 캐릭터의 말투와 성격, 대화 방식, 반응 패턴 등을 더욱 구체적으로 정의해 보다 자연스러운 대화 경험을 구현하는데 집중해야 할 것 같다.

 

3. 멘토링

이번 주에도 멘토링을 진행했다. 이번주 멘토링을 통해서는 기능적인 부분(채팅 데이터 저장 등)과 서비스 방향성에 대한 조언을 얻었다.

 

(1) 채팅 데이터는 Local Storage로 관리해보기

현재는 테스트를 진행할 때마다 새로운 채팅방이 생성되어 이전 대화가 모두 사라지는 상태였다. 멘토님께 여쭤본 결과, 브라우저의 Local Storage를 활용하면 채팅 데이터를 저장해 새로 접속하더라도 이전 대화를 유지할 수 있을 것이라는 조언을 받았다.

이 부분은 Codex를 활용해 구현해 볼 예정이다.

---

(2) 지금은 사업성보다 타깃이 중요하다

서비스를 개발하면서 ChatGPT는 대화 품질이 더 뛰어나고, 타 AI 채팅 서비스들은 캐릭터 몰입감이 더 높다는 생각이 들었다. 그래서 지금 아이템이 충분한 경쟁력을 가질 수 있을지 고민이 많았다.

이에 대해서 현재 서비스는 대학생을 주요 타깃으로 설정하는 것이 좋겠다는 피드백을 받았다. 예를 들어 AI 캐릭터도 대학생이라는 설정을 가지고, 방학이나 과제, 시험, 교수님 등 대학생들이 공감할 수 있는 상황을 자연스럽게 대화에 녹여내면 훨씬 몰입감 있는 서비스를 만들 수 있다는 조언이었다.

---

(3) AI 서비스의 차이는 프롬프트가 아니라 구조

처음에는 캐릭터의 말투나 성격을 더 자세하게 작성하면 자연스러운 대화가 만들어질 것이라고 생각했다.

하지만 멘토님은 타 서비스는 단순히 시스템 프롬프트만으로 동작하는 것이 아니라, 사용자의 질문을 분석하고, 가장 적절한 답변을 선택하며, 안전성을 확인한 뒤, 마지막으로 캐릭터의 말투에 맞게 응답을 생성하는 다중 에이전트 구조를 갖추고 있다고 설명해 주셨다.

현재 MVP 단계에서는 이러한 구조를 모두 구현하기는 어렵지만, Few-shot Prompting을 활용해 원하는 답변 예시를 함께 제공하면 응답 품질을 높이는 데 도움이 될 수 있다는 팁도 얻었다.

---

(4) 앞으로의 서비스 방향

멘토링 이후에는 기능을 무작정 추가하기보다 AI 채팅 경험 자체를 고도화하는 방향에 집중하기로 했다.

예를 들어 AI가 먼저 말을 거는 기능이나 음성 기반 대화, 그룹 채팅과 같은 기능은 이후 확장 아이디어로 남겨두고, 우선은 자연스러운 대화와 캐릭터의 일관성을 높이는 데 집중할 예정이다.

이번 멘토링을 통해 단순히 기능을 많이 만드는 것보다, 명확한 타깃을 설정하고 그들에게 자연스러운 대화 경험을 제공하는 것이 AI 서비스에서 가장 중요한 요소라는 점을 다시 한번 확인할 수 있었다.

 

---

 

다음주는 이에 따라 서비스 방향성도 조금 뾰족하게 잡고, 그에 따라 디자인/페르소나 학습을 더 해봐야 할 것 같다!!