[Project Proposal] SketchDate — Draw Yourself, Talk First, Reveal Later

Overview

SketchDate는 사용자가 직접 그린 2D 캐릭터로 상대방과 먼저 대화하고, 서로 동의한 경우에만 실제 얼굴을 공개하는 아바타 기반 랜덤 소개팅 서비스입니다.

웹캠으로 검출한 얼굴 표정과 움직임을 사용자가 만든 벡터 캐릭터에 실시간으로 반영합니다. 실제 얼굴을 공개하지 않은 상태에서도 눈 깜박임, 미소, 입 모양, 시선, 고개 움직임과 같은 비언어적 표현을 전달할 수 있습니다.

Draw yourself. Talk first. Reveal later.

팀장

이연석

Motivation

일반적인 영상 소개팅에서는 대화를 시작하기 전부터 외모가 공개되기 때문에 사용자에게 부담을 줄 수 있습니다. 반면 텍스트 기반 익명 채팅은 상대방의 표정이나 감정을 충분히 전달하기 어렵습니다.

SketchDate는 두 방식의 중간 지점을 제안합니다.

• 실제 얼굴을 처음부터 공개하지 않습니다.
• 음성과 표정은 직접 만든 캐릭터를 통해 전달합니다.
• 대화가 잘 통했다고 느낀 경우에만 서로의 동의하에 얼굴을 공개합니다.
• 한쪽 사용자만 얼굴 공개를 선택한 경우, 해당 선택은 상대방에게 알려지지 않습니다.

User Flow

1. 사용자가 얼굴, 눈, 눈썹, 입, 머리카락 등의 캐릭터 파트를 직접 그립니다.

2. 각 파트가 자동으로 캐릭터 리그에 연결됩니다.

3. 다른 사용자와 랜덤으로 매칭됩니다.

4. 웹캠 얼굴 추적 결과가 캐릭터에 실시간으로 적용됩니다.

5. 두 사용자는 음성과 움직이는 캐릭터를 통해 대화합니다.

6. 대화 중 랜덤 질문 카드와 표정 미션이 제공됩니다.

7. 제한 시간이 지나면 각 사용자가 비공개로 다음 행동을 선택합니다.

   • 아바타 상태로 더 대화하기
   • 실제 얼굴 공개하기
   • 대화 종료하기

8. 두 사용자가 모두 얼굴 공개를 선택한 경우에만 실제 영상으로 전환됩니다.

Core Features

1. Avatar Drawing

사용자는 브라우저에서 자신만의 캐릭터를 직접 제작합니다.

• 얼굴 윤곽
• 눈과 동공
• 눈썹
• 입
• 머리카락
• 액세서리

각 파트는 별도의 ThorVG Shape 또는 Scene으로 관리됩니다.

2. Real-Time Facial Retargeting

웹캠에서 얼굴 랜드마크와 표정 계수를 검출하고, 이를 캐릭터의 움직임으로 변환합니다.

초기 구현 대상은 다음과 같습니다.

• 머리 이동 및 회전
• 양쪽 눈 깜박임
• 동공 및 시선 이동
• 입 열기
• 미소
• 눈썹 움직임

3. Avatar-First Communication

얼굴 공개 전에는 원본 카메라 영상을 상대방에게 전달하지 않습니다.

대신 다음 정보만 전송합니다.

• 마이크 음성
• 머리 방향
• 눈 깜박임
• 시선 방향
• 입과 눈썹의 표정 계수

수신 측 브라우저는 전달받은 모션 데이터를 이용해 상대방의 ThorVG 캐릭터를 직접 렌더링합니다.

4. Mutual Face Reveal

대화가 끝난 뒤 양쪽 사용자가 모두 얼굴 공개에 동의한 경우에만 실제 카메라 영상이 활성화됩니다.

얼굴 공개 시에는 캐릭터가 벡터 조각으로 분해되거나 서서히 사라지면서 실제 영상으로 전환되는 애니메이션을 제공합니다.

5. Conversation Support

처음 만난 사용자들이 자연스럽게 대화를 이어갈 수 있도록 다음 기능을 제공합니다.

• 랜덤 대화 질문
• 공통 관심사 카드

Technical Architecture

Webcam
  ↓
Facial Landmark Detection
  ↓
Local ThorVG Avatar Rendering
  ↓
WebRTC DataChannel
  ↓
Remote ThorVG Avatar Rendering

얼굴 공개 이후에는 별도의 비디오 트랙을 WebRTC 연결에 추가하여 실제 영상 통화로 전환합니다.

MVP Scope

해커톤 버전에서는 다음 기능을 우선 구현합니다.

• 파트별 캐릭터 드로잉
• 캐릭터 자동 리깅
• 눈 깜박임, 입 열기, 미소, 고개 움직임
• WebRTC 기반 1:1 음성 통화
• RTCDataChannel 기반 모션 데이터 전송
• 랜덤 질문 카드
• 상호 동의 기반 얼굴 공개
• 아바타에서 실제 영상으로 전환되는 애니메이션
• 즉시 나가기 및 신고 UI

Demo Scenario

1. 두 사용자가 각각 자신만의 캐릭터를 그립니다.
2. 캐릭터가 사용자의 표정을 따라 움직이는 모습을 보여줍니다.
3. 두 사용자가 매칭되어 아바타 상태로 대화합니다.
4. 표정 미션과 질문 카드를 수행합니다.
5. 두 사용자가 비공개로 얼굴 공개 여부를 선택합니다.
6. 상호 동의가 확인되면 벡터 캐릭터가 사라지고 실제 영상이 공개됩니다.

Goal

SketchDate의 목표는 외모를 먼저 평가하는 영상 소개팅 대신, 사용자의 개성과 대화가 먼저 전달되는 새로운 온라인 만남 방식을 만드는 것입니다.

직접 그린 캐릭터가 사용자의 표정에 따라 살아 움직이고, 충분한 대화 이후에만 실제 얼굴을 공개함으로써 익명성과 감정 표현을 동시에 제공합니다.

기획 배경

악기를 연주할 때 음정을 정확히 맞추면 의도한 그림이 정상적으로 그려지고, 음정을 잘못 내거나 흔들리면 그 순간 화면에 그려지는 선과 형태도 함께 일그러지는 프로그램을 기획했습니다.

단순히 “지금 음정이 맞다/틀리다”를 보여주는 튜너가 아니라, 연주 자체가 그림을 만들어내는 인터랙티브한 시각화 도구를 만드는 것이 목표입니다. 연주가 안정적이면 깔끔한 결과물이 나오고, 중간에 삐끗한 부분이 있으면 그 구간만 삐뚤어지거나 흐트러져 최종적으로는 연주 실수가 그대로 반영된 재미있는 그림이 남도록 구성했습니다.

핵심 기능 및 동작 흐름

악기 선택 또는 마이크 입력 허용 ➔ 기준 멜로디/음정 설정 ➔ 연주 시작 ➔ 실시간 음정 분석 ➔ 음정 정확도에 따라 그림 생성 ➔ 연주 종료 ➔ 최종 그림 확인 및 저장

ThorVG 활용

ThorVG를 이용해 음정 데이터를 실시간 벡터 그래픽으로 렌더링합니다.

• 실시간 드로잉: 연주가 진행되는 동안 선, 곡선, 도형이 계속 이어지며 하나의 그림 생성
• 정확도 반영: 음정이 맞으면 균형 잡힌 선과 형태를 유지하고, 틀리면 선이 흔들리거나 찌그러지도록 표현
• 시각 효과 적용: Blur, Shadow, Opacity 등을 활용해 음정이 불안정한 순간을 더 두드러지게 표현
• 애니메이션 구성: 연주 흐름에 따라 그림이 자연스럽게 확장되도록 Path와 Transform 활용
• 결과물 저장: 연주가 끝난 뒤 완성된 그림을 이미지로 저장

기대 결과

같은 그림을 그리는 구조라도 연주 정확도에 따라 결과물이 매번 달라집니다. 즉, 정확한 연주는 정돈된 그림, 실수가 섞인 연주는 일부가 뒤틀린 그림으로 남기 때문에, 연습 과정 자체를 시각적으로 보여주면서 재미 요소도 줄 수 있습니다.

[Agent Persona — AI 에이전트의 캐릭터]

• 배경 :

현재 사용 중인 Claude Code 등 AI 에이전트 들은 동작 시 자신 만의 언어로 상태를 표현합니다.

하지만 이는 현재 에이전트가 무슨 단계에 위치해 있는지에 대해 직관적으로 알기 어렵죠.

거기다 텍스트 위주의 상태이기에 사용자 친화적이지 못하다고 느껴집니다.

• 개요 :

AI 에이전트의 동작 상태에 따라 캐릭터 애니메이션을 출력하는 Platform 을 ThorVG 를 통해 개발해 봅니다.

여러 사물에서 Lottie 애니메이션의 움직임을 가져와 다른 사물에 적용하고, 망가진 장면을 정상적으로 복구하는 Lottie를 이용한 모션 조립 퍼즐 게임입니다.

핵심 루프는 다음과 같습니다.

1. 모션이 어색한 사물 찾기
2. 자연스럽게 움직이는 다른 사물의 Lottie 애니메이션 확인
3. 필요한 애니메이션 구간 추출
4. 모션의 속성 변경
5. 수정한 모션을 어색한 모션을 가진 사물에 적용
6. 장면을 재생해 올바른 모션인지 확인

플레이어가 수정 가능한 조건은 모션 종류, 재생 방향, 재생 속도, 반복 방식 정도로 생각했습니다. 모션은 패턴 4개(Rotation, Pulse, Oscillation, Open), 적용 속성 4개(Rotation, Scale, Opacity, Position), 허용된 Remap은 2개 정도로 생각하고 있습니다. (종류 수정은 가능, 개수 수정은 미정)

스테이지는 최종 4단계 까지를 목표로 하고 있으며, 최소 구현 단계는 2단계입니다.

음악 파일을 올리면 소리에 반응해서 Lottie 애니메이션이 동적으로 움직이는 웹을 만듭니다. 렌더링은 ThorVG WebCanvas를 사용합니다.

곡의 에너지에 따라 재생 속도가 변하고, 저음 피크에서 Lottie 전체가 펄스처럼 튀고, 고음에 따라 글로우와 색조가 바뀌는 효과를 기획하고 있습니다. (변동 가능)

같은 Lottie 애니메이션에서도 곡을 바꾸면 다르게 동작하도록 하는게 목표입니다.

목표

• 오디오 파일 업로드 및 주파수 분석
• 음악 에너지에 따른 Lottie 재생 속도 변화
• 저음 피크 감지 후 전체 펄스
• 고음·에너지 기반 글로우·색조 반응 (opt)
• 파라미터 조절 슬라이더
• (도전… 검토 필요) Lottie 레이어별로 다른 주파수 대역에 반응
• (도전) 리듬게임?

기술 스택

@thorvg/webcanvas · TypeScript · Web Audio API · Next.js 을 생각중입니다.

엔진 보다는 웹 작업(애니메이션 조절)이 많을 것으로 예상됩니다.

웹개발자 분들의 많은 관심 부탁드립니다ㅎㅎ (어느 분야든 환영입니다!!!)

사용해보고싶으셨던 thorvg, lottie 의 다양한 효과/기능 등등 여러방향으로 충분히 논의 가능하니 편하게 연락주세요 👍

Description

마우스로 스펠 모양을 그리면, Thorvg 캔버스에 획이 실시간 렌더링 $1 Unistroke 알고리즘으로 모양을 인식해 스펠을 발동 공격 타입 vs 상대의 현재 타입으로 데미지 계산하는 1:1 턴제 게임

내 턴 진입
   ↓
캔버스에 스펠 모양 드로잉 (실시간 렌더)
   ↓
$1 인식기로 모양 판정 → 스펠 확정
   ↓
상성 계산(내 스펠 vs 상대 현재 타입) → 데미지 적용
   ↓
캐릭터 색 전환 + Lottie 이펙트 재생
   ↓
CPU 턴 (같은 로직 반전) → 반복
   ↓
HP 0 → 승패 결정

실시간 드로잉 캡처, Lottie 애니메이션 재생, SceneEffect 타격 연출 등을 구현할 예정이고, 여유가 된다면 firebase로 온라인 1:1 모드도 만들어볼 생각입니다.

최근 터미널 중심의 워크플로우를 선호하는 개발자들이 증가 / 개발자라면 터미널의 낭만으로 작업하는게 있다고 생각되서 ‘브라우저를 켜지 않고 터미널에서 끝내는 Lottie 렌더링’ 를 만들어보려합니다.

목표는 ‘termvg play thorvg_lottie.json’ 와 같이 입력하면 lottie 애니메이션이 실행되는게 목표입니다.

그리고 WASM 를 제공해주기때문에, 네이티브환경 + 웹 환경에서 터미널을 만들어서 보여주는것도 기술적으로 가능하다고 판단되어 주제에 벗어나지 않는다고 생각됩니다.

기술스택 Go, C++, TS, Next.js 등이 예상됩니다.

카메라 기반 벡터 포즈 매칭 웹 게임

사용자의 자세를 카메라로 인식하고 얻어낸 데이터를 이용한 ThorVG WebCanvas 기반 게임 제작. 사용자 데이터를 벡터 캐릭터 (Path) 로 변환, 포즈나 벡터 편집 아이템을 이용하여 목표 shape를 완성하는 게임

예상 구현

• FrontEnd (-)
• 카메라 입력 및 자세 인식 (MediaPipe)
• 벡터그래픽 및 게임 로직 구현 (thorvg.web)
  • 문제(match target vector) 생성
  • Thor VG 벡터 아바타 생성
  • Shape matching
  • Vector 편집 아이템 제작

✅️ 팀플도 환영입니다. 같이하시고 싶으신 분들 계시다면 디스코드 메세지나 코멘트 해주세요!

for information으로 최근 매일 늦퇴중이라 평일 시간 운영이 자유롭지가 않습니다. . 혹시 팀플하며 불편하실 수 있어 미리 고지드립니다

설치나 복잡한 환경 설정 없이 단일 HTML 파일만으로 Lottie 애니메이션의 주요 색상을 추출하고, ThorVG WebCanvas로 실시간 미리보기 및 수정본을 추출하는 단일 파일 웹 도구를 목표로 만들려 합니다.

목표 기능:

브라우저에서 Lottie(JSON) 파일 드래그 앤 드롭 로딩 구현

Lottie 데이터 내 주요 색상(Hex) 코드 자동 추출 및 HTML Color Picker 연동

ThorVG WebCanvas를 활용해 색상 변경 사항을 실시간(Real-time)으로 렌더링

변경된 색상이 반영된 새로운 Lottie JSON 파일 다운로드 기능 제공

• 기술 스택: HTML5, TypeScript, @thorvg/webcanvas

팀원 합류는 언제든 환영합니다!!

여러 개의 Lottie 애니메이션을 레이어처럼 쌓고, 블렌딩·타이밍·색상을 실시간으로 조절해서 하나의 새로운 애니메이션으로 합성하는 웹 툴을 만듭니다. 렌더링은 ThorVG WebCanvas를 사용합니다.

목표

• Lottie 파일 2개 이상 로드하고 레이어로 겹치기
• 레이어별 재생 속도·오프셋·투명도 조절 UI
• 합성 결과를 실시간 미리보기
• (도전) 합성 설정을 JSON으로 내보내기

기술 스택

@thorvg/lottie-player · @thorvg/webcanvas · TypeScript · Vite