CommonGround와 함께 안전한 온라인 공간 만들기

Source: Dev.to

개요

CommonGround는 치유와 연결을 위한 안전하고 존엄한 공간이 필요한 세 개의 상호 연결된 커뮤니티를 위해 구축되었습니다:

이 앱은 이러한 인구를 지원하고 존엄성을 유지하면서 안전을 보장하는 트라우마 인식 디지털 도구가 필요한 청중을 위해 특별히 설계되었습니다.

제품 요약

CommonGround는 트라우마‑인식 커뮤니티 지원 웹 애플리케이션으로, 취약 계층이 안전하게 연결하고, 공유하며, 함께 치유할 수 있도록 AI‑중재된 공간을 제공합니다.

🎭 세 가지 페르소나 시스템

• Safety Seeker – 익명성에 중점을 둔 가정폭력 생존자.
• Fresh Start – 판단 없이 재통합을 지원.
• Community Support – 안내된 상호작용을 하는 자원봉사자.

🛡️ 트라우마 인식 온보딩

• 부드럽고 비침해적인 페르소나 선택.
• 존엄성을 우선시하는 언어로 목표 설정.
• 명확한 설명이 포함된 개인정보 제어.
• 강제 공개나 트리거가 되는 질문 없음.

💬 스토리 서클 (AI‑중재 그룹 공간)

• 실시간 AI 중재가 있는 안전한 그룹 토론.
• 존중하는 어조를 유지하기 위한 부드러운 편집 제안.
• 비공개 및 공개 서클 옵션.
• 존엄성을 보존하는 프롬프트를 통한 스토리 공유.

🤝 공동 창작 활동

• Kindness Wall – 커뮤니티 감사와 격려 게시판.
• Shared Story – 협업 스토리텔링 경험.
• Interactive Community Map – 안전한 위치, 리소스, 커뮤니티 공간이 고정된 실제 Leaflet 기반 지도 (Google Maps 통합).

📍 지원 서비스

• 선별된 안전 리소스.
• 위치 기반 서비스 찾기.
• 위기 핫라인 및 즉각적인 지원 옵션.

🔔 완전한 알림 시스템

• 스와이프하여 닫을 수 있는 실시간 알림 배너.
• 관련 콘텐츠로 이동.
• 비침해적이고 부드러운 알림.

📊 반성 도구

• 개인 진행 상황 추적.
• 감정 일기.
• 안전한 자기 반성 프롬프트.

트라우마 안전 색상 팔레트

타이포그래피 및 UX 패턴

• 폰트: Inter (접근성 및 가독성).
• 애니메이션: Framer Motion을 통한 부드러운 움직임.
• 언어: 전반적으로 존엄성 우선.
• 어두운 패턴이나 강제 참여 없음.
• 모든 화면에 명확한 종료 경로.
• 존중하는 마이크로 인터랙션.

데모 및 소스

• 데모 앱: [Demo URL]
• GitHub 저장소: [GitHub URL]

(플레이스홀더를 실제 URL로 교체하세요.)

어떻게 만들었는가

이것은 Figma Make 로 구축된 완전한 기능을 갖춘 웹 애플리케이션입니다. 앱에는 다음이 포함됩니다:

• ✅ 퍼소나 선택이 포함된 완전한 인증 흐름.
• ✅ 3단계 트라우마 인식 온보딩.
• ✅ 모든 기능에 접근 가능한 전체 대시보드.
• ✅ 실제 채팅 인터페이스가 포함된 작동 중인 스토리 서클.
• ✅ 실제 지도 기능을 포함한 인터랙티브 CoCreate 활동.
• ✅ 지원 서비스 디렉터리.
• ✅ 라우팅이 포함된 알림 시스템.
• ✅ 프로필 관리.
• ✅ 모바일 및 데스크톱용 반응형 디자인.

주요 사용자 흐름

1. 로그인 → 퍼소나 선택 → 온보딩 (환영 → 목표 → 개인정보) → 대시보드
2. 대시보드 → 스토리 서클 → 서클 참여 → 스토리 공유
3. 대시보드 → CoCreate → 인터랙티브 지도 → 안전한 위치 탐색
4. 알림 배너 → 클릭 → 관련 기능으로 이동

기술 세부 정보

라우터 아키텍처

// React Router Data Mode with protected routes
export const router = createBrowserRouter([
  {
    element: <App />,
    children: [
      { path: '/login', Component: Login },
      {
        path: '/',
        element: <HomeLayout />,
      },
      {
        path: '/home/*',
        element: <Home />,
      },
      // ... more routes
    ],
  },
]);

알림 시스템

// Swipeable notification banner with navigation
{
  if (Math.abs(info.offset.x) > 100) onDismiss();
}
onClick={() => navigate(notification.link)}
>
  {/* Notification content */}

Leaflet을 활용한 인터랙티브 지도

// Real map with markers, popups, and Google Maps integration
{safeLocations.map((location) => (
  <Marker position={location.coords} key={location.id}>
    <Popup>
      <div>{location.name}</div>
      <button onClick={() => openDirections(location)}>Get Directions</button>
    </Popup>
  </Marker>
))}

프론트엔드 스택

• 프레임워크: React 18 + TypeScript (타입 안전 컴포넌트 개발).
• 라우팅: 보호된 라우트를 포함한 React Router (Data Mode).
• 빌드 도구: Vite (빠른 개발 및 최적화된 빌드).

스타일링 및 디자인

• Tailwind CSS v4 – 커스텀 디자인 토큰을 활용한 유틸리티 퍼스트 스타일링.
• Framer Motion – 부드럽고 트라우마에 배려한 애니메이션.
• CSS 변수 – 맞춤형 트라우마 안전 색상 팔레트.

핵심 라이브러리

디자인 원칙

1. 트라우마‑인식 우선

   • 모든 상호작용에서 존엄성을 보장합니다.
   • 부드러운 언어와 비트리거 프롬프트 사용.
   • 명확한 종료 경로 제공; 강제 참여 없음.
   • 기본적으로 프라이버시를 보호하고, 공유는 옵트‑인 방식.

2. 페르소나‑기반 경험

   • 필요에 따라 세 가지 구분된 사용자 여정 제공.
   • 각 페르소나에 맞춘 맞춤형 온보딩.
   • 사용자 유형별 맞춤 콘텐츠 및 기능.
   • 사용자 상황에 맞게 유연하게 조정되는 네비게이션.

3. 컴포넌트‑드리븐 아키텍처

   • 재사용 가능한 모듈형 컴포넌트.
   • 기능 전반에 걸친 일관된 디자인 패턴.
   • 유지보수 및 확장이 용이함.
   • 타입‑안전한 props와 상태 관리.

4. 상태 관리 전략

   • 인증 및 사용자 선호도는 로컬 스토리지에 저장.
   • 데이터 페칭 및 캐싱을 위해 Context API / React Query 사용.
   • 가능한 경우 컴포넌트 수준 상태를 선호하여 전역 상태 최소화.

보딩 상태

• React hooks (useState, useEffect) 컴포넌트 상태 관리를 위해
• URL‑based routing 네비게이션 상태를 위해
• Future‑ready Supabase 백엔드 통합을 위해

접근성 및 반응형

• 모바일 우선 반응형 디자인
• 전반적인 시맨틱 HTML
• 키보드 탐색 지원
• 스크린 리더 친화적인 구조

디자인 시스템 우선

• 트라우마 안전 색상 팔레트와 타이포그래피 구축

컴포넌트 라이브러리

• 디자인 시스템을 따라 재사용 가능한 UI 컴포넌트를 구축함

사용자 흐름

• 각 페르소나에 대한 전체 사용자 여정을 구현했습니다.

인터랙티브 기능

• 실제 지도 통합
• 알림
• 동적 콘텐츠

다듬기 및 개선

• 부드러운 애니메이션
• 마이크로 인터랙션
• UX 개선

Supabase 통합

• 지속적인 데이터 저장

실시간 AI 모더레이션

• AI API를 사용한 스토리 서클 모더레이션

푸시 알림

• 모바일‑웹 경험

Progressive Web App (PWA)

• 오프라인 지원

다국어 지원

• 더 넓은 접근성

Analytics Dashboard

• 프로그램 관리자용

존엄성을 바탕으로 구축되고, 치유를 위해 설계되며, 커뮤니티에 의해 구동됩니다.

CommonGround는 취약 계층을 위한 트라우마 인식 디지털 서비스의 미래를 나타냅니다 — 기술이 존중, 안전, 그리고 연민으로 인류를 섬기는 곳.