개인 프롬프트 템플릿 플로우 저장소 ( github연동 기능 포함 - MVP 버전)

안녕하세요 리프입니다. 개발은 꽤 오래전에 관두었었고 오래동안 코딩을 손에 놓았습니다. 개발 경력은 많지 않았습니다. 그러다가 바이브코딩과 AI 툴의 등장과 함께 여러 강의를 들으면서 서비스런칭을 해 수익화에 도전해보고 싶다는 마음에 3~4개월 전부터 노마드코더 강의를 접하게 되었고 이번 기회를 통해 처음으로서비스 런칭을 해보게 되었습니다.


최종 배포 URL:

https://www.flowyprompt.com

프로젝트 설명:

FlowyPrompt는 변수 기반 프롬프트 템플릿 생성 및 관리 플랫폼입니다. 사용자의 프라이버시를 최우선으로 하여 모든 데이터를 로컬 브라우저에 AES-256 암호화로 저장하는 웹 애플리케이션입니다. 클라우드 의존성 없이 사용자의 기기에서만 데이터를 처리하여 완전한 프라이버시 보호를 제공합니다. 또한 브라우저 db 안에 있는 프롬프트 탬플릿을 개인의 github에 저장하고 다운로드하는 기능도 제공합니다.

• 대상 :
  1. 자신만의 프롬프트 템플릿을 안전하고 Private하게 저장하고 싶은사람
  2. 프롬프트의 결과까지 저장하고 그 결과를 시각화해서 저장해서 보고 싶은사람

  
  3. 프롬프트의 결과가 다음 프롬프트에 영향을 주어서 프롬프트의 여러 플로우 단게를 저장하고 싶은사람

• 효과: 반복되는 프롬프트 저장 및 활용으로 시간 단축 (옵시디언 사용자 포맷 활용가능)
  여러단계의 프롬프트를 저장 및 활용. 이미지 프롬프트 저장.
  안전한 저장 방식을 통한 DB가 해킹 위험에 노출 되어도 프롬프트는 노출되지 않음
  Github을 통한 버전관리와 프롬프트 템플릿 또는 플로우 공유

Tip : 프롬프트를 공유하고 싶다면 Private Github내에서 초대링크를 통해 공유하시면 됩니다.

• 핵심 기능(MVP) 설명:

  자동 변수 감지: {variable} 패턴을 자동으로 감지하고 UI 입력 필드를 생성
  - {{variable}} 변환제공 : 옵시디언 유저를 위함

  
  - {variable} 의 경우 FASTMCP 등의 변수 패턴과도 호환 가능

• 템플릿간의 연결을 위한 템플릿 플로우 구현 (저장 및 불러오는 기능 포함)

• 스마트 입력 필드: 플로우 빌더에서 프롬프트 템플릿의 저장된 변수를 자동으로 불러오는 기능

• 클립보드 복사: 완성된 프롬프트를 클립보드로 복사

• 마스터키를 통한 템플릿 보안

• 템플릿에 이미지 저장 기능 구현 (1MB github 제한 있음)

• github에 템플릿 업로드 다운로드 기능 구현 ( IndexDB <-> github)

• ***** 자세한 내용은 Document 페이지를 참고하시기를 바랍니다. *******

  
  

  
  

  
  

  

  POLAR SANDBOX 입력 예시
  테스트 기간에 회원 기록이 삭제가되더라도 polar.sh 샌드박스관리페이지에는 이름과 메일정보가 남기 때문에 주기적으로 삭제를 하도록 하겠습니다. 메일은 반드시 동일하게 맞춰야합니다.
  실제카드 입력 금지!
  

  

  스트라이프에서 제공하는 test 환경제공
  

  https://polar.sh/docs/integrate/sandbox

  https://docs.stripe.com/testing#cards
  참고
  
  
  기술 스택

• 프론트엔드: React 19, TypeScript, Tailwind CSS, Radix UI

• 상태 관리: React Router 7, IndexedDB

• 암호화: CryptoJS (AES-256-CBC, PBKDF2)

• 워크플로우: ReactFlow

• 배포환경 : Vercel, CloudFlare

• 메일 : Resend

• 결제플랫폼 : Polar.sh

• 정보수집 : PostHog(어느페이지 방문정보), Sendbox (오류, 버그리포트)

• Github: octokit
  
  

  • 보안 사항
    

    1. 마스터키는 메모리에만 존재

    실제 마스터키는 브라우저의 메모리(RAM)에만 저장되며, 하드디스크나 IndexedDB에는 절대 평문으로 저장되지 않습니다.

    2. 저장소에는 해시값만 보관

    IndexedDB에는 마스터키 자체가 아닌 PBKDF2로 생성된 해시값과 솔트만 저장되어, 저장소가 유출되어도 원본 키를 복원할 수 없습니다.

    3. 세션 기반 메모리 관리

    마스터키는 현재 브라우저 세션 동안만 메모리에 유지되며, 브라우저 종료나 페이지 새로고침 시 자동으로 메모리에서 제거됩니다.

    🔄 메모리 생명주기 관리

    4. 자동 메모리 정리

    사용자가 로그아웃하거나 애플리케이션을 잠그면 마스터키가 즉시 메모리에서 완전히 제거되어 무단 접근을 방지합니다.

    5. 유휴 상태 감지 및 정리

    사용자가 일정 시간 비활성 상태가 되면 자동으로 마스터키를 메모리에서 제거하여 보안을 강화합니다.

    6. 브라우저 탭 종료 시 정리

    브라우저 탭이 닫히거나 페이지가 새로고침되면 마스터키가 메모리에서 즉시 사라져 데이터 보호를 보장합니다.

    🛡️ 메모리 보안의 장점

    7. 물리적 접근 차단

    하드디스크나 저장소에 마스터키가 저장되지 않아 물리적 디스크 분석으로도 키를 추출할 수 없습니다.

    8. 메모리 덤프 공격 방지

    메모리에서 키를 사용한 후 즉시 정리하여 메모리 덤프를 통한 키 추출 공격을 차단합니다.

    9. 세션 격리 보장

    각 브라우저 세션마다 독립적인 메모리 공간을 사용하여 세션 간 키 유출을 방지합니다.

    🔐 보안 강화 메커니즘

    10. 임시 키 래핑

    필요 시에만 마스터키를 임시로 암호화하여 보관하고, 사용 후 즉시 메모리에서 제거하는 이중 보안을 제공합니다.

    11. 자동 만료 시스템

    설정된 시간이 지나면 마스터키가 자동으로 메모리에서 제거되어 장시간 무인 상태에서의 보안을 보장합니다. - 세션을 통한 유휴시간방식 사용

    12. 완전한 데이터 제어

    사용자가 원할 때 언제든지 마스터키와 모든 관련 데이터를 메모리에서 완전히 제거할 수 있는 완전한 제어권을 제공합니다
    
    
    보안상 공개하지 않는 정보

    • 구체적인 솔트 길이와 반복 횟수

    • 암호화 키 생성의 세부 알고리즘

    • 타이밍 공격 방지의 정확한 구현 방식

    • 디바이스 바인딩의 구체적인 메커니즘

    • 키 회전 과정의 세부 단계

    • 보안 검증의 정확한 로직

    • 에러 처리 및 예외 상황 대응 방식
      
      해당 서비스 특성상 개인저장소와 보안이 컨셉이기 떄문에 github은 공개하지 않겠습니다.
      
      아직 supabase데이터베이스 RLS 정책, edge function 외에는 구현이 안된 관계로 DB의 값은 X시 0분에 1시간마다 삭제됩니다. DB암호화 구현예정입니다.
      
      현재 이 프로그램은 polar.sh sandbox로 사용하고 있기 때문에 실제결제가 일어나지 않습니다.
      
      
      Github 관련 보안 사항
      
      1. 토큰 암호화 저장

      GitHub PAT를 AES-256으로 암호화하여 메모리에만 저장하고, 30분 자동 만료

      2. 평문 저장 방지

      설정에서 토큰을 [ENCRYPTED]로 표시하여 메모리에 평문으로 저장되지 않도록 차단

      3. Rate Limiting 보호

      GitHub API 제한을 준수하는 자체 Rate Limiter로 과도한 요청 방지

      4. URL 검증 시스템

      https://github.com/owner/repo 형식만 허용하는 엄격한 URL 검증

      5. 토큰 형식 검증

      ghp_(레거시)와 github_pat_(신규) 형식 지원, 최소 20자 이상 강제

      
      6. 자동 정리 시스템

      5분마다 만료된 요청 기록을 자동 정리하여 메모리 누수 방지

      7. 최소 권한 요청

      repo 스코프만 요청하여 불필요한 권한 요청 방지