라디 (Life Designer)

당신만의 루틴으로 더 나은 삶을 디자인하세요!

📋 프로젝트 정보

• 프로젝트명: 라디 (Life Designer)
• 프로젝트 설명: 라디 앱의 홍보 및 소개를 위한 랜딩 페이지로, 사용자들이 루틴 관리 앱의 주요 기능과 특징을 쉽게 이해할 수 있도록 구성된 웹 애플리케이션입니다.
• 개발 기간: 2024.10 ~ 2024.11
• 배포 주소: https://life-designer-web-omega.vercel.app/
• 앱 다운로드:
  • Google Play
  • App Store

🎯 프로젝트 소개

라디(Life Designer)는 사용자가 자신만의 루틴을 만들고 관리하며 효과적인 라이프디자인을 경험할 수 있도록 도와주는 루틴 관리 앱입니다. 이 웹사이트는 라디 앱의 주요 기능과 특징을 소개하고, 사용자들이 앱을 다운로드할 수 있도록 안내하는 랜딩 페이지 역할을 합니다.

주요 기능

• 반응형 디자인: 모바일부터 데스크톱까지 모든 기기에서 최적화된 경험 lighthouse 100점 목표
• SEO 최적화: 검색 엔진 최적화를 통한 노출 향상

🚀 시작 가이드

요구 사항

• Node.js: v18 이상
• npm: v8 이상 (또는 yarn, pnpm)

설치 및 실행

# 레포지토리 클론
git clone https://github.com/gunhee0421/life-designer-web.git

# 디렉토리 이동
cd life-designer-web

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

# 프로덕션 서버 실행
npm start

🛠 기술 스택

Frontend

• Framework:
• Language:
• UI Library:
• Styling:

배포 및 인프라

• Container:
• Web Server:
• Cloud:
• Hosting:

📱 화면 구성

메인	소개 화면 일부

🏗 아키텍처

디렉토리 구조

life-designer-web/
├── app/
│   ├── components/            # 재사용 가능한 컴포넌트
│   ├── fonts/                # 폰트 파일
│   ├── styles/               # 스타일 파일
│   ├── globals.css           # 전역 스타일
│   ├── layout.tsx            # 루트 레이아웃
│   └── page.tsx              # 메인 페이지
├── public/                   # 정적 파일
├── Dockerfile                # Docker 설정
├── next.config.mjs           # Next.js 설정
├── tailwind.config.ts        # Tailwind CSS 설정
├── tsconfig.json             # TypeScript 설정
└── package.json              # 프로젝트 의존성

🔧 주요 기능 상세

1. 반응형 디자인

• Tailwind CSS의 sm, md, lg, xl, 2xl 브레이크포인트를 활용한 완전한 반응형 디자인
• 모바일부터 대형 데스크톱까지 모든 화면 크기에 최적화

2. Intersection Observer 기반 애니메이션

• SectionAnimationContainer 컴포넌트를 통한 스크롤 기반 애니메이션
• 요소가 뷰포트에 진입할 때 부드러운 페이드인 효과
• 지연 시간(delay) 및 임계값(threshold) 커스터마이징 가능

3. SEO 최적화

• Next.js의 Head 컴포넌트를 활용한 메타 태그 관리
• 각 섹션별 최적화된 title과 description
• Open Graph 태그를 통한 소셜 미디어 공유 최적화
• Google Search Console 연동

4. 이미지 최적화

• Next.js Image 컴포넌트를 활용한 자동 이미지 최적화
• AVIF 및 WebP 포맷 지원으로 빠른 로딩 속도
• Lighthouse 최적화를 위한 이미지 포맷 변환

5. 성능 최적화

• 이미지 lazy loading
• 폰트 preload
• 코드 스플리팅 및 최적화된 번들 크기

🚢 배포

Docker를 사용한 배포

# Docker 이미지 빌드
docker build -t life-designer-web .

# Docker 컨테이너 실행
docker run -p 3000:3000 life-designer-web

AWS EC2 배포

1. EC2 인스턴스에 Docker 설치
2. Nginx를 통한 리버스 프록시 설정
3. HTTPS 인증서 설정 (Let's Encrypt)
4. 도메인 연결 및 DNS 설정