1. 개발 목적
- 심리학 이론 기반 자기성찰 기록 환경 구축: 자기결정성이론(SDT)의 기본심리욕구인 자율성·유능성·관계성 충족 경험을 체계적으로 기록하고 성찰할 수 있는 BPNS 기반 입력 구조를 설계하여 심리학적 근거를 갖춘 자기계발 플랫폼 구현.
- 동기 유형 분류를 통한 정밀 자기 이해: WEIMS 기반 내재·통합·확인·내사·외적·무동기 6가지 동기 유형 선택 레이아웃을 구현하여 사용자가 자신의 행동 동기를 정량적으로 파악하고 성찰할 수 있는 구조 제공.
- 기록 데이터의 시각적 성장 경험 설계: 누적 기록 데이터를 SVG 기반 나무 성장과 영역별 꽃 개화로 시각화하여 추상적인 심리적 성장을 직관적으로 체감할 수 있는 몰입형 사용자 경험 구현.
2. 기술 스택 및 선정 포인트
Front-end : React / TypeScript (PWA) Back-end : Node.js / NestJS Server : AWS EC2 DB : PostgreSQL
앱 설치 없이 모바일 브라우저에서 네이티브 앱에 준하는 경험을 제공하기 위해 PWA 구조로 구현. SVG 기반 나무·꽃 성장 애니메이션과 조건별 렌더링 로직을 React 컴포넌트 구조로 효율적으로 관리.
3. 주요 기능
BPNS 기반 자율성·유능성·관계성 3대 영역 경험 기록, 괄호() 패턴 가변 입력 폼, WEIMS 기반 6가지 동기 유형 선택 레이아웃, SVG 기반 메인 나무 성장 시각화, 영역별 분홍꽃·노란꽃·파란꽃 개화, 최대 성장 도달 시 연쇄 나무 생성, 상단 Progress Bar, 조건별 렌더링 기반 감정 평가 배제형 랜덤 격려 메시지
4. 루멘트만의 성공 전략
- SVG 기반 성장 시각화로 기록 지속 동기 부여: 누적 기록 데이터가 쌓일수록 메인 나무가 성장하고 자율성·유능성·관계성 영역별로 분홍·노란·파란 꽃이 개화하는 SVG 시각화 인터페이스를 구현. 최대 성장 도달 시 연쇄 나무가 생성되는 보상 구조를 설계하여 기록 지속에 대한 시각적 성취감을 제공하고 장기 리텐션을 구조적으로 확보.
- 심리학 이론의 UX 내재화: SDT·BPNS·WEIMS 등 학술 이론을 사용자가 심리학 지식 없이도 자연스럽게 따라갈 수 있도록 단계별 Progress Bar, 가변 입력 폼, 감정 평가를 배제한 랜덤 격려 메시지 로직으로 UX 흐름 안에 녹여냄. 이론적 엄밀성과 사용 편의성을 동시에 확보하는 것을 핵심 개발 철학으로 삼음.
5. 작업 결과
- BPNS 기반 3대 영역 기록·WEIMS 동기 유형 선택·SVG 나무 성장 시각화·연쇄 나무 생성 전 기능 구현 완료. 조건별 렌더링 기반 감정 평가 배제형 랜덤 격려 메시지 로직 적용으로 심리적으로 안전한 기록 환경 완성. PWA 구조로 앱 설치 없이 모바일 브라우저에서 즉시 접근 가능한 서비스 출시 완료.
* 실제 앱 화면은 하단의 이미지를 확인해주세요.
