목적:
SEO1순위 목표를 유지하면서 초기 체감 속도와 상호작용성을 균형 있게 확보한다.
0) 🧩 페이지 유형 이해
🔎 핵심 질문
사용자가 페이지를 열었을 때,완성된 본문이 바로 오나? 아니면페이지 뼈대만 오고 브라우저가 나중에 내용을 채우나?
1) 📄 정적(Static)
- 빌드할 때
HTML을 미리 만들어 둔다. 누구에게나 같은 내용이 보인다.- 속도가 매우 빠르고 검색엔진이 읽기 좋다.
- 내용이 바뀌면 다시 만들어서 배포한다.
- 예: 랜딩, 소개, 가격, 도움말, 공지.
2) ⚡ 동적(Dynamic)
- 로그인 상태, 시간, 권한 같은 상황에 따라 내용이 달라진다.
- 서버가 매 요청마다 결과를 만들거나, 브라우저가 데이터를 불러 채운다.
- 개인 정보가 섞이므로 보통 검색 노출을 막는다.
- 예: 대시보드, 설정, 편집기, 주문 내역.
3) 🔀 하이브리드(Hybrid)
- 틀(골격)은 미리, 실제 데이터는 나중에 붙이는 방식.
- 첫 화면 인지 속도를 올리고, 세부는 점점 채운다.
- 예: 달력 그리드는 즉시 보이고, 내 일정은 뒤늦게 채워짐.
🔧 우리 프로젝트에 대입
- 랜딩(
/)은 정적에 가깝다 → 검색 노출의 중심.- 로그인/회원가입(
/login,/signup)은 동적 → 노출 금지.- 기능 선택(
/setup)은 하이브리드(초기 상태는 서버, 편집은 브라우저).- 기능 배치(
/setup/placement)는 동적(상호작용 위주) → 노출 금지.- 플래너(
/planner)는 동적(개인 대시보드) → 노출 금지.
🔎 검색(SEO)과 공개 범위
- 퍼블릭 정보만 인덱싱 허용. 개인화·설정·편집 화면은
noindex로 차단.- 언어가 둘이면
/ko,/en처럼 별도 경로로 나누고hreflang(KO/EN)을 붙인다.
🤔 자주 헷갈리는 포인트
- 동적이라고 무조건 느린 것은 아니다. 서버에서 일부를 먼저 그리면 첫 화면은 빠르게 보여줄 수 있다.
- 정적 페이지도 나중에 데이터를 더 가져와 붙일 수 있다(하이브리드).
- “검색 최적화 =
SSG만”은 아니다. 중요한 건 처음부터 읽을 수 있는 본문이 있느냐다.
🧭 결정 흐름(처음 만들 때 이렇게 판단)
- 이 페이지가 검색 유입용인가? → 맞다면 정적/하이브리드 쪽을 먼저 검토.
- 로그인 여부에 따라 내용이 달라지나? → 그렇다면 동적(
SSR/CSR)로 간다.- 변경 빈도는 어떠한가? → 낮음은
SSG, 주기적이면ISR, 수시로 바뀌면SSR/CSR.- 드래그·편집 같은 상호작용이 핵심인가? →
CSR비중을 높인다.
📒 용어 미리 알기(낯선 단어 빠르게 이해)
- 빌드: 코드를 배포 가능한 산출물로 만드는 과정.
- 런타임: 사용자가 접속해 실제로 코드가 실행되는 때.
- 캐시: 한 번 만든 결과를 다시 쓰기 위해 저장해 두는 것.
CDN: 전 세계에 퍼진 서버에서 가까운 곳에서 파일을 내려주는 네트워크.- 인덱싱: 검색엔진이 페이지를 수집해 색인에 넣는 것.
noindex: 이 페이지는 색인에 넣지 말라는 신호.- 페이지 셸: 메뉴·레이아웃 같은 공통 뼈대.
1) 렌더링 방식 개요
🧱 SSG
완성된
HTML을 미리 만들어CDN에 올려두고 그대로 보여준다.
처음 접속해도 본문이 바로 보인다.
변경이 생기면 다시 만들어 배포한다.
랜딩처럼 모두에게 같은 내용을 보여줄 때 가장 효율적이다.
- 동작 순서: 미리 생성 →
CDN배포 → 사용자에게 즉시 제공- 잘 맞는 경우: 랜딩, 소개, 가격, 도움말, 공지
- 장점: 초기 표시가 빠르고
SEO가 강하다. 운영이 단순하다.- 주의: 내용이 바뀌면 재생성/재배포가 필요하다.
- 우리 적용 예:
/랜딩
🔁 ISR
정적 페이지를 주기적으로 자동 새로 만든다.
첫 방문은 기존 버전을 보여주고, 백그라운드에서 최신본을 만들어 다음 방문부터 반영된다.
블로그·뉴스 같은 “가끔 갱신”에 적합하다.
- 동작 순서: 기존본 제공 → 뒤에서 새 본문 생성 → 다음 요청에 최신본
- 잘 맞는 경우: 블로그/뉴스, 기능 소개, FAQ
- 장점:
SSG의 속도에 신선도를 더한다.- 주의: 아주 자주 바뀌는 데이터에는 부적합하다.
- 우리 적용 예: 랜딩을 하루 1회 갱신처럼 운용 가능
🖥️ SSR
요청이 올 때마다 서버가 데이터를 모아 즉석에서
HTML을 만든다.
로그인 상태나 권한에 따른 개인화 화면에 유리하다.
첫 화면을 크롤러가 바로 읽을 수 있어 인덱싱도 수월하다(개인 정보는 제외).
- 동작 순서: 요청 도착 → 서버에서 패칭/조립 →
HTML응답- 잘 맞는 경우: 대시보드, 마이페이지, 주문 내역
- 장점: 개인화된 첫 화면을 즉시 보여준다.
- 주의: 서버 부하·응답 지연 관리가 필요하다.
- 우리 적용 예:
/planner의 첫 요약을 스트리밍 전SSR로 구성
🧑💻 CSR
페이지 뼈대를 먼저 보여주고, 브라우저가
API로 데이터를 받아 화면을 만들며 상호작용을 처리한다.
드래그·편집 같은 동작이 많은 화면에 강하다.
- 동작 순서: 셸 표시 → 브라우저 데이터 요청 → 화면 채우기
- 잘 맞는 경우: 편집기, 보드, 설정, 배치 화면
- 장점: 초기 이후 체감이 매우 빠르고 상호작용이 부드럽다.
- 주의: 프리렌더가 없으면
SEO가 약하다. 로딩/에러/빈 상태 설계가 중요하다.- 우리 적용 예:
/login,/signup,/setup/placement
💧 Streaming SSR
가벼운 부분을 먼저 보여주고, 느린 데이터는 뒤에 합류시키는 방식이다.
대시보드 같은 복합 화면에서 첫 인지 속도를 크게 올린다.
- 동작 순서: 요약/헤더 먼저 스트리밍 → 위젯별로 점진 완성
- 잘 맞는 경우: 위젯이 많은 대시보드, 리포트/인사이트
- 장점:
LCP가 좋아지고 “먼저 보이는” 체감이 생긴다.- 주의: 경계와 폴백을 잘 쪼개야 복잡도가 폭주하지 않는다.
- 우리 적용 예:
/planner첫 화면 요약은 먼저, 각 모듈은 뒤이어 채우기
2) 페이지별 렌더링 전략
🏠 / — 랜딩 페이지
선택한 렌더링 —
SSG+ISR(24h)왜 이렇게 쓰나
랜딩은 모든 방문자에게 동일한 정보를 제공하는 진입점이므로, 빌드 시점에 완성
HTML을 생성해CDN에서 제공하는SSG가 최적이라 판단한다.
이 방식은 크롤러가 자바스크립트 실행 없이 본문을 수집하므로 인덱싱 품질과 초기 표시 성능이 높아진다.
콘텐츠 변경 주기가 길기 때문에ISR을 24시간 주기로 설정해 운영 부담을 줄이면서 신선도를 확보한다.
사용자가 체감하는 효과
첫 화면이 지체 없이 나타나며 핵심 문구와
CTA가 즉시 보인다.
이미지와 폰트의 레이아웃 변동이 억제되어 스크롤 흐름이 안정적으로 느껴진다.
소셜 미리보기 정보가 일관되게 노출되어 브랜드 신뢰가 향상된다.
운영 메모
제목·설명·
OG이미지·canonical·hreflang(KO/EN)및Organization·WebSite스키마를 정적HTML에 포함한다.
이미지 크기를 명시해CLS를 방지하고 폰트는swap전략을 적용한다.
ISR실패 시 이전 캐시본을 유지하도록 구성해 안정성을 확보한다.
🔐 /login — 로그인 페이지
선택한 렌더링 —
CSR왜 이렇게 쓰나
로그인은
입력 → 검증 → 오류안내가 반복되는 상호작용 중심 화면이므로 브라우저가 직접 상태를 관리하는CSR이 가장 단순하고 일관되게 동작한다.
검색 노출 가치가 없으므로 서버 렌더링의 이점이 제한적이라 판단한다.
사용자가 체감하는 효과
입력 즉시 형식 오류가 표기되고 버튼의
로딩·비활성화상태가 즉각 반응한다.
포커스 이동과 스크린리더 안내가 자연스럽게 이어져 사용 흐름이 매끄럽게 느껴진다.
운영 메모
noindex로 색인을 차단한다.
중복 제출 방지를 위해 버튼 잠금을 적용하고, 요청 실패 시 재시도 경로와 중립적 오류 메시지를 제공한다.
계정 존재 여부가 추정되지 않도록 응답 문구를 설계한다.
✉️ /forgot-password — 비밀번호 찾기(이메일 입력)
선택한 렌더링 —
CSR왜 이렇게 쓰나
이메일 입력과 전송 요청이 중심인 폼 상호작용 화면이다.
SEO/성능 측면에서 서버 렌더 이점이 거의 없어CSR로 단순화한다.
사용자가 체감하는 효과
입력 즉시
유효성·오류가 표시되고 전송 중 상태가 명확하다.
성공/실패 토스트로 다음 단계를 바로 이해한다.
운영 메모
noindex. 전송 실패/성공 메시지, 재시도 지침, 스팸 방지(재요청 쿨다운) 적용.
🔢 /forgot-password/verify — 비밀번호 찾기: 인증번호 입력
선택한 렌더링 —
CSR왜 이렇게 쓰나
4자리 코드 입력, 재발송 타이머, 즉시 검증 등 실시간 상태 전환이 핵심이라
CSR이 적합하다.
사용자가 체감하는 효과
자릿수 자동 이동, 남은 시간 표시, 오입력 시 즉시 피드백으로 헤맬 일이 줄어든다.
운영 메모
noindex. 재발송 쿨다운UI와 접근성(숫자 키패드)을 적용한다.
🔒 /forgot-password/reset — 비밀번호 재설정
선택한 렌더링 —
CSR왜 이렇게 쓰나
비밀번호/확인 입력과 가시성 토글, 규칙 검증 등 즉시 피드백이 중심이라
CSR로 구성한다.
사용자가 체감하는 효과
강도 게이지, 일치 여부 실시간 표기, 완료 후 자연스러운 리다이렉트로 흐름이 매끄럽다.
운영 메모
noindex. 토큰 만료 처리, 중복 제출 방지.
🆕 /signup — 회원가입(진입/선택)
선택한 렌더링 —
CSR왜 이렇게 쓰나
소셜/일반 선택과 라우팅이 전부라 클라이언트 전용이 가장 간단하다.
사용자가 체감하는 효과
버튼 반응이 즉시이고, 선택 상태가 유지되어 길을 잃지 않는다.
운영 메모
noindex. 소셜 로그인 실패 시 되돌아오기 경로를 유지한다.
🧑 /signup/basic/name — 회원가입: 이름 입력 (1/4)
선택한 렌더링 —
CSR왜 이렇게 쓰나
스텝 인디케이터, 실시간 입력 검증 등 폼 상호작용이 중심이라
CSR이 자연스럽다.
사용자가 체감하는 효과
다음 버튼 활성/비활성 상태가 명확하며, 오류가 필드 인접에 뜬다.
운영 메모
noindex. 로컬 임시 저장으로 이탈 후 복귀 시 입력을 복원한다.
📧 /signup/basic/email — 회원가입: 이메일 입력 (2/4)
선택한 렌더링 —
CSR왜 이렇게 쓰나
형식 검증 + 중복 확인(비동기)이 핵심으로 브라우저 흐름이 자연스럽다.
사용자가 체감하는 효과
중복 결과가 즉시 표시되고, 오류 메시지가 필드 인접에 표시된다.
운영 메모
noindex. 중복 확인 호출 디바운스, 동일 세션 재검사 캐시를 적용한다.
🔐 /signup/basic/password — 회원가입: 비밀번호 설정 (3/4)
선택한 렌더링 —
CSR왜 이렇게 쓰나
강도 표시/규칙 충족도/가시성 토글 등 즉시 피드백이 중요하다.
사용자가 체감하는 효과
규칙 충족도 게이지, 일치/불일치 실시간 표기로 시행착오를 줄인다.
운영 메모
noindex. 자동완성/클립보드 정책을 점검한다.
📝 /signup/basic/terms — 회원가입: 약관 동의 (4/4)
선택한 렌더링 —
CSR왜 이렇게 쓰나
체크박스 상태, 모달 상세보기 등 클라이언트 상호작용이 대부분이라
CSR이 적합하다.
사용자가 체감하는 효과
필수 동의 누락 시 즉시 안내되고, 완료 흐름이 매끄럽다.
운영 메모
noindex. 약관 버전/타임스탬프를 로깅한다.
🧩 /setup — 기능 선택
선택한 렌더링 — 혼합(초기
SSR+ 편집CSR)왜 이렇게 쓰나
진입 시점에 계정 상태와 보유 모듈 등 초기 개인화 정보를 즉시 보여줄 필요가 있어
SSR로 첫 화면을 구성한다.
선택·미리보기·색상 변경은 클릭 즉시 반응이 핵심이라CSR로 이어 받아 끊김 없는 편집 경험을 제공한다.
사용자가 체감하는 효과
화면 진입과 동시에 현재 설정이 보이고, 선택·해제·미리보기 전환·테마 변경이 지연 없이 반영된다.
사용자는 시도와 결과 사이의 간격이 짧다고 느낀다.
운영 메모
개인화 데이터는 짧은
TTL로 캐시하거나 비캐시로 처리한다.
저장은 디바운스로 묶어 호출 수를 줄이고, 실패 시 이전 상태로 안전하게 롤백한다.
noindex를 유지한다.
🎨 /setup/[module] — 모듈별 디자인 선택
선택한 렌더링 — 혼합(초기
SSR+ 편집CSR)왜 이렇게 쓰나
현재 모듈의 선택 상태/프리뷰를 서버에서 먼저 그려 진입 가시성을 확보한다.
디자인 카드 전환/프리뷰는 즉시 반응이 중요하므로CSR에 맡긴다.
사용자가 체감하는 효과
현재 선택이 바로 표시되고, 디자인 전환이 끊김 없이 보인다.
운영 메모
noindex. 선택 상태 낙관적 반영, 실패 시 롤백을 준비한다.
📐 /setup/layout — 기능 배치 (대시보드 구성)
선택한 렌더링 —
CSR왜 이렇게 쓰나
드래그·리사이즈·스냅·충돌 감지 등 실시간 편집이 전부 브라우저에서 이뤄진다.
사용자가 체감하는 효과
12×6 그리드 스냅, 겹침 가이드, 자동 저장으로 끊김 없는 편집이 가능하다.
운영 메모
noindex. 자동 저장 주기·복구 전략, 히스토리(되돌리기) 기능을 고려한다.
📊 /planner — 나만의 플래너(완성)
선택한 렌더링 — Streaming
SSR+CSR왜 이렇게 쓰나
여러 위젯과 데이터 소스가 동시에 존재하는 화면이라 서버가 요약과 헤더를 먼저 스트리밍해 초기 가시성을 확보한다.
각 모듈(일간·주간·월간·투두·습관·메모)은 입력과 체크가 잦아CSR로 하이드레이션해 상호작용 응답성을 보장한다.
사용자가 체감하는 효과
진입 즉시 오늘의 요약 카드가 보이고 이어서 모듈이 순차적으로 완성된다.
체크·편집·드래그가 지연 없이 반응해 바로 사용할 수 있다는 인상을 준다.
운영 메모
모듈 단위로 로딩 경계를 분리해 느린 데이터가 전체 화면을 지연시키지 않도록 한다.
데이터는 짧은 재검증 주기로 신선도를 유지하고, 과도한 호출은 배치 처리로 제어한다.
로컬 저장을 병행해 오프라인에서도 최근 상태를 확인하게 하고, 개인정보를 포함하므로noindex를 유지한다.
