0️⃣ 들어가며

안녕하세요. 오토피디아 엔지니어 김소령입니다. 스스로를 “서비스를 만드는 사람”으로 지정하고, 회사에서도 엔지니어 외 다양한 업무를 진행하고 있습니다.

N개의 글로 만들어질 이번 시리즈 글은 아주 간단한 관리자 콘솔을 만든 경험입니다. 정비소에서 사용하는 콘솔이기 때문에 방대한 양의 데이터도 아니고, 기본적인 CRUD 호출 외의 특별한 기능, 애니메이션 효과도 없는 작은 콘솔입니다. 다만, 디자인, 서버, 프론트를 빠르게 처리한 경험을 공유함으로써, 저처럼 홀로 zero to one으로 만들어야 하거나 만들고 싶어하는 익명의 누군가들에게 도움이 되길 바라봅니다.

시리즈의 첫 글은 프로젝트의 개요와 함께 로그인 기능을 직접 구현하지 않고 clerk을 사용한 이유에 대해서 간단하게 소개하겠습니다.

🤖 포르쉐를 위한 하드웨어, 그리고 그에 맞는 관리자 콘솔

오토피디아는 더 나은 카라이프를 위해 운전자들의 문제를 똑똑하게 해결할 수 있는 서비스를 운영하고 하드웨어 장비를 자체 개발하고 있습니다. AI 기반 검사 장비 중 “ATRACE 외관 스캐너”가 이 글의 주인공입니다.

🚗 ATRACE 외관 스캐너

외관 스캐너는 차량이 입출차할 때 자동으로 손상을 촬영하고 기록합니다. 12대의 고해상도 카메라와 구조광 조명을 활용해 스크래치나 문콕 같은 손상을 빠짐없이 포착할 수 있으며, 이 데이터를 바탕으로 서비스 센터는 고객 분쟁을 줄이고 업무 효율을 획기적으로 개선할 수 있습니다. 추후에는 영상에서 바로 외관의 문제를 잡아낼 수 있는 AI 분석으로 확장할 계획입니다. ATRACE 외관 스캐너는 포르쉐 SSCL 양재 및 인천 서비스 센터를 시작으로, 곧 서울 주요 지점들로 확대될 예정입니다.

이 장비를 사용하는 관리자 콘솔은 직관적으로 데이터를 조회하고 관리할 수 있어야 하며, 현장에서는 누구나 빠르게 사용할 수 있어야 했습니다. 그리고 이 콘솔을, 제가 혼자 2주 안에 만들어야 했습니다.

💻 2주 만에 콘솔 하나 낋여보자

다른 일과 병행하며 주어진 짧은 시간 안에 개발해야 했던 이번 프로젝트에서는 빠르게 MVP를 완성할 수 있는 도구 선택이 가장 중요했습니다.

📌 사용한 기술 스택

아래는 제가 사용한 기술 스택으로, 상세한 내용은 시리즈로 천천히 다뤄보려 합니다.

• V0: 기본적인 레이아웃 설정
  • 세부 UI는 레퍼런스를 찾아 직접 수정
• Clerk: 로그인 및 권한 기반 조직 구분
• Supabase: DB 및 복잡한 인증 없이 간단한 API 구축
• Next.js(App router): 서버와 프론트 모두 처리
• Vercel: 쉽고 빠른 배포

📌 콘솔에 필요한 기능들

• 외관 스캐너 장비에서 촬영한 데이터를 저장할 DB 및 API
• 관리자 인증을 위한 로그인 기능
• 로그인 된 사용자의 조직에 맞는 데이터 필터링
  • 차량번호, 입출고 일시, 입출고 상태로 검색 및 정렬
• 원본 영상 다운로드

1️⃣ 로그인, 단순하고도 귀찮은 작업

관리자 콘솔은 익명의 모두에게 오픈되어서는 안되는 서비스이기 때문에, 로그인 기능은 필수입니다. 이번 프로젝트에서는 복잡한 것을 구현할 필요가 없었습니다. 로그인과 관련한 요구사항은 포르쉐 정비소라는 조직에 속한 유저를 생성하고, 그 유저의 권한을 확인할 수 있는 것 뿐이었습니다.

하지만, 무작정 직접 개발하는 것은 능사가 아닙니다. 간단하기 때문에 더욱 직접 구현하는 것에 시간을 쓰는 것은 오히려 비효율적일 수 있습니다. 전문 분야는 프론트엔드이기 때문에, 예상치 못한 단순한 에러에도 시간을 많이 쓸 수도 있다는 리스크도 있습니다. 또한, 당장은 단순한 권한을 확인하기 위한 기능이지만, 추후에는 사용자 초대, 세부적인 권한 분리, SSO 등 추가 기능이 있을 가능성이 있습니다. 누군가 잘 만들어둔 로그인 기능을 가져다 쓰는 것이 현재의 리소스에서는 가장 효율적이라고 판단했습니다.

2️⃣ 어떤 툴을 선택해야 할까?

필요한 기능과 유저 시나리오, 우선순위를 설정한 후, 관련 서비스를 찾아 조사했습니다.

📝 필요한 기능

• ID와 비밀번호를 입력할 수 있는 UI
• 입력마다의 에러 핸들링
• 회원가입 및 로그인 성공, 토큰 발급과 관리를 담당할 서버
• 요청마다 사용자 권한을 확인할 수 있게 하는 hooks

🧑🏻‍💻 유저 시나리오

요구사항과 함께 정리한 유저 시나리오는 다음과 같습니다.

• 회원가입: 포르쉐 정비소에 1개의 계정을 발급한다.
  • 하나의 컴퓨터와 계정으로 관리자 콘솔에 접근하는 것을 이번 MVP의 유저 시나리오로 설정했습니다.
  • 추후, 더 많은 기업에 판매되어 확장할 경우를 고려하여, 회원가입 절차가 복잡하지 않아야 합니다.
• 로그인: 직관적인 UI로 기본적인 에러 핸들링이 가능해야 한다.
  • 예쁜 UI가 중요한 것은 아니지만, 커스터마이징에 어려움이 없으면 좋습니다.
  • 대부분 해외 서비스지만, 한국어 지원이 가능하면 좋습니다.
• 세션 관리: 한 번 로그인한 후에는 자동 로그아웃되는 일이 없어야 한다.
  • 클라이언트 컴포넌트는 물론, 서버 컴포넌트에서도 로그인 정보 확인이 가능하면 좋습니다.
• 권한 확인: 관리자 콘솔 전반적으로 권한이 없는 유저가 접근할 수 없어야 하며, API 호출마다 유저의 로그인 정보를 통해 조직을 확인할 수 있어야 한다.
  • 당시 프론트 개발은 완료된 상태기 때문에 Next.js와 Supabase와의 연동에 문제가 없어야 하고, 호환성이 좋을 수록 가장 높은 점수를 줍니다.

🤔 선정 기준 (우선순위대로)

로그인 token 및 유저 테이블 관리, 에러 핸들링, UI 등을 자체 개발하지 않을 수 있는 툴을 선택해야 합니다. I의 예쁨이나 익숙함의 정도, 커스터마이징 등은 거의 고려하지 않았습니다. B2B이긴 하지만, 내부의 소수 인원만 사용하는 콘솔이기 때문입니다.

1. 개발 리소스가 크게 들지 않아야 한다.
- 당장 1~2주 이내에 다른 업무와 병행해서 여유롭게 끝낼 수 있는 정도
- 세팅 방법을 대강이라도 체크해서 감을 잡을 수 있어야 함
- 현재 개발된 프론트 코드 상태와 호환성이 좋길
2. 안정성있는 서비스여야 한다. (1번과 거의 비슷한 우선순위)
- 추후 유지 보수 관리에 큰 리소스를 쓰지 않기를
- 사례가 많을수록 좋음
3. 비용은 최소화해야 한다.
- Free tier가 많을수록 좋음
- 외부에서 사용하는 서비스기 때문에 사용성에 문제는 없어야 함
4. 보안성에 문제가 없어야 한다.
- 업체에서도 MVP로 사용하는 것이니, 보안이 최우선순위까지는 아니라고 생각
- MFA까지 고려할 필요는 없지만, 굳이 따지자면, 추후 확장에서 문제가 없으면 좋음

📌 TLDR; - Clerk.dev를 사용했습니다.

초기 세팅이 가장 가벼울 것으로 예상되며, 기본적인 보안성에도 큰 문제가 없어보입니다. 가까운 시일 내에서는 고객사마다 1개의 계정을 공유하는 시나리오가 대부분일 것으로 보이기 때문에, 조직 당 5명까지만 가능하다는 제약도 문제가 없습니다. 또한, 계정별로 조회해야하는 데이터가 다양한 것은 아니기 때문에 supabase와의 연동도 무리없을 것으로 예상됩니다.

추후 고객사 요청(고객사의 보안 감사 등)으로 MFA 등의 보안에서의 기능을 추가하게 되더라도 대응이 가능합니다. 무엇보다, 현재 콘솔에서 요구하는 기능을 무료 플랜 내에서 문제없이 사용할 수 있는 장점이 있습니다. 고객사 등록 가능 수 등 여러 조건이 더 있지만, MAU 1만을 넘어가지 않는 선에서는 무료 플랜 이용이 가능합니다.

서비스명	장점 👍	단점 👎
Supabase Auth(자체 개발)	호환성 좋음.	UI 및 에러 핸들링을 모두 고려해야 함. 타 서비스 대비 추후 문제 발생할 가능성이 높고, 초기 세팅이 아주 간단한 것도 아님.
AWS Cognito	보안성 우수	프론트 보다는 백엔드 중심의 솔루션이다보니 초기 세팅이 피로할 수 있고, Next.js와의 호환성에 대한 자료가 적어 우려가 됨.
✅ Clerk.dev	초기 세팅이 빠름.	한국 사례를 찾아보기 힘들고, 무료 플랜에서는 고객사 별로 직원을 5명까지만 등록 가능. 추후 DB에서 조회해야하는 내용이 복잡해지는 경우 Supabase에는 직접 연동해야 함.
Auth0	Next.js와의 호환이 좋고, 기능이 가장 많음	기능이 많아서 세팅은 오래 걸리는데, 실제로 사용할 기능은 간단한 인증이 대부분. 무료 플랜에서는 고객사를 5개까지만 등록할 수 있음.

3️⃣ 하나씩 찍먹해보기

당시에는 DB와 프론트 코드를 어느정도 마무리한 상태였기 때문에, supabase 및 Next.js(App router)와의 호환도 매우 중요했습니다. 서비스 조사할 때의 메모를 가져와 작성했기 때문에 편향이 있을 수 있습니다.

1) Supabase Auth - 자체 개발

Auth | Supabase Docs

DB 서비스인 Supabase에서 사용자를 관리하는 방법입니다. API 설명과 튜토리얼이 잘 되어있고, 당시 개발된 환경에서 호환성은 가장 좋았습니다.

다만, 자체개발이라는 점에서 추가기능에 대한 대처가 어려울 수 있습니다. 외관 스캐너 관리자 콘솔은 개발 후 한 동안은 유지 보수에 신경을 쓸 수 없는 상황이기 때문입니다. 또한, UI를 직접 개발하고 에러 핸들링도 고려해야 하기 때문에, 투입 리소스 대비 효율이 안나온다고 판단했습니다.

2) AWS Cognito

Amazon Cognito란 무엇입니까? - Amazon Cognito

AWS에서 제공하는 사용자 인증/인가 플랫폼으로, 외부 로그인도 연동할 수 있습니다. 보안성이 우수하고, AWS Lambda 트리거를 이용하면 인증 과정을 커스터마이징할 수 있습니다. AWS Cognito는 위 사진처럼 테스트 환경을 만들어볼 수 있어 편했습니다.

UI가 한국인에게는 낯설 수 있고, 커스터마이징이 제한적입니다. 또한, 프론트엔드보다는 백엔드 툴에 초점이 맞춰진 느낌이 강하고, Next.js와의 호환을 비롯해 초기 세팅에 소요될 시간을 가늠하기 어렵습니다.

3) Clerk.dev

Clerk | Authentication and User Management

로그인 UI는 물론 각종 hooks까지 제공하여 세팅이 가장 간편할 것으로 기대 됩니다. 구글 로그인 등의 외부 로그인 연동도 가능하고, MFA 등의 연동도 가능합니다. 다만, 관련 자료가 비교적 적을 수 있습니다.

유저를 조직별로 묶어서 관리할 수 있는데, 무료 플랜에서는 한 조직 당 5명까지만 가능합니다. 즉, 고객사 별로 콘솔에 접근가능한 사용자를 5명까지만 지정할 수 있습니다. 기본적인 role은 admin과 member이고, 최대 10개의 role을 설정할 수 있습니다. 조직 당 멤버수의 제한을 풀거나, role을 다양하고 더 많이 커스터마이징 하기 위해서는 유료 플랜을 사용해야 합니다.

4) Auth0

auth0.com

Next.js와의 호환성이나 docs의 완성도, 안정성이나 보안성 모두 우수합니다. 커스터마이징에도 열려있는데, 그만큼 초기 세팅에서 피로를 느낄 수 있습니다. 로그인 하나만 만들면 되는데, 수십가지 인증방식과 토큰의 다양성, UI 설정 복잡 등 다른 서비스 대비 과한 설정이 요구되는 느낌이 있습니다. 한 프로젝트 내에서 5개의 조직만 생성할 수 있어서, 고객사가 5개를 넘어가면 최소 월 35달러를 지불해야합니다.

4️⃣ Clerk.dev 어떤가요?

기본적으로 Clerk은 현재 관리자 콘솔에서 요구하는 아래의 기능을 모두 충족했습니다.

• 조직(organization) 기능이 기본으로 제공됩니다.
  • 무료 플랜에서는 조직당 사용자 수가 5명으로 제한이 있지만, 이번 프로젝트의 고객사 시나리오 상에서는 문제가 없었습니다.
  • useOrganization() 훅으로 현재 유저가 속한 조직을 바로 확인할 수 있었습니다.
• React/Next.js 친화적인 구조로 되어 있어 별도 설정 없이 바로 적용 가능합니다.
  • 상기 언급한 useOrganization() 외에도 clerk nextjs에서 제공하는 각종 패키지 개발이 잘 되어있어 아주 만족스러웠습니다.
• 서버/클라이언트 컴포넌트에 대한 구애없이 사용자 정보를 쉽게 불러올 수 있습니다.
  • Next.js App Router 환경에서 서버까지 개발하는 것을 고려했을 때, route API에서도 문제가 없어야 했습니다.
• UI 컴포넌트와 기본적인 에러 핸들링은 물론, SSO 및 MFA 설정으로의 확장도 쉽습니다.
  • 한국어 지원이 가능하고, 사용자 초대도 쉽게 설정할 수 있어, 확장 후 회원가입 플로우가 깔끔합니다.
  • Clerk의 콘솔도 매우 직관적이어서 webhook 설정이나 팀 내 공유도 쉽습니다.

아쉬웠던 점

직관적인 UI와 잘만들어진 패키지가 다양한 기능을 제공한 덕에 연동에 큰 불편은 없었습니다. 굳이 꼽아보자면, 문서나 연동 사례에 대한 정보가 부족한 점이었습니다.

예를 들어, webhooks로 넘어오는 event별 data의 필드를 미리 확인할 수 없어, 하나씩 webhook을 날려 log로 확인해야 했습니다. user 생성,수정 이벤트에서는 user의 organization 정보를 확인해야 했는데, 미리 필드를 체크하지 못한 탓에 정책을 수정해야 했습니다. (타입을 만들어 배포하면 좋겠다는 생각을…)

직관적인 콘솔과 docs 덕분에 대부분의 과정에 문제가 없었고, 그래서 사례글이 없었다고 생각합니다. 하지만 외려 간단한 문제를 하나 해결하기 위해 Clerk docs의 AI에게 여러 질문을 해야하는 것이 복잡했습니다. 그래서 이 다음 글로는 사용자 등록 플로우와 함께 Next.js(App router)와 clerk 연동 과정을 조금 더 자세하게 기록 및 공유하려 합니다. 저와 같은 고민이 있을 소수의 개발자분들에게 도움이 되길 바라며~