Replit으로 한번에 끝내는 멀티 플랫폼 서비스 제작!

Video: Replit으로 한번에 끝내는 멀티 플랫폼 서비스 제작!
Channel: 코드팩토리
Duration: 8m 50s
Source: subtitle (auto, ko)
Transcript:
안녕하십니까, 여러분. 오늘 또 다른 래플릿 영상을 하나 찾아왔는데요. 레플릿이 엄청난 업데이트가 또 있었습니다. 이제는 영상까지 제작이 가능해졌고 멀티에 기능과 다양한 요소들이 통합돼 가지고 훨씬 더 우리가 풀스택으로 무언가를 만들어 내기에 좋은 플랫폼이 돼 버렸어요. 어떤 기능이 생겼는지 우리 확인을 해보고 더 저렴해진 프라이징 모델까지 우리 함께 봐 보도록 할게요. 자, 오늘 일단은 바로 프로젝트를 작업을 하면서 함께 알아볼 건데 어떤 것들이 추가됐는지. 오늘 컨셉은 또 여름이 다가고 있지 않습니까? 그래서 우리가 다이어트를 해야 되니까 체중 감량하는 대시보드를 만든다는 컨셉을 한번 프로젝트를 진행을 해 보도록 하겠습니다. 자, 다이어트가 목표인 사람을 위해서 커팅 대시보드라는 제목의 대시보드를 하나 만들어 줘. 자, 싱글 페이지로 일단은 해 주면은 되고 웹사이트로 만들어 주면은 돼. 자, 우리 뭐 BMI라던가 우리 몸 상태를 체크를 할 수 있는 요소들을 전부 다 포함을 해 주고 어 칼로리, 단백질, 탄수화물, 지방 이런 것들을 우리가 기록을 해서 음식에 관련해서 뭐 그런 것들을 기록을 해 가지고 어 우리 몸 상태에다가 표현할 수 있 우리 다이어트에 어떤 영향을 미치는지 뭐 표현을 할 수 있도록 한번 만들어 줘.

아, 그리고 그 위에다가 뭐 0.5%에서 5%에서 1% 정도 되는 안전하게 우리가 다틀할 수 있는 스프레드까지 차트로 표현을 해 줘라고 한번 이야기를 해 볼게요. 자, 그러면은 자, 기다리면은 자, 이렇게 정리가 쫙 돼 가지고 프롬프트가 들어가는 걸 볼 수가 있죠. 자, 그럼 일단은 바로 웹사이트를 누르고서요. 제작을 시작을 해 보겠습니다. 플랫 모드를 딱히 하지는 않을게요. 왜냐면은 지금 어차피 이걸 만들고서 우리가 어, 시안을 여러 개를 또 동시에 생성을 해 볼 거거든요. 인피닉 캔버스라는 걸 사용을 해 가지고요. 자, 한번 기다려 볼게요. 자, 이렇게 커팅된 시보드라고 바로 나온 거를 볼 수가 있죠. 그래서 체중과 키 그리고 나이 성별을 넣게 되면은 기초 대사량이 나오고요. 어, 체지방률. 체지확률을 이거 돼지 컨셉으로 가야겠죠? 자, 30% 하면은 어, 우리가 지금 얼마를 빼야 되는 거냐? 1일 목표 칼로리 2,000칼로리를 우리가 뺀다고 했을 때 여기서 -500 하는 거를 추천을 하네요. 이거 왜 때문이지?

체지방확률 때문인가 하면은 영양 기준으로 단백질 목표 116g 그리고 지방 한선 53g을 이야기를 하고 있습니다. 자, 그래서 우리가 레코딩을 하면은 자, 우리 몸무게가 여기에 이제 표시가 될 거고요. 기록하면은 우리가 예를 들어서 뭐 이렇게 기록을 하면은 자, 이렇게 생기겠죠. 그죠? 자, 그런데 지금이 날을 기준으로 했을 때 우리가 뺐을 때 안전성 기준이 지금 여기에 있다라는 겁니다. 그죠? 아까 전에 0.5%에서 1% 사이로 우리가 안전 기준을 잡아 달라고 했으니까. 자, 그리고 여기에다 우리가 만약에 어, 기록을 한다면은 여기서 단백질 닭가슴살 하고 보통한 뭐 400칼로리 뭐 이렇게 하고 단백질 한 20g 들어가죠. 탄수화물 뭐 5g 5g이라고 할게요. 자, 기록하면은 자, 이렇게 진행이 들어가고 우리가 어떤 부분들을 더 키워야 되는지 자, 그리고 우리가 칼로리 얼만큼 더 먹을 수 있는지 이렇게 정확히 나오는 거를 볼 수가 있어요. 자, 그리고이 업데이트에 따라서 지금 자, 여기에 우리 단백질 충족도와 지방 하안선까지 업데이트가 됐고요.

총 칼로리 밀도 분석까지 다 나오는 걸로 볼 수가 있습니다. 자, 우리가 왜 플래닝 없이 그냥 일단은 만들었느냐? 자,이 위에 있는이 캔버스를 누르게 되면요. 우리가 인피닛 캔버스라는 걸로 이제 들어갈 수가 있습니다. 그죠? 자, 그러면은이 전체 화면을 우리가 전부 다 활용을 할 수가 있게 되는데이 친구를 누르면요, 바로 여기 레퍼런스가 들어가고요.이 대시보드를네 가지 스타일로 보여 줘. 리니어 미니멀 스타일, 그리고 노션 따뜻한 톤 스타일, 그리고 후프 다크 데이터 스타일, 그리고 애플 헬스의 친근한 톤네 가지를 우리가 이렇게 넣어 주면은요. 자, 실행을 했을 때 어, 스펠링이 틀렸지만 뭐 상관없습니다. 자, 바로 이렇게 밑에네 개의 플레이스 홀더들이 생기는 걸 볼 수가 있어요. 그래서 병렬로 작업이 되고요. 전부 다 어, 독립적으로 이렇게 실행이 되기 때문에 어떠한 순서 상관없이 그냥 먼저 끝나는게 먼저 끝나는 형태로 우리가 시간을 아껴서 컨셉을 확인해 볼 수가 있어요. 자, 그리고 여기서 마음에 드는 거 하나를 골라서 거기서부터 우리가 또 이제 파생시켜 나가면은 된다라는 거죠.

자, 대결 했더니 이렇게네 개의 디자인이 나온 걸 볼 수가 있죠. 자, 이렇게 드래그해 가지고 우리가 선택을 할 수도 있고요. 그냥 원하면은 이렇게 막 움직일 수도 있어요. 그죠? 자, 그리고 재미있는게 자, 이거는 우리가 웹사이트를 만들어 달라 했으니까 웹사이트가 만들어졌고 자,이 밑에는 지금 디자인이라고 돼 있습니다. 그죠? 그러니까 이걸 기반으로 우리가 그냥네 개의 디자인만 만든 거예요. 그래서 우리가 실제로 들어가면은 뭐 그냥 HTML 파일입니다. 실제로 무언가를 만들어서 우리가 이걸 디플로이 할 수 있는게 아니고요. 자, 그럼 여기에서 예를 들어서 내가 뭐이 다크 데이터 테마가 마음에 든다. 어, 이거 좀이 제발자들 취향이죠. 그죠? 이게 마음에 든다라고 하면은 어떻게 하면 되냐? 자,이 디자인을 우리 웹사이트에 적용해 줘라고 말을 해 주면은이 디자인을 기반으로 바로 우리 웹사이트를 제작업하게 된다라는 거죠. 자, 완료되니까 바로 그냥 이렇게 적용이 된 거를 볼 수가 있죠. 자, 그래서 우리가 굉장히 직관적으로 선택하고 그냥 프롬프팅해서 바로 결과를 얻을 수 있습니다.

자, 그럼 일단 컨셉이 정해졌고 디자인이 정해졌으니까 어, 기능은 우리가 조금 추가해 보면 좋겠죠. 7일 로테이션 식단 생성기를 추가해 줘. 한식 양식 둘 다 옵션을 제공을 해 주고 각 메뉴 카드를 누르면 레시피 그리고 조리 시간 그리고 왜 커팅에 적합한지 이유까지 설명을 해 줘라고 이렇게 넣어 보도록 할게요. 자 그러면은 바로 페이지 또는 기능을 만들어 주겠죠. 자 뭐가 추가됐는지 내려가 보면은 자 이렇게 7일 로테이션 식단 플래너가 한식 양식 이렇게 만들어진 거를 볼 수가 있고요. 자 근데 당연히 이거는 조금 어떻게 보면은 기계적이잖아요. 그죠? 그래서 아마 우리가 무게를 뭐를 입력을 하든 똑같이이 결과가 나올 겁니다. 자, 이게 모두 똑같이 항상 나올 거기 때문에 조금 효율이 좋지는 않다. 자, 그러면은 어떤 식으로 우리가 하면 좋냐? AI 분석을 통해서 우리가 우리 몸의 상태에 적합하게 만들어 줄 수 있으면 좋겠죠. 그죠? 자, 보통 우리가 AI 통합을 시키려면은 굉장히 조금 힘든 과정을 우리가 경험을 해야 되는데 뭐 API 키도 넣어야 되고 막 뭐 스트리밍이 되는지 안 되는지 체크하고 뭐 다양한 조금 열받는 상황들이 있습니다.

자, 그런데 우리 레플릭 같은 경우에는 그냥 바로 우리 레플릭 계정에서 결제가 되기 때문에 그냥 만들어 달라고 하기만 하면 돼요. 자, 7일 로테이션 식단 플래너가 너무 프레임워크 같이 짜여져 있는데 AI를 활용해서 지금 내 몸 상태를 실제로 분석을 하고 그거에 대한 결과로 로테이션 식단 플래너를 만들 수 있도록 해 줘라고 우리가 한번 요청을 해 보도록 할게요. 그럼 이렇게 들어가겠죠? 자, 되겠더니 바로 이렇게 AI 맞춤 7일 식단 플래너라는 섹시 생겼고요. 여기 AI 마크 생기고 한번 AI 식단 생성을 지금 해 볼게요. 그러면은 분석 중이 들어가고요. 제가 뭐 키라던가 뭐 어떤 작업을 따로 한 거 하나도 없습니다. 그냥 완성이 됐다고 한 상태에서 바로 요청을 넣은 거예요. 자, 기다렸더니 자, 이렇게 식단이 나오는 거를 볼 수가 있죠. 그죠? 전부 다 AI가 작업을 한 요소들이고요. 어, 전략까지 짜 줬어요. 그죠? 자, 그래서 실제 우울이 몸무게와 키 그리고 나이 그리고 체지방에 맞춰서 식단이 나온 거를 확인할 수가 있습니다.

그래서 이런 식으로 여러분이 작업을 해 주시면 되고요. 자, 새로운 기능 중 하나인 영상 한번 만들어 보도록 할게요. 지방 커팅의 작동 원리를 90초 설명 영상을 만들어 줘. 자, 키네틱 타이포그를 에너지 균형, 단백질의 역할, 정책기 곡선 설명하고 인스타 릴스로 만들어줘. 공유할 수 있도록. 자, 이렇게 해 가지고 우리가 릴스로 뭐 홍보라든가 광고까지 할 수 있는 그림으로 한번 진행을 해 보도록 하겠습니다. 자, 작업이 완료됐습니다. 자, 영상이 만들어졌고요. 자, 릴스 사이즈로 해 달라 그랬는데 그거는 조금 아쉽네요. 안 된 거는. 자, 이렇게 내릴 수도 있고 올릴 수도 있고 여섯 개의 섹션을 지금 나눠서 됐어요. 에너지 균형, 섭취량 뭐 이런 식으로 애니메이션이 나오도록 자 이렇게 설명하는 식입니다. 자, 이게 실제 영상을 렌더링하는 방식보다는 사실 어, 자바스크립트 기반으로 우리가 애니메이션을 해서 그거를 영상화 한 거죠. 네. 그런 형태로 우리가 작업하게 된다라고 생각하시면 될 거 같습니다. 자, 그래서 뭐 차트 같은 것도 이렇게 잘 들어가고요.

자, 그래서 우리가 래에 인피닉 캔버스를 사용해서 우리 서비스를 만들고 그걸로 디자인을 여러 개 시안을 받아 가지고 마음에 드는 디자인으로 새로 웹사이트를 세단장을 한 다음에 AI 기능까지 넣고 그리고 애니메이션까지 작업을 해 보는 과정을 우리가 함께 진행을 해 봤는데요. 여러분이 급하게 빨리 만들어야 되는 서비스가 있다면은 정말 래플린 만한게 또 없습니다. 그래서 래플리도 한번 꼭 사용을 해 보시고 만약에 이제 설명에 있는 링크를 사용해서 여러분들이 결제를 하시게 되면은 여러분이 추가 혜택도 받을 수 있으니까 어 많은 관심 부탁드리고요. 자, 그럼 저는 다음에 더 좋은 영상으로 찾아뵙도록 하겠습니다. 이번 영상이 좋았다면 구독과 좋아요 설정 그리고 하이보이까지 해 주시면은 감사하겠습니다. 쏘as지.