비오는 날🌧️부터 화창한 날⛅️까지: FashionCloud와 함께하는 매일의 스타일

5 min readNov 23, 2023

우리는 자주 이런 경험을 한다. 아침에 옷장 앞에서 서성이다가, “이 정도면 괜찮겠지?”라며 대충 차려입고 집을 나선다. 그러나 외출 후에는 너무 덥거나, 추워서 후회하는 순간들이 생기죠.

이러한 일상의 불편함을 해소하고자, FashionCloud를 개발했다. FashionCloud는 날씨에 따라 데일리룩을 공유하는 SNS 서비스이다. 사용자의 현재 위치를 바탕으로 날씨 정보를 제공하며, 비슷한 기후 조건을 가진 지역의 사용자들과 패션 정보를 공유할 수 있다.

프로젝트의 출발: 기상 정보와 패션의 만남

처음 프로젝트를 기획할 때, 우리는 항로 및 도로의 기상 정보에 중점을 두고 주제를 고민했다. 특히, 실시간 데이터 관리와 시간대별 업데이트가 가능한 주제에 대한 필요성을 중요하게 생각했다. 이 과정에서 다양한 아이디어를 탐색하며 실시간 데이터의 유용성과 실현 가능성을 고려했다. 최종적으로, 이러한 요소들을 고려하여 날씨 정보 활용이라는 주제를 선택하게 되었다.

날씨 정보는 일상생활에 밀접하면서도, 매일매일 다른 변수를 제공한다. 이는 패션 선택에 중대한 영향을 미치죠. FashionCloud는 이러한 날씨의 변화를 사용자에게 제공함으로써, 그들이 더 나은 옷차림 선택을 할 수 있도록 도와준다.

FashionCloud: 사용자 경험을 중심으로 한 개발

FashionCloud의 개발은 사용자의 위치 정보와 날씨 정보를 중심으로 진행되었다. 이를 통해 사용자들에게 맞춤형 패션 정보를 제공하고, 사용자 간의 상호작용을 촉진하는 기능들을 구현했다.

위치 및 날씨 데이터의 활용

위치 데이터: ‘useGeoLocation’을 활용하여 사용자의 위도와 경도를 얻는다. 이 데이터는 백엔드의 위치 API와 날씨 API에 전송되어, 사용자에게 맞춤형 정보를 제공하는 데 사용된다.

개발된 페이지와 기능들

메인페이지

현재 위치 및 날씨 정보 확인: 사용자는 현재 위치와 관련된 날씨 정보를 쉽게 확인할 수 있다.
패션 추가하기: 사용자는 자신의 패션을 추가하여 공유할 수 있다.
모든 패션 보기/팔로워 보기: 모든 사용자들의 패션을 볼 수 있고, 필요에 따라서는 팔로워들의 패션만을 볼 수 있다.
날씨로 패션 검색하기: 특정 날씨 조건에 맞는 패션을 검색할 수 있다.
패션 상세 정보: 패션을 클릭하면, 그 당시의 날씨 정보와 사용자의 리뷰를 볼 수 있습니다.

마이페이지

게시글 관리: 자신이 올린 게시글을 볼 수 있습니다.
룩북 관리: 새 룩북을 만들고, 메인페이지의 패션 중 원하는 스타일을 나만의 룩북에 추가할 수 있다.

스토리

스토리 기능: 사이드 바를 통해 접근할 수 있는 스토리 기능을 통해, 팔로우하는 사용자들이 24시간 이내에 올린 게시글을 볼 수 있다. 이는 react-insta-stories 라이브러리를 사용하여 개발되었다.

FashionCloud: 사용자 경험을 최우선으로

FashionCloud는 사용자의 현재 위치를 기반으로 한 날씨 정보를 제공하며, 이를 통해 사용자는 그날의 온도, 습도, 기상 상태 등을 쉽게 알 수 있다. 또한, 같은 날씨 조건을 가진 다른 지역의 사용자들과 스타일을 공유할 수 있는 서비스를 마련했다. 이는 다양한 스타일의 영감을 얻고, 동시에 날씨에 적합한 복장을 선택하는 데 도움이 될 것이다.

FashionCloud: 프론트엔드 개발의 여정

내가 맡은 역할은 FashionCloud 프로젝트의 UI/UX 디자인과 Frontend 개발이었다. 이 글에서는 주로 프론트엔드 개발 과정에 대해 공유하고자 한다.

개발 스택 개요

FashionCloud 프로젝트의 전체 개발 스택은 다음과 같다:

NextJS로의 마이그레이션과 문제 해결

최근 전체 리팩토링을 진행하며 서버 사이드 렌더링(SSR)과 검색엔진 최적화를 위해 ReactJS에서 NextJS로 마이그레이션을 했다. 이 과정에서 NextJS와 Recoil을 함께 사용할 때 발생하는 ‘Duplicate atom key’ 에러에 직면했다. 이는 NextJS의 개발 중 핫리로딩과 Recoil의 상태 관리가 충돌하면서 발생한 문제였다. 이를 해결하기 위해 Zustand로 전환하여 개발 안전성과 호환성을 높였다.

API 호출 로직과 코딩 컨벤션 개선

리팩토링을 통해 API 훅을 분리하고, 데이터 페칭 및 상태 관리를 개선하기 위해 react-query를 활용했다. 또한, 코딩 컨벤션과 일관성 유지를 위해 Eslint와 Prettier를 설정했다.

결론: FashionCloud와 함께하는 매일의 스타일링

FashionCloud는 단순한 패션 추천 서비스를 넘어 사용자의 일상에 밀접하게 연결된 생활 솔루션을 제공한다. 날씨 정보를 통해 매일의 옷차림을 결정하는 것은 이제 더 이상 어렵지 않다. 저희 FashionCloud와 함께라면, 매일 아침 당신의 스타일을 새롭게 정의할 수 있을 것이다.