프로젝트 개요

프로젝트 이름: OA

기간: 3.14 ~ 4.2

개발에 사용한 기술: Next.js, redux tool kit, tailwindcss, Firebase Auth/Store, flutter

배포에 사용한 기술: CloudFlare Pages, Firebase, Google Play Store

목적 및 목표

최근 chat gpt가 뭐든지 해내는 만능 AI로 떠오르고 있었고 부모님들이 궁금해 하면서도 사용하는 방법을 몰라 사용하지 못하고 있었던 것을 알게 되었고 "편리하게 사용할 수 있는 앱을 만들어야겠다"라고 생각해 시작했었고 초기에 뉴스에서 "기자 자신에 대한 정보가 안나온다", "확실한 맞는(fact) 정보와는 다른(wrong) 정보가 나온다", "이러다 스카이넷이 탄생한다" 같은 이상한 말을 하고 있었던 것을 기억해 냈다.

개발자 아닌 다른 입장에서 보면 만능 AI가 이런 행동을 하고 있는 것은 당연히 말도 안되는 일이고 인류에 위협이 될 무언가라고 생각하지만 또 한편으론 "왜 그런지 찾아보지도 않고 저러는가" 라고 생각을 했었고 이런 생각을 하면서 "나는 제대로 왜 저러는지 알고 있는가?" 부터 다른 사람들이 AI를 좀 더 이해하고 편리하게 생산적으로 사용했으면 좋겠다라고 생각해 OA라는 프로젝트를 생각하게 되었던 것 같다.

위에 대한 대답은 되지 않지만 chat gpt가 제공하는 강력한 기능을 많은 사람들이 좀 더 효율적으로 사용했으면 좋겠다고 생각해 최대한 api를 이용해 설정할 수 있는 값들은 설정할 수 있도록 구현했고 AI를 이해하는데 조금이라도 도움이 됬으면 좋겠다고 생각해 OA를 다루는 방법과 왜 설정을 해야하는가에 대해 자세히 설명하는 페이지를 작성했다.

또한 최근에는 AI 대답을 구체적으로 표현하기 위한 프롬포트 엔지니어, 프롬포트 판매 등 관련된 산업들이 생성되고 있다.

최종적인 목표는 사람들이 AI의 prompt에 대한 중요성을 이해하고 사용할 수 있도록 돕는 것이다.

나는 지금도 이 회고록에 대한 검수를 chat gpt에게 도움을 받으며 작성하고 있다.

기획

기획 과정

사람들이 어떻게 하면 prompt의 중요성을 알게 될까?
어떻게 하면 일반 사람들에게 AI 용어를 좀 더 쉽게 표현할 수 있을까?
쉬운 접근성을 위해 모바일 앱을 만들자

기획 결과

OA를 이용해 설정을 하고 안하고의 차이점을 보여주는 사진을 보여주는 페이지 추가
AI를 어떻게 사용하면 더 좋은지 알려주는 페이지 추가
패널티, 역할 등 한국어로 바뀌기 적당한 단어로 바꾸고 부연 설명을 이해하기 쉬운 단어들로 구성해 설명
flutter를 이용해 WebView를 띄워 앱을 만듬
chat gpt에서 현재 제공하는 서비스와 같이 채팅을 하는 앱으로 만듬

설계

UI/UX 설계

최대한 유저 친화적으로 css나 기능들을 만들 수 있도록 고려했고 모바일에도 최적화하기 위해 노력했다.

모바일 앱에도 최대한 사용할 수 있도록 반응형을 고려해 강력한 css 프레임워크인 tailwindcss를 사용해 어디에서든 최적화된 레이아웃을 보여줄 수 있도록 함
채팅 서비스와 같도록 버블을 생성하고 api의 응답을 받는 동안 애니메이션을 구성함
유저들이 현재 어떤 AI이름과 유저 이름을 사용하고 있는지 확인 가능하게 profile 페이지에서 확인 가능함
사용자가 쉽게 역할, 패널티를 줄 수 있도록하는 설정 dialog
Header navbar를 만들어 사용자들이 편하게 url 이동 가능하게 함
flutter에서는 Web의 Header를 삭제하고 app의 Drawer를 사용해 이동 가능한 navbar를 만듬
회원가입과 로그인에 로딩 컴포넌트를 넣어 현재 회원가입, 로그인 중인 것을 확인 시킴
익명은 최종 접속일로부터 7일 후 삭제 경고문

DB 설계

DB를 사용하는 일은 별로 없었지만 설정을 저장하는 기능을 사용해야한다고 생각해 Firebase의 Store를 사용해 만약 로그인이 되어있다면(익명이 아니라면) write, update, create가 가능하게 했다.

email을 key로 setting에 대한 Object를 저장할 수 있도록 했다.

users -> email -> { aiName:string userName:string concepts:string frequencyPenalty:string presencePenalty:string topP:string }

기술 스택

Next.js

api 요청에 대한 보안이 가능하고 api 작성이 가능
route 기능이 간단
사이드 프로젝트를 할 때 환경설정이 제일 익숙함

Redux tool kit

dialog를 열고 닫을 때만 사용하지만 전역적으로 사용할 때 간단함

tailwindcss

반응형에 강력
빠른 css 작성 가능

Firebase

배포 없이 빠른 벡엔드 기능 제공
Auth로 인증, 인가에 대한 빠른 개발
store로 데이터 베이스 이용 가능

flutter

webview만 사용하는데 빠른 개발 가능

느낀점

1. open ai api

프로젝트의 중심이 되는 open ai api에서 설정을 어떤식으로 줘야하는지가 문제였다.

제일 먼저 내 이름과 ai의 이름을 기억하면서 대화를 이어 나가는 것으로 시작하게 되었다. prompt를 어떤식으로 작성해서 줘야하는지 이해하고 이 api는 바로 전 대화만 기억하고 나와 대화하는 전체적인 내용을 기억하며 대화를 이어나가는 것이 아니라는 것을 알게 되었다.

어떤 prompt를 줘야 계속 유저가 설정한 내 이름, ai 이름, 역할을 유지하면서 대화를 할 수 있을까에 대한 고민이 있었고 해당하는 적절한 prompt를 구성해 유지할 수 있었다.

이름, 역할을 유지하고 대화를 이어나갈 수 있는 부분에만 2일이 넘게 걸린 것 같다.

이것에 대한 자세한 이야기는 회고록 개발편에서 하는 것이 좋은 것 같아 개발편에서 작성한다.

2. 기획 하는 것의 어려움

사용자의 니즈를 파악하고, 구체적인 기능과 디자인을 정하는 것이 쉽지 않았다. 특히 모바일 환경을 고려하면서 기획을 하려고 하니, UI/UX 디자인과 기능에 대한 아이디어에 더 많은 제약과 고려사항이 생겼었다.

맨 처음엔 아무 생각이 없어서 web을 app처럼 만들기 위해 노력하다 너무 구려보여서 다른 작업을 하면서 생각하는 시간을 가졌었고 WebView에서는 web의 Header Navber를 없애고 flutter에서 NavBar를 모바일 native 같이 보이는 Drawer를 사용하기로 했다.

그 후부터는 계속 아이디어가 나와 그래도 웹뷰를 이용해 최대한 모바일 앱과 같은 결과물이 나왔다고 생각한다.

나만 사용했던 프로젝트로 나만 생각하며 만들었던 것과 달리 진짜 사용자들이 어떤 점에서 불편함을 느낄까, 어떤식으로 기능이 작동해야 안 불편할까 등 진짜 사용자 관점에서 기술을 정하고 코드를 생각하면서 작성했던 것 같다.

3. 처음 사용하는 flutter와 webview

일단 ios로도 낼지도 모르니 flutter를 사용하게 되었다. 처음 flutter를 이용해보는 프로젝트지만 간단한 기능들만 사용할 줄 알고 공식문서는 커녕 어떻게 package를 관리하는지도 몰르고 시작했다.

바로 머리를 박아가며 flutter를 시작하게 되었고 webview는 커녕 Drawer의 존재조차 몰라 어떤식으로 해야할지 감도 잡히지 않았지만 우선 webview를 먼저 띄우는 게 먼저라 생각해 webview에 대해 검색해보고 관련 패키지를 다운받아 띄우기에 성공하고 너무 웹에만 의존하며 못생겨 보였다.

후에 공식문서를 보면서 공부하며 Drawer이라는 component를 알게되었고 Drawer를 만들어서 웹의 url이동의 navigator 역할을 할 수 있도록 만들었다.

WebView를 이용해 bridge를 이용해 로직을 작성하는 것은 지금도 어려웠지만 조금은 이해한 것같다.

OA 회고 - 기획과 설계

Table of Contents