Create value with codePlan, Build, Improve

01 / 05

프론트엔드·백엔드·배포 담당 · Next.js, Node.js, GraphQL, React Native, MariaDB, AWS

위치기반 구인구직 플랫폼입니다. 대표, 디자이너와 서비스 방향과 UX 개선안을 이야기하고 구현해서 보여준 다음 다시 다듬는 식으로 일했습니다. 입사했을 때 지도 검색이 40초 걸렸는데, 원인을 찾는 것부터 고치는 것까지 제가 맡았습니다.

문제

검색 조건을 바꿀 때마다 수백 개의 마커를 전부 다시 그려서 그동안 지도가 멈췄습니다. 마커를 찍는 데 쓰지도 않는 기업 이미지와 재무 정보까지 같이 내려오느라 GraphQL 응답이 평균 50MB였습니다.

판단

네이버 지도를 카카오맵으로 바꿨습니다. 공식 MarkerClusterer가 있어서 클러스터링을 직접 만들지 않아도 됐기 때문입니다. 쿼리에서는 마커에 필요 없는 필드를 약 140줄 지우고 검색 반경도 30% 줄였습니다. 직무 3단계 트리 자동완성은 서버를 부르지 않고 이미 받아 둔 데이터를 메모리에서 걸러 내도록 다시 만들었습니다.

결과

지도 응답 시간이 40초에서 5초로, API 페이로드가 50MB에서 5MB로 줄었습니다. Chrome DevTools Performance 탭으로 전후를 측정했고, 필터를 바꿀 때마다 화면이 멈추던 것도 없어졌습니다.

02 / 05

기획·앱·백엔드·스토어 심사·운영 · Flutter, Dart, Supabase, PostgreSQL, Edge Functions

App Store ↗Google Play ↗

풀이 기법을 배우고 그 실력으로 실시간 랭크 대전을 하는 스도쿠 앱입니다. 마이그레이션 120개, RPC 148개짜리 백엔드까지 직접 만들어 양대 스토어에 올렸고 출시 1주에 가입자 300명을 모았습니다. 만드는 동안 스도쿠 카페에 진행 상황을 계속 올렸는데 색상 테마와 기법 설명 방식은 거기서 받은 의견을 반영했습니다.

문제

두 달 만에 화면과 게임 모드가 빠르게 늘면서 새 기능을 만드는 것보다 이미 만든 게 틀어지는 일이 더 잦아졌습니다. 스도쿠 리그에는 보드의 난이도를 매기는 프로그램과, 풀이 중 다음 수를 알려주는 힌트 프로그램이 따로 있습니다. 둘의 판단이 달라도 에러가 나지 않습니다. 그래서 연습 보드 137개 중 4개는 난이도 프로그램이 "이 기법이 필요하다"고 판정했지만, 힌트를 따라 풀면 그 기법이 나오기 전에 힌트가 끊기는 상태로 한참 방치됐습니다. 파티 대전은 1:1 대전 코드를 복사해서 만들었는데, 복사한 뒤 1:1에서 고친 진행 중 문제 4건이 파티에는 그대로 남아 있었습니다. 랭크 대전이라 점수 조작은 막아야 하는데, 앱 화면에서만 검사하면 앱을 거치지 않고 서버에 직접 요청을 보내는 방식으로 그 검사를 건너뛸 수 있었습니다.

판단

보드를 만들 때마다 두 프로그램에 같이 돌려서 결과가 다르면 실패하는 테스트를 넣었습니다. 1:1과 파티, 점령전 컨트롤러 세 개는 같은 검사를 한 번에 받도록 묶었습니다. 중요한 검사는 전부 DB와 서버 함수로 옮겨 RLS 테이블 35개, SECURITY DEFINER 함수 135개로 구성했고 정답과 관리자, 토큰 테이블은 정책을 0개로 두고 권한을 회수했습니다. Apple 영수증은 루트 인증서까지 서버에서 검증합니다. 동시 접속이 많지 않아 랭크 매칭은 피크타임 두 번으로 모았고 실력 차가 나도 뒤집을 수 있게 점령전 모드를 따로 만들었습니다.

결과

스도쿠 카페에 진행 상황을 올리며 모은 사용자가 출시 1주에 300명이 됐고 2주 평균 DAU 40으로 우상향해 App Store 보드 카테고리 34위까지 올라갔습니다. 공통 테스트를 넣은 뒤로는 한쪽 컨트롤러만 고쳐지고 다른 쪽이 빠지는 일이 다시 생기지 않았습니다.

03 / 05

기획·프론트·백엔드·배포 1인 개발 · Flutter, Supabase, Riverpod, Claude Code

jaywithme.com ↗

질환과 지역, 나이, 소득 조건으로 받을 수 있는 의료복지 혜택을 찾아 주는 플랫폼입니다. 가족의 보호자로 지원사업을 직접 찾아다니면서 몰라서 못 받는 지원이 많다는 걸 알게 돼 만들기 시작했습니다. 웹과 iOS, Android를 같이 대응합니다.

문제

지원 탐색부터 로그인, 커뮤니티, 마이페이지까지 화면 6개와 백엔드를 혼자, 그것도 서버를 따로 두지 않고 만들어야 했습니다.

판단

Supabase의 Auth와 DB, RLS로 서버 없이 백엔드를 구성했습니다. 상태 관리는 Riverpod MVVM으로 뷰와 로직을 분리해 기능을 추가할 때 영향 범위를 좁혔고 로그인은 Google과 Kakao OAuth를 PKCE로 붙였습니다. 설계와 코드 생성, 디버깅은 Claude Code와 같이 했지만 화면 구조와 상태 관리 경계, DB 스키마는 제가 정했습니다. 생성된 코드는 읽기 전에 먼저 실행해 사용자 흐름을 따라가 봤고 프로필 사진 기능을 도로 뺀 것도 그렇게 정했습니다.

결과

화면 하나 만드는 시간이 1시간에서 5~30분으로 줄었습니다. 서버 운영 비용 없이 웹과 iOS, Android를 동시에 서비스하고 있습니다.

04 / 05

앱 개발·양대 스토어 출시 담당 · Flutter, Dart, Firebase, Node.js

숙면 유도 사운드 앱입니다. 음악 프로듀서와 앱과 음원을 서로 맞춰 가며 만들었습니다. 음원 끝에 3초를 비워 달라는 요구는 제가, 멜로디와 자연음과 주파수를 동시에 재생해 달라는 요구는 프로듀서가 내는 식이었습니다. 기획자, 디자이너와 함께 Flutter 코드베이스 하나로 iOS와 Android를 같이 출시했습니다.

문제

수면 음악은 자는 동안 계속 반복 재생되는데, 음원이 끝나고 처음으로 돌아갈 때 1초쯤 소리가 비었습니다. 자다가 갑자기 조용해지면 깨는 경우가 있어서 이 공백을 없애는 게 중요했습니다. 앱스토어는 개인정보 정책 문제로 심사를 반려했습니다.

판단

멜로디와 자연음, 수면 주파수를 트랙 세 개로 나눠서 멜로디가 끝나도 자연음은 계속 흐르게 했습니다. 그런데 오디오 인스턴스 세 개가 따로 놀아서 재생과 정지에 딜레이가 생겼고 ViewModel 하나가 세 개를 같이 관리하도록 묶었습니다. 회원과 음원, 좋아요 데이터는 Firebase로 설계하고 로그인은 OAuth 2.0으로 붙였습니다. 반려는 회원탈퇴 기능을 만들고 약관을 앱 안에서 볼 수 있게 해서 해결했습니다.

결과

반복 재생할 때 끊기는 부분이 없어졌고 트랙마다 음량을 조절해 취향대로 조합할 수 있게 됐습니다. iOS와 Android 심사를 모두 통과해 출시했습니다.

05 / 05

설계·구현·배포 · Next.js, React, TypeScript, Tailwind CSS, Vercel

지금 보고 계신 사이트입니다. 2022년에 React로 만들어 Next.js로 옮겼고 2026년 9월에 구조와 디자인을 다시 잡았습니다.

문제

처음 버전은 프로젝트를 기술 스택과 기능 목록으로 나열해서 읽는 사람이 제가 무엇을 판단했는지 알 수 없었습니다. 스크린샷을 페이지 안에서 크게 볼 방법도 없었습니다.

판단

Next.js와 TypeScript, Tailwind CSS로 다시 짰습니다. 프로젝트마다 문제와 판단, 결과를 나눠 쓰고 숫자를 앞에 두었습니다. 스크린샷은 라이트박스에서 방향키로 넘기고 Esc로 닫게 했고 다크 모드는 시스템 설정을 따르다가 직접 바꾸면 그 값을 기억합니다.

결과

이 페이지가 결과입니다. 코드는 github.com/Sun970324/sunlog 에 있습니다.