Realays 개발 일지: 시작

Realays 허브 사이트를 개발하면서 겪었던 과정들과 기술적 의사결정을 기록으로 남기고자 합니다. 이 첫 번째 글에서는 프로젝트의 시작 배경과 기술 스택 선정 이유에 대해 다룹니다.

1. 프로젝트 배경

Realays는 다양한 웹 서비스를 하나의 브랜드로 통합하고 사용자에게 일관된 경험을 제공하기 위해 시작되었습니다. 초기에는 각 서비스가 개별적으로 존재했지만, 이를 아우르는 허브(Hub) 사이트의 필요성이 대두되었습니다. 단순히 링크를 모아두는 페이지가 아니라, Realays의 브랜드 가치와 비전을 전달할 수 있는 공간이 필요했습니다.

2. 기술 스택 선정 (Tech Stack)

Realays 허브 사이트 개발을 위해 선정된 모던 웹 기술 스택

빠르고 효율적인 개발과 유지보수성을 고려하여 다음과 같은 Modern Web Stack을 선정했습니다.

Frontend Framework: Astro + React

이 프로젝트의 가장 큰 특징은 Astro를 메인 프레임워크로 채택했다는 점입니다.

• Why Astro?: 허브 사이트는 콘텐츠 중심(Content-focused)의 웹사이트입니다. 초기에 로딩해야 할 자바스크립트를 최소화하는 Astro의 ‘Island Architecture’가 성능 최적화에 유리하다고 판단했습니다.
• Why React?: 동적인 상호작용이 필요한 컴포넌트(예: 언어 선택기, 모바일 네비게이션 등)에는 익숙하고 생태계가 풍부한 React를 사용했습니다.

Language: TypeScript

프로젝트의 규모가 커질수록 타입 안정성은 중요합니다. TypeScript를 도입하여 런타임 에러를 사전에 방지하고, 코드의 가독성과 개발 생산성을 높였습니다.

Styling: Tailwind CSS

빠른 프로토타이핑과 일관된 디자인 시스템 구축을 위해 Tailwind CSS를 사용했습니다. 유틸리티 클래스 기반의 스타일링은 CSS 파일의 크기를 줄이고, 다크 모드 구현 등을 매우 간편하게 만들어줍니다.

Deployment: Vercel

Vercel은 Astro와의 호환성이 뛰어나며, 전 세계 에지 네트워크를 통해 사용자에게 빠른 속도로 콘텐츠를 전달할 수 있습니다. 또한 CI/CD 파이프라인이 자동화되어 있어 배포 과정이 매우 간편합니다.

3. 앞으로의 계획

허브 사이트의 1차 오픈은 시작에 불과합니다. 앞으로 다음과 같은 작업들을 계획하고 있습니다.

1. 서비스 통합 강화: Dalendar, FruitsFace, Style AI 등 각 서비스 간의 연동을 강화하여 단절 없는 사용자 경험(Seamless UX)을 제공할 것입니다.
2. 기술 블로그 활성화: 개발 과정에서 겪은 문제 해결 경험, 기술적 챌린지 등을 블로그를 통해 공유하며 개발 커뮤니티와 소통하고자 합니다. 앞으로의 여정도 꾸준히 기록하며 공유하겠습니다. 많은 관심 부탁드립니다.

개발 과정에서 마주한 도전 과제

1. 다국어(i18n) 구현

허브 사이트는 처음부터 글로벌 사용자를 타겟으로 했기 때문에, 한국어, 영어, 일본어 3개 언어를 지원해야 했습니다.

선택한 접근 방식

• Astro의 i18n 라우팅 기능 활용
• JSON 기반 번역 파일 관리
• 각 언어별 별도 폴더 구조 (/en, /ko, /ja)

겪었던 문제

• SEO 문제: 각 언어별 canonical URL 설정
• 라우팅 복잡도: 언어별 동적 라우팅 처리
• 번역 일관성: 기술 용어의 통일

2. 정적 사이트 생성 최적화

Astro는 정적 사이트 생성(SSG)을 기본으로 하지만, 대량의 페이지를 빌드할 때 시간이 오래 걸렸습니다.

최적화 전략

// astro.config.mjs에서 병렬 빌드 설정
export default defineConfig({
  build: {
    inlineStylesheets: "auto",
    split: true,
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ["react", "react-dom"],
          },
        },
      },
    },
  },
});

결과: 빌드 시간 30% 단축

3. Dark Mode 구현

고려사항

• 사용자 선호도 저장 (localStorage)
• 시스템 설정 자동 감지
• 깜빡임 없는 부드러운 전환

구현 코드 스니펫

// 페이지 로드 전 theme 적용 (FOUC 방지)
const theme =
  localStorage.getItem("theme") ||
  (window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light");
document.documentElement.classList.toggle("dark", theme === "dark");

기술적 의사결정의 배경

Astro vs Next.js vs Gatsby

기준	Astro	Next.js	Gatsby
성능	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
학습 곡선	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
커뮤니티	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
유연성	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

선택 이유: 콘텐츠 중심 사이트에서 Astro의 성능과 유연성이 가장 적합했습니다.

TypeScript 도입의 장단점

장점

• 런타임 에러 사전 방지
• IDE 자동 완성 지원 향상
• 리팩토링 시 안전성 증가
• 팀 협업 시 코드 가독성 향상

단점 (그리고 해결)

• 초기 설정 복잡도 → boilerplate 템플릿 활용
• 타입 정의 시간 소요 → 점진적 타입 도입
• 빌드 시간 증가 → SWC, esbuild 활용하여 해결

성능 측정 및 개선

Lighthouse 점수

초기:

• Performance: 72
• Accessibility: 88
• Best Practices: 83
• SEO: 91

최적화 후:

• Performance: 98
• Accessibility: 100
• Best Practices: 100
• SEO: 100

주요 개선 사항

1. 이미지 최적화: WebP 포맷 + lazy loading
2. 폰트 최적화: font-display: swap + preload
3. CSS 최적화: Critical CSS 인라인 삽입
4. JavaScript 최적화: Code splitting + tree shaking

배포 파이프라인

CI/CD 자동화

# GitHub Actions 워크플로우 예시
name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run build
      - uses: vercel/deploy-action@v1

배포 전략

• Preview Deployments: PR마다 자동 미리보기
• Automatic Rollbacks: 빌드 실패 시 자동 복구
• Edge CDN: 전 세계 저지연 배포

향후 개선 계획

단기 (1-3개월)

1. 성능 모니터링 강화

   • Real User Monitoring (RUM) 도입
   • Core Web Vitals 지속 추적

2. 콘텐츠 관리 개선

   • Markdown 에디터 통합
   • 블로그 포스트 자동 생성 워크플로우

3. SEO 최적화

   • Open Graph 이미지 자동 생성
   • RSS Feed 개선

중기 (3-6개월)

1. 사용자 참여 기능

   • 댓글 시스템 (Giscus)
   • 검색 기능 (Algolia)
   • 뉴스레터 구독

2. 성능 극한 최적화

   • View Transitions API 활용
   • Partial Hydration 전략
   • Service Worker 캐싱

3. 접근성 향상

   • 키보드 네비게이션 개선
   • 스크린 리더 최적화
   • WCAG 2.1 AA 준수

장기 (6개월+)

1. AI 기능 통합

   • 개인화 콘텐츠 추천
   • 자동 번역 지원 확대
   • 챗봇 기반 고객 지원

2. 커뮤니티 플랫폼

   • 사용자 생성 콘텐츠 지원
   • 포럼 기능
   • 이벤트 관리 시스템

교훈과 인사이트

1. 성능과 개발 경험의 균형

초기에는 “최신 기술 = 최고의 선택”이라고 생각했지만, 실제로는 팀의 숙련도와 프로젝트 요구사항이 더 중요했습니다.

2. 문서화의 중요성

코드보다 주석과 README가 더 가치 있을 때가 많습니다. 특히 다국어 프로젝트에서 번역 가이드와 기술 문서는 필수입니다.

3. 점진적 개선

처음부터 완벽한 사이트를 만들려 하지 말고, **MVP (Minimum Viable Product)**를 빠르게 출시한 후 사용자 피드백을 받으며 개선하는 것이 효과적입니다.

4. 커뮤니티의 힘

Astro, Vercel, Tailwind CSS 모두 훌륭한 커뮤니티를 가지고 있습니다. 막히는 부분이 있을 때 GitHub Discussions나 Discord를 적극 활용했습니다.

마무리하며

Realays 허브 사이트 개발은 단순한 웹사이트 제작이 아니라, 브랜드 가치를 전달하고 사용자 경험을 극대화하는 과정이었습니다.

앞으로도 기술 블로그를 통해 개발 과정의 도전과 해결책을 투명하게 공유하며, 개발 커뮤니티에 기여하고자 합니다.

다음 개발 일지에서는:

• 블로그 댓글 시스템 구현 과정
• Algolia 검색 통합
• 성능 모니터링 대시보드 구축

궁금한 점이 있으시다면 언제든지 문의하기를 통해 연락 주세요!

많은 관심과 피드백 부탁드립니다. 🚀