더윤프로퍼티: Next.js와 Supabase로 완성한 부동산 플랫폼 개발기

안녕하세요, 영프로 시니어 개발자입니다. 이번 글에서는 저희 영프로가 부동산 분양대행사 더윤프로퍼티의 브랜드 웹사이트와 분양 인력 매칭 플랫폼을 구축한 경험을 공유하고자 합니다. 이 프로젝트는 단순한 웹사이트를 넘어, 복잡한 비즈니스 로직과 사용자 경험을 최적화하기 위한 다양한 기술적 도전이 포함되어 있었습니다. 성공적인 개발 외주 프로젝트 사례로서, 저희의 고민과 해결 과정을 함께 살펴보시죠.

프로젝트 소개: 두 마리 토끼를 잡다

더윤프로퍼티 프로젝트의 핵심은 두 가지 상이한 서비스를 하나의 효율적인 시스템으로 통합하는 것이었습니다. 첫째는 더윤프로퍼티의 전문성과 신뢰도를 보여주는 브랜드 웹사이트로, 분양/임대 서비스 소개와 상담 접수를 주 목적으로 합니다. 둘째는 부동산 분양 현장 관리자와 분양 인력을 효과적으로 연결해주는 매칭 플랫폼으로, 유료 공고를 기반으로 한 구인/구직 시스템입니다.

저희는 이 두 서비스를 Next.js 15 App Router 환경에서 하나의 프로젝트로 개발함으로써, 개발 및 유지보수 효율성을 극대화하고, 사용자들에게 일관된 경험을 제공하는 것을 목표로 삼았습니다. 각 서비스의 특성을 고려하면서도 유기적으로 연결되는 구조를 설계하는 것이 중요했습니다.

기술 선택의 이유: 최신 스택으로 최고의 결과물을

저희 영프로는 프로젝트의 목표와 요구사항을 면밀히 분석한 후, 다음과 같은 기술 스택을 선정했습니다. 최신 기술 트렌드를 따르면서도 안정성과 확장성을 확보하는 데 중점을 두었습니다.

• 프론트엔드: Next.js 15 (App Router) + TypeScript
  

  뛰어난 성능과 SEO 최적화 기능으로 이미 잘 알려진 Next.js를 선택했습니다. 특히 App Router의 서버 컴포넌트(Server Components) 기능을 활용하여 데이터 패칭의 효율성을 높이고 초기 로딩 속도를 개선할 수 있었습니다. TypeScript는 대규모 프로젝트에서 코드의 안정성과 유지보수성을 확보하는 데 필수적인 요소였습니다.

• 스타일링: Tailwind CSS 4 + shadcn/ui
  

  빠른 UI 개발 속도와 높은 커스터마이징 유연성을 제공하는 Tailwind CSS를 기반으로, shadcn/ui 컴포넌트를 활용하여 일관되고 세련된 디자인 시스템을 빠르게 구축했습니다. 이는 개발 생산성을 높이는 동시에 브랜드 아이덴티티를 명확히 표현하는 데 기여했습니다.

• 애니메이션: GSAP 스크롤 애니메이션
  

  브랜드 웹사이트의 시각적 매력을 극대화하기 위해 GSAP를 도입했습니다. 스크롤 위치에 따라 동적으로 반응하는 애니메이션은 사용자에게 몰입감 있는 경험을 제공하며, 더윤프로퍼티의 고급스러운 이미지를 효과적으로 전달합니다.

• 백엔드 & 데이터베이스: Supabase (DB + Auth + Storage)
  

  초기 개발 속도와 비용 효율성을 고려하여 Supabase를 선택했습니다. PostgreSQL 기반의 강력한 데이터베이스는 물론, 사용자 인증(Auth), 파일 스토리지(Storage) 기능까지 통합적으로 제공하여 백엔드 개발에 드는 시간과 노력을 획기적으로 줄일 수 있었습니다. 개발 외주 프로젝트에서 Supabase는 빠른 MVP(Minimum Viable Product) 구현과 향후 확장성을 동시에 만족시키는 탁월한 선택이었습니다.

핵심 기능 구현 상세: 복잡한 로직을 구조화하다

두 서비스의 성공적인 통합: 브랜드 웹과 매칭 플랫폼

하나의 Next.js 프로젝트 내에서 브랜드 웹과 매칭 플랫폼을 성공적으로 통합하는 것은 중요한 도전 과제였습니다. 저희는 App Router의 라우팅 기능을 활용하여 각 서비스의 경로를 명확히 분리하고, 필요한 경우 컴포넌트와 유틸리티를 공유하는 방식으로 효율성을 높였습니다. 브랜드 웹은 GSAP 기반의 동적 애니메이션과 반응형 디자인으로 높은 사용자 경험을 제공하며, 매칭 플랫폼은 복잡한 데이터 처리와 상호작용에 초점을 맞췄습니다.

강력한 분양 인력 매칭 플랫폼 구현

매칭 플랫폼은 사용자의 편리성과 기능의 견고함에 초점을 맞춰 개발되었습니다. 15개 이상의 페이지와 다양한 기능들이 유기적으로 연결되어 있습니다.

• 카카오 OAuth 및 역할 기반 온보딩:
  

  사용자 편의를 위해 카카오 OAuth를 통한 간편 로그인을 구현했습니다. 로그인 후에는 관리자(manager)와 구직자(worker) 역할을 선택하고 필수 프로필 정보를 입력하는 온보딩 과정을 거치도록 하여, 각 역할에 맞는 맞춤형 서비스를 제공합니다. 모든 사용자 정보는 Supabase의 profiles 테이블에 안전하게 관리됩니다.

• 공고 CRUD 및 검색/필터/정렬:
  

  관리자는 분양 공고를 자유롭게 등록, 수정, 삭제할 수 있으며, 구직자는 다양한 조건(지역, 직무, 급여, 경력 등)으로 공고를 검색하고 필터링, 정렬할 수 있습니다. 이를 위해 Supabase의 job_postings 테이블을 중심으로 견고한 데이터 모델을 설계하고, 효율적인 쿼리 로직을 구현했습니다.

• 카카오맵 기반 지도 검색 및 현장 위치 표시:
  

  분양 현장의 위치는 구직자에게 매우 중요한 정보입니다. 카카오맵 API를 연동하여 공고 등록 시 현장 주소를 지도에서 직접 검색하고 표시할 수 있도록 했으며, 구직자는 지도 위에서 공고 위치를 직관적으로 확인할 수 있습니다. 예를 들어, 다음과 같은 방식으로 주소를 위경도로 변환하여 활용했습니다.

          // Kakao Maps API를 이용한 주소-좌표 변환 예시        const geocoder = new kakao.maps.services.Geocoder();        geocoder.addressSearch(address, function(result, status) {            if (status === kakao.maps.services.Status.OK) {                const lat = result[0].y; // 위도                const lng = result[0].x; // 경도                // DB에 저장 또는 지도에 표시            }        });        

• 지원 시스템, 찜하기, 카카오톡 공유:
  

  구직자는 관심 있는 공고에 쉽게 지원할 수 있으며(applications 테이블), 마음에 드는 공고는 찜하기 기능(favorites 테이블)으로 저장해두고 나중에 다시 볼 수 있습니다. 또한, 카카오톡 공유 기능을 통해 친구나 동료에게 유용한 공고 정보를 손쉽게 전달할 수 있도록 구현하여 플랫폼의 확산성을 높였습니다.

• 어드민 대시보드:
  

  관리자를 위한 어드민 대시보드를 구축하여 전체 공고 현황, 사용자 관리, 지원 현황 등을 한눈에 파악하고 효율적으로 운영할 수 있도록 지원합니다. Supabase의 강력한 Row-Level Security (RLS) 기능을 활용하여 각 역할에 따른 데이터 접근 권한을 세밀하게 제어했습니다.

개발 과정에서의 챌린지 및 해결

이 프로젝트를 진행하면서 몇 가지 기술적인 도전 과제에 직면했습니다.

• Next.js App Router와 Server Components 활용 최적화:
  

  App Router의 새로운 패러다임인 Server Components를 기존 Client Components와 적절히 조합하고, 데이터 패칭 전략을 최적화하는 과정에서 깊은 이해와 실험이 필요했습니다. 특히 Supabase와의 연동 시 서버 액션(Server Actions)을 활용하여 더욱 효율적인 데이터 처리 파이프라인을 구축할 수 있었습니다.

• Supabase RLS(Row-Level Security)의 복잡성:
  

  사용자 역할(manager/worker)에 따라 데이터 접근 권한을 다르게 부여해야 했기 때문에 Supabase RLS 정책 설정이 매우 중요했습니다. 초기에는 복잡하게 느껴졌지만, 다양한 시나리오를 고려하여 정책을 설계하고 테스트를 반복함으로써 안전하고 유연한 권한 제어 시스템을 완성할 수 있었습니다.

• 두 서비스 통합 코드베이스 관리:
  

  브랜드 웹과 매칭 플랫폼이라는 성격이 다른 두 서비스를 하나의 프로젝트에서 관리하면서 코드의 응집도를 유지하고, 불필요한 의존성을 줄이는 것이 중요했습니다. 명확한 폴더 구조와 컴포넌트 분리 원칙을 수립하여 확장성과 유지보수성을 확보했습니다.

회고 및 다음 스텝

더윤프로퍼티 프로젝트는 영프로에게도 매우 의미 있는 경험이었습니다. Next.js 15, Supabase, Tailwind CSS, GSAP 등 최신 기술 스택을 활용하여 고객사의 요구사항을 충족시키고, 기대 이상의 결과물을 제공할 수 있었음에 보람을 느낍니다. 특히 두 개의 상이한 서비스를 하나의 효율적인 플랫폼으로 통합하는 과정에서 저희의 웹 개발 역량을 한층 더 강화할 수 있었습니다.

이번 프로젝트를 통해 얻은 경험과 노하우는 앞으로 영프로가 진행할 개발 외주 프로젝트에도 큰 자산이 될 것입니다. 저희는 항상 새로운 기술에 도전하고, 고객사의 비즈니스 성공을 위한 최적의 솔루션을 제공하기 위해 노력할 것입니다. 더윤프로퍼티가 부동산 시장에서 혁신적인 역할을 해나가는 데 저희의 기술이 보탬이 되기를 바랍니다.