0. 배포 사이트

서비스 링크

(ctrl + 좌클릭시 새 창으로 이동이 됩니다.)

1. Project Overview (프로젝트 개요)

• 프로젝트 이름: 다솜이 2.0
• 프로젝트 설명: 대학교 기숙사 룸메이트 매칭 서비스 개선 버전

2. Project Purpose (프로젝트 목적)

기존 룸메이트 매칭 서비스의 복잡한 회원가입 절차와 불편한 UI/UX를 개선하고,
세분화된 맞춤형 필터 기능을 통해 사용자가 최적의 룸메이트를 찾을 수 있도록 고도화했습니다.

3. Key Features (주요 기능)

• 로그인:
  • Oauth를 통해 카카오 로그인으로 회원가입을 간소화 하였습니다.
    
    
  

• 메뉴 목록:
  • 로그인 후 메뉴 리스트를 볼 수 있습니다.
    
    
  

• 내 정보 관리:
  • 학과 변경, 닉네임 변경 등 내 정보를 수정하거나 탈퇴할 수 있습니다.
    
    

• 룸메이트 등록하기:

  • 룸메이트를 구하기 위해 등록하기 버튼으로 나의 룸메이트 정보를 등록할 수 있습니다.
    
    

  
  
  

  • 룸메이트 매칭 상태를 변경할 수 있습니다. (매칭 중, 매칭 완료는 매칭 신청을 할 수 없게 구현하였습니다.)
    
    
  

• 룸메이트 찾기:

  • 각 관을 구분하여 등록된 룸메이트 정보들을 볼 수 있습니다.
  • 필터를 이전보다 더 세분화하여 원하는 정보를 더욱 쉽게 찾을 수 있도록 하였습니다.
    
    

  
  
  
  
  
  
  

• 문의하기:

  • 실서비스를 운영하니 문의사항이 올 수 있습니다. 실시간으로 문의를 받기 위해 오픈채팅 링크로 이동하는 버튼을 만들었습니다.
    
    
    
    

• 관리자 페이지:
  • 가입자, 매칭 상태를 실시간으로 조회할 수 있습니다.
    
    
    

4. Improvements (개선사항)

1. 이미지 최적화 방법 중 압축된 포맷 확장자 webp를 사용하였습니다.
   더나은 최적화 방법이 있을지 확인 중 webp보다 압축률이 좋은 확장자 avif를 알게 되면서 적용하였습니다.
   
   
   
   

2. PWA 적용
   
   
   모바일로 이용하는 유저가 많을 것이라 예상하여 보다 나은 사용자 경험을 위해 적용하였습니다.
   next-pwa 라이브러리를 이용하여 구축하였습니다.
   
   
   
3. 렌더링 최적화
   useCallback, React.memo를 이용하여 불필요한 렌더링을 최소화 하였습니다.

4. 로그인 유지 깜빡임 현상
기존 헤더는 SSR 형태로 로그인 유지를 하였습니다. 모든 페이지에 헤더가 필요하다보니 SSG가 아닌 SSR로 빌드되는 현상이 생겼습니다.
이를 해결하기 위해 헤더를 클라이언트로 바꾸고 깜빡임 현상이 있는걸 발견하여 실서비스 사이트를 몇 군데 둘러보고 사용자가 불편함을 느끼지 않게 프로필 메뉴바를 만들어 로그인 상태를 확인할 수 있게 하였습니다.


5. suspense를 활용한 로딩 스피너, 스켈레톤 UI 적용
사용자의 이탈을 막고, 어떤 것들이 렌더링 될지 미리 알려주는 효과를 주기 위해 적용하였습니다.






6. 페이지 렌더링 시 이미지 깜빡임 현상 (+ LCP 개선)
초기 진입 시 또는 새로고침 시에 이미지 로딩 시에 좀 더 매끄러운 사용자 경험을 위해 blur 효과 적용하였습니다.

6. Technology Stack (기술 스택)

기술	아이콘
HTML5
Tailwind CSS
TypeScript
Next.js
Supabase