AS-Flow AI – 컨텍스트 AI와 함께하는 차세대 생산성
Source: Dev.to
내가 만든 것
AS-Flow AI 라는 프리미엄 크로스‑플랫폼 생산성 애플리케이션을 만들었습니다. 사용자가 즉시 깊은 작업 상태에 들어갈 수 있도록 설계되었습니다. 파편화된 집중 문제를 다음을 결합해 해결합니다:
- 컨텍스트‑인식 포커스 모드 – 초현실적인 몰입형 환경(비, 해변, 불, 우주)으로 집중력을 높여줍니다.
- AI‑구동 플래닝 – 사용자의 에너지 수준을 기반으로 일정을 생성하는 지능형 비서.
- 시원한 크로스‑플랫폼 경험 – 데스크톱과 모바일 웹 모두에서 앱 같은 느낌으로 동작합니다.
기술 스택
- 핵심: Next.js 14 (App Router), React, TypeScript
- 스타일링: Tailwind CSS + Glassmorphism UI
- AI: 컨텍스트ual AI 에이전트(Claude) + 로컬 로직
- 상태 관리: React Context + Persistent Storage
데모
🚀 실제 서비스
https://github.com/AsamaeS/AS-Flow-AI
스크린샷
테스트 계정
Email: asmae@focusflow.ai
Password: demo123AI 툴링 실제 적용
Claude(Antigravity)를 활용해 AS‑Flow AI를 구축하면서 개발 속도가 크게 가속화되었습니다.
⚡ 10배 빠른 기능 구현
예시 요청:
“불꽃 효과와 크랙링 오디오가 포함된 Fire 포커스 모드를 추가해 주세요.”
AI 에이전트 동작:
- 프로젝트 구조(
src/data/focus-modes.ts)를 파싱 - 새로운 모드 추가
- 로열티‑프리 오디오 소스 확보
- UI 코드 생성
⏱️ 소요 시간: 3 분 (AI 없이 약 1 시간 대비)
🐛 제로‑샷 버그 수정
심각한 오류: useLanguage must be used within LanguageProvider
AI 동작:
- 전체 컴포넌트 트리를 분석
layout.tsx에서 프로바이더 래핑 문제 감지suppressHydrationWarning을 이용한 하이드레이션 안전 수정 구현
⏱️ 절감 시간: 2–3 시간
App MCP와 Uno Platform MCP 활용
AS‑Flow AI는 Next.js를 사용하지만 App MCP 철학을 따릅니다. 이를 통해 AI가 전체 애플리케이션 컨텍스트를 이해할 수 있습니다.
🧠 앱 컨텍스트 인식
AI 에이전트는 다음을 파악했습니다:
- 사용된 기술 스택(Tailwind, Lucide)
- 폴더 구조(
src/app/dashboard/...) - 새 파일을 정확히 배치해야 할 위치
이를 통해 “AS‑Flow AI”라는 브랜드명을 10개 이상의 파일에 일관되게 적용했습니다.
🛠️ AI‑가이드 아키텍처
AI는 마치 건축가처럼 행동했습니다:
FocusModeCard를 재사용 가능한 컴포넌트로 추출 제안- 오디오 플레이어에 대한
use client경계 보장 - 영구 저장소를 위한 깔끔한 서비스 레이어 생성
이는 Uno Platform MCP가 제시하는 “전체 앱 컨텍스트를 이해하는 AI”와 동일한 접근 방식입니다.
크로스‑플랫폼 도달 범위
AS‑Flow AI는 모든 환경에서 동작합니다:
- 데스크톱 → 4열 최적화 대시보드
- 모바일 → 단일 열 반응형 레이아웃
- 웹 → 모든 브라우저에서 즉시 사용 가능
- 자동 테마 → OS 다크/라이트 모드 감지
개발 경험
서프라이즈 #1 — 진짜 페어 프로그래머
시니어 엔지니어와 함께 일하는 느낌이었습니다.
예시: “사이드바 패딩을 고쳐 주세요.”
AI는 정확한 파일(Sidebar.tsx)과 정확한 클래스(p-4)를 수정했습니다.
서프라이즈 #2 — 지속적인 모멘텀
AI가 담당한 영역:
- 보일러플레이트
- 타입 정의
- i18n 사전
- 레이아웃 문제
- 하이드레이션 경고
덕분에 디자인과 사용자 경험에 집중할 수 있었습니다.
결과
프로덕션 수준의 다국어, 다크모드 지원 생산성 플랫폼을 2일 이하에 구축했습니다. 일반적으로는 몇 주가 걸리는 프로젝트였습니다.
Contextual AI Acceleration을 활용해 ❤️ 로 Asmae가 직접 제작