Solation.net 블로그 개설 과정

배경

개인 블로그 겸 포트폴리오 사이트를 만들기로 결정. 개발자로서의 활동, 하모니카 오케스트라 활동, 독서록, 개인 관리 등을 통합할 중심 사이트가 필요했다. 옵시디언을 주력 노트 도구로 쓰고 있어서, 마크다운 기반으로 글을 올릴 수 있는 블로그를 목표로 했다.

전체 구상

외부 공개 영역

블로그 (옵시디언 마크다운 → 자동 게시)
포트폴리오 (개발 이력, 하모니카 활동)
오케스트라 사이트 (공연 일정, 연습곡/음원 레퍼런스)

내부 관리 영역 (비공개)

가계부, 일정 관리
축의금/조의금 관리
독서록, 후기, 공부 기록
권한 분리 (관리자, 배우자)

기술 스택 결정

| 항목 | 선택 | 이유 | |---|---|---| | 프레임워크 | Next.js (App Router) | 정적 블로그 + 동적 관리 페이지 모두 가능, SEO 우수 | | 언어 | TypeScript | 타입 안정성, Cursor 등 AI 도구와 궁합 좋음 | | 스타일링 | Tailwind CSS | 빠른 UI 개발, Next.js와 기본 통합 | | DB | PostgreSQL (Supabase) | 글 검색, 태그, 가계부 등 전부 커버 | | 배포 | Vercel | GitHub push → 자동 배포, HTTPS 자동, 무료 티어 | | DNS | Cloudflare | 도매가 판매, DNS 관리 편리 | | 도메인 | solation.net | Cloudflare에서 직접 구매 |

도메인 관련 학습 내용

도메인 확장자 선택

.com, .dev, .net, .me 등 기능적 차이 없음
가격은 [[#도메인 가격 구조|레지스트리에 따라 다름]]
.dev는 구글이 관리, HTTPS 강제 (HSTS preload)
.net은 Verisign 관리, .com과 동급의 안정성
피할 것: .tk, .ml, .ga (무료 도메인, 스팸 많아 신뢰도 낮음)

도메인 가격 구조

도메인 구매 비용은 세 곳으로 나뉜다:

ICANN — 국제 도메인 관리 기구, 소액 수수료
레지스트리 — 해당 확장자 관리 회사의 도매가 (가격 차이의 핵심)
레지스트라 — 판매처 마진 (Cloudflare, Namecheap 등)

레지스트리마다 가격을 자유롭게 정할 수 있어서 확장자별 가격이 다르다. .com은 미국 정부 계약으로 인상 상한이 있어 안정적. 일부 신생 확장자는 첫해 미끼 가격 후 갱신 시 급등하므로 갱신 가격 확인 필수.

도메인은 구매가 아니라 1년 단위 임대. 갱신하지 않으면 유예 기간 후 소실.

도메인 구매처 비교

Cloudflare — 도매가 그대로, 첫해=갱신가 동일, DNS 관리 통합 → 최추천
Namecheap — 저렴, 대부분 확장자 취급, WHOIS 프라이버시 무료
Squarespace (구 Google Domains) — 구글이 사업 이관, 가격 상승
가비아, 호스팅케이알 — .kr 필요 시, 글로벌 도메인은 비싼 편

HTTPS

HTTP에 SSL/TLS 인증서를 붙여 암호화한 것
Vercel 배포 시 Let's Encrypt 인증서 자동 발급/갱신 → 신경 쓸 것 없음
NAS 직접 운영 시에는 Let's Encrypt + Certbot으로 직접 설정 필요
AdSense, SEO 모두 HTTPS 필수

실제 세팅 과정

1단계: 도메인 구매

Cloudflare에서 solation.net 구매
Cloudflare에서 직접 구매했으므로 DNS 네임서버 변경 불필요

2단계: 개발 환경 설치 (Windows)

Git 설치

https://git-scm.com 에서 다운로드
설치 옵션 전부 기본값

Node.js 설치

https://nodejs.org 에서 LTS 버전 다운로드
설치 후 VS Code를 재시작해야 npx 명령어 인식됨 (경로 갱신 필요)

코드 에디터

VS Code 사용 (Node.js/Next.js 생태계 표준)
IntelliJ Ultimate도 WebStorm 기능 포함이라 가능하지만, 프론트엔드 커뮤니티 자료가 VS Code 기준
확장 프로그램: ESLint, Prettier, Tailwind CSS IntelliSense

3단계: Next.js 프로젝트 생성

cd C:\Users\본인유저명\Documents
npx create-next-app@latest solation-blog
# recommended defaults → Yes 선택
cd solation-blog
npm run dev
# http://localhost:3000 에서 확인

트러블슈팅

npx 명령어 인식 안 됨 → VS Code 완전 종료 후 재시작으로 해결
Exiting 되며 프로젝트 생성 안 됨 → 선택지에서 화살표 키로 선택 후 Enter (마우스 아님)
fatal: not a git repository → git init 먼저 실행 필요
Author identity unknown → git config --global 로 이메일/이름 등록

4단계: GitHub 연결

git init
git add .
git config --global user.email "본인이메일"
git config --global user.name "본인이름"
git commit -m "first commit"
git remote add origin https://github.com/glglwjswls/solation-blog.git
git branch -M main
git push -u origin main
# 브라우저 인증 창에서 GitHub 로그인

5단계: Vercel 배포

https://vercel.com/new 에서 GitHub 저장소 import
solation-blog 선택 → Deploy
자동으로 빌드 및 배포, .vercel.app 임시 주소 생성

6단계: 커스텀 도메인 연결

Vercel Settings → Domains → solation.net 추가
Vercel이 안내하는 DNS 레코드를 Cloudflare에 추가
Cloudflare에서 Proxy status를 **DNS only (회색 구름)**으로 설정
연결 완료 후 solation.net으로 접속 확인

다음 할 일

[ ] 집 컴퓨터(Windows, Mac)에 개발 환경 세팅 → [[Solation.net 개발 환경 세팅 가이드]]
[ ] 메인 페이지 디자인 및 구현
[ ] 개발일지 페이지 구조 만들기
[ ] 옵시디언 마크다운 렌더링 구현
[ ] 이 글을 블로그 첫 포스트로 발행