유서경 Quartz

유서경 Quartz님의 아티클

유서경 Quartz

유서경 Quartz

Cursor와 함께 1시간만에 PMC 준비하기

coffeeing.gif예전부터 Three.js를 사용하여 멋있는 프로덕트를 만들어보고 싶었습니다. 그런데 마땅히 활용할만한 기능이 떠오르지 않아 미루고 있었어요.

image.png그러던 중 요즘 드립 커피를 마시면서 받는 원두 카드들을 예쁘게 렌더링해보고싶다는 생각이 들었어요. 요즘 일주일에 두 번 정도는 카페에서 커피를 마시고 있기 때문입니다 ☕️

nextjs-conf.gif그리고 무엇보다도 이번 Next.js conf 티켓이 너무 예쁘더라구요 ㅎㅎ

Three.js를 처음 사용해보지만 Cursor를 사용해 약 1 시간만에 구현한 코드를 공유합니다. 따로 리팩토링하지는 않았고 컴포넌트 분리만 해달라고 했어요. 예전에 윌리(@William Jung 정민교)가 앞으로 모든 코드의 90%는 AI가 작성할 수 있도록이라는 글을 공유했는데, 이번에 정말 자연어만 사용해서 코딩을 한 것 같아요. (디버깅은 조금 까다로웠지만 공식문서를 가져다주니 잘 해결했습니다 ㅋㅋㅋ)

저는 이번에 만든 프로토타입을 기반으로 PMC에 참여해보려 합니다. 오랜만에 새 프로덕트를 만드니 재밌네요😎. 디스콰이엇 팀에서 PMC를 위해 새로운 기능들을 (e.g. 프로덕트 마켓플레이스) 많이 준비하고 있으니 많은 참여 부탁드려요!

16
6
유서경 Quartz

유서경 Quartz

Open AI가 검색 엔진 SearchGPT를 발표

image.png

Open AI에서 SearchGPT waitlist를 받고 있습니다. 아직 프로토타입 형태이지만 실시간 출처를 기반으로 대화 형태의 검색을 할 수 있다고 하네요. UX는 Perplexity와 비슷할 것으로 예상한다고 합니다.

팀에 속해있는 계정은 waitlist로 등록이 안되는 것 같네요. 저는 다른 개인 계정으로 등록해두었습니다 ㅎㅎ

Liner를 사용한 영상 요약본을 함께 공유드려요.

요약

이 영상은 OpenAI가 SearchGPT라는 새로운 검색 엔진을 출시한다는 소식을 다루고 있습니다. 이 발표는 Google과 같은 기존 검색 엔진 기업들에게 큰 영향을 미치고 있으며, AI 기반 검색의 미래와 그 잠재적 영향에 대한 논의를 불러일으키고 있습니다.

주요 포인트

OpenAI의 새로운 검색 엔진 발표

  • [0:14] OpenAI가 검색 사업에 진출한다고 블로그 포스트를 통해 발표했습니다.

  • [0:25] 현재 검색 제품의 프로토타입 버전을 테스트 중이며, 사용자들은 대기자 명단에 등록할 수 있습니다.

  • [0:51] 이 검색 엔진은 실시간 결과와 소스를 제공하며, 출판사 및 웹사이트와 협력하여 정보에 대한 적절한 접근과 인용을 보장합니다.

시장 반응과 경쟁 구도

  • [1:14] OpenAI의 검색 사업 진출 소식에 Google 주식이 2% 이상 하락했습니다.

  • [1:21] Microsoft(OpenAI의 주요 투자자)도 Bing 검색 엔진에 유사한 기능을 발표했습니다.

  • [1:32] Alphabet(Google 모회사)은 최근 실적 발표에서 AI 검색 제품에 대해 언급했지만, 수익성에 대한 구체적인 정보는 제공하지 않았습니다.

AI 검색의 미래와 도전 과제

  • [1:52] AI가 검색 산업에 미치는 영향에 대한 우려가 현실화되고 있습니다.

  • [2:22] 과거 Microsoft의 AI 챗봇 도입 사례를 언급하며, 실제 시장 점유율 변화는 미미했음을 지적합니다.

  • [2:55] AI 기술의 발전과 함께 검색 시장의 경쟁이 더욱 치열해질 것으로 예상됩니다.

기술 분배와 시장 지배력

  • [3:22] OpenAI는 이미 Apple과 제휴를 통해 ChatGPT를 iPhone에 탑재하고 있습니다.

  • [3:41] Google은 이미 많은 기기와 플랫폼에서 기본 검색 엔진으로 설정되어 있어, 시장 지배력을 유지하고 있습니다.

  • [4:18] OpenAI의 검색 엔진은 아직 테스트 단계이며, 성공을 위해서는 효과적인 배포 전략이 필요할 것으로 보입니다.

7
0
유서경 Quartz

유서경 Quartz

개발 1년차, 이력서 없이 커피챗으로 이직하기 - 2024년 상반기 회고

안녕하세요. 다들 2024년을 잘 보내고 계신가요? 저에게 2024년은 제 인생에서 가장 다이나믹하고 학습한 것이 많은 한 해입니다. 새로운 커리어를 도전해보고 싶지만 나를 평가하고 증명해야 하는 취업 시장에 나가기는 쉽지 않은데요, 이번 글에서는 제가 올해 커피챗을 통해 좋은 기회들을 얻어 새로운 팀을 찾은 경험을 적어보려 합니다.

image.png

어떤 개발자가 되고 싶나요?

동료, 새로운 사람들과 커피챗을 하다보면 가장 많이 들었던 질문입니다. 작년에 이 질문을 들었다면 혼자서 하나의 서비스를 온전히 만들 수 있는 사람이었겠지만, 지금은 소프트웨어로 문제를 해결하고 그만큼의 가치를 인정받을 수 있는 사람인 것 같습니다.

저는 개발자를 평생 해야할 일이라고 생각하지 않습니다. 삶의 태도가 바뀐다면 언제든지 일하는 방식도 바꿀 수 있다고 생각합니다. 제가 작년 새로운 환경을 찾게 된 이유는 “내가 관심있는 도메인”의 문제를 해결하고 싶었기 때문입니다.

1인 개발 vs 새로운 회사

작년 말, 많은 고민 끝에 2024년을 노마드 개발자로 살기로 결심했습니다. 저에게 2023년은 개발자로 처음 취업하고, 혼자 만든 앱 사용자가 1600명이 넘고, 좋아하는 운동에서 2년만에 승급하기까지 하여 원하는 목표를 모두 이룬 한 해였습니다. 그럼에도 불구하고 성취감보다는 권태로움이 더 크게 느껴졌고, 이제는 나의 리소스를 온전히 한 곳(1인 개발 앱)에만 집중해보자는 결론을 내렸습니다.

image.png

그런데 예상치 못하게 2023년 회고글을 읽고 좋은 포지션을 제안해주시는 커피챗 요청이 계속 생겼습니다. 특히 초기 스타트업 단계에서 혼자서 문제를 정의하여 서비스를 만들고 운영한 저의 경험을 유니크하게 평가해주셨고, 감사하게도 하나의 글만으로도 저도 모르는 저의 강점을 파악해주시기도 하였습니다.

글로만 적어보면 행복한 고민이지만, 사실 이미 고심 끝에 1인 개발을 하기로 결정을 내린 상황이었기에 다시 불어난 선택지로 괴롭기도 했습니다. 그럼에도 개발자 커리어 목표 중 하나인 노마드를 잠시 미루고 다시 새로운 팀을 찾기로 마음먹은 이유는 같은 시간, 노력을 투자해도 더 큰 결과물을 도출할 수 있는 좋은 기회가 많아보였기 때문입니다.

커피챗

지금까지의 저의 구직 경험을 되돌아보면, 나의 능력을 회사에 증명하기 위한 대답을 많이 했던 것 같습니다. 포지션의 합격 여부를 회사에서 결정짓다보니 당연한 수순일 수 있지만, 이번 이직 활동에서는 저도 회사의 핏을 확인하기 위해 많은 질문들을 했습니다.

  • 어떤 문제를 해결하기 위해 프로덕트를 만들고 있는지?

  • 요즘 어떤 문제를 겪고 있는지?

  • 이 포지션에 내가 합류했을 때 무엇을 기대하는지?

2024년 상반기 회고

결론적으로, 저는 지난 4월부터 디스콰이엇에 합류하여 재미있게 일하고 있습니다. 지난 세 달 동안 개인적으로도 많은 일이 있었는데요, 생각보다 더 많이 성장하고 배운 것 같아 뿌듯하기도 하고 힘들기도(ㅋㅋ) 합니다. No pain, no gain…. 😎

새로 알게 된 것

  • 팀으로 일하는 법

    가끔 “내가 혼자 결정하고 실행하는 것이 빠르지 않을까?”라는 생각이 들 때가 있습니다. 특히 저는 1인 개발을 할 때가 많으니 의사 결정이 느리다고 생각하는 경우가 많았던 것 같습니다. 올해 새로 알게 된 것 중 저에게 가장 큰 변화를 가져온 것은 팀원들에게 신뢰를 얻고, 나도 팀원들을 신뢰하여 서로의 역할을 잘 구분하고 위임하는 것입니다.

  • 모든 것은 학습이다.

    올해 3월, 2주간 치앙마이로 노마드 여행을 다녀왔습니다. 새로운 나라, 문화권을 여행하며 친구를 사귀는 것, 새로운 팀을 만나고 팀원들과 문화를 만드는 것 그리고 새로운 코드 베이스에서 기술을 익히는 것 모두 학습이라고 생각합니다. 영어를 잘하는 것, 외향적으로 사람들과 이야기하는 것, 좋은 코드를 짜는 것보다 어쩌면 다양한 것을 학습하려는 자세가 더 중요하다는 생각이 들었습니다.

더 알고 싶은 것

  • 소프트웨어의 가치 인정받기

    어느 순간 코드를 짜서 소프트웨어를 만드는 것이 매일 소비하는 커피를 만드는 것보다 고도화 된 것이라 생각하고 있었습니다. 그러나 모두가 보편적으로 좋아하고 가치를 인정받는 커피와 같은 프로덕트를 생산해내기는 쉽지 않은 일입니다. 디스콰이엇을 통해 좋은 제품들이 많아지고 더 많은 가치를 만들어낼 수 있으면 좋겠습니다.

마무리하며

긴 글 읽어주셔서 감사합니다. 새로운 팀을 찾거나 빌딩하는 일은 모두가 한 번 쯤은 겪는 어려움인 것 같습니다. 제가 디스콰이엇에 합류하고 처음으로 개발한 메이커 찾기가 드디어 배포되었는데요, 비슷한 어려움을 겪고 있는 분들께 도움이 되었으면 좋겠습니다.

p.s. 아래 첨부 사진과 다른 화면이 나타난다면 여러분은 다른 테스트에 걸리신 겁니다.. ㅎㅎ

image.png

18
14
유서경 Quartz

유서경 Quartz

요즘 어떤 책 읽으시나요?

안녕하세요. 무거운 서적은 들고다니지 않는 얇은 책 편독가 쿼츠입니다.

저는 요즘 새롭게 관심이 생긴 분야들이 많아졌는데요, 어제 관련 입문서들을 구매하려 서점에 다녀왔습니다. 원래는 체스 입문서를 사려는 목적이 가장 컸는데 생각보다 재미가 없어 보여서 고르지 못했습니다 ㅎㅎ

image.png

  • 부분과 전체

    영화 오펜하이머에 나온 물리학자 하이젠베르크가 쓴 책입니다. 아는 분 집들이에서 발견하여 물리학 입문서인 줄 알았는데 사고나서 보니 대화록이었습니다 ㅎㅎ 저명한 물리학자가 기고한 책을 제 손으로 찾아본 것은 처음이라 재밌는 경험이었습니다.

  • 식물적 낙관

    제가 좋아하는 작가님(문체가 따수움)의 신작이기도 하고, 요즘 주위에 반려 식물과 함께하는 분들이 많아져 골랐습니다.

  • 블랙홀에서 살아남는 법

    혹시 블랙홀에 떨어지면 탈출해야 하니까요.

  • 블루보틀에 다녀왔습니다

    요즘 커피에도 관심이 생겼는데 블루보틀이 커피 산업의 스타트업, 애플이라는 수식어가 있다고 하여 궁금해서 구매했습니다.

요즘 재밌는 것들이 많아지니 병렬 취미를 위한 서비스도 만들어보고 싶더라구요 ㅎㅎ 최근 재밌게 읽으신 책이 있으시다면 추천해주시면 감사하겠습니다.

image.png

p.s. 이 책들도 사고 싶었는데 예산 부족으로 데려오지 못했어요

9
14
유서경 Quartz

유서경 Quartz

스승의 날에 관장님께 웹서비스 선물 드리기 (feat. 개발자식 애정 표현)

image.png

안녕하세요. 벌써 2024년의 절반이 지나가고 있는데 다들 잘 지내고 계신가요? 가정의 달 5월은 감사한 마음을 보답하기 위해 어떤 선물을 할 지 항상 고민이 많은데요, 이번 메이커로그에서는 제가 관장님께 마음을 담아 웹사이트를 선물드린(ㅎㅎㅎ) 이야기를 공유하려 합니다. 개발자식 하트를 제조한 과정이 궁금하시다면 재밌게 읽으실 수 있을거예요 😎

0. 왜 웹서비스를 구상했나요?

먼저 저의 백그라운드를 설명드리자면, 저는 주짓수라는 운동을 효율적으로 도와주기 위한 앱을 혼자 운영하고 있고 이 운동에 대한 애정도 큰 편입니다.

제가 운동하고 있는 도장의 관장님은 한국 4번째 여성 블랙벨트이신데요, 주짓수 뿐만 아니라 다방면에서 저에게 많은 것을 알려주신 감사한 분입니다 ㅎㅎ 관장님께서 운동을 시작하시던 때에는(Latte ☕️...) 여성 선수들도 많지 않아 같은 체급의 선수와 경기하는 것 (주짓수는 무제한 체급으로 경기하기도 합니다)도 드물고 지원도 적었다고 합니다. 그래서 더 많은 기회를 만들기 위해 여성 주짓수 대회를 개최하게 되셨다고 해요.

image.png

저도 이 좋은 취지에 도움을 드리기 위해 대회 운영을 위한 웹서비스를 구상하게 되었어요. 참고로 위의 포스터도 도장 관원 친구가 만들었습니다. 실력이 상당하죠? ㅎㅎ

1. 어떤 웹서비스인가요?

주짓수 대회에서 개발자는 어떤 일을 할 수 있을까요? 저는 일상생활에서 발견한 비효율성들을 적어두고 서비스화를 고민해보는 편입니다.

1.1 주짓수 대회의 비효율성 정의하기

사실 주짓수 대회 서비스는 선물이 아니라 제가 실제로 만들어보려 1-Pager까지 작성했던 아이디어입니다 (1-Pager 템플릿). 제가 느낀 주짓수 대회의 비효율성은 1. 대진표를 만드는 사람이 부문(체급, 벨트 등)을 수기로 체크하는 과정이 번거롭고 2. 대진표를 보는 사람도 pdf 문서를 변경될 때마다 다운받아서 본인을 찾는 것이 어렵다는 점이었습니다. 빠르게 문제를 정의하고 서비스를 만들려고 했지만 이 때의 문제점은 실제 대회에 이 프로덕트를 적용해야 하므로 GTM 허들이 높다는 점이었습니다.

image.png

그런데 이번에는 주 4일 도장에서 뵙는 관장님께 직접 MVP 피드백을 들을 수 있으니 빠르고 재밌게 만들 수 있겠다는 생각이 들었습니다.

1.2 개발 범위 정하기

서비스를 만들어야겠다고 마음을 먹었으니 이제 어떤 기능을 제공할지 고민해보아야 합니다. 대회 개최에 참여하기 전에는 대진표에 대한 니즈가 클 것이라 예상했지만, 막상 참여해보니 초기 시점에는 신청자를 잘 관리하는 것이 더 중요하다는 생각이 들었습니다.

  • 운영자는 신청자 정보 및 입금 확인이 수월해야 함

  • 신청자는 구글 폼으로 신청한 정보들이 잘 전달되었는지 궁금함

그리고 제가 정말 중요하게 생각한 기능은 본인이 참여하는 대진에 얼마나 많은 사람이 신청했는지 보여주어야 한다입니다. 주짓수는 성별, 벨트, 체급, 나이 등에 따라 대진표를 정하는데 함께 출전하는 선수가 적으면 취소되는 경우도 많기 때문에 대회를 열심히 준비했는데도 며칠 전 취소되는 경우가 많기 때문입니다.

따라서

  1. 구글 폼으로 받은 신청자들의 정보를 실시간으로 보여주고

  2. 입금 현황을 업데이트할 수 있으며

  3. 대진별 신청자 수도 함께 확인 가능한

것을 최소 개발 목표로 잡게 되었습니다.

2. 웹 서비스 개발하기

개발 범위를 처음 구상할 때는 주말 이틀 정도만 쏟으면 끝나는 간단한 프로젝트라고 생각했습니다. 그런데 생각보다 난도가 있어 저도 꽤 많은 것들을 배우게 되었습니다.

2.1 Google Sheet API 활용하기

image.png

Google Form을 사용하면 입력된 응답들이 자동으로 Google Sheets에 생성됩니다. 우리는 Google Sheets API를 사용하여 이 중 원하는 데이터들을 쏙쏙 뽑아 사용자에게 보여주면 됩니다.

2.2 Next.js 풀스택 개발하기

처음에는 Google Sheets API를 사용하면 되니 클라이언트 개발만 하면 된다고 생각했지만, 신청 폼에는 개인 정보가 담겨있어 이를 마스킹 및 정형화하는 작업이 필요했습니다.

// api 예시 코드
const sheets = google.sheets({ version: "v4", auth });

export async function GET(request: NextRequest) {
    const response = await sheets.spreadsheets.values.get({
      spreadsheetId: SPREADSHEET_ID,
      range: RANGE,
    });
...
    const res = NextResponse.json({ columns: paginatedData, fetchedTime });
    return res;
}

Next.js api를 사용하여 백엔드를 추가로 개발하였으나 이상하게 배포된 환경에서는 실시간 정보를 가져오지 못하는 문제가 있었습니다. 알고보니 GET Route Handlers는 기본적으로 캐싱되고 있었고 이 문제를 해결하기 위해서는 새로운 Next.js 15 rc 버전으로 업그레이드가 필요했습니다. 프로덕션 환경에서 rc(Release Candidate, 정식 출시 후보) 버전을 사용하는 것은 처음이었는데 꽤 재미있는 작업이었습니다.

image.png

2.3 그 외

또한 편의 기능으로 무한 스크롤, search parameter 기반 필터링도 함께 개발했습니다. 풀스택 개발을 처음이어서 Chat GPT 선생님과 이 로직을 클라이언트에서 처리할지, 백엔드에서 처리할지를 함께 고민하면서 배웠습니다. 이미 알고 있는 지식으로 기능을 구현하는 것은 빨랐지만 책임과 기능을 어디에 위임할지 정하는 것에 시간이 많이 걸린 것 같습니다.

3. 결과

image.png

약 한 달 전부터 개발을 시작해서 틈틈이 업데이트 중인 서비스의 결과물입니다. 꽤 깔끔하게 만들어진 것 같아 저는 만족스럽습니다 😎. 현재 80명이 넘는 참가자 분들이 신청해주셨고 GA 기반 페이지 뷰도 최대 540회 정도로 제 예상보다 높은 수치를 기록하고 있습니다.

image.png

마무리하며

매일 비슷한 일을 하다보면 권태로울 때가 있는데 관장님께 선물을 드린다는 목적으로 시작해서 저에게도 신규 서비스를 구상해볼 수 있는 시간이 되어 즐거운 경험이었습니다. 금방 만드는 쉬운 프로젝트라고 예상했지만 생각보다 개발, 운영적으로 배운 것들이 많았습니다. 시간이 된다면 대진표 뷰어와 어드민도 함께 개선해보고 싶네요.

긴 글 읽어주셔서 감사합니다. 주위에 주짓수를 하고 계신 분들이 있다면 공유해주시면 더욱 감사하겠습니다! 여러분도 일상생활에서 발견한 문제점을 해결해본 경험이 있으신가요? 재미있는 경험들을 메이커로그로 남겨주세요 😎

image.png

p.s. 관장님께 소프트웨어 뿐만 아니라 하드웨어 선물(주짓수 벨트)도 드렸습니다 ㅎㅎ

12
4
유서경 Quartz

유서경 Quartz

한국에서 vercel.app 도메인 이슈가 생겼다고 합니다

image.png

어젯밤에 개인 웹사이트가 막혀 찾아보니 한국에서만 vercel DNS(vercel.app)가 막힌 것 같다고 하네요.

  • 도메인을 구입하지 않고 vercel 배포한 앱이나

  • Vercel preview 기능을 사용하는 경우

한국에서 현재 사이트 접속이 안되는 듯 하네요.

참고하시면 좋을 것 같아 공유드립니다.

캐나다에 있는 지인은 접속이 잘 된다고 합니다..ㅎㅎ

7
8
유서경 Quartz

유서경 Quartz

어린이날 연휴 동안 임베딩, 키워드 검색 그리고 오픈소스 PR까지 한 어른이 메이커로그

다들 어린이날 연휴 잘 보내셨나요? 저는 지난 한 달을 정신없이 지내다가 5월에 연휴가 즐비하다는 소식을 듣고 지난주부터 급히 스터디하고 싶은 것들을 정리했습니다. 덕분에 이번 연휴는 3일 동안 꽤 밀도 높게 보낼 수 있었고 오랜만에 메이커로그를 남겨보고자 합니다. 😎

하고 싶었던 것들

요즘은 끝내주는 기술을 사용하는 것보다 좋을 기술을 적절하게 활용하는 것에 관심이 많습니다. 그럼에도 불구하고 이미 사용하고 있는 기술보다 새로운 기술들을 배울 때 더 큰 즐거움을 느끼는 것은 어쩔 수 없는 것 같습니다. 그래서 이번 연휴 기간에는 앞으로 업무에 더 활용할 수 있는 기술 스택을 스터디하는 것으로 결정하였습니다.

1. 새로운 웹/앱 스택

  • Apollo Client

  • Supabase

  • 푸시 알림 고도화

사이드 프로젝트로 앱을 만들고 있지만 처음으로 만든 서비스인지라 별 고민없이 남들이 많이 사용하는 기술을 적용하여 아쉬움이 많은 편입니다. 제가 짠 코드이지만 특히 데이터베이스 구조와 스키마는 충격과 공포이기도 하고요. 😱 새로운 앱에 대한 아이디어도 생겨서 오랜만에 신규 서비스를 런칭하면 재미있을 것 같았습니다.

2. 임베딩과 RAG

  • Vector Store

  • 시멘틱 검색 활용 방법

작년 추석 즈음에도 빠르게 성장하는 LLM에 막연한 두려움을 느끼며 LangChain을 공부한 적이 있습니다. Open AI와 Next.js에서 제공해주는 라이브러리를 이용해 간단한 채팅 앱을 구현했지만 아주 좁은 도메인에 적용하기에는 무리가 있고 더 많은 커스터마이징이 필요하다고 느꼈습니다. 그리고 약 1년이 지난 지금, 더 가파르게 성장하는 LLM 기술들을 어떻게 활용할 수 있을지 궁금해졌습니다.

3. 클라우드 서비스

  • AWS

  • GCP

제가 Vercel을 좋아하는 이유는 프론트엔드 인프라를 쉽고 명확하게 구성할 수 있기 때문입니다. 개인적으로 클라우드 서비스를 좋아하지 않는 이유는 1. 콘솔이 너무 복잡하고, 2. 잘 모르는 설정을 정해야하고, 3. 그로 인해 비용이 발생하기 때문입니다. 사실 제대로 사용해보지도 않았고 아직까지는 활용할 일이 없다고 생각했지만, 회사 업무에서도 이로 인해 막히는 것들이 너무 많고 Vercel도 사실 AWS를 랩핑해놓은 것이라고 생각하니 한 번 쯤은 파보아야겠다는 생각이 들었습니다.

실제로 한 것들

1. 로컬 Vector Store를 활용한 시멘틱 검색

실행

특정 도메인에 LLM을 적용할 수 있는 방법 중 하나로 RAG(검색 증강 생성)가 있습니다. 간단하게 말하면 LLM에게 정답이 있을만한 데이터(chunk)들을 함께 보내주어 답변 정확도를 높일 수 있는 방법입니다.

사이드 프로젝트를 진행하는 장점 중 하나는 써보고 싶은 기술을 실제 사용자 데이터를 사용하여 도입해볼 수 있다는 점입니다. (잘 안되면 제가 기능을 삭제해버리면 됩니다 🤩) 지난 1년 반 동안 주짓수를 정말 열심히 했는지 어느덧 200개가 넘는 일기가 작성되었습니다. 현재는 “기술 별로 일기를 조회”할 수는 있지만 “실제 연관있는 기술을 묶어서 조회”하는 것을 불가능합니다. 그래서 제가 낸 아이디어는 “사용자 별로 Vector Store를 구축해주면 어떨까?”입니다.

image.png

실제 테스트 예시는 아래와 같습니다.

  1. Firebase Firestore에서 일기 데이터를 JSON으로 뽑아와서

  2. LangChain을 기반으로 Open AI의 임베딩 모델을 사용하여

  3. FAISS를 사용하여 로컬 Vector Store를 구현하였습니다.

image.png

위 이미지는 “사이드 탈출”을 질문으로 보냈을 때 5개의 연관성 높은 일기를 받은 결과입니다. 주짓수를 하지 않으면 어떤 내용인지 감이 잘 안오시겠지만 (ㅎㅎ) “사이드 탈출” 뿐만 아니라 “탈출”과 관련된 일기들도 함께 보여주고 있습니다. 의미를 기반으로 검색된 것이 맞고 아직 튜닝이 안된 스토어이므로 정확도도 낮지만 “이게 내가 원하는 결과가 맞나?”라는 생각이 들었습니다.

깨달은 것

  • 개인 일기장 데이터의 양과 형식이 RAG 기술에 적합한가?

    RAG를 사용한 예시나 관련 영상들을 보면 기업, 기관의 가진 방대한 문서(pdf)를 기반으로 사내 직원들의 생산성을 높이려는 시도가 많습니다. 200개의 일기가 많다고 느껴질 수도 있지만 근본적으로 JSON 형태로 잘 정제되어 있는 이 데이터를 RAG라는 어렵고 불확실성이 높은 기술에 시간을 쏟을 가치가 있을까?에 대해 조금 더 고민해보게 되었습니다.

  • 시멘틱 검색이 키워드 검색보다 나은 점이 뭐지?

    사용자는 질문에 대해 정확한 결과(키워드 검색)와 유사한 의미의 결과(시멘틱 검색) 중 어떤 것을 선호할까에 대한 근본적인 궁금증이 생겼습니다. 물론 Ensemble Retriever를 활용하면 두 검색을 적절하게 조합할 수 있지만 실제 두 가지 선택지가 있었을 때의 경향성도 비교해보고 싶어졌습니다.

2 Algolia를 활용한 키워드 검색

실행

아직 키워드 검색을 구현해본 적이 없지만 Firebase에서는 자사의 서비스와 쉽게 통합하여 사용할 수 있는 익스텐션들을 제공합니다. 저는 이 중에서 가장 다운로드 수가 많고 업무에도 활용 가능한 Algolia를 채택하였습니다.

image.png

또한 자체적으로 제공하는 클라이언트 라이브러리도 많기 때문에, react-native 예시 컴포넌트들을 활용하여 아래 기능들을 몇시간 내로 구현할 수 있었습니다. (프론트 개발은 익숙하다보니 다른 업무보다 빠르게 진행됩니다 😎)

  • 검색

  • 무한 스크롤

  • 검색 쿼리 하이라이트

image.png

레슨런

사실 Algolia의 키워드 검색을 완전하게 사용해보지는 못했고 그 이유는 다음 섹션에서 다룰 예정입니다. Algolia 검색을 구현하는 개발자 입장에서 느낀 점은 아래와 같습니다.

  • Firebase가 제공하는 기능들이 생각보다 강력함

    올해 초 SQL DB로 넘어가기 위해 Supabase 마이그레이션을 고민했었지만 이번에 Algolia를 구현하면서 Google의 따스함을 느낄 수 있었습니다. Google이 가진 Cloud Functions, Gemini 등 다양한 기술들을 묶어놓은 익스텐션을 보며 추상화된 서비스를 빠르게 사용해볼 수 있겠다는 생각이 들었습니다.

  • 사이드 프로젝트에서는 무료 플랜을 적극적으로 활용하자

    시간이라는 자원을 서비스에 쏟다보니 돈도 함께 소모하고 싶지 않다는 앱 운영 철학이 있었습니다. 그러나 열심히 비용 계산을 해보면서 느낀 점은 1. 이정도 규모는 무료 플랜으로도 충분하다, 2. 웬만하면 예산을 벗어나면 alert 설정이 가능하므로 걱정하지 않아도 된다 입니다.

3 Cloud Functions와 오픈소스

실행

Firebase의 Algolia 익스텐션을 설치하면 Firestore의 변경내역을 감지하여 클라우드 함수를 실행할 수 있도록 Cloud Functions가 설치됩니다.

image.png

처음에는 이 함수를 그냥 가져다쓰면 된다고 생각했지만 제가 원하는 방식대로 커스터마이징하다보니 엄청난 오류가 발생했습니다.

image.png

결국 실제 오픈소스 코드를 하나하나 까보면서 문제가 발생한 곳을 찾게 되었고 코드 몇 줄을 간단하게 수정해서 PR를 올려두었습니다. 과연 첫 오픈소스 기여가 가능할지…! 굉장히 설렙니다.

image.png

레슨런

  • 서버리스 함수 생각보다 안어려움

    Algolia에 데이터가 들어가기 전 변환해주는 함수를 직접 구현하고 배포해보았습니다. 클라우드 서비스를 사용할 일이 없을 것이라 생각했는데 막상 구현해보니 꽤 쓸모있고 좋은 서비스라는 생각이 듭니다.

  • 추상화된 서비스일수록 무엇이 문제인지 찾기 어려움

    익스텐션으로 추상화된 서비스여서 에러가 발생할 때 무엇이 문제인지 찾기 상당히 어려웠습니다. 결국 GCP의 에러 로그와 깃허브 소스코드를 하나하나 까보면서 핸들링을 했는데, 문제의 근본적인 원인을 찾기 위해서는 로우레벨을 확인해야겠다는 것을 다시 각인하였습니다.

마무리하며

이렇게 정리하니 참 많은 일을 한 것 같은데요 실제로는 잘 놀고 쉬기도 하였습니다. 금요일 저녁에 주짓수를 한 뒤 맥주를 마시기도 하고, 새로 산 헤드셋과 함께 기타를 치기도 하고, 쏨땀을 먹으면서 치앙마이를 회상하기도 하고, 누워서 쇼츠를 많이 시청하기도 했습니다 ㅎㅎ. 연휴가 시작하기 전 할 일을 잘 정리해두었더니 전부는 아니더라도 하고 싶은 일들을 대부분 실행해볼 수 있어 좋았습니다. 다음에도 재미있는 글로 찾아뵐게요. 긴 글 읽어주셔서 감사합니다.

10
4
유서경 Quartz

유서경 Quartz

개발자 인생 첫 세미나에 다녀왔습니다 (feat. 구독 앱을 위한 작은 가이드)

응당 개발자라면 각종 컨퍼런스나 세미나에 참석하겠지만, 저는 워낙 집을 좋아하는 사람인지라 영상을 통한 비대면 참여만 하고 있었습니다. 그러던 중 어제 앱 구독 결제 관련으로 제가 실제로 활용 중인 RevenueCat에서 구독 앱 관련 세미나를 연다는 메일을 받고 처음으로 대면으로 참석하게 되었습니다. 😎

image.png사실 RevenueCat은 저에게 굉장히 고마운 서비스인데요, 한국의 Expo 환경에서 인앱/구독 결제를 구현할 수 있는 제가 찾은 거의 유일한 수단이기 때문입니다. Expo 공식 문서에서는 Stripe를 추천하고 있지만 제가 알기로는 아직까지는 한국에서 지원이 되지 않아 타국가로 서비스를 운영해야 합니다. 국내 개발자 커뮤니티가 크지 않은 Expo를 사용하면서 알음알음 구독 모델을 구현할 수 있었던 것은 RevenueCat 덕분이어서 감사한 마음으로 세미나에 방문하게 되었습니다.

굿즈는 전혀 예상하지 못하고 있었는데 RevenueCat 측에서 인형, 키캡, 양말, 뱃지, 스티커 등 여러 물품을 준비해주셔서 더욱 기분 좋게 세션을 들을 수 있었습니다. 백그라운드 음악으로 RevenueCat 자체 테마송이 나와서 상당히 흥미로웠습니다 ㅋㅋ

image.png세미나 발표는 두 가지 주제로 이루어졌습니다.

1. RevenueCat session on subscription app growth in Korea, and abroad featuring unique data and insights

첫 번째 세션은 RevenueCat의 마케팅 VP를 맡고 있는 Rik이 자신들의 데이터를 기반으로 글로벌 시장과 한국 시장을 비교하는 인사이트를 제시해주었습니다. 제가 인상적이었던 부분을 간단히 요약해드리겠습니다.

  • 구독 앱은 평균 첫 한달 방문자의 1.7%가 유료 사용자로 전환됨

  • 상위 5%의 앱의 월간 수익이 아닌 앱보다 200x 이상임

  • Trial 제공 시 사용자가 들어온 당일(Day 0)에 킥오프하는 것이 conversion 수치 압도적으로 좋음

  • 구독 이탈의 이유 중 billing error가 23%로 생각보다 높음

그 중 한국 시장의 특징을 이야기하자면,

  • Education 카테고리의 Download to paying이 10% 이상으로 압도적임

    • 국가 간 비교, 다른 카테고리와 비교해서도 가장 높은 수치였습니다. 한국의 교육열이 어마무시하네요 ㅎㅎ

  • Refund 수치가 다른 국가에 비해 어마어마하게 높음

    • 아마 iOS보다 Andorid의 비중이 높고 Education 카테고리의 유저가 높기 때문일 것이라 하네요. Andorid와 Education 카테고리가 Refund 비율이 모두 높은데 한국 시장은 다른 글로벌 마켓에 비해 이 둘의 비율이 높은 편이라 합니다.

RevenueCat이 어느정도의 데이터 포인트를 가지고 있는지는 모르지만 구독 결제라는 시장에 처음 입문한 저에게는 상당히 흥미로운 자료였습니다.

2. Tips to how to grow subscription app

두 번째 세션은 Airbridge의 CEO 남성필님이 진행해주셨습니다. 해외는 구독 앱을 성장시키는 공식들이 잘 알려져있는데 국내는 아직 희귀해서 간단하게 관련 내용을 공유해주셨습니다.

  • Paywall은 상품 상세 페이지 역할로 가장 중요함

    • 해외에서는 paywall 보여주는 주기(frequency)가 훨씬 자주 일어남. 돈 안내는 고객은 떠나도 상관 없으니 더 많은 유료 고객을 잡자는 마인드를 가져볼 것

    • 결제 단계 이탈 여부에 따라 다른 paywall 노출해볼 것

    • 사소한 CTA 문구 차이로도 전환률이 급변하므로 많은 실험 필요

  • Pricing은 장기 플랜(6개월, 연간)을 미는 것이 유리함

    • 가격 변동/할인을 지속적으로 제공해볼 것

    • 미끼 상품을 추가하여 장기 플랜 구매를 유도해야 함

  • 추천하는 구독 앱의 구루들

image.png이 인사이트들을 제가 어떻게 활용할 수 있을지는 더 고민을 해봐야겠지만 1시간이라는 짧은 시간동안 양질을 정보들을 습득할 수 있어 좋았습니다. 해외에서 신규 유료 앱 발매 시 상당히 많이 사용하고 있는 서비스라고 하니 관심이 있으시다면 활용해보는 것도 추천드립니다. 마지막으로 가장 마음에 들었던 굿즈인 키캡과 머그컵을 두고 가겠습니다..ㅎㅎ

6
8
유서경 Quartz

유서경 Quartz

치앙마이에서 2주 동안 깨달은 것들

안녕하세요. 주짓수 앱을 만들고 있는 유서경입니다. 지난주에 로그를 남기고 싶었으나 마케팅으로 이미 너무 많은 글을 작성하느라 혈중 작가 농도가 너무 높아져 오늘 돌아오게 되었습니다 ㅎㅎ.

image.png

디지털 노마드 체험을 위해 치앙마이에 도착한 것이 엊그제 같은데 벌써 2주가 흘렀습니다. 컴컴한 길가에서 긴장하며 숙소를 찾고 편의점의 최소 카드 결제액을 채우지 못해 현금을 꺼내며 어리버리 했었는데, 이제는 밤늦게까지 카페에서 업무를 보다 들어오기도 하고 카드 대신 GLN을 사용하여 현지 친구들에게 칭찬받기도 하였습니다 😎.

저는 이곳에 와서 새로운 것들을 많이 경험하고 배우고 있습니다. 치앙마이에 오기 전에는 관광이 아닌 업무용으로 가는 것이니 한국 생활과 별반 다르지 않을 것이라 생각했는데요, 별반 다르다는 것들을 많이 느꼈습니다. 이번 메이커로그는 2주 전의 저의 생각과 치앙마이에서 느낀점을 함께 회고하여 공유해보겠습니다.

1. 가서 개발이나 하겠지

image.png

치앙마이에 오기 전, 제가 예상한 디지털 노마드는 코워킹 스페이스에 가서 맥북과 함께 코드를 열심히 짜는 모습이었습니다. 그러나 지금은 개발이 아닌 마케팅을 통해 유료 구독자를 늘려야 할 시점임을 저도 알고 있었고, 다음 글을 참고하여 개발과 마케팅을 2-3일 단위로 분리하여 업무를 분배하였습니다. 그러다보니 자연스럽게 무거운 개발보다는 비교적 가벼운 업무들이 많았고 코워킹 스페이스보다는 주변 카페를 탐방하며 돌아다니게 되었습니다.

image.png

앱스토어 이미지를 변경하고 유료 구독화면을 개선하면서 프로덕트의 정체성을 다시 바로잡게 되었고, 자연스럽게 유료 구독자들을 위한 다음 기능의 우선순위도 정해져 바로 개발에 착수할 수 있었습니다.

2. 몸으로 하는 운동이니 주짓수는 비슷하겠지

image.png

주짓수를 2년 반 정도 해왔지만 해외 방문 수련은 처음이었는데요, 유튜브로 기술이나 시합 영상을 영어로 시청하고 몸으로 하는 운동인지라 큰 문제는 없을 것이라 예상했습니다. 그런데 이곳에서의 주짓수는 한국과 달리 루틴이 아니다보니 운동 전후로 언제 밥을 먹어야 할지, 몇시에 출발해야 할지부터 고민의 시작이었습니다 ㅎㅎ. 다행히도 이 곳의 친구들이 잘 배려해주었고 발음하기 어려운 제 이름(Seokyoung)을 친절하게 기억해주었습니다.

image.png

해외 방문 수련 목적 중 하나였던 제 프로덕트를 소개해보는 업무도 달성했는데요, 한 친구가 다음에 부자가 되어 치앙마이에 다시 놀러오라며 구독해주어 첫 태국인 구독자가 생겼습니다. (한 달 사용 이후 리뉴얼 구독자들도 생겼습니다! 🤩) 개인적으로 네트워킹 관련 기능들을 배제하고 있었는데, 이 친구들도 "나의 운동을 공유"하고 싶은 욕구가 크더군요. 서비스에 대해 재고해보는 기회가 되었습니다.

3. 디지털 노마드 체험이니 관광은 필요 없겠지

image.png

원래 저의 계획은 밥먹고 개발하고 주짓수하는 너드의 삶이었습니다. 그러나 이곳에 와서 가장 좋았던 순간을 꼽자면 올드 타운에 있는 사원을 해질녘 다녀온 것입니다. 초승달이 지고 있는 초저녁에 한적하게 종소리를 듣는게 정말 좋았습니다 ㅎㅎ

그리고 이곳에서는 예상치 못한 인연들도 많이 만났습니다. 자주가는 카페 직원과 인사를 나누기도 하고, 도장 친구와 친해져 로컬 투어를 다녀오기도 하였습니다. (친구 말로는 정말 투어리스트 같다고 하더군요 ㅋㅋㅋ)

image.png

관광 안한다는 사람치고는 매우 좋아하는 모습입니다 ㅎ

마무리하며

이번 여행은 이것저것 찾아보기 보다는 되는대로를 경험해보라는 조언을 수용해보려 했는데요, 예기치 못한 즐거움이 있어 행복한 시간들을 보냈습니다. 물론 좋았던 점만 있었던 것은 아닙니다. 숙소가 공항과 가깝고 유동인구가 많다보니 시끄러워서 이틀간 잠을 못자기도 하였고(귀마개를 구매하고 광명을 찾았습니다) 밤에 뇌우로 인해 정전이 발생하기도 하였습니다(치앙마이에서는 흔한 일이라 합니다). 그러나 이러한 순간들도 "그럴 수도 있지"라는 생각을 갖다보니 한국에서는 화날 수도 있던 일들에 유연하게 대처할 수 있었던 것 같습니다. 비가 내린 덕에 오랜만에 미세먼지가 씻겨나가 맑은 하늘을 보며 치앙마이를 마무리하고 있기도 하고요.

태국은 지리적 특성상 다양한 문화권이 섞여 여러 방식으로 삶을 살아가는 사람들이 많았습니다. 앞으로 저도 새로운 삶의 방식들을 더 시도해보고 싶다는 생각이 들었습니다. 2주라는 시간이 길다면 길고 짧다면 짧은 시간이지만 관광이 아닌 체험으로서의 여행이 굉장히 뜻깊었습니다. 영어를 더 열심히 공부해야겠다는 생각도 들고요 ㅎㅎㅎㅎㅎ.

긴 글 읽어주셔서 감사합니다!

p.s.1. 버즈 오른쪽 유닛은 치앙마이에 남기로 했습니다...

image.png

p.s.2 "쿼츠 메이커로그 귀하네요" 금지입니다! ㅋㅋㅋㅋ @Doeon Kwon 권도언 @William Jung 정민교

Post Black Belt

주짓수 수련자들을 위한 기술 기록 다이어리

12
6
유서경 Quartz

유서경 Quartz

치앙마이의 코워킹 스페이스 yellow에 다녀왔습니다.

안녕하세요. 치앙마이에서 주짓수 앱을 만들고 있는 유서경입니다. 이번 글에서는 치앙마이 님만해민 지역에 있는 가장 유명한 코워킹 스페이스 중 하나인 yellow를 이틀간 다녀온 후기를 공유해드리려 합니다.

image.png어느덧 제가 이곳에 온 지도 일주일이 넘어 이제 3일 후에는 떠나야 합니다 🥲. 글을 더 자주 남기고 싶었으나 개발 하느라, 주짓수 하느라, 마케팅 하느라, 버그 고치느라, 여행 하느라, 그리고 2024년 1분기를 회고하느라 이런 저런 핑계로 이제야 남기게 되었네요.

저는 이곳에 와서 주로 님만해민 근처 카페들을 돌아다니며 가벼운 업무들을 보고있고, 가끔 신규 기능 개발 혹은 리팩토링과 같은 무거운 업무가 있을 때는 yellow를 사용하였습니다. 이곳에는 정말 다양한 사람들이 있는데요, 얼마 전에는 카페에서 독일인 플러터 개발자 친구와 스몰톡을 나누기도 했습니다. 문화가 다양한만큼 음식도 다양해서 한식이 그립지 않을 정도로 맛있는 음식들을 먹고 있습니다 ㅎㅎ

원데이 패스 등록하기

image.png제가 치앙마이에 정말 "일"만 하러 왔다면 yellow의 일주일 패스를 구매했을 것 같습니다. 그러나 저는 개발겸, 휴식겸, 주짓수도 할겸 치앙마이에 왔기 때문에 데이패스를 활용했습니다. (주짓수는 2주 패스로 구매했습니다 😄) 치앙마이는 현재 스모킹 시즌으로 공기질이 매우 좋지 않아 비수기인데요, 따라서 low season price로 쾌적한 환경에서 yellow를 사용할 수 있습니다. (야호! 🫠) 홈페이지에 가격이 올라와있으니 방문 계획이 있으시다면 참고하시는 것을 추천드립니다.

image.png데이패스를 구매하면 이렇게 작은 쪽지를 줍니다. 이곳의 코워킹 스페이스들은 위와 같은 형식으로 와이파이를 관리하는 것 같습니다. 이 와이파이는 시간 제한, 기기 연결 수 제한이 있습니다. 또한 데이패스를 구매하면 내부 카페에서 원하는 음료를 하나 마실 수 있으며 이후 구매 시에도 50% 할인을 받을 수 있습니다. 개인적으로 커피맛은 잘 모르지만 이곳의 아메리카노는 아쉬웠습니다... 근처에 좋은 커피집이 많으니 사오시는 것도 추천드립니다.

image.png이곳의 첫 인상은

"이게 디지털 노마드구나!"

업무 공간

image.png이곳은 2층으로 되어있고 좌식, 입식 그리고 와식까지 정말 다양한 업무 환경을 사용할 수 있습니다. 대부분의 사람들이 좌식 공간을 활용하긴 합니다 ㅎㅎ 저는 맨 처음에 도착했을 때 오랜만에 사무용 의자를 사용하고 싶어 가장 큰 책상으로 갔다가, 생각보다 의자가 너무 불편해서 다른 좌석으로 옮겼습니다.

image.png막간을 이용해 저의 데스크 셋업을 공유해드리자면

  • 맥북 에어 M2

  • 매직 키보드와 로지텍 버티컬 마우스

  • 65W 충전기, c to c 고속충전 케이블, 3 in 1 케이블

  • 그리고 노마드 필수품 루스트 스탠드 V3입니다.

    • 이 스탠드 유무에 따라 코워킹 스페이스 내 거북목과 아닌 사람들이 나뉩니다 😎

  • 더블 모니터로 사용하려고 가져온 갤럭시탭은 지금까지도 한 번도 사용하지 않았습니다..

image.png제가 yellow에서 가장 많이 사용한 자리입니다. 이 소파자리는 2-4인석이라 적혀있지만 현재는 비수기인지라 다들 한 자리씩 차지해도 널널하였습니다.

image.png책상마다 콘센트가 구비되어있어 업무 공간으로 굉장히 편했습니다.

노마드를 위한 업무 공간

image.png그래도 치앙마이까지 디지털 노마드를 왔는데 제대로 즐겨야겠죠? 이곳은 와식 공간도 잘되어있습니다. 빈백에 누워 쉬거나 업무를 볼 수 있습니다. (살짝 부끄러워서 발가락은 숨겼습니다 ㅎ)

image.png2층에는 아래 공간이 비치는 대형 해먹 같은 공간도 있습니다. 통창도 잘되어있어 햇볕을 받으며 업무를 즐길 수도 있습니다.

image.png외부에는 거의 휴양시설 같은 썬배드도 있습니다. 그러나 지금은 스모킹 시즌인지라.. 거의 사용하지 않는 것 같습니다.

편의 시설

image.pngYellow는 내부에 카페도 있고 정수기도 구비되어 있습니다.

image.png배가 고프다면 셀프 스낵 코너를 활용하면 됩니다. 저는 치앙마이산 망고 츄잉바를 먹었으나 제 취향은 아니었습니다 ㅎㅎ

image.png이곳은 실제 업무를 보는 사람들이 많기 때문에 폰부스가 여러 개 설치되어 있습니다.

image.png회의실은 시간단위로 빌릴 수도 있고, 저처럼 데이패스를 구매한 경우 회의실이 비어있다면 사용 가능하다고 합니다.

image.png그리고 배가 고프다면 외부 식당 공간을 활용하셔도 됩니다. 저는 숙소가 가까워서 사용하지는 않았지만 잘 꾸며져 있었습니다.

image.png스타트업 자유의 상징 미끄럼틀도 있습니다 ㅋㅋㅋ

마무리하며

저는 이곳에 와서

  • 기술 부채 관련 코드 삭제 및 리팩토링

  • 유료 구독자를 위한 새로운 기능 개발

  • UX 관련 버그 해결

  • 주짓수 해외 방문 수련 관련 글 작성

을 하였습니다. 집중하여 업무를 보기 굉장히 좋은 공간이었습니다. 다음에 치앙마이에 정말 일을 하러 온다면 장기 이용권을 구매할 것 같습니다. 근처에 다른 코워킹스페이스들을 가보지 못해 아쉽지만 매번 다양한 공간들을 경험하고 있어 재밌습니다. 긴 글 읽어주셔서 감사합니다.

혹시 저의 주짓수 이야기도 궁금하시다면 아래 글들을 함께 읽어주시면 감사하겠습니다.

10
2
유서경 Quartz

유서경 Quartz

1년 묵힌 기술 부채 해결기 (feat. TanStack Query)

image.png

안녕하세요. 주짓수 앱을 만들고 있는 유서경입니다. 출시한 지 1년 2개월된 앱에 1년 된 기술 부채가 있다면 믿으실 건가요? 놀랍게도 제게 벌어진 일입니다. 드디어 지난주! 이 기술 부채를 해결한 따끈따끈한 이야기를 공유해보려 글을 작성합니다. 제가 이 앱을 운영하며 가장 속이 뻥 뚫리고 그래도 내가 개발자로서 성장했구나를 느낀 시점이었습니다. 이 글은 아래와 같은 분들이 읽기 좋습니다.

  • Expo managed workflow 환경에서 Firebase를 사용하는 분

  • TanStack Query 도입기가 궁금한 프론트엔드 개발자 분

  • 기술 부채를 도대체 왜 1년이나 묵히고 있었는지 궁금한 분

  • 1년 동안 서비스의 성장을 가로막았던 기술 부채가 궁금하신 분

  • 1년 동안 기술 부채로 불안에 떨었던 인디 메이커의 머릿속이 궁금한 분

직접적인 코드보다는 문제를 해결한 과정을 소개할 예정이니 가벼운 마음으로 재미있게 읽어주세요.

기술 부채 소개

Post Black Belt는 제가 혼자 기획, 개발 그리고 운영까지 하고 있는 인디 앱입니다. 타 서비스도 마찬가지이겠지만 1인 개발에서 가장 부족한 리소스는 시간입니다. 저의 경우 회사 일과 병행하며 주말이나 여가 시간을 활용했기 때문에 특히 복잡한 이슈를 깊게 생각해볼 시간을 마련하기 힘들었습니다.

기술 부채가 왜 발생했나요?

이 앱은 제가 프론트엔드와 백엔드를 구분하지도 못했던 시절 만든 저의 첫 서비스입니다. 따라서 대부분의 개발 환경, 구조 세팅이 미숙합니다. 처음 이 프로젝트의 목표는 "취업 준비"였기 때문에 기능을 구현하는 것을 우선으로 하고 기술 스택 선정이나 운영은 고려하지 않았습니다. (저 혼자 사용하려 했었습니다 😶)

게다가 제가 프론트엔드 개발자이다보니 (BaaS 임에도 불구하고) 데이터베이스 사용과 관리에 매우 취약했습니다. Post Black Belt는 상당히 독특하게 local DB와 Firestore DB를 모두 사용하고 있는데, 그 이유는 1년 전 땜빵식 해결 방법을 채택했기 때문입니다. 😱

어떤 기술 부채였나요?

처음에는 사용자의 일기를 local SQLite DB에 저장하고 있었고, 앱을 삭제하거나 캐시를 지우게 되면 데이터가 유실되는 이슈가 있었습니다. 사용자가 점점 많아짐에 따라 해당 문제가 크리티컬하게 작용할 것이라 생각하였고 local DB에 일기를 저장하는 동시에 Firestore에도 함께 저장하여 일기를 백업해두도록 하였습니다. 아래 그림을 보면 일기를 생성하고, 수정하고 지우는 로직을 local DB와 Firestore에 함께 수행하고 일기를 읽는 로직은 local DB에서 가져오는 것을 확인할 수 있습니다. local DB를 Firestore로 완전히 대체하지 않은 이유는 SQL DB를 NoSQL DB로 변환하는 데에 꽤 많은 리소스가 필요하고, Firestore의 Read 쿼리가 많이 나와 비용을 지불하고 싶지 않았기 때문입니다.

image.png

그러나 여전히 3가지 큰 문제점이 남아있었습니다.

  1. local DB가 여전히 Source of Truth로 작용한다.

    이제 사용자가 앱을 삭제해도 데이터가 사라지지는 않습니다. 그러나 여전히 일기의 원본은 사용자 기기 내에 있고, 실제로 Firebase 로그인 핸들링이 제대로 되지 않아 만료되는 이슈가 있었을 때 사용자 기기 내에서만 일기가 저장되는 부차적 이슈가 있었습니다.

  2. Firestore에서 제공하는 자체 캐싱을 사용하지 못하여 Read 쿼리가 많이 발생한다.

    Post Black Belt는 Expo 환경으로 개발되었습니다. 제가 처음 앱을 구축했을 때는 Firebase의 React Native용 패키지를 활용하기에 Expo managed 환경의 제약과 버그가 있어 Firebase JS SDK를 선택하였습니다. 그리고 이 경우 지속성 캐시를 활용할 수 없다는 것을 나중에 확인하게 되었습니다....

    image.png

  3. SQL과 NoSQL이 혼용되어 개발 경험이 매우 좋지 않음

    많이들 아시다시피 Firestore는 NoSQL DB입니다. 따라서 local에서는 SQL로 저장해서 쿼리하고 백업은 NoSQL로 구성한다는 것이 개발자로서 꽤나 불편한 경험이었습니다.

왜 기술 부채를 해결하지 않았나요?

위의 문제가 있음에도 제가 이 기술 부채를 해결하지 않았던 이유가 있습니다. (이 글의 제목이 "묵은"이 아니라 "묵힌"인 이유는 의도적으로 해결하지 않았기 때문입니다.)

제가 갖고 있던 가장 합리적인 해결 방법은 local DB를 없애고 Firestore를 Source of Truth로 사용하는 것입니다. 그러나 이 경우 사용자가 많아질수록 Read 쿼리 비용 함께 증가하기 때문에 고려하고 싶지 않았습니다. 사이드 프로젝트는 이미 제 시간이라는 거대한 리소스를 투자하고 있는데 그 이상을 사용하면서 스트레스를 받고 싶지 않았기 때문입니다. 당시에는 사용자보다는 저의 개발 프로젝트라는 인식이 강했기 때문에 정기적인 비용이 지불되면 지속하기 어렵다고 판단하였습니다. (지금은 사용자를 위해 만들고 있습니다. 😇)

왜 1년 만에 기술 부채 해결을 결정했나요?

그럼에도 불구하고 이 기술 부채를 해결하기로 결정한 이유는 두 가지입니다. 첫 번째는 지난 1년 동안 불안함과 찝찝함으로 저를 너무나 괴롭혔기 때문입니다. 더이상 관련 CS가 들어올까 걱정에 떨며 살고 싶지 않았습니다🫠. 두 번째는 이 문제가 서비스의 성장을 막고 있다면 우선순위가 높은 기술 부채이다라는 동료 개발자의 조언 때문이었습니다. 실제로 신규 기능을 기획할 때 이 기술 부채가 꽤 큰 걸림돌이 되고 있었습니다. 아마 제가 느끼기에 너무 거대한 문제여서 부채를 못본 척 하며 미뤘을 수도 있습니다.

여러분은 이런 상황에서 어떤 결정을 하시나요? 정말 하기 싫지만 문제를 해결해야 할 때, 정말 해결할 사람이 나 하나일 때, 이 경우에는 내가 이 프로덕트의 CTO라고 생각하고 막중한 책임감을 부여하면 됩니다. 이게 인디 메이커의 장점이자 단점이랄까요.. ㅎㅎ 믿고 의지할 곳은 나뿐입니다...

기술 부채 해결을 위한 옵션들

처음 기술 부채를 발견했을 때보다 1년이라는 시간이 지났으니, 이제 더 많은 옵션을 고려할 수 있습니다. 다시 정리하자면 아래 문제들을 해결해야 합니다.

(1) local DB를 삭제하고 서버의 DB를 Source of Truth로 사용

(2) Read Query 비용 문제 해결

(3) SQL, NoSQL 중 한 가지만 사용

Supabase로 마이그레이션 해보자

최근 BaaS에서 Firebase의 대안으로 RDB인 Supabase의 인기가 급부상하고 있습니다. 실제로 Supabase에서도 Firebase로부터의 마이그레이션을 잘 지원하고 있으며, 비용도 쿼리 당이 아닌 용량으로 계산되어 (1)부터 (3)의 문제를 모두 해결할 수 있습니다. 이왕 부채를 해결하는 김에 개발 경험이 좋았던 Supabase로 아예 넘어가버리자!라는 원대한 계획을 만들었지만 두 가지 이슈가 있었습니다.

  • Firebase Auth를 함께 이전하려면 로그인 상태 유지를 위해 서버를 띄워야 하고, 월간 5달러의 비용이 발생함: (2)보다 많은 비용 발생

  • Firebase를 Supabase로 먼저 대체한 후 (1)을 해결해야 하여 한 번에 너무 많은 문제들을 다뤄야 함: 문제 해결 범위가 너무 방대해짐

Firebase를 JS SDK에서 react-native-firebase로 마이그레이션 해보자

그러면 (2)의 문제를 해결하기 위해 패키지를 변경하는 것은 어떨까요? 이미 서비스 내에서 Firebase를 사용하고 있으므로 상당히 간단해보이며, 추가로 JS SDK를 React Native에 사용하여 제한되었던 Firebase의 타 서비스(GA4, Remote Config 등)을 활용할 수 있게 됩니다. 그러나...

  • 여기도 마찬가지로 Auth 변경으로 로그인이 풀리는 문제가 있습니다. 이 경우 서버를 새로 구성하거나 최악의 경우 모든 사용자에게 재로그인을 받아야 합니다.

  • 큰 문제는 아니지만 JS SDK 코드를 react-native-firebase 인터페이스에 맞게 모두 수정해야 합니다.

서버 상태 관리 툴인 TanStack Query를 도입하자

여기까지 오는데 제 설 연휴와 주말을 모두 써버렸습니다.. 하하.. 하지만 CTO가 여기에서 무너지면 안됩니다.. 이제는 프론트엔드 개발자 베이스다운 해결 방법을 사용해보려 합니다. 서버 상태 관리 툴을 도입하여 직접 캐시를 관리하는 것입니다.

이 방법의 장점은

  • 내가 직접 캐시를 관리하여 비용을 조절할 수 있다.

  • 현재 환경에 TanStack Query Layer만 추가하면 된다.

단점은

  • 처음 사용해보는 라이브러리로 적응 기간이 필요하다.

    • 이미 회사에서 Apollo Client를 사용해보았기 때문에 완전히 어색하지는 않을 것이다.

  • 사용자가 많아질 경우 (2)의 문제가 다시 발생할 수 있다.

    • 아직 발생하지 않은 문제를 먼저 고민할 필요없다. 비용이 많이 발생하면 사용자들이 많아지는 서비스에 기뻐하며 그때의 문제를 또 다시 해결하면 된다.

TanStack Query 간단 사용기

TanStack Query는 FE에서는 상당히 인기가 많은 도구이고, 2023년 React Native 설문조사에서도 Data Fetching 도구로 1위를 수성할만큼 커뮤니티도 개발자 만족도도 좋은 편입니다.

image.png

인디 메이커는 대부분의 문제를 혼자(요즘은 GPT 선생님과 함께지만) 해결해야하기 때문에 좋은 커뮤니티를 갖춘 라이브러리는 중요합니다. 저는 공식 문서도 읽기는 했지만 maintainer의 best practice와 실용적인 팁이 담겨있는 TkDodo's Blog에서 많은 도움을 받았습니다. 해당 블로그 내용은 v5 이전의 내용이어서 deprecated된 부분도 있지만 활용 방법만 잘 숙지하면 v5에도 충분히 적용 가능합니다.

또한 React Native 앱을 사용하는 경우 캐시를 AsyncStorage에 저장하여 앱이 종료되었다 다시 켜져도 캐싱을 유지하게 할 수 있습니다. 제가 Firebase JS SDK의 사용하지 못한 이유는 AsyncStorage가 아니라 indexedDB를 활용하기 때문입니다.

간단한 캐싱 예시를 보여드리자면,

Mar-12-2024 12-00-05.gif

위에서는 처음 12월의 일기를 불러올 때 서버에 요청하여(로딩 인디케이터) 데이터를 가져오지만,

Mar-12-2024 12-00-10.gif

12월의 데이터를 재요청할 때는 서버 요청없이(로딩 없음) 캐시에서 바로 데이터를 가져오는 모습을 확인할 수 있습니다.

이 캐시는 사용자가 앱을 종료하였다가 다시 켜도 유지됩니다. 캐시의 상태는 사용자가 CUD를 발생시키면 fresh > stale로 변경되어 서버에 재요청을 발생시키도록 하였습니다. 캐시 상태 관리도 상당히 중요한데요, Post Black Belt는 아직 사용자 개인 일기장으로만 활용되고 있으므로 비용 최소화를 우선적으로 고려하였습니다. 서비스가 성장하여 네트워킹 기능이 생기면 캐싱 정책도 유연하게 변경될 예정입니다.

개인적으로 마음의 짐으로 생각하던 부채를 해결하여 기분이 좋은데요, 치앙마이로 디지털 노마드를 오기 전에 해결해두어 조금 더 가벼운 마음으로 일할 수 있게 되었습니다. 긴 글 읽어주셔서 감사합니다!

Post Black Belt

주짓수 수련자들을 위한 기술 기록 다이어리

1
5
유서경 Quartz

유서경 Quartz

액상과당 과다 섭취

치앙마이에는 일하기 좋은 카페들이 많습니다. 제가 머물고 있는 님만해민 지역은 치앙마이의 가로수길이라고 불릴 정도로 트랜디한 카페가 많습니다.

image.png

태국 라떼아트 챔피언이 운영하는 카페에 가서 더티커피를 마시다가, 내부가 조금 시끄러워지는 것 같아서

image.png

이전에 유튜브로 찾아놓은 작업하기 좋은 카페로 이동하여 레몬 소다를 마셨습니다. 이곳의 카페는 아침부터 열어서 오후 5시 이전에 닫는 경우가 많습니다. 월요일 오전이라 그런지 한적하고 좋네요.

image.png

지금은 점심을 먹고 나와서 오렌지 프리즈를 마시고 있습니다. 제 위장이 하루에 커피를 1잔만 수용할 수 있어 치앙마이의 맛있는 커피를 2주동안 14잔밖에 못마시는 것이 아쉽네요. 이곳의 음료는 보통 100바트(약 3500원) 내외여서 부담없이 카페를 돌아다니고 있습니다. 세 곳 모두 숙소에서 도보로 10분 내외로 갈 수 있습니다. 😎

image.png

오늘은 구독 전환 화면을 개선하고 운동하러 갈 예정입니다 ㅎㅎ 다들 즐거운 오후 보내세요!

Post Black Belt

주짓수 수련자들을 위한 기술 기록 다이어리

0
6
유서경 Quartz

유서경 Quartz

치앙마이에서 디지털 노마드로 살아남기 - 1일차

image.png

안녕하세요. 주짓수 앱을 만들고 있는 유서경입니다. 저는 이번 3월을 gap month로 갖게 되었는데요, 그동안 가장 궁금했던 디지털 노마드를 체험하러 태국 치앙마이에 와있습니다. 사실 살아남기 시리즈 썸네일은 재미로 만든 것인데 저의 치앙마이 1일차가 실제로 살아남기가 될 지는 상상도 못했습니다... 저의 기록이 치앙마이 워케이션을 생각하시는 분들께 도움이 되길 바랍니다 ㅎㅎ

image.png

상쾌한 치앙마이의 아침입니다. 사실 치앙마이는 태국 내에서 산을 불태우는 화전의 영향으로 3월 전세계 최악의 공기질을 갖추고 있습니다. 실내에서 서비스만 만드는 디지털 노마드들에게 최적의 환경이죠. 그럼에도 불구하고 제가 이 곳을 선택한 이유는 비행기와 숙소를 예약한 후 이 사실을 알았기 때문입니다.... 실제로 제가 오늘 만난 외국인은 3월이 되어서 치앙마이를 떠난다고 합니다. 길거리에도 마스크를 쓰고 다니는 분들도 꽤 많고요. 저는 높은 인구 밀도를 선호하지 않기 때문에 좋은 것 같기도 하고요. 왜 눈물이 나는지는 모르겠습니다... 흑흑

image.png

사실 제가 치앙마이를 선택한 큰 이유 중 하나는 주짓수 도장입니다. 이 도장을 처음 본 순간 저도 모르게 항공권과 숙소를 결제해버렸습니다. 주 6일 운동을 할 수 있기 때문입니다 😎. (요가 클래스도 포함되어있습니다) 주짓수를 하며 주짓수 앱을 만드는 디지털 노마드를 꿈꾸며, 치앙마이에서 저의 첫 일정은 도장을 가는 것이었습니다.

금요일 오전이어서 사람은 많지 않았지만 오히려 더 집중케어를 받으며 재밌게 수업을 들었습니다 ㅎㅎ 영어로 주짓수 수업을 듣는 것이 처음이라 긴장을 조금 하였는데 어차피 한국말로도 잘 못알아들어서 (ㅋㅋ) 편한 마음으로 수강하였습니다. 주짓수 영상을 꽤 많이 봐서 사용하지는 못해도 아는 기술은 많다고 생각했는데 생전 처음 보는 기술을 배울 수 있어 즐거웠습니다.

image.png

제가 개발 업무에서 귀찮아 하는 것은 보일러플레이트를 구성하거나 인프라를 구축하는 것입니다. 숙소에 당연히 있을 것이라 예상한 것들이 구비되어있지 않아 눈물을 머금고 마야몰(치앙마이 내 가장 큰 쇼핑몰)에 다녀왔습니다. 도복을 두 개 챙겨오느라 생필품을 가져오지 못한 벌을 돈으로 해결하였습니다. 다 합쳐서 8만원 정도 들었으니 쇼핑몰 내 물가는 아주 싸지는 않다고 느껴집니다.

image.png

저는 책벌레가 되고 싶지만 서점에 가면 책이 아닌 부수적인 것들에 눈이 가는 종족입니다. 오늘도 서점에 들어가서 태국어 교육용 카드를 샀습니다. 별 생각없이 기념품으로 구매하였는데 Grab으로 뭘 시킬지 고민할 때 사용하기 좋더군요 ㅎㅎ 태국에 와서 먹은 것 / 앞으로 먹을 것 / 잘 모르겠는 것으로 나누어두었습니다 🥘

image.png

드디어 치앙마이에 온 지 약 22시간 만에 출근에 성공하였습니다. 첫 날부터 당연히 업무를 볼 것이라 생각하여 이것저것 계획해두었는데 디지털 노마드 인프라를 구축하는 것이 만만치 않았습니다. 다음번에는 더 길게 와야겠다는 생각이 드네요. 이곳은 숙소 근처에 있는 카페인데 밤 늦게까지 열고 구글맵 평점도 좋아 선택하였습니다. 달달한 커피를 추천해달라 말씀드리니 더티커피를 알려주셨습니다. 아는 분께 소개받는 카페도 더티커피가 유명하다고 하던데 현재 유행 중인가 봅니다.

image.png

이제 저는 슬슬 밀린 업무를 하려 합니다. 업무를 생각보다 빡빡하게 짜두어 70% 달성을 목표로 해야 치앙마이를 더 즐길 수 있을 것 같네요 ㅎㅎ 글 읽어주셔서 감사드리며 재미있게 읽으셨다면 더욱 감사드립니다.

Post Black Belt

주짓수 수련자들을 위한 기술 기록 다이어리

6
4
유서경 Quartz

유서경 Quartz

디지털 노마드 출발 준비 완료

개발자를 업으로 삼고 싶었던 이유 중 하나는 맥북 한 대만 있으면 어디서든 일을 할 수 있다는 점이었습니다. 6년이라는 짧지 않은 기간동안 기계공학을 공부하였지만 개발자 커리어를 시작하고 지난 1년 동안 후회한 적은 단 한 번도 없는 것 같습니다. 그리고 오늘 상당히 기쁜 마음으로 공항 라운지에 앉아있습니다.

image.png

깃허브 커밋을 처음 올린지 3년 만에, 드디어 디지털 노마드의 꿈을 이루러 떠납니다 ㅎㅎ

image.png

도착해서 어떤 경험을 할 지 기대됩니다. 코워킹 스페이스를 갈지 카페를 돌아다닐지 아니면 숙소에 박혀서 개발만 하게 될지... 2주라는 길고도 짧은 기간동안 재밌는 일들이 많았으면 좋겠습니다.

image.png
1
8
유서경 Quartz

유서경 Quartz

첫 유료 구독자가 생겼습니다.

약 2주 전 간단한 광고 제거 기능을 추가하여 구독 모델을 오픈하였습니다.

사실 유료로 제공하는 기능도 없는 상태여서 아무도 구독해주지 않을 것이라 생각하여 서비스 내에서 숨겨두고 있는 기능이었습니다. 개인적으로 유료로 운영한다는 것이 부담되기도 하고요.

image.png

그럼에도 불구하고 프로덕트에 돈을 지불 혹은 후원을 하고 싶은 유저가 있을 것이라는 주위의 권유에 빠르게 단순한 기능을 추가하여 오픈해보았습니다.

그러자 24시간도 안되어 자고 일어나니 1명의 구독자가 생겼습니다.

그것도 브라질에서...

아직 사용자의 95%가 한국인 유저라 글로벌 유저의 구독은 전혀 예상하지 못했습니다.

image.png

주짓수의 본고장에서 인정받으니 꽤 기분이 좋습니다 😎

image.png

Post Black Belt

주짓수 수련자들을 위한 기술 기록 다이어리

0
7
유서경 Quartz

유서경 Quartz

어느 날 Meta의 14년차 프로덕트 디자이너의 콜라보 요청이 왔다

안녕하세요, 주짓수 앱을 만들고 있는 유서경입니다.

본래의 저라면 목차를 구성하고 문장을 잘 정리하여 여러 번의 퇴고 끝에 글을 업로드하겠지만, 개인적으로 신선한 감정으로 기록해두고 싶은 일이 생겨 쓰다만 클럽을 활용해보려 합니다 😄 ㅎㅎ

살다보면 의도와는 다른 결과로 신기한 일이 벌어질 때가 있습니다.

작년 9월, 해외 주짓수 사용자를 모아 AdMob 광고 수익을 얻기 위해 꽤나 오랜 기간 동안 영어 버전을 개발해두었습니다.

image.png

앱과 웹 그리고 각 OS 별 스토어를 업데이트해야 했고 새로운 기능을 개발할 때마다 유지보수를 해야했기에 "너무 시기상조였나?"라는 회고를 하기도 했습니다. 또한, 현재 약 95%가 한국 사용자로 글로벌 주짓수 수련자 분포를 고려한다면 큰 임팩트를 내지 못하고 있습니다.

image.png

그러던 중 어제 오후, 제 마음을 들뜨게 하는 DM을 받게 되었습니다. 작년 여름 주짓수를 시작한 한 해외 프로덕트 디자이너가 콜라보를 해보고 싶다는 연락이 온 것입니다. 처음에는 많은 고민없이 "해외에는 사이드 프로젝트로 인디 메이커들끼리 도와주는 문화가 잘 되어있나?"라고 생각했습니다.

image.png

그러나 점점 그의 프로필을 볼수록 이 제안이 쉽게 얻을 수 있는 기회가 아니라는 생각이 들었습니다. "14년차", "Meta 시니어 프로덕트 디자이너" 등 개발자인 제가 디자인하고 있는 앱에 과분할 수 있는 경력 사항들이 보였습니다.

저는 100% 순도의 호기심으로 "왜 이 프로덕트에 관심이 있고 콜라보를 하려 하느냐?"고 질문했고, 디자이너님은 "학구적인 관심, 그리고 본인이 실제로 사용하는 앱을 만드는 경험이 재미있기 때문이야"라고 대답해주었습니다.

(다음에 계속.... ^^)

글을 빠르게 작성하고 싶었는데 30분이나 소요되었네요. 퇴고가 없는 글이므로 오타나 문법상 오류가 존재할 수 있습니다 ㅎㅎ

Post Black Belt

주짓수 수련자들을 위한 기술 기록 다이어리

10
10
유서경 Quartz

유서경 Quartz

혼자서 만든 첫 서비스가 1600명의 사용자를 모으기까지 - 2023년 회고

안녕하세요. 저는 사이드 프로젝트로 Post Black Belt라는 앱을 혼자 개발하고 운영하고 있습니다. 매일 아침 출근하고 디스콰이엇에 올라오는 좋은 글들을 읽은 지는 몇 달이 되었지만 글쓰기를 미루고 미루다가 2023년 회고글을 작성하면서 함께 올립니다.

image.png

Post Black Belt는 주짓수 수련자들의 운동, 기술 기록 및 나만의 주짓수 스타일을 알아가는 과정을 돕기 위해 만든 앱입니다. 태초에는 개발자인 제가 필요해서 구상하여 포트폴리오 용도로 개발하였지만, 출시 1년이 지난 현재는 1600명의 유저들과 함께 성장하고 있는 앱입니다.

2023년 회고

올해는 저에게 뜻깊은 한 해였습니다. 프론트엔드 개발자로 첫 커리어를 시작하였고 인디 앱을 1년 동안 운영해보면서 정말 많은 것들을 배우고 성장했습니다. 2023년을 시작하면서 제가 가장 중요하게 여기는 3가지인 개발, 주짓수 그리고 앱 관점에서 목표를 하나씩 세웠고 정말 감사하게도 모두 달성할 수 있었습니다.

image.png

그러나 마냥 행복하지만은 않았는데요, 아마 인간의 욕심은 끝이 없어서인지 더 좋은 결과를 만들어낼 수 있을 것 같아 아쉬운 점도 많습니다. 이 글에서는 제가 달성한 목표를 설명하고 새로 배운 점과 아쉬운 점을 함께 소개하려 합니다. 혼자 앱을 개발하면서 우리나라의 인디 앱 사례들을 많이 읽어보았는데 이 글이 저와 비슷한 환경의 메이커분들께 도움이 되었으면 좋겠습니다.

프로덕트 관점: 이용자 1600명 달성

image.png

사실 Post Black Belt는 저의 개인적인 불편함을 해결하기 위해 시작한 첫 앱 서비스입니다. 그러나 정말 감사하게도 2023년 일 년동안 1600명의 사용자 분들이 서비스에 공감해주셨고, 현재 매주 1000건의 소중한 일기들이 작성되고 있습니다. 초기에는 인스타그램 팔로우를 통해 제가 직접 유저 분들을 모으려 노력했지만 감사하게도 현재는 입소문을 통해 매달 100명 이상의 신규 유저분들이 들어오고 계십니다.

image.png

그렇다면 어떤 주짓수 수련자 분들이 Post Black Belt를 사용하고 계실까요? 주짓수는 벨트 색깔을 활용한 승급 체계를 가지고 있습니다. 주짓수의 독특한 점은 보통 하나의 벨트 색을 바꾸는 데에 2~3년이라는 긴 기간이 소요된다는 것입니다. Post Black Belt는 승급체계 순서대로 화이트, 블루 퍼플 벨트 순으로 많은 유저가 분포하고 있고, 신기하게도 제 예상보다 청소년 유색(그레이, 옐로우, 오렌지, 그린) 벨트 분들이 많이 계셨습니다. 보통 주짓수 수련자의 7-80%가 화이트 벨트에서 그만둔다는 이야기가 있는데요, Post Black Belt 유저 분들 중 33%는 이 과정을 이겨내고 유색 벨트가 되신 분들입니다.

image.png

올해 제가 앱을 만들면서 가장 염원했던 기능 중 하나는 영어 버전 출시였습니다. 주짓수는 사실 국내보다는 세계적으로 더 인기가 높은 스포츠입니다. 한국 사용자를 천 명 달성한 이후 영어 언어를 지원하였고 여러 국가에서 Post Black Belt를 사용해주셨습니다. 전체 유저의 대부분인 95%는 한국이지만 미국, 아랍 에미리트, 브라질 순으로 주짓수를 사랑하는 다양한 국가에서 앱에 방문해주고 계십니다.

새로 배운 점

1. 혼자서 온전히 브랜드를 운영하기

프로덕트 관점에서 앱을 운영하며 가장 인상깊게 배운 것은 혼자서 작은 브랜드를 앱 서비스로 운영하는 방법입니다. 처음에는 단순한 사이드 프로젝트로 시작했지만 유저가 늘어나고 서비스에 대해 애정과 책임감이 늘어나면서 여러 매체를 통해 많은 배움을 얻었습니다.

2. 우선순위를 산정하여 효율적으로 기획하기

본업이 아닌 사이드프로젝트의 가장 큰 현실적 제약은 시간입니다. 주 40시간 근무(및 매일 주짓수🥋)를 하면 물리적으로 저에게 주어진 시간은 거의 주말 뿐이었습니다. 지난 1년 동안 제 자신을 가장 칭찬하는 점은 그럼에도 불구하고 총 34번의 업데이트를 통해 다양한 기능을 빠르게 출시했다는 것입니다.

사실 34번 모두 효율적으로 기능을 개발한 것은 아닙니다. 한 달 넘게 공들여 개발한 기능을 아무도 사용하지 않아거나, 정말 잘될 것이라고 예상하여 높은 집중력으로 며칠을 투자해 만든 기능이 계륵이 되어버리기도 했습니다. 이 과정에서 저는 린 분석에서 말하는 기능을 개발하기 전 고려해야 할 7가지에 더욱 공감할 수 있게 되었습니다.

아쉬운 점

1. 서비스 수익화

Post Black Belt를 처음 만들 때에는 개발 지식을 얻어가는 것만으로도 만족도가 높았습니다. 그러나 1년이라는 긴 시간이 흐르면서 취미로 수익없이 앱을 운영하는 것이 힘들다는 것을 알게 되었고 수익화는 앱 운영에 필수적이라는 것을 깨달았습니다. 기능의 확장성, 개발 원동력을 얻기 위해서는 내부적인 해결법은 분명한 한계가 존재합니다. 따라서 2024년에는 앱 구독 모델을 통해 더욱 양질의 기능을 제공해보려 합니다.

2. 사용자 피드백 및 로그 모니터링

2023년 상반기에는 Google Form이나 인스타그램으로 실 사용자 분들의 피드백을 받아 많은 업데이트를 하였습니다. 대표적으로 청소년 유색 벨트, 다양한 일기 카테고리, 벨트 보관함 등이 있습니다. 하지만 하반기에는 개인적으로 해보고 싶었던 기획적, 기술적 도전들을 더 많이 시도한 것 같습니다. 2024년에는 현재까지 받았던 피드백을 다시 개선해보는 기간을 가져보려 합니다.

개발 관점: 프론트엔드 개발자 커리어 전환

image.png이제 저의 본업인 개발자의 시선으로 2023년을 회고해보겠습니다. 작년 한 해도 Post Black Belt을 처음 시작하며 밤낮없이 개발을 하였다고 생각했는데 올해는 더 열심히 일한 것 같습니다. 1인 개발을 하며 기술 스택을 선정하고 새로운 기술을 접해본 경험을 회사 업무에도 잘 적용해볼 수 있어 개발자로서도 많은 배움이 있었습니다.

image.png

새로 배운 점

1. 개발이 서비스의 전부가 아니다

올해 초, 앱을 출시하고 제가 얻은 결론은 “인디 앱을 운영하기에 프론트엔드 개발자는 최적의 직업이다” 였습니다. 그러나 현 시점에서는 사업계획, 운영, 마케팅 그리고 디자인 등의 밸런스를 골고루 갖추어야 좋은 서비스를 만들고 지속할 수 있다고 생각합니다. 상반기에는 더 좋은 코드를 짜고 새로운 기능을 출시하기 위해 대부분의 시간을 개발에 쏟았지만, 하반기에는 Post Black Belt 서비스 자체에 대한 고민과 배움에 더 많은 시간을 투자하였습니다.

2. 좋은 라이브러리 적절하게 사용하여 빠르게 개발

올해는 LLM을 이용한 많은 AI 서비스들이 출시되었습니다. 저도 개발자로서 이 기술에 개인적인 관심이 있었고 제로베이스에서 학습을 통해 한 달만에 출시한 기능이 바로 AI Black Belt입니다. Vercel AI SDK, LangChain을 사용하여 정말 빠르게 코드로 구현할 수 있었고 베타 서비스임에도 불구하고 꽤 많은 분들이 사용해주셨습니다. 현재는 베타 서비스를 잠시 중단하였지만 이 분야가 더 빠른 속도로 발전하여 더 좋은 도구가 개발된다면 사용자 분들의 주짓수 수련에 실질적인 도움을 줄 수 있는 기능으로 연계시킬 예정입니다.

제가 Post Black Belt를 개발하며 가장 빠르게 출시한 기능은 도복 브랜드 한 눈에 확인하기입니다. 블랙 프라이데이 일주일 전, 해외 도복을 직구하기 위한 검색을 하다 다른 수련자 분들도 비슷한 환경일 것이라 생각하였고 22시간이라는 정말 짧은 시간만에 기획부터 개발이 이루어졌습니다. 이 기능에서는 도복 브랜드를 추가하는 간편한 운영이 가장 주요하였는데 세일 정보가 생기면 코드를 수정하여 재배포하는 것이 아닌 빠르게 수정 사항을 반영해야 했기 때문입니다. 따라서 Notion API를 사용하여 정말 단순하게 DB를 구성하였고, 사용자 분들이 제보해주시는 브랜드를 스마트폰으로도 손쉽게 추가할 수 있게 되었습니다.

아쉬운 점

1. 외부 의존성을 어떻게 최소화할까?

Post Black Belt는 Andorid와 iOS를 동시에 빠르게 개발하기 위해 Expo를 사용한 앱입니다. Expo Go는 매번 앱을 빌드하지 않아도 실기기에서 빠르게 테스트할 수 있는 환경입니다. 그러나 Expo에서도 프로덕션 품질의 앱을 위해서라면 개발 빌드를 사용하라고 추천하듯이, Expo Go 환경과 출시 환경은 상이합니다. 올해 초 이를 인지하지 못하고 Expo Go에서만 개발하여 새 버전을 출시하고 앱 충돌이 발생하는 경우가 있었습니다. 최근에는 앱의 환경 의존성을 최소화하기 위해 프로덕션 빌드 후 iOS의 TestFilght, Andorid의 내부 테스트를 반드시 거친 후 출시하고 있습니다.

올해 가장 당황스러웠던 사건은 Apple 개발자 계정이 신원 확인 검토로 6주 정도 막힌 것이었습니다. 앱은 플랫폼 특성상 스토어 심사를 받아 업데이트를 출시하는데 이 과정도 함께 닫혀버려 신원 검토가 언제 끝날지 모르는 상황에서 기약없이 기다려야만 하는 상황이었습니다. 스토어 심사에 대한 의존성을 줄이기 위해 JS 번들만이라도 올릴 수 있도록 Expo Updates(React Native의 Codepush와 같은 기능)의 도입을 검토하였지만, 이 또한 외부 라이브러리를 추가하는 것이므로 보류하였습니다.

더 많은 이야기가 궁금하시다면?

더 자세한 2023년 회고는 저의 블로그에서 확인하실 수 있습니다. 이 내용은 사용자 분들과도 함께 공유하고 싶어 앱 블로그에 업로드하였고 다음에는 디스콰이엇 메이커 분들과 공유하고 싶은 글도 따로 작성해 보겠습니다.

하나의 글에 2023년을 모두 정리할 수는 없지만 새삼 많은 것을 시도하고 경험해본 것 같습니다. 평일에는 개발과 주짓수, 주말에는 주짓수 앱 개발을 하다보니 가끔 권태로울 때도 있었지만 한 해를 되돌아보니 많은 성장을 했다고 느낍니다. 긴 글 읽어주셔서 감사드리며 저 혹은 앱에 궁금증이 생기셨다면 아래 글들도 함께 읽어봐주시면 감사하겠습니다. 다들 행복한 연휴 보내세요!

함께 읽으면 좋은 글들

  • 작년 이맘때쯤 앱을 출시하고 작성한 글입니다. 프론트엔드 개발자로 커리어 전환을 하면서 첫 프로젝트를 기획한 과정을 담고 있습니다. Expo(React Native)를 주니어 웹 개발자 관점에서 사용한 후기도 간략하게 기술되어 있습니다.

  • Post Black Belt라는 브랜드명과 초기 개발기를 담았습니다.

34
14