DevLog

엔지니어링 블로그를 한 곳에서 탐색하고, 최근 발행 흐름을 빠르게 파악할 수 있는 서비스 입니다.

Quick Links

  • Latest Feed
  • Engineering Directory

Support

  • 소개
  • 개인정보처리방침

Contribute

  • 원하는 블로그 추가 (준비 중)
  • Feedback

© 2026 DevLog Inc. All rights reserved.

본 사이트는 공개 RSS 피드를 통해 콘텐츠를 수집하며, 모든 콘텐츠의 저작권은 원저작자에게 있습니다.

Back to Feed
Read Original

Contents

Continue Reading

  • More from 포스타입
  • Related reads#ChromeExtension
#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 설정을 제공하여 사용자와 분담 처리하는 기획적 접근법입니다.

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

포스타입More from 포스타입

View all posts from 포스타입
  • 포스타입이 개인화 추천을 하는 방법 2부

    OpenSearchKNNHNSW
    3주 전
  • 포스타입이 개인화 추천을 하는 방법 1부

    OpenSearchVector SearchHNSW
    3주 전
  • AI 코드 리뷰, 3번 갈아엎고 배운 것

    Claude CodeGitHub ActionsCode Review
    1개월 전
  • 10년 된 에디터 코어를 Froala에서 Lexical로 교체하기

    LexicalFroalaWYSIWYG
    1개월 전
  • 좋은 아이디어보다 더 중요한 질문

    Product DesignUX UIROI
    1개월 전

Related reads#ChromeExtension

Explore #ChromeExtension
NAVER D2·LLM

[AI 해커톤 후기] AI 시대의 해커톤과 인간의 역할: AI의 계획과 사람의 전략

#ChromeExtension1개월 전

Source

포스타입
포스타입
Engineering Blog

Published · August 13, 2026

Topics

Chrome ExtensionAI AssistantPrototypingUX DesignAutomation