블로그 목록으로 돌아가기

똑똑! 좋은 말씀(MCP) 전하러 왔습니다. - MCP Korea 랜딩페이지 개발기

개발자F•

MCPKorea 커뮤니티를 최신 기술로 하루 만에 만든 과정 공유. 최신 Next.js 15, Tailwind 4로 SEO 최적화 완료!

3인방 캐릭터
3인방 캐릭터

소개

요즘 지피터스에서 핫한 주제 하나가 우리 셋을 움직였어요. 바로 MCP에 대한 이야기였죠. 써보니까 너무너무 쉽고 재밌어서 타이칸님, 댕댕이멍멍님과 함께 일요일에 사이드 스터디도 열게되었어요. 그러다 우리 셋이 있는 카톡방에서 타이칸님이 "MCP 관련 커뮤니티가 있으면 좋겠다"는 말에, 댕댕이멍멍님과 저는 적극 동의했고, 그 자리에서 MCPKorea라는 이름이 탄생했어요.

놀랍게도 .com 도메인이 비어있었고, 타이칸님이 그 자리에서 바로 도메인을 구매! 그 즉시, 커뮤니티의 시작을 알릴 랜딩페이지를 만들자는 데 뜻을 모았고, 자연스럽게 제가 개발을 맡게 되었죠.

개발 전 리서치로 다져진 준비

본격적인 개발에 들어가기 전에, 최신 스택을 충분히 이해하고 가는 게 중요했어요. Cursor에서 클로드로 next.js + tailwind css 조합을 그냥 막 써보면 버전차이로 인한 오류가 심해요. 그래서 아래 내용을 조사했죠.

🔍 조사 주제

  • Next.js 최신 버전인 15와 React 19의 주요 변화

  • Tailwind CSS v4.0의 설정 방식 및 추천 사용법

📘 조사 결과 요약

✅ 꼭 해야 할 것

  • Next.js 15에서 React 19 필수 사용, fetch 캐시 명시

  • next.config.js → next.config.ts로 변경 추천

  • Tailwind CSS는 CSS-first 설정 방식을 중심으로 구성

  • Node.js는 20버전 이상 필수

  • 최신 빌드 엔진으로 플러그인 자동 적용 가능

⛔️ 하지 말아야 할 것

  • tailwind.config.js에 의존하지 말고, @tailwind 지시자도 자제

  • 구형 브라우저(IE 등)는 더 이상 지원하지 않음

  • autoprefixer 등 불필요한 플러그인은 무리해서 유지하지 않기

✅ 리서치를 통한 실행 전략 수립

이 조사 덕분에 MCPKorea의 Coming Soon 페이지를 최신 기술 기준에 맞게 다음처럼 설계했어요:

  1. Next.js 15 + Tailwind CSS 4.0 기반으로 프로젝트 구성

  2. 라이트/다크 모드 테마 토글 제공

  3. 센터 정렬된 메시지:

    사본<h1>MCPKorea Coming soon</h1> <h2>쉽고 빠르게 세팅하는 MCP, 모두의 표준이 되다</h2>

  4. 대기자 이메일 입력 폼 → Supabase에 저장 → 타이칸님의 메이크로 웹훅 보내기

  5. 뉴스레터 주 1회 발송 안내 텍스트 삽입

🎨 디자인 기준

  • 폰트: 'Consolas', 'Courier New', monospace

  • 다크 모드: #1E1E1E 배경 + #D4D4D4 텍스트

  • 라이트 모드: #FFFFFF 배경 + #000000 텍스트

  • 강조 색상: 파란색 계열

💡 개발하면서 느낀 점

  • Tailwind v4의 CSS-first 방식은 정말 깔끔하고 구조화가 잘 됨

  • Cursor 덕분에 설정도 거의 자동화 수준

  • 최신 기술에 대한 짧은 리서치가 훗날 유지보수나 퍼포먼스에 큰 차이를 만든다는 걸 다시 느꼈어요

진행 방법

🙋‍♂️ 참여 멤버

  • 타이칸님: 아이디어 제안, 도메인 구매, 뉴스레터 자동화

  • 댕댕이멍멍님: 커뮤니티 방향성 구체화

  • 저 (작성자): 랜딩페이지 제작 및 SEO 작업

🛠 사용한 기술 스택

  • 개발: Next.js + Supabase + Netlify

  • 도구: Cursor로 개발 & 배포, GPT-4.5로 SEO 분석

💻 작업 흐름

  • 랜딩페이지 제작: Cursor를 통해 빠르게 Next.js 기반 페이지 개발

  • 배포 자동화: Netlify와 Cursor의 조합으로 클릭 몇 번으로 배포 완료

  • 디자인 개선: GPT-4.5로 디자인 개선 사항 도출 -> Cursor로 개선 요청

  • SEO 개선: 기본적인 seo 세팅사항 GPT-4.5에 문의 -> 상위 노출 태그 가져와서 Cursor로 데이터 추가

  • 뉴스레터 자동화: 타이칸님이 waitlist 등록 사용자에게 자동 메일 발송 설정

🧑‍🎨디자인 개선 실험과 GPT 활용

랜딩페이지가 완성된 후, 더 나은 사용자 경험과 시각적 완성도를 위해 GPT-4.5를 활용한 디자인 리뷰를 시도해봤어요. 제가 만든 "프롬프트 만들기 v2 GPT"로 먼저 전문적인 디자인 피드백을 요청할 수 있는 프롬프트를 생성했고, 그 결과 다음과 같은 인사이트를 얻을 수 있었어요 👇

🔴Before

before
before

🟢After

after
after

📌 Expert Design Review

✅ 강점

  • 깔끔하고 미니멀한 구성

  • 라이트/다크 모드 대비 훌륭함

  • 시각적 계층 구조가 명확함

🛠 개선 제안

  • 헤드라인 폰트를 더 현대적인 sans-serif 계열로 교체

  • 버튼 색상 통일 (뉴스레터는 파란색, 카카오톡은 노란색 → 하나의 강조 색으로 정리)

  • 여백과 정렬 개선 (시각적 밸런스 및 정렬 최적화)

  • Hover 효과 추가 (인터랙티브 요소 강화)

  • CTA 옆 마이크로 카피 추가 (등록 이유 강조)

  • 접근성 향상 (명암 대비, 다크/라이트 모드 전환 버튼 위치 확인 등)

✅ 개선 체크리스트 요약

  • 헤드라인 폰트: Sans-serif 계열로 변경

  • 버튼 색상 통일: 하나의 주요 강조 색 사용

  • 여백 조정: 섹션 간 여백 증가 및 수직 정렬 정밀화

  • Hover 효과 추가

  • CTA 주변 설명 추가 (예: "MCP 활용 팁을 받아보세요")

  • 접근성 테스트: WCAG AA 기준 만족 확인

🔗SEO도 놓칠 수 없죠!

MCPKorea 랜딩페이지를 만들면서 단순히 화면만 잘 보이게 하는 것에 그치지 않고, 검색 엔진에서도 노출될 수 있도록 철저하게 SEO 작업을 진행했습니다. 이 과정에서 GPT-4.5와 Cursor의 도움을 적극 활용했어요.

🛠 SEO 작업 목표

  • MCP 관련 검색어로 Google 상위 노출

  • SNS 공유 시 썸네일 및 미리보기 최적화

  • Google Search Console 연결

  • 최신 SEO 트렌드 반영 (Schema, OpenGraph, 트렌드 키워드 등)

✅ 실제 수행 작업

1. 메타데이터 설정

  • layout.tsx에 title, description, keywords 삽입

  • MCP, 모델 컨텍스트 프로토콜, GPT, Claude, OpenAI 등 키워드 반영

2. OpenGraph & Twitter 카드

  • 이미지, 제목, 설명 포함한 OG 및 Twitter 메타태그 삽입

  • SNS 미리보기 최적화

3. 구조화 데이터 삽입

  • Schema.org 기반 JSON-LD 작성

    • Organization, WebPage 스키마 적용

    • page.tsx에도 조직 정보 삽입

4. robots.txt 및 sitemap.xml 생성

  • robots.txt: 검색 엔진 접근 허용

  • sitemap.xml: 페이지 구조 자동 제출

5. Google Search Console 인증

  • 제공받은 HTML 파일을 /public 폴더에 삽입

  • layout.tsx에 메타태그로 인증 코드 추가

6. 트렌드 기반 키워드 확장

  • Google Trends 위젯 분석

  • article:tag, topic:related 메타 태그 추가

  • JSON-LD의 ItemList 활용해 관련 키워드 자동 삽입

7. 경쟁 사이트 벤치마킹

  • 1~2위 노출된 사이트의 <head> 구조 분석

  • 시간 정보 (article:published_time) 등 메타 확장

🤖 GPT가 도와준 것들

  • SEO 관련 프롬프트 생성 → GPT-4.5가 직접 메타태그 제안

  • 경쟁 사이트 분석 결과를 기반으로 구체적인 개선 방향 도출

  • Schema.org, robots, sitemap 설정법까지 실시간 가이드 제공

😎 기억에 남는 순간

  • Netlify는 처음 써봤는데, Cursor 덕분에 마치 마법처럼 쉬웠어요

  • 각자 자기가 할 수 있는 걸 알아서 툭툭 맡고 실행하는 팀워크가 신기했어요

  • 실행 속도가 너무 빨라서 심지어 살짝 당황할 정도였지만... 덕분에 너무 즐거운 하루하루!

  • GPT를 통해 단순한 코드 리뷰를 넘어 시각적 디자인 피드백까지 자동화할 수 있다는 사실이 신기했어요. 빠르게 테스트하며 실험적인 UI 개선도 함께 진행 중입니다 👨‍🎨✨

결과와 배운 점

  • 🚀 하루 만에 랜딩페이지 런칭과 뉴스레터 자동화 완료

  • 🤝 "이렇게 잘 맞는 팀워크가 또 있을까?" 싶을 정도로 자연스러운 협업

  • 🧠 SEO, 배포, 커뮤니티 구조까지 빠르게 학습하고 적용

  • ❤️ 즐거운 사이드 프로젝트가 본격적인 커뮤니티로 성장하는 중

그리고 이 스터디는 일회성이 아니에요! 이번 주 일요일 아침 9시에도 MCP 스터디가 또 진행되고, 지피터스 15기 스터디 종료 후 16기 시작 전까지 3주간 MCP 사이드 스터디도 오픈 예정이에요 🎉

MCPKorea 커뮤니티와 랜딩페이지에도 많은 관심 부탁드립니다 🙏 여러분의 참여가 커뮤니티를 더 풍성하게 만듭니다!

🙌 사이드 프로젝트를 고민 중이라면, 가볍게 시작해보세요. 실행력이 모든 걸 바꿔줍니다!

함께하는 사람들이 있다면 더 빠르고, 더 재밌어요 😄

작성자

개발자F