🔗 배포 URL

English With Suits

💁‍♀️ 서비스 소개

• 미드 ‘Suits’에 등장하는 유익한 비즈니스 영어 회화 표현들을 학습할 수 있는 서비스입니다.
• ‘Suits’로 영어를 공부하는 유저들이 반복 학습을 통해 회화 표현들을 효과적으로 익힐 수 있도록 돕기 위해 개발하게 되었습니다.

🌱 주요 개발 사항

• 검색 엔진 최적화(SEO)
  • Next.js의 SSR(Server-Side Rendering)을 활용하여 검색 엔진 최적화 작업을 진행함으로써 서비스의 접근성을 향상시켜 더 많은 사용자들이 서비스를 발견하고 이용할 수 있도록 처리했습니다.
• 회원가입 및 소셜 로그인 기능 구현
  • Supabase를 사용하여 사용자가 손쉽게 회원가입을 하고, Google, Kakao 등 다양한 소셜 계정을 통해 로그인할 수 있도록 구현하였으며, 유저 데이터의 안전한 관리를 보장했습니다.
• PDF 뷰어 및 스크립트 파일 다운로드 기능 구현
  • 유저들이 ‘Suits’의 스크립트를 쉽게 볼 수 있는 뷰어 기능을 제공합니다.
  • 스크립트 파일을 다운로드할 수 있습니다.
  • 뷰어 내에서 텍스트를 선택(복사 및 붙여넣기) 가능하며, 양쪽으로 드래그 혹은 슬라이드 터치로도 페이지 전환이 가능합니다.
• 비즈니스 영어 표현 학습하기
  • 발음 청취: Web Speech API를 활용하여 정확한 발음을 들을 수 있으며, 개인의 취향에 따라 발음 목소리 선택이 가능하도록 하여 학습 편의성을 높였습니다.
  • 표현 저장하기: 북마크 기능을 통해 마음에 드는 표현을 저장하고 마이페이지에서 반복 학습할 수 있습니다.
  • 다른 예문 학습: YouGlish URL 연결을 통해 해당 표현이 사용된 다양한 예문을 학습할 수 있습니다.
• 학습 복습 기능 제공
  • 비즈니스 영어 표현을 효과적으로 학습할 수 있도록 문장 배열 완성 퀴즈를 통해 사용자가 배운 내용을 복습할 수 있는 기능을 구현했습니다.
• 다크모드, 라이트 모드 전환
  • 사용자의 시각적 편안함을 위해 다크모드와 라이트 모드를 자유롭게 전환할 수 있는 기능을 제공하여 다양한 환경에서의 사용성을 높였습니다.

🛠️ 기술 스택

• Next.js (App Router)
  • React 기반의 프레임워크로서, 서버 사이드 렌더링과 정적 사이트 생성을 통해 빠르고 효율적인 웹사이트를 구축했습니다.
• Typescript
  • 정적 타입을 사용하여 코드의 안정성과 가독성을 높였습니다.
• Supabase
  • BaaS(Backend as a Service)를 통해 빠르고 쉽게 데이터베이스와 인증 기능을 구축했습니다.