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