▲ 커뮤니티 세션: Vercel 환경에서의 Nuxt 활용하기

VVercel
Computing/SoftwareAdult EducationInternet Technology

Transcript

00:00:00예를 들어 포트폴리오를 만들고 싶다면, 이 도구를 사용하는 게 아주 중요하지 않을 수도 있지만
00:00:13네, 원하는 것을 바로 얻을 수 있고 프로젝트를 빠르게 수정할 수 있습니다.
00:00:29에이전트에 대해서는 현재로선 이 정도인 것 같네요. 추가 아이디어가 더 있는지는 모르겠습니다.
00:00:38구현 방식이 상세히 설명된 블로그 게시물을 언급해 주셔도 좋고,
00:00:45소스 코드도 오픈 소스로 공개되어 있습니다.
00:00:49웹사이트에서 다음 에이전트를 어떻게 만들었는지, 어떤 컴포넌트를 사용했는지 깊이 있게 알고 싶거나
00:00:55사이드바에서 생각 과정이나 내부 동작을 어떻게 보여주는지 궁금하다면,
00:01:02그리고 더 많은 기능을 추가하는 데 기여하고 싶다면, 여기가 학습을 시작하기에 좋은 지점이라고 생각합니다.
00:01:08그곳을 통해 배울 수 있을 거예요.
00:01:11그리고 이게 전부가 아니죠, 그렇죠?
00:01:13Hugo가 MCP 툴킷을 만들었기 때문인데요, 이를 통해 어떤 Nuxt 웹사이트든 MCP 서버가 될 수 있고
00:01:22이를 지원하는 모든 AI에 통합될 수 있습니다.
00:01:30Nuxt.com은 정말 많은 것들의 중심지가 되었습니다.
00:01:35이런 API가 있다는 게 믿기지 않을 정도죠.
00:01:39Nuxt 개발 도구를 구동하는 것이 바로 우리의 모듈 API입니다.
00:01:42Nuxt 앱이나 AI 에이전트에서 연결할 수 있는 수많은 MCP 서버가 있고, 이제 채팅 기능까지 구축되었습니다.
00:01:48누군가 Hugo를 좀 말려야겠어요.
00:01:53그는 정말 대단합니다.
00:01:55고마워요.
00:01:59그가 만든 것 중에 제가 상당히 인상 깊게 본 것이 있는데,
00:02:03제 전체 화면을 공유해 보겠습니다.
00:02:10지금 제 화면이 보이시는지 모르겠네요.
00:02:11네.
00:02:15이건 관리자 페이지인데요, 여러분은 접속하실 수 없어서 죄송하지만,
00:02:16웹사이트에 피드백을 남길 수 있는 위젯이 있습니다.
00:02:22시간이 흐르면서 어떤 페이지에 집중해야 할지,
00:02:27상태가 개선되고 있는지 파악하는 데 상당히 유용합니다.
00:02:32최근에 그는 MCP 관리자 기능을 출시했는데, 이를 대화에 연결했습니다.
00:02:37제가 틀리지 않았다면 말이죠.
00:02:47이렇게 물어볼 수 있을 것 같네요.
00:02:50Nuxt 관리자 MCP에 접속해서, 404 페이지에 대한 피드백과
00:03:04개선 방안을 더 알려달라고요.
00:03:09제가 설정을 제대로 했다면 정상적으로 호출될 텐데, 이게 바로 관리자 기능입니다.
00:03:16네, 역시 그렇네요.
00:03:23Nuxt 관리자 MCP라는 에이전트를 사용해서,
00:03:24가장 평가가 안 좋은 페이지의 피드백과 개선 방법을 물어봐야 할 것 같습니다.
00:03:35아마 이 에이전트가 맞을 거예요.
00:03:42네, 맞네요.
00:03:56그러면 이 페이지의 평균 점수가 얼마인지 알려줍니다.
00:04:00피드백이 세 개뿐이긴 하지만, 이런 식으로 이 페이지를 개선할 수 있는
00:04:07몇 가지 실마리를 이해할 수 있습니다.
00:04:09아마 일주일 치 피드백만 있어서 그럴 거예요.
00:04:12더 요청할 수도 있고요.
00:04:14네, 맞습니다.
00:04:17그리고 저희가 작업해 온 다른 것이 있는데, 언급하셨던 Nuxt Content입니다.
00:04:21Nuxt Content는 저희의 기본 CMS로, 모든 문서를 DOM 형태로 보유하며
00:04:29마크다운 내에서 컴포넌트를 사용할 수 있게 해줍니다.
00:04:32지난 몇 달 동안 저희는 Comark라는 프로젝트를 진행해 왔습니다.
00:04:36콘텐츠의 핵심 기능을 추출해서 누구나 사용할 수 있게 공개했고,
00:04:44SvelteKit 팀 및 Nuxt 팀과 협업하여 런타임에 컴포넌트가 포함된 마크다운을 구현했습니다.
00:04:50AI에 대해 이야기하자면,
00:04:53이 프로젝트는 스트리밍과 자동 닫기 기능도 지원합니다.
00:05:00현재 진행 중인 기능들이 있는데요,
00:05:10예를 들어, 농구화에 관한 페이지를 생성해 달라고 요청할 수 있습니다.
00:05:20현재 AI는 기본적으로 순수 마크다운을 스트리밍하지만,
00:05:26AI에게 이 구문을 사용하도록 학습시키면,
00:05:33내부적으로 이러한 컴포넌트를 사용하여 랜딩 페이지를 생성하기 시작할 수 있습니다.
00:05:37아직 매우 초기 단계의 진행 상황이지만 상당히 유망하며,
00:05:44다음 주 중에 V1을 모든 사람에게 공개하기 위해 작업 중입니다.
00:05:51그게 현재 마크다운 프로젝트의 진행 상황입니다.
00:05:56네, Daniel도 공유하고 싶은 진행 상황이 있을 것 같네요.
00:06:01아, 방금 나가신 것 같네요.
00:06:03오, 다시 오셨어요.
00:06:04제시간에 맞춰 오셨네요.
00:06:05돌아오셨군요.
00:06:06안녕하세요.
00:06:07환영합니다.
00:06:08제가 여러분을 긴장하게 만드는 걸 좀 좋아하죠.
00:06:17방금 Comark와 Nuxt Content에 대해 이야기하고 있었는데,
00:06:28Daniel이 언급할 내용이 있을 것 같다고 생각했어요.
00:06:30통화가 끝난 후에 말씀하시려던 게 무엇인지 알게 되었거든요.
00:06:35글쎄요, 음.
00:06:37매우 흥미로운 주제라고 생각하는데, 지금 얼마나 많은 분이
00:06:44이걸 듣고 계시는지 모르겠네요.
00:06:45우리가 구상 중인 비밀을 몇 가지 누설해도 될까요?
00:06:52사람들이 원하는 걸 보여주세요, 아무한테도 말하지 말고요, 아시죠?
00:06:57지금 듣고 계시는 아주 가까운 친구분들과 우리끼리만 아는 비밀입니다.
00:07:12우리는 Nuxt를 어떻게 개선할지 이야기하고 있었습니다.
00:07:14오랜 시간 동안, 그리고 이 부분은 특정 측면과 약간 겹치기도 하는데요,
00:07:19Nuxt는 아주 오랜 시간 동안
00:07:25SEO를 위한 솔루션이었습니다.
00:07:26그래서 사람들은 Nuxt를 사용해 별다른 설정 없이도
00:07:33훌륭한 검색 엔진 결과를 얻어왔죠.
00:07:34사실 꽤 오랫동안 'Next.js'를 검색해도 Nuxt가 검색 결과 상단에 있었던 걸로 기억합니다.
00:07:42맞죠, Sebastian? 당신도 기억하시죠?
00:07:46사람들이 'Next'를 검색하면 Nuxt가 목록 최상단에 있었는데, 이제는 더 이상 그렇지 않습니다.
00:07:50이제는 더 이상 Next 검색어로 순위에 오르지 못하죠.
00:07:51하지만 우리는 Nuxt Content 같은 것들을 통해 Nuxt가
00:07:53검색 엔진 최적화를 위한 경이로운 플랫폼이 되도록 무엇을 할 수 있을지 고민 중입니다.
00:07:59사람들이 제품 정보 등을 실제로 검색할 때,
00:08:05에이전트나 스마트 스피커 같은 다른 수단을 사용할 수도 있습니다.
00:08:10그런 경우에 그들이 여러분의 사이트 정보를 어떻게 얻을 수 있을까요?
00:08:16그에 관해 계획한 것들이 많습니다.
00:08:19제가 그 프로젝트를 직접 이끄는 건 아니지만, 팀 차원에서 진행 중이며
00:08:22너무 많은 비밀을 누설하고 싶지는 않네요. 하지만 Nuxt Content 측면에서
00:08:24벌어질 멋진 일들에 대해 생각할 때 언급할 만한 가치가 있는 것 같습니다.
00:08:28네.
00:08:33감사합니다.
00:08:37Nuxt.com 레포지토리나 Nuxt UI 문서의 최근 Pull Request를 보시면,
00:08:38Benjamin과 Hugo가 더 많은 AEO(인공지능 엔진 최적화) 최적화를 진행 중임을 알 수 있습니다.
00:08:39기본적으로 에이전트가 Nuxt 문서를 크롤링하려고 할 때,
00:08:40Accept 헤더에서 'text/markdown'을 기다리는 것을 감지하면
00:08:47최신 페이지를 직접 제공합니다. User Agent를 감지할 때도 마찬가지고요.
00:08:53모든 페이지에 대해 이 작업을 수행하고 있고, JSON-LD를 추가하려고 합니다.
00:09:00에이전트가 크롤링하는 내용을 더 잘 이해할 수 있도록 더 많은 콘텐츠를 제공하고,
00:09:06콘텐츠를 직접 제공함으로써 컨텍스트 윈도우 사용량도 줄여줍니다.
00:09:13지금까지는 실험 단계이며, 어떤 기능이 코어에 포함될지
00:09:19혹은 우리의 핵심 모듈이 될지 고민 중입니다.
00:09:24하지만 리팩토링이나 플랫폼 독립적인 방식을 생각하기 전에,
00:09:26먼저 직접 실험해보고 커뮤니티가 어떻게 수용하는지,
00:09:31그리고 실제로 의미가 있는지 확인해야 합니다. 상황이 너무 빠르게 변하고 있거든요.
00:09:36LLMs.txt와 MCP에 대해 이야기하다가 이제는 헤더로 마크다운을 수락하는 단계까지 왔습니다.
00:09:422주 뒤에는 또 어떻게 변해 있을까요?
00:09:48나중에 폐기해야 할 수도 있는 기능을 성급하게 코어에 넣고 싶지는 않습니다.
00:09:49그래서 단계별로 진행하되, 가능한 모든 기회에 실험을 거치고 있습니다.
00:09:56제가 Nuxt에 대해 좋아하는 점 중 하나는, 모듈 생태계에 대해 이야기했듯이
00:09:58확장이 가능하다는 사실입니다.
00:10:06코어에 바로 포함되지 않더라도 이런 것들을 만드는 게 가능하다는 뜻이죠.
00:10:07실험적인 단계로 남겨둘 수도 있고,
00:10:16사람들이 실제 서비스나 웹사이트에서 바로 사용할 수도 있습니다.
00:10:21이를 통해 단순히 개념적인 피드백이나 RFC에 대한 의견이 아니라,
00:10:24실제 프로젝트나 실제 사용 사례에 대한 실질적인 피드백을 받을 수 있습니다.
00:10:28어떤 기능이 코어 모듈이 될지 말지
00:10:31결정을 내리기 전에 말이죠.
00:10:35라이브 채팅창에 우리가 답변할 만한 질문이 있는지
00:10:42한번 볼까요.
00:10:46제가 질문 하나 드릴게요. 작업 중인 것들에 대한 비밀을 이미 어느 정도 공유해주셨지만,
00:10:53Nuxt와 관련해 공개할 수 있는 내용 중 특히 기대되는 향후 계획이 더 있나요?
00:10:56기대되는 것들은 정말 많지만,
00:11:07음, 우선은
00:11:08Nuxt 버전 5를 위한 모든 준비를 마치는 데 집중하고 있습니다.
00:11:15이건 한동안 저희가 계속 이야기해 온 부분이죠.
00:11:20Nitro 버전 3가 이번 업데이트의 핵심 기능이며,
00:11:32생태계가 이 변화에 대비하도록 만드는 것은 큰 작업이지만, 정말 올바른 방향입니다.
00:11:40Nitro는 우리를 웹 표준의 방향으로 이끌어 줍니다.
00:11:44따라서 Bun, Deno, Node 등 어떤 환경에서든
00:11:45최대한 네이티브 환경에 가까운 초경량 서버 래퍼를 지향합니다.
00:11:47사람들이 이 변화를 즉각적으로 매우 만족해할 거라고 생각합니다.
00:11:55로컬에서 버전 5 Nightly를 사용해 봤는데,
00:12:01아직 베타나 알파 단계도 아니지만 벌써 사용하기에 정말 즐겁습니다.
00:12:02좋네요.
00:12:05커뮤니티 댓글 중에 V5가 너무 기대된다는 의견이 있었습니다.
00:12:12그리고 다른 질문도 하나 있는데요,
00:12:18Vercel에서 Nuxt 워크로드를 최적화하기 위한 최고의 팁이나 추천 사항이 있을까요?
00:12:24Hugo, 당신이 먼저 답변해 보겠어요? Vercel에서의 Nuxt 최적화에 대해서요.
00:12:31어떤 측면을 말씀하시는지에 따라 다르겠지만요.
00:12:36속도, 빌드, 아니면 실행 중 최적화 중 무엇을 의미하시나요?
00:12:38네, 여러 방법이 있겠지만,
00:12:39저는 우선 런타임 부분에 대해 말씀드리고 싶습니다.
00:12:45우리가 여전히 고민 중인 부분은 Nuxt에서 어떻게 사용자에게
00:12:50특정 페이지가 캐싱되거나 렌더링될 수 있음을 제안할 수 있을까 하는 점입니다.
00:12:53페이지 내에서 데이터를 가져오는 컴포넌트를 사용할 수 있기 때문에 항상 까다롭습니다.
00:13:07애플리케이션 전체에 인증 기능이 직접 포함되어 있을 수도 있고요.
00:13:14그런 경우 캐싱을 원치 않을 수도 있고, 만약 인증이 포함된 페이지를 캐싱하기 시작한다면,
00:13:19예를 들어 헤더에 인증된 사용자를 표시해야 하는 상황을 생각해 봅시다.
00:13:28그러면 플레이스홀더를 미리 렌더링하고 있는지 확인해야 하며,
00:13:29클라이언트 측에서 인증 여부를 확인했을 때 하이드레이션 오류가 발생하지 않도록 주의해야 합니다.
00:13:36그래서 저는 Nuxt에 Nitro에서 가져온 매우 강력한 기능이 있다고 말씀드리고 싶습니다.
00:13:44바로 Route Rules(라우트 규칙)입니다.
00:13:49이 규칙을 사용하면 패턴을 통해 라우트의 일부를 지정할 수 있습니다.
00:13:53예를 들어 내장된 관리자 페이지 그룹인 '/admin'의 경우
00:13:58SSR을 비활성화할 수 있습니다. 이 부분에는 필요하지 않으니까요.
00:14:03그리고 '/blog/**' 같은 경로는 ISR로 설정할 수 있습니다.
00:14:09블로그 게시물이 매초 업데이트되지는 않기 때문이죠.
00:14:13따라서 Vercel에서 점진적 정적 재생성(ISR)을 활용할 수 있습니다.
00:14:14이러한 라우트 규칙을 사용하면 단 몇 줄의 설정만으로 앱의 일부를 최적화할 수 있습니다.
00:14:21프로덕션에 배포하기 전에 드리는 저의 가장 큰 추천 사항은 이것입니다.
00:14:22라우트 규칙을 꼭 확인해 보세요.
00:14:24훌륭하네요.
00:14:29감사합니다.
00:14:35한 가지만 더 덧붙이자면,
00:14:37죄송합니다.
00:14:45NPMX를 한번 살펴보시는 것도 좋을 것 같습니다.
00:14:50NPMX를 아직 접해보지 못하셨다면, 이건 npmjs.com을 대체하는 도구입니다.
00:14:55NPM 레지스트리를 위한 브라우저라고 할 수 있죠.
00:15:01Nuxt로 제작되었고 Vercel에 호스팅되어 있으며, 성능을 위해 고도로 최적화했습니다.
00:15:03Vercel에서 성능을 어떻게 최적화해야 할지 고민 중이시라면,
00:15:10수많은 페이지 뷰를 감당하도록 설계된 실제 앱에서 이러한 기능들이 어떻게 적용되었는지
00:15:12직접 확인해 보시는 게 좋습니다. 정말 많은 사람이 사용하고 있거든요.
00:15:13그곳에서 라우트 규칙이 실제로 작동하는 모습과 캐싱 처리를 보실 수 있을 겁니다.
00:15:14저희는 점진적 정적 재생성을 사용해 캐싱을 수행합니다.
00:15:18필요할 때 페이로드를 생성하고 캐싱하는 식이죠.
00:15:20또한 Nuxt 4.4의 새로운 기능인 페이로드 캐시를 사용하고 있는데,
00:15:23사전 렌더링되지 않은 페이지에도 적용되며 제가 보기엔 정말 멋진 기능입니다.
00:15:30페이지로 이동하기도 전에 데이터를 미리 가져오는 이점을 누릴 수 있다는 뜻이죠.
00:15:36해당 페이지에 필요한 데이터를 프레임워크가 미리 가져다 놓는 겁니다.
00:15:42덕분에 사용자 경험이 정말, 정말 빨라집니다.
00:15:45그 외에도 발견하고 여러분의 웹사이트에 시도해 볼 만한 것들이
00:15:49아주 많을 거예요.
00:15:58놀랍네요.
00:16:01감사합니다.
00:16:09댓글 중에는 Nuxt를 한 번도 안 써봤는데
00:16:17이제 한번 시도해 볼 가치가 있을 것 같다는 의견도 있었습니다.
00:16:27청중분들 중에 Nuxt에 호기심을 갖게 된 분들이 계신 것 같네요.
00:16:28그분들이 Nuxt를 시작하는 가장 좋은 방법은 무엇일까요?
00:16:34앞서 AI 도구들에 대해서도 언급해 주셨지만,
00:16:39추천하실 만한 게 더 있나요?
00:16:45이제는 Nuxt 에이전트가 있기 때문에,
00:16:52템플릿을 사용할지 아니면 문서를 참고해 처음부터 시작할지 등
00:16:53어디서부터 시작해야 할지에 대해 아주 유용한 팁을 줄 수 있을 겁니다.
00:16:54감사합니다.
00:16:55댓글도 하나 달렸는데요, 어떤 분이 "Nuxt는 한 번도 안 써봤는데
00:17:03지금 바로 해볼 가치가 있겠네요"라고 하셨어요.
00:17:04청중분들 중에 Nuxt에 호기심을 갖게 된 분들이 계신 것 같은데, 그런 분들이
00:17:09Nuxt를 시작하기 가장 좋은 방법은 무엇일까요?
00:17:12이미 AI 도구들에 대해서는 언급하긴 했지만,
00:17:16추천해주실 만한 게 더 있을까요?
00:17:17지금 당장은 Nuxt 에이전트가 있으니,
00:17:24템플릿을 사용할지 아니면 공식 문서를 보며 처음부터 시작할지 등
00:17:29어디서부터 시작해야 할지 아주 좋은 힌트를 줄 수 있을 거예요.
00:17:31Nuxt.com이나 Nuxt UI에도 많은 템플릿이 있고,
00:17:39Nuxt.new에도 다른 템플릿들이 있지만, 에이전트에게
00:17:48직접 물어보는 것도 좋은 방법입니다.
00:17:51또한 Nuxt UI 문서에서도 v0를 바로 열 수 있으니,
00:17:57IDE에서 본격적으로 코딩을 시작하기 전에 프로젝트와 대화를 나눠볼 수도 있죠.
00:18:08처음 시작할 때 저는 개인적으로 아무것도 없는 상태에서
00:18:12시작하는 데 문제는 없었지만, 최소한의 프로젝트를 클론하는 걸 선호합니다.
00:18:17GitHub에 제 개인 템플릿인
00:18:23danielroe/nuxt-site-template이 있는데요.
00:18:24그걸 클론해서 사용하셔도 됩니다.
00:18:25아주 최소한의 구성이지만, 엔드 투 엔드 테스트나 유닛 테스트 같은 것들이 포함되어 있어서
00:18:31LLM에게 제가 이런 방식으로 프로젝트를 계속 구축하고 싶다는
00:18:37힌트를 줄 수 있습니다.
00:18:38이런 최소한의 템플릿은 LLM에게 마치 결정의 씨앗 같은 역할을 한다고 생각해요.
00:18:45LLM이 올바른 방향을 잡게 해주고, 여러분이 원하는 방식으로
00:18:50성장할 수 있도록 필요한 지침을 제공하죠.
00:18:52사실 그 이상의 특별한 것은 필요 없습니다.
00:18:56물론 추가할 수는 있지만, 필수적인 건 아니에요.
00:19:01그냥 템플릿이나 기본적인 Nuxt 프로젝트로 시작해서
00:19:09"이런 걸 만들고 싶어"라고 말하기만 하면 됩니다.
00:19:10LLM은 이런 작업에서 정말 경이로운 능력을 발휘하더라고요.
00:19:12전혀 문제없이 해냅니다.
00:19:14그래서 새로운 것을 시도할 때 가장 중요한 점은
00:19:19단순히 결과만 얻는 게 아니라 배움의 기회를 만드는 것이라고 생각해요.
00:19:24결과물이 멋져 보일 수는 있지만, 정작 본인이 Nuxt를
00:19:29직접 써봤다는 느낌이 들지 않는다면 무언가 대신 만들어준 것에 불과하니까요.
00:19:33그러니 LLM에게 "가이드를 해줘"라거나 "네가 만든 코드를 바탕으로
00:19:40Nuxt의 기능들을 가르쳐줘"라고 요청해보세요.
00:19:45이런 방식은 생성된 코드를 검토할 때 이해를 돕고,
00:19:49지식의 파편들을 하나로 연결해 주기 때문에 매우 유용합니다.
00:19:51또한 새로운 기술을 습득하고 경험을 쌓을 수도 있죠.
00:19:56Cat Hicks 박사님을 GitHub에서 꼭 찾아보세요.
00:20:02그분은 어떤 작업을 하든 배움의 기회를 만들 수 있는 Claude 기술(skills)을 만드셨는데,
00:20:07코딩 챌린지 중간에 10분 정도 연습을 섞어서
00:20:12에이전트가 처리하는 내용의 일부를 직접 내면화할 수 있게 해줍니다.
00:20:17우리는 이전에는 상상도 못 했던 지식에 접근할 수 있게 되었고,
00:20:226개월 전에는 몰랐던 일들도 해낼 수 있게 되었습니다.
00:20:29하지만 핵심은 우리 스스로가 인간으로서 어떻게 계속 성장하고 발전하느냐이며,
00:20:35이러한 습관과 기술, 그리고 학습을 위한 휴식을 병행하는 것이
00:20:41우리의 뇌를 계속 발달시키는 데 정말 중요하다고 생각합니다.
00:20:46정말 좋은 지적입니다. 저도 이제 막 Nuxt를 사용하기 시작했는데,
00:20:56원래 Svelte를 주로 썼거든요. 그래서 제 에이전트에게
00:21:02Svelte의 개념들을 Nuxt로 매핑해달라고 했습니다. 학습을 돕는 에이전트 활용에 적극 찬성해요.
00:21:08더 덧붙이실 분 계신가요? 좋습니다. 제가
00:21:17화면을 다시 공유할게요. Nuxt는 진정한 점진적(progressive) 프레임워크입니다.
00:21:26그래서 하나의 app.vue 파일만으로도 최소한의 프로젝트를 시작할 수 있게 만들었죠.
00:21:32그게 메인 쉘이 되고, 거기에 라우팅이나 데이터 페칭을 점진적으로 추가할 수 있습니다.
00:21:40저희는 자동 임포트(auto importing) 기능을 제공하는데, 이는 개발자 경험 측면에서
00:21:45가장 큰 개선 사항 중 하나였습니다. 그리고 AI의 부상과 함께
00:21:51저희는 생각했습니다. 물론 코드에 직접 임포트하는 걸 선호하신다면
00:21:56언제든 이 기능을 끌 수 있습니다. 하지만 저에게는 이것이 시작하기에 가장 좋은 방법입니다.
00:22:03또한 EVALS도 진행하고 있습니다. Nuxt가 하는 방식과 유사하게
00:22:11여러 모델에서 Nuxt 관련 테스트를 돌려보고 있는데, 에이전트에게 별도의 스킬이나
00:22:21agent.md를 주지 않아도 현재 대부분의 Nuxt 지식을 아주 잘 파악하고 있습니다.
00:22:28여기에 만약 여러분이 MCP에 관심이 있으시다면,
00:22:35저희의 MCP 서버를 VS Code 등에 직접 추가하실 수도 있습니다.
00:22:49네, 저희는 AI 기반이지만, 지금까지는 MCP 서버를 추가하지 않더라도
00:22:57에이전트들이 꽤 잘 해내고 있습니다. 제가 추천하는 방식은 최소한의 설정으로 시작해서
00:23:03단계별로 기능을 추가해 보는 것입니다. AI를 사용한다면 왜 그렇게 코드를 짰는지
00:23:10설명해달라고 하세요. 다니엘이 말했듯이, 뇌를 최대한
00:23:16활발하게 유지하는 것이 핵심입니다. 동감합니다.
00:23:25이 섹션을 마무리하며 몇 가지 질문을 더 드려볼게요. 채팅창 질문인데요,
00:23:30독일의 이커머스 커뮤니티에서 Nuxt가 많이 쓰이는 걸 봤습니다. 일반적으로
00:23:36Nuxt가 미국보다 유럽에서 더 인기가 있다고 생각하시나요, 아니면 비슷하거나 반대인가요?
00:23:42글쎄요, 저는 에든버러에 있고 세바스티앙과 휴고는 런던에 있죠.
00:23:51마야 씨도 유럽에 계시고요. 그래서 제가 미국에서의 Nuxt 인기에 대해
00:23:57답하기에는 적절치 않을 수도 있지만, 유럽에서 더 인기가 있다는 느낌은 듭니다.
00:24:02원래 양상이 좀 그렇기도 해요. React는 북미에서 인기가 많은 편이고
00:24:09Vue는 전 세계 다른 지역에서 훨씬 인기가 많았죠. Nuxt도 비슷한 것 같지만,
00:24:15우리는 그걸 바꿔야 합니다. 미국에서도 더 많은 사람이 Nuxt를 써야 하고,
00:24:19미국 출신의 코어 팀 멤버도 필요할 것 같아요. 잘 모르겠지만요.
00:24:25전 세계에서 Nuxt를 쓰게 해야죠! 다음 질문은 X(트위터) 질문입니다.
00:24:35Nuxt가 3에서 4, 5로 빠르게 진화하고 있는데, 팀이 프로덕션 마이그레이션을
00:24:41안전하게 처리하기 위한 최고의 전략은 무엇일까요? 특히 SSR과 Nitro의 변화에 대해서요.
00:24:50지금까지 저희가 알기로는,
00:24:58Nuxt 3와 Nuxt 4 사이에는 거의 파괴적인 변경 사항(breaking changes)이 없었거나
00:25:03문서화가 아주 잘 되어 있었습니다. 그래서 그냥 관련 페이지 내용을 AI에게 보여주고
00:25:11도움을 받으면 됩니다. AI를 쓰지 않더라도 마이그레이션은 꽤 쉬웠어요.
00:25:17아주 고급의 특정 기능을 사용하는 경우가 아니라면
00:25:21파괴적인 변경은 거의 없을 겁니다. 다니엘이 업그레이드 과정을 아주 매끄럽게 만들었거든요.
00:25:272에서 3으로 갈 때는 조금 더 힘들었죠. Vue 2에서 Vue 3로의 업그레이드도 겹쳤는데,
00:25:33그건 프레임워크 자체가 달라지고 접근 방식도 컴포저블(composable) 시대로 넘어가는
00:25:40큰 변화였으니까요. 게다가 저희는 서버 엔진 전체를 새로 작성하는 방식을 택했습니다.
00:25:46서버리스 환경에서 성능을 낼 수 있도록 말이죠. 이 두 가지 큰 재작성 이후에
00:25:53또 다음을 준비하고 있습니다. 다음 메이저는 훨씬 더 접근하기 쉬울 것이고
00:26:01저희가 구축한 포트 호환성(port compatibility) 기능 덕분에,
00:26:08V5의 새로운 기능이나 변경 사항들을 미리 준비하고 시도해볼 수 있습니다.
00:26:15이 부분은 다니엘이 이어서 설명해주시죠.
00:26:22그게 핵심이라고 생각합니다. 저희가 중요하게 생각하는 것 중 하나는
00:26:26전방 및 후방 호환성을 유지하는 것입니다. Nuxt 4 업그레이드(3에서 4로)를 통해
00:26:34Nuxt의 파괴적인 변경이나 메이저 업데이트를 두려워할 필요가 없다는 걸
00:26:39의도적으로 증명하고 싶었습니다. 가끔은 "메이저 버전을 낼 수 없어"라며
00:26:45무언가에 갇혀버린 듯한 느낌이 들 때가 있잖아요.
00:26:50그래서 저희는 최소 매년 새로운 버전을 출시할 계획입니다.
00:26:57흥미롭게도 다른 많은 프로젝트와도 일치하는 방향이에요. 예를 들어 Node.js의
00:27:01새로운 릴리스 일정도 매년 메이저 버전을 내는 방식인데,
00:27:09저희와 아주 잘 맞습니다. 일반적인 패턴을 보면,
00:27:15Nuxt를 사용하는 것은 집을 짓는 것과 비슷합니다.
00:27:21프로젝트는 살아있는 생물과 같아서 집처럼 새로 페인트칠도 하고 보수도 해야 하죠.
00:27:28웹사이트가 처음 작성했을 당시의 최선이 아니라,
00:27:33현재의 모범 사례(best practices)를 따르기를 원하실 겁니다.
00:27:38그래서 Nuxt는 계속 진화하며 훌륭한 웹사이트 구축에 필요한 것들을 제공해야 하죠.
00:27:46최근 몇 달 동안 NPM에 대한 공급망 공격이 있었습니다.
00:27:52이는 모든 의존성을 최신 상태로 유지하고
00:27:57추적해야 할 필요성을 다시 한번 일깨워주었습니다. 그리고 패키지 제작자이자
00:28:03유지보수 관리자인 저희의 책임은 업그레이드 단계를
00:28:08최대한 고통 없이 만드는 것입니다.
00:28:14만약 Nuxt를 업그레이드하는 게 고통스럽다면 그건 저희의 문제입니다. 저에게 불평해주세요.
00:28:21저희는 그런 상황을 원치 않습니다. 사람들이 "어떻게 업그레이드하지?"라고 걱정하기보다
00:28:25"정말 즐겁다, 메이저 업그레이드인데 두 달이 아니라
00:28:29반나절밖에 안 걸렸어"라고 말하길 바랍니다. 웹사이트뿐만 아니라
00:28:36전체 생태계를 위해서라도 이를 최적화하고 싶습니다.
00:28:42사람들이 업그레이드를 두려워하지 않았으면 좋겠어요.
00:28:47다니엘에게 연락하고 싶다면 BlueSky나 roe.dev를 찾아보세요.
00:28:54거의 어디서든 저를 찾으실 수 있습니다. 정말 멋진 말씀 감사합니다. 이제 마지막으로
00:29:01커뮤니티에 대해 여쭤보고 싶어요. 얼마 전에 사진을 하나 봤는데요,
00:29:07어떤 컨퍼런스였는지는 기억 안 나지만, 여러분 중 한 분이 발표하실 때
00:29:11커뮤니티 이미지를 띄워놓고 "Nuxt는 결국 사람에 관한 것"이라는
00:29:16내용의 문구가 있었어요. 정말 멋진 커뮤니티를 가지고 계신 것 같은데,
00:29:20어떻게 참여하고 기여할 수 있는지 더 자세히 알려주세요.
00:29:30다니엘의 화면이 멈춘 것 같네요. 아마 Vue.js Amsterdam에서의 발표였던 것 같고요.
00:29:40저희와 함께하고 싶다면 아주 활발하게 운영되는
00:29:47Discord 서버가 있습니다. 거기서 많은 소식을 공유하고 있죠.
00:29:54GitHub의 이슈나 풀 리퀘스트를 통해서도 실제 코드가 작성되고
00:30:00아이디어가 구현되고 공유됩니다. 저희를 도와주실 수 있는 방법은 많습니다.
00:30:07이슈 해결을 돕거나, 아이디어를 내고, 본인의 경험이나
00:30:15데모를 공유해주셔도 좋습니다. X(트위터)의 Nuxt_js 계정도 있고 BlueSky
00:30:20계정도 있습니다. Nuxt.com을 사용 중이고 마스토돈, 링크드인
00:30:26쇼케이스 페이지도 있죠. 인스타그램 페이지는 없고요,
00:30:31사운드클라우드도 없지만, 디스코드(Discovery)는 어울리기에 아주 좋은 장소입니다.
00:30:39질문이 있거나 대화를 나누고 싶다면 언제든 찾아와 주세요.
00:30:46또한 저희는 모든 모듈 제작자들과 함께합니다.
00:30:51꼭 코어(core)에 직접 기여할 필요는 없어요. 그게 바로 Nuxt의 묘미죠.
00:30:54공유하고 싶은 템플릿으로 시작할 수도 있고,
00:31:00직접 만든 기능을 모듈로 제작하여
00:31:05전체 커뮤니티와 공유할 수도 있습니다. 현재 버전의 Nuxt에는 300개 이상의
00:31:10관리되는 모듈과 1,000명 이상의 기여자가 있습니다. 그러니 꼭 오셔서
00:31:17함께 즐겨주세요. 정말 좋을 겁니다. 다니엘, 목소리가 안 들리는 것 같네요.
00:31:27사운드클라우드가 있다고 하신 것 같은데, 커뮤니티에 대해 덧붙일 말씀이
00:31:51있으신가 봐요. 사운드클라우드에 올릴 첫 번째 곡을
00:31:55준비 중이신지도 모르겠네요. 커뮤니티 이야기를 꺼내주셔서 정말 기쁩니다.
00:32:05커뮤니티는 Nuxt에서 가장 좋은 부분이라고 생각해요.
00:32:13커뮤니티야말로 오픈 소스의 본질이죠. 오픈 소스란
00:32:17제가, 혹은 우리 중 누군가가 무언가를 만들어서 다른 사람에게
00:32:21"이거 어때요? 마음에 드나요? 더 좋게 만드는 걸
00:32:26도와주시겠어요?"라고 묻는 것이니까요. 그런 커뮤니티가
00:32:32오픈 소스를 가치 있게 만듭니다. 그게 바로 핵심이죠.
00:32:38저는 contributing.md가 agents.md보다 훨씬 중요하다고 굳게 믿습니다.
00:32:44에이전트만 많고 사람은 없는 것보다, 에이전트가 없더라도 사람이 많은 게 훨씬 낫습니다.
00:32:50프로젝트를 가치 있게 만드는 건 제가 아끼는 동료들이 함께한다는 사실이니까요.
00:32:56비단 Nuxt뿐만 아니라 Vue 커뮤니티도 늘 그래왔습니다.
00:33:00언제나 커뮤니티가 최우선이었죠. 새로운 분들이 합류해서
00:33:06기여하고 일원이 되는 모습은 언제나 경이롭습니다.
00:33:12단순히 도움을 청하러 오는 것도 포함해서요. 저 역시 그렇게 시작했거든요.
00:33:18디스코드에서 질문의 답을 찾기 위해 사람들을 괴롭히면서 말이죠.
00:33:23정말 좋네요. 인간과 커뮤니티를 위하여! 무언가를 만들어서 세상과 공유하는
00:33:28그 즐거움을 저희도 사랑합니다. 이제 슬슬
00:33:34마무리해볼까요. 여러분이 결과물을 내놓는 속도와 품질에 큰 영감을 받았습니다.
00:33:40Nuxt의 여정과 다음 행보가 정말 기대되네요.
00:33:45세 분과 Nuxt 팀, 유지보수 관리자, 기여자 그리고 커뮤니티 여러분께 감사드립니다.
00:33:50오늘 함께해주신 세바스티앙, 다니엘, 휴고 씨 감사합니다.
00:33:56감사합니다.
00:33:57고마워요.
00:33:58안녕히 계세요.
00:33:59청중 여러분, 한 가지 더 있습니다. 어디 가지 마세요. Vercel Academy의
00:34:07이브 씨를 모셔보겠습니다.
00:34:08안녕하세요, 마야 씨.
00:34:09안녕하세요, 이브 씨. 다시 오신 걸 환영합니다.
00:34:11정말 감사합니다. 코스를 런칭하고 사람들의 이야기를 듣는 이 시간이
00:34:18제 한 달 중 가장 즐거운 시간이에요. 저 팀은 정말 'G.O.A.T'(역대 최고)들로 가득하네요.
00:34:25이브 씨도 포함해서요! 이번에 새로
00:34:36준비하신 코스에 대해 좀 더 들려주실 수 있을까요?
00:34:40네, 오늘 새로운 코스를 런칭하게 되어 정말 기쁩니다. 화면을 공유할게요.
00:34:48Vercel의 Nuxt 코스입니다. React 세계에 익숙한 분들을 위한 코스이며,
00:34:55React와 Nuxt 프로젝트 사이의 번역 레이어 같은 역할을 해줄 겁니다.
00:35:03새로운 직장에 들어갔거나 사이드 프로젝트를 하는데, "정말 쓰고 싶지만
00:35:08어디서부터 시작해야 할지 모르겠어" 하시는 분들께 추천합니다.
00:35:12물론 에이전트들도 도움이 되겠지만, 이 코스는 직접 프로젝트를
00:35:16구축하도록 도와줍니다. 온천 찾기 앱을 만들면서
00:35:24좋아하는 하이킹 코스와 온천을 찾는 법을 배울 거예요. Vercel Academy에
00:35:30많은 코스가 예정되어 있는데, 이 코스가 그중 가장 최신입니다.
00:35:34감사합니다, 이브 씨. 여러분, 이브 씨의 강의는 정말 최고예요.
00:35:40만들면서 배우는 방식을 정말 잘 활용하시거든요. 꼭 확인해보세요.
00:35:45찾기 편하시게 링크도 추가해둘게요. 저도 직접 수강하면서
00:35:50Nuxt로 더 많은 걸 만들어보고 싶네요. 오늘 함께해주셔서 감사합니다.
00:35:59자, 커뮤니티 세션을 마칠 시간입니다. 저희와 함께 시간을 보내주신
00:36:03커뮤니티 여러분께 감사드립니다. 즐거우셨기를 바라며,
00:36:09미래의 세션에 참여하고 싶다면 [community.vercel.com/live에서](https://community.vercel.com/live에서) 상세 내용을 확인하세요.
00:36:16준비 중인 이벤트가 아주 많으니 온라인 및 지역별
00:36:20미트업 페이지도 확인해주시고요. 마지막으로 따끈따끈한 소식인데,
00:36:26전 세계 곳곳에서 열릴 Vercel Ship 티켓이 오픈되었습니다.
00:36:32정말 기대되네요. [vercel.com/ship에서](https://vercel.com/ship에서) 확인하고
00:36:37티켓을 신청하세요. 디자인과 인터랙션만으로도 충분히 방문할 가치가 있을 겁니다.
00:36:43팀에서 정말 공을 많이 들였거든요. 그럼 전 이만 물러가겠습니다. 감사합니다.
00:36:47좋은 하루 보내세요. 안녕!

Key Takeaway

Nuxt는 Nitro 3와 Route Rules를 통한 서버 최적화뿐만 아니라, 마크다운 스트리밍과 AEO(인공지능 엔진 최적화)를 결합하여 AI 에이전트와 사용자 모두에게 최상의 퍼포먼스를 제공하는 점진적 프레임워크로 진화하고 있다.

Highlights

  • Nitro 3를 핵심으로 한 Nuxt 5는 Bun, Deno, Node 환경에서 웹 표준에 최적화된 초경량 서버 래퍼를 제공한다.

  • Route Rules 설정을 통해 특정 경로는 SSR을 비활성화하거나 블로그와 같은 페이지를 ISR로 설정하여 Vercel 환경에서 성능을 최적화할 수 있다.

  • Nuxt Content는 모든 문서를 DOM 형태로 관리하며 Comark 프로젝트를 통해 런타임에 컴포넌트가 포함된 마크다운 렌더링과 스트리밍을 지원한다.

  • 에이전트가 Accept 헤더에서 'text/markdown'을 요청하면 최신 페이지를 마크다운으로 직접 제공하여 AI 엔진 최적화(AEO)를 수행한다.

  • Nuxt 4.4의 페이로드 캐시 기능을 활용하면 사용자가 페이지로 이동하기 전에 데이터를 미리 가져와 로딩 속도를 대폭 개선한다.

  • Nuxt 생태계는 300개 이상의 관리되는 모듈과 1,000명 이상의 기여자 기반으로 매년 메이저 버전을 출시하는 로드맵을 운영한다.

Timeline

AI 에이전트와 MCP 서버 통합

  • MCP 툴킷을 사용하면 모든 Nuxt 웹사이트를 MCP 서버로 변환하여 AI와 통합할 수 있다.
  • Nuxt 모듈 API는 개발 도구와 AI 에이전트를 연결하는 핵심 인터페이스 역할을 한다.
  • 오픈 소스로 공개된 소스 코드를 통해 에이전트 내부 동작과 컴포넌트 구현 방식을 학습할 수 있다.

포트폴리오나 프로젝트 수정 시 에이전트를 활용하면 원하는 결과를 빠르게 얻을 수 있다. 사이드바에서 AI의 사고 과정을 보여주는 방식이나 구체적인 구현 사례가 블로그와 오픈 소스 레포지토리에 상세히 설명되어 있다. 특히 Hugo가 개발한 MCP 툴킷은 Nuxt 앱이 다양한 AI 플랫폼과 연결되는 가교가 된다.

데이터 기반 피드백 및 관리자 MCP 기능

  • 웹사이트 위젯을 통해 수집한 사용자 피드백은 페이지 개선 우선순위를 정하는 지표가 된다.
  • 관리자 전용 MCP 에이전트는 특정 페이지의 점수와 개선 방안을 대화형으로 제공한다.
  • 피드백 데이터가 적은 경우에도 에이전트는 구체적인 개선 실마리를 분석하여 제안한다.

관리자 페이지의 위젯은 사용자 경험이 개선되고 있는지 실시간으로 추적한다. 최근 출시된 MCP 관리자 기능은 AI 대화창과 연결되어 작동한다. 예를 들어 404 페이지의 평균 점수와 낮은 평가의 원인을 질문하면, 에이전트가 해당 데이터를 분석해 즉각적인 해결책을 요약하여 답변한다.

Comark 프로젝트와 마크다운 컴포넌트 런타임

  • Comark는 마크다운 내에서 실시간으로 컴포넌트를 구현하고 스트리밍하는 기능을 지원한다.
  • AI가 특정 구문을 사용하도록 학습시키면 텍스트 기반 마크다운으로 동적인 랜딩 페이지를 생성할 수 있다.
  • SvelteKit 및 Nuxt 팀과의 협업을 통해 콘텐츠 핵심 기능을 누구나 사용 가능한 형태로 추출했다.

Nuxt Content는 기본 CMS로서 모든 문서를 DOM 형태로 보유하며 마크다운 안에서 인터랙티브 컴포넌트를 사용할 수 있게 한다. 새롭게 진행 중인 Comark 프로젝트는 스트리밍 중에도 태그가 자동으로 닫히는 기능을 포함한다. 농구화 판매 페이지 같은 예시에서 볼 수 있듯 AI가 마크다운 구문을 사용해 복잡한 레이아웃을 생성하는 단계에 도달했다.

검색 엔진에서 AI 엔진 최적화(AEO)로의 전환

  • AI 에이전트의 크롤링을 감지하면 컨텍스트 윈도우 사용량을 줄이기 위해 최적화된 마크다운을 제공한다.
  • JSON-LD 추가와 User Agent 감지를 통해 AI가 사이트 정보를 더 정확하게 이해하도록 돕는다.
  • 기존의 SEO 성공 모델을 넘어 스마트 스피커와 AI 에이전트가 정보를 수집하는 방식에 대응한다.

Nuxt는 과거 Next.js 검색 결과 상단에 위치할 정도로 강력한 SEO 솔루션이었다. 이제는 사용자가 직접 검색하기보다 에이전트를 사용하는 추세에 맞춰 AEO 최적화에 집중한다. Accept 헤더에 'text/markdown'이 포함된 경우 사람이 보는 HTML 대신 정제된 마크다운 콘텐츠를 전송하여 효율성을 극대화하는 실험을 진행 중이다.

Nuxt 5 로드맵과 Nitro 3 서버 엔진

  • Nitro 3는 어떠한 실행 환경에서도 네이티브 성능에 가까운 초경량 서버 래퍼를 지향한다.
  • Nuxt 5는 웹 표준을 준수하며 Bun, Deno, Node 등 다양한 런타임 간의 호환성을 강화한다.
  • Nightly 버전을 통해 정식 출시 전에도 새로운 기능과 향상된 개발자 경험을 테스트할 수 있다.

현재 팀은 Nuxt 5 출시 준비에 전력을 다하고 있다. 핵심인 Nitro 3 업데이트는 생태계 전체가 웹 표준에 더 가깝게 이동하도록 유도하는 중요한 변화다. 로컬 테스트 결과 베타 단계 이전임에도 불구하고 매우 쾌적한 사용감을 제공하며, 이는 향후 Nuxt 개발자들에게 즉각적인 만족감을 줄 것으로 예상된다.

Vercel 환경의 성능 최적화 및 라우트 규칙

  • Route Rules를 사용하면 단 몇 줄의 설정으로 SSR 비활성화나 ISR 적용을 자유롭게 지정할 수 있다.
  • Nuxt 4.4의 페이로드 캐시는 사전 렌더링되지 않은 페이지의 데이터도 미리 가져와 로딩 속도를 높인다.
  • NPMX 사례를 통해 고도로 최적화된 실제 서비스의 캐싱 및 페이로드 처리 방식을 확인할 수 있다.

Vercel 배포 시 인증 기능이 포함된 페이지는 캐싱 처리가 까다로울 수 있다. 이를 해결하기 위해 Route Rules로 관리자 페이지는 클라이언트 사이드 렌더링으로, 블로그는 ISR로 설정하는 전략이 권장된다. 또한 실제 서비스 중인 NPMX 프로젝트의 소스를 참고하면 페이로드 캐시가 사용자 경험을 얼마나 빠르게 만드는지 실질적인 증거를 얻을 수 있다.

효과적인 학습 전략과 마이그레이션

  • 단순히 코드 생성을 요청하기보다 생성된 코드의 동작 원리를 설명해달라고 요구하여 학습의 기회로 삼아야 한다.
  • Nuxt 3에서 4로의 업데이트는 파괴적 변경이 거의 없도록 설계되어 마이그레이션 부담이 적다.
  • app.vue 파일 하나로 시작해 라우팅과 데이터를 점진적으로 추가하는 방식이 권장된다.

처음 시작할 때는 최소한의 템플릿으로 구조를 잡는 것이 좋다. AI를 가이드로 활용하되 10분 정도의 연습을 섞어 지식을 내면화하는 과정이 중요하다. Nuxt는 매년 메이저 버전을 출시하지만 전후방 호환성을 유지하여 사용자가 업데이트를 두려워하지 않고 항상 최신 모범 사례를 따를 수 있도록 지원한다.

오픈 소스 커뮤니티의 본질과 참여

  • Discord와 GitHub를 통해 아이디어를 공유하고 300개 이상의 모듈 생태계에 기여할 수 있다.
  • Contributing.md는 자동화된 에이전트 설정인 agents.md보다 사람 간의 협업을 중시하는 핵심 문서다.
  • Vercel Academy의 새로운 Nuxt 코스는 React 개발자가 Nuxt로 쉽게 전환할 수 있는 가이드를 제공한다.

Nuxt의 진정한 가치는 1,000명 이상의 기여자가 참여하는 커뮤니티에 있다. 코어 팀뿐만 아니라 누구나 템플릿이나 모듈을 만들어 전체 생태계에 기여할 수 있다. 마지막으로 소개된 Vercel의 신규 강좌는 온천 찾기 앱 제작을 통해 실전 기술을 전수하며, Vercel Ship 행사와 같은 미트업을 통해 커뮤니티 연결을 지속하고 있다.

Community Posts

View all posts