[Dev] LLM을 활용 단어장 앱 개발 일지 001: UI 구성

전체적인 구상도

아이디어는 다음과 같다. GPT api를 연결해서 단어의 질문을 받는다. 단어에 대한 뜻이나 예문을 저장하고 폴더는 태그형식으로 담아 놓는다. (태그도 GPT가 생성한다) 태그는 직접 수정할 수 있기 때문에 즐겨찾기 기능을 따로 넣지 않고 즐겨찾기처럼 찾을 수 있는 태그를 단어에 달아 놓는다. 스트릭을 통해서 공부를 얼마나 했는 지 볼 수 있다. 캘린더에 백준 스트릭처럼 출석 도장을 찍는다. 백준 그대로 처럼 그래프 뷰도 만들 예정이다.

api 입력 창

처음에는 GPT api 만 활용하려고 생각했는데 기회만 된다면 다른 LLM model을 택하여 돌려쓸 수 있도록 하는 방법도 생각 중에 있다. 근데 사실 더 고민인 건 개인 api를 사용해야 할 지, 인 앱 결제 방식으로 내 api를 사용하는 방식으로 할 지 고민도 있다. 또한 백엔드 없이 gpt api를 요청할 수도 있는데 백엔드 지식을 더 쌓을겸 이전 대회에서 사용했었던 FastAPI를 다시 사용할 지도 고민이다.

채팅 창

단순 채팅 창이다. 현재로서는 앱바 중앙에 위치한 버튼을 통해서 기본 홈페이지로 들어갈 수 있다. 만약 채팅 기록이 있다면 현재 채팅 기록에서 단어에 대한 질문을 받아 내가 데이터를 전처리 시킨 방식으로 단어장에 삽입되는 구조를 다이얼로그를 띄어서 사용자 취향에 맞게 단어를 저장할 지 말지를 고를 수 있다.

 

이것에 대한 설정을 이후 설정 페이지에서 세부적인 구성을 해볼 예정이다.

채팅 서랍

채팅을 보관할 수 있는 Drawer 위젯이다. 디자인은 GPT 앱 그대로 참고하였다.

단어장 창

단어를 리스트 형식으로 볼 수 있도록 만들었다. 아직 제대로된 리스트 디자인은 아니지만 대략적으로 단어, 뜻, 예문, 태그 형식으로 저장할 것이다.

스트릭 창

개인적으로 마음에 드는 페이지이다. 캘린더 뷰가 깔끔하고 아래 업적과 비슷한 문구를 이모지와 함께 추가했더니 그럴 듯 해보이는 디자인이 완성되었다. 이 부분도 아직 보완해야할 부분이 많다.

태그 창

저장된 태그를 그리드 뷰를 통해서 구성했다. 등록된 태그가 몇개인지 개수도 나온다. 태그 박스를 누르면 태그가 적힌 단어를 볼 수 있다. 그 단어는 어떤 페이지 뷰를 통해 볼 수 있도록 할 지 정하진 않았다. 방금 생각한 건 페이지 만큼 크기가 큰 다이얼로그(모달) 형태로 보는 것도 괜찮을 것 같다는 아이디어가 떠올랐다.

설정 창

일반 설정창이다. 원래는 setting_ui 라는 안드로이드, iOS 의 기본적인 디자인으로 구성된 패키지를 찾아내어서 그것을 사용하려다가 생각보다 디자인이 구린 거 같아서 위에 처럼 만들었다. 저 리스트를 탭하면 드롭다운 방식으로 나오게 할 지 새로운 페이지로 들어가서 설정할 지도 아직 정하진 않았다.

그 외

만드는 건 4~5시간 걸린 것 같다. api 입력 창만 따로 작업하다가 나중에 각좀 잡히면 하려고 이전에는 머릿속으로 구상만 했었다. 근데 사실 이번에 한 것도 구상이 다된 상태는 아니었고 여유롭게 하다가 재미난 걸 넣어보자 마인드로 만들었다. 이거 안돼 저거 안돼, 자꾸 쳐내다가 언제 시작하지라는 답답함이 들 때 시작하는 게 제일 효과가 좋은 것 같다. 일단 이거는 오랫동안 꾸준히 만들 프로젝트기 때문에 마음의 여유를 가지고 할 예정이다.

 

가장 고민이 컸던 것은 백엔드이다. 파이어베이스를 사용해도 좋을 거 같지만 괜히 다른 프레임워크를 공부하고 싶어서 FastAPI나 Express를 고민했었다. 어렵게 접근할 수 있는 것들은 다 사용해보고 싶다. 근데 일단 LLM중에서 LangChain은 JS, Python 모두 지원하지만 Python이 좀 더 대중적이기 때문에 FastAPI를 사용해야 할 것 같다. JS도 나중에 웹 분야로 가게 되면 공부를 해놓는 게 좋을 거 같아서 자꾸 머릿속에 생각이 든다. 프로젝트 외적으로 공부할 수 있는 방법 같은 게 있을 지 모색해봐야 할 것 같다.