Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
개발 · 프로그래밍

/

웹 개발

SEO 최적화 랜딩페이지 솔루션 & 노출전략: 바이브코딩으로 완성

실전 바이브 코딩으로 회사 소개 랜딩페이지를 완성합니다. Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP 스택으로, 설계부터 배포까지 한 번에 진행합니다. 핵심은 “빠른 구현 + 검색 엔진에 잘 노출되는 SEO 기반”입니다. 🏁 강의 목표 랜딩 제작 → 성능 최적화 → SEO 반영 → 배포/인덱싱 실시간 코딩(바이브 코딩)으로 섹션별 완성본을 바로 확인 검색 반영까지 직접 체험 🛠️ 실습 스택 Cursor AI, Next.js(App Router), TypeScript TailwindCSS, shadcn/ui, MCP 워크플로우 🔍 SEO 실습 강사가 제공하는 SEO 최적화용 MD 파일 적용 메타데이터, OG/Twitter 카드, robots/sitemap, 구조화 데이터(JSON-LD) 다국어 라우팅 선택 적용 🎯 완성물 반응형 회사 소개 랜딩 + 문의 폼 Lighthouse 95+ 목표 Vercel 배포 후 Search Console 등록 및 인덱싱 요청 📚 이 강의로 배우는 것 히어로/신뢰/기능/FAQ 섹션을 빠르게 구성하는 법 shadcn/ui로 깔끔한 UI 구성 폼 검증과 기본 전환 추적 포인트 설계 구조화 데이터 + 다국어 라우팅으로 SEO 스코어 올리기 배포 후 Search Console을 통한 인덱싱 과정 이해 💡 현업 인사이트 (강의 특전) 단순히 코드 구현만이 아니라, 실제 시장에서 활용되는 마케팅·노출 방식도 간단히 짚어드립니다. 광고, 블로그 포스팅, 댓글 작업의 현실적인 단가 범위 외주·용역 업체들이 실제로 SEO, 노출 작업을 어떻게 진행하는지 개발자가 직접 참여했을 때와 외주를 맡겼을 때의 비용/효율 차이 이 부분을 통해 단순히 기술을 넘어서 실제 현업에서 어떻게 활용되는지, 어떤 비용 구조로 움직이는지까지 감각을 익힐 수 있습니다. 한 줄 정리 “구현 → 최적화 → 배포 → 인덱싱”의 흐름을 따라가며, 실제 검색 노출과 현업 시장 구조까지 연결되는 웹 제작 프로세스를 배웁니다.

8명 이 수강하고 있어요.

  • ludgi
실습 중심
AI 코딩
next.js
바이브코딩
ReactNode.jscursorTailwindCSSnextjs

이런 걸 배울 수 있어요

  • Next.js + TypeScript + TailwindCSS + shadcn/ui 실전 활용법 배우기

  • Cursor AI와 MCP를 이용한 바이브 코딩 작업 방식 익히기

  • 회사 소개 랜딩페이지를 직접 완성해보기

  • SEO 최적화 기본 원리와 적용 방법 이해하기

  • 메타데이터, OG/Twitter 카드, sitemap/robots, 구조화 데이터 직접 설정하기

  • Search Console 등록 및 인덱싱 과정 체험하기

  • Vercel을 통한 배포 및 운영 프로세스 경험하기

  • 현업에서의 홈페이지 노출 전략

누구나 할 수 있는 랜딩페이지, 직접 배포까지 한 번에

이 강의에서 배우는 것

  • 랜딩페이지 기획부터 완성까지: 히어로 섹션, 기능 소개, FAQ, 문의 폼까지 실제 회사 소개 페이지에 필요한 핵심 구조를 빠르게 구성

  • SEO 최적화 기술: 메타데이터, OG/Twitter 카드, robots.txt, sitemap, JSON-LD 구조화 데이터 적용


  • 배포와 검색 반영: Vercel 배포 → Google Search Console 등록 → 인덱싱 요청까지 실습

  • 또한, 현업에서 실제 활용되는 광고·블로그·댓글 단가와 노출 전략도 간략히 안내합니다.

이런 분들께 추천해요

광고·마케팅 담당자회사에서 갑자기 랜딩페이지 제작 업무를 떠맡았지만, 어디서부터 시작해야 할지 막막한 분

스타트업/소규모 사업자

외주 비용이 부담돼서, 내부에서 직접 랜딩페이지를 제작하고 싶으신 분

개발 입문자

구체적으로 적을수록 이 강의가 필요한 분들이 수강할 수 있어요.

수강 후에는

  • 이 강의는 nextjsTailwindCSS, React를 활용하여 누구나 쉽게 랜딩페이지를 제작하고 배포할 수 있도록 구성되어 있습니다. 단순히 기술적인 설명에 그치지 않고, 광고·마케팅 담당자나 기획자처럼 개발 경험이 많지 않은 분들도 실제로 결과물을 만들어낼 수 있도록 실습 위주로 진행합니다.

    Node.js설치부터 시작해, cursor와 같은 최신 개발 환경을 도입해 효율적으로 작업하는 방법을 알려드립니다. 또한 tweakcn을 활용해 테마와 스타일을 직관적으로 변경하며, 랜딩페이지의 완성도를 높이는 방법도 다룹니다. 복잡한 이론은 과감히 배제하고, 바로 따라 하면 실제 서비스로 연결되는 과정을 경험할 수 있습니다.

    수강을 마치고 나면, Godaddy에서 직접 도메인을 구매하고 Vercel에 연동해 배포까지 완료한 나만의 랜딩페이지가 손에 남습니다. 이는 곧 회사 내부에서 외주비용을 절감하고, 빠르게 마케팅 활동을 지원할 수 있는 실무 역량으로 이어집니다. Next.js, TailwindCSS, React 같은 최신 프레임워크와 더불어 tweakcn, Vercel을 직접 다뤄보는 경험은 개발자뿐만 아니라 비개발자에게도 자신감을 줄 것입니다.

이 강의의 특징

핵심 특징과 차별점을 소개해보세요.

p1
  • 누구나 따라 할 수 있는 랜딩페이지 제작
    복잡한 이론은 빼고, 화면 그대로 따라 하면 랜딩페이지가 완성되도록 구성했습니다.

  • 짧은 시간 안에 결과물 완성
    Node.js, Next.js, TailwindCSS 같은 최신 도구를 사용하지만, 초보자도 부담 없이 따라갈 수 있도록 단계별로 안내합니다.

  • 실무 상황 그대로 반영
    회사에서 마케팅 담당자나 기획자가 갑자기 맡아도, 외주 없이 직접 해결할 수 있는 실습 경험을 제공합니다.

  • 끝까지 배포까지 경험
    단순히 화면만 만드는 강의가 아니라, 도메인 구매 → Vercel 배포 → 네이버·구글 검색 등록까지 전 과정을 실습합니다.

  • 불필요한 심화 개발 대신 실무 핵심만
    실제 회사에서 가장 많이 필요한 과정만 담았기 때문에, 마케팅·홍보 실무자에게 바로 도움이 됩니다.

  • 자동화된 학습 효과
    강의를 마치면 누구든지 혼자서 랜딩페이지 제작과 배포를 반복할 수 있어, 마치 회사의 한 과정을 자동화한 것 같은 효과를 줍니다.

이런 내용을 배워요

  • 누구나 따라 할 수 있는 실습 중심
    복잡한 이론보다, 실제로 화면에 보이는 대로 따라 하면 결과물이 바로 나옵니다.

  • 비개발자도 이해할 수 있는 설명
    회사에서 갑자기 랜딩페이지를 맡게 된 마케팅·기획 담당자도 쉽게 이해할 수 있도록 설명합니다.

  • 끝까지 완성 경험 제공
    도메인 구매부터 배포까지 전 과정을 직접 경험할 수 있어, “아, 나도 할 수 있구나”라는 자신감을 줍니다.

  • 실무 상황을 그대로 반영
    외주를 맡기면 최소 수십만 원 이상 드는 작업을, 내부에서 직접 처리할 수 있도록 구성했습니다.

  • 짧고 효율적인 커리큘럼
    불필요한 이론 없이, 바로 회사에서 써먹을 수 있는 핵심 단계만 담았습니다.

  • 자동화된 학습 효과
    강의를 마치면 누구든지 혼자서 랜딩페이지를 제작·배포할 수 있어, 마치 회사의 한 과정을 자동화한 것 같은 효과를 얻을 수 있습니다.

럿지

  • 저는 다양한 기업과 개인 사업자를 대상으로 웹·앱 프로젝트를 진행해온 개발자입니다.
    특히 랜딩페이지 제작은 광고 대행사, 병원, 스타트업 등 여러 분야에서 꾸준히 문의가 들어오는 주제였습니다.

    외부에 맡기면 보통 30만 원에서 150만 원 이상이 들지만, 실제로 필요한 것은 “짧은 시간 안에 직접 제작하고 배포할 수 있는 기본 지식”이었습니다.
    그래서 비개발자도 쉽게 따라 할 수 있는 방법, 그리고 회사 내부 인력이 직접 해결할 수 있는 실무형 강의를 만들고자 했습니다.

    이번 강의는 단순한 기술 설명이 아니라, 제가 현업에서 겪었던 요청들과 경험을 바탕으로 구성했습니다.
    누구나 부담 없이 시도할 수 있고, 직접 결과물을 손에 쥘 수 있는 경험을 드리는 것이 목표입니다.

Q. 비전공자인데도 따라갈 수 있을까요?
A. 네, 가능합니다. 이 강의는 개발 경험이 없는 광고·마케팅 담당자, 기획자도 쉽게 따라할 수 있도록 구성되어 있습니다. 화면에 보이는 대로 하나씩 진행하면 실제 랜딩페이지를 완성할 수 있습니다.

Q. 이 강의를 들으면 무엇을 할 수 있나요?
A. 랜딩페이지 제작부터 도메인 연결, Vercel을 통한 배포, 그리고 SEO 기본 세팅까지 경험하게 됩니다. 강의가 끝나면 회사 내부에서 직접 랜딩페이지를 만들어 활용할 수 있는 역량을 갖추게 됩니다.

Q. 강의에서 다루는 수준은 어느 정도인가요?
A. 기본 환경 세팅(Node.js, Git)부터 시작해서 Next.js와 TailwindCSS를 이용한 디자인 적용, 배포와 검색 등록까지 다룹니다. 심화 개발 과정보다는 실무에서 바로 쓸 수 있는 “최소한의 핵심 과정”에 초점을 맞췄습니다.

Q. 강의를 듣기 전에 준비해야 할 것이 있나요?
A. 노트북과 인터넷 연결만 있으면 됩니다. 프로그래밍 경험이 없어도 따라올 수 있도록 모든 단계를 차근차근 안내합니다.

Q. 이 강의는 어떤 분께 가장 도움이 되나요?
A. 회사에서 갑자기 랜딩페이지를 제작해야 하는 상황을 맡은 광고·마케팅 담당자, 스타트업 대표, 소규모 사업자분들께 특히 유용합니다.

수강 전 참고 사항

실습 환경

  • 운영체제(OS): Windows, macOS, Linux 모두 사용 가능

  • 필수 도구: Node.js, Git, Cursor (강의 중 설치 방법 안내)

  • PC 사양: 별도의 고사양 장비가 필요하지 않으며, 인터넷이 가능한 일반적인 노트북이면 충분합니다.

학습 자료

  • 강의와 함께 제공되는 실습 프롬프트, 참고 자료 등을 활용합니다.

  • 모든 과정은 화면에 보이는 대로 따라 할 수 있도록 준비되어 있어, 추가 교재나 복잡한 자료는 필요하지 않습니다.

선수 지식 및 유의사항

  • 프로그래밍 경험이 없어도 수강 가능합니다.

  • 기본적인 컴퓨터 사용(프로그램 설치, 웹사이트 접속) 정도만 알고 계시면 충분합니다.

  • 강의 영상은 수시로 다시 확인할 수 있으며, 제공된 자료를 활용해 반복 학습도 가능합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 랜딩페이지 제작이 처음인 분

  • 회사/서비스 소개용 홈페이지를 직접 만들어보고 싶은 분

  • 코드 복잡도보다는 실전 완성 경험을 원하는 분

  • SEO 최적화를 기본부터 배우고 싶은 분

  • Cursor AI와 Next.js를 실제로 활용해보고 싶은 분

  • 빠르게 배포 가능한 실무형 프로젝트가 필요한 1인 창업자·프리랜서

  • 웹 성능, 접근성, 검색 노출까지 한 번에 다뤄보고 싶은 분

  • 현실적인 홈페이지 노출 전략을 알아보고 싶은 분

선수 지식,
필요할까요?

  • 프로그래밍 기초 지식

  • HTML / CSS 기본 문법 이해

  • React 기본 사용 경험

  • Git 및 터미널 기본 사용법

  • 웹사이트 배포 개념에 대한 간단한 이해

안녕하세요
입니다.

441

수강생

17

수강평

8

답변

4.2

강의 평점

7

강의

안녕하세요, 주식회사 럿지의 대표입니다.


저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,

개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.

 

이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.


특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.

 

완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.

커리큘럼

전체

14개 ∙ (2시간 17분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중

₩19

29%

₩33,000

ludgi님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!