diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..9553014
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,12 @@
+# Local development defaults
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://localhost:8080
+
+# Production reference
+# NEXT_PUBLIC_BASE_URL=https://www.git-ranker.com
+# NEXT_PUBLIC_API_URL=https://www.git-ranker.com
+
+# Optional analytics / error tracking
+# NEXT_PUBLIC_ANALYTICS_ENDPOINT=
+# NEXT_PUBLIC_SENTRY_DSN=
+# SENTRY_DSN=
diff --git a/Dockerfile b/Dockerfile
index 2451738..0ea6d09 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -22,6 +22,9 @@ ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
 ENV NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
 ENV NEXT_TELEMETRY_DISABLED=1
 
+RUN test -n "$NEXT_PUBLIC_API_URL" || (echo "NEXT_PUBLIC_API_URL build arg is required" >&2 && exit 1)
+RUN test -n "$NEXT_PUBLIC_BASE_URL" || (echo "NEXT_PUBLIC_BASE_URL build arg is required" >&2 && exit 1)
+
 RUN npm run build
 
 # Stage 3: Production runner
diff --git a/README.md b/README.md
index e215bc4..5a82b01 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,64 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# git-ranker-client
 
-## Getting Started
+`git-ranker-client`는 Git Ranker의 Next.js 16 프런트엔드다. 랭킹 조회, 사용자 상세, 로그인 진입, SEO 메타데이터와 배지 링크를 제공한다.
 
-First, run the development server:
+## Requirements
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+- Node.js 20+
+- npm
+- `NEXT_PUBLIC_BASE_URL`
+- `NEXT_PUBLIC_API_URL`
+
+`NEXT_PUBLIC_BASE_URL`와 `NEXT_PUBLIC_API_URL`는 build와 runtime 모두에서 필수다. 값이 없으면 `npm run build`와 런타임 초기화가 즉시 실패한다.
+
+## Environment
+
+로컬 Next.js 실행은 `.env.local`, Docker Compose 실행은 `.env`를 사용하면 된다. 시작점으로는 [.env.example](.env.example)을 복사한다.
+
+로컬 개발 예시:
+
+```env
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://localhost:8080
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+프로덕션 예시:
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```env
+NEXT_PUBLIC_BASE_URL=https://www.git-ranker.com
+NEXT_PUBLIC_API_URL=https://www.git-ranker.com
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+선택 env:
 
-## Learn More
+- `NEXT_PUBLIC_ANALYTICS_ENDPOINT`
+- `NEXT_PUBLIC_SENTRY_DSN`
+- `SENTRY_DSN`
 
-To learn more about Next.js, take a look at the following resources:
+선택 env가 없어도 핵심 기능은 동작한다. 없으면 analytics/web vitals 전송이나 Sentry 수집만 비활성화된다.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Commands
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```bash
+npm install
+npm run dev
+npm run lint
+npx tsc --noEmit
+npm run build
+```
+
+## Docker Compose
+
+```bash
+cp .env.example .env
+docker compose up --build
+```
 
-## Deploy on Vercel
+`docker-compose.yml`과 `Dockerfile`은 `NEXT_PUBLIC_BASE_URL`, `NEXT_PUBLIC_API_URL`가 비어 있으면 즉시 실패한다.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Build And Runtime Notes
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- `JetBrains Mono`는 공식 JetBrains Mono release v2.304에서 가져온 로컬 자산을 사용한다.
+- 폰트 라이선스는 [src/fonts/JetBrainsMono-OFL.txt](src/fonts/JetBrainsMono-OFL.txt)에 보관한다.
+- locale routing과 보안 헤더는 [src/proxy.ts](src/proxy.ts)에서 처리한다.
+- public URL 정책은 [src/shared/lib/public-env.ts](src/shared/lib/public-env.ts)에서 단일 기준으로 관리한다.
diff --git a/docker-compose.yml b/docker-compose.yml
index 9e465d1..5bd17b0 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -6,8 +6,8 @@ services:
       dockerfile: Dockerfile
       args:
         # Build-time args (NEXT_PUBLIC_* are inlined during build)
-        NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
-        NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
+        NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:?NEXT_PUBLIC_API_URL is required}
+        NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL:?NEXT_PUBLIC_BASE_URL is required}
     restart: unless-stopped
     ports:
       - "3000:3000"
@@ -16,8 +16,8 @@ services:
       NODE_ENV: production
       TZ: Asia/Seoul
       # Runtime vars (for middleware/server-side code)
-      NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
-      NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
+      NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:?NEXT_PUBLIC_API_URL is required}
+      NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL:?NEXT_PUBLIC_BASE_URL is required}
     deploy:
       resources:
         limits:
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6014a78..a8f2710 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type {Metadata, Viewport} from "next";
 import localFont from "next/font/local";
-import { JetBrains_Mono } from "next/font/google";
 import Script from "next/script";
 import "./globals.css";
 import QueryProvider from "@/shared/providers/query-provider";
@@ -12,6 +11,7 @@ import { WebVitalsReporter } from "@/shared/components/web-vitals-reporter";
 import { cn } from "@/shared/lib/utils";
 import { LocaleProvider } from "@/shared/providers/locale-provider";
 import { getRequestLocale } from "@/shared/i18n/server-locale";
+import { publicBaseUrl } from "@/shared/lib/public-env";
 
 const pretendard = localFont({
     src: "../fonts/PretendardVariable.woff2",
@@ -20,13 +20,14 @@ const pretendard = localFont({
     variable: "--font-sans",
 });
 
-const jetbrainsMono = JetBrains_Mono({
-    subsets: ["latin"],
+const jetbrainsMono = localFont({
+    src: "../fonts/JetBrainsMonoVariable.ttf",
     variable: "--font-mono",
     display: "swap",
+    weight: "100 800",
 });
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://www.git-ranker.com"
+const BASE_URL = publicBaseUrl
 
 export async function generateMetadata(): Promise<Metadata> {
     const locale = await getRequestLocale()
@@ -105,7 +106,6 @@ export default async function RootLayout({
             {/* Preconnect to external origins for faster resource loading */}
             <link rel="preconnect" href="https://avatars.githubusercontent.com" />
             <link rel="dns-prefetch" href="https://avatars.githubusercontent.com" />
-            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
             <Script
                 src="https://www.googletagmanager.com/gtag/js?id=G-QKZNEY525E"
                 strategy="afterInteractive"
diff --git a/src/app/login/layout.tsx b/src/app/login/layout.tsx
index 976dd17..8da774c 100644
--- a/src/app/login/layout.tsx
+++ b/src/app/login/layout.tsx
@@ -1,7 +1,8 @@
 import { Metadata } from "next"
 import { getRequestLocale } from "@/shared/i18n/server-locale"
+import { publicBaseUrl } from "@/shared/lib/public-env"
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://www.git-ranker.com"
+const BASE_URL = publicBaseUrl
 
 export async function generateMetadata(): Promise<Metadata> {
     const locale = await getRequestLocale()
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index ce7cbd7..7b592e9 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -9,6 +9,7 @@ import { cn } from "@/shared/lib/utils"
 import { LiveTicker, TickerUpdate } from "@/shared/components/ui/live-ticker"
 import { GithubIcon } from "@/shared/components/icons/github-icon"
 import { useI18n } from "@/shared/providers/locale-provider"
+import { githubOAuthStartUrl } from "@/shared/lib/public-env"
 
 // [Data] Action 필드 제거 (User + Tier)
 const MOCK_LIVE_UPDATES: TickerUpdate[] = [
@@ -458,7 +459,7 @@ export default function LoginPage() {
     const privacyPolicy = locale === "ko" ? PRIVACY_POLICY_KO : PRIVACY_POLICY_EN
 
     const handleGithubLogin = () => {
-        window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/github`
+        window.location.href = githubOAuthStartUrl
     }
 
     const containerVariants = {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cdd2868..164eada 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,8 +2,9 @@ import type { Metadata } from "next"
 import { HeroSection } from "@/features/home/components/hero-section"
 import { GithubIcon } from "@/shared/components/icons/github-icon"
 import { getRequestLocale } from "@/shared/i18n/server-locale"
+import { publicBaseUrl } from "@/shared/lib/public-env"
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://www.git-ranker.com"
+const BASE_URL = publicBaseUrl
 
 export async function generateMetadata(): Promise<Metadata> {
     const locale = await getRequestLocale()
diff --git a/src/app/ranking/layout.tsx b/src/app/ranking/layout.tsx
index 68754f0..c87d922 100644
--- a/src/app/ranking/layout.tsx
+++ b/src/app/ranking/layout.tsx
@@ -1,7 +1,8 @@
 import type { Metadata } from "next"
 import { getRequestLocale } from "@/shared/i18n/server-locale"
+import { publicBaseUrl } from "@/shared/lib/public-env"
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://www.git-ranker.com"
+const BASE_URL = publicBaseUrl
 
 export async function generateMetadata(): Promise<Metadata> {
     const locale = await getRequestLocale()
diff --git a/src/app/robots.ts b/src/app/robots.ts
index aa8850b..c0600df 100644
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -1,6 +1,7 @@
 import { MetadataRoute } from "next";
+import { publicBaseUrl } from "@/shared/lib/public-env";
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://www.git-ranker.com";
+const BASE_URL = publicBaseUrl;
 
 export default function robots(): MetadataRoute.Robots {
   return {
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 87331a7..ef79439 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -1,9 +1,9 @@
 import { MetadataRoute } from "next"
 import type { ApiResponse, RankingUserInfo } from "@/shared/types/api"
 import { isTier } from "@/shared/types/api"
+import { publicApiBaseUrl, publicBaseUrl } from "@/shared/lib/public-env"
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://www.git-ranker.com"
-const API_URL = process.env.NEXT_PUBLIC_API_URL || "https://www.git-ranker.com"
+const BASE_URL = publicBaseUrl
 const SEO_LOCALES = ["en", "ko"] as const
 
 type SitemapRankingPage = {
@@ -53,7 +53,7 @@ const extractRankingPage = (payload: unknown): SitemapRankingPage | null => {
 }
 
 async function getRankingPage(page: number): Promise<SitemapRankingPage | null> {
-    const response = await fetch(`${API_URL}/api/v1/ranking?page=${page}&size=20`, {
+    const response = await fetch(`${publicApiBaseUrl}/ranking?page=${page}&size=20`, {
         next: { revalidate: 3600 },
         headers: {
             Accept: "application/json",
diff --git a/src/app/users/[username]/opengraph-image.tsx b/src/app/users/[username]/opengraph-image.tsx
index 6df4aba..c9a4329 100644
--- a/src/app/users/[username]/opengraph-image.tsx
+++ b/src/app/users/[username]/opengraph-image.tsx
@@ -1,6 +1,7 @@
 import { ImageResponse } from 'next/og'
 import type { ApiResponse, Tier } from '@/shared/types/api'
 import { isTier } from '@/shared/types/api'
+import { getPublicApiUrl } from '@/shared/lib/public-env'
 
 export const runtime = 'edge'
 export const alt = 'Git Ranker Profile'
@@ -71,12 +72,11 @@ const extractUserData = (payload: unknown): OgUserData | null => {
 
 export default async function Image({ params }: { params: Promise<{ username: string }> }) {
     const { username } = await params
-    const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'https://www.git-ranker.com'
 
     let user: OgUserData | null = null
 
     try {
-        const response = await fetch(`${apiUrl}/api/v1/users/${username}`, {
+        const response = await fetch(getPublicApiUrl(`/api/v1/users/${username}`), {
             next: { revalidate: 3600 }
         })
         if (response.ok) {
diff --git a/src/app/users/[username]/page.tsx b/src/app/users/[username]/page.tsx
index 210fc60..29719c7 100644
--- a/src/app/users/[username]/page.tsx
+++ b/src/app/users/[username]/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next"
 import { getUser } from "@/features/user/api/user-service"
 import { getRequestLocale } from "@/shared/i18n/server-locale"
+import { publicBaseUrl } from "@/shared/lib/public-env"
 import { UserProfileClient } from "./user-profile-client"
 
 // ISR: revalidate every 1 hour
@@ -14,7 +15,7 @@ interface PageProps {
     params: Promise<{ username: string }>
 }
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://www.git-ranker.com"
+const BASE_URL = publicBaseUrl
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
     const { username } = await params
diff --git a/src/app/users/[username]/user-profile-client.tsx b/src/app/users/[username]/user-profile-client.tsx
index a31c4e2..8f807b4 100644
--- a/src/app/users/[username]/user-profile-client.tsx
+++ b/src/app/users/[username]/user-profile-client.tsx
@@ -29,13 +29,15 @@ import { getErrorMessage } from "@/shared/lib/api-client"
 import { useEffect, useState } from "react"
 import { TIER_STYLES } from "@/shared/constants/tier-styles"
 import { useI18n } from "@/shared/providers/locale-provider"
+import { localizePathname } from "@/shared/i18n/config"
+import { getBadgeImageUrl, getPublicSiteUrl, githubOAuthStartUrl } from "@/shared/lib/public-env"
 
 interface UserProfileClientProps {
     username: string
 }
 
 export function UserProfileClient({ username }: UserProfileClientProps) {
-    const { t } = useI18n()
+    const { t, locale } = useI18n()
     const router = useRouter()
     const { data: user, isLoading, isError } = useUser(username)
     const refreshMutation = useRefreshUser()
@@ -81,8 +83,13 @@ export function UserProfileClient({ username }: UserProfileClientProps) {
     }
 
     const handleCopyBadge = () => {
-        const badgeUrl = `${process.env.NEXT_PUBLIC_API_URL || 'https://www.git-ranker.com'}/api/v1/badges/${user?.nodeId}`
-        const markdown = `[![Git Ranker](${badgeUrl})](https://www.git-ranker.com)`
+        if (!user?.nodeId) {
+            return
+        }
+
+        const badgeUrl = getBadgeImageUrl(user.nodeId)
+        const profileUrl = getPublicSiteUrl(localizePathname(`/users/${encodeURIComponent(user.username)}`, locale))
+        const markdown = `[![Git Ranker](${badgeUrl})](${profileUrl})`
         navigator.clipboard.writeText(markdown)
         toast.success(t("profile.badge.copied"))
     }
@@ -110,7 +117,7 @@ export function UserProfileClient({ username }: UserProfileClientProps) {
     }
 
     const handleGithubRegister = () => {
-        window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/github`
+        window.location.href = githubOAuthStartUrl
     }
 
     if (isLoading) {
diff --git a/src/features/user/components/badge-generator.tsx b/src/features/user/components/badge-generator.tsx
index 531e706..f54f20d 100644
--- a/src/features/user/components/badge-generator.tsx
+++ b/src/features/user/components/badge-generator.tsx
@@ -8,6 +8,7 @@ import { toast } from "sonner"
 import { cn } from "@/shared/lib/utils"
 import { useI18n } from "@/shared/providers/locale-provider"
 import { localizePathname } from "@/shared/i18n/config"
+import { getBadgeImageUrl, getPublicSiteUrl } from "@/shared/lib/public-env"
 
 interface BadgeGeneratorProps {
     nodeId: string
@@ -50,9 +51,9 @@ export function BadgeGenerator({ nodeId, username }: BadgeGeneratorProps) {
     const { t, locale } = useI18n()
     const [copied, setCopied] = useState<CopyType>(null)
 
-    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://www.git-ranker.com"
-    const badgeUrl = `${process.env.NEXT_PUBLIC_API_URL || 'https://www.git-ranker.com'}/api/v1/badges/${nodeId}`
-    const profileUrl = `${baseUrl}${localizePathname(`/users/${username}`, locale)}`
+    const badgeUrl = getBadgeImageUrl(nodeId)
+    const profilePath = localizePathname(`/users/${encodeURIComponent(username)}`, locale)
+    const profileUrl = getPublicSiteUrl(profilePath)
 
     const markdownCode = `[![Git Ranker](${badgeUrl})](${profileUrl})`
     const htmlCode = `<a href="${profileUrl}"><img src="${badgeUrl}" alt="Git Ranker Badge" /></a>`
diff --git a/src/fonts/JetBrainsMono-OFL.txt b/src/fonts/JetBrainsMono-OFL.txt
new file mode 100644
index 0000000..8bee414
--- /dev/null
+++ b/src/fonts/JetBrainsMono-OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/fonts/JetBrainsMonoVariable.ttf b/src/fonts/JetBrainsMonoVariable.ttf
new file mode 100644
index 0000000..b60e77f
Binary files /dev/null and b/src/fonts/JetBrainsMonoVariable.ttf differ
diff --git a/src/middleware.ts b/src/proxy.ts
similarity index 75%
rename from src/middleware.ts
rename to src/proxy.ts
index 1f5ea1c..9745ca9 100644
--- a/src/middleware.ts
+++ b/src/proxy.ts
@@ -7,24 +7,43 @@ import {
   normalizeLocale,
   stripLocaleFromPathname,
 } from "@/shared/i18n/config"
+import { publicApiOrigin } from "@/shared/lib/public-env"
 
 const PUBLIC_FILE = /\.[^/]+$/
 const LOCALE_COOKIE_MAX_AGE = 60 * 60 * 24 * 365
 
-function applySecurityHeaders(response: NextResponse, isDev: boolean): NextResponse {
-  const analyticsHosts = "https://www.googletagmanager.com https://www.google-analytics.com https://region1.google-analytics.com"
+function joinCspSources(...sources: string[]): string {
+  return Array.from(new Set(sources.filter(Boolean))).join(" ")
+}
 
-  const connectSrc = isDev
-    ? `'self' http://localhost:8080 ${analyticsHosts}`
-    : `'self' ${analyticsHosts}`
+function applySecurityHeaders(response: NextResponse): NextResponse {
+  const isDev = process.env.NODE_ENV === "development"
+  const analyticsHosts = [
+    "https://www.googletagmanager.com",
+    "https://www.google-analytics.com",
+    "https://region1.google-analytics.com",
+  ]
 
   const cspDirectives = [
     "default-src 'self'",
-    `script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com`,
-    "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
-    "font-src 'self' https://fonts.gstatic.com",
-    "img-src 'self' data: blob: https://avatars.githubusercontent.com https://github.com https://www.google-analytics.com",
-    `connect-src ${connectSrc}`,
+    `script-src ${joinCspSources(
+      "'self'",
+      "'unsafe-inline'",
+      isDev ? "'unsafe-eval'" : "",
+      "https://www.googletagmanager.com"
+    )}`,
+    `style-src ${joinCspSources("'self'", "'unsafe-inline'")}`,
+    `font-src ${joinCspSources("'self'")}`,
+    `img-src ${joinCspSources(
+      "'self'",
+      "data:",
+      "blob:",
+      publicApiOrigin,
+      "https://avatars.githubusercontent.com",
+      "https://github.com",
+      "https://www.google-analytics.com"
+    )}`,
+    `connect-src ${joinCspSources("'self'", publicApiOrigin, ...analyticsHosts)}`,
     "frame-ancestors 'none'",
     "base-uri 'self'",
     "form-action 'self'",
@@ -76,12 +95,11 @@ function resolveRequestLocale(request: NextRequest) {
   return normalizeLocale(localeFromHeader)
 }
 
-export function middleware(request: NextRequest) {
-  const isDev = process.env.NODE_ENV === "development"
+export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl
 
   if (shouldBypassLocaleRouting(pathname)) {
-    return applySecurityHeaders(NextResponse.next(), isDev)
+    return applySecurityHeaders(NextResponse.next())
   }
 
   const pathLocale = getLocaleFromPathname(pathname)
@@ -104,7 +122,7 @@ export function middleware(request: NextRequest) {
         maxAge: LOCALE_COOKIE_MAX_AGE,
         sameSite: "lax",
       })
-      return applySecurityHeaders(response, isDev)
+      return applySecurityHeaders(response)
     }
 
     const rewriteUrl = request.nextUrl.clone()
@@ -124,7 +142,7 @@ export function middleware(request: NextRequest) {
       sameSite: "lax",
     })
 
-    return applySecurityHeaders(response, isDev)
+    return applySecurityHeaders(response)
   }
 
   const locale = resolveRequestLocale(request)
@@ -138,7 +156,7 @@ export function middleware(request: NextRequest) {
     sameSite: "lax",
   })
 
-  return applySecurityHeaders(response, isDev)
+  return applySecurityHeaders(response)
 }
 
 export const config = {
diff --git a/src/shared/lib/api-client.ts b/src/shared/lib/api-client.ts
index edc80a5..b46508e 100644
--- a/src/shared/lib/api-client.ts
+++ b/src/shared/lib/api-client.ts
@@ -2,8 +2,9 @@ import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
 import { removeLocalStorage } from './storage-cache';
 import { translate } from '@/shared/i18n/translate';
 import type { ApiResponse } from '@/shared/types/api';
+import { publicApiBaseUrl } from './public-env';
 
-const API_BASE_URL = `${process.env.NEXT_PUBLIC_API_URL}/api/v1`;
+const API_BASE_URL = publicApiBaseUrl;
 
 // 커스텀 에러 클래스 - 서버 에러 메시지 포함
 export class ApiError extends Error {
diff --git a/src/shared/lib/public-env.ts b/src/shared/lib/public-env.ts
new file mode 100644
index 0000000..ad4bf24
--- /dev/null
+++ b/src/shared/lib/public-env.ts
@@ -0,0 +1,37 @@
+const publicEnv = {
+  NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
+  NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+} as const
+
+const getRequiredPublicEnv = (
+  name: keyof typeof publicEnv
+): string => {
+  const value = publicEnv[name]
+
+  if (!value) {
+    throw new Error(
+      `[env] ${name} is required. Set it in .env.local for local Next.js commands or .env for docker compose before starting git-ranker-client.`
+    )
+  }
+
+  try {
+    return new URL(value).origin
+  } catch {
+    throw new Error(`[env] ${name} must be a valid absolute URL.`)
+  }
+}
+
+const buildAbsoluteUrl = (origin: string, pathname: string): string => {
+  const normalizedPath = pathname.startsWith("/") ? pathname : `/${pathname}`
+  return new URL(normalizedPath, `${origin}/`).toString()
+}
+
+export const publicBaseUrl = getRequiredPublicEnv("NEXT_PUBLIC_BASE_URL")
+export const publicApiOrigin = getRequiredPublicEnv("NEXT_PUBLIC_API_URL")
+export const publicApiBaseUrl = buildAbsoluteUrl(publicApiOrigin, "/api/v1")
+export const githubOAuthStartUrl = buildAbsoluteUrl(publicApiOrigin, "/oauth2/authorization/github")
+
+export const getPublicSiteUrl = (pathname: string): string => buildAbsoluteUrl(publicBaseUrl, pathname)
+export const getPublicApiUrl = (pathname: string): string => buildAbsoluteUrl(publicApiOrigin, pathname)
+export const getBadgeImageUrl = (nodeId: string): string =>
+  buildAbsoluteUrl(publicApiOrigin, `/api/v1/badges/${encodeURIComponent(nodeId)}`)