▲ 2024-2 翰林大学ソフトウェアキャップストーンデザイン発表会にて大賞を受賞。左：授賞式の様子 右：チームメンバーと記念撮影。
[2024-2 翰林大学ソフトウェアキャップストーンデザイン]
▲ Puzzleプラットフォームのメイン画面。リアルタイムキャンバス上でチーム全員が同時に作業できる協業環境を提供。
Puzzleは、チームプロジェクトの企画・設計プロセスを革新的に改善する協業プラットフォームです。 体系的なガイドラインとリアルタイム協業ツールを通じて、プロジェクト管理の新たなパラダイムを提示します。
本プロジェクトは、チームプロジェクトのためのアイデア・設計ガイドライン提供プラットフォームの開発を通じて、以下の達成を目標としています：
-
プロジェクト企画プロセスの標準化
- 10段階で構成された体系的な企画プロセスを提供
- 投票機能により、全チームメンバーの合意をもとに次の段階へ移行可能
-
創造的な協業環境の構築
- リアルタイムビジュアルキャンバスと協業ツールの提供
- 即時フィードバックをサポートする協業環境の整備
-
効率的な文書化・管理システムの実装
- AIを活用した会議内容の要約・管理
- 標準化されたMarkdown文書の自動生成
| FE | FE | BE |
|---|---|---|
| キム・テホ | 丸内大成 | キム・ソンウ |
 |
 |
 |
| 翰林大学 | 翰林大学 | 翰林大学 |
| ビッグデータ専攻 | コンテンツIT専攻 | ビッグデータ専攻 |
| @low | @丸内大成 | @kimxxunu |
| カテゴリ | 技術スタック |
|---|---|
| フロントエンド |       |
| バックエンド |       |
| AI |     |
| デザイン |    |
| ライブカーソル | 投票 | プロセスバー |
|---|---|---|
 |
 |
 |
| 複数人のカーソルをリアルタイムで表示。誰がどこを操作しているか一目で把握できる。 | 次の段階へ進む際に全員の合意を取る投票機能。民主的な意思決定を実現。 | 現在どの段階にいるかを視覚的に表示。10段階の進捗を常に確認できる。 |
| 接続者 | タイマー | オーディオプレイヤー |
|---|---|---|
 |
 |
 |
| 現在のセッションに接続中のメンバー一覧をリアルタイムで表示。 | 各作業ステップに時間制限を設けるタイマー機能。集中した議論をサポート。 | 作業中にBGMを流せる内蔵オーディオプレイヤー。集中力を高める環境を演出。 |
| サウンドブロック | グループコール | ツールバー |
|---|---|---|
 |
 |
 |
| キャンバス上に配置できる音声ブロック。特定エリアにBGMや効果音を設定可能。 | メンバー全員がリアルタイムで通話しながら作業できるグループ通話機能。 | 付箋・テキスト・図形など各種要素を配置するためのキャンバスツールバー。 |
Puzzleは、体系的なプロジェクト企画のために以下の10段階プロセスを提供します。 各段階は明確な目標とツールをサポートし、全チームメンバーが合意しなければ次の段階に進めない設計になっています。
- 👋 チームメンバー間の親密度形成 チームメンバーと親しくなり、チームリーダー（ホスト）を選定します。
- 🌟 協業のためのチームの雰囲気を醸成します。
- 🎯 プロジェクトの目標設定 プロジェクトの方向性と目標を明確に定めます。
- 💡 チームメンバーが共有できるビジョンと価値を策定します。
- 🧠 アイデアの交換 チームメンバーが自由にアイデアを提案・議論します。
- ✅ 実行可能なテーマを選定して具体化します。
- 🛠️ アイデアの発展 提案されたアイデアを発展させ、具体的な実行計画としてまとめます。
- 📊 優先順位を設定し、アイデアの発展可能性を評価します。
- 💬 実現可能性の議論 アイデアの実現可能性と問題点を中心に議論します。
- 🤝 チームメンバー間の意見を調整し、実行方針を導き出します。
- 👤 目標ユーザーの定義 プロジェクトの対象ユーザーを具体的に定義します。
- 🔍 ユーザーのニーズを分析し、企画の方向性をユーザー中心に調整します。
- 🧩 問題の定義・分析 目標ユーザーが抱える問題を定義し、解決策を模索します。
- 🚀 具体的な解決策を実行可能な形でまとめます。
- 📖 ユーザー視点の設計 提供する主要機能とユーザー体験を設計します。
- 🌟 ユーザー視点での価値を明確に定義します。
- 🌐 サービス構造の設計 サービスのページ構造と機能フローを体系的に設計します。
- 🗂️ プロジェクトのアーキテクチャを確立します。
- 📄 ドキュメントの最終確認 README.md形式で会議内容を要約します。
- 📝 要件定義書を確認し、プロジェクト成果物を最終点検します。
| 1段階 アイスブレイキング | 2段階 ビジョン探し |
|---|---|
 |
 |
| チームメンバーが自己紹介し、リーダーを選出するオープニングステップ。 | チームが共有するプロジェクトのビジョンと目標を設定するステップ。 |
| 3段階 テーマ選定 | 4段階 スプレッド |
|---|---|
 |
 |
| 自由なブレインストーミングで出たアイデアを投票で絞り込み、テーマを決定する。 | 選ばれたアイデアをキャンバス上で広げ、具体的な実行計画へ発展させるステップ。 |
| 5段階 ディスカッション | 6段階 ペルソナ |
|---|---|
 |
 |
| 実現可能性・問題点・役割分担を全員で議論し、合意形成を行うステップ。 | サービスの対象ユーザーを具体的に定義し、ユーザー中心の設計方針を確立するステップ。 |
| 7段階 問題解決 | 8段階 ユーザーストーリー |
|---|---|
 |
 |
| ターゲットユーザーが抱える課題を定義し、解決策を実行可能な形で整理するステップ。 | ユーザー視点で主要機能と体験フローを設計し、提供価値を明文化するステップ。 |
| 9段階 メニューツリー | 10段階 結果確認 |
|---|---|
 |
 |
| サービスのページ構造・機能フローを体系的に整理し、アーキテクチャを確立するステップ。 | AIが会議内容を要約しREADME.mdを自動生成。要件定義書で成果物を最終確認するステップ。 |
各段階はリアルタイム協業ツールと体系的なガイドラインを通じて進行され、チームメンバー間の民主的な意思決定をサポートします。 Puzzleの段階的プロセスは、プロジェクト企画の体系性と効率性を最大化します。
▲ Puzzleの全体システム構成図。Next.js フロントエンド・NestJS バックエンド・Python AI サーバーが連携し、AWS上にDockerでデプロイされた構成。
| リアルタイム通信プロセス | データ分析プロセス |
|---|---|
 |
 |
| WebSocketを用いたリアルタイム同期の仕組み。カーソル・投票・キャンバス操作を全員に即時反映。 | 会議内容をAI（LangChain + OpenAI）が解析・要約し、Markdown文書として自動生成するフロー。 |
