🧐 DUGE? 무슨 서비스냐?

AMA(Ask Me Anything)은 한국어로 번역하자면 '무엇이든 물어 보세요'정도 될 것입니다. 한국에서는 인스타그램에서 '무물'이라고 줄여서 인플루언서들이 진행하기도 합니다. DUGE는 이런 익명 Q&A를 도와주는 서비스입니다.

사실 이렇게 포스트를 쓰기 전에 저의 DUGE 스페이스를 제 프로필 링크에 넣어 두었는데 어떻게 아셨는지 몇몇 분들이 가입해서 질문도 남겨 주시더군요.

대표적으로 빌 게이츠가 레딧에서 AMA를 진행 한 적이 있습니다. 이 때 정말 큰 화제였는데 빌 게이츠는 최근에도 레딧에서 가끔씩 코멘트를 달아주고 있습니다. 또 빌 게이츠는 이런 AMA 세션을 벌써 10번째 진행하고 있습니다. 궁금하신 분들은 📎 레딧으로 가서 살펴보면 좋습니다.

이런 AMA를 진행 할 수 있도록 도와 줄 수 있는 서비스는 없을까요? 비슷하게 트위터 유저들이 사용하는 일본의 📎 peing이라는 서비스가 있습니다. 하지만 잦은 광고와 다소 직관성이 떨어지는 UI로 사용에 불편함이 있었습니다. 제게 딱 맞는 AMA 서비스를 만드려면 역시 개발자는 직접 만들어야죠.

DUGE에서는 누구나 익명으로 상대방에게 질문 할 수 있습니다. 또, DUGE는 제 첫 프론트 엔드 개발입니다. Nuxt3를 사용해서 개발되었으며 백 엔드 개발만 해 온 모빈켈에게는 어려운 일이었지만 여러 사람에게 도움을 받아가며 이렇게 서비스를 공개하게 됐습니다.

🌳 광고 없음

더지에는 그 어떤 광고도 없습니다. 앞으로도 최대한 광고를 피하고 수익을 도모 할 생각입니다. 광고 없이 쾌적하게 DUGE 스페이스를 가져 보세요.

👻 완전한 익명

DUGE에선 익명으로 질문하면 아무도 내가 누구인지 알 수 없습니다. DUGE의 질문/답변 데이터는 모두 해외(묻지마) 서버에 저장 돼 있습니다. 다만 이런 익명 AMA 서비스들이 그간 숱하게 겪어온 문제가 있는 만큼 익명을 악용한 질문은 스페이스 주인이 삭제 할 수 있습니다.

🌚 멋진 UI

제 DUGE가 다른 AMA 서비스보다 확실히 더 예쁩니다. 거대 소셜 서비스의 디자인을 많이 참고하고 스케치 업을 진행 한 뒤에 Tailwind CSS로 구현했습니다.

Tailwind CSS는 이름 그대로 순수한 CSS 입니다. 다이얼로그나 팝업 메뉴는 같은 Tailwind 팀이 만든 HeadlessUI로 구현할 수 있었습니다. 어쨌거나 저 처럼 처음 프론트 엔드 기술을 접해본 개발자도 이렇게 빨리 구현 해 낸걸 보면 좋은 기술임에 틀림이 없습니다.

🌟 Mr.두더지

Mr.두더지를 구독하면 가끔씩 두더지씨가 여러분에게 질문을 남깁니다. 두더지와 교감 해 보세요.

🛠️ 기술 이야기

이제 홍보는 됐고 우리 개발자들이 좋아하는 기술 이야기를 하려고 합니다. 비개발자 분들은 이 시점에서 더 안 보셔도 됩니다. 🌚

🐤 Vercel, Fly.io

DUGE의 프론트엔드는 Vercel에서 좋은 경험을 맛보고 계속 운영중에 있습니다. 최근에 velog에 소개되는 여러 서비스들도 Vercel을 사용해 배포하는 것을 많이 볼 수 있습니다. 저 역시 Vercel 배포 경험은 과거 Heroku를 떠올리게 했습니다. Vercel은 AWS의 복잡한 인프라 관리보다 그냥 눈 감고 배포 할 수 있을 정도로 간단 했습니다.

그러나 Vercel이 아무 문제 없이 깔끔했던 것은 아닙니다. Nuxt3 환경에서 504 FUNCTION_INVOCATION_TIMEOUT이 지속적으로 발생하는 문제가 있었습니다. Next3에서도 동일한 증상이 발생하는 사례를 많이 찾아 볼 수 있었는데 현재까지 뾰족한 해결책이 없는 것 같습니다. 때문에 실제 서비스를 운영하는데 있어서 이런 간헐적인 GATEWAY TIMEOUT을 반드시 고려 하셔야 합니다. 무료인 Hobby Plan 뿐만 아니라 유료 플랜에서도 발생하며 Region에 관계 없이 발생하고 있는 것으로 보입니다.

DUGE의 백엔드는 Fly.io에 배포 되어 있습니다. Fly.io는 멀티 클라우드 넘어 아예 DB와 컨테이너를 사용자와 가까운 region에 모두 배포 해 두는 Edge Cloud Computing을 제시하고 있는데 과연 어떨지 궁금합니다. 아쉽게도 Fly.io는 아직 서울 리전을 지원하고 있지 않습니다.

fly.io는 Vercel 보다 더 불안정 해 보인다는 것이 단점입니다. https://status.flyio.net 에서 확인 해 보면 그 동안 fly.io의 장애 일지를 볼 수 있습니다. DUGE를 개발 하는 중에도 정말 중요한 순간에 특정 리전의 Deployment 장애가 나서 길게는 12시간 동안 배포를 할 수가 없었던 적이 있습니다.

Heroku가 무료 인스턴스들을 종료하면서 대안으로 떠오른것이 fly.io 였습니다. 굉장히 주목 받는 클라우드 스타트업이지만 여러 리전에서 동시 다발적으로 장애가 끊이질 않고 있어 실제 서비스 운영에는 참고 해야만 합니다.

하지만 제가 좋아하는 BoltDB 개발자 벤 존슨이 Fly.io에서 이제 Full-time으로 SQLite의 클라우드화 개발에 박차를 가했다는 소식을 보면 앞으로가 기대되는 스타트업입니다.

📎 I'm All-In on Server-Side SQLite.

때문에 DUGE도 이걸 믿고 한 번 인프라를 Fly.io에 걸어 보려고 합니다. 🌚 결론적으로는 Vercel도 Fly.io도 아직은 운영 장애를 많이 겪고 있어 실제 서비스 운영에는 큰 어려움들이 있을 것입니다. 그러나 너무나도 편했기 때문에 이 두 서비스가 제발 성공 했으면 좋겠네요.

📘 Vercel FUNCTION_INVOCATION_TIMEOUT 관련해서 더 읽어 볼 거리

https://velog.io/@dishate/Vercel-504-timeout-에러
https://www.reddit.com/r/nextjs/comments/zfjwck/all_my_nextjs_api_handlers_return_504_timeout/
https://medium.com/@scott82anderson/avoid-cold-starts-on-vercel-with-next-ssr-7b28fbc38bcc
https://github.com/orgs/vercel/discussions/334

🤔 대체 왜 TIMEOUT인가
AWA Lambda의 Cold Start 영향이 있다거나 Region 거리가 너무 멀어서 그렇다는 등의 이야기가 있습니다. 하지만 Vercel은 10초 의 타임아웃을 주고 있고 아무리 Region 거리 차이와 DB 응답 시간이 느리다고 해도 10초 이상의 걸릴 것 같진 않은데 이 문제는 앞으로 계속 커뮤니티를 지켜봐야 할것 같습니다.

🐔 SQLite

DUGE의 데이터는 모두 SQLite로 관리하고 있습니다. MySQL이나 PostGres는 사치라고 생각했습니다. 그러면 데이터가 많아 졌을 때 튜닝하기 어렵거나 느리지 않겠냐는 반문을 매우 많이 받아 왔었는데 그 '느리다'는 편견을 깨 보고 싶기도 했습니다.

대표적으로 JOIN은 '느리다'라고 알려져 있지만 실은 그렇지가 않습니다. 물론 JOIN이 없는 쿼리가 더 빠르기야 하겠지만 생각만큼 JOIN이 느리지가 않다는 것입니다.

어떤 조직에서 일 할 때 JOIN을 사용하기를 매우 싫어하는 백엔드 개발자들이 있었습니다. 그래서 저는 한 가지 실험을 했습니다. 2~3억건 정도 되는 테스트 데이터를 DB에 넣었습니다. 이는 실제로 서비스 중인 데이터보다 20배나 많은 양이었습니다. 그리고 초당 10건의 JOIN, COUNT 쿼리를 날리는 실험에서 데이터베이스는 10ms 내외의 응답 속도를 보여 줬습니다. Hash JOIN은 이론상 복잡도가 O(1)이므로 어쩌면 당연한 결과였습니다. 오히려 JOIN 보다는 COUNT가 문제였는데요 row를 세는 것은 정직하게 Fetch를 해야하므로 세어야 할 row가 약 1만개만 넘어가도 1000ms 가까이 느려졌습니다.

⚠️ 위 실험은 AWS R 시리즈 인스턴스 중에서 제일 싼 걸로 진행 됐었습니다. 이 부분에 대해서는 구체적인 실험 방법과 데이터, 그리고 디스크 I/O는 더 이상 Bottleneck이 아니라는 점을 근거로 글을 따로 써 보도록 하겠습니다.

어쨌든 생각 이상으로 현재의 데이터베이스들은 최적화가 잘 되어 있고 쿼리만 잘 작성한다면 JOIN 하더라도 수 억건 이상의, 어지간한 양의 데이터는 소화 할 수 있습니다.

수 많은 기업들이 개발자 채용에 '대규모 데이터 처리 경험'을 요건으로 내세우지만 실제로 그런 경험을 하기는 매우 어려운 이유 중 하나 입니다. 이미 수억 단위의 데이터를 잘 처리하는 데이터베이스 세계에서 성능 튜닝이 필요한 순간을 마주하려면 한 테이블의 row만 수십억, 수백억 단위가 돼야 할 것입니다. 그냥 빵빵한 AWS 인스턴스로 업그레이드한 뒤 눈 감고 잊어 버리는 경우도 많으니까요.

그래서 저는 대부분의 스타트업들은 싱글 인스턴스의 DB로도 모든 요구사항을 만족 할 수 있으리라 조심스럽게 생각합니다. 아무튼 이렇게 튼튼한 SQLite를 DUGE도 쓰기로 했습니다. 과연 제 생각이 맞을지는 DUGE 사용자가 1억명이 되기 시작하면 밝혀 질 것 입니다. 🌚 아니면 그 때 가서 생각 해 보고요.

SQLite를 주력 데이터베이스로 사용한 이야기들은 아래에서 좀 더 만나 볼 수 있습니다.
📎 Ask HN: Have you used SQLite as a primary database?

☁️ Vultr, Cloudflare

Vultr는 Vercel과 이름이 비슷해 처음에는 헷갈렷는데 Vultr는 관리형이 아니라 Digital Ocean 처럼 직접 인스턴스를 올리는 형태의 서비스입니다. 국내에는 아직 잘 알려져 있지 않은 것 같은데 서울 리전도 갖추고 있습니다. 직접 인스턴스를 올려서 사용 해야 할 일이 있을 때는 AWS EC2 보다는 Digital Ocean을 써 왔었는데 이번에는 Vultr라는 서비스를 사용 해 봤습니다. 궁금하신 분들은 한 번 가서 구경 해 봐도 좋을 것 같습니다.

📎 https://www.vultr.com

Cloudflare는 사실상의 무료 스토리지를 제공하고 있습니다. 작년에 R2라는 새로운 스토리지 R2 공개 했는데 이것은 AWS의 S3 API와 호환되는 스토리지입니다. 그런데 R2는 Egress 비용 무료 입니다. 그 뜻은 그냥 수십만개의 이미지를 업로드해도 땡전 한 푼 내지 않아도 된다는 겁니다. 대체 이게 어떻게 가능 한 걸까.

📎 Cloudflare R2 출시 — 송신 수수료가 없는 빠르고 안정적인 개체 스토리지

Cloudflare는 AWS가 Egress 비용을 너무 과다 청구 하는게 아니냐는 포스팅을 올렸습니다. AWS의 비용은 '어처구니 없다 (Egregious)'라고 다소 강하게 말했습니다. 마치 모빈켈 처럼요. 📎 AWS’s Egregious Egress

그래서 자신들의 막강한 인프라와 AWS의 막강한 스토리지 규모라는 장점을 결합해서 R2라는 제품을 만들어 냈습니다. R2 만큼은 스타트업에게 정말 필요한 제품인 것 같습니다. 웬만큼 성장하기 전까지는 스토리지와 네트워크 트래픽을 무료로 사용 할 수 있기에 DUGE 역시 R2를 사용하기로 했습니다.

🌪️ TailwindCSS

어떤 블로거는 Tailwind의 단점으로 못생긴 코드나 JS를 쓸 수 없다거나 CSS코드와 HTML이 분리 되지 않는 것 같다는 점을 꼽지만 Tailwind의 철학을 잘 읽어보면 왜 이런지 알 수 있습니다. 일단 Tailwind는 자주 사용되는 CSS를 편하게 유지보수 할 수 있도록 도와주고 싶어 했습니다. 긴 CSS 코드를 관리하는 것보다 HTML 하나만 관리하는게 훨씬 더 쉽기 때문입니다.

Tailwind encourages a utility-first workflow

📎 reusing-styles

하지만 같은 CSS 스타일을 여러번 적용 할 일이 많아지면 결국 아래와 같은 일이 벌어집니다. 아래 코드와 같은 경험을 하신 개발자들은 HTML에서 바로 적용하기는 편하지만 TailwindCSS가 정말 좋은거냐는 의문을 던지곤 합니다.

<div class="mt-3 flex -space-x-2 overflow-hidden">
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</div>

Tailwind는 어차피 아래처럼 반복문을 통해 렌더링 될 것이니 위와 같은 문제는 발생할 일이 없다고 말하고 있습니다.

<div class="mt-3 flex -space-x-2 overflow-hidden">
    {#each contributors as user}
      <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="{user.avatarUrl}" alt="{user.handle}"/>
    {/each}
</div>

When elements are rendered in a loop like this, the actual class list is only written once so there’s no actual duplication problem to solve.

The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations.

📎 maintainability-concerns

이렇게 Utility-First라는 관점으로 프론트 엔지니어링에 접근해 보니 좋았다는 포스트를 볼 수 있습니다. 유틸리티 클래스는 단순히 CSS 스타일을 인라인으로 적용 한 것이 아니라 프론트 엔지니어링에서 어떤 하나의 '아키텍쳐'라고 설명하는 포스트를 읽어보면 더 좋습니다.

📎 No, Utility Classes Aren’t the Same As Inline Styles
📎 Building a Scalable CSS Architecture

🫥 끝

저는 프론트 엔지니어링을 해 본 경험이 없기 때문에 제가 쓸 수 있는 글은 여기까지 인 것 같습니다. 🌚 DUGE라는 첫 프론트 프로젝트를 개발하면서 겪은 새로운 경험에 관한 글이었습니다. 다른 사람에게도 도움이 됐으면 좋겠네요. 어서 어서 가입해서 프로필에 주소를 걸어주세요.

😮 모빈켈 AMA

모빈켈 역시 더지 스페이스를 갖고 있습니다. 📎 https://duge.space/DOZYHExYNz 여기에서 모빈켈에게 무엇이든지 물어 볼 수 있어요.

또, 한국의 📎 producthunt라고 할 수 있는 디스콰이엇에도 DUGE를 공유 해 두었어요. 많은 관심 부탁드립니다. 📎 DUGE | Disquiet*

💰 toss로 서포트하기

DUGE의 지속적 개발을 위해 지원하고 싶은 분들은 자유롭게 도네이션 해 주세요. 기부하신 돈은 DUGE 서버비로 사용 됩니다.