WSPN Comm v2 — Wireframes v0.3.0

1. 멀티그리드 (기본 상태)

사이드바 = 패널 리스트(세로, 즐찾 정렬) + 채팅 리스트(즐찾/전체+필터). 패널이 많아질 수 있어 세로 리스트.
패널 = 저장된 그리드 레이아웃 프리셋. 닫았다 다시 열 수 있음. 속성: 이름, 즐찾 여부, 소속 채팅 최신 업데이트 시간. 개인 설정(서버 싱크).
카드 = 패널 안의 채팅 컨테이너. 카드 탭으로 여러 채팅 포함 가능. 드래그로 크기 조절.
패널 탭바 (그리드 상단) = 열린 패널만 가로 탭으로 표시. 가상 데스크톱 전환.
카드 탭바 (카드 내부) = 카드 안에서 채팅 전환. 패널 탭바와 시각적으로 구분(더 작고, 이모지 기반).
카드 최소 380px 리사이즈 바 4px 카드 독립 스크롤 가로세로 자유 배치 패널=서버 싱크

📋 메인 3

📋 서브

전체

진행

대기

완료

전체

🐘

🦅

🦍

🐯

↕ 최근순

⭐ 즐겨찾기

전체

v2.0.0 · Gateway 🟢

개발 작업 ×

재무 + 전략 ×

+

🐘 WSPN API 수정 ×

🐘 대시보드 v2 ×

🐘

코낄 — WSPN API 수정

🐘

코낄 14:20

v0.8.0 배포 완료했어요. API 엔드포인트 3개 추가하고 CORS 수정했습니다.

📊 API 엔드포인트 정리 v2

→

세션 리프레시됨 · 14:30

🐘

코낄 14:31

이어서 진행하겠습니다. 남은 작업은 인증 미들웨어 수정이에요.

14:32 나

좋아 진행해

메시지 입력...

재무 분석 Q1 ×

🦅

독술 — 재무 분석 Q1

🦅

독술 13:50

Q1 매출 추이 차트 완성했습니다. 2월 중순 이후 상승세가 뚜렷해요.

📈 Q1 매출 추이 v1

→

14:00 나

전년 동기 대비도 넣어줘

🦅

독술 14:05

넣었습니다. 전년 대비 +23% 성장이에요. 차트 v2로 업데이트했어요.

📈 Q1 매출 추이 v2

→

메시지 입력...

그리드 배치 예시

2컬럼

카드 A

카드 B

2×2 그리드

A

B

C

D

1+2 (메인+서브)

메인

서브1

서브2

카드 경계를 드래그하여 크기 조절. 자유롭게 배치 가능.

2. 아티팩트 뷰어 확장 상태

활성 카드 + 아티팩트 뷰어. 채팅에서 아티팩트 클릭 시 우측에 뷰어가 확장되는 레이아웃.

UI 계층: 사이드바(패널 리스트 + 채팅 리스트) → 패널 탭바(그리드 상단) → 패널(그리드) → 카드(멀티탭) → 채팅(주인공)
패널 탭바 (그리드 상단, 44px) = 열린 패널 전환. 상태 dot + 이름. 가상 데스크톱 역할.
카드 탭바 (카드 내부, 36px) = 카드 안 채팅 전환. 이모지 + 이름. 패널 탭바와 시각적 구분.
사이드바 350px 아이템 60px 아바타 40px 헤더 56px 입력창 44px 패널탭 44px 카드탭 36px 메시지 간격 24px

🖥 패널

전체

진행

대기

완료

전체

🐘

🦅

🦍

🐯

↕ 최근순

⭐ 즐겨찾기

전체

v2.0.0 · Gateway 🟢

🐘 WSPN API 수정 ×

🐘 대시보드 v2 ×

🐘

코낄 — WSPN API 수정 72%

🕐

★

✕

세션 1

⚠️14:30

세션 2

현재

🐘

코낄 14:20

v0.8.0 배포 완료했어요. API 엔드포인트 3개 추가하고 CORS 수정했습니다.

📊 API 엔드포인트 정리 v2

패널에서 보기 →

세션 리프레시됨 · 03-01 14:30

🐘

코낄 14:31

안녕하세요, 이어서 진행하겠습니다.

⚠️ 컨텍스트가 압축되었습니다. 이전 맥락을 일부 잊었을 수 있습니다.

14:32 나

핸드오프 읽고 이어가줘

✕ 📷 img.png

✕ 📄 spec.pdf

메시지를 입력하세요... (Cmd+Enter로 전송)

아티팩트 뷰어

v1

v2

v3

이 채팅 (3)

전체

즐겨찾기

📊 API 엔드포인트 정리

Table · 코낄 · 14:20 · v2

📈 트래픽 분석

Plotly · 코낄 · 13:50 · v1

🔀 시스템 아키텍처

Mermaid · 코낄 · 12:30 · v3

📊

API 엔드포인트 정리

Table · v2 · 코낄 · 14:20

Method	Path	설명
`GET`	/api/panels	패널 레이아웃 조회
`PUT`	/api/panels	패널 레이아웃 저장
`POST`	/api/content	콘텐츠 생성

3. 모바일

단일 채팅 뷰. 상단 pill 바로 토픽 전환. 세션 연속성 + 컴팩션 알림 동일 적용.
헤더 56px pill 36px safe-area 대응

🐘 WSPN API

🦅 재무 Q1

🦍 디자인

🐘

코낄 14:20

v0.8.0 배포 완료했어요.

📊 API 정리 v2

보기 →

세션 리프레시됨 · 14:30

⚠️ 컨텍스트 압축됨

메시지 입력...

4. 세션 연속성 상세

컴팩션/핸드오프 시 같은 채팅에서 이어가는 UX 플로우. 세션 경계는 가벼운 구분선으로만 표시.

🐘

코낄 14:20

이전 세션의 마지막 메시지. 작업 완료 보고.

🔄 세션 리프레시됨 · 03-01 14:30 · 토큰 초기화

⚠️ 컨텍스트가 압축되었습니다

에이전트가 이전 맥락을 일부 잊었을 수 있습니다. 핸드오프 파일에 주요 맥락이 저장되어 있습니다.

🐘

코낄 14:31

새 세션에서 이어갑니다. 무엇을 도와드릴까요?

↑ 스크롤하면 이전 세션 메시지가 연속으로 보임 (IndexedDB에서 로드)