소개
시도하고자 했던 것과 그 이유를 알려주세요.
작년에 기획했던 아이디어를 실제로 웹/앱으로 직접 구현해보고 싶었습니다.
1차는 노코드로 구현할 수 있는 것들로 우선 뼈대를 만들고
2차로는 골관절염이나 만성신장병(CKD), 기타 만성질환 환자들의 데이터를 넣었을 때, 온전히 동작하는 서비스를 제작해 보고 싶었어요.
1주차에 배운 내용은 Google AI studio를 활용해 PRD(Product Requirements Document, 제품요구사항 동의서)를 짜고, 이 내용을 'Lovable'에 붙여 넣어서 웹페이지를 만드는 것이였습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Google AI studio, Lovable
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
우선 서비스에 대한 메인 컨셉을 최대한 상세하게 설명하고자 했습니다.
다시 읽어보니까 상세하게 적으려고 했으나 모호한 내용들이 꽤 있네요. 프롬프트를 '잘' 짜는 것이 정말 중요한 것 같습 니다.
<프롬프트>
특정 질병(골관절염, 만성신장병 환자 등)을 위한 AI 기반 맞춤형 식단추천 및 건강관리 서비스를 만들거야
메인컨셉: 식단관리 리워드 웹/앱, 식단 및 건강기록 모니터링
배달음식 사진, 구내식당 사진 및 기타 자신이 촬영한 사진을 기반(영양정보 없음)으로 이미지를 인식해서 영양성분(탄수화물, 단백질, 지방, 비타민 등), 칼로리, 섭취 g 수 등을 파악한다.
입력 값(기본: 사진)은 사용자가 구체적인 수치를 알고 있을 경우, 후보정이 가능한 페이지가 따로 존재한다.
(예시: 불고기 200g 섭취, 닭가슴살 100g 섭취)접속 시, 특정 일자, 시간 부터 사용자의 개인정보(키, 몸무게 -> 필수, inbody 사진인증은 선택)을 반영한 귀여운 캐릭터를 생성한다.
음식을 섭취할 때마다 영양성분을 반영하여 캐릭터에 적용한다.
캐릭터 이미지는 너무 현실적인 인간 캐릭터가 아닌 구데타마, 망그러진 곰, 핑크퐁과 같은 귀여운 캐릭터다.
사진으로 수치화 된 영양소는 캐릭터 밑에 탄수화물, 단백질, 기타 필수 영양소 등이 구분되어 누적되어 수치가 쌓이고, 자신의 기초대사량 또는 운동한만큼 차감된다.
식단 기록은 아침, 점심, 저녁, 간식 으로 일자별로 기록할 수 있고, 간단하게 사진만 업로드 하면 된다.
식단기록과 유사하게 운동기록 기능도 존재한다. 일자별로 진행한 운동의 목표와 달성내용을 timestamp 사진으로 인증한다.
캐릭터에 운동내용을 반영(칼로리 x 만큼 소모 등)하여 하루의 모든 일정을 반영한 캐릭터 상태를 만든다.
사용자의 식단섭취, 운동목표를 작성할 수 있는 기능이 있다.
옆에는 자신이 병이 있다면 그와 관련된 정보를 제공하고 특히 주의해야하는 영양소에 대한 관리, 운동을 추천한다.
관련해서 비슷한 사람들끼리 경쟁을 할 수 있는 챌린지-리워드 프로그램을 운영한다.
위와 같은 앱을 만들려고 해. 이 앱을 제작하기 위해 필요한 정보를 알려줘
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
이제 위 내용을 Lovable에 붙여넣기 해주면 아래와 같은 사이트가 제작됩니다.
1차로 제작된 페이지는 색깔이나, 캐릭터의 모습이 원하던 모습이 아니었어요ㅠ 친근하게 느껴지길 바랬는데 초록색과 파란색은 딱딱한 느낌을 주기도 했구요. 그래서 디자인적으로 개선을 요구했습니다.
". 한국어로 다시 제작해줘 2. 전체적으로 디자인이 너무 딱딱한 것 같아. 친근하고 따스한 느낌으로 다시 바꿔줘.(초록색 말고 주황과 핑크, 빨강을 사용해도 좋아) 초록색 웃는 캐릭터를 팔다리가 있는 귀여운 캐릭터로 바꿔줘."
-> 따뜻한 느낌은 생겼는데, 여전히 캐릭터가 너무 무섭다는 느낌이 듭니다.
제가 예시로 든 건 '망그러진 곰', '리락쿠마' 같은 귀여운 캐릭터였는데,, 계속 아쉬워서 다시 그려달라는 요청을 하다가 사용횟수를 다 채워버렸습니다ㅠ 이 부분은 어제 특강이였던 '민트베 어'님의 AI 이미지 생성을 활용해봐야겠네요.
"캐릭터 표정이 별도로 있는 게 아니라 '망그러진 곰' 캐릭터처럼 귀여웠으면 좋겠어. 다시 그려줘"
-> 팔다리가 있어야 한다고 했지만 자꾸 표정만 나와서 아쉬웠습니다ㅠ
"팔다리를 사람 몸처럼 구분이 되게 그려줘"라는 문구를 추가하고 나서야
-> 팔 다리가 생겼습니다.
제가 생각하는 주문의 내용과 AI가 생각하는 내용이 차이가 있는 것 같아서 프롬프트를 명확하게 넣을 수 있도록 공부를 해야겠어요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
(내용 입력)
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
-디자인과 내용적 요소가 간단하게 구현이 되지만 커스텀 한 영역에서는 많이 아쉬움.
-한 번에 다양한 요청을 많~이 하는 것이 사용횟수를 알차게 사용할 수 있는 방법인 듯.
과정 중에 어떤 시행착오를 겪었나요?
: 사용자를 반영하는 메인 캐릭터의 디자인이 원하는 모습으로 구현되지 않음
도움이 필요한 부분이 있나요?
: 특강에서 나왔던 AI이미지를 활용해 보고 해결이 되지 않을 경우 도움 요청예정
앞으로의 계획이 있다면 들려주세요.
: 웹페이지는 만들었으니 실제 데이터를 넣었을 때 구동할 수 있도록 전개시키고 싶습니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)
