내가 선택한 최고의 웹 개발 스택과 그 이유

개발 환경 변화와 선택의 이유

최근 몇 주간 집중적으로 여러 웹 프로젝트를 개발하며, 기존에 자주 쓰던 리액트와 Next.js에서 벗어나 새로운 스택을 시도하게 되었습니다. 리액트는 여전히 훌륭하지만, 개인적으로 코딩할 때 더 직관적이고 즐거운 환경을 원했고, 그 결과 SvelteKit을 메인 프레임워크로 선택하게 되었습니다.

SvelteKit과 현대적인 리액티브 개발

SvelteKit은 UI와 서버 로직을 한 번에 다룰 수 있고, 최근 도입된 '룬(run)' 기반의 반응성 시스템 덕분에 실시간 데이터 업데이트와 복잡한 상태 관리를 정말 쉽게 구현할 수 있습니다. 이 방식은 예전 TRPC 방식과도 유사하지만, SvelteKit에 기본 내장되어 있어 따로 세팅할 필요 없이 바로 사용 가능합니다.

Convex: 데이터베이스의 새로운 방식

Convex는 서버리스 데이터베이스로, 모든 쿼리와 변형 로직을 TypeScript 코드로 정의합니다. 즉, 백엔드와 프론트엔드가 같은 코드베이스에서 타입 안전성이 유지된 채 동작합니다. 개발 중에 쿼리를 수정하면 바로 로컬 환경에 반영되고, 배포할 때도 SvelteKit과 데이터베이스 변경사항이 동시에 적용됩니다. 실시간 데이터 동기화 기능이 아주 인상적입니다.

// 예시: Convex 쿼리 정의 및 호출
export default query(async ({ db }, orgId: string) => {
  return await db.table("myData").filter({ orgId }).toArray();
});

에러 처리: Neverthrow의 장점

복잡한 에러 핸들링을 위해 'Neverthrow' 라이브러리를 도입했습니다. 서버가 예측 못한 에러로 갑자기 죽지 않도록, 모든 실패 상황을 타입으로 명시해 안전하게 처리하도록 했습니다. Go 언어의 강제 에러 체크 방식과 유사하게, 이제는 대부분의 함수에서 정상 결과와 에러를 구분해 다룹니다.

// Neverthrow 예시
import { resultAsync } from 'neverthrow';

const dbResult = await resultAsync.fromPromise(
  saveToDb(params),
  (error) => error as SaveError
);

if (dbResult.isErr()) {
  // 에러 처리
} else {
  // 정상 처리
}

스타일링: Tailwind CSS

레이아웃과 스타일을 빠르게 만들기 위해 Tailwind CSS를 사용합니다. 반복되는 디자인 요소나 모양 변경이 빠르고, 클래스 이름만으로 언제든 수정이 가능해 생산성이 높습니다.

인증: WorkOS의 활용 이유

기업형 팀 인증과 관리가 필요한 프로젝트에서는 WorkOS를 채택했습니다. 직접 인증 시스템을 구축하는 번거로움을 줄이고, 조직별 멤버 관리, 팀 전환 등 기능을 손쉽게 구현할 수 있었습니다. 가격도 합리적이고, 대기업에서 사용하는 만큼 신뢰도가 있습니다.

실시간 데이터와 사용자 경험 개선

프론트엔드에서 Convex의 useQuery를 사용하면 데이터가 변경되는 즉시 화면에 반영됩니다. 예를 들어 태그 수정, 필터링, 배경 숨기기 등이 즉각 적용되어, 이전에 비해 훨씬 즉각적이고 친근한 사용 경험을 제공합니다.

결제 시스템도 코드로 관리(Autumn)

기존 Stripe 결제 설정의 복잡함을 해결한 Autumn이라는 신생 서비스도 눈여겨보고 있습니다. 결제 상품과 기능을 코드에서 직접 관리하고 배포할 수 있어, 전체적인 서비스 운영이 체계적으로 바뀔 전망입니다.

내가 만든 프로젝트에서 얻은 교훈

새로운 스택(SvelteKit + Convex + Neverthrow + Tailwind + WorkOS)은, 프로젝트 규모가 작아도 복잡한 기능과 실시간 경험을 쉽게 제공할 수 있었습니다. 모든 코드를 한 곳에서 관리하며, 타입 안전성과 자동 동기화 덕분에 실수할 여지도 줄었습니다. Next.js, React 기반도 충분히 좋지만, 새로운 조합이 현 시점에서는 더 빠르고 즐겁게 개발할 수 있었습니다. 앞으로도 더 다양한 기능(결제, AI, 팀, 실시간 알림 등)에 대해 심화 영상과 예시를 만들 계획입니다.

Source & Reference :