본문으로 건너뛰기

한눈에 보기

💎 프로젝트 한눈에 보기: SurfAI 마지막 업데이트: 2025년 6월 29일

이 문서는 SurfAI 프로젝트가 어떤 꿈을 가지고 있는지, 중요한 생각들, 주요 기능, 그리고 목표를 자세히 설명합니다.


1. 프로젝트 꿈 (비전)

SurfAI의 가장 큰 꿈은 AI로 그림이나 영상을 만드는 것이 어렵지 않게 해서, 누구나 전문가처럼 멋진 결과물을 쉽게 만들 수 있도록 하는 것입니다.

지금까지 AI로 만드는 도구들은 복잡한 설정이나 많은 숫자들을 직접 알아야 해서 시작하기 어려웠어요. SurfAI는 이런 문제를 해결하기 위해, 기술 전문가(관리자)가 잘 만들어진 ComfyUI 작업 방식을 "틀"로 등록하면, 일반 사용자는 마치 좋은 카메라 앱에서 필터를 고르듯이, 몇 가지 쉬운 설정만 바꿔서 멋지고 좋은 결과물을 만들 수 있도록 할 거예요.


2. 중요한 생각들

SurfAI 서비스는 다음 두 가지 중요한 생각을 중심으로 만들어졌어요.

가. 작업 틀 (워크플로우 템플릿)

  • 무엇인가: 특별한 목적(예: '멋진 사람 사진 만들기', '짧은 애니메이션 영상 만들기')을 위해 가장 좋게 만들어진 ComfyUI 작업 방식의 "설계도"예요.
  • 무엇으로 되어 있나: 틀은 ComfyUI의 원래 정의 파일과, 사용자가 바꿀 수 있는 설정 지도로 되어 있어요.
  • 누가 쓰나: 관리자만 이 틀을 만들고 관리할 수 있어요. 서비스의 핵심 만들기 능력을 정하고 늘리는 역할을 해요.

나. 바꿀 수 있는 설정 (동적 파라미터)

  • 무엇인가: 워크플로우 틀 안에서 관리자가 정해준, 사용자가 직접 바꿀 수 있는 중요한 값들이에요.
  • 예시: 긍정적인 설명, 부정적인 설명, 시드, CFG, 단계, 영상의 길이초당 프레임 수 등.
  • 누가 쓰나: 사용자는 복잡한 작업 방식을 전혀 몰라도, 웹사이트의 쉬운 화면을 통해 이 설정 값들만 바꿔서 자신만의 특별한 결과물을 만들 수 있어요.

3. 주요 기능

가. 관리자 기능

  • 작업 틀 관리 (만들고, 보고, 고치고, 지우기): 관리자만 쓸 수 있는 페이지에서 작업 틀을 만들고, 보고, 고치고, 지울 수 있어요.
  • 역할에 따른 접근 제한: 특정 이메일 주소를 가진 사용자에게만 관리자 권한을 줘서 시스템을 안전하게 관리해요.
  • (나중에) 사용자 및 서비스 사용량 보기: 전체 사용자 목록을 보고, 서비스가 얼마나 쓰이는지 같은 통계를 볼 수 있는 화면을 더 만들 수 있어요.

나. 일반 사용자 기능

  • 쉬운 로그인: 이메일/비밀번호로 가입하거나 Google 계정으로 쉽게 로그인할 수 있어요.
  • 틀을 이용한 만들기: 공개된 작업 틀 목록에서 원하는 스타일을 고르고, 간단한 입력으로 그림/영상 만들기를 요청해요.
  • 실시간 진행 상황 확인: WebSocket을 통해 만드는 작업의 진행 상황, 기다리는 순서, 그리고 만드는 중인 미리 보기 결과물을 실시간으로 볼 수 있어요.
  • 내 갤러리 (기록): 자신이 만든 모든 결과물을 "기록" 페이지에서 보고 관리할 수 있어요.
  • 결과물 관리: 갤러리에서 각 결과물을 크게 보고 자세한 정보(사용한 설정 등)를 확인하고, 고화질 원본 파일을 다운로드하거나 지울 수 있어요.

4. 기술 도구들 (Tech Stack)

  • 웹사이트: Next.js, React, TypeScript, Tailwind CSS
  • 서버: NestJS, TypeScript, TypeORM, PostgreSQL
  • 시스템: Docker, Google Cloud Run, Cloudflare R2, Nginx
  • 문서: Docusaurus

5. 기술 목표

  • 안정성과 확장성: 모든 서비스를 Docker 상자에 넣고 Google Cloud Run에 배포해서, 사람들이 많이 들어와도 자동으로 늘어나고 줄어드는 안정적인 시스템을 만들어요.
  • 보안: JWTHttpOnly 쿠키를 이용한 안전한 로그인, CSRFWAF로 나쁜 공격 막기, 역할에 따른 접근 제한 등 여러 겹의 보안 시스템을 적용해요.
  • 자동화된 작업: GitHub Actions를 이용해서 프로그램 코드가 바뀌면 자동으로 테스트하고 배포하는 시스템을 만들어요.
  • 관리하기 쉽게: 웹사이트와 서버를 분명하게 나누고, 각 안에서도 부분들의 역할을 명확히 나눠서 깨끗한 시스템 구조를 만들어요.
  • 살아있는 문서: Docusaurus를 통해 모든 문서를 프로그램 코드와 함께 Git으로 관리해요. 이렇게 하면 항상 최신 상태의 정확한 문서를 모든 팀원들이 쉽게 볼 수 있어요.