Flutter 기반 포트폴리오 커뮤니티 웹 개발기

https://porpolio-web-community-f3d4a.web.app/

1. 프로젝트 개요('24.06.11~13)

Flutter와 Firebase를 활용해 사용자들이 자신의 포트폴리오를 작성하고 공유할 수 있는 커뮤니티형 포트폴리오 웹앱을 개발했습니다.

사용자는 다음과 같은 기능을 수행할 수 있습니다:

• 로그인 및 회원가입 (Firebase Auth)
• 포트폴리오 블록 추가/편집/삭제 (카테고리/블록/세부 항목 구성)
• 포트폴리오 조회수 기반 정렬
• 사용자별 포트폴리오 PDF 다운로드 또는 공유
• 검색 및 무한 스크롤 탐색 기능
• Firestore 기반 실시간 데이터 연동

2. 주요 기술 스택

구분	사용 기술
프론트엔드	Flutter (Web/Mobile Responsive)
상태관리	Provider
백엔드	Firebase Firestore, Firebase Auth
배포	Firebase Hosting
문서 출력	pdf 패키지를 이용한 포트폴리오 PDF 생성 및 다운로드

---

3. 핵심 기능 및 구현 방식

✅ 사용자 인증

• Firebase Authentication을 통해 Email 로그인 지원
• 로그인한 사용자는 본인의 포트폴리오만 편집 가능

✅ 포트폴리오 구조

• PortfolioCategory → PortfolioBlock → BlockDetail 계층으로 구성
• 각 항목은 드래그 앤 드롭 또는 순서 변경 가능
• 텍스트, 이미지(얘는 아직) 타입 지원
  

✅ Firestore 연동

• users/{userId}/portfolioCategories 하위에 카테고리 및 블록 저장
• user_profiles에는 사용자 프로필(name, email, url 등)과 함께 viewCount 저장
• portfolios/{userId}에는 PortfolioSummary 저장하여 검색 및 탐색에 활용
  

✅ PDF 생성

• 사용자 요청 시 pdf 패키지를 이용해 포트폴리오 전체를 PDF로 구성
• 웹에서는 자동 다운로드, 모바일에서는 공유 메뉴 호출

---

4. 난관 및 해결 과정

문제 상황	해결 방법
Firebase 데이터 구조 설계	Firestore Subcollection을 활용해 구조화
모바일/웹의 PDF 처리 차이	dart:html vs path_provider + share_plus 플랫폼 분기 처리
로그인 여부에 따른 편집 권한	Firebase Auth와 userId를 비교하여 조건 분기
사용자 정의 정렬, 검색	Provider에서 상태 관리 및 필터링 처리

---

5. 향후 계획(언제할지는 모르겠음;)

• 댓글 및 피드백 기능 추가
• 인기 포트폴리오 자동 랭킹
• 다국어 지원 (i18n)
• SEO 최적화

---