Cloudflare Pages에서 도메인 변경하기 - Moodcure에서 Moodturn으로 리브랜딩
Cloudflare Pages에서 도메인 변경하기 - Moodcure에서 Moodturn으로 리브랜딩
요약
이 글의 핵심 3가지
- 정식 출시 전 전환: Moodcure에서 Moodturn으로 리브랜딩 하면서 도메인을 바꿨습니다
- 체계적인 점검: 코드, 설정, 정적 파일 모두 빠짐없이 확인해야 합니다
- 검색엔진 재등록: 도메인 인증 파일은 새로 발급받아야 합니다
읽는 시간: 20분 | 난이도: 중급
출처
이 글은 실제 Moodturn 서비스의 도메인 전환 과정을 바탕으로 작성했습니다.
- Cloudflare Pages 공식 문서 - 배포 및 도메인 설정
- Custom domains - 커스텀 도메인 관리
환경 정보: Next.js 15, Cloudflare Pages, TypeScript
Moodcure에서 Moodturn으로
처음 서비스를 기획할 때 이름을 ‘Moodcure’로 정했습니다. ‘마음(Mood)‘을 ‘치유(Cure)‘한다는 의미였죠.
도메인도 moodcure.net으로 등록하고, 클라우드플레어에 배포하고, 검색엔진에도 등록했습니다.
하지만 막상 서비스를 준비하다 보니 ‘Cure’라는 단어가 주는 이미지가 너무 강했습니다.
치료, 약, 의료 같은 느낌이 들었고, 우리가 만들려는 서비스와는 조금 달랐습니다.
우리는 단순히 치료가 아니라 긍정적인 변화를 만들고 싶었기 때문이었습니다.
고민 끝에 ‘Moodturn’이라는 이름을 선택했습니다.
마음의 전환(Turn), 변화를 의미하는 이름이었죠. 새로운 도메인 moodturn.net도 구매했습니다.
그런데 생각할 것이 많았습니다. 이미 사이트맵을 제출했고, 링크 공유 시 보이는 Open Graph 이미지도 설정했고, 검색엔진 인증도 완료한 상태였거든요. 게다가 코드 곳곳에 ‘moodcure’가 하드코딩되어 있었습니다.
처음엔 이 상황이 마냥 귀찮기만 했습니다.
하지만 잠시 멈추고 생각해보니 상황이 생각보다 나쁘지 않았습니다.
정식 출시 전이라는 축복
현재 상황을 정리해보니 이랬습니다.
현재 상황: - 실제 사용자: 아직 앱이 출시되기 전이라, 사실상 0명에 가까웠습니다 - 사업자 등록: 미완료 - 브랜드 인지도: 없음이것은 문제가 아니라 완벽한 타이밍이었습니다.
사용자 영향 제로
실제 사용자가 없다는 것은 아무에게도 피해를 주지 않는다는 뜻입니다.
기존 사용자에게 공지할 필요도 없고, 북마크를 업데이트해달라고 요청할 필요도 없습니다.
그냥 조용히 바꾸면 되었습니다.
다른 서비스들을 보면 도메인을 바꿀 때 얼마나 복잡한지 알 수 있습니다.
- 기존 도메인을 최소 1년은 유지하면서 리다이렉트 설정
- 모든 사용자에게 이메일 공지
- 앱 스토어 설명 업데이트
- 마케팅 자료 전부 교체
- 명함, 홍보물 재작성
우리는 이런 것들을 할 필요가 없었습니다.
법적/행정적 제약 없음
사업자를 아직 등록하지 않았기 때문에:
- 사업자등록증 재발급 필요 없음
- 통신판매업 신고 변경 불필요
- 계약서나 약관 업데이트 불필요
나중에 사업자를 등록할 때 처음부터 ‘Moodturn’으로 하면 됩니다.
변경이 필요한 부분들
도메인을 바꾸려면 무엇을 수정해야 할까요? 체계적으로 정리해보겠습니다.
1. 코드베이스 변경
당연하게도 먼저 코드에서 도메인이 사용되는 곳을 찾아야 합니다. 프로젝트 전체를 검색해봤습니다.
# ripgrep 사용 (권장 - 빠르고 정확함)rg -n --hidden --no-ignore-vcs "moodcure" .팁:
ripgrep(rg)이 설치되어 있지 않다면brew install ripgrep(macOS) 또는apt install ripgrep(Ubuntu)로 설치할 수 있습니다.에디터의 검색 기능이 좋다면, 에디터로 검색하셔도 좋습니다.
결과는 10개 파일에서 발견되었습니다. 단순 회사 홈페이지여서 그렇게 많지 않았습니다.
변경이 필요한 파일 목록 (클릭하여 펼치기)
| 파일 | 변경 내용 |
|---|---|
app/layout.tsx | 메타데이터, OpenGraph, Twitter Card |
app/sitemap.ts | 사이트맵 URL |
app/robots.ts | robots.txt |
app/manifest.ts | PWA 매니페스트 |
components/structured-data.tsx | Schema.org 구조화 데이터 |
components/footer.tsx | 회사 정보 및 이메일 |
components/header.tsx | 로고 및 브랜드명 |
app/page.tsx | 페이지 콘텐츠 |
components/particle-text-effect.tsx | 배경 애니메이션 |
package.json | 프로젝트 이름 |
2. 정적 파일 변경
코드만 바꾸면 끝이 아닙니다. public/ 폴더에 있는 정적 파일들도 확인해야 했습니다.
확인이 필요한 파일들: 검색엔진 인증: - googleXXXXXXXXXXXXXXXX.html # Google Search Console - naverXXXXXXXXXXXXXXXX.html # Naver 웹마스터
브랜드 리소스: - logo.svg, logo.png # 로고 파일 - favicon-*.png, icon-*.png # 브라우저 아이콘 - og-image.png # 링크 공유 이미지검색엔진 인증 파일이 가장 중요합니다. 이건 도메인마다 다르기 때문에 새로 발급받아야 합니다.
3. 클라우드플레어 설정 변경
마지막으로 클라우드플레어에서 도메인을 추가하고 기존 도메인을 제거해야 합니다.
실제 Moodturn 서비스 도메인 전환 과정
이제 실제로 어떻게 바꿨는지 단계별로 보겠습니다.
주의: 이 과정은 실제 Moodturn 서비스 도메인 전환 과정 을 바탕으로 작성했습니다.
여러분의 상황에서는 맞지 않을 수 있습니다.
Phase 1: 백업
무엇을 하든 변경 전에 백업부터 하세요. Git을 사용하고 있다면 현재 상태를 커밋합니다.
# 현재 상태 확인git status
# 변경사항이 있다면 커밋git add .git commit -m "도메인 변경 전 백업"git push중요: 반드시 원격 저장소(GitHub/GitLab)에 푸시하세요. 로컬에만 있으면 백업이 아닙니다.
Phase 2: 코드 변경
이제 본격적으로 코드를 변경합니다. 한 파일씩 차례대로 수정하겠습니다.
1. app/layout.tsx - 메타데이터
이 파일은 SEO에 가장 중요합니다. Open Graph, Twitter Card 등 메타데이터가 여기 있습니다.
변경 전:
const SITE_URL = "https://moodcure.net";const SITE_NAME = "Moodcure";
export const metadata: Metadata = { metadataBase: new URL(SITE_URL), title: { default: "Moodcure - 감정을 이해하고, 변화로 연결합니다", template: "%s | Moodcure", }, description: "Moodcure는 사람의 마음을 치유하고 연결하는 서비스입니다.", keywords: ["마음 치유", "Moodcure", "무드큐어"], authors: [{ name: "Moodcure Team" }], creator: "Moodcure", publisher: "Moodcure",
openGraph: { url: SITE_URL, siteName: SITE_NAME, title: "Moodcure - 감정을 이해하고, 변화로 연결합니다", images: [ { url: "/og-image.png", alt: "Moodcure - 마음을 치유하고 연결하는 서비스", }, ], },
twitter: { title: "Moodcure - 감정을 이해하고, 변화로 연결합니다", // 실제 Twitter/X 계정이 있다면: creator 필드 추가 },};변경 후:
const SITE_URL = "https://moodturn.net";const SITE_NAME = "Moodturn";
export const metadata: Metadata = { metadataBase: new URL(SITE_URL), title: { default: "Moodturn - 감정을 이해하고, 변화로 연결합니다", template: "%s | Moodturn", }, description: "Moodturn은 사람의 마음을 변화로 연결하는 서비스입니다.", keywords: ["마음 연결", "Moodturn", "무드턴"], authors: [{ name: "Moodturn Team" }], creator: "Moodturn", publisher: "Moodturn",
openGraph: { url: SITE_URL, siteName: SITE_NAME, title: "Moodturn - 감정을 이해하고, 변화로 연결합니다", images: [ { url: "/og-image.png", alt: "Moodturn - 마음을 변화하고 연결하는 서비스", }, ], },
twitter: { title: "Moodturn - 감정을 이해하고, 변화로 연결합니다", // 실제 Twitter/X 계정이 있다면: creator 필드 추가 },};변경 사항:
- URL:
moodcure.net→moodturn.net - 브랜드명:
Moodcure→Moodturn - 한글명:
무드큐어→무드턴
2. app/sitemap.ts - 사이트맵
검색엔진이 사이트를 크롤링할 때 참고하는 파일입니다.
export default function sitemap(): MetadataRoute.Sitemap { // 변경 전 // const baseUrl = "https://moodcure.net"
// 변경 후 const baseUrl = "https://moodturn.net";
const lastModified = new Date();
return [ { url: baseUrl, lastModified, changeFrequency: "daily", priority: 1, }, // ... 다른 페이지들 ];}3. app/robots.ts - 검색 크롤러 설정
export default function robots(): MetadataRoute.Robots { // 변경 전 // const baseUrl = "https://moodcure.net"
// 변경 후 const baseUrl = "https://moodturn.net";
return { rules: [ { userAgent: "*", allow: "/", }, ], sitemap: `${baseUrl}/sitemap.xml`, };}4. app/manifest.ts - PWA 매니페스트
Progressive Web App 설정입니다. 모바일에 설치할 때 보이는 이름입니다.
export default function manifest(): MetadataRoute.Manifest { return { // 변경 전 // name: "Moodcure - 마음을 변화로 연결하여 함께 성장하는 서비스", // short_name: "Moodcure",
// 변경 후 name: "Moodturn - 마음을 변화로 연결하여 함께 성장하는 서비스", short_name: "Moodturn",
description: "공감, 성장, 연결 - 마음을 변화로 연결하여 함께 성장하는 서비스", start_url: "/", display: "standalone", // ... 나머지 설정 };}5. components/structured-data.tsx - Schema.org
이 파일이 변경점이 가장 많았습니다. 여러 곳에서 도메인을 참조하고 있습니다.
전체 변경 코드 (클릭하여 펼치기)
export function StructuredData() { // Organization Schema const organizationSchema = { "@context": "https://schema.org", "@type": "Organization", // 변경 전 // name: "Moodcure", // alternateName: "무드큐어", // url: "https://moodcure.net", // logo: "https://moodcure.net/logo.png",
// 변경 후 name: "Moodturn", alternateName: "무드턴", url: "https://moodturn.net", logo: "https://moodturn.net/logo.png",
description: "사람의 마음을 변화로 연결하는 서비스", contactPoint: { "@type": "ContactPoint", // 변경 전 // email: "contact@moodcure.net",
// 변경 후 email: "team@moodturn.net", contactType: "customer service", }, };
// WebSite Schema const websiteSchema = { "@context": "https://schema.org", "@type": "WebSite", // 변경 전 // name: "Moodcure", // url: "https://moodcure.net",
// 변경 후 name: "Moodturn", url: "https://moodturn.net", description: "마음을 변화로 연결하는 서비스", };
// Service Schema const serviceSchema = { "@context": "https://schema.org", "@type": "Service", name: "마음 변화 서비스", // 변경 전 // alternateName: "Moodcure",
// 변경 후 alternateName: "Moodturn", provider: { "@type": "Organization", // 변경 전 // name: "Moodcure", // url: "https://moodcure.net",
// 변경 후 name: "Moodturn", url: "https://moodturn.net", }, };
return ( <> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema) }} /> {/* 나머지 스키마들... */} </> );}이 파일에서만 9개 인스턴스를 변경했습니다.
하나라도 빠뜨리면 검색 결과에서 잘못된 정보가 보일 수 있었습니다.
6. components/footer.tsx - 하단 정보
export function Footer() { const businessInfo = { // 변경 전 // companyName: "무드큐어", // email: "contact@moodcure.net",
// 변경 후 companyName: "무드턴", email: "team@moodturn.net",
representative: "토니", // ... 나머지 정보 };
return ( <footer> {/* 회사 정보 표시 */} </footer> );}7. components/header.tsx - 상단 로고
export function Header() { return ( <header> <Image src="/logo.svg" // 변경 전 // alt="Moodcure Logo"
// 변경 후 alt="Moodturn Logo" width={width} height={height} /> {/* 변경 전 */} {/* <span>Moodcure</span> */}
{/* 변경 후 */} <span>Moodturn</span> </header> );}8-10. 나머지 파일들
나머지 파일들도 같은 방식으로 변경하였습니다.
app/page.tsx: 페이지 콘텐츠의 이메일 주소components/particle-text-effect.tsx: 배경 애니메이션 (무드턴 특유의 텍스트 애니메이션)package.json: 프로젝트 이름
Phase 3: 빌드 테스트
모든 파일을 변경했다면 반드시 빌드를 테스트하세요.
# 빌드 실행npm run build
# 에러 확인# ✓ TypeScript 컴파일 성공# ✓ 경고 없음빌드가 성공하면 로컬에서 실행해서 확인합니다.
npm run dev확인 사항:
- 브라우저 탭 제목이 “Moodturn”인가?
- 헤더에 “Moodturn” 표시되는가?
- 이메일 링크가
team@moodturn.net인가? - 페이지 소스에서 메타 태그 확인

Phase 4: Git 커밋
모든 변경사항을 커밋합니다.
# 변경된 파일 확인git status
# 파일 추가git add .
# 커밋 메시지 작성git commit -m "리브랜딩: Moodcure → Moodturn 도메인 및 브랜드명 전환
- 도메인: moodcure.net → moodturn.net- 브랜드명: Moodcure → Moodturn- 이메일: contact@moodcure.net → team@moodturn.net- 변경 파일: 10개"
# 원격 저장소에 푸시git push origin mainPhase 5: 클라우드플레어 설정
이제 도메인 설정을 변경합니다.
1. 기존 도메인 페이지(moodcure.net) 제거
- Build > Compute & AI > Workers & Pages > 프로젝트 선택
- 상단 탭에서 Custom domains > 커스텀 도메인 목록 모두 Remove domain 클릭
클라우드플레어 도메인 제거 - 상단 탭에서 Setting > 맨 하단 프로젝트 삭제 영역 Delete 클릭
클라우드플레어 프로젝트 삭제
2. 새 Pages 프로젝트 생성 (moodturn)
- Build > Compute & AI > Workers & Pages > Created application 클릭
- Looking to deploy Pages? Get started 클릭
- GitHub 연결할 레포지토리 선택
- 빌드 설정:
- Framework: Next.js (Static HTML Export)
- Build command: npx next build
- Output: out
- Save and Deploy 클릭
3. moodturn.net 커스텀 도메인 연결
이제 “새 프로젝트”에 도메인을 붙입니다.
- Build > Compute & AI > Workers & Pages > moodturn 프로젝트 선택 > Custom domains 탭
- Set up a custom domain > moodturn.net 입력 → Activate domain 클릭
- 안내되는 DNS 레코드 적용(자동 생성 또는 수동)
- 체크:
- Custom domains에 moodturn.net가 Active
- SSL 상태가 Active/Enabled
4. DNS 레코드 적용
www.moodturn.net을 쓰려면 DNS에 www를 추가해야 합니다.
- Cloudflare DNS → Records:
- Type: CNAME
- Name: www
- Target(Content): moodturn.pages.dev
- Proxy: On(주황 구름)
- 체크:
https://www.moodturn.net접속이 되는 상태Cloudflare DNS 설정
5. www -> 루트로 301 리다이렉트 설정
www로 들어와도 최종 URL은 moodturn.net으로 리다이렉트 되어야 했습니다.
- 프로젝트 > Rules > Overview 선택
- Create rule 클릭 > Redirect Rules 선택
- Redirect from WWW to root > Preview template 클릭
- 아래 내용으로 Deploy 완료
Rule name: Redirect to moodturn.net
If incoming requests match: Type: Wildcard pattern Request URL: https://www.moodturn.net/*
Then: Redirect to: Target URL: https://moodturn.net/${1} Status code: 301 Preserve query string: ✓
Place at: Order: LastPhase 6: 검색엔진 재등록
Pages 프로젝트를 새로 만들었기 때문에, 검색엔진 입장에서는 완전히 새로운 사이트입니다.
1. Google Search Console 도메인 속성 추가
- Google Search Console 접속
- 속성 추가 클릭
- 도메인 선택
Google Search Console 속성 추가 moodturn.net입력 > 계속 클릭 후 완료- 소유권 인증 방식은 유효하여 생략
- dig TXT moodturn.net +short로 확인 완료
- moodturn.net > 색인 생성 > Sitemaps > 새 사이트맵 추가 >
sitemap.xml제출- 작업 완료. 이전에 있던 moodcure.net은 설정에서 제거했습니다.
2. Naver Search Advisor 재등록
- Naver Search Advisor 접속
- 웹 마스터 도구 > 사이트 등록 >
https://moodturn.net입력 후 등록- 네이버는 소유권 인증을 아래와 같이 진행했습니다.
인증 방식: - HTML 파일 인증
파일 위치: - 프로젝트 루트/public/naverXXXXXXXXXX.html
검증: - https://moodturn.net/naverXXXXXXXXXX.html - 단일 텍스트 응답 확인
- 웹마스터 도구 > 요청 > 사이트맵 제출
- 제출 URL:
https://moodturn.net/sitemap.xml입력 후 제출- (신규 도메인 초기 수집 안정성 확보 목적으로 제출)
마무리
Moodcure에서 Moodturn으로의 리브랜딩은 이렇게 마무리되었습니다.
특히 정식 오픈 이전에 리브랜딩을 결정한 점이 가장 큰 이점이었습니다.
- 실제 사용자 영향 없음
- 검색 인덱스 이관 부담 없음
- 기존 브랜드 자산 정리 비용 없음
- 도메인, SEO, 메타데이터를 처음부터 일관되게 설계 가능
만약 오픈 이후이고, 어느정도 사용자가 있었다면
리다이렉트 유지, 검색 신호 이관, 사용자 커뮤니케이션까지 감당해야 했을 것입니다.
이번 전환은 그런 비용을 사전에 모두 제거한 결정이었습니다.
이제 Moodturn은
도메인, 인덱싱, 브랜드 명칭이 완전히 정렬된 상태에서 출발합니다.
남은 것은 구현과 운영뿐입니다.
공유
이 글이 도움이 되었다면 다른 사람과 공유해주세요!



