devkbs — 강범수 작업 원장

지금 만드는 중Seoul · KSTFrontend Engineer

디지털 교과서 퍼블리싱으로 시작해서 웹게임과 거래 플랫폼을 거쳤고, 지금은 직접 만든 서비스를 운영합니다. 여기에는 만든 것들과, 그때 왜 그렇게 정했는지를 적어 둡니다.

작업 원장 보기 개인 서비스

수록 내역

기록된 작업: 22건
개인 서비스: 9개
개발 노트: 9편
실무 경력: 5년+

2021 — 현재 · 재직 기준

01Now

직접 만든 앱과 웹 서비스

필요해서 만든 계산기와 개발 도구, App Store에 내놓은 앱을 소개합니다.

App Store축제 모아전국 축제를 지도·달력·검색으로 찾는 앱. 회원가입과 위치 권한 없이 쓰고, 관심 목록은 기기에만 저장합니다.

App Store듀데잇고정지출과 소비기한을 한곳에서. 회원가입 없이 기기와 iCloud에만 저장합니다.

App Store개발 핸드북웹 개발 기초를 도메인별로 정리한 레퍼런스. 앱과 웹이 같은 콘텐츠를 봅니다.

웹 도구UXPlanUI/UX 정책의 선택지를 눌러보고 비교하는 미리보기 도구.

개발 블로그recodelog.com2024년부터 쓰고 있는 개발 블로그. 겪은 문제와 고친 과정을 남깁니다.

생활 계산기depos.kr보증금·임대료 전환부터 실업급여까지, 생활 계산기 모음.

02Selected

대표 작업

직접 만든 앱부터 회사에서 맡았던 웹 프로젝트까지. 어떤 문제를 풀었고, 무엇을 선택했는지 함께 소개합니다.

스토어 이미지

01개인 서비스iPhone · 2026.08 출시

축제 모아

전국 축제를 지도·달력·검색으로 찾는 앱

전국 축제를 지도·달력·검색으로 찾는 앱입니다. 공공데이터를 앱에서 바로 쓸 수 있게 정리하고, 관심 목록과 최근 검색어는 기기에만 저장합니다.

역할: 기획·디자인·앱·서버 개발

ExpoReact Nativeexpo-routerexpo-sqliteHonoDrizzle ORM

프로젝트 보기 App Store 소개 사이트

스토어 이미지

02개인 서비스iPhone · 2026.07 출시

듀데잇

고정지출과 소비기한을 한 화면에서

고정지출과 소비기한을 한곳에서 관리하는 iPhone 앱입니다. 알림·위젯·날짜 인식을 연결하고, 회원가입 없이 기기와 iCloud에 데이터를 저장합니다.

역할: 기획·디자인·앱 개발

SwiftSwiftUISwiftDataCloudKitWidgetKitVision

프로젝트 보기 App Store 소개 사이트

03회사 작업 · Roowa웹사이트 · 2024.05 – 2024.08

남해독일마을 웹사이트 리뉴얼

카페24 이미지 사이트를 Next.js 브랜드 홈페이지로

글자까지 이미지에 들어 있던 관광지 홍보 사이트를, 검색되고 링크로 공유되는 브랜드 홈페이지로 바꿨습니다. 파독 근로자들의 이야기를 앞세우는 것도 이 프로젝트의 목표였습니다.

역할: 프론트엔드 단독

Next.jsReactTypeScriptTailwind CSSZustandAWS Amplify

기록 읽기 사이트 보기

04개인 서비스도구 · 2024.02 –

depos.kr — 임대료·보증금 상호전환 계산기

네이버 카페에 올린 개인 프로젝트가 실제로 쓰이기 시작했을 때

공공임대주택의 보증금과 월 임대료를 서로 전환해 계산해 주는 도구입니다. 실제 사용자가 생기고 나서야 리팩터링이 왜 필요한지 알게 됐습니다.

역할: 기획·디자인·개발 단독

Next.jsReactTypeScriptTailwind CSSZustandshadcn/ui

기록 읽기 사이트 보기

03Ledger

전체 보기

최근 기록 6건

회사·클라이언트 작업 18건과 개인 서비스 4건을 시간순으로 모아 뒀습니다.

Sass◆React Native (Expo)◆Vite◆Hono◆ASP.NET Core◆TanStack Query◆SWR◆React Hook Form◆Prisma · Drizzle ORM◆CSS Modules◆Framer Motion◆Storybook◆Canvas · Lottie◆AWS◆Docker◆Google Search Console◆Naver Search Advisor◆Google Analytics◆구조화 데이터◆Sass◆React Native (Expo)◆Vite◆Hono◆ASP.NET Core◆TanStack Query◆SWR◆React Hook Form◆Prisma · Drizzle ORM◆CSS Modules◆Framer Motion◆Storybook◆Canvas · Lottie◆AWS◆Docker◆Google Search Console◆Naver Search Advisor◆Google Analytics◆구조화 데이터◆

04Principles

일하는 방식

자주 꺼내 쓰는 기준들

프로젝트가 바뀌어도 비슷한 고민이 반복돼서, 그때마다 꺼내 보는 기준을 적어 뒀습니다.

원칙 01
이 값의 주인이 누구인지 먼저 정한다
서버가 기준인 데이터와 화면에서만 쓰는 데이터를 한 스토어에 섞어 두면, 그 값을 언제 새로 받아야 하는지 아무도 답하지 못합니다. 상태를 만들기 전에 어느 쪽 값인지부터 정해 두면 나중에 고칠 일이 많이 줄어듭니다.
원칙 02
공유될 값은 URL에 둔다
목록 필터, 상세 탭, 다단계 폼의 현재 단계처럼 링크로 보낼 만한 값은 전부 URL에 둡니다. 그러면 공유도, 뒤로 가기도, 검색 색인도 따로 만들 필요가 없습니다.
원칙 03
같은 숫자는 한 곳에서만 계산한다
금액이나 집계처럼 여러 화면에 나오는 값은 계산 함수를 하나만 두고, 화면은 그 결과를 보여주기만 합니다. 화면마다 반올림이 조금씩 다르면 사용자는 어느 숫자가 맞는지 믿지 못합니다.
원칙 04
되돌릴 수 없는 동작에만 확인 단계를 둔다
모든 버튼에 확인창을 붙이면 사람들은 읽지 않고 넘깁니다. 체결, 발송, 삭제처럼 되돌릴 수 없는 동작에만 한 단계를 더 두고, 나머지는 한 번에 되게 합니다.
원칙 05
실제 속도와 체감 속도를 따로 본다
스켈레톤이나 고정 비율 컨테이너는 로딩 시간을 줄여 주지 않습니다. 그래도 사용자가 느끼는 속도는 꽤 달라집니다. 오래 걸리는 작업은 지금 뭘 하고 있는지만 보여줘도 덜 답답해합니다.
원칙 06
라이브러리는 기능보다 관리 상태를 먼저 본다
많이 쓰는 라이브러리여도 최근 커밋과 이슈 답변이 끊겨 있으면 쓰지 않습니다. 시작할 때 이미 멈춰 있던 저장소는 반년쯤 지나 버전을 올릴 때 발목을 잡습니다.
원칙 07
직접 만들지 않을 것을 먼저 고른다
작은 기업 사이트에는 관리자 화면을 만들지 않고 Notion을 CMS로 썼는데, 그 프로젝트에서 가장 효과가 컸던 결정이었습니다. 인증처럼 검증된 게 있는 것은 가져다 쓰고, 시간은 화면에 씁니다.