TOCfE 야심찬 목표나무 작성 앱 제작

시도하고자 했던 것과 그 이유를 알려주세요.

TOCfE(Thinking Process for Education)의 '야심찬 목표 나무(Ambitious Target Tree, ATT)'는 매우 강력한 목표 설정 도구이지만, 초보자가 논리적 규칙을 지키며 작성하기에는 진입장벽이 높습니다.

저는 사용자가 자신의 목표를 입력하면, AI가 TOCfE 전문가가 되어

1) 목표를 다듬어주고,
2) 장애물을 분석하며,
3) 논리적 순서를 배치하고,
4) 실행 계획까지 제안

까지 해 주는 웹 앱을 만들고자 했습니다.
그리고, 결과물을 PDF로 소장할 수 있게하여 실제 실행력을 높이는 것이 핵심 목표였습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

개발 도구: Google AI Studio Build (React + TypeScript + Tailwind CSS)
AI 모델: Gemini 3 Flash (논리 분석 및 문장 생성)
주요 라이브러리:
- D3.js: 목표 간의 인과관계를 시각화하는 인터랙티브 트리 구현
- html2canvas & jsPDF: 고해상도 전략 로드맵 PDF 출력
활용 방식: 자연어 프롬프트를 통해 앱의 기능을 단계별로 확장했습니다.
단순한 기능 구현을 넘어, AI가 사용자의 입력을 검증하고 피드백을 주는
'상호작용' 설계에 집중했습니다.

Tip: 사용한 프롬프트

TOCfE의 생각도구중 야심찬 목표나무 다이어그램을 그릴 수 있는 프로그램 만들어줘.
순서는
야심찬 목표 작성
목표를 이루는데 방해가 되는 장애물 작성
장애물을 극복한 상태인 중간목표 작성
중간목표의 순서 정하기
중간목표를 달성하는 행동계획 작성
이야.
각 단계가 유기적으로 연결되도록 해서 야심찬 목표를 이룰 수 있는 목표나무를 만드는 프로그램 만들어줘

라고 프롬프트 입력하고, 관련 강의안을 첨부한 후 꽤 많은 티키타카를 하며 작업 진행했습니다.

이 과정에서 나온 앱은 다음과 같습니다.

<화면캡처>

야심찬 목표나무 설정

1-1. 목표나무 피드백

장애물 찾기

중간목표 설정하기

순서 정하기

실행계획 세우기 & PDF 다운로드

<임시 링크>
https://aistudio.google.com/apps/ef06bac5-23cb-4312-94c9-53b03cd78e6c?fullscreenApplet=true&showPreview=true&showAssistant=true

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

AI는 훌륭한 논리 검증기 : AI에게 단순히 문장을 만들어달라고 하는 게 아니라, "TOCfE의 규칙에 맞는지 검토하고 점수를 매겨줘"라고 요청했을 때 앱의 전문성이 비약적으로 상승했습니다.
시각화의 힘: 장애물과 목표의 관계를 선으로 연결하는 과정을 넣으니, 사용자가 자신의 전략을 훨씬 더 명확하게 이해하게 되었습니다.

과정 중에 어떤 시행착오를 겪었나요?

PDF 레이아웃 깨짐: 브라우저 화면과 PDF 출력 화면의 비율이 달라 표의 내용이 잘리거나 배경이 투명하게 나오는 문제가 있었습니다. 이를 해결하기 위해 출력용 컨테이너에 고정 너비를 주고, CSS vertical-align을 명시적으로 지정하여 해결했습니다.
AI의 중복 제안: 장애물을 다시 분석할 때 이전에 삭제한 내용을 자꾸 다시 제안하는 문제가 있었습니다. 이를 해결하기 위해 '삭제된 항목 리스트'를 AI에게 전달하여 "이 내용은 제외하고 제안해"라는 제외 로직을 추가했습니다.
다이어그램 순서 오류: 중간목표의 순서 배치가 원할하게 되지 않는 부분이 있어서 추후 개선해야할 부분입니다.

도움이 필요한 부분이 있나요?

현재는 1인용 도구이지만, 여러 명이 동시에 접속해 하나의 목표 나무를 그리는 '실시간 협업 기능'을 구현하고 싶습니다. (Firebase 등을 활용한 실시간 연동)

앞으로의 계획이 있다면 들려주세요.

TOCfE의 다른 도구들(갈등 해결을 위한 Cloud, 인과관계 분석을 위한 Branch 등)도 통합하여 종합적인 '논리적 사고 툴킷'으로 확장할 계획입니다.

도움 받은 글 (옵션)

지피터스 사례: AI Studio를 활용한 노코드 앱 제작 사례들을 참고하여 초기 아키텍처를 잡는 데 큰 도움을 받았습니다.
TOCfE 가이드: 야심찬 목표 설정의 기본 원칙을 앱의 프롬프트에 녹여내는 기준점으로 삼았습니다.

🔥<24기 AI 스터디> 얼리버드 신청하기 🔥

TOCfE 야심찬 목표나무 작성 앱 제작