View Source

프롬프트

Shape Up 화이트보드 작성법에 따라 다음 요소르
다음요소를 단일보드 웹에서 드로잉(렌더)을 지원하는 보드를 먼저만들고
PRD내용에 따라 보드에 자동으로 채워넣는 툴을 작성하려고합니다.
다음 요소를 분리된 보드가 아닌 하나의 단일 보드에 모두포함하는 형태로 진행합니다.
```
Breadboard (브레드보드)
Fat Marker Sketch (팻 마커 스케치)
Problem Definition Board (문제 정의 보드)
Risk Assessment Board (리스크 평가 보드)
Pitch Summary Board (피치 요약 보드)
피치 조립 :Problem + Appetite + Solution + Rabbit Holes + No-Gos
↓
완성된 Pitch Board
```

# 세부 지침
- Shaper UP 보드는 draw.io 와 유사하게 드로잉툴로 작성합니다.
- 보드의 크기는 내용에따라 canvas 영역이 커질수 있으며 , 확대/축소/이동 기능이 포함됩니다.
- 우측하단 영역은 프롬프트입력을 통한 생성을 시도할수 있습니다.
- PRD는 간단한 요구사항으로 ShaperUP 방법론이 제안하는 형태의 보드를 최종 작성하게됩니다.
- 보드 생성을 순서및 유형별로 진행되며 , 목적달성을 위한 프롬프트 설계도 합니다.
- 생성중에는 해당 보드가 실시간으로 작성되는 형태로 구현합니다.
- 작성된 보드는 PNG,SVG 등 이미지로 추출할수 있도록 합니다.
- 작성된 보드는 숏링크로 공유할수 있도록 합니다.
- 공유하기를 누르면 모달창으로 숏링크가 제공되며 , 복사및 새창열기 기능이 포함됩니다.

# 메뉴 위치
PRD Maker
- PRD Share : PRD를 공유하는기능으로 작동기능
- ShapeUP : Shape Up 화이트보드및 AI로 생성하기 기능
- ShapeShared : 공유된 ShapeUP 보드목록

# Shape Up 화이트보드 작성법
- https://mcp.webnori.com/ui/view/75b9325e-01c4-49af-94c9-a3b9983e410e

계획

 Shape Up 보드 유형

     1. Problem Definition Board - Raw Idea → Narrowed Problem, Baseline, Appetite
     2. Breadboard - Places (밑줄) + Affordances + Connection Lines
     3. Fat Marker Sketch - 굵은 선 박스, Squiggle, Annotation
     4. Risk Assessment Board - Rabbit Holes, No-Gos, 분포 곡선
     5. Pitch Summary Board - 5개 요소 통합 (Problem, Appetite, Solution, Rabbit Holes, No-Gos)

     UI 레이아웃

     +------------------------------------------------------------------+
     |  [메뉴]              Shape Up Whiteboard            [공유][내보내기]|
     +------------------------------------------------------------------+
     |           |                                                       |
     | 도구패널  |              캔버스 영역                               |
     | [선택]    |           (Fabric.js Canvas)                          |
     | [사각형]  |                                                       |
     | [텍스트]  |                                                       |
     | [화살표]  |                                                       |
     | --------- |                                                       |
     | 보드템플릿 |                                                       |
     | [Problem] |                                                       |
     | [Breadboard]                                                      |
     | [FatMarker]                                                       |
     | [Risk]    |                                                       |
     | [Pitch]   +-------------------------------------------------------+
     +-----------+ [AI 프롬프트 입력...                        ] [생성]  |
     +------------------------------------------------------------------+

     구현 순서

     Phase 1: 기본 인프라

     1. migrations/020_add_shapeup_share_links.sql - DB 테이블 생성
     2. Controllers/ShapeUpController.cs - UI/API 컨트롤러 생성
     3. Views/Shared/_Layout.cshtml - 메뉴 추가 (PRD Maker 하위)

     Phase 2: 프론트엔드 뷰 기본 구조

     1. Views/ShapeUpView/Index.cshtml - 메인 캔버스 페이지
       - Fabric.js 캔버스 초기화
       - 좌측 도구 패널 (도형, 보드 템플릿)
       - 우측하단 AI 프롬프트 입력
       - 줌/팬 기능
       - 기본 도형 도구 (사각형, 원, 선, 화살표, 텍스트)

     Phase 3: Shape Up 보드 템플릿 (5개 동시 구현)

     1. Problem Definition Board 템플릿
     2. Breadboard 템플릿
     3. Fat Marker Sketch 템플릿
     4. Risk Assessment Board 템플릿
     5. Pitch Summary Board 템플릿

     Phase 4: AI 생성 기능

     1. Services/ShapeUpPrompts.cs - 프롬프트 템플릿
     2. POST /api/shapeup/generate - SSE 스트리밍 엔드포인트
     3. 실시간 보드 생성 및 캔버스 렌더링

     Phase 5: 공유/내보내기

     1. POST /api/shapeup/share - 공유 링크 생성
     2. PNG/SVG 내보내기 (Fabric.js 기본 기능)
     3. Views/ShapeUpView/Share.cshtml - 공유 뷰 (읽기 전용)
     4. Views/ShapeUpView/ShareList.cshtml - 공유 목록