본문으로 건너뛰기
DEVKBS

About · 소개

강범수
Beomsu Kang

초등 교과서를 EPUB으로 옮기는 일로 시작해서 웹게임, 기업 사이트, 백오피스, 금·카드 거래 플랫폼, 해외 직구 물류 관리자 웹까지 만들었습니다. 직접 만든 서비스 몇 개는 지금도 운영하고 있습니다. 화면을 그리는 것보다 데이터를 어디서 관리할지 정하는 데 시간을 더 쓰는 편입니다.

역할
프론트엔드 개발자
위치
대한민국
기록된 작업
22건
연락
kbs21c1987@gmail.com

Career · 커리어

  1. 01

    지니집

    2026.02 – 현재

    프론트엔드 개발자

    현대글로비스 해외 직구 물류 관리자 웹을 만들어 10월 초에 마무리했습니다. 코드 밖의 일도 많이 맡았습니다.

    • 현대글로비스 CBI Admin 프론트엔드 저장소가 만들어진 날부터 참여했습니다. 택배사 운송장 관리, 거래처·고객사 계정, 계약 관리, 주문 업로드와 배송 관리, 알림 발송 화면을 만들었고 프론트엔드는 세 명이 나눠 맡았습니다.
    • 현대글로비스와 하는 화면 리뷰 회의의 회의록을 쓰고 이메일로 공유했습니다. 회의에서 나온 수정은 화면에 반영한 뒤 다음 회의 전에 다시 확인했습니다.
    • 화면별 진행도, 엑셀 다운로드 항목, 내부 테스트 결과를 구글 시트에 정리해서 공유했습니다.
    • Jira 사용법 문서를 써서 공유하고 Slack에 Jira·Confluence 알림을 연결했습니다. 정기적으로 해야 하는 업무는 평일 정해진 시각에 Jira 업무 항목이 자동으로 만들어지게 설정해 뒀습니다.
    • 프로젝트를 마무리하면서 프론트엔드 인수인계 문서와 신규 개발자 온보딩 가이드, 교육 자료를 모두 끝냈습니다.
  2. 02

    디펙트럼

    2024.11 – 2025.11

    프론트엔드 개발자 (리드·전담)

    거래가 일어나는 플랫폼들의 프론트엔드를 전담했습니다.

    • 숙박 앱 백오피스를 시작으로 트레이딩 카드 거래·경매, 금 거래 앱 2종을 차례로 맡았습니다. 대부분 프론트엔드 전담이었습니다.
    • 돈과 마감 시간이 걸린 화면을 많이 다뤘습니다. 화면마다 금액이 똑같이 나오는지, 남은 시간이 정확한지를 계속 신경 써야 했습니다.
    • 소셜 로그인, 본인인증, 결제, 실시간 채팅은 보통 나눠서 맡는 영역인데 혼자 다 붙였습니다. 리뷰해 줄 사람이 없어서 Storybook과 테스트를 같이 썼습니다.
    • 서버에서 받아 오는 데이터와 화면에서만 쓰는 상태는 TanStack Query와 Zustand로 나눠 관리했습니다.
  3. 03

    루와콘텐츠그룹

    2024.04 – 2024.09

    프론트엔드 개발자 (선임)

    공공기관 홍보 사이트와 기업 웹사이트를 Next.js로 리뉴얼했습니다.

    • 남해문화관광재단의 남해독일마을 사이트를 카페24 기반에서 Next.js로 전면 리뉴얼했습니다.
    • 이미지에 들어 있던 글자를 텍스트로 바꾸고, 필터 상태를 URL에 담아서 검색과 링크 공유가 되게 했습니다.
    • Notion을 CMS로 쓰는 구조를 만들어 기업 사이트 두 곳에 적용했습니다. 관리자 시스템 없이 클라이언트가 직접 콘텐츠를 고칩니다.
    • 검색 노출 설정, 배포, 도메인 연결까지 직접 했습니다.
  4. 04

    브이스트로

    2021.11 – 2023.12

    프론트엔드 개발자 (주임)

    웹게임, 블록체인 서비스, 기업 사이트를 두루 만든 2년.

    • 브라우저에서 도는 HTML5 게임 두 편의 홈페이지와 인게임 UI를 맡았습니다. 그중 하나는 거래소에 상장됐습니다.
    • ASP.NET Core MVC를 직접 익혀서 컨트롤러와 뷰까지 만졌습니다. 화면 하나 고치려고 백엔드 일정을 기다릴 일이 없어졌습니다.
    • 레거시 사이트를 Next.js로 옮기는 일을 여러 번 했는데, 한꺼번에 갈아엎지 않고 단계적으로 옮겼습니다.
    • 디자인 전달 방식을 Figma로 바꾸자고 제안했고, 팀이 그렇게 옮겨 갔습니다.
    • next-intl로 다국어를 처음 붙여 봤습니다. 번역 키를 페이지별로 나눴다가 같은 문구의 번역이 갈라져서 도메인 기준으로 다시 나눴습니다.
  5. 05

    아이스캔디

    2021.06 – 2021.11

    프론트엔드 개발자 (계약직)

    초등 교과서를 EPUB 디지털 교과서로 옮겼습니다. 첫 실무.

    • 김영사 초등 영어·수학·과학 교과서를 EPUB 형식의 디지털 교과서로 전환했습니다.
    • 듣기 자료 재생이나 문제 풀이 같은 인터랙션을 지면 안에 넣었습니다.
    • 웹표준과 웹접근성을 안 지키면 뷰어에 따라 콘텐츠가 깨진다는 걸 이때 처음 겪었습니다.

How I work · 일하는 방식

프로젝트가 바뀌어도 비슷한 고민이 반복돼서, 그때마다 꺼내 보는 기준을 적어 뒀습니다. 전부 직접 겪은 일에서 나왔고, 대부분은 한 번 고생하고 나서 정한 것들입니다.

  1. 원칙 01

    이 값의 주인이 누구인지 먼저 정한다

    서버가 기준인 데이터와 화면에서만 쓰는 데이터를 한 스토어에 섞어 두면, 그 값을 언제 새로 받아야 하는지 아무도 답하지 못합니다. 상태를 만들기 전에 어느 쪽 값인지부터 정해 두면 나중에 고칠 일이 많이 줄어듭니다.

  2. 원칙 02

    공유될 값은 URL에 둔다

    목록 필터, 상세 탭, 다단계 폼의 현재 단계처럼 링크로 보낼 만한 값은 전부 URL에 둡니다. 그러면 공유도, 뒤로 가기도, 검색 색인도 따로 만들 필요가 없습니다.

  3. 원칙 03

    같은 숫자는 한 곳에서만 계산한다

    금액이나 집계처럼 여러 화면에 나오는 값은 계산 함수를 하나만 두고, 화면은 그 결과를 보여주기만 합니다. 화면마다 반올림이 조금씩 다르면 사용자는 어느 숫자가 맞는지 믿지 못합니다.

  4. 원칙 04

    되돌릴 수 없는 동작에만 확인 단계를 둔다

    모든 버튼에 확인창을 붙이면 사람들은 읽지 않고 넘깁니다. 체결, 발송, 삭제처럼 되돌릴 수 없는 동작에만 한 단계를 더 두고, 나머지는 한 번에 되게 합니다.

  5. 원칙 05

    실제 속도와 체감 속도를 따로 본다

    스켈레톤이나 고정 비율 컨테이너는 로딩 시간을 줄여 주지 않습니다. 그래도 사용자가 느끼는 속도는 꽤 달라집니다. 오래 걸리는 작업은 지금 뭘 하고 있는지만 보여줘도 덜 답답해합니다.

  6. 원칙 06

    라이브러리는 기능보다 관리 상태를 먼저 본다

    많이 쓰는 라이브러리여도 최근 커밋과 이슈 답변이 끊겨 있으면 쓰지 않습니다. 시작할 때 이미 멈춰 있던 저장소는 반년쯤 지나 버전을 올릴 때 발목을 잡습니다.

  7. 원칙 07

    직접 만들지 않을 것을 먼저 고른다

    작은 기업 사이트에는 관리자 화면을 만들지 않고 Notion을 CMS로 썼는데, 그 프로젝트에서 가장 효과가 컸던 결정이었습니다. 인증처럼 검증된 게 있는 것은 가져다 쓰고, 시간은 화면에 씁니다.

About this site · 이 사이트에 대하여

이 사이트는 포트폴리오지만 결과 화면보다 기록에 무게를 뒀습니다. 각 작업에서 어떤 문제를 만났고, 무엇을 골랐고, 어떻게 됐는지를 중심으로 적었습니다.

회사에서 한 작업은 번호를 붙여 시간순으로 쌓고, 직접 만든 앱과 도구는 따로 모았습니다. 거기서 겪은 문제는 노트로 정리해서 작업 페이지와 서로 연결해 뒀습니다.

디자인은 회계 장부 같은 느낌으로 잡았습니다. 카드 대신 선으로 영역을 나누고, 연도나 역할 같은 정보는 모노스페이스 글꼴로 붙였습니다. 둥근 모서리와 그림자는 거의 쓰지 않았습니다.

프레임워크
Next.js 16 (App Router, React Compiler)
스타일
Tailwind CSS v4 · shadcn/ui
상태
Zustand (뷰 상태) · URL search params (공유되는 필터)
모션
Motion · Canvas 2D 인터랙티브 배경
타이포
IBM Plex Sans KR · IBM Plex Mono · Instrument Serif

Elsewhere