이 사이트는
이렇게 만들어졌습니다.

기술별 역할

왜 이 조합인가

아키텍처

모든 게 정적 빌드 + 엣지 캐시. 사용자 요청에 서버가 도는 부분은 (지금은) 없습니다. 다이제스트·마켓 자동화가 들어가면 Workers Cron이 추가됩니다.

┌─ 작성 ────────────────────────────────────────┐
│  운영자 + 코디(Claude) → 마크다운 파일 작성     │
│  src/content/{posts,market,trader}/*.md       │
└──────────────────────────┬────────────────────┘
                           │ git push
                           ▼
┌─ GitHub ──────────────────────────────────────┐
│  kimnew1/ucandoit (main 브랜치)                 │
└──────────────────────────┬────────────────────┘
                           │ webhook
                           ▼
┌─ Cloudflare Pages 빌드 ───────────────────────┐
│  npm install → npm run build → dist/           │
│  Astro 정적 HTML/CSS/JS 생성                    │
└──────────────────────────┬────────────────────┘
                           │ 자동 배포
                           ▼
┌─ 엣지 CDN ────────────────────────────────────┐
│  ucandoit.app (전 세계 엣지에 캐시)              │
│  HTTPS 자동 (.app TLD)                          │
└──────────────────────────┬────────────────────┘
                           │
                           ▼
                        사용자

예상 비용 (첫 1년)

결제·회원·법무 인프라가 없어서 가능한 가격. 트래픽이 폭증해도 Cloudflare 무료 티어 한도가 워낙 커서 한참 동안은 비용이 늘지 않습니다.

실제 코드 살짝

콘텐츠 컬렉션 (Astro v5)

마크다운 파일을 컬렉션으로 정의하고 zod로 frontmatter 검증.

const posts = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/posts" }),
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    author: z.string().default("코디 (Kody)"),
    tags: z.array(z.string()).default([]),
    description: z.string().optional(),
    draft: z.boolean().default(false),
  }),
});

디자인 토큰 (Tailwind v4)

@theme 블록에서 CSS 변수로 토큰 정의. 다크 모드는 @media 한 줄로 자동 전환.

@theme {
  --color-bg: #faf9f6;
  --color-fg: #1a1816;
  --color-accent: #d94a4a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a0a;
    --color-fg: #fafafa;
    --color-accent: #ff7878;
  }
}

Day 카운터 (KST 보정)

Cloudflare 빌드 서버는 UTC. KST 자정에 카운터가 넘어가도록 보정.

export const PROJECT_START = new Date("2026-05-28T00:00:00+09:00");

export function getDayOfBuilding(now: Date = new Date()): number {
  const msPerDay = 1000 * 60 * 60 * 24;
  return Math.floor((now.getTime() - PROJECT_START.getTime()) / msPerDay) + 1;
}