플러스프로젝트 배경
문제점 - 아시아바텐더협회 한국지회는 공식 웹사이트가 없는 상태로 운영되고 있었으며, 협회의 활동과 정보를 체계적으로 전달할 수 있는 디지털 채널이 부재했습니다. - 해외 바텐더 협회와의 네트워킹에서 공식 웹 프레전스의 부재로 글로벌 인지도 확보에 한계가 있었습니다. - 콘텐츠(공지사항, 행사 사진, 연혁 등) 관리를 위한 자체 시스템이 없어 정보 업데이트가 어려웠습니다. 프로젝트 목표 - 협회의
프로젝트 성과
API-less 풀스택 아키텍처 구현
Next.js 14 Server Actions만으로 모든 CRUD 작업을 처리하여 별도의 REST API 없이 풀스택 앱을 완성하여 코드 복잡도를 줄여 개발 속도를 높였으며, 전 구간 타입 안전성을 확보하였습니다.
이미지 자동 WebP 변환 및 스토리지 비용 절감
Sharp 기반 자동 최적화 파이프라인으로 업로드 이미지를 WebP로 변환하여 용량을 60~80% 절감하였습니다. 무중단 마이그레이션 스크립트로 기존 자산까지 일괄 최적화하여 스토리지 비용을 낮추었습니다.
비개발자 친화적 다국어 CMS 구축
한/영 콘텐츠를 탭 전환으로 관리하는 직관적인 CMS를 개발했습니다. WYSIWYG 에디터와 드래그 앤 드롭 정렬 등 사용자 친화적 기능을 제공하여, 운영진이 쉽게 웹사이트를 운영할 수 있는 환경을 조성했습니다.
핵심 기능
다국어 메인 페이지 및 인터랙션
Embla Carousel 기반의 히어로 슬라이더를 구현했습니다. CMS에서 슬라이드 순서와 콘텐츠를 언어별로 관리할 수 있으며, Spring 물리 애니메이션과 웹 접근성(a11y) 표준을 준수하여 개발했습니다.
진행 단계
환경 설정 및 기반 구축
2025.03.
Next.js 14 및 Supabase 기반의 프로젝트를 초기화했습니다. CI/CD 파이프라인과 코드 품질 도구(Husky, Lint)를 구성하고, Figma 디자인 토큰 및 다국어 라우팅 체계를 적용했습니다.
프로젝트 상세
본 프로젝트는 아시아바텐더협회 한국지회(ABA Korea)의 디지털 프레전스를 구축하기 위해 기획, 디자인, 풀스택 개발 및 배포 전 과정을 단독으로 수행한 신규 구축 사업입니다. Next.js App Router 를 기반으로 한/영 다국어를 지원하는 공개 웹사이트와 이를 효율적으로 관리할 수 있는 전용 CMS(Content Management System)를 개발하였습니다. [아키텍처 및 다국어 관리
