FocusPot 🐾 — 프로젝트 기획안 v1.6
친구들과 함께하는 데스크탑 오버레이 타이머
다른 분의 아이디어로 시작하는 프로젝트로 클론 및 성능 개선하여 모두 사용할 수 있는
01. 프로젝트 컨셉
공부하거나 다른 앱을 사용할 때도 유튜브 PiP처럼 화면 위에 항상 떠있는 오버레이 앱.
Electron 데스크탑 앱을 설치 후 실행하면, 방에 접속해 친구들과 시간을 실시간으로 공유한다.
로그인 없이 닉네임과 내 PC의 이미지/GIF 파일을 골라 바로 참여할 수 있다.
각자 하고 싶은 걸 하면서도 "나 이만큼 하고 있어"를 함께 나누는 공간 — FocusPot.
🐱🐹🐶 기본 캐릭터
프로필 설정 시 직접 파일을 고르지 않으면 기본 이미지로 자동 적용된다.
| 캐릭터 | 이미지 |
|---|
| 고양이 | 노트북 하는 고양이 이미지 |
| 햄스터 | 노트북 하는 햄스터 이미지 |
| 강아지 | 노트북 하는 강아지 이미지 |
02. 확정 기능
🏠 방 시스템
- 6자리 코드로 방 생성 및 친구 초대
- 로그인 없이 닉네임 + 이미지/GIF 선택 후 바로 참여
- 방 최대 인원 6명
- 인터넷으로 어디서든 접속 가능
🐾 캐릭터 설정
- 닉네임 입력
- 기본 캐릭터 3종 중 선택 (고양이 / 햄스터 / 강아지) 또는 내 PC에서 이미지(PNG/JPG)/GIF 직접 업로드
- 선택한 파일은 base64로 인코딩되어 WebSocket으로 전송 → 친구들 화면에 바로 표시
- 서버나 클라우드에 파일 저장 없음 — 세션 동안만 메모리에서 유지
⏱️ 타이머
- 방 입장 시 타이머 자동 시작, 모든 친구와 실시간 동기화
- 타이머 숫자 클릭 → 정지 / 다시 클릭 → 재개 (토글)
- 별도 버튼 없음 — 타이머 자체가 버튼
💬 말풍선 (채팅 앱 스타일)
- 내 말풍선 클릭 → 텍스트 + 이모지 피커 팝업
- 텍스트와 이모지를 자유롭게 조합 (예:
집중 중.. 🔥)
- 완료 시 방 안 모든 친구에게 실시간 공유
- 친구 카드 말풍선은 읽기 전용
🖥️ 오버레이
- 항상 최상단 — 어떤 앱 위에서도 보임
- 투명 배경 — 캐릭터와 타이머만 떠있는 느낌
- 드래그로 화면 원하는 위치 자유 이동
- 오버레이 크기 조절 (소 / 중 / 대)
🔌 솔로 모드 (오프라인)
- 인터넷 연결 없이도 혼자 타이머 사용 가능
- 캐릭터 선택 후 바로 오버레이 타이머 시작
- WebSocket 연결 없이 로컬에서만 동작
📦 확장 예정 (v2)
- 로그인 / 계정 시스템 (캐릭터 설정 저장, 기록 누적)
- 누적 시간 통계 및 랭킹
03. 비기능 요구사항
| 항목 | 내용 |
|---|
| 인증 | 로그인 없이 즉시 사용 가능 |
| 동시 접속 | 방 최대 6명 동시 접속 지원 |
| 오버레이 | 항상 최상단, 어떤 앱 위에서도 표시 |
| 실시간성 | 타이머·말풍선·이미지 즉시 동기화 |
| 보안 | 이미지 파일 서버 저장 금지 (세션 메모리만 유지) |
| 오프라인 | 인터넷 없어도 솔로 타이머 기능 사용 가능 |
| 멀티플레이 | 방 기능은 인터넷 연결 필요 |
04. 화면 구성 및 사용자 흐름
화면 목록
| 화면 | 이름 | 주요 요소 |
|---|
| ① | 시작 화면 | 앱 로고(FocusPot), 혼자하기 / 같이하기 선택 |
| ② | 방 선택 | 방 만들기 / 참가하기 (같이하기 선택 시만, 인터넷 연결 확인) |
| ③ | 프로필 설정 | 닉네임 입력, 기본 캐릭터 선택 or PC에서 이미지/GIF 파일 업로드 |
| ④ | 오버레이 메인 ★ | 캐릭터 + 타이머 (솔로: 1인 / 멀티: 친구 카드 가로 나열) |
사용자 흐름
앱 시작
├── 혼자하기 → 캐릭터 선택 → 오버레이 (솔로 타이머)
│
└── 같이하기 → 인터넷 연결 확인
├── 연결 실패 → 경고 메시지
└── 연결 성공 → 방 만들기 or 참가하기
└── 캐릭터 선택 → 오버레이 (멀티 타이머)
05. 오버레이 카드 구조 (1인당)
[ 말풍선: 집중 중.. 🔥 ]
|
[ 캐릭터 이미지/GIF ]
[ 01:23:45 ] [ 나가기 ]
말풍선 입력 방식 (채팅 앱 스타일)
┌─────────────────────────────┐
│ 집중 중.. 🔥 │ ← 말풍선 미리보기
├─────────────────────────────┤
│ [텍스트 입력란 ] 😊 │ ← 이모지 피커 버튼
│ [ 완료 ] │
└─────────────────────────────┘
카드별 권한
| 요소 | 내 카드 | 친구 카드 |
|---|
| 말풍선 | 클릭해서 수정 가능 | 읽기 전용 |
| 캐릭터 이미지/GIF | 표시 | 표시 |
| 타이머 | 클릭으로 정지/재개 | 읽기 전용 |
| 나가기 버튼 | 클릭 시 방 퇴장, 친구들 화면에서 내 카드 즉시 사라짐 | 표시 안 됨 |
06. 기술 스택
🖥️ 클라이언트 (Electron 데스크탑 앱)
| 기술 | 역할 | 숙련도 |
|---|
| Electron | 데스크탑 앱, 항상 최상단 투명 오버레이 창, 로컬 파일 접근 | 새로 배움 |
| React + TypeScript | UI 전체 구성 | 기존 경험 |
| Vite | 빌드 도구 (Electron에 최적화) | 새로 배움 (쉬움) |
| Tailwind CSS | 스타일링 | 기존 경험 |
☕ 백엔드 (Spring Boot 서버)
| 기술 | 역할 | 숙련도 |
|---|
| Java + Spring Boot | 방 관리 REST API 서버 | 기존 경험 |
| Spring WebSocket + STOMP | 타이머·말풍선·이미지(base64) 실시간 동기화 | 새로 배움 (Spring Boot 확장) |
🚀 배포 & 인프라
| 기술 | 역할 | 숙련도 |
|---|
| AWS EC2 | Spring Boot 서버 배포 | 기존 경험 |
| GitHub | 형상 관리 | 기존 경험 |
| GitHub Actions | Electron 앱 자동 빌드 (.exe / .dmg) | 새로 배움 (쉬움) |
🗂️ 아키텍처 흐름
[Electron 앱 (React + Vite)]
↓ 로컬 파일 선택 또는 기본 캐릭터 선택 (이미지/GIF)
↓ base64 인코딩
↕ HTTP (REST) → 방 생성/참여
↕ WebSocket (STOMP) → 타이머 동기화, 말풍선, 이미지(base64) 공유
[Spring Boot 서버 — AWS EC2]
→ 방 안 모든 클라이언트에 브로드캐스트 (파일 저장 없음)
📌 새로 배울 것 (3가지)
- Electron — 로컬 파일 접근 + 투명 오버레이 창. 난이도 낮음.
- Spring WebSocket + STOMP — Spring Boot 의존성 추가 후 어노테이션 방식. 난이도 낮음.
- Vite + GitHub Actions — 설정 파일 수준. 난이도 매우 낮음.
07. 개발 로드맵
| 단계 | 내용 |
|---|
| 1단계 | Electron + Vite + React 셋업, 투명 오버레이 창, 드래그 이동 구현 ✅ |
| 2단계 | 시작 화면 (혼자하기/같이하기), 방 선택, 프로필 설정, 솔로 타이머 오버레이 UI |
| 3단계 | Spring Boot 서버, WebSocket/STOMP 방 시스템, 멀티 타이머·말풍선 동기화, EC2 배포 |
| 4단계 | 이미지/GIF base64 전송 및 친구 카드 렌더링, 말풍선 이모지 피커 |
| 5단계 | 디자인 다듬기, GitHub Actions로 .exe / .dmg 자동 빌드 |
| v2 | 로그인/계정, 캐릭터 설정 저장, 누적 기록, 통계, 랭킹 |
