...
Dev Site: https://nexus.studydev.com/
1. 이 프로젝트를 왜 만들었나
...
NexusSkill은 Azure-native 아키텍처를 기반으로 한다.
컨셉에 대한 세밀화와 기획은 김현수 로부터 시작하며, 관심있는 분들을 모아 의견을 청취하여 Copilot을 통해 개발을 한다.
Frontend
Azure Static Web Apps
로그인 없이도 콘텐츠 탐색 가능
Backend API
Azure Container Apps
인증, 파이프라인 제어, 검색 API 제공
Pipeline Execution
Azure Container Apps Jobs
- GitHub 분석, AI 처리, 인덱싱을 비동기로 실행
Azure Service Bus
파이프라인 트리거 및 상태 이벤트 관리
Data Store
Cosmos DB (NoSQL)
원본 데이터와 가공된 메타데이터 분리 저장
Search
Azure AI Search
키워드 + 벡터 기반 하이브리드 검색
Email
Azure Communication Services (Email)
OTP 기반 로그인 인증
- CICD: Github Actions Workflow
- Frontend
- Backend
인프라 구조
| draw.io Diagram | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
5. 인증과 접근 방식
5.1 회원가입 없는 이메일 OTP 인증
...
일반 사용자
로그인 없이 콘텐츠 탐색 가능
로그인 사용자 - 기여자(Contributor)
내부 전용 콘텐츠 열람
콘텐츠 등록
GitHub 분석 파이프라인 실행
워크샵 경험 라벨링
- 챗봇 서비스를 통해 추천 제공 (퀄리티 검증 안됨)
...
6. 콘텐츠 흐름 예시
GitHub 레포지토리 URL 등록
분석 파이프라인 실행
README / 메타데이터 수집
기술 스택 식별
AI 기반 요약 및 분류
- 썸네일 이미지 생성
검색 인덱스 반영
사용자에게 카드 형태로 노출
GitHub 링크
데모 / 문서 / 영상 (있는 경우)난이도
/ 예상 소요 시간Star / 최근 업데이트 날짜 제공 및 정렬 제공
...
7. 이 프로젝트의 의미
NexusSkill은 단순한 웹 애플리케이션이 아니다.
...
으로 발전할 수 있는 기반을 목표로 한다.
...
8. 마무리
NexusSkill은
“좋은 NexusSkill은 “좋은 Azure 워크샵 콘텐츠는 이미 많다”는 전제에서 출발한다. 많은 콘텐츠를 공유하자.
이 프로젝트의 가치는 새로운 콘텐츠를 만드는 것이 아니라,
이미 이미 존재하는 자산을 연결하고, 이해하고, 다시 쓰게 만드는 것에 있다.
원하면 다음도 바로 만들어줄 수 있어:
...
🔹 Confluence용 한 장 요약(Executive Summary)
...
🔹 아키텍처 다이어그램(Confluence 매크로용)
...
🔹 워크샵 운영 시나리오 예시
.
9. 10일간 만들어본 후기
기획이 제일 중요
- 처음에 아이디어를 체계적으로 잡는게 중요하다.
- 유저의 흐름
- 기여자의 흐름
개발툴
- VS Code + GitHub Copilot 은 쓸만하다. OpenCode도 써보면 좋을 것 같다. 장단점 비교용
- task는 정의해 두면, backend랑 frontend랑 서버 실행시킬 때 편하다.
펼치기 코드 블럭 title .vscode/tasks.json { "version": "2.0.0", "tasks": [ { "label": "dev:backend", "type": "shell", "command": "cd backend && npm run dev", "isBackground": true, "presentation": { "panel": "dedicated", "group": "servers" }, "runOptions": { "reevaluateOnRerun": true } }, { "label": "dev:frontend", "type": "shell", "command": "cd frontend && npm run dev", "isBackground": true, "presentation": { "panel": "dedicated", "group": "servers" }, "runOptions": { "reevaluateOnRerun": true } }, { "label": "test", "type": "shell", "command": "npm test", "presentation": { "panel": "dedicated", "group": "tests" } } ] }
개발 여정
아이디어를 정리하며 기획 (1월 16일)
- 구체적이지 않을 경우, 뒤에서 다 뜯어고쳐야 하는 문제가 생길 수 있음.
- Speckit 으로 구현, 큰 건들은 Speckit, 중간 건들은 Plan 모드, 막 만들때는 Agent 모드에서 그냥 만들고 문서 싱크함.
Frontend 부터 구현: kombai 사용 (1월 17일~19일)
- 좋긴 한데, 크레딧 소진이 너무 빠름. 무료 크레딧 기반
- 큰 그림만 잡아서 활용한 후에 GitHub Copilot으로 나머지 부분 개발
Backend 구현 (1월 20일~26일)
- 로그인 구현, 이메일 OTP로 별도 개인정보 수집 안함. 사내 직원만 이메일 인증 코드 발송, studydev.com으로 도메인 인증
- nexusskill 이름 정함. 도메인은 nexus.studydev.com으로 연결
- GitHub Actions 구성(처음 CICD 다 한번에 태웠다가 프론트엔드, 백엔드 CI / CD 각각 분리)
- 목업 형태로 쓸 컨텐츠 수집하기 (ignite25-next 50 여개 컨텐츠를 Python + LLM으로 수집하여 JSON 저장)
- 목업 데이터 기반으로 카드 형태로 컨텐츠 구성하기
- 실제 데이터를 담을 수 있는 그릇 준비(cosmosdb) 사용 - 선택 이유. 건바이건으로 담아두고 활용하기에 가장 비용 효율적임.
- github repo 컨텐츠 수집 로직 작성 - GitHub URL 넣으면 데이터 크롤링 readme.md와 github api를 활용하여 각종 데이터를 수집
- 뭔가 허전해서 컨텐츠 썸네일 이미지 작성(gpt-image-1.5) 3:2 비율, 서비스 나열보다는 어떤 문제를 해결하기에 좋은지 해결점까지의 모습을 그려냄, 분류에 따라 색을 다르게 적용
- 검색 엔진(ai search) 도입하고 cosmosdb의 데이터 CRUD를 싱크함, 이때, 검색에 용이하도록 카테고리 분류 및 임베딩 적용 (이때부터, CosmosDB는 검색에 사용 하지 않음, 색인화된 정보로 검색함)
- 챗봇 서비스 도입하여 추천할 수 있도록 만듬. 인증 사용자(내부)만 쓸 수 있도록 제한을 걸어둠
- 원래 백엔드 container app 하나가 0 베이스로 시작하는건데, 콜드 부팅 때문에 1개로 올려둠. (0.5 코어 기반)
- 불필요해 보이는 코드와 인프라 제거
추가 구현할 예정
- 정적 워크샵 페이지 번역하여 등록
- 영문 워크샵을 한글 버전으로 이전 및 운영 환경 맞추기 (devcontainer 고려)
- nexus 워크샵 환경과 연동하기
주의 사항
- 다른 서비스 포함 $150/월 넘기면 안됨. 개인 계정임. 나중에 인프라 넘길 수 있으면 넘길 예정. 감시중.
...