안녕하세요. DevFoliOh!입니다.
DevFoliOh!는 개발자들의 토이프로젝트 모아보기 서비스입니다. 이곳에 매주 새로운 프로젝트를 소개하고 있습니다.

🛎 메일로 새로운 프로젝트 알람 받기 🛎
🔍 좋은 프로젝트는 널리 공유해요! 소개하고 싶은 프로젝트를 여기에 공유해주세요 🔍

🎤 개발자 인터뷰 시리즈

이 프로젝트는 어떻게 만들었을까? 혹시 궁금했던적 없나요?
DevFoliOh!의 <개발자 인터뷰 시리즈>는 저희 사이트에 소개된 프로젝트의 개발자를 직접 인터뷰해서 프로젝트를 어떻게 만들었고, 어떤 어려움이 있었는지 등 프로젝트 개발의 생생한 이야기를 담아내려 합니다.

Q1. 프로젝트 소개 간단히 부탁드릴게요

colfume 프로젝트는 '컬퓸에서 색을 통해 당신의 향을 찾아보세요' 라는 슬로건을 가지고, 심리 테스트를 통해 맞춤 향수를 추천해주는 프로젝트예요. 그리고 테스트 결과를 다른 사람에게 공유할 수 있도록 하고 있어요.

Q2. 프로젝트 아이디어는 어떻게 얻었나요?

평소 향수에 관심이 많았어요. 여행을 다닐 때마다 향수를 시향하고 하나씩 사서 모으는 것이 취미였는데, 코로나가 터지고 여행은 물론 시향도 어려워졌죠. 이러한 상황 속에서 ‘시향을 하지 않고 향기를 전달할 수 없을까?’라는 고민과 함께 colfume 프로젝트를 시작했습니다.

향을 글로 전달하고 묘사하는 것은 대부분의 향수 브랜드에서도 제공하지만, 여전히 고객에게 어렵게 다가간다고 생각했습니다. 그래서 이것을 쉽게 풀어낼 방법에 대해 생각하다가 색상과 스타일, 키워드 등 직관적인 정보를 제공하는 방향으로 접근했습니다.

Q3. 팀빌딩은 어떻게 하셨나요?

colfume은 대학생연합 IT벤처창업 동아리 SOPT에서 진행된 프로젝트로 경선에서 선정된 PM의 기획을 중심으로 디자인, 프론트엔드 개발팀, 백엔드 개발팀이 구성되었습니다.

Q4. 사전 리서치는 어떻게 하시나요?

✏️ 기획팀 : 사전에 유사한 서비스가 있는지를 찾아봤는데, 국내에서 향수에 대한 정보를 제공하는 서비스를 발견하는 것이 상당히 어려웠어요. 국내 레퍼런스로는 화해, 파펨 등이 있고, 해외 레퍼런스로는 프래그런티카를 참고했습니다.

🎨 디자인팀 : 향수 이미지가 워낙 화려하다 보니 일러스트를 제외하고는 전체적인 무드가 ‘세련되고, 모던한’ 느낌이 났으면 했어요. 작업하기 전에 플랫한 디자인의 웹사이트를 최대한 많이 찾아보았고, 특정 디자인을 래퍼런스로 삼기보다는 각각의 래퍼런스에서 참고할만한 요소들을 발굴해내고 이에 colfume만의 매력을 더하려고 노력했어요.

💻 개발팀 : Next.js 프로젝트가 처음이라 초기 세팅과 프로젝트 구조에 대한 고민이 많았어요. 많은 분의 GitHub 보일러플레이트 코드와 이를 설명한 블로그 포스팅을 참고했습니다. 저희 프로젝트에서 사용하기로 한 기술 스택에 대한 설정만 참고해서 초기 세팅을 했고 이 과정에서 찾은 정보들은 노션에 정리한 후 계속 발전시키기 위해 노력하고 있습니다.

Q5. 기술 스택은 어떻게 선택했나요?

동아리의 웹 커리큘럼이 리액트여서 리액트를 선택했습니다. 상태관리 라이브러리로 Recoil을 사용한 이유는 비교적 적은 러닝 커브와 React hook과 사용하는 것이 비슷했기 때문이예요. 프로젝트 개발 기간이 3주인데 짧은 기간 동안 러닝 커브가 높은 Redux나 MobX를 새롭게 공부한 후 프로젝트에 바로 적용하기에는 어려움이 있을 거 같다고 생각했어요. 그리고 팀원 모두 hook을 사용하는 방식에 익숙해서 Recoil을 선택했습니다.

또 Next.js, TypeScript, SWR를 사용하였는데, 전에 사용해본 적 없지만 새롭게 공부해보고 싶은 기술이라 선택했습니다.

Q6. 프로젝트 소요시간은 얼마나 걸렸나요?

아이디어를 생각해내는 것까지는 그리 오랜 시간이 걸리지 않았어요. 그러나 향을 누구나 공감할 수 있는 색상, 키워드, 스타일로 정의하는 것에서 시간이 오래 걸렸어요. 기획자, 디자이너들과 각 색상이 어떤 느낌을 주는 향을 대표할 수 있는지, 그리고 각 키워드를 카테고리화 하는 것에 2주정도 시간이 걸린 것 같습니다.

colfume의 서비스 규모 자체가 그리 큰 편은 아니기에 디자인은 약 1-2주 개발은 3주 정도의 시간이 소요되었어요. 이후 릴리즈를 위해 한 달 동안 QA 작업을 추가로 진행해서 총 두 달 정도 개발했습니다. 개발 시작 전에 미리 나온 figma 디자인과 기능 리스트를 받아서 역할분담과 프로젝트 초기 셋팅을 어느정도 해놓았습니다.

Q7. 만들면서 어려웠던 점 혹은 고민됐던 것들이 많았을텐데, 이 중에 가장 어려웠던건 무엇이었나요? 어떻게 해결했나요?

🔍 프론트엔드 @mnxmnz님 : 유저를 구분해서 로딩뷰를 표시하는 작업이 어려웠어요. colfume 프로젝트에는 심리 테스트를 통한 맞춤 향수 추천 기능이 있는데 심리테스트에 처음 접속한 유저와 테스트를 마친 유저에게는 각각 다른 화면을 보여줘야했기 때문에, 이 둘을 구분하는 방법에 대해 고민이 많았어요.

다행이었던 점은 요즘 심리 테스트를 직접 구현하고 해당 코드를 GitHub에 등록한 분들이 많으셔서 다양한 자료를 참고할 수 있었죠. 이렇게 다른 분들의 실제 구현 코드를 참고한 후 저희 프로젝트 상황에 맞게 코드를 변경해서 해결했습니다. 링크 공유 버튼을 눌렀을 때 쿼리 스트링에 “shared=true”라는 문자열을 URL에 추가해서 심리 테스트 결과 페이지에 처음 접속했는지 확인하여 로직 처리를 할 수 있었어요

🔍 프론트엔드 @soryeongk님 : 두번 째로 어려웠던 점은 라이브러리 사용 과정이었어요. 라이브러리를 일부 수정해서 커스텀하는 과정이 꽤 험난했어요. 캐러셀 구현을 위해 가장 널리 쓰이는 것으로 보이는 react-slick을 사용했습니다. 그중, 가장 어려웠던 것은 슬라이드 콘텐츠 사이에 구분 선을 넣는 것이었어요. 오른쪽에 구분 선을 포함하여 하나의 콘텐츠로 만들었고, 구분 선의 너비와 여백을 계산해 중앙 정렬이 덜 깨지도록 하였습니다. 현재 더 좋은 해결책을 찾기 위해 공식 문서를 제대로 읽어보면서 코드를 리팩토링하고 있습니다.

팀차원에서 어려웠던 점은, 팀원은 많은데 (기획 2명, 디자인 1명, 프론트 4명, 백엔드 3명) 코로나 때문에 만날 수 없는 상황이라 온라인으로 소통해야 하는게 어려웠어요. 매일 회의하면서 커뮤니케이션을 더욱 활발하게 하고 슬랙과 노션을 잘 활용해야 했습니다.

프로젝트에 대해 더 알고 싶다면 🏄‍
DevFoliOh! 혹은 컬퓸 공식 노션 페이지에서 자세한 내용을 볼 수 있습니다.