#Frontend

"이번 달 얼마 남았지?"를 없애는 방법

"이번 달 얼마 남았지?"를 없애는 방법
01

Summary

개발자 아니어도 뚝딱! AI와 함께 단 몇 시간 만에 만든 사내 복지 치트키

말뿐인 기획서 대신 '돌아가는 프로토타입'으로 소통하는 포스타입 PM의 업무 자동화 여정

포스타입의 비개발자 PM이 월별 점심 식비 잔액을 자동으로 계산해 주는 크롬 익스텐션을 AI 도움을 받아 직접 개발한 후기입니다. 단순 사내 도구 개발을 넘어, 복잡한 예외 상황 속에서 자동화할 영역과 사용자 개입 영역을 정의하는 제품 기획 관점의 깊이 있는 교훈을 공유합니다. 나아가 AI 프로토타이핑을 도입하여 기획자, 디자이너, 엔지니어의 협업 방식을 혁신한 포스타입의 조직 문화를 소개합니다.

  • 01AI 어시스턴트와의 협업을 통해 비개발자 기획자가 단 몇 시간 만에 실용적인 크롬 익스텐션 배포 성공
  • 02웹 페이지의 기존 렌더링 데이터를 읽어와 별도의 서버 연동 없이 독립적이고 가볍게 동작하도록 구현
  • 03공휴일은 자동 처리하고 개인 휴가는 수동 선택하게 만드는 등 100% 자동화의 늪을 피하는 영리한 예외 처리
  • 04실제 동작하는 프로토타입 중심의 소통을 통해 기획과 구현 간의 간극을 초기에 발견하고 해결하는 프로세스 구축

RECOMMENDATION

아이디어를 머릿속으로만 구상하기보다 AI를 활용해 빠르게 프로토타입을 만들고 직접 검증하며 협업 방식을 한 단계 업그레이드하고 싶은 PM 및 실무자에게 강력히 권장합니다.

The Problem

사내 점심 식비 지원 예산(월 27만 원) 내에서 남은 영업일 동안 하루에 쓸 수 있는 금액을 파악하기 위해 구성원들이 매일 지출 내역을 보고 직접 수동으로 남은 일수와 한도를 나누어 계산해야 하는 번거로움이 있었습니다.

The Solution

브라우저 화면에 이미 렌더링된 Flex 서비스의 영수증 목록 데이터를 읽어서 남은 예산과 일일 권장 지출액을 자동으로 계산해 주는 크롬 익스텐션을 AI의 도움을 받아 개발했습니다. 공휴일 계산 등 규칙이 명확한 것은 자동화하고, 개인 일정 및 한도 변경과 같은 복잡한 예외는 사용자가 직접 설정 및 클릭으로 조율할 수 있도록 분리 설계했습니다.

The Result

사내 배포 이후 동료들의 긍정적인 반응을 얻으며 수동 계산의 번거로움을 완전히 해결해 주었습니다. 또한 포스타입 PM들이 기획 단계에서 AI를 활용해 동작하는 프로토타입을 직접 구현하고 소통하는 문화를 정착시켜 기획과 개발 간의 간극을 줄이고 빠른 논의가 가능해졌습니다.

Trade-off

예외 처리를 100% 자동화하려다 도구가 과도하게 복잡해지고 잘못된 데이터를 보여줄 수 있는 위험을 방지하기 위해, 개인 일정 제외 및 한도 설정 기능을 사용자 조작(수동)으로 남겨두는 기획적 타협을 감수했습니다.

03

Key Concepts

Concept · 01

Chrome Extension

구글 크롬 브라우저 내에서 실행되어 웹 페이지의 DOM에 접근하고 사용자 환경을 맞춤형으로 제어 및 확장해 주는 소프트웨어 프로그램입니다.

  • 별도의 백엔드 서버 연동 없이 브라우저에 이미 노출된 Flex 웹페이지의 영수증 데이터를 읽어서 연산하는 데 활용되었습니다.
Concept · 02

AI Prototyping

개발 지식이 부족하거나 빠른 검증이 필요할 때 AI 코딩 어시스턴트를 활용하여 동작 가능한 형태의 초기 결과물을 직접 빠르게 제작해 보는 기법입니다.

  • 비개발자 기획자가 아이디어를 직접 실현하고, 동료 디자이너 및 엔지니어들과 구체적인 동작을 기반으로 논의하는 데 사용되었습니다.
Concept · 03

Exception Handling in UX

비즈니스 로직 설계 시 발생할 수 있는 예측 불가능하고 복잡한 예외 상황들을 시스템 내부 코드로 완벽하게 해결하려 하기보다는, 직관적인 UI 설정을 제공하여 사용자와 분담 처리하는 기획적 접근법입니다.

  • 개인 휴가, 대체 공휴일, 중도 입사자 한도 변경 등의 다양한 변수를 처리하기 위해 자동 연산 영역과 사용자 설정 영역을 현명하게 나누어 설계했습니다.