유서경 Quartz · June 9, 2024 11:42am

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

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

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

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

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

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

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

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

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

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

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

1.2 개발 범위 정하기

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

운영자는 신청자 정보 및 입금 확인이 수월해야 함
신청자는 구글 폼으로 신청한 정보들이 잘 전달되었는지 궁금함

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

따라서

구글 폼으로 받은 신청자들의 정보를 실시간으로 보여주고
입금 현황을 업데이트할 수 있으며
대진별 신청자 수도 함께 확인 가능한

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

2. 웹 서비스 개발하기

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

2.1 Google Sheet API 활용하기

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, 정식 출시 후보) 버전을 사용하는 것은 처음이었는데 꽤 재미있는 작업이었습니다.

2.3 그 외

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

3. 결과

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

마무리하며

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

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