메인으로

칵테일 레시피 & 바텐딩 가이드 - 첫잔(FirstDrink)

프로젝트 수행기간 : 2026/03 ~ (진행중)

성과

  • 칵테일 레시피와 바텐딩 정보를 제공하는 서비스를 기획·디자인·개발까지 단독으로 진행
  • 직접 제작해 npm에 배포한 디자인 시스템(younique-ui)을 실제 서비스에 적용
  • Capacitor를 활용해 웹 서비스를 Android 앱으로 패키징
  • 기주(진·보드카·럼·위스키 등) 및 무드 태그 기반의 칵테일 탐색 기능 구현
  • Firebase Hosting으로 실제 배포 및 운영 (쿠팡 파트너스 제휴 연동)

사용기술

Next.js 16과 React 19 기반으로 서비스를 구축하고, TypeScript로 타입 안정성을 확보했습니다. App Router를 활용해 페이지를 구성했습니다.

shadcn/ui와 Base UI를 기반으로 직접 제작한 React 컴포넌트 라이브러리를 npm에 배포하고, 본 프로젝트의 UI 전반에 적용하여 일관된 디자인과 재사용성을 확보했습니다.

TailwindCSS v4를 사용해 빠르고 일관된 스타일링을 구성했습니다.

별도의 백엔드 인프라 없이 빠르게 서비스를 운영하기 위해 Firebase를 도입하여 데이터 관리와 호스팅을 구성했습니다.

Capacitor를 활용해 동일한 웹 코드베이스를 Android 앱으로 패키징하여 크로스 플랫폼으로 확장했습니다.

Playwright로 E2E 테스트를 구성하여 주요 사용자 흐름을 자동으로 검증할 수 있도록 했습니다.

주요 기능

진·보드카·럼·위스키·데킬라·브랜디 등 기주를 기준으로 만들 수 있는 칵테일을 탐색할 수 있도록 구현했습니다.

#클래식, #여름, #데이트, #달콤한 등 무드·상황별 태그로 칵테일을 발견할 수 있는 탐색 경험을 제공합니다.

칵테일을 만드는 데 필요한 도구들을 정리해 입문자가 무엇을 갖춰야 하는지 한눈에 볼 수 있도록 했습니다.

관련링크

첫잔 페이지 바로가기 (운영중)