클룸( Cl:ass Room )
클룸은 원데이 클래스를 예약 및 등록 할 수 있는 원데이 클래스 웹사이트입니다.
•
원데이 클래스에 참여하고자 하는 선생님과 수강생을 위한 플랫폼입니다.
•
수강생은 다양한 종류의 원데이 클래스를 검색하고 원하는 클래스를 예약할 수 있습니다.
•
선생님은 강사등록 기능을 통해서 열고자 하는 원데이 클래스를 등록 및 개설할 수 있습니다.
원데이 클래스 신청과 등록을 한 번에!
아키텍쳐
주요 기술
카테고리 필터링 기능
사용자가 원하는 클래스를 쉽게 찾을 수 있도록 다양한 필터 옵션을 제공합니다. 이 옵션에는 클래스의 유형, 지역, 요일, 시간, 난이도, 금액 등이 포함되어 있으며, 사용자는 다양한 조건을 조합하여 원하는 클래스를 손쉽게 검색할 수 있습니다.
메인페이지 및 카테고리 기능
채팅
채팅 기능을 통해 수강생은 클래스에 대한 질문을 하거나 강사와 소통할 수 있는 문의 기능을 사용할 수 있습니다. 이를 통해 수강생과 강사 간의 원활한 의사소통을 지원합니다.
채팅 기능
마이페이지
•
수강생 기능: 자신의 프로필, 신청한 클래스 목록, 작성한 후기, 클래스 위시리스트 등을 확인하고 수정할 수 있습니다.
•
강사 전환 기능: 수강생은 강사 등록에 필요한 정보를 입력하여 프로필을 강사 프로필로 전환할 수 있습니다.
•
강사 기능: 강사로 등록한 사용자는 자신이 개설한 클래스를 확인하고 수정할 수 있습니다.
마이페이지
클래스 등록하기
•
클래스 개설을 원하는 사용자는 강사로 등록(전환) 후 클래스 등록하기 기능을 통해 직접 클래스를 개설할 수 있습니다.
클래스 등록 기능
클래스 예약하기
•
수강생은 원하는 클래스를 선택하여 예약할 수 있습니다. 이 기능을 통해 사용자는 간편하게 클래스를 예약할 수 있습니다.
클래스 예약 기능
클래스 결제하기
•
클래스를 선택하고 예약을 위해 결제를 진행할 수 있는 기능입니다.
클래스 결제 기능
알림 기능 & 찜 기능
•
클래스 등록 알림: 강사가 새로운 클래스를 등록하면 관련 정보와 함께 알림을 받아 확인할 수 있습니다.
•
클래스 예약 알림: 수강생이 클래스를 예약하면 예약 성공을 알리는 알림을 받습니다. 이는 예약 과정이 완료되었음을 사용자에게 확인시켜 줍니다.
알림 기능
•
찜 기능: 리스트 페이지와 디테일 페이지에서 하트 버튼을 눌러 원하는 클래스를 위시리스트에 추가할 수 있습니다.
찜 기능
소셜 로그인
•
다양한 소셜 로그인으로 쉽고 빠르게 회원가입/로그인 가능합니다.
소셜 로그인 기능
챗봇
•
사이트를 이용하면서 사용방법 또는 궁금증을 해소할 수 있습니다.
챗봇 기능
모바일 버전 출시 (반응형 UI)
모바일 버전 확인하기
기술적 의사결정
FRAMEWORK
Next.js.
프레임워크로 Next.js를 선택한 이유는 다음과 같습니다.
1) 서버사이드 렌더링(SSR, ISR)과 정적 사이트 생성(SSG)을 지원하여 SEO 최적화에 매우 유용합니다. 이를 통해 검색 엔진에 상위 노출 될 수 있도록 할 수 있습니다. 또한 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)을 유연하게 조합할 수 있다는 장점이 있으며, 이를 통해 초기 로딩 속도를 개선 할 수 있습니다.
2) Next.js에서 제공해주는 이미지 컴포넌트를 활용하여 이미지 최적화를 쉽게 처리하여 웹 페이지의 성능을 향상 시키는데 중요한 역할을 합니다.
3) 라우트 핸들러를 통해 백엔드 로직을 효율적으로 처리할 수 있습니다. 서버 사이드에서 API 호출과 같은 백엔드 작업을 직접 관리하고 응답하게 하여, 프론트엔드와 백엔드 로직을 하나의 프레임워크 내에서 통합적으로 관리할 수 있습니다.
4) 미들웨어를 통해 로그인 여부에 따른 페이지 접근 제한을 할 수 있습니다. 이를 통해 사용자 권한 관리를 효과적으로 처리할 수 있습니다.
LANGUAGE
Typescript
최종 프로젝트 언어로 typescript를 선택한 이유는 다음과 같습니다.
1) 정적 타입 언어로 휴먼 에러를 최소화 할 수 있다는 큰 장점이 있습니다. 런타임 시 발생할 수 있는 버그를 컴파일 단계에서 타입 검사를 수행함으로써 버그를 발견하고 수정할 수 있어 코드의 안정성을 높일 수 있습니다.
2) 프로젝트 진행 시, 팀원 모두가 공통된 타입을 사용하는 경우가 잦아 하나의 공통된 타입을 지정하고, 다양한 유틸리티 타입을 활용함으로써 코드의 일관성을 높이고, 유지보수성이 향상됩니다.
AUTHENTICATION
NextAuth v.s Supabase Authentication
로그인/회원가입으로 NextAuth를 선택한 이유는 다음과 같습니다.
1) 소셜 로그인 지원 :
NextAuth는 다양한 소셜 로그인을 지원하고 사용자 인증을 용이하게 구현할 수 있습니다. 반면 supabase는 Next Auth에 비해 소셜 로그인 기능이 제한적입니다.
2) 프레임워크 특화 설계 및 커스터마이징 용이성 :
NextAuth는 Next.js에 특화되어 API 라우트나 서버사이드 미들웨어를 이용해 경로별 접근 권한을 제어 등쉽게 설정할 수 있고 인증 과정 커스터마이징이 쉽습니다. 반면, supabase에서도 비슷한 기능을 구현할 수 있으나 Supabase의 규칙과 통합된 보안 기능을 통해 이루어져 NextAuth보다 복잡합니다.
DATABASE
Supabase v.s. Firebase
데이터베이스로 supabase를 선택한 이유는 다음과 같습니다.
1) SQL 기반의 관계형 데이터베이스를 제공하여 여러 테이블 간의 관계를 설정하고 복합한 데이터를 효율적으로 처리할 수 있습니다. 반면, Firebase의 경우 NoSQL 데이터베이스로, 복잡한 쿼리 사용이나 데이터 조인 작업이 어렵습니다.
2) SQL Query Editor와 rpc(remote procedure call)를 통해 복잡한 쿼리를 처리하고, table 간의 데이터를 조인해서 불러올 수 있습니다.
3) Supabse는 Storage 서비스를 통해 파일 및 이미지 관리를 효율적으로 할 수 있습니다.
DESIGN
DaisyUI
기획 단계에서 다양한 Design system을 찾아보았지만, 저희 웹 서비스에 가장 잘 어울리고 필요한 기능이 많아 채택하게 되었습니다. 예를 들어, collapse, dropdown, rating 등 다양한 디자인 요소를 제공하고, 쉽게 적용할 수 있습니다.
또한 Next.js 프레임워크와 Tailwind CSS와의 호환성이 뛰어납니다.
Tailwind CSS
Next.js 프레임워크와 호환성이 매우 좋고, 인라인 스타일이 아닌 컴포넌트 기반의 스타일링을 쉽게 구현할 수 있습니다.
또한 일관된 디자인 시스템을 구축하는데 유용하며, 색상, 텍스트 스타일, 레이아웃 등을 일관성 있게 적용 할 수 있는 장점이 있습니다.
Figma
피그마는 디자이너 사이에서도 많이 사용이 되고 있으며, 현업에서도 많이 활동되는 디자인 툴이기에 초기 기획 단계부터 와이어프레임 작성 시 피그마를 활용하였습니다. 또한 실시간 협업 기능을 제공하여 디자이너와 개발자 간의 실시간 소통과 협업이 원활하게 진행되었습니다.
DEPLOYMENT
Vercel
Next.js와의 통합이 매우 우수하여 배포를 위한 최적화된 환경을 제공해줍니다. 또한 CLI(Command Line Interface)를 통해 쉽고 간편하게 배포를 관리할 수 있으며, Github과의 통합을 통해 자동 배포를 설정할 수 있어 미리보기를 통해 변경 사항을 신속하게 확인 할 수 있습니다.
LIBRARY
Tanstack-Query
서버 상태 관리 라이브러리도 tanstack-query를 선택한 이유는 다음과 같습니다.
1) Tanstack Query는 서버 상태를 효율적으로 관리할 수 있는 강력한 라이브러리입니다. Query와 Mutation을 통해 서버와의 데이터 통신을 진행하고, 데이터의 변경 및 업데이트를 관리할 수 있습니다.
2) 데이터의 로딩 상태와 오류를 쉽게 관리할 수 있습니다. isPending, isLoading, error 등을 통해 쿼리의 실행 상태를 추적할 수 있으며, 현재 로딩 중인지, 성공했는지, 또는 오류가 발생하였는지를 편하게 확인할 수 있습니다.
Zustand
전역 상태 관리 라이브러리로 Zustand를 선택한 이유는 다음과 같습니다.
1) 컴포넌트 간의 상태 공유 및 업데이트가 용이하고 redux에 비해 사용이 간편합니다. Redux보다 코드의 양도 줄이고, 상태관리를 간편하게 처리할 수 있습니다.
2) 보일러 플레이트 코드가 Redux에 비해 현저히 적습니다.
3) Redux와 달리 state 관리 로직이 하나의 함수 내에서 처리되므로 코드 가독성과 유지보수성이 높으며 디버깅을 하기에 유용합니다.
DOMPurify
sanitize 기능을 가지고 있어서 들어온 HTML의 <script>를 제거하여 XSS 공격을 막아줄 수 있습니다. 주로 dangerouslysetinnerhtml과 같이 쓰입니다. React-Quill을 통해 만들어진 클래스 설명 HTML을 안전하게 파싱하기위해 사용했습니다.
React-day-picker
사용자가 편리하게 날짜를 선택할 수 있도록 설계된 라이브러리입니다. 클래스 등록 페이지, 예약페이지, 디테일 페이지에서 날짜를 선택하거나 사용 가능한 날짜를 보여주는 등 다양한 상황에 맞춰 유연하게 사용할 수 있습니다. 또한, 특정 날짜를 비활성화하거나 특별한 날짜에 스타일을 적용하는 등 다양한 커스터마이징이 가능합니다.
Date-fns
달력 라이브러리를 사용하면서 데이터베이스에서 가져온 날짜 데이터와 로컬 시스템에서의 날짜 데이터를 원활하게 포맷팅하고 관리하기 위해 사용했습니다.
Medium-zoom
Medium-Zoom은 사용자가 상세한 이미지나 그래픽을 크게 보기 원할 때 사용자 경험(UX)을 향상시키기 위해 선택하였습니다. 이미지를 클릭하면 확대 시켜주어 사용자가 이미지의 세부 사항을 명확하게 볼 수 있습니다.
Toastify
전통적인 alert 대신 Toastify를 사용한 이유는 사용자의 작업 흐름을 방해하지 않으면서도 효과적으로 알림을 제공하기 위해서입니다. Toastify는 사용자 인터페이스의 일부로 부드럽게 통합되며, 사용자가 현재 수행 중인 작업을 중단할 필요 없이 메시지를 전달할 수 있습니다.
React-Quill
React-Quill은 텍스트 입력에 풍부한 텍스트 편집 기능을 제공하는 라이브러리입니다.
사용자가 자신의 클래스 설명을 예쁘고 전문적으로 꾸미길 원하는 사용자를 위해 선택하였습니다.
볼드체, 이탤릭체, 밑줄, 텍스트 컬러, 링크 삽입 등 다양한 텍스트 편집 도구를 사용할 수 있습니다. 사용자가 자신의 클래스 설명을 예쁘고 전문적으로 꾸밀 수 있게 하여 수강생에게 보다 효과적으로 클래스를 소개할 수 있도록 했습니다.
Embla-carousel
캐러셀 라이브러리중 가볍고 자유도가 높아 커스터마이징을 하는데 용이하며 확장성이 뛰어납니다. 공식문서의 설명이 예제와 쉬운 문장으로 구성되어 있어 내장되어 있는 메서드를 이해하고 쓰기 쉽습니다. 메인페이지에서 여러개의 클래스를 보여줄 때, 클래스 디테일 페이지에서 여러개의 사진을 보여줄 때 사용하여, 사용자에게 풍부한 경험을 선사했습니다.
typebot.i
비기술적인 사용자도 쉽게 챗봇을 설정하고 관리 가능합니다.
자신의 요구사항에 맞춰 챗봇의 행동, 응답 및 인터페이스를 맞춤 설정 가능하여 다른 비즈니스와 상황에 적합한 챗봇을 만들 수 있게 해줍니다. 클룸 웹사이트에서 사용자가 자주 묻는 질문들을 챗봇을 통해 처리할 수 있도록하여, 고객 서비스의 효율성을 높이고 사용자 경험을 개선할 수 있었습니다.
API
Tosspayments
원데이 클래스라는 타이틀을 가지고 예약이 가능한 사이트임에도 불구하고 결제가 되지 않는다면 사용성에 있어서 test라는 경험을 줄 수 밖에 없다고 생각되어 사용자의 경험을 개선하기 위해 사용되었습니다.
1. 위험 없는 테스트 환경
: 테스트 결제 기능은 실제 돈이 오가지 않기 때문에, 개발 중인 결제 시스템을 안전하게 테스트 가능
2. 실제 결제 프로세스 모사(다양한 결제 시나리오)
: 테스트 결제는 실제 결제와 동일한 프로세스를 따르기 때문에, 사용자 인터페이스, 결제 진행 과정, 결제 완료 후의 모든 행동을 실제와 같이 경험 가능
React-kakao-maps-sdk
국내에서 널리 사용되는 지도 서비스 중 하나로, 사용자들이 익숙한 인터페이스와 다양한 기능을 제공합니다. 또한 react와의 통합이 원활하고 카카오 맵을 자유롭게 커스터마이징 할 수 있어 스타일링 기능을 통해 디자인 할 수 있습니다.
추가로 활발한 커뮤니티가 존재하며 문서화가 잘 되어 있어 map 라이브러리로 선택하였습니다.
React-daum-postcode
우편번호 서비스를 쉽게 사용할 수 있게 해주며, 사용자가 주소를 쉽고 빠르게 검색하고 선택할 수 있는 유저 친화적인 인터페이스를 제공합니다. 정확하고 최신의 주소 정보를 제공함으로서 클래스 등록 페이지에서 원데이 클래스가 열리는 장소를 쉽게 검색하고 등록할 수 있게 해줍니다.
트러블슈팅
팀 전체 build 시, error 발생 및 해결과정
라이브러리 css 충돌 해결과정
디테일 페이지 렌더링 방식 결정
선생님/수강생 role 전환 시, 문제 및 해결과정
Image url은 있는데 사진이 안 뜨는 문제 해결 (with supabase)
라우트 핸들러를 활용한 서버 사이드에서의 결제 승인 처리
Image 최적화 및 성능
로그인 프로세스와 관련된 문제 해결
클래스 예약 시스템의 데이터 구조 개선
