[00:00]
안녕하세요, 저는 Parker Rex입니다.
[00:01]
2300만 달러에 매각된 스타트업의 기술 책임자였죠.
[00:03]
그 후에 음악계의 Airbnb를 만들어보려 했는데
[00:04]
실패했고, 결국 프로그래밍에
[00:07]
올인하기로 결심했습니다.
[00:08]
약 1년 정도 그렇게 지내다가
[00:10]
ChatGPT가 출시되었고, 당연히
[00:12]
모든 것이 바뀌었죠. 저는
[00:14]
다른 모든 기회를 뿌리치고
[00:16]
AI를 활용하는 방법을 배우는데
[00:18]
전념했습니다. 마케팅, 코딩,
[00:21]
그리고 전반적인 생산성 향상을 위해서요.
[00:24]
이를 통해 비즈니스에서 더 나은 성과를
[00:25]
얻고 싶었습니다. 저는 항상
[00:28]
최신 트렌드의 최전선에 있고 싶었고,
[00:30]
오늘은 제가 완전히 놀란
[00:32]
도구 하나를 소개해드리려고 합니다.
[00:35]
이 도구는 여러분의 작업 방식을 바꿀 겁니다.
[00:36]
클릭베이트처럼 들리겠지만
[00:38]
실제로 그렇습니다. Taskmaster라는 도구인데
[00:41]
15분 안에 설명해보도록 하겠습니다.
[00:42]
이 도구의 기본적인 것들을
[00:43]
불필요한 것들은 제외하고 보여드리겠습니다.
[00:45]
이 도구는 말씀드린 대로 Taskmaster인데
[00:48]
알아야 할 것들이 몇 가지 있습니다.
[00:51]
MCPs가 내부에 있고
[00:52]
신경 쓸 필요 없는 기능들이 있기 때문이죠.
[00:56]
이 화면을 스크린샷으로 찍어두세요.
[00:57]
나중에 필요할 겁니다.
[00:59]
이게 바로 마법 같은 부분인데
[01:00]
AI를 체계적으로 관리할 수 있게 해줍니다.
[01:03]
만약 AI 도우미들을 사용해 보셨다면
[01:09]
짧은 시간 동안은 정말 좋은 성능을 보이다가
[01:12]
항상 다음 알파를 찾아야 하고
[01:15]
다음 트릭을 찾아서
[01:17]
AI를 제대로 된 궤도에
[01:19]
유지해야 했던 경험이 있으실 겁니다.
[01:21]
제가 5년 정도 프로덕트 매니저로 일하고
[01:24]
UX 디자이너를 거쳐
[01:27]
몇 년간 프로그래머로 일하면서
[01:29]
태스크 관리에 대해
[01:30]
배운 것이 있는데, 이 도구가
[01:33]
바로 그 부분에서 뛰어납니다. 이건 마치
[01:34]
개발자의 어깨에 앉아있는
[01:37]
제품 관리자와 같아서
[01:39]
'이게 다음 할 일이에요, 이거 끝났나요?'라고
[01:41]
계속 확인해주죠. 개발자로서
[01:42]
이미 하고 계시겠지만, 이 도구는
[01:45]
더욱 도움이 됩니다.
[01:47]
제품 관리 부분에 대해
[01:50]
자세히 설명해드리고 싶은데요.
[01:53]
이 스킬은 절대로 약화시켜서는
[01:56]
안 되는 능력입니다. 코딩의 기초에 대한
[01:59]
많은 세부사항들을 알아야
[02:00]
출력되는 내용을
[02:02]
이해할 수 있지만, 실제 계획은
[02:04]
앞으로 다가올 시대에
[02:06]
점점 더 중요해질 것입니다.
[02:08]
실제 클라이언트 프로젝트를
[02:11]
진행할 건데요, 디자인에 매우 신경 쓰는
[02:15]
고급 디자인 스튜디오를 위한 것입니다.
[02:19]
당연히 디자인을 중요하게 생각하죠.
[02:21]
그게 그들의 전문 분야니까요. 앗, 잘못 클릭했네요.
[02:25]
빌드를 리셋해야겠어요.
[02:27]
우리가 할 일은
[02:30]
연락처 양식을 추가하는 건데요, 아주 간단합니다.
[02:33]
그들은 그 이상의 것은
[02:36]
신경 쓰지 않습니다. 이 영상에서는
[02:38]
연락처 페이지를 가져와서
[02:41]
문의사항을 보낼 수 있도록 업데이트하고
[02:43]
구글 스프레드시트에 저장되도록 할 겁니다.
[02:45]
다음 단계로는 구글 스프레드시트에만 저장하는 게 아니라
[02:48]
자동 응답 시퀀스나
[02:50]
무료 콘텐츠 제공 같은
[02:52]
기능들을 추가하겠지만,
[02:54]
이번 작업에서는 그건 제외입니다.
[02:56]
그래서 우리가 해야 할 일은 무엇일까요?
[02:59]
새로운 프로젝트를 시작할 때마다
[03:00]
모든 다양한 구성 요소들과
[03:03]
관련된 모든 사항들을 파악해야 합니다
[03:05]
도메인 기반 아키텍처를 사용할 수 있는데
[03:07]
이는 타입을 작성하고
[03:08]
필요한 것들을 정의하고
[03:10]
데이터 구조를 작성한 다음
[03:11]
거기서부터 작업을 시작하는 방식입니다
[03:13]
저는 이 방식을 정말 좋아하는데요
[03:16]
우리는 이것의 하이브리드 방식을 사용해서
[03:18]
정확히 무엇이 필요한지 파악할 것입니다
[03:21]
화이트보드를 가져와서 15분 타이머를 설정하겠습니다
[03:24]
여기 들어가서
[03:26]
몇 가지 다른 부분들이 있을 텐데
[03:27]
그들이 원하는 결과물에 대한 영감을 가져오겠습니다
[03:30]
매우 간단하지만 이 프로세스를
[03:33]
정확히 어떻게 복제할 수 있는지 보여드릴 겁니다
[03:35]
PRD 부분에 특히 집중해주세요
[03:38]
여기 들어가서 연락처로 가보면
[03:40]
몇 가지 요소들이 있는 것을 볼 수 있습니다
[03:43]
shad CN 사이드 드로어를 원하고
[03:44]
새 프로젝트 문의가 있는데
[03:46]
이 큰 폼이 포함되어 있습니다
[03:49]
그래서 필요한 데이터 포인트가 무엇인지 파악해야 합니다
[03:51]
여기로 넘어와서
[03:52]
시간을 절약하기 위해 타이핑을 하겠습니다
[03:55]
제 데일리 업로드 채널에서는
[03:58]
보통은 이것을 직접 그리는데
[04:00]
관심 있으시다면
[04:02]
Parker Rex Daily를 확인해보세요
[04:03]
하지만 지금은 타이머가 돌아가고 있으니
[04:04]
기본적으로 인터페이스를 만들어보겠습니다
[04:07]
이를 위한 타입들을 정의해보죠
[04:10]
먼저 first name은 string 타입이고
[04:13]
last name도 string 타입입니다
[04:17]
contact email은 string, 연락처 전화번호도 string으로 하겠습니다
[04:21]
이렇게 작은 프로젝트에서는 이런 작업이 필수는 아니지만
[04:25]
제가 어떻게 작업하는지
[04:26]
여러분이 보시면 좋을 것 같아서 보여드립니다
[04:30]
더 큰 규모의 프로젝트에서 도움이 될 거예요
[04:33]
referral 옵션이 있는데
[04:35]
약간 과하긴 하지만 하나 만들어보겠습니다
[04:39]
이것도 string으로 하겠습니다
[04:43]
타입으로 만들 수도 있지만
[04:45]
이 정도 프로젝트에서는 과합니다
[04:46]
project type도 string으로 하고
[04:50]
description, project description도 string입니다
[04:53]
이것들은 모두 RDB에 매핑될 것인데
[04:56]
이 경우에는 구글 시트이지만
[04:58]
보통은 PostgreSQL을 사용합니다
[05:00]
아키텍트와 작업 중인지 여부는
[05:03]
boolean이 될 것 같네요
[05:06]
회사 이름도 필요하고
[05:10]
company details는 string, ongoing project details도 필요하고
[05:15]
project stage 페이지는 string이 될 것이고
[05:18]
budget도 string으로 하겠습니다
[05:22]
그리고 마지막으로 전체를 포괄하는
[05:24]
project scope details도 string으로 하겠습니다
[05:29]
이렇게 하면 도움이 되죠
[05:31]
이것들 각각이 우리 스프레드시트에 매핑될 것입니다
[05:35]
그럼 이제 빠르게 만들어보죠
[05:36]
Taskmaster로 작업한다면
[05:38]
바로 들어가서 SQL 문을 작성하겠지만
[05:40]
동일한 방식으로 진행할 겁니다
[05:41]
제가 방금 했던 것과 같은 형식으로요
[05:44]
자 그럼 시작해보죠
[05:46]
먼저 이름, 성, 이메일을 입력하고
[05:49]
물론 조건부 형식이 적용되어 있어서 되돌려야 하네요
[05:52]
전화번호, 프로젝트 주소
[05:53]
추천인, 프로젝트 유형, 프로젝트 설명
[05:57]
진행 중인 프로젝트, 프로젝트 세부사항
[05:59]
프로젝트 단계, 예산, 프로젝트 범위 등을 입력합니다
[06:02]
이렇게 모든 필드를 정의했습니다
[06:06]
스코프 세부사항들이 다 있네요.
[06:09]
이게 중요한 이유는
[06:11]
서버 액션을 작성하거나
[06:13]
React Query나 다른 것을 사용할 때
[06:14]
Axios 등을 쓸 때 몇 가지
[06:16]
구체적인 사항들이 필요하기 때문이에요. 이건 서비스 계정을 사용하는데
[06:20]
G Drive 작업에 익숙하시다면
[06:22]
많은 중소기업들이 이걸 사용합니다.
[06:24]
데이터베이스에 익숙하지 않고
[06:27]
신경 쓰고 싶지 않아서죠.
[06:29]
과도한 것 같아서 이게
[06:31]
간단한 작업을 위한 최고의 DB예요.
[06:34]
하지만 반드시 확인해야 할 것은
[06:37]
시트 ID와 이름이 있고
[06:39]
대소문자를 구분한다는 점이에요.
[06:41]
이런 세부사항들은
[06:43]
PRD를 작성하기 전에
[06:44]
미리 확인해야 하는 것들이죠.
[06:48]
이제 시트가 준비되었으니 Taskmaster로 넘어가보죠.
[06:51]
제가 이전에 실행했던 명령어를 보여드리겠습니다.
[06:55]
npm을 사용하신다면 P는 빼고 실행하세요.
[06:59]
이렇게 하면 전역으로 설치되는데
[07:00]
매우 추천드립니다.
[07:01]
앞으로 모든 프로젝트에서
[07:02]
사용하게 될 거예요. 정말 좋거든요.
[07:05]
그 다음 taskmaster init을 실행하면
[07:08]
Taskmaster가 초기화됩니다.
[07:12]
Anthropic 키가 필요한데
[07:14]
비용 걱정은 하지 마세요.
[07:15]
저는 이걸 계속 사용했는데
[07:17]
4일 동안 1달러 썼어요.
[07:19]
실행하고 나면
[07:21]
설정을 위한 질문들이 나오고
[07:22]
프로젝트에 대해 몇 가지
[07:24]
답변하면 거의 끝납니다.
[07:28]
그러면 몇 개의 파일이 생성되는데
[07:31]
어떤 파일들이 생성되는지 보죠.
[07:32]
2단계를 실행하고 나면 Cursor에
[07:36]
몇 가지 규칙들이 생기는데
[07:39]
이것들은 MDC로
[07:41]
다양한 작업을 할 때 Cursor가 실행할 내용입니다.
[07:44]
이건 모범 사례들이에요.
[07:47]
수정하지 마세요. 건드리지 마세요.
[07:49]
이건 시스템에 제공되는 것으로
[07:51]
자연어로 말할 때
[07:53]
무엇을 호출해야 하는지 이해하게 해줍니다.
[07:55]
다시는 이것들을 입력할 필요가 없어요.
[07:57]
놀랍게도 저는 처음 두 개만 입력했어요.
[08:00]
나머지는 전혀 입력하지 않았지만
[08:02]
혹시 필요하실까 봐
[08:04]
CLI에서 실행하고 싶으실 때를 위해 알려드립니다.
[08:06]
하지만 기억할 게 하나 더 늘어날 뿐이에요.
[08:09]
그리고 나서 scripts 폴더 아래
[08:11]
새로운 scripts 폴더가 생기는데
[08:13]
실행을 위한 JavaScript 파일과
[08:15]
예제 PRD가 포함되어 있어요.
[08:17]
파트 2에서 사용할 건데, 제가 만들어서
[08:20]
메타프롬프팅을 거쳐
[08:22]
테스트해본 PRD가 있어요.
[08:23]
아래에 'PRD'라고 댓글 달아주시면
[08:27]
답글로 공유해드리겠습니다.
[08:30]
원하지 않으시면 괜찮아요.
[08:31]
이걸 사용하셔도 되지만
[08:32]
제가 더 효과적이라고 생각하고
[08:35]
RCA(근본 원인 분석)도 추가했어요.
[08:38]
새로운 기능 개발뿐만 아니라
[08:40]
디버깅할 때도
[08:42]
매우 유용합니다.
[08:44]
readme 파일도 있고 로드맵도 있는데
[08:46]
이건 제가 추가한 거예요.
[08:48]
다음에 해야 할 작업들 중에서
[08:50]
PRD로 나눠야 할 것들이에요.
[08:53]
아 맞다, 하나 더 추가했었네요.
[08:56]
걱정하지 않으셔도 됩니다.
[08:57]
이건 솔루션 아키텍처 문서를 위한 것이고
[08:59]
저는 이 도구가 어디까지 가능한지
[09:00]
테스트해보고 있는 중입니다.
[09:03]
작업 복잡도 보고서가 있는데,
[09:05]
첫 번째 명령을 실행할 때 생성되는 모든 작업의
[09:08]
복잡도를 빠르게 분석합니다.
[09:12]
이미 전역으로 설치했다고 가정하고,
[09:13]
초기화를 했다면
[09:15]
이런 것들이 여기에 나타나기 시작할 것입니다.
[09:18]
아직 이것들은 보이지 않을 텐데,
[09:20]
이 테스트 구글 시트는
[09:22]
제가 작성을 요청한 테스트입니다.
[09:23]
모든 것에 테스트가 있기를 원했기 때문에
[09:26]
이것이 완료 기준의 일부이고
[09:28]
마지막으로 작업 목록이 있는데
[09:30]
여러분의 것은 비어있을 것입니다.
[09:31]
하지만 이것이 출력될 것이고
[09:33]
기본적으로 1부터 10까지 있습니다.
[09:36]
작업을 재귀적으로 검토하도록 요청할 수 있어서
[09:38]
세분화가 필요한 부분을 찾습니다.
[09:41]
매우 큰 작업이 있다면
[09:43]
실제 개발과 마찬가지로
[09:45]
그것들을 더 작게 나눠야 합니다.
[09:46]
이해하기 쉽도록 하고
[09:48]
순서에서 벗어나지 않도록
[09:49]
의존성이 있는 작업을 하지 않기 위해서죠.
[09:51]
만약 어떤 것이 임계값에 도달하여
[09:54]
너무 어려워진다면
[09:56]
추가 연구를 요청할 수 있습니다.
[09:58]
이는 perplexity 키가 필요하며
[09:59]
선택사항입니다.
[10:01]
enthropic 키는 항상 필요하고
[10:03]
추가 연구를 위해 sonar를 사용하는 것이
[10:05]
매우 유용하다고 생각합니다.
[10:07]
그리고 핵심 팀과
[10:09]
디스코드에서 시간을 보낸 경험에서 나온 모범 사례로
[10:13]
그들이 말하길 task.json 파일은
[10:16]
건드리지 말라고 합니다.
[10:19]
cursor rules가 있어서 그것을 설치하고
[10:22]
그 외에 포함된 것이 뭐가 있는지 보면
[10:24]
그게 전부인 것 같습니다.
[10:26]
이제 PRD를 시작해보겠습니다.
[10:30]
우리가 논의했던 아이디어를 가지고
[10:32]
Whisper Flow를 사용할 건데
[10:34]
이것은 훌륭한 워크플로우 도구입니다.
[10:36]
항상 음성을 사용하세요.
[10:38]
이건 그저 보여주기 위한 것이 아니에요.
[10:41]
키보드와 여러분 사이에는
[10:43]
장벽이 있고 압축과 데이터가
[10:45]
소통에 중요합니다.
[10:48]
우리는 말할 때 더 빠르게 진행할 수 있고
[10:50]
세부사항을 누락하지 않습니다.
[10:55]
function 키를 누른 채로
[10:58]
말하기 시작할 것이고
[10:59]
해야 할 모든 것을 설명하겠습니다.
[11:02]
인터페이스를 포함해서
[11:02]
그리고 코드 스니펫도
[11:05]
포함하도록 하겠습니다.
[11:07]
우리는 연락처 페이지에 프로젝트 문의 양식을 만들어야 합니다.
[11:12]
작은 텍스트 블록과 링크 텍스트 버튼이 있을 것이고
[11:19]
shad CN 버튼 링크 변형을 사용할 것입니다.
[11:23]
사용자가 탭하거나 클릭하면
[11:26]
shad CN을 사용하는 모달이 열리고
[11:29]
다음과 같은 질문들이 표시됩니다.
[11:34]
이것이 첫 번째 부분이고
[11:38]
여기서 마무리하겠습니다.
[11:40]
이제 여기서 링크를
[11:43]
연결하도록 하겠습니다.
[11:45]
source/app/components에 있다는 걸 알고 있는데
[11:49]
아니 죄송합니다. source/app/
[11:52]
components... 잠깐만요, 그냥 가져오겠습니다.
[11:54]
버튼의 상대 경로를 가져오고
[11:58]
좋습니다. 그리고 나서
[12:01]
탭이나 클릭 중에 어떤 것을 사용할지
[12:04]
우리가 사용하려는 건 modal이 아니라
[12:07]
dialogue라고 불립니다. 이제
[12:09]
shadcn dialogue의 상대 경로를 복사하고
[12:12]
여기에 있는 것을 사용하여 다음 질문들을 진행하겠습니다.
[12:16]
이제 이것을 옮기고
[12:19]
OCR 스크린샷을 사용하겠습니다.
[12:22]
한번 확인해 보겠습니다.
[12:26]
작동하지 않네요. 키를
[12:28]
다시 바인딩해야 할 것 같습니다. 이제 어시스턴트를 열고
[12:31]
코드 블록이나
[12:34]
TypeScript 코드를
[12:35]
달라고 요청하고 실행시키겠습니다.
[12:38]
이제 PRD를 계속 작성해보죠.
[12:40]
완료됐네요. 이제 래핑하고
[12:44]
이메일 가입 폼에서 사용했던 것과 같은 방식으로
[12:48]
데이터를 게시하는 방법을 사용하겠습니다.
[12:53]
이제 그 코드를 가져와보죠.
[12:55]
물론 이전에 해본 적이 있다면
[12:57]
훨씬 더 도움이 됩니다.
[12:58]
무엇을 해야 할지 어려움을 겪고 있다면
[13:00]
TypeScript를 사용하거나, GitHub에서
[13:03]
검색 연산자를 사용해서 찾아보세요.
[13:05]
저는 이것의 예제를 찾았는데, Next.js
[13:08]
Google Sheets였습니다. 매우 간단하죠.
[13:12]
이 상대 경로를 가져오겠습니다. 이 패턴은
[13:15]
Google 서비스 계정 접근을 사용하고
[13:20]
Next.js 서버 액션을 사용하며
[13:25]
submit 또는 subscribe 입력을 사용합니다.
[13:29]
이것을 가져와보죠. subscribe
[13:33]
input을 폼 버튼용으로 가져옵니다.
[13:38]
또 무엇이 필요할까요? 키를 가져와야 하는데
[13:41]
여기 있네요. 서비스 키를
[13:44]
추가했습니다. 이게 전부인 것 같네요.
[13:46]
꽤 간단할 것 같고 이제 기본 초안을 작성했습니다.
[13:50]
약간의 코드 참조가 있는데
[13:52]
만약 완전히 새로운 것이라면
[13:54]
말씀드렸듯이, 유사한
[13:56]
패턴을 찾아보는 것이 여러분의 책임입니다.
[13:58]
문서화는 또 다른 방법이 될 수 있습니다.
[14:01]
이제 여기로 와서
[14:03]
이것을 ask 모드로 전환하겠습니다.
[14:04]
이제 실제 PRD를 작성하는 단계입니다.
[14:06]
텍스트 확장기를 사용할 건데
[14:08]
느낌표 F1을 사용하겠습니다.
[14:10]
이렇게 하면 열리고
[14:11]
이것을 안에 붙여넣겠습니다.
[14:14]
temp 변수 또는 프롬프트 변수가 있는 것을 보실 수 있죠.
[14:16]
PRD 지침 안에
[14:19]
이것을 붙여넣고 ask 모드로 설정하겠습니다.
[14:21]
저는 항상 Gemini 2.5 Pro를 사용하는데
[14:23]
이렇게 하면 우리의 첫 번째 제품 요구사항 문서 초안이
[14:26]
작성되고 있습니다.
[14:30]
이게 과하다고 생각하실 수도 있지만
[14:31]
전혀 그렇지 않습니다.
[14:33]
이는 여러분이 하는 모든 작업의
[14:36]
품질을 향상시킬 것입니다.
[14:37]
저는 이와 같은 프로세스를 했거나
[14:39]
훨씬 더 간단하게, 예를 들어
[14:42]
단순히 이미지 갤러리만 있는 것도 해봤는데
[14:46]
이는 더 나은 품질의 제품으로
[14:49]
강제로 이끌어냅니다.
[14:50]
정말 대단한데요, 예를 들어
[14:52]
"페이지 로드 최적화가 필요한데
[14:56]
스크린 리더 시맨틱이
[14:58]
없네요"라고 할 거예요. 저는 이런 걸
[15:01]
생각해본 적이 없어서 좋습니다.
[15:04]
이제 돌아와서 한번 살펴보겠습니다.
[15:06]
읽어보는 게 중요하죠.
[15:08]
좋습니다. 여기 우리의 목표가 있고
[15:10]
이것을 간소화하려고 합니다. 이게 대상입니다.
[15:12]
지정된 텍스트 블록이 될 것이고
[15:14]
프로세스를 설명할 건데
[15:17]
제가 알아챈 것은 contact 페이지를
[15:19]
넣지 않았다는 거예요. 그래서
[15:22]
정확히 어디에 위치할지 모르는 상태네요.
[15:24]
그래서 제가 명확히 하고 싶은 것은
[15:28]
비슷한 방식으로 작업할 것이고
[15:30]
연락처 페이지에 구현될 것입니다. 그래서 contact.tsx에
[15:35]
자, 이제 프로젝트를 열어보겠습니다.
[15:38]
정확히 어디에 위치할지 알아보기 위해서죠.
[15:41]
우리가 찾는 것은
[15:43]
한 번에 처리하는 것이 핵심입니다.
[15:45]
실제 작업이 이루어지는 부분이죠.
[15:48]
놀라울 정도로 쉽게 처리될 거예요.
[15:51]
자, 로컬호스트를 한번 볼까요. 좋습니다.
[15:55]
이것이 'Get in Touch'를 대체할 거예요.
[15:56]
우리의 새로운 기능이
[16:01]
기존의 'Get in Touch' 섹션을 대체할 것입니다.
[16:05]
헤더 아래에 있는 기존 폼을
[16:10]
대체하게 될 거예요. 좋습니다.
[16:13]
다시 실행해보고, 이후에는
[16:16]
ask 모드에서 전환할 거예요. ask 모드는 읽기 전용이라
[16:19]
에이전트 모드로 전환하겠습니다.
[16:22]
이제 쓰기가 가능해지죠.
[16:24]
그들의 예제를 가져올 건데,
[16:27]
팀이 이것에 맞춰 최적화해놓았기 때문이에요.
[16:29]
하지만 이전에 한 번 해봤기 때문에
[16:32]
더 높은 품질의 PRD가 될 것입니다.
[16:35]
이것을 가져와서
[16:37]
작업이 끝나면
[16:39]
검토해보고 빠진 것이 없는지 확인할 거예요.
[16:40]
연락처 페이지를 확인했는데,
[16:42]
이것이 정확한 구현을 위해 매우 중요합니다.
[16:44]
링크 스타일 버튼을 살펴볼까요?
[16:46]
좋아요, 다이얼로그 구현하기
[16:49]
폼 생성에 대해 이미 생각하고 있는데
[16:51]
모바일 친화적인지
[16:52]
테일윈드 3의 브레이크포인트를
[16:54]
따르고 있는지 확인해야 합니다. 4가 아닌
[16:56]
이제 새로운 이메일 추가 기능을
[16:58]
시트에 추가하는 것도 비슷하게 할 거예요.
[17:01]
자격 증명을 사용해서 저장하고
[17:04]
기존 폼을 대체할 겁니다.
[17:06]
사용자 피드백을 제공할 거예요.
[17:07]
제출이나 오류 발생 시에 좋습니다.
[17:10]
범위에서 제외되는 것은 인터페이스 생성
[17:12]
폼 제출 시 이메일 알림 보내기
[17:14]
또는 다른 것들과의 통합이에요.
[17:16]
이거 좋네요. 우리가 이미 개략적으로 정한
[17:19]
모든 사항이 포함되어 있어요.
[17:20]
이것들이 모든 기능 요구사항이고
[17:21]
일반적인 디바이스 크기도 언급되어 있습니다.
[17:24]
그리고 제가 주목한 것은
[17:26]
이 프롬프트의 끝부분에서
[17:27]
미해결된 이슈가 있는지 물어봅니다.
[17:30]
한번 살펴볼까요? 문의 버튼 위에
[17:33]
표시할 정확한 소개 텍스트는 무엇인가요?
[17:35]
자, 한번 찾아봅시다.
[17:36]
다시 한번 말씀드리지만,
[17:39]
처음부터 제대로 하면 시간을 절약할 수 있죠.
[17:40]
그래서 우리는
[17:42]
이 답변들이 미해결된 이슈에 대한 답변입니다.
[17:47]
이것들을 반영해서
[17:50]
PRD를 다시 작성하여 완성도를 높일 거예요.
[17:53]
첫 번째는 정확한 텍스트입니다.
[17:56]
두 번째는 링크 버튼의 정확한 텍스트예요.
[17:59]
한번 볼까요? '새 프로젝트 문의'
[18:02]
세 번째는 구체적인 유효성 검사 규칙입니다.
[18:06]
구체적인 유효성 검사 규칙에 대해
[18:09]
모범 사례를 사용하고
[18:12]
zod 오류나 유효성 검사 텍스트를 사용할 거예요.
[18:17]
이는 우리의
[18:20]
구독 추가 input.tsx와 같은 스타일을 따라야 합니다.
[18:25]
프로젝트 상태와
[18:28]
예산이 자유 텍스트 입력이어야 하는지
[18:31]
좋은 질문이네요. 이것들은
[18:33]
상태를 확인해봅시다. 상태가 어떤지
[18:37]
상태를 살펴보죠.
[18:40]
자, 이제 그것을 가져와보겠습니다.
[18:42]
이런, 이것들은 다르게 해야겠네요
[18:44]
이게 정말 좋은 게
[18:46]
그냥 추측해서 진행했다면 원하는 결과를 얻지 못했을 거예요
[18:49]
라디오 버튼을 사용하는데, 옵션으로는
[18:52]
공사 진행 중
[18:56]
DA 도시계획 승인
[18:59]
사전 DA 도시계획 및 승인
[19:05]
아직 시작하지 않음
[19:09]
초기 문의 및 조사가 있습니다
[19:13]
이렇게 하면 엄청난 시간을 절약할 수 있어요
[19:15]
좋아요, 이것은 프로젝트 상태를 위한 거예요
[19:19]
프로젝트 상태에는 라디오 버튼을 사용하고
[19:21]
이것들을 4.1로 번호를 매기고 라디오 버튼을 사용할 거예요
[19:24]
라디오 버튼을 가져와서
[19:26]
라디오 그룹이 맞는 건가요?
[19:29]
한번 확인해 볼게요
[19:31]
선택 가능한 버튼 세트, 네 맞네요
[19:33]
라디오 버튼을 가져와서 붙여넣기 할게요
[19:37]
4.2는 프로젝트 상태이고
[19:40]
예산은 드롭다운을 사용하는데
[19:44]
셀렉터인 것 같아요. 한번 확인해볼게요
[19:46]
네, 맞네요. 이걸 가져와서
[19:50]
편의를 위해서
[19:53]
프로젝트 상태와 예산 모두 라디오 버튼을 사용할게요
[19:56]
클라이언트가
[19:58]
이 부분에 대해 특별히 신경 쓰고 있거든요
[20:00]
클라이언트를 만족시키기 위해
[20:03]
각각의 옵션은 다음과 같습니다
[20:05]
4.1은 공사 또는 프로젝트 상태용이고
[20:09]
중복되어 보일 수 있지만
[20:11]
정확히 하고 싶어서요
[20:12]
4.2는 예산을 위한 건데, '아직 예산 없음, 가이드 필요'
[20:18]
50만 달러 미만
[20:21]
50만에서 150만 달러, 150만에서 250만 달러
[20:27]
250만 달러 이상, 그리고 기타입니다
[20:32]
이제 5번을 볼까요, 대상 시트 ID가 뭔지
[20:35]
좋아요, 5번 대상 시트 ID는 여기 있네요
[20:40]
이걸 가져와서, 같은 프로세스를
[20:43]
Postgres DB나 다른 어떤 DB에도
[20:45]
사용할 수 있지만, 아마 이미
[20:48]
싱글톤을 설정해 두었을 거예요
[20:50]
대상 시트 ID는
[20:54]
백틱으로 감싸고
[20:58]
특정 탭 이름은 'website leads'예요
[21:01]
대소문자 구분을
[21:03]
실수하지 않도록 주의하고
[21:06]
나중에 이걸 잠글 거예요
[21:10]
또 뭐가 있나요?
[21:12]
폼 필드와 구글 시트 컬럼 간의
[21:14]
정확한 매핑이 필요한데
[21:18]
컬럼 A부터 M까지네요
[21:23]
이것들이 모두 제대로
[21:27]
되어있는지 확인해야 해요
[21:29]
여기서는 대소문자를 구분하지 않지만, 카멜케이스가 아니라
[21:33]
이메일에서 읽을 때처럼 표시됩니다
[21:37]
예를 들어 'first name'처럼요
[21:42]
7번은 특정 성공/오류 메시지에 일반적인 UX 패턴을 사용하고
[21:47]
8번은 교체 전략 확인
[21:49]
기존 폼 섹션이 전체 제거되나요?
[21:51]
네, 기존 폼 섹션이 전부 제거됩니다
[21:54]
이게 많아 보일 수 있는데
[21:59]
실제로 많은 내용이에요
[22:01]
그리고 이게 좋은 이유는
[22:03]
아무것도 놓치지 않았다는 거죠
[22:05]
더 간단한 작업을 할 때는
[22:07]
이렇게 많지 않을 텐데
[22:09]
이건 여러 가지 폼들이랑
[22:11]
첫 번째 초안에 넣으려고 했던 것들이에요
[22:14]
하지만 이게 핵심이에요
[22:16]
이제 유효성 검사가 들어가고
[22:19]
메시지가 추가되고, 새로운 스타일링이 적용되고
[22:20]
모든 상대 경로를 사용하게 됩니다
[22:25]
우리가 붙여넣은 내용을 보니까
[22:28]
사용자 스토리가 아주 도움이 되네요
[22:31]
성공적인 결과를 위해 필요한
[22:32]
모든 것이 여기 있군요. 자, 이제
[22:35]
이 초안을 다음 형식으로
[22:38]
최종화해서 PRD 예시로 작성하고 복사해서
[22:44]
PRD에 작성하겠습니다. 이게 마지막 단계예요
[22:47]
이제 에이전트 모드로 전환하고
[22:50]
기존 PRD가 비어있는지 확인합니다
[22:52]
더 이상 필요하지 않으니까요
[22:55]
이제 시작해볼게요
[22:56]
PRD에 작성을 시작했네요
[22:59]
완료됐고 이제 Taskmaster를 사용할 차례입니다
[23:02]
제가 보통 하는 방식은
[23:05]
새로운 창을 열고
[23:07]
에이전트 모드인지 확인하고
[23:08]
여전히 Gemini를 사용하고 있는지 확인합니다
[23:11]
Taskmaster를 사용해서 PRD.txt에서
[23:15]
작업을 파싱하도록 할게요. 이전 내용을 지우고
[23:19]
혹시 다른 것을 가져오려 했을 수 있으니
[23:20]
이전 작업 기록도 지웠어요
[23:22]
이전 작업 내역의 관련성도 지웠습니다
[23:26]
항상 새로 시작하는 걸 선호하거든요
[23:28]
이제 실행되는데, 내부적으로는
[23:31]
영상 초반에 설명했던 것처럼
[23:32]
호출하고 적절한 결과를 확인하고 있습니다
[23:36]
올바른 것을 가져오는지 확인하고
[23:37]
잘못된 걸 보고 있네요
[23:40]
스크립트에 없는 것 같아요
[23:43]
실행해보니 제가
[23:45]
첫 번째 것을 Taskmaster에 작성했는데
[23:48]
"Taskmaster로 작업을 파싱해줘"라고 했죠
[23:50]
이 모든 걸 기억할 필요도 없었어요
[23:53]
작은 문제가 있었는데 저장 위치를
[23:56]
정의하지 않아서
[23:59]
잘못된 위치를 보고 있었어요
[24:00]
하지만 이제 시작됐고
[24:03]
내부적으로 작업을 생성하고 있습니다
[24:04]
아래로 스크롤하면 프로세스가 끝날 때
[24:07]
작업 폴더가 풍성해질 거예요
[24:10]
이전 내용을 덮어쓰고
[24:13]
멋진 테이블이 생성될 텐데
[24:16]
보지 못하셨다면 아주 보기 좋습니다
[24:19]
지금 Claude가 내부적으로 작업하고 있어요
[24:22]
진행되는 동안
[24:24]
멋진 점들을 살펴보죠
[24:27]
아래로 스크롤해보면
[24:28]
스크린샷이 하나도 없네요
[24:31]
놀랍죠? 멋진 테이블이 생성됩니다
[24:34]
작업들을 파싱했고 이제 작업 JSON이 있어요
[24:37]
여러 부분들을 볼 수 있는데
[24:40]
문의 양식 프로젝트가 있고
[24:41]
클라이언트 측 폼 유효성 검사 구현이 있고
[24:44]
맨 위에서 시작해서
[24:47]
상태도 있습니다
[24:49]
이들은 모두 구조화되어 있어서
[24:51]
ID, 제목, 설명
[24:53]
상태, 배열로된 의존성이 있죠
[24:55]
작업들은 여러 다른 작업에 의존할 수 있고
[24:58]
우선순위가 있고
[25:00]
세부사항과
[25:01]
테스트 전략이 있어요. 아주 멋지죠
[25:04]
이 모든 게 여기 있고 다 좋아 보입니다
[25:06]
간단한 작업이에요. 유일하게 지루한 부분은
[25:08]
실제로 필요한 데이터 조각들을
[25:10]
가져오는 것이었고
[25:12]
각각이 여기 있습니다. 다음으로
[25:15]
시작하자고 할게요. 다음 버전에서
[25:18]
출시될 MCP들이 있는데
[25:19]
약간 버그가 있어서
[25:21]
저는 사용하지 않아요. 좋아요
[25:24]
작업 목록을 보니 10개가 표시되네요
[25:26]
보류 중인 작업이 있네요. 태스크마스터가 실행되었고
[25:30]
목록을 시작하죠. CLI 명령어를
[25:33]
참조하고 있는 것을 볼 수 있습니다.
[25:36]
CLI에서 taskmaster next나
[25:38]
taskmaster list를 실행할 수 있지만
[25:40]
저는 그렇게 하는 것을 선호하지 않습니다.
[25:43]
불필요한 작업이 늘어날 뿐이죠.
[25:46]
지금 실행 중인데, 처음에는 경로를 찾지 못했다가
[25:48]
이제 올바른 경로를 찾았네요
[25:49]
커서 사운드가 켜져 있는지 확인하세요
[25:52]
하지만 지금은 꺼져 있고 작업이 진행되고 있습니다
[25:55]
어떻게 진행되는지 보시죠
[25:57]
작업이 완료되었다고 나오네요
[26:00]
버튼이 제대로 임포트 되었는지 확인해보죠
[26:02]
이전 코드를 대체했고
[26:04]
이제 링크 텍스트가 있네요
[26:06]
'새 프로젝트 문의'라고 되어 있어요
[26:08]
우리가 원하던 정확히 그대로죠
[26:12]
지금은 옐로우 모드로 설정되어 있어서
[26:14]
두 번째 작업을 시작하고 있습니다
[26:16]
이게 전부예요
[26:18]
물론 더 많은 기능이 있긴 한데
[26:21]
보여드릴 수 있습니다. 사용 사례 중 하나는
[26:24]
작업이 너무 모호하거나
[26:27]
너무 크게 보이면 작업을
[26:30]
충분히 세분화하지 않은 것입니다
[26:32]
이때 사용하는 키워드는
[26:34]
'research'를 사용하면 됩니다. 보시다시피
[26:38]
지금 작업이 진행되고 있네요
[26:41]
이 테스트는 꽤 큰 작업이네요
[26:43]
여러 입력 폼 설정이 포함되어 있습니다
[26:46]
3번 작업을 살펴보죠
[26:48]
걱정되는 부분이 있네요. 3번으로 넘어가서
[26:51]
폼 컴포넌트 생성을 볼 수 있고
[26:54]
모든 세부 사항이 포함되어 있습니다
[26:56]
이것을 세분화하고 싶어하네요
[26:58]
저는 그대로 진행해도 괜찮지만
[27:00]
확장해보도록 하죠. s expand를 입력하면
[27:03]
여러분께 좋은 사용 사례가 될 거예요
[27:04]
지금 3번 작업을 확장하고 있는데
[27:06]
이는 또 다른 호출을 의미하고
[27:09]
진행되는 동안 엔트로픽 콘솔을 열어서
[27:12]
비용을 확인해보죠
[27:15]
이걸 계속 사용해왔는데
[27:19]
하루에 50센트면 정말 말도 안 되게 저렴하죠
[27:22]
이 정도 수준의 워크플로우를 가질 수 있다니 대단합니다
[27:26]
작업을 어떻게 나눴는지 보죠
[27:29]
어떻게 세분화했는지 보면
[27:32]
폼 구조 설정, 세부 사항 구현
[27:34]
주소 필드 작업, 그 다음 작업들로 나눴네요
[27:38]
이렇게 작은 단위로 나누면
[27:40]
결과물의 품질이 향상될 거예요
[27:43]
폼을 열어서 진행 상황을 보죠
[27:44]
상태를 설정하고 있고
[27:47]
기본 구조부터 시작하고 있습니다
[27:49]
이제 다시 돌아와서
[27:51]
새로운 내용을 추가하고 있어요
[27:54]
32번이 완료되었고, 33번도 완료됐네요
[27:58]
나머지 폼들을 추가하고 있습니다
[28:00]
정말 놀라운 방식이죠
[28:03]
이게 기본 설정인데
[28:05]
잠시 중단하고
[28:07]
완료되면 다시 돌아와서 검토해보겠습니다
[28:10]
보세요, 계속 진행되고 있어요
[28:12]
이제 코딩이 진행 중이니
[28:14]
토스트 한 조각이나 먹으면서 기다리면 되죠
[28:17]
아, 이제 대화를 해야겠네요
[28:19]
4번을 보니 좋아 보입니다. 큰 폼이네요
[28:22]
마음에 들어서
[28:23]
수락하겠습니다. 4번 작업에는
[28:26]
ZOD 스키마 작성과 필수 필드 정의,
[28:28]
유효성 검사 통합이 포함되어 있습니다
[28:30]
클라이언트 사이드에서 우리가 원하는 스타일을 적용하고
[28:34]
실패 시 어떻게 처리할지 등을 블로킹하고
[28:37]
각각 다른 부분들이 있기 때문에
[28:40]
확장하고 싶어하네요. 다시 한번
[28:41]
확장 기능을 실행할 건데, 제가 폼 코드를
[28:43]
건드리고 싶지 않아서죠
[28:45]
사실 이게 이 영상의 핵심이었어야 했는데
[28:46]
솔직히 이 세상에 폼을 좋아하는 사람이 있나요?
[28:48]
만약 폼을 좋아하신다면, 왜 그런지
[28:51]
들려주시면 좋겠네요
[28:54]
그리고 제가 디스코드를 런칭했는데
[28:56]
꽤 좋습니다. OpenAI가 오늘
[28:59]
새 모델을 출시할 예정이에요
[29:00]
아직 안 했다면 말이죠. 지금이 동부 시간으로
[29:02]
목요일 오후 3시인데, 제가 온라인에만 살다시피 해서
[29:05]
알고 있는 거예요. 하지만 모든 사람이 그런 건 아니죠
[29:07]
그래서 우리 커뮤니티를 위해
[29:10]
자동화된 피드가 있는 디스코드를 만들었어요
[29:12]
Anthropic, OpenAI, Gemini, XAI 등의
[29:16]
모든 뉴스룸 정보를 자동으로 가져오죠
[29:18]
정말 유용한 게, 분류기를 통해
[29:21]
가장 핵심적인 내용 3-5개를
[29:24]
추려서 보여주는데
[29:25]
모든 멤버들이 좋아하더라고요
[29:27]
채널에서 함께 어울리는 것도 좋고요
[29:29]
무료로 시작했는데, 무료는 잘 안 되더라고요
[29:31]
관심도 없는 랜덤한 사람들이
[29:34]
너무 많이 들어와서요
[29:36]
자, 이제 42번 태스크에서 Zod 리졸버를
[29:39]
리팩토링하고 싶어하네요. 아시다시피 validation 관련 부분이죠
[29:45]
그리고 이것과 관련해서 말씀드리고 싶은 건
[29:47]
10개의 태스크 임계값에 도달하면
[29:50]
우리가 생각지도 못한 것들을
[29:53]
AI가 생각해내는데
[29:54]
이게 정말 좋습니다
[29:56]
43번도 완료됐네요, 리팩토링 잘했어요
[29:59]
이 도구가 정말 잘하고 있어서
[30:01]
여러분들이 좋아하실 거예요
[30:02]
이걸 이 도구 없이 한다고 생각해보세요
[30:06]
정말 싫어하실 거예요
[30:07]
전 토스트도 못 먹고 새우등처럼 구부정하게
[30:10]
의자에 앉아서 불행하고 슬프게
[30:14]
인생을 후회하고 있었을 텐데
[30:16]
대신 토스트를 먹고 있네요, 진짜예요
[30:18]
좋아요, 5번 서버 액션을 보죠
[30:22]
네, 확장해봅시다
[30:25]
이게 영상 제목이 될 수도 있겠네요
[30:26]
'토스트 먹으면서 폼 만들기: 키보드에 버터는 NO'
[30:29]
끝까지 보고 제가 키보드에
[30:31]
버터 묻히지 않는지 확인하세요
[30:33]
버터플라이... 버터플라이 하바치
[30:36]
농담이에요. 자, 이제 서버 액션이
[30:40]
작성되고 검증도 완료됐네요
[30:43]
이건 정말 훨씬 좋아요
[30:46]
제가 처음 이런 도구들을 사용했을 때보다
[30:48]
ChatGPT 이전에 코딩하다가
[30:51]
나왔을 때 올인했었죠
[30:53]
와 정말 대단하다고 생각했는데
[30:55]
항상 정확한 건 아니어서 까다로웠어요
[30:59]
자, 6번을 볼까요
[31:01]
폼 데이터를 작성하는 기능이에요
[31:03]
패키지를 사용해서 테스트를 작성하는데
[31:06]
네, 정확하게 되길 바랄 뿐이에요
[31:09]
잠시 일시 정지하고 돌아올게요
[31:10]
이걸 계속 보는 게 지루할 테니까요
[31:11]
이렇게 잘 작동하는 걸 계속 보는 게
[31:13]
산책 좀 다녀왔어요. 이제 이 도구가
[31:16]
제 일을 대신하고 있는 것 같네요
[31:18]
돌아와보니 여전히 훌륭하게 작업하고 있어요
[31:23]
요소들의 크기와 간격을 최적화하고
[31:27]
모든 것이 반응형인지 확인하고 있죠
[31:29]
10번까지 완료되면
[31:31]
테스트를 진행할 겁니다
[31:34]
비디오의 마지막 부분인데
[31:36]
정말 놀라운 건, 방금 대비 검사기를 실행했는데
[31:40]
베이지색을 좀 더 어둡게
[31:43]
만드는 것을 고려해보라고 하네요.
[31:45]
여러분은 대비 검사기를 마지막으로 언제 써보셨나요? 한 번도 없죠?
[31:49]
이제 정말 대단한데,
[31:51]
애니메이션과 전환 효과를 다듬고 있어요.
[31:54]
테스트해볼까요? 이전 것이 제거된 걸 볼 수 있고
[31:56]
이렇게 멋진 폼이 있네요.
[31:59]
클릭하면 나타나는
[32:01]
멋진 애니메이션도 있어요.
[32:04]
좀 너무 길어 보이는데,
[32:07]
스크롤이 있으면 좋겠네요. 자 입력해볼게요.
[32:10]
타입은 어떻게 했더라...
[32:15]
몇 가지 수정할 게 있는데
[32:16]
보니까 제가
[32:17]
여기 옵션들을 깜빡했네요.
[32:21]
'큰 집', '유튜브', '진행 중인
[32:23]
프로젝트입니까?' 좋아요, 테스트해볼게요.
[32:28]
이렇게 테스트 문의가 제출되었고
[32:31]
멋진 알림 메시지도 뜨네요. 잘 작동했나요?
[32:35]
아주 잘됐어요. 몇 가지 보이는데
[32:37]
여기서 볼 수 있듯이 타임스탬프가
[32:39]
이름을 대체했고 각각 하나씩
[32:43]
어긋나 있네요. 그래서
[32:45]
돌아가서 수정해야 겠어요. 이건
[32:48]
테스트의 일부인데, 만약
[32:51]
구글 시트를 사용하지 않았다면
[32:52]
이런 문제는 없었을 거예요.
[32:55]
확실히 말씀드리자면, 이걸 추가하고
[32:59]
다음으로 돌아가서
[33:02]
제가 했어야 했던 것처럼
[33:05]
라디오 그룹을 만들어야 했는데
[33:08]
여러분은 이해하실 거예요. 정말 멋지죠.
[33:11]
기존 대화창으로 돌아가서
[33:15]
동일한 창에서 하는 대신
[33:19]
새로운 결과를 위해
[33:23]
새로운 채팅을 시작할 건데
[33:25]
더 나은 결과를 위해 새로운 채팅을
[33:28]
시작하면 실제로
[33:30]
이전 대화가 묶여서
[33:33]
정리되죠. 정말 멋져요.
[33:36]
사용성 문제가 몇 가지 있는데
[33:40]
제출할 때
[33:41]
전달된 타임스탬프가 A열의
[33:46]
자리를 차지했고, 읽기 어려운
[33:49]
형식이었어요. 이메일 액션과 같은
[33:54]
타임스탬프 형식을 따르도록 수정해야겠어요.
[33:58]
이게 첫 번째고
[34:00]
두 번째로는 추가해야 할 게 있는데
[34:05]
폼의 높이를 수정해서 화면을 벗어나지 않고
[34:09]
반응형이 되도록 해야 해요.
[34:12]
반응형으로 만들어서
[34:14]
작은 화면 크기에도 맞춰야 하고
[34:17]
수정이 필요해요. 그리고 라디오 그룹도
[34:20]
작성할 건데, 여기서 영상을
[34:22]
마무리하려고 해요. 왜냐하면
[34:24]
제가 폼을 다시 만드는 걸
[34:26]
보실 필요는 없으니까요.
[34:27]
여기까지 보셨다면 정말 대단하시고
[34:30]
시청해주셔서 감사합니다.
[34:32]
제 보물상자에 접근하고 싶으시다면
[34:34]
아래 댓글을 남겨주세요.
[34:38]
제가 좋아하는 모든 것이 있는데
[34:41]
멋진 UI 예시들이 있고
[34:44]
제가 역설계한 것들이에요.
[34:45]
Vzero 로그인 버튼의 디자인이나
[34:47]
Clerk의 디자인도 마음에 들어요.
[34:48]
다양한 패턴 관련
[34:50]
내용이 있는데, 주로
[34:52]
Next.js와 TypeScript용이지만
[34:55]
SPA에 관한 다른 내용도 있어요.
[34:58]
꽤 좋죠.
[35:00]
다양한 데이터 가져오기 패턴이 있고
[35:02]
정말 유용해요. 그리고
[35:04]
곧 출시할 터보 키트도 있는데
[35:06]
이건 완벽하게
[35:08]
구성된
[35:10]
스타터 키트로, AI 코딩을 시작하거나
[35:14]
바이브 코딩을 하는 데 필요한
[35:16]
모든 것이 포함되어 있어요.
[35:19]
이건 제가 만들었고
[35:21]
우리 학교의 Hari가 도와줬어요.
[35:23]
학교와 디스코드에서
[35:25]
정말 재미있게 지내고 있으니
[35:28]
꼭 확인해보세요. 우리는 지금
[35:30]
성장하는 중이라 초기 참여자분들께
[35:32]
큰 할인을 제공하고 있어요. 이건 단순한
[35:34]
학교가 아니라 장기적인
[35:36]
미디어와 AI 시대의 커뮤니티예요. 감사합니다.
[35:39]
다음 영상에서
[35:41]
만나요.