<aside> 💡

웹사이트 개발 프로젝트 발표 PPT 구성 및 상세 내용

1. 표지 (Title Slide)

• 프로젝트 제목 (웹사이트 이름 + 간단한 설명)
  • 우결, 우리 결혼했어요
  • 맞춤형 모바일 청첩장 제작 및 손쉬운 RSVP 관리
• 팀명 또는 팀원 이름
  • 결혼해조
• 발표 날짜
  • 2025년 2월 6일
• (선택) 웹사이트의 대표 이미지나 로고 추가

👉 Tip: 첫인상을 결정짓는 페이지이므로 깔끔한 디자인과 가독성 높은 폰트 사용

2. 프로젝트 개요 (Project Overview)

• 프로젝트의 목적 (Why?)
  • 이 프로젝트를 시작하게 된 이유
  • 해결하고자 하는 문제
  • 프로젝트의 목표
    • 맞춤형 모바일 청첩장 제작 및 손쉬운 RSVP 관리
    • 사용자가 직접 커스터마이징 할 수 있는 기능 뿐만 아니라 청첩장을 받은 사람들에게 참석 여부 조사, 축하 메세지, 실시간 포토월 기능을 제공하는 모바일 청첩장 개발
• 개발 배경 및 문제 정의
  • 현재 시장에서의 문제점
  • 기존 서비스의 한계점
  • 사용자들이 겪는 불편함
• 기대 효과
  • 이 웹사이트가 어떻게 문제를 해결할 것인지
  • 기대하는 사용자 반응
    • 커스터마이징 기능 강화: 자유롭게 기능(+순서) 및 테마 설정
    • 수신자 참여 기능 향상: 참석 여부 조사 + 데이터 확인, 축하 메시지에 사진 등록 가능
    • 사용자 접근성 확보: 모바일 최적화 UI/UX 제공, 수신자 유형별 청첩장 제작

👉 Tip: 문제를 시각적으로 표현하기 위해 데이터, 그래프, 예시 사례 등을 추가하면 효과적

3. 주요 기능 및 특징 (Key Features)

• 웹사이트의 핵심 기능
  • 주요 기능을 나열하고 설명 (각 기능에 대한 스크린샷 추가)
    • 로그인
    • 대시보드 → 만든 청첩장 확인
    • 만들기 → 기능 커스텀 및 테마 선택, 임시저장
    • 마이페이지 → rsvp 통계 및 포토톡 관리
• 차별점 및 경쟁력
  • 기존 서비스와 차별화되는 점
    • 포토톡: 방명록 + 실시간 사진 업로드
  • 경쟁 서비스와 비교 분석 (간단한 표 형태로 정리 가능)

👉 Tip: 기능별로 한 장씩 슬라이드를 구성할 수도 있음 (ex. "검색 기능" / "리뷰 기능" 등)

4. 기술 스택 (Technology Stack)

• 프론트엔드 기술 (React, Vue.js, HTML/CSS, JavaScript 등)
  • React, Typescript, Zustand, tailwindCSS, Flowbite, Vite, npm
• 백엔드 기술 (Node.js, Django, Spring Boot 등)
  • Node.js, Swagger, Sequelize ORM
• 데이터베이스 (MySQL, MongoDB, Firebase 등)
  • MariaDB
• 기타 사용한 도구 및 서비스 (GitHub, AWS, Vercel, Netlify 등)
  • GitHub, AWS, Vercel
  • 협업 툴: Notion, Slack, Zep, Figma
• CI/CD, 배포 방식 (Docker, GitHub Actions 등)

👉 Tip: 다이어그램이나 로고를 활용하여 한눈에 보기 쉽게 정리

5. 개발 과정 (Development Process)

• 프로젝트 일정 및 진행 과정
  • 프로젝트 진행 과정
    • 애자일: 데일리 스크럼 진행, 스프린트, 모각코
  • 주요 마일스톤
    • 기획 → 디자인 → 개발 → 테스트 → 배포
  • 간단한 타임라인 형태로 정리
• 프로젝트 특징
  • 폴더 구조
    • Layered Architecture 기반 폴더 구조: 유지 보수 용이성, 확장성 고려
  • 협업
    • 코드 그라운드룰: 커밋 컨벤션, PR 템플릿, 브랜치 전략 정의 및 준수
  • 다양한 도메인 경험
    • 새로운 기술 스택 및 라이브러리 적극 활용: Zustand, TailwindCSS, ORM, AWS(EC2, S3) 등
• 팀원 역할 분배
• 개발 중 어려웠던 점 및 해결 과정

👉 Tip: 프로젝트 진행 과정은 가급적 비주얼 요소(타임라인, 표, 이미지 등)를 활용

6. 데모 (Live Demo)

• 웹사이트 시연

👉 Tip:

• 시연 전에 인터넷 환경 체크 필수!
• 만약 라이브 시연이 어려우면 스크린샷 기반 데모 준비
• 실패할 경우를 대비해 백업 영상 준비

7. 성과 및 결과 (Results & Achievements)

• 현재까지의 성과
• 목표 달성 여부 </aside>

💡 예상 질문 리스트

기술 스택

1. React와 Vite를 사용한 이유는?
2. TypeScript를 도입한 이유와 장점은 무엇인가?
3. Zustand를 상태 관리 라이브러리로 선택한 이유는? Redux와 비교하면?
4. TailwindCSS와 Flowbite를 사용하면서 느낀 장점과 단점은?
5. Node.js와 Sequelize ORM을 사용한 이유는? Prisma나 다른 ORM과 비교하면?
6. MariaDB를 선택한 이유는? MySQL과의 차이점은?
7. Swagger를 활용한 API 문서화 과정은 어땠는가?
8. AWS와 Vercel을 각각 어떤 용도로 사용했는가?
9. 백엔드 배포는 어떻게 진행했는가? AWS에서 어떤 서비스를 사용했는가?

협업

1. GitHub를 활용한 협업 방식은? (브랜치 전략, 코드 리뷰 방식 등)
2. Notion, Slack, Zep을 어떻게 활용했는가?