깃헙 커밋을 기술 블로그로 변환하는 앱
Written by Sangmin on June 30, 2024
스택
- python
- langchain
- streamit
- fast api
- Next.js
- github api
- paypal api/webhook
- antrhopic claude api
- chat-gpt
- stripe api/webhook
배경 설명
개발자로서 코드를 작성하는 것만큼이나 중요한 것이 자신의 작업을 문서화하고 공유하는 것이다. 하지만 개발과 동시에 블로깅을 하는건 쉬운일이 아니다. 어떻게 하면 이 과정을 좀 더 쉽게 만들 수 있을까 고민하다 GitBlog를 만들게 되었다.
해결하고자 한 문제점
- 코딩에 집중하느라 블로깅할 시간이 부족함
- 기술적 내용을 글로 표현하는 것이 어려움
- 일관된 블로깅 습관을 유지하기 힘듦
왜 해결하고자 하는가
개발자의 성장과 커리어 발전에 있어 자신의 작업을 공유하고 문서화하는 것은 매우 중요하다. 블로깅은 자신의 지식을 정리하고, 다른 개발자들과 소통하며, 개인 브랜딩을 구축하는 데 큰 도움이 된다.
기대하는 점
- 개발자들의 블로깅 시간 절약
- 더 많은 개발자들이 자신의 작업을 공유하도록 독려
- 기술 커뮤니티 내 지식 공유 활성화
- 개발자들의 포트폴리오 구축 지원
개발 포인트
이번 개발에서는 단순히 crud를 만드는거에서 좀 더 나아가 여러 기능들을 구현할 수 있었다.
결제 구현 (PayPal 및 Stripe)
사용자들에게 다양한 결제 옵션을 제공하기 위해 PayPal과 Stripe API를 통합했다. Webhook을 이용해 실시간 결제 상태 업데이트와 구독 관리를 구현했다.
AI 기술 적용
처음으로 AI 기술을 적용해 보았다. Anthropic의 Claude API와 OpenAI의 ChatGPT API를 사용하여 커밋 메시지를 자연스러운 블로그 포스트로 변환하는 기능을 구현했다. 이 과정에서 AI에 대한 기본적인 이해와 효과적인 프롬프트 작성 방법을 학습했다.
GitHub API 활용
GitHub API를 사용하여 사용자의 커밋, 저장소, 조직 정보를 가져오는 기능을 구현했다. 이를 통해 사용자의 개발 활동을 정확히 파악하고 관련 정보를 블로그 포스트에 반영할 수 있었다.
파이썬 streamlit, langchain, fast api
배포된 버전에서는 사용하지않았지만 AI 기술을 적용할때 파이썬으로 테스트를 했다. 그 과정에서 스트림릿을 처음 써봤고 이를 fast api로 서버를 구축해서 데이터를 전송하는걸 구현했다. 또 실제 개발에서는 사용하지않았지만 langchain을 사용해봤다. claude v3 버전 이상이랭체인에서 지원이 안되는것 같아서 결국에는 직접 anthropic api를 사용하긴했지만 랭체인을 사용해본 것도 재밌는 경험이었다.
개발 과정
-
기획 및 요구사항 정의
- 사용자 페르소나 설정
- 핵심 기능 정의
- UI/UX 디자인 초안 작성
-
기술 스택 선정
- Frontend: Next.js (React 프레임워크)
- Backend: Next.js API 라우트
- 결제: PayPal API, Stripe API
- AI: Anthropic Claude API, ChatGPT API
- 버전 관리: GitHub API
-
개발 환경 설정
- Next.js 프로젝트 초기화
- 필요한 라이브러리 및 의존성 설치
-
핵심 기능 구현
- GitHub 연동 및 커밋 데이터 가져오기
- AI를 이용한 블로그 포스트 생성 로직 개발
- 결제 시스템 통합
-
UI 개발
- 반응형 디자인 적용
- 사용자 경험 최적화
-
테스트 및 디버깅
- 단위 테스트 및 통합 테스트 수행
- 사용자 피드백 수집 및 반영
-
배포 및 모니터링
- 클라우드 플랫폼에 애플리케이션 배포
- 성능 모니터링 및 로그 분석 시스템 구축
이번 프로젝트를 통해 최신 웹 기술과 AI를 결합하여 실제 문제를 해결하는 솔루션을 개발하는 귀중한 경험을 쌓았다.