포트폴리오
스캐치북 · 친구들이 그려 주는 나
친구들이 가입 없이 그림을 남기고, 주인이 관리·선택한 그림을 공유 이미지로 저장하는 웹 서비스입니다.
- 기간
- 2026.08–현재
- 프로젝트 유형
- 프론트엔드
- 역할
- 기획·디자인·프론트엔드·서버 API·Firebase 구현
- 문제
- 두 손가락 확대가 시작되면 완료하지 않은 선을 되돌려 그리기와 확대 충돌 방지
- 해결
- 회원가입 없이 링크로 참여하는 그림판과 이름·한마디 작성
- 결과
- 친구의 간단한 참여와 주인의 공개·순위 관리를 역할별로 구분
문제
친구가 링크를 열어 바로 그림을 남기고, 주인이 받은 그림을 관리해 공유 결과물까지 만들 수 있는 흐름이 필요했습니다.
제약
- BEST는 투표 결과가 아닌 스케치북 주인이 지정하는 그림 순위
- 작성 중인 그림의 새로고침 이후 자동 복구는 아직 보장하지 않음
핵심 결정
- 참여자는 회원가입 없이 그림을 남기고, 주인 작업은 서버에서 관리 권한 확인
- 두 손가락 확대 시 진행 중인 선을 복원해 모바일 제스처 충돌 해결
- WebP 변환과 별도 썸네일 생성으로 저장 크기·전송 용량 관리
구현
- 스케치북 제작 → 링크 공유 → 그림 참여 → 주인 관리 → PNG 저장
- 그림판 되돌리기·다시 실행과 기존 그림 이어 그리기
- 그림 숨김과 BEST 1~4위 변경, 한 장·BEST 공유 이미지 합성
한계와 다음 개선
- 작성 중인 그림 임시 저장과 새로고침 이후 복구 흐름 보완
사용 기술
- Next.js
- React
- TypeScript
- Canvas API
- Firestore
- Firebase Storage
- Sharp
구현 화면
