06 / 06그냥 만들고 싶어서 만든 것
사랑의 우체통
좋아하는 마음을 한 장씩 담아 두는 3D 우체통
- 원래
좋아하는 마음을 말로 꺼내기- 이제
- 3D 우체통에 편지를 넣고, 공개 하트나 비밀 코드로 전해요
열어 보기 red-postbox.todah.devLIVE
24자리 비밀 편지 코드
01실제 화면


02이런 걸 해요
- 편지를 보내면 종이가 말리고 접혀서 우체통으로 날아 들어가요
- 공개 편지는 화면 양옆의 하트가 되고, 누르면 읽을 수 있어요
- 비밀 편지는 24자리 코드를 아는 사람만 열 수 있어요
- 서버 저장이 확인된 뒤에만 연출이 재생돼요
03만든 이야기
왜 만들었나
이것도 귀찮아서 만든 건 아니에요. 말로 하기 쑥스러운 마음을 어딘가에 넣어 두고 싶었어요.
어떻게 돌아가나
편지는 서버에 저장되고, 저장이 확인돼야 종이가 말리고 접혀서 우체통으로 날아가요. 공개 편지는 하트가 되어 화면에 떠 있고, 비밀 편지는 코드로만 열려요.
신경 쓴 것
네트워크가 끊겼다가 같은 요청을 다시 보내도 같은 편지, 같은 코드가 돌아와요. 모션을 줄이는 설정에서는 연출도 함께 줄어들어요.
04재료와 배포
- React Three Fiber
- Three.js
- GSAP
- Node.js
- SQLite
Coolify집 서버
Node 기본 HTTP 서버와 SQLite만으로 돌아가서 Coolify에 Dockerfile 하나로 올렸어요
git pushCoolifyred-postbox.todah.dev
- 시작
- 최근
- 기간
- 16일
- 커밋
- 6개
한 획에 커밋 하나, 파란 획이 마지막 커밋이에요