[사이드 프로젝트] BE 개발자의 FE 도전기

Jung·2024년 5월 10일

사이드 프로젝트

백엔드 개발자로 커리어를 시작해 어느덧 3년차 개발자가 되었네요. 설날 연휴동안 혼자서 사이드 프로젝트를 진행해 완성했지만 보완하고 다시 만지다보니 이제서야! 공개를 하게 됐습니다.

연휴 때 계속 이 상태였는데요. 쉬어도 쉬는 게 아닌 거 같던 기억이 ㅎㅎ 그치만 재미있었어요.
재미있었으면 됐지~

시작하게 된 이유

이유는 간단해요. 제가 사용하려고 만들었어요 :) 좋은 사람들과 좋은 추억이 담긴 사진을 모아 예쁘게 만들 수 있으면 더 좋잖아요 ㅎㅎ 꼭 포토 부스에서 찍은 게 아니더라도,,,

Photato

우선 사이드 프로젝트의 이름은 Photato 입니다. 포테이토예요. 왜 이름을 이렇게 지었냐면 제가 감자를 좋아하거든요 😋 안주에 감자튀김은 필수.. 😋

그래서 서비스의 컨셉을 감자로 잡았어요. 감자가 사진 찍어준다는 느낌을 주기 위해 Photo + Potato = Photato가 된 거죠. 나름 이름 잘 지은 거 같은데 혼자만 그렇게 느끼나...

아무튼! 요즘 인생네컷이나 포토이즘 이런 사진찍는 포토 부스가 많이 생겨서 사람들이 많이 이용하고 추억을 간직하는 걸 알 수 있어요. 포토 부스 기계가 네컷 사진을 프린트 해주기도 하고 QR 코드를 통해 다운로드 받아서 갤러리에 소장하기도 하죠. 이런 게 유행이어서 사람들이 포토샵으로 편집해서 프레임에 사진을 합성하기도 해요. 포토샵으로 편집하는 과정을 줄이고자, 또 제가 야무지게 사용하려고 사이드 프로젝트를 하기로 생각했죠.

Photato URL 주소

https://www.photato.kr

커피 값 아껴서 도메인도 구매해서 붙였고, 원래는 처음에 photato.site 도메인을 구매해서 사용하다가 최근에 다시 photato.kr 도메인을 샀어요... .site가 이벤트해서 2000원대였는데 1년 지나면 6만원이나 내야 되더라구요. .kr은 이벤트 안 해도 1년에 2만원대라서... 미래를 생각해 울며 겨자먹기로 .kr를 다시 구매했습니다. 그래서 그냥 photato.kr로 리다이렉트 되게 해두었어요.

Next.js를 사용해서 배포는 Vercel로 했어요. 사진을 DB에 보관하지 않기도 하고 백엔드 서버가 따로 필요하지 않을 것 같더라구요. 그래서 배포가 간단한 Vercel로!!
사용자가 만든 사진을 DB에 보관하게 되면,, 머리 아플 일이 많아질 것 같아 과감하게 클라이언트에서만 사진을 처리하도록 했습니다.

PWA로 적용해서 크롬이나 사파리에서 앱 다운로드가 가능한데 매번 브라우저에서 주소창에 입력하기 귀찮으신 분들을 위해! 준비했습니다.

(사실 서비스 워커 추가하고 브라우저에 캐싱 해두면 인터넷 연결 없이도 사용이 가능하게 했었는데 현재는 꺼두었습니다.. 나중에 다시 켤 수도?)