papweb

🚀 Next.js + Firebase Hosting으로 웹사이트 제작하기

Solo.dev 2025. 1. 30. 01:37

🔥 왜 웹사이트를 만들기로 했을까?

이번에 웹사이트를 제작하게 된 이유는 구글 애드몹 문제도 있고,

개인적으로 웹 페이지가 있으면 좋겠다는 생각이 들었기 때문이다.
그리고 회사 소개와 앱 소개만 포함된 간단한 페이지면 충분하다고 판단했다.


📌 1. 사용한 템플릿 선정

Vercel의 Blog Starter Kit을 사용하기로 결정했다.
이 템플릿은 Markdown 기반으로 쉽게 편집할 수 있고, 최신 블로그 글을 메인에 표시하는 방식이다.

  • 메인 구조
    • 가장 최신 글을 메인에 가장 크게 표시
    • 그 아래에는 "More Stories" 섹션에서 다른 블로그 글들을 보여줌

사실 더 좋은 회사 소개용 템플릿이 있을지도 모르겠지만,

Markdown 기반으로 간단히 수정할 수 있다는 점이 가장 큰 장점이어서 이걸 선택했다.


📌 2. 프로젝트에서 수정한 내용

✅ 1) 메인 글 항상 "회사 소개"로 고정

현재 템플릿은 날짜(date) 기준으로 최신 글을 메인에 배치하는 방식이다​
하지만 나는 항상 "회사 소개" 글이 메인에 위치해야 한다.
따라서 HeroPost가 무조건 "회사 소개" 글을 가져오도록 수정할 예정이다.

✅ 2) 메인 동영상 추가

  • Sora로 제작한 동영상을 메인에 고정
  • 현재는 워터마크 제거 작업 중
  • 항상 가장 상단에 위치하도록 설정해야 함

✅ 3) 디자인 변경

  • 배경색 수정 (현재 다크 모드 사용 중)
  • 텍스트와 이미지 수정 → Markdown 파일을 직접 수정

✅ 4) Firebase Hosting 사용

Vercel 대신 Firebase Hosting을 사용하여 배포할 예정.
배포 방식은 firebase deploy 명령어를 사용하면 된다.


🚀 3. 결론 & 앞으로의 작업

메인에 "회사 소개" 글 고정
동영상 적용 후 테스트
디자인 수정 & 배경색 조정
Markdown 수정하여 텍스트 및 이미지 변경
Firebase Hosting에 배포

이제 코드를 수정하고 최종 배포하면 완료! 🚀