"오늘 뭐 입지?" 고민하다가 4시간 만에 만든 '깔롱진 옷장' 제작기

고등학교 입학을 앞두고 공부하느라 바쁜 요즘이지만, 오래간만에 학원이 없는 토요일이 찾아와 웹 서비스 아이디어를 찾고 있었다. 그러다 매일 입을 옷을 옷장 앞에서 휘적거리는 대신, 침대에 누워서 폰으로 내 옷들을 슥슥 넘겨보며 코디할 수 있으면 좋겠다는 생각이 들어 웹사이트를 만들어보았다.

https://closet.seeun.kim/

깔롱진 옷장

 

 

 

테크 스택

빠르게 만들고 배포하는 토이 프로젝트로 기획된 웹사이트기에, 가성비가 좋은 프레임워크와 기술들을 사용해 보았다.

한 달 전쯤에 보안 취약점으로 이슈가 되기도 했지만 프론트엔드와 간단한 백엔드 구현까지 빠르게 할 수 있는 Next.JS를 선택했다. 최근 v16을 릴리스하며 Turbopack도 정식 지원한다. 익혀두면 쓸 일이 많은 프레임워크다 보니 겸사겸사 학습을 위해서 택했기도 하다.

그 다음은 Firebase다. 서버 구축 없이 인증 (Authentication), 데이터베이스 (Firestore) 그리고 스토리지 (Storage)까지 구현할 수 있기 때문이다.

 

기능 1: 옷 등록 및 카테고리 지정

 

유저는 사진을 선택하거나 (모바일의 경우) 촬영하여 이미지를 업로드할 수 있다. 그 뒤 모자/상의/하의/신발/액세서리 5가지 카테고리 중 하나로 분류해 등록이 가능하다.

 

구현 과정에서 Firebase 스토리지의 도움을 받았다. Pay-as-you-go로 가는 Blaze 요금제는 총합 5GB의 데이터를 저장하고 월 10GB의 트래픽까지 무료로 사용할 수 있게 해 준다. 용량이 큰 이미지가 많아질 경우를 대비하여, browser-image-compression 라이브러리도 함께 사용했다. 

const compressedFile = await imageCompression(file, { maxSizeMB: 0.2, maxWidthOrHeight: 800 });

 

라이브러리를 사용하면 이런 식으로 용량 한도를 200KB까지, 최대 사이즈를 800까지 등으로 지정하여 압축이 가능하다. 모바일에서는 화질이 조금 깨진다 한들 육안으로 크게 표시 나지 않기에 이런 식으로 제한해 두어도 좋다. 혹시 모를 언젠가를 대비하여.

기능 2: 믹스 앤 매치 (Mix & Match)

옷장을 헤집는 것 대신, 화살표로 왔다 갔다 넘기면서 코디를 정할 수 있다. 

 

각 카테고리(모자, 상의, 하의 등) 별로 현재 보이는 아이템의 인덱스를 관리한다. 왼쪽 화살표 (뒤로 가기)를 누르면 -1, 오른쪽 앞으로 가기 화살표를 누르면 +1을 더해서 배열 안 아이템을 보여준다. 배열의 길이를 초과하거나 음수가 되지 않도록 다시 돌아오는 순환 로직도 적용했다.

기능 3: 코디 저장

자기 전 "내일 뭐 입지?" 하며 고민하는 상황에 대비해, 무신사의 '스냅'이나 룩북처럼 세트를 만들 수 있다. 코디의 이름을 지정하고, 하단 '나의 코디북' 탭에서 재조회가 가능하다.

 

코디를 만들면 Firestore 'outfits' 테이블에 저장된다.

 

각 코디는 아이템들에 대한 정보와 이름, 만든 유저의 아이디 값을 가지고 있어서 다시 로그인하거나 접속 기기가 바뀌어도 사라지지 않고 계속 남아있다. 또 생성 시간을 표시해 두어 언제 이 룩을 입었는지 또는 고안해 보았는지 까지 가볍게 확인할 수 있겠다.

 

후기

'코몽 프로젝트' 개발 편에서는 제미나이가 초안을 작성해 주고, 내가 덧붙이는 방식으로 개발을 많이 했었다. 이번에는 Next.JS와 자바스크립트 능력을 기르고 싶은 마음과 약간의 오기(?)가 생겨서 지루하고 현학적인 개인정보취급방침을 제외하면 Copilot 정도의 도움만 받았다.

생각보다 구현이 어려웠던 기능은 의외로 첫 화면에서 보이는 'Google 계정으로 계속하기'였다 (ㅋㅋ). create-next-app으로 생성된 템플릿에서 src, lib, components 폴더들을 추가하고, router로 로그인 후 /app으로 이동하고, 다시 인증 정보를 받고 등등.. 그래도 한번 해봤으니 다음에는 더 빨리 해볼 수 있겠지?

다음번에는 생성형 인공지능을 연결해서 자동 코디 추천 같은 기능을 만들어보도록 하겠다.

 

글 읽어주셔서 고맙고, 조만간 또 돌아오겠습니다!