Shaula
AI 활용프로토타입

별이음
흩어진 생각을 이어, 작은 실험으로.

생각을 많이 적는 것과 실행할 아이디어를 만드는 것은 다릅니다. 조각을 연결하고, 나에게 필요한 기능을 정하고, AI에 전달할 제작 프롬프트와 작은 실험으로 이어가는 도구를 만들고 있습니다.

앱 열기 ↗ (새 탭)GitHub ↗ (새 탭)

왜 만들었나요?

불편했던 점

파편화된 생각들을 합쳐 아이디어를 만들고 싶어서 시작했습니다. 아무렇지 않게 스쳐 가는 상념들 속에서도, 어쩌면 빛나는 아이디어를 건질 수 있지 않을까 하고요.

바꾸려 한 방식

생각을 조합하는 일은 AI에게 맡기고, 그중 무엇을 고를지 판단은 사람이 합니다.

무엇을 하나요?

반응형 UI · 즉각 반응하는 선택
모바일에서 드래그 없이 카드를 연결·해제하고 삭제할 수 있도록 수정했습니다. AI 응답을 기다리는 동안에도 카드 조작은 계속됩니다.
DB 구조 · 브라우저와 계정 기록 분리
가입 전 기록을 보존하고, 로그인 후 선택한 작업을 Supabase 계정 공간에 저장하도록 구현했습니다. 서로 다른 기기의 저장이 충돌하면 자동 덮어쓰기를 멈춥니다.
API · 제안과 검증의 책임 분리
AI가 제안한 아이디어는 연결 근거를 확인한 뒤 사람이 선택합니다. 실험의 완료 여부는 확인 기준과 실제 관찰 기록으로 판단합니다.
로그인 · 최소한의 정보로 연결
네이버와 카카오는 회원 ID 기반 서버 인증을 구현했습니다. 실제 제공자 설정과 운영 로그인 검증은 별도 확인 중입니다.

만든 도구: Next.js · Supabase · Vercel

실제 화면

생각 연결 · 화면 보기
생각 카드 세 장 중 두 장을 선으로 이어 ‘교육 준비 체크리스트’ 아이디어를 만든 별이음 캔버스
생각 연결 — 카드를 골라 잇고, 직접 구체화할지 AI 후보를 받을지 고릅니다. 화면을 누르면 크게 볼 수 있습니다.
제작 프롬프트 · 화면 보기
이름·사용자·목표·핵심 기능과 출발점이 된 생각이 정리된 별이음 제작 프롬프트 화면
제작 프롬프트 — 다섯 질문의 답과 출발점이 된 생각이 AI에 전달할 요청문으로 정리됩니다. 화면을 누르면 크게 볼 수 있습니다.
첫 실험 · 화면 보기
첫 실험 과제와 직접 확인할 기준 두 개가 체크된 별이음 실험 화면
첫 실험 — 작은 과제를 정하고, AI가 성공했다고 해도 직접 실행해 본 기준만 체크합니다. 화면을 누르면 크게 볼 수 있습니다.

배포된 앱과 같은 소스로 실행한 화면입니다. 예제 카드와 가상의 답변을 사용했고, 로그인과 AI 호출 없이 기록했습니다. 각 항목을 펼쳐 살펴보세요.

왜 ‘별이음’일까?

별 하나는 작은 점이지만, 서로 이어 보면 별자리가 됩니다. 떠오르는 생각을 당장 평가하지 않고 모은 뒤, 연결 속에서 나만의 아이디어를 찾고 작은 실행으로 옮기는 도구를 만들고 있습니다.

생각을 모아, 구상의 틀로

배운 것을 기록하고 싶다긴 회고는 부담스럽다하루 한 줄은 쓸 수 있다

연결하고, 직접 고르기 ↓

하루 한 줄 배움 기록아이디어 → 제작 요청문 → 작은 실험
실제 서비스 화면 대신 구성한 흐름 예시. 생각을 고르고 연결한 뒤, 질문으로 아이디어를 구체화합니다.

생각 카드에서 작은 실험으로

카드에서 아이디어와 제작 요청문으로 이어지는 설명용 예시입니다.

  1. 01 · 생각을 남기기

    아직 정리되지 않은 세 조각

    • 배운 내용을 금방 잊는다
    • 긴 회고를 쓰기는 부담스럽다
    • 하루 한 줄은 남길 수 있을 것 같다
  2. 02 · 연결하고 구체화하기

    하루 한 줄 배움 기록

    ‘학습 기록’이라는 맥락으로 카드를 잇고, 짧게 남기고 다시 돌아보는 도구를 떠올립니다. 직접 구체화하거나 AI의 제안을 참고해 고를 수 있습니다.

  3. 03 · 만들어볼 요청으로

    작은 기능과 확인 기준

    “오늘 배운 것을 한 줄로 적고 다시 볼 수 있는 웹페이지를 만들어줘. 빈 기록은 저장되지 않게 하고, 새로고침 후에도 남는지 확인할 예시를 적어줘.”

AI의 제안이 곧 정답은 아닙니다. 연결 근거가 내 생각과 맞는지 고르고, 만들어볼 기능과 직접 확인할 기준을 정합니다.

파편화된 메모에서, 확인할 수 있는 아이디어로

  1. 생각을 한 줄씩 카드에 적기
  2. 관련 있는 카드 2~5개 연결하기
  3. 직접 구체화하거나 AI 후보의 근거를 보고 선택하기
  4. 목적·대상·핵심 기능·확인 기준을 답하기
  5. 제작 프롬프트를 복사해 원하는 AI에서 구현하기
  6. 보관함에 저장하고, 작은 실험의 실제 결과 남기기

카드 연결과 프롬프트 생성은 API 없이 작동합니다. OpenAI 제안은 사용자가 선택한 카드에 한해 버튼을 눌렀을 때 요청합니다.

HUMAN IN THE LOOP

AI의 초안에
사람의 판단을 더합니다.

AI는 함께 초안을 만드는 도구입니다. 빠르게 나온 답을 그대로 따르기보다, 제게 맞는지 살펴보고 바꿉니다. 무엇을 만들고 어떻게 고칠지는 제가 판단합니다.

만드는 과정 보기
  1. 01 · 내가

    불편을 구체적으로

    누구에게, 어떤 순간에, 무엇이 어려운지 적기

  2. 02 · AI와

    초안을 함께

    가능한 방식과 구현의 출발점 만들기

  3. 03 · 다시 내가

    확인하고 수정

    필요에 맞는지, 실제로 작동하는지 살피기

  4. 04 · 사용하면서

    다시 판단

    남은 불편을 찾아 다음 수정으로 이어가기

Human-in-the-Loop는 AI의 결과를 사람이 확인하고 조정하는 방식입니다. 제 작업에서는 요구를 정하고, 제안을 고르고, 실제 결과를 확인하는 과정으로 이어집니다.

현재와 다음

카드 작성·연결, 아이디어 질문, 제작 프롬프트, 보관함과 실험 기록, 선택적 AI 제안이 구현된 프로토타입입니다. 계정 저장과 소셜 로그인 코드는 추가했고 운영 설정을 점검하고 있습니다.

다음은 실제 사용자와 ‘카드에서 아이디어로 넘어가기’가 충분히 쉬운지 확인하는 일입니다. 사용 성과나 교육 효과는 아직 검증하지 않았습니다.

이 구조로 배우는 웹앱 과정함께 실험할 일 제안하기