소개
지난시간에는 안티그래비티로 html로만 만들어봤다면 이번엔 스터디장님이 알려주신대로 스티치로 예쁜 UI를 만들어 앱을 개발해 보려고 했습니다.
10대 소녀가 좋아할만한 다꾸스타일로 하면 아이들이 좀더 편하게 이야기할 수도 있겠다 싶어 예쁘게 만들어보는게 목표입니다 ^^!
그런데 오늘따라 스티치가 작동이 안되서...
피그마 make 기능으로 요청을 해서 진행했습니다.
진행 방법
1. 피그마로 앱 디자인하기
https://www.figma.com/
스티치보다 디자인이 조금 마음에 안들지만 일단 시작해봅니다.
피그마에서 만들어달라고 하니, 웹을 만들어버려서 '앱을 만들지 말고 디자인만 해줘'라고 다시 요청했어요.
모바일용 디자인을 해줘. 앱을 만들지 말고 디자인만 해줘.
10대 소녀가 좋아할만한 디자인으로 다꾸스타일. 제목은 '클로이의 마음친구'
다꾸스타일이란 소녀들이 좋아하는 스티커로 다이어리,필통등 꾸미는 작업이야.
홈에는 블링블링 스티커들이 있고 스티커를 클릭하면 반응형으로 커졌다 작아졌다 반응이 있어야해.
한국어와 영어버전 토글 선태가능하고, 기본은 한국어야.
1.감정 입력 방식
사용자가 현재 감정을 직접 텍스트로 입력할 수 있도록 구성
감정을 잘 모를 경우 : 드롭다운을 열어 관련된 감정 언어를 선택하면 해당 감정이 자동으로 입력되도록 설계함
2.챗봇 캐릭터 설계
-챗봇을 단일 성격이 아닌 여러 캐릭터 유형으로 구성
친구 같은, 언니 같은, 유머러스한 성격 등
감정입력, 챗봇 선택 후 대화 시작하기
캐릭터가 대화를 하면서 10대 소녀를 위한 스티커를 선택하도록 하기도 함. 예를들어 하트나 데일밴드등.
3.사용 흐름
-사용자가 대화창에 들어가면 챗봇이 먼저 다정한 말투로 말을 걸어주는 구조
-캐릭터가 마음에 안들경우 챗봇을 바꿔서 대화할수도 있고, 홈으로 나가는 버튼도 있음
코드가 있어 다운로드를 합니다.
2. 안티그래비티로 앱개발하기
피그마로 만든 디자인을 이용하여 앱을 구현해달라고 했어요.
혼자 계획 세우고 알아서 잘 합니다 :)
중간에 문제가 생겨 프롬프트와 계획등이 모두 날라가버렷..어요..
3. 안드로이드 스튜디오 연결
폴더를 정해서 작동시킵니다. 그런데 오류가 나더라구요.
폴더명에 한국어가 있어라고 하여 폴더명을 영어로 수정해주었어요.
(이 과정에서 열려있던 폴더를 모두 닫느라 안티그래비티를 껐다 다시 켰는데 지금까지 구현했던 모든 정보가 다 날아가버렸어요 ㅠㅠ... 폴더명이 바뀌니 다 사라지는군요.음하하하!!!)
폴더명을 영어로 수정해주었어요.
안드로이드 스튜디오에 폴더 지정해서 읽을때 시간이 꽤 오래 걸립니다. 오류났나? 고민하면서도 끝까지 기다린 후(5분정도) 위 상단에 재생버튼 누른후 3분 정도 또 기다린것 같아요^^
드디어 이제 보이네요~~
** APK 다운로드
왼쪽 상단에 메뉴버튼(사선)을 누른 후 Build - Generate App Bundles or APKs - Generate APKs 를 누르면 APK다운로드가 됩니다.
APK 파일을 핸드폰으로 전송해서 모바일에서 직접 사용해보려고 하는데 카톡전송도 안되고, 메일 전송도 안되는군요....
클로드가 알려준 3가지 방법중 1번 방법으로 모바일에 설치해서 작동 해 봤어요.
아직 디테일하게 수정할 부분들이 많지만 일단 여기까지! 안드로이드 스튜디오 연결해봤다는점에 만족합니다!
결과와 배운 점
안티그래비티가 너무 쉽게 다 해주니 자꾸 이용하게 되는데 앞으로 클로드코드나 vs code 등도 다양하게 활용해볼 생각입니다.
LLM API를 연결해서 대화를 매끄럽게 이어나가는 챗봇을 만드는게 목표입니다. 다음번에 도전! 해보겠습니다. 10대 소녀의 마음을 확! 사로잡는 세심하고 따뜻한 문체를 팍팍 넣어서!!!
평소 챗GPT를 많 이 사용했는데 바이브코딩을 하면서 클로드가 정말 좋습니다!!
클로드 맥스 구독 ㅠㅠ은 슬프지만, 막히는 부분 모두 알려주고, 정말 잘하는군요!! ㅎ
읽어 주셔서 감사합니다 :)
