<aside>
친구들이 그려 준 내 모습을 모으고, 마음에 드는 그림을 이미지로 공유하는 웹 서비스입니다.
스케치북을 만들어 링크를 보내면 친구들은 회원가입 없이 그림을 남길 수 있습니다.
</aside>
| 구분 | 내용 |
|---|---|
| 기간 | 2026.08 ~ 현재 |
| 참여 형태 | 개인 프로젝트 · 기여도 100% |
| 담당 | 기획 · 디자인 · 프론트엔드 · 서버 API · Firebase 데이터 저장 |
| 핵심 기술 | Next.js · React · TypeScript · Firebase · Canvas API |
친구마다 기억하는 내 모습이 다르다는 점을 그림으로 모아 볼 수 있는 서비스입니다. 스케치북 주인은 받은 그림을 관리하고, 마음에 드는 그림을 골라 한 장의 이미지로 저장할 수 있습니다.
링크를 받은 친구가 바로 참여할 수 있는 흐름과 그림을 받은 뒤 관리하고 공유하는 흐름을 함께 구현했습니다.
스케치북 만들기 → 링크 공유 → 친구 그림 참여 → 그림 관리 → 이미지 저장
제작 화면은 실제 서비스에서, 그림 편집·관리·공유 화면은 같은 프로젝트를 로컬에서 실행해 캡처했습니다. 그림과 이름은 설명용 예시 데이터입니다.
이름과 관리용 비밀번호를 설정합니다. 내가 생각하는 내 모습을 직접 그리거나 이미지로 가져올 수도 있습니다. 만든 스케치북의 링크를 친구에게 보냅니다.
이름과 관리용 비밀번호를 입력하는 실제 제작 화면
친구는 가입 없이 링크를 열어 그림을 그리고, 이름과 한마디를 남깁니다. 펜 색상·굵기 조절, 지우개, 되돌리기 기능을 제공합니다.
실제 그림판에서 예시 초상화를 그린 화면
주인은 그림을 숨기거나 BEST 1~4위를 변경할 수 있습니다. 처음 받은 그림은 빈 BEST 자리에 기본 배치됩니다.
주인이 직접 순위를 선택하는 관리 화면
그림 한 장 또는 BEST 그림을 모아 공유 이미지를 만듭니다. 배경과 제목을 고른 뒤 PNG 파일로 저장할 수 있습니다.
친구가 남긴 그림으로 만든 정사각형 공유 이미지 미리보기
BEST는 투표나 좋아요로 정해지는 인기 순위가 아니라, 스케치북 주인이 변경할 수 있는 그림 순위입니다.
모바일에서는 선을 잘못 긋거나 확대하려다가 원치 않는 선이 생길 수 있습니다. 손을 뗄 때마다 그림 상태를 기록해 되돌리기와 다시 실행을 제공했습니다.
두 손가락으로 확대하는 동작이 시작되면 아직 완료하지 않은 선을 되돌려, 확대 동작과 그리기가 섞이지 않도록 처리했습니다. 확인한 그림도 편집기를 다시 열어 이어 그릴 수 있습니다.
친구가 그림을 남길 때는 회원가입을 요구하지 않습니다. 대신 그림 숨김이나 순위 변경처럼 주인만 해야 하는 작업은 관리용 비밀번호로 구분했습니다.
비밀번호는 원문 대신 복원하기 어렵게 변환한 값을 저장합니다. 로그인 뒤에도 서버가 관리 권한을 확인하고, 비밀번호를 반복해서 잘못 입력하면 일정 시간 다시 시도하지 못하도록 제한했습니다.