소개
노션, 옵시디언, 좋다는 메모 앱은 다 깔아봤거든요? 근데 정신 차려보면 결국 또 카톡 '나와의 채팅'에 다 때려 넣고 있는 제 자신을 발견해요.
이미지 복사해서 쏘옥 넣고, 노트북에서 폰으로 파일 옮길 때도 쓰고, 나중에 다시 볼 링크도 그냥 툭 던져놓고... 이게 참 무서운 게, 뭘 써도 귀소본능마냥 결국 카톡으로 돌아오게 되더라고요. 데이터는 이 앱 저 앱 흩어져서 나중에 찾으려면 머리만 아픈데 말이죠.
그래서 결심했습니다! "카톡에 쌓인 쓰레기(아니, 보물들!)를 알아서 정리해 주는 앱을 만들자!"
Antigravity를 이용해서 만들기 전에, 일단 Google AI Studio Build로 가볍게 슥슥 만들어 보기로 합니다...
진행 방법
제미나이와 이야기를 나눠보아요.
내가 카카오톡 '나와의 채팅'을 참고하고 싶은 것 텍스트 복붙, 캡쳐이미지 저장과 노트북-PC 간 파일·텍스트 전달용으로 쓰고 있어서 인박스가 끝없이 누적되고 카테고리, 태그, 프로젝트 단위로 재구조화가 안 돼.
그래서 오늘 간단하게 Google Ai Studio build로 앱을 하나 만들어보려구.
카톡 나와의 채팅을 자동 분류·요약해서, 두 번째 브레인(정리된 인덱스)로 만들어주는 정리 마법사? 그런 앱인거지... Google Sheet로 자동 저장되도록 하면 좋겠고..
노트북LM과 연동되게 할 수 있다면 그쪽으로 해도 좋겠지?
이 아이디어에 대해 검토해주고, 한번 정제된 언어로 정리를 해 준 후에
build에서 어떻게 만들면 좋을지 논의를 해 보자.몇 번의 논의 후...
Google Stitch에서 UI 디자인을 뽑아보기 위해 대략적인 프롬프트를 만들어 봅니다.
1. 프로젝트 개요
앱 이름: KBB Intelligence
핵심 컨셉: 정보 과부하를 겪는 사용자를 위한 '디지털 젠(Digital Zen)' 스타일의 데이터 게이트키퍼입니다.
디자인 철학: 복잡함을 최소화하고 정보의 응집도를 높여 사용자의 인지 부하를 줄이는 데 집중합니다.
2. 스타일 가이드 (Style Instruction)
컬러 팔레트: 눈의 피로를 덜어주는 Slate/Zinc 계열의 무채색을 기본으로 하고, 핵심 액션 버튼에만 Teal 또는 Indigo 색상을 포인트로 사용합니다.
타이포그래피: 가독성이 뛰어난 Sans-serif 계열(Pretendard 등)을 사용하며, Bionic Reading(단어의 초반부를 강조) 옵션이 구현될 수 있는 레이아웃을 선호합니다.
컴포넌트 특징: * Progressive Disclosure: 상세 정보는 Accordion이나 Modal 뒤에 숨겨 처음에 핵심만 보이게 구성합니다.
Zen Mode: 대시보드에서 사이드바와 메뉴를 숨기고 텍스트에만 집중할 수 있는 미니멀 뷰를 포함합니다.
3. 핵심 UI 레이아웃 요구사항
입력 & 분석 뷰: 원본 데이터(Raw)와 정제된 데이터(Markdown)를 직관적으로 비교할 수 있는 2단 분할(Split) 뷰를 생성해 주세요.
시각적 피드백: 데이터 익명화 처리가 완료되었음을 알리는 '보안 자물쇠 아이콘'과 진행률을 시각화하는 Progress Bar가 눈에 띄어야 합니다.Stitch가 만들어준 앱... 멋진데 뭔가 제 스타일은 아닙니다.
Build를 이용하여 앱을 만들 때는 UI 디자인을 어느정도 확정하고 만드는 것이 좋더라고요..
나중에 바꾸면 너무 번거롭습니당.. ㅜㅜ
귀찮기 때문에 또 제미나이에게 해줘!를 시전합니다.
음... 디자인 하나만 더 해보자. 귀엽고 동글동글하고 포근한 느낌으로. 코튼캔디 스타일? 지금 나온 디자인은 멋지고 말 그대로 지적이고 냉철한 느낌이지만 좀 차가워어어.... 비즈니스 측면에선 아주 좋지만 나도 취향이라는게 있잖니 ㅎㅎ이 때, 제미나이가 또 오지랖을 떠네요. 이미지 만들어달라는 얘기 안했는데...
Stitch에 넣을 프롬프트 달라고 한 건데... 자기가 직접 만들어 버립니다.
한글이 엉망... 근데 제법 맘에 들어요 ㅋㅋㅋ
그래서 이 디자인을 참고해서 간단하게 만들어 보기로 합니다.
앱 이름도 Fluffy Intelligence 로 바꾸고요~
구글 드라이브나 Sheet로 내보내기를 해야 하기 때문에 로그인 화면으로 시작하고..
함께 할 동료!를 고릅니다.
직무를 선택하면 아래 추천 카테고리가 뜨는데, 다 지우고 스스로 정해도 좋아용!
카톡에 자주 저장하는 데이터 유형에 따라 카테고리를 만듭니다.
저는 레퍼런스, 백업, 좋은글, 일상, 새소식, 프롬프트 이렇게 만들어 보았어요.
그 다음 단계는 본인의 API를 등록하는 단계입니다. Gemini API와 구글 드라이브/캘린더 접근에 필요한 Google Client ID를 입력해요. 일단 Gemini API만 넣어봅니다.
API를 입력하면 다음 화면이 나오는데요, 연결상태를 확인하는 상태창과 데이터를 넣을 수 있는 입력창이 나옵니다. 파일을 드래그 드롭해도 되고요!
테스트를 위해 과거 카톡 txt를 긁어서 넣어볼게요.
카테고리별로 자동으로 분류를 해 주고, 혹시 분류가 마음에 안 들면 이동. 필요 없다 싶은 것은 삭제도 가능합니당.. ㅎㅎ 지금은 시뮬레이션 상태라 선택 동기화를 누르면 실제로 동기화가 되지는 않고 완료 화면이 뜹니다~ 링크도 따로 모아주고 대략적인 내용? 이름도 달아줘서 좋더라고요!
결과와 배운 점
아직 제대로 만들어진 상태는 아니라서 많이 수정이 필요하지만, 쌓여만 가는 나와의 채팅 속 데이터를 분류해서 쓸만한 상태로 가공하는 과정을 쉽게 할 수 있겠구나 싶어서 뿌듯-합니다!
앞으로 열심히 수정해서 일단 '저를 위한' 충실한 앱을 만든 후에, 다른 사람들도 쓸만한 앱으로 발전시켜보려고 해요!
읽어주셔서 감사합니다~~~
