테마
커리어 플랫폼 서비스 소개
링크드인과 유사한 개발자 커리어 관리 플랫폼 "커리어업"의 서비스 구조를 파악하고, 마이크로프론트엔드 아키텍처 적합성을 평가한다.
학습 목표
- 커리어업 플랫폼의 전체 서비스 목표와 4대 핵심 기능을 이해한다
- 각 마이크로앱(포스팅, 교육, 네트워킹, 채용)의 역할과 범위를 파악한다
- 프래그먼트(일촌 맺기, 추천 채용 공고)의 개념과 필요성을 이해한다
- 기술 스택 선정 근거와 마이크로프론트엔드 적합성을 판단할 수 있다
1. 프로젝트 소개: 주식회사 커리어업
주식회사 커리어업은 개발자를 위한 커리어 관리 및 발전 플랫폼을 만드는 가상의 스타트업이다. 링크드인, 원티드, 커리어리, 인프런 같은 서비스를 참고하되, 개발자에 특화된 기능과 경험을 제공하는 것이 목표이다.
서비스의 핵심 비전은 다음과 같다:
| 항목 | 내용 |
|---|---|
| 서비스명 | 커리어업 (CareerUp) |
| 대상 사용자 | 소프트웨어 개발자, 엔지니어 |
| 핵심 가치 | 커리어 관리, 인맥 확장, 지속 학습, 취업 기회 |
| 개발 전략 | MVP 우선 출시 후 단계적 기능 확장 |
| 계정 인증 | Auth0 SaaS 활용 (회원가입, 로그인, 로그아웃) |
2. 4개 마이크로앱 상세
커리어업의 핵심 서비스는 4개의 독립적인 마이크로앱으로 구성된다. 각 앱은 GNB(Global Navigation Bar)의 메뉴 항목과 1:1로 대응하며, URL 경로 기반으로 명확히 분리된다.
2.1 포스팅 (Posting)
SNS와 유사한 콘텐츠 공유 서비스이다. 개발자가 기술 의견, 경험, 인사이트를 작성하고 다른 사용자와 공유한다.
| 구분 | 내용 |
|---|---|
| MVP 기능 | 글 작성, 자신/인맥의 글 조회 |
| 확장 기능 | 댓글, 추천(좋아요), 퍼가기, 광고 글, 해시태그 |
| 경로 | /posting/* |
| 독립 성장 | 리치 에디터, 이미지/코드 블록 삽입, 알림 등 |
2.2 네트워킹 (Networking)
사용자 간 관계를 관리하는 인맥 서비스이다. 링크드인의 "커넥션"과 유사한 일촌 시스템을 제공한다.
| 구분 | 내용 |
|---|---|
| MVP 기능 | 일촌 목록 조회, 일촌 신청 |
| 확장 기능 | 일촌 추천, 대기 목록, 관계 분석 시각화 |
| 경로 | /networking/* |
| 독립 성장 | 추천 알고리즘, 인맥 그래프, 활동 피드 |
2.3 교육 콘텐츠 (Education)
개발자 역량 강화를 위한 학습 콘텐츠 서비스이다. 인프런이나 패스트캠퍼스와 유사한 구조를 갖는다.
| 구분 | 내용 |
|---|---|
| MVP 기능 | 교육 콘텐츠 카테고리별 목록 조회 |
| 확장 기능 | 수강 신청, 진도 추적, 수료 배지, 맞춤 추천 |
| 경로 | /education/* |
| 독립 성장 | 퀴즈/과제, 수강 이력 기반 추천, 인증서 발급 |
2.4 채용 공고 (Jobs)
기업의 채용 공고를 집계하고 지원할 수 있는 서비스이다. 원티드의 채용 기능과 유사하다.
| 구분 | 내용 |
|---|---|
| MVP 기능 | 채용 공고 목록 조회 |
| 확장 기능 | 공고 저장, 직접 지원, 결과 확인, 맞춤 추천 |
| 경로 | /jobs/* |
| 독립 성장 | 이력서 관리, 면접 일정, 기업 리뷰, 연봉 정보 |
3. 계정 서비스와 MVP 전략
3.1 계정 서비스
계정 서비스는 모든 시나리오를 아우르는 횡단 관심사(cross-cutting concern)이다. 사용자의 인증 상태, 프로필 정보, 토큰 관리 등이 모든 마이크로앱에 영향을 미친다.
| 항목 | 설명 |
|---|---|
| 회원가입/로그인 | Auth0 SaaS로 구현하여 개발 리소스 절약 |
| 토큰 관리 | Shell에서 일괄 관리, 마이크로앱에 이벤트로 전달 |
| 프로필 | 사용자 정보, 일촌 정보, 지원 이력, 수강 이력 표시 |
| 권한 제어 | 미인증 사용자의 마이크로앱 접근 차단 |
계정 화면 자체는 독립적이지만, 계정 데이터(토큰, 사용자 정보)는 모든 서비스와 밀접하게 연관된다. 따라서 Auth0를 통해 빠르게 구현하고, 인증 정보의 전파는 Shell Router 패키지의 이벤트 시스템으로 처리한다.
3.2 MVP 계획
커리어업의 MVP는 조회 위주의 기능과 간단한 쓰기 기능으로 구성한다:
| 서비스 | MVP 범위 | 후속 확장 |
|---|---|---|
| 포스팅 | 글 목록 조회, 글 작성 | 댓글, 추천, 퍼가기, 광고 |
| 네트워킹 | 일촌 목록 조회, 일촌 신청 | 추천 알고리즘, 대기 목록 |
| 교육 | 교육 콘텐츠 카테고리 조회 | 수강 신청, 진도 추적, 배지 |
| 채용 | 채용 공고 목록 조회 | 저장, 지원, 결과 확인 |
| 계정 | Auth0 기반 로그인/로그아웃 | 프로필 상세, 활동 이력 |
MVP 단계에서 중요한 것은 서비스별 디테일한 구현보다 작은 서비스로 나눴을 때 원활하게 각자 개발할 수 있는 구조를 만드는 것이다. 백엔드는 각 서비스 팀에서 Auth0 토큰 기반 인증을 처리하며, 간단한 JSON CRUD API를 제공한다.
4. 프래그먼트: 팀 간 UI 조각 공유
마이크로프론트엔드에서 **프래그먼트(Fragment)**는 한 팀이 소유한 UI 조각을 다른 팀의 앱에서 재사용하는 방식이다. 커리어업에서는 두 가지 대표적인 프래그먼트가 존재한다.
프래그먼트 설계 원칙
| 원칙 | 설명 |
|---|---|
| 오너십 명확화 | 일촌 맺기 위젯은 네트워킹 팀이, 추천 채용 공고는 채용 팀이 소유한다 |
| Module Federation 공유 | 프래그먼트는 remote로 expose하고, 필요한 앱에서 import한다 |
| 독립 배포 | 프래그먼트를 소유한 팀이 독립적으로 수정/배포할 수 있다 |
| 인터페이스 계약 | props 등의 인터페이스를 명확히 정의하여 소비 측 앱과 계약을 맺는다 |
5. 유사 서비스 비교
커리어업이 참고하는 기존 서비스들과의 포지셔닝을 비교하면 다음과 같다:
| 서비스 | 주요 특징 | 커리어업과의 차이 |
|---|---|---|
| 링크드인 | 범용 직업 네트워킹 | 커리어업은 개발자에 특화 |
| 원티드 | 채용 공고 중심 | 커리어업은 학습/네트워킹도 포함 |
| 커리어리 | 커리어 성장 커뮤니티 | 커리어업은 채용/교육 통합 |
| 인프런 | 온라인 교육 플랫폼 | 커리어업은 소셜/채용 기능 결합 |
커리어업의 차별점은 **포스팅(소셜) + 네트워킹(인맥) + 교육(학습) + 채용(취업)**을 하나의 플랫폼에서 유기적으로 연결하는 것이다. 사용자의 인맥과 관심사를 기반으로 맞춤 교육과 채용 공고를 추천하는 것이 장기 비전이다.
6. 기술 스택
커리어업 프로젝트의 기술 스택은 다음과 같이 선정한다:
| 영역 | 기술 | 선정 이유 |
|---|---|---|
| UI 라이브러리 | React 18 | 가장 대표적인 프론트엔드 라이브러리, 생태계 풍부 |
| 언어 | TypeScript | 타입 안정성, 리팩터링 안정성, IDE 지원 |
| 라우팅 | React Router | Shell의 Browser Router + 마이크로앱의 Memory Router 조합 |
| 상태 관리 | 각 팀 자율 선택 | 마이크로앱 독립성 보장 (Zustand, Jotai, Redux 등) |
| 번들러 | Webpack (앱) / Vite (패키지) | Module Federation은 Webpack, 빌드타임 패키지는 Vite |
| 모노레포 | pnpm + Turborepo | 효율적 의존성 + 병렬 빌드/캐싱 |
| 인증 | Auth0 | SaaS로 빠르게 인증 구현, Shell에서 관리 |
| 통합 방식 | Webpack Module Federation | 런타임에 마이크로앱 결합 |
7. 마이크로프론트엔드 적합성 평가
커리어업 서비스가 마이크로프론트엔드 아키텍처에 적합한지 체계적으로 평가한다.
7.1 전조증상 체크리스트 (신규 서비스 관점)
신규 서비스이므로 기존 모놀리스의 전조증상은 확인할 수 없다. 대신 서비스의 미래 성장 가능성을 기준으로 판단한다.
7.2 적합성 판단 결과
| 평가 항목 | 결과 | 근거 |
|---|---|---|
| 서비스 독립 성장 | 적합 | 포스팅, 네트워킹, 교육, 채용 각각 대규모로 발전 가능 |
| 경로 분리 | 적합 | GNB 메뉴마다 /posting, /networking, /education, /jobs로 명확 분리 |
| 팀 독립성 | 적합 | 4개 팀이 각자의 도메인에 집중하며 독립 개발/배포 가능 |
| 데이터 결합도 | 조건부 | 계정 데이터는 공유하지만 UI 수준의 결합은 프래그먼트로 해결 가능 |
| 기술 통일성 | 적합 | 전체 React 기반이므로 Module Federation 활용에 유리 |
7.3 현실적 고려사항
신규 서비스에서 마이크로프론트엔드를 시작할 때의 현실적 조건을 인식해야 한다:
- 초기 MVP 단계: 적은 리소스로 빠르게 출시해야 하므로, 모놀리스가 현실적으로 유리할 수 있다
- 성장 예측: 그러나 서비스의 가파른 성장이 예상되고, 기능별 독립 확장이 필요하다면 초기부터 분리하는 것이 장기적으로 유리하다
- 리소스 vs 아키텍처: 리소스 제약이 판단 기준이 아닌 상황이라면, 초기부터 마이크로프론트엔드로 시작하는 것이 좋은 선택이다
결론: 커리어업은 마이크로프론트엔드 아키텍처를 도입하기에 적합한 서비스이다. 4개의 핵심 서비스가 명확한 도메인 경계를 가지며, 각각 독립적으로 대규모 성장이 가능하고, 팀 단위의 독립 개발/배포가 자연스럽게 가능하다.
핵심 정리
- 커리어업은 개발자 특화 커리어 플랫폼으로, 포스팅/네트워킹/교육/채용 4대 서비스로 구성된다
- 각 서비스는 GNB 메뉴 및 URL 경로(
/posting,/networking,/education,/jobs)와 1:1 대응한다 - 프래그먼트를 통해 팀 간 UI 조각을 Module Federation으로 공유한다 (일촌 맺기 위젯, 추천 채용 카드)
- 기술 스택은 React + TypeScript + Webpack Module Federation + pnpm/Turborepo로 구성한다
- 적합성 평가 결과, 도메인 분리가 명확하고 독립 성장 가능성이 높아 MFE 아키텍처에 적합하다
- MVP 단계의 리소스 제약을 인식하면서도, 장기적 확장성을 위해 초기부터 분리 설계한다
다음 단계
다음 문서 02-설계-패턴과-서비스-분리에서는 커리어업 프로젝트의 구체적인 설계 패턴(App Shell, 인증 공유, 스타일 격리)과 URL 경로 기반 서비스 분리 기준을 수립하고, 팀 구성과 오너십 전략을 다룬다.