대화창을 누르면 대화가 시작됩니다
대화 시작 전
대화창을 누르거나 오른쪽 아래 버튼을 누르면 다음 메시지가 나옵니다.
Jetpack Compose에서 React로
이 프로젝트는 Chris Horner가 Jetpack Compose로 만든 persona-im을 React와 CSS 애니메이션으로 재구현한 작업입니다.
원본 프로젝트는 DroidKaigi 2024와 KotlinConf 2025에서 발표되었으며, Persona 5 게임의 스타일리시한 메시징 UI를 Android에서 어떻게 구현할 수 있는지 보여줍니다.
핵심 기술 변환
| Jetpack Compose | React/Web |
|---|---|
GenericShape | SVG <path> |
Animatable | CSS transition/animation |
tween(easing) | cubic-bezier |
Canvas + drawPath | p5.js Canvas |
LaunchedEffect | useEffect |
구현된 기능
- 메시지 버블: 기울어진 사다리꼴 모양의 말풍선
- 캐릭터 아바타: 3레이어 SVG (검정/흰색/캐릭터색)
- 배경 파티클: 벚꽃(Spring) 또는 눈송이(Winter) 애니메이션
- 타이핑 인디케이터: 순차적으로 나타나는 3개의 점
- 등장 애니메이션: 스케일 + 페이드 효과 (EaseOutBack)
색상 팔레트
PersonaRed: #C41001
Ann: #FE93C9 (핑크)
Ryuji: #F0EA40 (노랑)
Yusuke: #1BC8F9 (파랑)Copyright
©ATLUS ©SEGA
모든 아트와 캐릭터 디자인은 Atlus Co., Ltd.의 소유입니다. 교육 목적으로만 사용했습니다.