내가 찾은 최고의 AI 코딩 소프트웨어

Ras Mic 구독자 52,600명

요약

이 영상은 Tempo Labs라는 AI 기반 코딩 플랫폼을 활용해 실제 웹앱, 특히 이력서 제작 SaaS를 만드는 전 과정을 상세히 보여줍니다. 영상에서는 GitHub와 Supabase를 통한 인증 연동 및 프로젝트 설정 방법뿐만 아니라, AI 에이전트가 자동으로 랜딩 페이지, 네비게이션 바, 푸터 등 UI 요소를 생성하고 커스터마이징하는 과정을 담고 있습니다. 또한, 에러 메시지 해결 및 SQL 명령어를 활용한 데이터베이스 오류 수정 등 실무적인 팁을 제공해 개발자로서의 생산성을 높일 수 있도록 돕습니다. 최종적으로는 배포 전 사용자 프로필 설정과 링크 공유까지 진행하며 Tempo Labs의 높은 제어권과 실용성을 강조합니다.

주요 키워드

Tempo Labs AI 코딩 웹앱 개발 GitHub 인증 Supabase 사용자 인증 이력서 제작 UI 커스터마이징 배포 에러 수정

하이라이트

🔑 영상은 Tempo Labs를 사용해 AI가 직접 웹앱과 이력서 제작 서비스를 생성하는 과정을 생생하게 보여줍니다.
🚀 GitHub 인증을 통한 프로젝트 시작과 Supabase 연동으로 사용자 인증 시스템을 구현하는 과정을 자세히 다룹니다.
🌟 AI 에이전트가 자동 생성한 랜딩 페이지, 네비게이션 바, 푸터 같은 UI 구성 요소를 수정하고 커스터마이징하는 모습을 확인할 수 있습니다.
📌 SQL 명령어 실행과 에러 메시지 처리 등 실전 오류 해결 팁을 통해 개발 중 발생할 수 있는 문제들을 신속하게 해결하는 방법을 제시합니다.
🔥 최종 배포 단계에서는 사용자 프로필 설정과 링크 공유 기능을 통해 완성도 높은 웹앱 제작 사례를 보여줍니다.

용어 설명

Tempo Labs

AI를 활용해 코딩 및 웹앱 개발을 자동화하는 플랫폼으로, 다양한 디자인과 기능을 빠르게 생성할 수 있음.

Supabase

데이터베이스와 인증 기능을 제공하는 오픈 소스 백엔드 서비스로, 사용자 인증 시스템 구축에 활용됨.

GitHub 인증

개발자 계정을 이용해 프로젝트에 로그인하고 연동하는 과정을 의미하며, 초기 계정 생성에 필수적임.

SaaS (Software as a Service)

인터넷을 통해 제공되는 소프트웨어 서비스를 뜻하며, 여기서는 이력서 제작 서비스를 예시로 들음.

PRD

제품 요구사항 문서(Product Requirement Document)의 약자로, 개발 및 기획 기준 자료로 활용됨.

AI 에이전트

코드 생성, UI 구성을 자동으로 처리하며 사용자 명령에 따라 실시간으로 작업을 진행하는 인공지능 도우미.

영상은 Tempo Labs와 AI 코딩 도구에 대한 간단한 소개와 향후 업데이트 및 기능 확장에 대한 예고로 시작됩니다. 시청자에게 전체적인 흐름과 기대감을 전달합니다.

[00:00] 마이크가 자신의 채널 성장을 소개하고, Tempo Labs에서 새로운 직책을 맡게 되었음을 설명합니다.

[00:22] Tempo Labs의 혁신적인 기능들과 앞으로의 발전 방향에 대해 설명하며, 이 플랫폼이 웹 앱 개발의 게임체인저가 될 것이라고 강조합니다.

Tempo Labs 웹사이트에 접속해 무료 계정을 생성하고, GitHub 인증을 통해 새로운 프로젝트를 시작하는 과정을 시연합니다. 이 단계에서는 이력서 제작 SaaS 서비스 기획이 함께 소개됩니다.

[01:04] Tempo Labs 플랫폼의 기본적인 시작 방법과 GitHub 인증 과정을 상세히 설명합니다.

[01:35] 이력서 작성을 도와주는 SaaS 프로젝트를 예시로 들어 Tempo의 실제 사용 사례를 보여줍니다.

[02:00] Tempo의 주요 장점인 완벽한 제어 기능과 비기술자도 사용 가능한 특징을 설명하며, 실제 수익성 있는 프로젝트 개발이 가능함을 강조합니다.

[02:25] 팀에 합류한 이유와 목표를 설명하며, Tempo가 PRD와 머메이드 다이어그램을 생성하고 와이어프레임 작업을 진행하는 과정을 보여줍니다.

[02:57] Tempo가 생성한 결과물을 확인하고, 깔끔한 디자인의 첫 번째 초안을 검토합니다.

AI 에이전트가 자동으로 생성한 랜딩 페이지, 네비게이션 바, 푸터 등 UI 구성 요소를 확인하고 불필요한 이미지 제거 및 레이아웃 수정 등 커스터마이징하는 과정을 보여줍니다.

[03:15] 실리콘밸리 스타일의 랜딩 페이지 제작을 요청하고, VC 투자를 받은 듯한 고급스러운 디자인을 의뢰합니다.

[03:59] Tempo가 생성한 랜딩 페이지를 확인하고, 히어로 섹션, 기능, 가격 등이 포함된 결과물을 검토합니다.

[04:35] 네비게이션 바를 추가하고 불필요한 이미지를 제거하는 과정을 진행하며, Tempo의 직관적인 인터페이스와 세밀한 제어 기능을 활용합니다.

[05:27] 웹사이트의 기본 구조를 확인하고 애플리케이션을 무료로 제공하기로 결정했습니다.

[05:49] 마이크와 템포의 관대함을 담아 가격 섹션을 '영원히 무료'로 업데이트했습니다.

[06:05] 랜딩 페이지에 멋진 푸터를 추가하여 웹사이트의 기본 디자인을 완성했습니다.

Supabase를 활용해 사용자 인증 시스템을 구축하는 방법과 SQL 명령어를 통한 오류 수정 프로세스를 자세히 다룹니다. 이메일 인증 및 에러 메시지 개선 등 실무 팁도 함께 제공합니다.

[06:34] 슈퍼베이스 연결 버튼을 통해 인증 시스템 설정을 시작했습니다.

[07:12] 슈퍼베이스에서 'resume SAS'라는 새 프로젝트를 생성하고 기본 설정을 완료했습니다.

[08:01] 슈퍼베이스 프로젝트 연결을 완료하고 인증 설정을 위한 준비를 마쳤습니다.

[08:36] 템포 에이전트가 SQL 코드를 제공하고, 이를 슈퍼베이스 프로젝트의 SQL 에디터에서 실행하도록 안내했습니다.

[08:47] 인증 UI와 로직 구현을 위해 여러 파일들(auth.tsx, 로그인/회원가입 폼, 페이지 등)이 생성되었습니다.

[09:30] 새로 만들어진 인증 페이지에서 회원가입을 시도했지만 계정 생성에 실패했습니다.

[10:04] 에러 처리 개선을 위해 폼이 업데이트되어 더 자세한 에러 메시지를 표시하도록 변경되었습니다.

[10:28] 데이터베이스 관련 문제를 해결하기 위해 추가 SQL 명령어를 실행했습니다.

[11:03] 최종적으로 계정 생성 및 로그인을 테스트하고, 이메일 인증 과정을 확인했습니다.

[11:47] 인증 시스템이 성공적으로 작동하는 것을 확인하고, 사용자 경험 개선을 위한 추가 작업을 계획합니다.

이력서 편집 기능 구현, 드래프트 저장, PDF 내보내기 등 서비스의 핵심 기능들을 설정하고 테스트하는 과정을 설명합니다. 사용자 입력 처리와 UI 에러 수정에 중점을 둡니다.

[12:17] 새 계정 생성 시 사용자에게 이메일 확인을 안내하는 토스트 메시지 추가 작업을 진행합니다.

[13:04] 새로운 계정으로 가입 테스트를 진행하고, 이메일 인증 프로세스가 성공적으로 작동하는 것을 확인합니다.

[13:34] 내비게이션 기능을 테스트하고 대시보드 접근 및 로그아웃 기능이 정상 작동함을 확인합니다.

[14:32] UI 개선을 위해 로그인과 회원가입 페이지에 내비게이션 바와 푸터 추가를 계획합니다.

[15:01] UI 변경사항을 확인하고 네비게이션 기능을 테스트합니다. 로그인, 회원가입, 기능, 가격 섹션이 정상적으로 작동하는 것을 확인했습니다.

[15:50] 홈페이지의 로고 클릭 시 히어로 섹션으로 애니메이션되며 이동하는 기능을 추가하려고 합니다.

[16:03] Tempo의 특별한 가치와 곧 출시될 혁신적인 업데이트에 대해 설명합니다.

[16:38] 다른 페이지에서 가격과 기능 섹션으로의 이동 기능을 구현하고 테스트합니다.

최종 사용자 프로필 설정과 배포 과정을 통해 프로젝트를 완성하며, 배포 링크 공유 및 향후 업데이트에 대한 기대감을 전달합니다. Tempo Labs의 높은 제어권과 효율성을 강조합니다.

[17:21] 로그인 기능을 테스트하고 보안 설정을 확인합니다. 인증되지 않은 사용자는 제품 페이지에 접근할 수 없습니다.

[17:46] SL 앱 라우트를 /dashboard로 변경하고 네비게이션 바를 추가하는 작업을 진행합니다.

[18:40] 대시보드 로고를 클릭하면 홈페이지로 이동하는 기능을 구현하고 테스트했습니다.

[19:01] 이력서 관리 기능을 추가하기로 했습니다. 기존 이력서 조회와 새 이력서 생성 기능이 필요합니다.

[19:49] Supabase에 새로운 테이블을 생성하기 위해 SQL 명령어를 실행했습니다.

[20:29] UI 업데이트를 확인하고, 대시보드의 디자인을 개선했습니다.

[20:53] 네비게이션 하단에 테두리와 여백을 추가하여 디자인을 개선했습니다.

[22:26] 이력서 생성 기능을 구현하면서 에디터의 왼쪽에 정보를 입력하면 오른쪽에 이력서가 실시간으로 렌더링되는 기능을 만들고자 함

[22:59] 이력서 스타일링에 대해 논의하며, 모던/클래식/미니멀 디자인과 흑백 컬러, 기본 폰트 사용을 선호하는 이유를 설명

[23:20] 이력서 데모를 보여주며 기본 정보(이름, 이메일, 전화번호)와 경력 사항을 입력하는 과정을 시연

[24:02] 교육 경력과 기술 스택을 입력하고, PDF 내보내기 기능이 아직 구현되지 않았음을 설명

[25:09] 설명 섹션에 글머리 기호 추가 기능의 필요성을 인식하고 이를 구현하고자 함

[25:32] 영어 축약어에 대한 흥미로운 관찰을 공유하며 AI를 활용한 오류 수정 과정을 보여줌

[26:34] 엔터키 입력 문제를 발견하고 이를 해결하기 위해 Tempo 에이전트에 스크린샷을 공유하여 도움을 요청합니다.

[27:53] 불릿 포인트와 요약 기능이 정상적으로 작동하는 것을 확인하고, 다음으로 임시저장과 사용자 프로필 기능을 구현하기로 결정합니다.

[28:10] Supabase 대시보드와의 연동 계획을 세우고, 이력서 데이터의 저장과 업데이트 기능을 구현하고자 합니다.

[28:50] AI 프롬프트 작성의 중요성에 대해 설명하고, 명확한 지시와 설명이 좋은 결과를 가져온다고 강조합니다.

[29:19] 새로운 이력서를 생성하고 임시저장 기능을 테스트하며, 기본적인 이력서 정보를 입력합니다.

[30:32] 이력서 관리 시스템에서 초안을 저장하고 이력서를 확인하는 기능을 살펴보고 있습니다.

[30:44] 이력서 카드를 클릭했을 때 바로 볼 수 있는 기능을 추가하고자 합니다.

[31:11] Tempo 에이전트가 수정한 결과, 카드 클릭 시 이력서 전체 보기가 가능해졌습니다.

[31:24] 불필요한 스타일 옵션들(모던, 클래식, 미니멀 등)을 제거하고 기본 설정으로 단순화하려고 합니다.

[31:54] UI를 단순화하여 색상과 폰트는 기본값으로 설정하고, 레이아웃만 유지하기로 결정했습니다.

[32:37] 변경사항을 적용한 후 에디터와 뷰어 기능의 동작을 확인하고 있습니다.

[33:36] Tempo와 같은 AI 기반 도구들은 AI 모델의 발전에 따라 지속적으로 개선되며, 코드 품질과 성능이 향상됩니다.

[34:03] 최종적으로 에디터와 뷰어의 불필요한 화살표를 제거하여 인터페이스를 정리하려고 합니다.

[34:26] UI 요소 정리에 대해 논의하며, 불필요한 버튼들을 제거하고 '임시저장'과 'PDF 내보내기' 버튼의 위치를 조정하기로 결정했습니다.

[35:47] AI에 대한 철학적 고찰을 하며, AI는 생명이 없지만 유용한 도구라는 점을 언급했습니다.

[36:10] Tempo 에이전트의 작동 방식을 설명하며, 노란색은 작업 중, 초록색은 변경사항 적용 완료를 의미한다고 설명했습니다.

[36:38] 빈 화면 문제 해결을 위해 개발자 도구 사용법을 설명하고, 에러 로그를 AI에게 전달하는 방법을 공유했습니다.

[37:43] 문제 해결을 위해 마지막으로 정상 작동했던 시점으로 돌아가는 방법을 제시했습니다.

[37:56] 이전 스크린샷 상태로 복원 작업을 시작하며, 현재 상태를 확인하고 대시보드로 이동합니다.

[38:33] 대시보드에 네비게이션 바를 추가하고 사용자 프로필 기능을 구현하려고 계획합니다.

[38:59] Tempo의 장점을 설명하며, 주말 프로젝트부터 장기 프로젝트까지 다양하게 활용할 수 있음을 강조합니다.

[39:22] 설정 버튼을 사용자 프로필로 변경하는 작업을 시작하며, Tempo AI의 직관적인 이해력을 언급합니다.

[40:00] 사용자 프로필 기능을 테스트하고 로그아웃 기능이 정상 작동함을 확인합니다.

[40:40] 완성된 애플리케이션의 디자인과 기능을 검토하며, 특히 투자 유치 발표 페이지의 미려한 디자인을 강조합니다.

[41:22] 이력서 편집 기능에서 발견된 minor 버그에 대해 설명합니다.

[41:32] 에디터 페이지에서 폼 데이터 처리 방식에 대해 설명하며, DB에서 데이터를 우선적으로 가져오고 없을 경우 비워두기로 결정

[41:55] 현재 테스트용 미리 채워진 데이터를 제거하고 실제 사용을 위한 빈 폼으로 변경하기로 결정

[42:24] 이력서 작성 테스트: Niki Jack의 기본 정보(가수/작곡가) 입력 및 저장

[42:59] Tempo의 배포 기능 소개 및 향후 커스텀 URL 지원 기능 예고

[43:24] 소셜 미디어 팔로우 안내 및 향후 2-3주 내 주요 업데이트 예고

[43:54] 실제 사용 데모: 로그인, 새 이력서 작성(Michael Jack), 내보내기 기능 시연

[00:00] 신사 여러분, 그리고 이 채널을 시청하시는 세 분의 숙녀분들,

[00:01] 여러분의 마이크입니다.

[00:03] 우리 좀 보세요. 이 셋업을 보세요. 얼마나 성장했는지

[00:05] 오늘 영상에서는 여러분께 흥미로운 것을 준비했습니다.

[00:07] Tempo Labs 사용법에 대한

[00:09] 전체 튜토리얼을 진행하려고 합니다.

[00:10] 제가 X에서 활동하는 걸 모르실 수도 있는데, Tempo Labs가 저를 영입했어요.

[00:12] 그냥 영입한 게 아니라... 뭐, 실제로 영입했죠.

[00:14] 제가 그냥 사무실에 무단침입해서

[00:16] 셋업을 뚫고 들어가서

[00:18] 영상을 찍은 게 아니에요. 아니면 그랬을 수도 있고... 누가 알겠어요?

[00:20] 하지만 지금 말씀드리는 건

[00:22] 앞으로 출시될 기능들이

[00:23] 게임 체인저가 될 거라는 겁니다. 정말 놀라울 거예요.

[00:26] 아이디어만 있는 분들도 멋진 것을 만들 수 있게 될 겁니다.

[00:29] 남녀 누구나 다 가능하죠. 기존과는 매우 다릅니다.

[00:31] 여러분이 알고 계신 것과는 매우 다른데요,

[00:33] 세밀한 제어가 가능하면서도

[00:35] 뛰어난 에이전트가 모든 작업을 대신해주거든요.

[00:37] 자세히 설명해드리겠습니다.

[00:38] 플랫폼이 어떻게 작동하는지 보여드릴 건데요,

[00:40] 제가 가장 기대되는 부분은

[00:42] 앞으로 며칠, 또는 1-2주 안에

[00:44] 중요한 발표들이 있을 거예요. 업데이트와

[00:46] 새로운 기능들, 제가 지금 직접

[00:47] 작업하고 있는 것들도 있는데

[00:49] 여러분의 고충과 어려움을

[00:50] 해결해줄 기능들입니다.

[00:52] 저는 진심으로 이번 달 말까지,

[00:54] 여러분이 이 영상을 보시는 시점에는

[00:56] Tempo가 웹 앱을 만드는데 있어

[00:58] 최고의 플랫폼이 될 거라고 믿습니다.

[01:00] 본격적으로 들어가기 전에,

[01:02] 플랫폼 사용법을 보여드리겠습니다.

[01:04] 자, 먼저 해야 할 일은

[01:05] tempo.labs로 가시는 겁니다. 링크는

[01:07] 아래 설명란에 있을 거예요.

[01:09] 그리고 '무료로 시작하기'를 클릭하세요.

[01:11] 인증은 간단합니다. 요즘 AI 도구들을 사용해보셨다면

[01:13] GitHub 계정이 필요하다는 걸 아실 텐데요,

[01:15] GitHub로 연결하면 됩니다.

[01:16] 인증을 진행할 건데요,

[01:18] 몇 초 정도 걸릴 거예요.

[01:20] 자, 이제 인증이 완료됐고

[01:22] 보시다시피 저는 Tempo의 파워 유저인데요,

[01:24] 여러분이 처음이라고 가정하고

[01:26] 설명드리겠습니다. 프로젝트 생성을 클릭하고

[01:27] 새 앱 생성을 선택하세요.

[01:29] GitHub 저장소를 연결하거나

[01:31] 빈 캔버스로 디자인할 수 있는데요,

[01:33] 저는 새 앱을 생성하고 다음을 누르겠습니다.

[01:35] Tempo에서 새로운 직장을 시작했으니

[01:37] 이력서 작성을 도와주는 SaaS를

[01:39] 만들어보고 싶네요.

[01:42] 요즘 취업 시장이 힘들잖아요, 특히 IT 업계는

[01:43] 더 그렇죠. 이력서를 쉽게 만들고

[01:45] 플러그 앤 플레이 방식으로 PDF로 내보낼 수 있으면 좋겠죠.

[01:48] 그래서 그걸 만들어보려고 합니다.

[01:50] 이력서 SaaS를 만들겠다고

[01:52] 입력하고

[01:56] 엔터를 누르겠습니다.

[01:58] 일단 간단하게 시작해볼 건데요,

[02:00] Tempo의 멋진 점은 완벽한 제어가 가능하다는 겁니다.

[02:01] PRD, 디자인, 코드에 대한 모든 접근 권한이 있어요.

[02:03] 이건 정말 최고의 도구예요.

[02:07] 기술적 지식이 없더라도

[02:08] 동시에 세세한 제어를 원하는 분들을 위한

[02:11] 도구죠. Tempo의 멋진 점은

[02:13] 이 모든 제어 기능이

[02:14] 실제 프로덕션 수준의 것을 만들 수 있게

[02:16] 해준다는 거예요. 진지한 프로젝트를 만들 수 있죠.

[02:18] 주말 프로젝트로 재미있게 만들 수도 있고,

[02:20] 수익을 낼 수 있는 SaaS도 만들 수 있어요.

[02:22] 그게 우리가 여기 있는 이유이고,

[02:24] 제가 흥분된 이유입니다.

[02:25] 그래서 제가 이 팀에 합류했고

[02:27] 여러분이 원하는 모든 것을 만들고 있습니다

[02:29] 여러분이 겪는 모든 문제점들을

[02:30] 해결하고 있으니 걱정하지 마세요

[02:32] 그동안 Tempo가 작업하도록 하겠습니다

[02:35] 와이어프레임 스펙을 만들었네요

[02:37] 먼저 PRD를 만들었고

[02:39] 여기 보시면 머메이드 다이어그램도

[02:40] 지금은 와이어프레임 작업 중이고

[02:42] 라우트를 생성했으며 코드가

[02:44] 실시간으로 만들어지고 있습니다

[02:46] Tempo 에이전트가 이 모든 작업을 하고 있죠

[02:52] AI가 열심히 작업하고 있어요, 정말 잘 돌아가고 있네요

[02:57] 자, 생성이 완료됐는데

[02:58] 멋진 점은 이 재생 버튼을 클릭하면

[03:00] 지금까지 생성된 것을

[03:02] 보여준다는 거예요. 첫인상부터

[03:04] 매우 깔끔하네요. 이 디자인이 마음에 들어요

[03:06] 이건 첫 번째 초안일 뿐이고

[03:09] 아직 기능은 없지만

[03:11] 그래서 우리가 필요한 거죠

[03:12] Tempo로 돌아가서 AI 채팅으로 가보겠습니다

[03:15] 몇 가지 시작하고 싶은 게 있는데

[03:16] 먼저 시작하고 싶은 건

[03:17] 랜딩 페이지를 만드는 거예요

[03:18] 이력서 SaaS 랜딩 페이지를 만들고 싶어요

[03:23] 실리콘밸리 스타트업처럼 보이게요

[03:28] VC 투자를 많이 받은

[03:31] 그런 분위기 아시죠?

[03:37] 우리가 방금 2천만 달러를 투자받은 것 같은

[03:39] 그런 멋진 느낌의

[03:42] 랜딩 페이지를 원해요

[03:44] 그래서 Tempo 에이전트에게

[03:47] 그렇게 말했고, 이제 랜딩 페이지를

[03:49] 생성할 거 같은데

[03:52] 잠깐 텍사스 바비큐가 생각나네요

[03:57] [음악]

[03:59] 자, 이걸 보세요. Tempo 에이전트가

[04:01] 히어로 섹션, 기능, 가격이 포함된

[04:03] 랜딩 페이지를 만들어줬어요

[04:06] 여기 보시면 모던한

[04:08] 실리콘밸리 스타일의 랜딩 페이지와

[04:09] 히어로 섹션을 만들었다고 하네요

[04:12] 선택한 디자인의 모든 세부 사항을

[04:14] 보여주고 있어요. 재생을 눌러보면

[04:16] 보세요, 이렇게 나왔네요

[04:18] 중앙에 이게 있는데

[04:19] 이건 제거해달라고 하고

[04:21] 이렇게 됐어요. 이제

[04:23] Tempo로 돌아가서 네비게이션 바를

[04:26] 위에서부터 작업해볼게요

[04:28] 네비게이션 바를 만들고

[04:31] 중앙에 있는

[04:32] 이미지를 제거하고 싶어요

[04:35] 보시다시피 네비게이션 바를

[04:36] 만들기 시작했고, 채팅이

[04:38] 매우 직관적이에요

[04:40] 무슨 일이 일어나고 있는지

[04:41] 생성된 모든 요소들 간의

[04:43] 관계도 명확히 보입니다

[04:45] 이게 바로 제가 Tempo의

[04:47] 세밀한 제어를 좋아하는 이유죠

[04:49] 네비바를 요청했더니 만들어줬고

[04:51] 재생을 눌러보면

[04:54] 깔끔한 네비바가 보이네요

[04:56] 이제 이 이미지만 제거하면 되는데

[04:58] 제가 할 수 있는 건

[05:01] 스크린샷을 찍어서

[05:03] 스크린샷이 저장되길 기다린 다음

[05:06] 이미지를 추가하고

[05:09] 스티커 노트가 있는 이미지를 제거해달라고

[05:14] 필요없다고 말하면 됩니다

[05:19] Tempo 에이전트는 제 친구니까

[05:21] 알아서 처리해 줄 거예요

[05:23] 보세요, 이미지가

[05:25] 제거됐고 이제 페이지로 돌아갈 수 있어요

[05:27] 새로고침 해볼게요. 지금까지는 잘 되고 있네요.

[05:30] 잘 됐어요. 우리 애플리케이션은

[05:33] 완전히 무료로 할 거예요. 모든 사람이

[05:35] 이용할 수 있게 하고 싶거든요.

[05:36] 가격 섹션에 '마이크와 템포가

[05:41] 모두를 사랑하기 때문에 무료'라고 적어주세요

[05:48] 사랑

[05:49] 가격 섹션을 업데이트하고 있어요

[05:52] AI가 마이크와 템포의 관대함에 대해

[05:55] 진심 어린 메시지를 추가했다고 하네요

[05:56] 이제 사이트로 돌아가서

[05:58] 새로고침 해볼게요. '마이크와 템포가

[06:01] 여러분을 사랑합니다. 영원히 무료' 완벽해요

[06:03] 좋은 시작점이네요.

[06:05] 이 랜딩 페이지에 푸터만

[06:06] 추가하려고 해요. '멋지고 아름다운

[06:09] 푸터를 만들어줘'라고 할게요

[06:12] 곧 푸터가 나타날 거예요

[06:14] 잠시만 기다려주세요

[06:17] 푸터가 완성됐다고 하네요

[06:19] 이제 실행 버튼을 누르고

[06:21] 우리 웹사이트를 볼 수 있어요

[06:23] 멋진 푸터와 모두를 위한 무료 페이지,

[06:25] 기능 목록과 랜딩 페이지까지

[06:28] 정말 멋지게 보이네요

[06:30] 웹사이트가 아주 멋져요.

[06:32] 이제 인증 기능을 설정해볼까요

[06:34] 여기 보시면

[06:36] 슈퍼베이스 연결 버튼이 있어요

[06:39] 아이콘이 바로 여기 있죠

[06:41] 이걸로 바로 슈퍼베이스에

[06:42] 연결할 수 있어요. 슈퍼베이스

[06:44] 통합이 있거든요. 이 영상이 나간 후

[06:46] 며칠 안에

[06:48] 공개할 건데요

[06:49] 이 통합 기능으로

[06:51] 멋진 기능들을 선보일 거예요

[06:53] 제 슈퍼베이스 계정에

[06:56] 연결하고 템포 랩스에

[06:58] 권한을 부여할게요

[07:01] 이제 프로젝트에 접근할 수 있어요

[07:04] 슈퍼베이스로 가볼게요

[07:06] 어떤 프로젝트에 접근 권한을

[07:08] 줄지 모르겠어서요. 지금 로그인해서

[07:11] 슈퍼베이스 계정에 들어왔어요

[07:12] 새 프로젝트를 만들고

[07:14] 데모 섹션에서 만들 건데

[07:16] 이름은 'resume SAS'로 하겠습니다

[07:18] 비밀번호를

[07:20] 만들고 지역은 미국 동부 오하이오를

[07:23] 선택해서 새 프로젝트를 만들게요

[07:26] 슈퍼베이스가 프로젝트를

[07:27] 만들어주는 걸 기다리면 되는데

[07:29] 데이터베이스도 포함돼요. 완료되면

[07:31] 슈퍼베이스로

[07:32] 인증과 데이터베이스를

[07:34] 설정할 수 있어요. 그나저나

[07:37] 슈퍼베이스가 프로젝트를 설정하는 동안

[07:39] 영상은 마음에 드셨나요?

[07:41] 아직 좋아요 안 누르셨죠?

[07:43] 지금 바로요, 네, 지금이요

[07:49] 기다리고 있어요. 좋아요 누르실 때까지

[07:52] 계속 안 할 거예요. 잘하셨어요

[07:57] 자, 이제 프로젝트가 설정됐어요

[08:01] 다시 돌아가서

[08:03] 빠르게 새로고침 해볼게요

[08:05] 모든 게 업데이트됐는지 확인하고

[08:07] 슈퍼베이스를 클릭한 다음

[08:09] resume SAS를 선택할게요

[08:11] 연결하면

[08:13] 슈퍼베이스 통합이

[08:16] 연결됐네요. 완벽해요

[08:18] AI 에이전트로

[08:20] 돌아가서 이제

[08:22] 인증을 설정할 거예요

[08:24] '슈퍼베이스를 사용해서

[08:27] 인증을 설정하고 싶어요'라고 입력하고

[08:30] 엔터를 누르면 템포 에이전트가

[08:33] 알아서 처리해줄 거예요

[08:36] 자, 이제 에이전트를 보니

[08:38] 몇 가지 SQL 코드를 보여주고 있네요.

[08:41] 슈퍼베이스 프로젝트의 SQL 에디터에서

[08:42] 이 SQL을 실행해달라고 하네요.

[08:45] 실행하고 나면 알려달라고 하고

[08:46] 인증 UI와 로직을

[08:47] 구현하겠다고 하네요.

[08:50] 여기서 복사를 하고 슈퍼베이스

[08:53] 대시보드로 돌아가서 SQL 에디터를 클릭합니다.

[08:56] 여기에 붙여넣고 실행하면

[08:58] 준비가 끝났습니다. 이제 다시

[09:00] 템포 에이전트로 돌아가서

[09:03] 방금 작업을 마쳤으니 계속 진행해달라고 합니다.

[09:09] 기억하세요, 템포는 우리를 위해 일하고 있고

[09:12] 이제 작업을 진행하도록 하겠습니다.

[09:14] 몇 개의 파일이 생성된 것을 볼 수 있는데

[09:16] auth.tsx, 로그인 폼, 회원가입 폼,

[09:20] 로그인 페이지, 회원가입 페이지가 있고

[09:23] app.tsx와 네비게이션 바에도

[09:25] 업데이트가 있네요.

[09:26] 이제 우리 사이트로 돌아가서

[09:28] 새로고침을 하고

[09:30] 로그인을 클릭해보면

[09:32] 멋진 인증 페이지가 보이네요.

[09:35] 아직 로그인을 하지 않았으니

[09:36] 회원가입을 클릭하고 이름을 입력하겠습니다.

[09:40] 제 이름을 입력하고

[09:43] 이메일을 입력하고

[09:46] 그리고 이제

[09:47] 비밀번호를 입력하고 계정 만들기를 클릭합니다.

[09:50] 계정 생성에 실패했다고 하네요.

[09:52] 그래서 이제

[09:53] 이 메시지를 가지고

[09:55] 계정을 만들려고 했는데 실패했다고

[09:59] 에러가 났다고 알려주고

[10:02] 템포 에이전트가 처리하도록 하겠습니다.

[10:04] 보시다시피

[10:07] 몇 가지 변경사항이 있었고

[10:09] 회원가입 폼이 업데이트되어

[10:11] 일반적인 메시지 대신

[10:12] 슈퍼베이스의 실제 에러 메시지를 보여주고

[10:14] 더 나은 에러 처리가 추가되었습니다.

[10:17] 사이트로 돌아가서

[10:18] 새로고침하고

[10:20] 다시 한번 시도해보겠습니다. 계정 만들기를 클릭하면

[10:24] '새 사용자 저장 중 데이터베이스 오류'가 발생했네요.

[10:27] 좋습니다. 이제

[10:28] 새 사용자 저장 중 데이터베이스 오류가 발생했으니

[10:32] 사용자들이 계정을 만들 수 있도록 수정해달라고 요청하겠습니다.

[10:37] 자,

[10:38] 이 SQL 명령어를 실행하라고 하네요.

[10:40] 이것을 복사해서

[10:44] 슈퍼베이스로 가서 SQL

[10:47] 에디터에 붙여넣고 실행하면

[10:50] public profiles가

[10:52] 모든 사람이 볼 수 있고

[10:54] profiles 테이블이 이미 존재한다고 하네요.

[10:57] 이 내용을 AI에게 알려주겠습니다.

[11:03] 좋아요, 마지막으로 한 번 더 테스트해보죠.

[11:05] 회원가입으로 가서

[11:07] 마이클 샬리스를 입력하고

[11:09] 제 직장 이메일로

[11:12] miky@tempolabs로 계정을 만들어보겠습니다.

[11:16] 그러면 로그인 페이지로 이동하네요.

[11:18] 같은 비밀번호로 로그인을 시도해보면

[11:21] 아, 비밀번호를 입력해야겠네요.

[11:24] 비밀번호 입력하고

[11:25] 로그인 실패라고 나오네요. 자격증명을

[11:27] 확인하라고 하지만, 제가 보기에는

[11:30] 새로고침하면... 네, 인증이 되었네요.

[11:33] 하지만 여기 보면

[11:36] 인증 대기 중이라고 나옵니다.

[11:38] 이메일을 확인해보면, 여기 있네요.

[11:41] 확인 이메일이 왔습니다.

[11:43] 확인을 클릭하면 localhost:3000으로

[11:44] 이동하는데, 괜찮습니다.

[11:47] 여기서 인증이 완료되었네요. 만약 제가

[11:50] 앱으로 돌아가서 로그인을 클릭하면

[11:53] 인증이 잘 작동하는 걸 볼 수 있습니다

[11:56] 몇 가지 수정하고 싶은 것이 있어서

[11:57] AI Tempo 에이전트로 돌아가서

[11:59] 작업을 진행하려고 합니다

[12:01] 사용자가 새 계정을 만들 때

[12:07] 이메일 확인을 위한 토스트 메시지가

[12:12] 표시되어야 합니다

[12:17] 계정을 확인하라는 메시지가 필요하죠

[12:21] 토스트 메시지가 팝업으로 뜨게요

[12:23] 개발자인 저는 알았지만

[12:25] 로그인 페이지로 리다이렉트될 때

[12:26] 아마도 잘 작동했을 거라고 생각했지만

[12:28] 사용자들이 무슨 일이 일어났는지

[12:30] 이해할 수 있도록 해야 합니다

[12:32] 그래서 계정을 만들 때 토스트 메시지가

[12:34] 나타나서 이메일을 확인하라고

[12:36] 알려주고 계정 인증 링크를 클릭하라고

[12:38] 안내해야 합니다. 지금 Tempo 에이전트가

[12:41] 바로 그 작업을 하고 있네요

[12:43] 완벽합니다. 작업이 끝났네요

[12:44] 사이트로 돌아가서 새로고침을 하고

[12:47] 로그아웃을 해보겠습니다

[12:49] 로그아웃이 잘 작동하네요

[12:51] 다시 '시작하기'를 클릭하고

[12:53] 로그인/가입 버튼을 누르겠습니다

[12:56] 이번에는 다른 이름으로

[12:59] 다른 이메일과 비밀번호를 사용해보죠

[13:02] 계정이 생성되고 있고

[13:04] 보세요, 토스트 메시지가 떴네요

[13:06] '계정이 생성되었습니다. 이메일을 확인하여

[13:08] 계정을 인증해주세요' 완벽합니다

[13:10] 제 개인 이메일로 가보면

[13:14] 여기 이메일이 와있네요

[13:16] 이메일 확인을 클릭하면

[13:18] 로컬호스트라 괜찮습니다

[13:20] 로그인을 해보겠습니다

[13:23] 비밀번호를 입력하고 로그인을 누르면

[13:26] 보세요, 이제 제 애플리케이션에

[13:29] 로그인이 되었습니다. 다시 돌아가서

[13:32] 내비게이션 바를 살펴보면

[13:34] 대시보드를 클릭하면

[13:35] 대시보드로 이동하고

[13:37] 로그아웃을 클릭하면 로그아웃이 되죠

[13:40] 완벽합니다. 제가 원하는 건

[13:42] 여기 정렬을 맞추는 거예요

[13:44] 이 페이지의 스크린샷을 찍어서

[13:48] 가져가겠습니다

[13:49] Tempo 에이전트 채팅에 가져가서

[13:53] 인증 페이지들의 정렬을

[13:57] 제대로 맞춰달라고 하겠습니다

[13:59] 보시다시피 텍스트가 폼과

[14:04] 정렬이 맞지 않아서

[14:08] 인증 페이지들을 더 대칭적이고

[14:11] 보기 좋게 수정할 거예요

[14:13] 그게 끝나면

[14:15] 인증 관련 부분을 정리하고

[14:16] 제품 작업을 시작할 겁니다

[14:19] 변경사항이 적용됐네요

[14:20] 사이트로 돌아가서 새로고침 해보면

[14:23] 정말 마음에 드네요. 가입과

[14:25] 로그인 사이를 이동할 수 있고, 이제는

[14:27] 어떤 페이지든 홈페이지든

[14:30] 갈 수 있게 하고 싶어서

[14:32] 내비게이션 바와 푸터를

[14:34] 로그인과 가입 페이지에 추가해달라고

[14:37] 하겠습니다. Tempo 에이전트에게

[14:41] 정중하게 요청하겠습니다

[14:44] 내비게이션 바와 푸터를 인증 페이지에 추가해달라고요

[14:50] 로그인과 가입 페이지 모두

[14:52] 푸터가 있어야

[14:54] 홈으로 쉽게 돌아가거나

[14:56] 푸터 링크를 클릭할 수 있죠

[14:58] 소셜 미디어든 뭐든

[15:01] 좋아요, 완료됐다고 하네요.

[15:03] 다시 돌아가서 확인해볼까요?

[15:05] 깔끔하게 보이네요. 로그인과 회원가입 페이지가 있고

[15:08] 홈으로 돌아갈 수 있고, 기능, 가격, 템플릿도 볼 수 있어요.

[15:11] 기능과 가격 섹션은 있는데

[15:13] 실제로 기능 섹션은 이거고

[15:15] 가격 섹션은 이건데, 템플릿 섹션은 없어요.

[15:17] 그래서 제가 하려는 것은

[15:19] 네비게이션 바에서

[15:20] 템플릿 섹션을 제거하고

[15:23] 그리고

[15:25] 기능과 가격을 클릭하면 각각의

[15:30] 섹션으로 슬라이드되어 이동해야 해요.

[15:35] 각각의

[15:38] 해당하는

[15:39] 섹션으로요. 자, 확인해볼까요?

[15:41] 새로고침하고 기능을 클릭하면

[15:44] 와! 보세요! 잘 되네요. 홈으로 가면

[15:46] 사실 홈을 클릭했을 때

[15:48] 위로 애니메이션되며 돌아가게 하고 싶어요.

[15:50] 그래서 말씀드리자면, 홈페이지에서

[15:54] 로고를 클릭하면 히어로 섹션으로 슬라이드되어

[15:59] 돌아가게 하고 싶어요. 보세요,

[16:03] Tempo의 특별한 점은 단순히

[16:05] 애플리케이션을 만드는 곳이 아니라

[16:07] 여러분의 꿈을 만드는 곳이에요.

[16:09] 여러분이 좋아하는 것을 만드는 곳이죠.

[16:11] 저는 잘 모르겠지만, 전 매우

[16:13] 특정한 것들에 까다로운 편인데

[16:15] 이게 제가 Tempo를 사랑하는 이유예요.

[16:17] 완벽한 제어가 가능하고, 믿으세요.

[16:19] 곧 출시할 업데이트들은

[16:21] 게임 체인저가 될 거예요.

[16:23] 자, 이제 완료됐네요. 테스트해볼게요.

[16:26] 완벽해요. 로그인과 회원가입으로 가보면

[16:30] 잘 작동하는 것을 확인할 수 있어요.

[16:38] 가격 책정 페이지에서

[16:40] 기능과 가격이 잘 작동하길 원해요.

[16:42] 그래서 제가 하고 싶은 건, 다른 페이지에서

[16:46] 가격과 다른 섹션... 가격과 기능 섹션이

[16:51] 가격과 기능을 클릭하면

[16:55] 홈페이지로 이동하고 각각의 섹션으로

[17:01] 클릭했을 때 이동하게 하고 싶어요.

[17:07] 좋아요, 완료됐네요.

[17:09] 새로고침하고 기능으로 가보고

[17:12] 가격으로도 가볼게요. 완벽해요.

[17:16] 로그인하고 가격을 보면

[17:19] 바로 이동하네요. 이제

[17:21] 애플리케이션에 다시 로그인할게요.

[17:23] 제 업무용 이메일로 로그인하고

[17:25] 비밀번호를 정확하게 입력할게요.

[17:28] 이제 애플리케이션이 보이는데

[17:30] 확인하고 싶은 것은

[17:32] 이 네비게이션 바나 상단의 네비게이션 바에서

[17:35] 홈페이지로 돌아갈 수 있어야 해요.

[17:37] 그래서

[17:38] 제품 쪽, 즉 SL 앱 라우트를

[17:46] /dashboard로 이름을 변경하고 싶어요.

[17:50] 저는 /dashboard가 더 좋거든요.

[17:54] 거기에 네비게이션 바도 추가하고 싶어요.

[17:59] 그리고 작업하는 동안

[18:01] 확인하고 싶은 게 있어요. 홈으로 돌아가서

[18:04] 로그아웃하고 앱에 접근할 수 있는지

[18:07] 제품 쪽에 인증 없이

[18:09] 접근할 수 있는지 볼게요. 안 되네요.

[18:12] 페이지가 보호되어 있어서

[18:14] 인증하지 않으면 접근할 수 없어요.

[18:17] 다시 로그인

[18:19] 할게요.

[18:21] 완벽해요. Tempo가 거의 다 끝냈네요.

[18:23] 변경사항을

[18:24] 변경사항이 적용됐어요. 애플리케이션으로 돌아가보면

[18:27] 이제 /dashboard가 되어있어야 하고

[18:30] 맞네요. 로그아웃할 수 있는 멋진

[18:33] 네비게이션 바도 있고, 이력서 설정도 있어요.

[18:35] 완벽해요. 그리고

[18:38] 이걸 클릭하면

[18:40] 클릭하면 홈으로 이동할 수 있어야 하는데

[18:41] 대시보드에서

[18:43] 대시보드 로고를 클릭하면

[18:47] 홈페이지로 이동해야 합니다

[18:53] 그

[18:54] 홈페이지로 말이죠. 좋습니다.

[18:57] 돌아가서 여기를 클릭하면, 아주 좋네요

[18:59] 우리 애플리케이션이

[19:01] 잘 만들어지고 있습니다. 이제는

[19:04] 생성된 이력서를 볼 수 있게 하고

[19:06] 새로운 이력서도 만들 수 있게 하고 싶은데

[19:08] 대시보드 페이지에서

[19:14] 데이터베이스에 저장된 생성된 이력서들을

[19:20] 볼 수 있게 하고 싶습니다. 하지만

[19:25] 새로운 이력서를 만드는 옵션도

[19:29] 있어야 하고 그러면 이력서 에디터로 이동하게 됩니다

[19:34] 내가 만든 모든 이력서를 볼 수 있고

[19:39] 클릭해서 볼 수 있어야 하며

[19:41] 클릭할 수 있어야 하고

[19:43] 또한 새로운 이력서를

[19:45] 처음부터 만들 수 있는 섹션도 필요합니다

[19:47] 처음부터

[19:49] 자, Temple Angel이 우리에게

[19:52] 하라는 대로 Supabase에

[19:54] 새로운 테이블을 만들어야 합니다

[19:57] 이 SQL을 복사해서

[19:58] SQL 에디터로 가서

[20:00] 붙여넣고 실행하면 됩니다

[20:03] 실행 성공했네요, 완벽합니다

[20:07] 이제 방금 SQL 명령어를 붙여넣었으니

[20:11] 다음으로 진행하면 됩니다

[20:16] 다음은

[20:20] [음악]

[20:22] 그런데 이 후드티가 멋있죠?

[20:24] 제 동생이 만든 건데 곧 출시됩니다

[20:26] Say by Grace 의류브랜드에서요

[20:27] 아시겠죠?

[20:29] 좋습니다, 몇 가지 변경사항이 있었는데

[20:32] 한번 확인해볼까요? 대시보드가

[20:35] 업데이트되었네요, 멋집니다

[20:38] 홈페이지로 돌아가서

[20:39] 대시보드를 클릭하면, 이제 보이네요

[20:42] 새 이력서를 만들 수 있고

[20:44] 아직 이력서가 없다고 표시되고

[20:46] 여기를 클릭하면 이동하고

[20:48] 이런 워크플로우가 마음에 듭니다

[20:51] 제가 하고 싶은 것은

[20:53] 이 네비게이션 아래에 테두리를 넣고 싶은데

[20:56] 이렇게 하겠습니다

[21:00] 음

[21:02] 대시보드 슬래시 아래 네비게이션에

[21:07] 하단에 테두리를 넣어주세요

[21:12] 자, 페이지로 돌아가서

[21:14] 새로고침 해보면

[21:15] 테두리가 생기지 않았네요

[21:18] 제가 할 일은, 아마도

[21:19] 이게 네비바가 아닌 것 같아서

[21:21] AI가 뭘 하라는 건지 모르는 것 같네요

[21:23] 스크린샷을 찍어서

[21:25] 업로드 하겠습니다

[21:27] 스크린샷을 여기에 올리고

[21:29] 확실하게 하기 위해, 아래에

[21:34] 확실히 하기 위해 새로운

[21:37] 이력서 아래, 내 이력서와 새 이력서 버튼 아래에

[21:44] 전체 페이지 하단을 가로지르는

[21:49] 테두리가

[21:51] 전체

[21:53] 페이지에 있어야 합니다

[21:56] 좀 더 맥락을 제공하기 위해

[21:58] 우리가 원하는 것이

[22:00] 보기 좋게 만들고 싶고

[22:02] 테두리가 있으면

[22:04] 보기 좋을 것 같아서요

[22:06] 변경사항이 적용되었네요, 새로고침하면

[22:09] 테두리가 보이는데, 마음에 듭니다

[22:11] 여백을 좀 더 주고 싶어서

[22:13] 하단 패딩을 좀 더 추가해달라고 하겠습니다

[22:22] 패딩이 추가되었고

[22:24] 지금 모습이 마음에 듭니다

[22:26] 이제 이력서 만들기를 클릭해서 작동하는지 확인해보죠

[22:28] 지금은 실제로 기능이 없는 상태라

[22:30] 제가 하려는 것은 에디터에서

[22:32] 다음과 같은 기능을 구현하고 싶습니다

[22:36] 왼쪽에 정보를 입력하면

[22:40] 오른쪽 이력서에 정보가 표시되도록

[22:45] 왼쪽에 입력한 내용이 오른쪽에 렌더링되게 하고 싶어요

[22:50] 그래서 기본적으로 이쪽에 내용을 채우면

[22:54] 여기에 표시되게 하고 싶어요

[22:56] 그리고 모던, 클래식, 미니멀 스타일도

[22:59] 네, 그리고 제가 정말 원하는 건

[23:00] 다양한 스타일을 가지는 거예요

[23:02] 색상은 어떻게 할지 모르겠지만

[23:04] 흑백이 기본이 되어야 할 것 같아요

[23:06] 왜냐하면 컬러를 사용하면

[23:09] 아마 취업이 어려울 수 있거든요

[23:10] 그리고 폰트는 기본으로 유지하는 게 좋겠어요

[23:12] 사람들이 이걸로 빠르게 이력서를 만들면 좋겠어요

[23:14] 실제로 사람들이 빠르게 이력서를 만들 수 있게

[23:16] 하고 싶거든요, 정말 멋질 것 같아요

[23:17] 좋아요, 이제 새로고침하고 입력해보면

[23:20] 보세요, 이렇게 됩니다

[23:23] 마이클 샤미쉬, 저는 소프트웨어 엔지니어입니다

[23:27] 제 이메일은 [email protected]이고

[23:33] 전화번호는

[23:35] 911입니다. 제 경력을 보자면

[23:38] 저는 소프트웨어... 아니 풀스택이에요

[23:42] 풀스택

[23:44] 소프트웨어 엔지니어로 Tempol

[23:49] Labs에서 일하고 있고

[23:53] 2012년 5월부터 현재까지 Tempol Labs에서 멋진 프로젝트들을 만들었어요

[23:58] 그리고 그렇죠, 학력은

[24:02] 유튜브

[24:05] 대학교를 졸업했고

[24:08] 2020년에 입학해서

[24:12] 2023년에

[24:15] 졸업했어요. 웹 개발 교수님은 Cody였고

[24:18] Theo 교수님과 다른 분들

[24:20] Josh와 Tried Coding 등이 있었어요

[24:23] 이것들이 제 스킬이에요. PDF 내보내기는

[24:27] 아직 작동하지 않을 거예요

[24:29] 아직 구현하지 않았거든요

[24:31] 경력을 더 추가할 수 있어요. 음...

[24:34] AMHS... 아니 프론트엔드

[24:40] 엔지니어 MHS를 추가하고

[24:44] 근무 기간은

[24:45] 2023년부터

[24:48] 2025년... 아니 죄송해요 2024년까지

[24:52] 2024년부터

[24:54] 2025년까지

[24:56] 멋진... 아 built를 잘못 썼네요

[24:59] 멋진 프론트엔드 작업을 했어요

[25:04] 좋아요, S를 소문자로 바꿀게요

[25:06] 이게 제 이력서네요, 멋지죠

[25:09] 이제 글머리 기호를 추가하고 싶어요

[25:12] 아직 글머리 기호를 추가할 수 없는 것 같아서

[25:14] 이건 좋은데 설명 부분에

[25:17] 글머리 기호를 추가할 수 있게

[25:22] 하고 싶어요

[25:26] 글머리 기호를요

[25:28] 좋아요, 이게 처리되는 동안

[25:30] 방금

[25:32] 깨달은 게 있는데

[25:33] cannot은 can't로 줄여쓰죠

[25:37] do not은

[25:42] don't, shouldn't, will not은

[25:48] 한번 생각해보세요

[25:52] 음...

[25:53] willn't? won't? won't는 어디서 나온 걸까요

[25:57] 그냥 든 생각이에요

[26:01] 오류가 발생했네요, 제가 할 일은

[26:03] AI로 수정하기를 클릭해서 Tempo 에이전트가

[26:05] 처리하도록 하는 거예요

[26:08] 오류 하나를 수정했고, 또 다른 오류가 있어서

[26:11] AI로 수정하기를

[26:12] 다시 클릭할게요

[26:14] Tempo 에이전트가 오류를 수정했네요

[26:17] 좋아요, 다시 돌아가서

[26:19] 이제 추가할 수 있는지 보죠

[26:22] 아, 한 줄에 하나씩이네요. 여기 요약이 있고

[26:27] 그리고 이제 입력할 수 있어요. 오,

[26:30] 타이핑할 필요도 없네요, Next.js를 사용했다고

[26:34] 괜찮네요. 그리고 나서

[26:37] 엔터를 칠 수 있나? 아니면 새 줄을

[26:39] 입력할 수 없나? 알겠어요. 이걸 설정해야겠네요.

[26:43] 음... 불릿 포인트 섹션에서 엔터를

[26:48] 치면 새 줄로 이동하지 않아요.

[26:53] 잠깐, '한 줄에 하나'라고 할 때

[26:56] 그걸 해야 하나요?

[26:58] 아니요, 그것도 작동하지 않네요. 그래서

[27:00] 제가 할 것은 여기서

[27:03] 엔터를 치는 거예요.

[27:06] 이 수정사항이 제대로 작동하는지 확인해 봅시다.

[27:10] 다시 돌아가서

[27:12] 여기로 가보면... 음

[27:15] '프론트엔드가 멋져요'라고 쓰고 엔터를 치면

[27:19] 아무 일도 일어나지 않네요. 잠깐

[27:21] 스크린샷을 찍어서

[27:24] Tempo에 공유해야겠어요.

[27:25] 에이전트에 스크린샷을 공유할 건데

[27:30] 여기 보세요, 제가 클릭해서

[27:36] 엔터로 새 줄을 만들려고 하면 안 되네요.

[27:42] 이걸 고쳐주세요.

[27:44] 좋아요.

[27:46] 자, 이제 작동하는지 봅시다.

[27:49] '프론트'라고 쓰고

[27:51] 엔드가

[27:53] 대단해요! Tempo가 최고예요. 보세요,

[27:57] 여기 불릿 포인트가 있고

[27:59] 요약도 있지만, 임시저장과

[28:03] 사용자 프로필을 마무리하고

[28:05] PDF 내보내기 기능은

[28:07] 마지막에 집중하려고 해요. 제가 하고 싶은 건

[28:10] 이력서를 Supabase 대시보드에

[28:16] 저장하는 거예요. 새 이력서를 만드는 순간

[28:20] Supabase에 저장되어야 하고

[28:26] Supabase에

[28:28] 변경사항을 만들면 Supabase에

[28:33] 업데이트되고 저장되어야 해요.

[28:37] 앱을 닫고 다시 대시보드로 돌아와도

[28:42] 마지막으로 작업했던 바로 그 이력서에

[28:46] 접근할 수 있어야 해요.

[28:50] 여러분, 이게 바로 프롬프트의 정수죠.

[28:53] 농담이에요.

[28:55] 원하는 것과 작동 방식을

[28:56] 정확히 설명하고, 최대한

[28:58] 자세히 설명하면 AI가

[29:01] 코드를 제공하고 필요한

[29:03] 변경사항을 만들어 줄 거예요.

[29:05] 좋아요, 구현은 됐지만

[29:06] 문제가 있는 것 같네요. AI로 수정하기를 클릭하고

[29:08] Tempo 에이전트가 처리하도록 하겠습니다.

[29:11] 좋아요, 오류를 수정했으니 웹사이트로

[29:13] 돌아가 볼게요. 이력서로 가서

[29:17] 새로 만들어 보겠습니다.

[29:19] 이름을

[29:22] Michel Shimal List라고 하고

[29:25] 이력서로 가보면... 여기 저장이 안 되네요.

[29:27] 임시저장을 클릭해야 하나

[29:29] 확인해 보고 이력서로 가볼게요. 아, 그렇네요.

[29:32] 임시저장을 클릭해야 하는데

[29:34] 마음에 드네요. 수정을 클릭하면

[29:36] Michael Shalis 소프트웨어

[29:39] 엔지니어로 하고, Mickey@tempol labs.

[29:44] ai를 입력할게요. 저는 풀스택

[29:48] 소프트웨어

[29:51] 엔지니어입니다, Tempo

[29:54] Labs에서요. 그리고 2025년부터

[29:58] 현재까지 근무 중이에요. Tempo에서 멋진 것들을 만들어요.

[30:04] 음, 프론트엔드라고만 할게요.

[30:07] 잠깐, 이렇게 할 필요가 없네요.

[30:09] 대시 표시하고 프론트엔드, 백엔드, 올엔드라고 하니

[30:14] 이상하네요. 그럼

[30:18] 이걸 저장하고

[30:20] 이력서로 가서

[30:22] 새로 하나 더 만들건데

[30:24] 이건 제 분신 Shimalis

[30:27] Michael을 위한 거예요. 그는 엔지니어

[30:30] 소프트웨어고, 저장하겠습니다.

[30:32] 여기서 초안을 저장하고, 이력서를 보면

[30:36] 두 개의 이력서가 있고 편집을 클릭할 수 있어요

[30:38] 이력서를 클릭해서 바로 볼 수 있게 하고 싶어요

[30:41] 그냥 바로 볼 수 있게요

[30:44] 이건 잘 작동하네요

[30:48] 제가 하고 싶은 건 이력서 카드를 클릭해서

[30:53] 바로 볼 수 있게 하는 거예요

[30:57] 그렇게요

[30:58] 편집을 클릭하면 에디터로 가지만

[31:03] 카드를 클릭했을 때는 편집이 아닌

[31:07] 바로 볼 수 있게 하고 싶어요

[31:11] 완벽해요. Tempo 에이전트가

[31:14] 수정했네요. 다시 돌아가서

[31:17] 카드를 클릭하면 이력서를

[31:20] 전체 모습으로 볼 수 있어요. 여기

[31:24] 모던, 클래식, 미니멀 드롭다운이 있는데

[31:25] 이건 필요 없을 것 같아요

[31:27] 색상도 필요 없을 것 같아서

[31:29] 기본값으로 설정할 거예요

[31:31] 모던으로 하고 색상은 검정으로 하고

[31:34] 엔터를 누를게요. 뷰어는 마음에 들어요

[31:38] 이력서를 클릭하면

[31:41] 여기로 이동하는데요, 음...

[31:45] 모던 드롭다운은 원하지 않아요

[31:51] 아, 죄송해요. 영어가 좋지 않네요

[31:54] 모던 드롭다운은 필요 없어요

[31:55] 보기, 색상, 폰트로 돌아가서

[31:59] 색상과 폰트

[32:02] 드롭다운에서 색상은

[32:06] 기본값으로

[32:08] 검정으로 하고 폰트는 현재 상태로 두겠어요

[32:15] 레이아웃은... 음, 레이아웃은 유지하고

[32:19] 색상은 원하지 않아요

[32:21] 나중에 다른 레이아웃을 추가할 수 있겠죠

[32:23] 색상은 원하지 않아요

[32:24] 폰트 드롭다운도 필요 없고 기본

[32:28] 검정색으로 하고 폰트는

[32:29] 현재 상태로 둘게요

[32:31] 엔터를 누르고 처리되길 기다려볼게요

[32:33] 완벽해요. 다시 돌아가서

[32:37] 새로고침 하면, 보세요. 모던 드롭다운만 있고

[32:39] 대시보드로 가서

[32:42] 편집하려고 하면

[32:43] 보기로 바뀌었네요

[32:49] 그리고 편집으로... 어떤 이유에서인지

[32:53] 에디터가 제거됐네요

[32:54] 에이전트에게 말해볼게요

[32:59] 편집 버튼을 클릭했을 때

[33:04] 에디터로 이동하게 해주세요

[33:08] 그리고 보기는 이력서 뷰어로 이동하게요

[33:14] 자, 사이트로 돌아가서

[33:16] 이력서에서 편집을 클릭해볼게요

[33:18] 에디터는 돌아왔는데

[33:20] 뷰어가 사라졌네요. 그래서 말할게요

[33:23] 뷰어로 이동하는 보기 버튼을 다시 가져와주세요

[33:28] 편집 버튼 바로 옆에 놓아주세요

[33:33] 둘 다 존재한다는 걸 알 수 있게요

[33:36] Tempo 같은 도구에 대해

[33:38] 아셔야 할 게 있는데요, 특히 Tempo는

[33:40] AI 모델이 발전할수록 도구도 좋아지고

[33:44] 코드도 좋아지고 속도도 빨라지고

[33:46] 모든 게 좋아진다는 거예요

[33:47] 우리는 이러한 모델들과 연계되어 있어서

[33:50] 모델이 발전할수록

[33:51] 당연히 그렇게 될 테고, Tempo도 함께 발전해요

[33:54] 자, 테스트해볼까요? 보기를 누르면 뷰어로

[33:57] 완벽해요. 그리고 편집은

[34:00] 에디터로 이동하네요. 마음에 들어요

[34:03] 지금 모습이 꽤 만족스러워요

[34:05] 편집으로 가서 먼저

[34:08] 이게 뭔지 모르겠네요

[34:10] 그래서 이걸 삭제하려고요

[34:12] 에디터와 뷰어에 있는 두 개의 화살표를

[34:18] 제거해주세요

[34:21] 부탁드립니다. 필요 없어요

[34:26] 정말 짜증나는군요

[34:28] 그리고 이건 정말

[34:31] 이건 전혀 필요가 없습니다

[34:32] 제가 할 수 있는 한 가지는

[34:34] '임시저장'과 'PDF 내보내기' 버튼을 여기에 두는 겁니다

[34:38] 그러면 더 잘 작동할 거예요

[34:43] 그리고 여기 이 굵게 표시도

[34:45] 이건 텍스트 에디터가 아니니까

[34:47] 필요 없어서 이것도

[34:49] 제거하도록 하겠습니다

[34:51] 이제 그 버튼들이 제거되었고

[34:53] 스크린샷을 찍어서 AI 에이전트에게

[34:57] 최대한 많은 컨텍스트를 제공하려고 합니다

[35:00] 그래서

[35:02] 음... 버튼들을 이동시켜달라고 할 건데

[35:07] 어떤 버튼이었더라...

[35:09] 임시저장과 PDF 내보내기예요

[35:14] 임시저장과 PDF 내보내기를 모던 드롭다운과

[35:20] 같은 라인에 배치하고 싶어요

[35:24] 모던 드롭다운과 함께요. 그리고

[35:28] 굵게 표시 기능은 제거하고 싶어요

[35:32] 굵게

[35:33] 기울임꼴 등의 기능을

[35:37] 제거하고 이미지는 추가될 거예요

[35:40] 컨텍스트를 이해하고

[35:41] 무엇을 수정하고 제거할지 알 수 있게요

[35:43] 이렇게 하면 AI의 작업이 더 쉬워질... 잠깐

[35:47] AI에게 생명이 있나요? 아니죠, 생명은 없습니다

[35:53] 생명을 창조하실 수 있는 건 하나님뿐이에요

[35:57] 하지만 AI도 멋지죠

[35:59] 우리가 멋진 것들을 만들 수 있게 해주니까요

[36:02] 어쩌면 더 이상 코드를 작성하지 않고

[36:04] 노래하고 랩만 할지도 모르겠어요

[36:07] 솔직히 말하면 좀 어색했네요

[36:10] 어색했어요. 좋아요, Tempo 에이전트가 작업 중이에요

[36:13] 보시다시피 노란색일 때는

[36:14] 변경 사항을 작업 중이고

[36:16] 초록색일 때는 변경 사항이 푸시된 거예요

[36:19] 이제 우리 사이트로 돌아가서

[36:22] 메인 페이지로 가보겠습니다

[36:24] 완벽해요. 편집을 클릭하면

[36:27] 아무것도 보이지 않네요

[36:32] 에디터 페이지에 가면

[36:35] 그냥 하얗기만 하네요

[36:38] 수정해주세요

[36:41] 개발자니까 검사하고 콘솔 로그를 확인하면

[36:43] 에러를 볼 수 있을 것 같아요

[36:45] 여러분도 할 수 있는 건데

[36:47] 대부분 기술에 익숙하지 않으시겠지만

[36:48] 페이지에서 우클릭하고 검사를 누르면

[36:51] 콘솔에서 에러를 볼 수 있어요

[36:53] 할 수 있는 건

[36:55] 이게 무슨 뜻인지 몰라도

[36:56] 복사해서 AI에게 붙여넣기만 하면 돼요

[36:59] 만약 해결되지 않으면 제가

[37:01] 그렇게 할 거예요

[37:03] 이게 오늘의 팁이네요

[37:04] 가져가세요

[37:06] 이건 공짜예요

[37:08] 자 확인해볼까요

[37:11] 이렇게 됐고 보기를 클릭하면

[37:14] 작동이 안 되고, 편집을 클릭해도

[37:17] 안 되네요. 그래서 아까 봤던

[37:20] 에러를 붙여넣을 건데

[37:23] 이게 에러라고 먼저 말했어야 했는데

[37:25] 어떻게 처리하는지 봅시다

[37:28] 이 에러를

[37:28] 어떤 사람이 샤와르마 치킨 경품 이벤트에

[37:31] 저를 태그했네요. 치킨 경품에 왜 저를

[37:33] 태그한 거죠? 어쨌든

[37:36] 자 사이트로 돌아가서

[37:38] 새로고침하고 보기를 클릭해보면... 이런

[37:43] 이런 일이 생길 수 있는데

[37:46] Tempo가 이런 상황을

[37:47] 쉽게 해결하는 방법을 보여드릴게요

[37:50] 마지막으로 작동했던 시점으로

[37:53] 돌아가보겠습니다

[37:56] 맞아요, 이게 제가 이 스크린샷을 찍었을 때의

[37:58] 상태입니다. 제가 할 일은

[38:00] 아니요, 실제로 그게 삭제되어서

[38:03] 저는 복원을 해야 할 것 같아요

[38:05] 여기서요

[38:06] 자, 이게 지금 하고 있는 작업이에요

[38:11] 좋아요

[38:12] 현재... 방금 여기 current를 클릭했고

[38:15] 돌아가서

[38:16] 다시 재생을 누르고 대시보드로 가보면

[38:20] 보기로 가서, 지금 복원

[38:23] 버튼을 클릭할 거예요

[38:25] 복원이 진행되고 있네요

[38:28] 좋아요, 이제 뷰어가 돌아왔고

[38:29] 에디터도 돌아왔어요. 아주 마음에 들어요

[38:33] 이제 하고 싶은 것은

[38:35] 대시보드에 네비게이션 바를 추가하는 거예요

[38:37] 그럼 추가해 보죠

[38:39] 네비게이션 바를

[38:41] 대시보드에 말이죠. 그리고 나서

[38:44] 음, 이력서는 거기 있어도 괜찮은데

[38:48] 사용자 프로필을 추가하고 싶어요

[38:50] 그리고 이 SaaS는 거의 준비가

[38:54] 됐어요

[38:55] 시작하기 버튼도

[38:57] 작동하는지 확인하고 싶어요

[38:59] 정말 좋네요, 그리고

[39:00] Tempo는 주말 프로젝트에는 좋지만

[39:03] 만약 진지한 제품 아이디어가 있다면

[39:06] 이 도구를 사용해서

[39:08] 며칠, 몇 주, 몇 달 동안

[39:10] 완벽한 제품을 만들 수 있어요

[39:12] 이 영상의 목적은

[39:14] Tempo가 얼마나 많은

[39:15] 제어권을 제공하는지 보여주는 거예요

[39:18] 자, 이제 마무리를 위해

[39:22] 설정 버튼을 사용자 프로필로

[39:24] 바꾸고 싶어요. 설정 버튼을

[39:28] 사용자 프로필로 대체하고 싶은데

[39:35] Tempo 에이전트가 충분히 똑똑해서

[39:36] 이전에 시도해봤는데

[39:39] 정확히 제가 원하는 걸 알았어요

[39:41] AI가 우리 마음을 알 거라고

[39:42] 가정해서는 안 되죠. 그게

[39:44] 관계를 망치는 방법이지만

[39:46] 때때로 시도해볼 만하죠

[39:48] 저는 지금 그걸 하고 있는 거예요

[39:51] 좋아요, 이제 해보죠

[39:54] 새로고침을 해볼게요

[40:00] 여기 보니까 사용자 프로필이 있네요

[40:03] 설정은 아무것도 안 하지만 로그아웃은 잘 작동해요

[40:06] 다시 돌아가 보죠

[40:08] 내 계정으로 완벽해요

[40:12] 설정에 대해서는

[40:16] 설정에서는

[40:18] 설정 페이지로 이동해서

[40:24] 사용자 정보를 볼 수 있게 하고 싶어요

[40:29] 그리고 그게 되면

[40:33] 이 애플리케이션에 꽤 만족할 것 같아요

[40:38] 정말 좋아 보이네요

[40:40] 보세요, 얼마나 멋진지

[40:44] '1000만 달러 시리즈 A 투자 유치'

[40:46] 발표가 얼마나 멋있게 보이나요

[40:49] Tempo로 바로 이렇게 아름답게 만들 수 있어요

[40:52] 여러분, 자 이제

[40:55] 설정 페이지가

[40:56] 완성될 때까지 기다려볼게요

[40:58] 좋아요, 완성됐네요

[41:00] 사용자 프로필 설정으로 가보면

[41:03] 설정 페이지가 있고 이름을 변경할 수 있고

[41:06] 이력서로 돌아가서 내 이력서를 볼 수 있어요

[41:09] 대시보드로 돌아가서

[41:11] 이력서를 편집하고 Nikki Jack으로 바꾸고

[41:16] 임시 저장한 다음 돌아가서

[41:18] 이력서를 보면 Nikki Jack이 보이고 편집할 수 있어요

[41:22] 근데 한 가지 버그가 있는데

[41:26] 편집을 클릭했을 때 Nikki Jack이

[41:28] 안 보이다가 새로고침하면

[41:30] Nikki Jack이 깜빡이면서 보여요

[41:32] 에디터 페이지에서 작업할 때

[41:38] 그

[41:39] 미리 채워진 데이터, 폼에

[41:43] DB에서 먼저 데이터를 가져와야 하고

[41:49] 만약

[41:50] DB에 데이터가 없다면 비워두어야 합니다

[41:55] 왜냐하면 지금 일어나는 일이

[41:57] 이 데이터가 미리 채워지고 있는데

[41:58] 처음에는 좋았습니다

[42:00] 처음 이걸 만들 때는요

[42:02] 테스트하기 위해서였는데

[42:04] 이제는 이력서를 만들 수 있고

[42:06] 모든 기능이 작동하니까

[42:08] 그냥 비어있기를 원하고, 또 한 가지

[42:10] 깨달은 점은 보기 모드에서는

[42:13] 괜찮은데, 편집 모드에서는

[42:15] 여기 이게 있는데 이걸

[42:18] 제거하고 싶어서 Tempo

[42:20] 에이전트가 이 테스트를 끝내고

[42:22] 이걸 제거하면 준비가 끝날 것 같습니다

[42:24] 자, 편집을 클릭해보죠. 완벽합니다

[42:28] 비어있네요. Niki Jack이라고 적겠습니다

[42:31] 직업은 가수이자 작곡가

[42:36] 이메일은... 잠깐, 작가라고 했나요?

[42:39] 이메일은

[42:41] [email protected]이고 전화번호는

[42:45] 4141-4141을 입력하고

[42:49] 임시저장을 누르고 다시

[42:51] 이력서 목록으로 가서 보기를 클릭하면

[42:55] 내 이력서가 보입니다. 이제 남은 건

[42:59] Tempo에서 공유를 클릭하고

[43:03] 여기서 배포를 클릭하면

[43:06] 배포를 클릭하고 완료되면

[43:09] 미리보기 링크가 생성되어

[43:12] 공유할 수 있게 됩니다. 곧

[43:13] 배포 기능이 추가될 예정인데

[43:16] 여러분이 직접

[43:17] 자신만의 URL을 연결하고 누구와도

[43:19] 공유할 수 있게 될 겁니다

[43:24] 제 트위터를 팔로우하시고

[43:26] 알림 설정도 해주세요

[43:28] Tempo 트위터도 팔로우하시고

[43:29] 알림 설정을 해주세요. 앞으로

[43:31] 2-3주 안에 정말 말씀드리지만

[43:34] 업데이트와 기능들이 대단할 거예요

[43:36] 불편한 점이 있다면 알려주세요

[43:37] DM을 보내거나 디스코드로 연락주세요

[43:40] 저는 Tempo가 여러분에게

[43:42] 최고의 서비스가 되도록

[43:45] 노력하고 있습니다. 자, 링크를 복사해서

[43:48] 새 탭에 붙여넣으면 멋진 사이트가 보이죠

[43:54] 인증하고 로그인하거나 회원가입할 수 있고

[43:57] URL로 돌아가면

[44:00] 대시보드가 있고 새 이력서를 만들었어요

[44:03] 이번엔 Michael Jack이라고 하겠습니다

[44:05] 그는 소프트웨어 개발자이고 이메일은 [email protected]

[44:10] 경력은 G사에서 근무했고

[44:17] 와, 철자가 너무 엉망이네요

[44:19] 날짜는 태어날 때부터 현재까지

[44:24] 요약은 그냥 멋진 사람이라고 하고

[44:28] 임시저장 하고

[44:30] 이력서로 가서 보기를 클릭하면

[44:34] 여기 이력서가 있고 내보내기를 클릭했는데

[44:37] 어디 있죠?

[44:39] 바탕화면에 있네요. SaaS가 잘 작동합니다

[44:43] 이걸 만든 건 그냥 앉아서

[44:45] Tempo를 사용한 거예요. Tempo로

[44:47] 주말 프로젝트도 만들 수 있지만

[44:49] 특히 곧 나올 업데이트들과 함께

[44:51] 진지한 제품도 만들 수 있어요

[44:52] 아직 공개할 순 없지만

[44:54] 제 트위터를 지켜봐 주세요

[44:56] 자, 이제 끝났네요. 드디어

[44:58] Tempo가 어떻게 작동하는지 보여드렸어요

[45:00] 설명란의 링크를 클릭해서 계정을 만들고

[45:03] 사용해보세요. 말씀드리지만

[45:05] 새로운 기능들이 추가될 건데

[45:06] 제가 직접 작업하고 있는 것들이

[45:08] 여러분, 아이디어만 가진 분들이

[45:10] 마침내 실현할 수 있게 될 거예요

[45:12] 영상을 봐주셔서 감사합니다

[45:14] 링크는 설명란에 있으니

[45:16] 다음 영상에서 만나요. 안녕히 계세요