Trace 독서 활동 SNS 만들기 - 1

디듀·2026년 1월 15일
post-thumbnail

사이드 프로젝트를 시작해야겠다고 다짐한 지 벌써 1년... 2년이 지난 시점.
인프런에서 흥미 있는 강의가 올라오면 일 년에 몇 개씩 챙겨보기만 하고 그 기술을 도무지 어디서부터 어떻게 활용해야 할지 감을 못 잡고 있었다.

SNS로 사이드 프로젝트를 하고 싶다고 막연하게 상상만 했지만 사실 특색이 없기도 하고... 기획부터 와이어프레임, 디자인 그리고 구현까지 그 수많은 단계를 다 거치기에는 무척 큰 산을 앞에 두고 있는 막막한 느낌이 들었다. 모니터를 앞에 두고 뭔가 하나를 시작하려고 하면 딱 이런 기분.

그러다가 올해 11월. 이정환 님의 React와 TanstackQuery 강의를 듣고 강렬한 직감이 왔다. (강의 정말 잘 듣고 있습니다......)

이 프로젝트를 기반으로 해서 나만의 기능을 덧붙이면 나도 뭔가 하나는 만들 수 있겠구나!

...그래서 시작된 사이드 프로젝트! 이름하여 'Trace' 다.

기본은 SNS지만 사용자가 읽은 책을 등록하거나, 포스트를 올릴 때 책의 정보를 함께 등록할 수 있게 하여 가볍게 서로 독서에 대해 이야기를 나눌 수 있는 서비스를 만들고 싶었다. 막막한 느낌이 드는 것은 비슷했지만 적어도 1차적인 방향성은 잡았기 때문에 이번에는 포기하지 말고 끝까지 가보려고 한다. 아니, 끝까지 갈지 어떨지는 모르겠지만 일단 시작부터 해보려고 한다!

먼지 쌓인 아이패드와 함께 카페에 앉아 기능을 줄줄 써내려갔고 그중 단기간에 개발할 수 있는 것을 먼저 진행한 후 차근차근 기능을 덧붙이는 식으로 개발할 예정이다. 전직장에 다닐 때 어깨 너머로 배웠던 피그마도 이렇게 써먹는구나 ㅎㅎ 가볍게 와이어프레임 작업만 했는데 세상에나 1시간이나 지났을까 싶을 무렵부터 디자이너 분들이 존경스러워지기 시작했다......

이대로는 안 되겠다. 기획이 탄탄해야 롱런할 수 있다는 것을 알면서도, 나는 지금 당장 완성된 화면을 보고 싶었고 그렇지 않으면 모처럼 불붙었던 끈기가 그대로 사그라들 것만 같았다! 우선 서비스 구성을 위해 반드시 필요한 화면에 대해 레이아웃 정도만 잡은 후 디자인 부분은 AI의 힘을 빌리기로 했다.

결심을 했으면 바로 실행에 옮겨야 집중력이 흐트러지지 않으니, 바아로 프로젝트부터 생성! 프론트엔드 프레임워크는 React, 전역 상태 관리를 위한 라이브러리로는 Zustand를 택했고 서버 데이터는 TanstackQuery를 통해 다뤄보기로 하고, 추가적으로 react-hook-form과 Shadcn ui를 도입했다. 실무에서 사용해본 적은 없지만 예전부터 공부하고 싶다고 욕심내던 기술들이었다! 백엔드 처리는 Supabase로 결정! 로그인 구현도 쉽게 도와주는 부분이 마음에 들었다.

프로젝트를 생성하고, 필요한 라이브러리를 설치하고 기본 세팅을 마친 뒤 일차적으로 정리를 끝냈다. 부디 이 긴(?) 여정을 완주할 수 있기를......

profile
세상에서 가장 부지런한 사람이 되고 싶은 게으름뱅이

0개의 댓글