{"@context":"https://schema.org","@type":"HowTo","@id":"https://bkamp.ai/es/recipes/6bb24bd1-bfe0-45bd-a135-02ef8985aeb6","name":"Línea de salida","description":"Se trata de un servicio web de estructuración de la ejecución que ayuda a los usuarios a comenzar sugiriendo una secuencia mínima de acciones mediante inteligencia artificial para reducir la sensación de agobio justo antes de empezar.","url":"https://bkamp.ai/es/recipes/6bb24bd1-bfe0-45bd-a135-02ef8985aeb6","image":"https://media.bkamp.ai/uploads/recipe_thumbnail/39f59622-128c-414e-9b4b-5190661517c1/0fa24dab-68c4-4831-8592-ac44f5861a28.jpeg","inLanguage":"es-ES","datePublished":"2026-01-30T13:14:43.082264Z","dateModified":"2026-03-12T16:50:06.265602Z","author":{"@type":"Person","name":"박민수_8d576e","url":"https://bkamp.ai/es/users/박민수_8d576e"},"publisher":{"@type":"Organization","name":"bkamp","url":"https://bkamp.ai"},"educationalLevel":"초급","category":"개발","step":[{"@type":"HowToStep","position":1,"name":"기획서","text":"

🚩 팀 이름

👉 StartLine

👥 구성원

👉 박민수

🛠️ 구성원 역할

👉 👑 PM/기획, 🎨 프론트엔드/UX, ⚙️ AI 로직 설계

📝 프로젝트 주제

👉 프로젝트를 시작하지 못해 막막한 순간, AI가 시작 직전용 4단계 실행 순서를 자동 생성해 착수를 돕는 웹 기반 실행 구조화 서비스

🚀 프로젝트 선정 배경

👉 많은 사람들이 프로젝트나 과제를 시작해야 할 때 막막함을 경험하지만, ADHD 성향을 가진 사용자들은 이러한 어려움을 훨씬 더 빈번하고 강하게 겪습니다. 뇌과학 및 인지심리학 연구에 따르면 ADHD는 지식이 부족해서가 아니라 집행 기능의 불안정성과 관련이 깊으며, 특히 무엇을 먼저 해야 할지 결정하고 행동을 개시하는 능력에서 취약성이 나타난다고 알려져 있습니다. 기존의 투두 리스트나 플래너 서비스는 할 일을 저장하고 정리하는 데 초점을 두지만, 여전히 사용자가 직접 순서를 판단해야 한다는 인지 부담을 남깁니다. 본 프로젝트는 이러한 시작 직전의 구조적 공백을 해결하기 위해, 사용자가 프로젝트 주제만 입력하면 AI가 착수에 필요한 최소 실행 순서를 대신 정리해주는 웹 환경을 제공하고자 기획되었습니다.

🎯 프로젝트 구현 목표

프로젝트 주제 기반 4단계 실행 시퀀스 자동 생성
사용자가 거시경제 정책 분석 프로젝트, 글로벌 공급망 리스크 평가 보고서 작성과 같은 프로젝트 주제를 입력하면, AI가 해당 작업을 바로 시작하기 위해 필요한 상위 4단계 실행 흐름을 생성합니다. 이 단계들은 전체 계획이 아닌 시작 직전의 실행 구조에 초점을 둡니다.
각 단계별 하위 행동 단위 제시
생성된 각 상위 단계에는 2~3개의 하위 행동이 함께 제시됩니다. 이 하위 단계는 자료 목록 정리, 핵심 질문 정의, 초안 구조 만들기와 같이 즉시 수행 가능한 행동 단위로 구성되어, 사용자가 추가 판단 없이 바로 실행에 옮길 수 있도록 설계됩니다.
왜 이 순서인지에 대한 한 줄 근거 제공
각 상위 단계에는 선행 정보가 필요하기 때문, 범위를 먼저 줄여야 이후 작업이 명확해지기 때문, 빠른 피드백을 받을 수 있는 단계이기 때문과 같이 설명 가능한 기준에 기반한 근거 문장이 함께 제공됩니다. 이를 통해 사용자는 AI의 순서를 납득할 수 있고, 막연한 불안 없이 착수할 수 있습니다.
사고를 닫지 않기 위한 유연한 단계 시각화 설계
화면에는 항상 4단계 구조가 존재하지만, 현재 단계만 선명하게 강조되고 이후 단계로 갈수록 흐릿하게 표현됩니다. 이는 사용자가 모든 단계를 동시에 분석하며 부담을 느끼지 않도록 하기 위한 장치입니다. 동시에 이 구조는 절대적인 계획으로 고정되는 것이 아니라, 사용자가 작업을 진행하면서 새로운 아이디어나 방향 전환이 떠오를 경우 언제든 수정·재구성할 수 있도록 설계됩니다. 즉, AI가 시작을 돕기 위한 최소 구조를 제공하되, 사용자의 확산적 사고와 새로운 연결을 방해하지 않는 유연한 실행 틀을 목표로 합니다.

이 서비스는 계획을 세우는 도구가 아니라, 프로젝트를 시작하는 데 필요한 인지적 구조를 대신 만들어주는 실행 보조 환경을 목표로 합니다.

"},{"@type":"HowToStep","position":2,"name":"💡 프로젝트의 진행 상황을 공유해 주세요.","text":"

🏗️ 현재 구현 진척도

👉 전체 기획 대비 약 65% 구현 완료

메인 랜딩 화면(주제 입력 → 시작) UI 완성
Gemini API 연동을 통한 프로젝트 주제 기반 4단계 흐름 자동 생성 기능 구현 완료
생성된 단계를 시각적 Flow 노드 구조로 표현하는 화면 구현 완료
특정 단계 클릭 시 해당 단계의 세부 사고 확장 화면(Detail Screen) 전환 기능 구현 완료
API Key를 사용자 로컬에 저장하여 재사용하는 로직 구현 완료

현재는 서비스의 핵심 흐름(입력 → AI 흐름 생성 → 단계 선택 → 세부 브레인스토밍 화면)까지 동작하는 상태이며,

브레인스토밍 영역의 사용자 입력 저장 기능은 아직 구현 전입니다.

📐 설계 및 구조도 (Architecture)

👉 서비스 흐름 구조 요약

[사용자 흐름]

사용자가 프로젝트 주제 입력
Gemini API를 통해 4단계 실행 흐름 생성
생성된 단계가 Flow Map 형태로 시각화
특정 단계 클릭 → 해당 단계의 세부 브레인스토밍 화면으로 이동
AI가 제공한 사고 확장 프롬프트를 기반으로 사용자가 생각을 이어가는 구조

[시스템 구조]

프론트엔드: 단일 HTML 기반 SPA 구조
AI 연동: Google Gemini API (REST 호출)
API Key: 사용자 입력 후 LocalStorage에 저장하여 클라이언트 측에서 직접 호출
현재 DB 및 백엔드 서버는 사용하지 않고 있으며, 추후 브레인스토밍 메모 저장 기능 확장을 고려 중

📸 주요 화면 스크린샷 / 시연 (Work in Progress)

$\"스크린샷$ $\"스크린샷$

메인 입력 화면
- “Flow Map” 타이틀과 함께 프로젝트 주제 입력창 제공
- 시작 버튼 클릭 시 AI 분석 진행
Flow 단계 화면
- AI가 생성한 4단계가 원형 노드 형태로 시각화
- 현재 선택된 단계만 선명하게 강조되고, 나머지는 흐리게 처리되는 집중 모드 UI 구현
세부 브레인스토밍 화면
- 선택한 단계의 제목 및 해당 단계의 중요성(rationale) 표시
- 체크리스트가 아닌, 사고를 확장시키는 형태의 브레인스토밍 프롬프트 문장들 표시

🛠️ 기술 스택 및 라이브러리👉

Frontend: HTML, Vanilla JavaScript
Styling: Tailwind CSS + Custom CSS
Font: Google Fonts (Inter)
AI 연동: Google Gemini API (REST 방식)
상태 저장: Browser LocalStorage (API Key 저장용)

🚨 해결 중인 고민 (Troubleshooting)

UX 방향성 관련 고민
- 이 서비스는 일반적인 생산성/관리 도구가 아니라 “시작을 돕는 사고 흐름 도구”에 가깝습니다.
- 기능을 추가할수록 기존의 플래너/관리툴과 유사해질 위험이 있어,
  “브레인스토밍 확장”과 “과도한 관리 기능 추가” 사이의 균형을 고민 중입니다.
브레인스토밍 결과의 저장 여부
- 현재는 세션 기반 사고 확장에 집중하고 있으나,
  사용자 메모를 저장해 ‘사고의 연속성’을 제공하기 위해
  Supabase 등의 BaaS 도입을 검토 중입니다.

AI 프롬프트의 품질 조정

너무 구체적인 ‘할 일 목록’이 아닌,
사고를 유도하는 ‘생각 프롬프트’가 나오도록 프롬프트 설계를 계속 다듬고 있습니다.

"}],"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":457},{"@type":"InteractionCounter","interactionType":"https://schema.org/BookmarkAction","userInteractionCount":0}],"mainEntityOfPage":{"@type":"WebPage","@id":"https://bkamp.ai/es/recipes/6bb24bd1-bfe0-45bd-a135-02ef8985aeb6"}}

Línea de salida

Propuesta de proyecto

💡 Por favor, comparte el progreso del proyecto.

Step Roadmap

댓글 0개

Línea de salida

Propuesta de proyecto

💡 Por favor, comparte el progreso del proyecto.

Step Roadmap

댓글 0개

Línea de salida

Propuesta de proyecto

💡 Por favor, comparte el progreso del proyecto.

Step Roadmap

댓글 0개

Línea de salida

Propuesta de proyecto

💡 Por favor, comparte el progreso del proyecto.

Step Roadmap

댓글 0개