권오승

앱 설치 없이 주문·결제까지 연결

SEO로 유입되는 오가닉 사용자를 대상으로, 앱 설치 없이 웹에서 주문과 결제를 마칠 수 있는 서비스를 기획·개발했습니다. 결제를 마친 사용자가 앱 설치로 이어지는 흐름까지 함께 설계했으며, 프로젝트 전체 기획과 일정 관리, 웹 개발 전반을 총괄했습니다.

정책 변경에 대응하는 도메인 로직 분리

핵심 도메인 로직을 순수 함수로 분리하고, 장바구니에는 파생값 대신 상품 및 옵션 참조만 보관하도록 구조를 설계했습니다. 서버 데이터는 엔티티 매퍼로 변환하여 UI 및 상태 코드와의 의존성을 격리했습니다.

이를 통해 개인컵 할인 정책 변경(별도 차감 → 상품가 차감) 시, 도메인 계산 함수와 단일 테스트를 수정하는 것만으로 3개 화면에 일괄 적용하며 중복 로직 구현 없이 신속하게 대응할 수 있었습니다.

사용자를 고려한 이탈률 개선

사용자 이탈을 줄이기 위해 인증 시점을 결제 직전으로 미루도록 기획했습니다. 메뉴 탐색과 장바구니 담기까지는 인증 없이 진행하고, 결제 단계에서만 카카오싱크로 인증하도록 해 사용자가 직접 입력해야 하는 정보도 줄였습니다.

인증 퍼널 최적화를 위해 A/B 테스트를 도입했습니다. 카카오싱크 버튼을 사전에 노출하는 안과 결제 버튼 클릭 시 카카오싱크를 호출하는 안을 비교하여 결제 전환율 성과를 측정하고 있습니다.

프로젝트 성과

출시 후 웹 주문 사용자의 객단가는 앱 사용자의 약 3배로 관측됐습니다. 메뉴를 장바구니에 담은 사용자 중 33%가 결제를 마쳤고, 결제한 사용자 가운데 32%는 앱을 설치했습니다. 결제 사용자의 절반 이상은 마케팅 수신에도 동의해, 웹 주문이 매출과 앱 유입을 함께 만드는 경로로 자리 잡았습니다.

AI 개발 절차 표준화

사내 AI 워크플로우를 구축했지만, 작업 전에 읽어야 할 문서가 너무 많아 토큰 소모가 컸습니다. 반복되는 문서를 통합하고 각 단계에서 필요한 문서만 확인하도록 워크플로우를 다시 설계했으며, 설계 문서는 개발자와 대화하며 함께 만들도록 구조를 바꿨습니다.

그 결과 작업 전에 확인하는 문서량을 기존의 약 1/3로 줄이면서 요구사항 확인부터 구현까지의 절차를 표준화했습니다.

개발 규칙 자동 검증

워크플로우로 개발 절차를 표준화했지만, AI가 프로젝트에서 사용하지 않는 패턴을 적용하거나 기존 규칙을 누락하는 문제가 있었습니다.

이를 보완하기 위해 하네스 엔지니어링을 적용했습니다. 자동으로 검증할 수 있는 규칙은 Linter, PostToolUse Hook 등으로 검사하고, 자동 검사하기 어려운 구현 패턴은 코드 레시피로 제공했습니다.

그 결과 동일 작업 기준으로 정확도가 올라갔고, AI 도구 실행 횟수는 34%, 작업 시간은 21% 줄었습니다.

Figma MCP가 놓친 컴포넌트 정보 복원

Figma MCP를 연결해도 AI가 공통 컴포넌트 대신 새 UI를 만들거나 디자인과 다른 결과를 내놓았습니다. 응답 구조를 분석해 보니 MCP가 토큰을 과도하게 소비하면서도 컴포넌트를 제대로 인식하지 못하고 있었습니다.

Figma API와 PostToolUse Hook으로 누락된 컴포넌트 정보를 복원하고, 반복 데이터를 제거해 Figma가 AI에 전달하는 입력 데이터를 최대 70% 줄일 수 있었습니다.

회원이 친구를 초대해 커피 쿠폰을 선물하고, 초대받은 친구의 회원가입을 유도하는 이벤트를 개발했습니다.

메인 이벤트 페이지 개발과 선언형 트래킹 라이브러리 개발을 담당했으며, 출시 이후 신규 가입자 목표를 16배 초과 달성했습니다.

대규모 트래픽에 대비한 API 호출과 로딩 흐름 개선

대량의 알림톡이 발송되면 순간적으로 웹 트래픽이 몰릴 것으로 예상됐습니다. 웹 서버 증설만으로는 부족하다고 판단해, Node.js 서버의 API 부하 자체를 줄이도록 호출 구조를 개선했습니다.

기존 Node.js 서버를 거치던 데이터 조회 방식을 브라우저에서 백엔드 API를 직접 호출하도록 전환했으며, 응답 대기 시간 동안 스켈레톤 UI를 제공해 체감 대기 시간을 단축했습니다.

그 결과, 평시 대비 9배 이상의 트래픽이 몰렸음에도 서버 과부하 없이 이벤트를 성공적으로 마무리했습니다.

선언형 트래킹 라이브러리 개발

대다수의 이벤트 페이지에서 비즈니스 코드보다 성과 측정용 트래킹 코드가 더 많아 가독성이 떨어졌고, 트래킹 로직도 프로젝트마다 흩어져 있어 유지보수가 어려웠습니다.

이를 개선하기 위해 HTML 마크업에 data-track 속성을 선언하고, 발생 조건과 전송 데이터는 트래킹 맵(Tracking Map) 파일로 일괄 관리하는 선언형 트래킹 라이브러리를 설계했습니다.

채널별 전송 로직은 어댑터 패턴으로 분리해 신규 채널 추가 시에도 이벤트 감지 코드를 수정하지 않도록 구조화했습니다. 또한 프레임워크에 의존하지 않고 사내 여러 서비스에서 재사용할 수 있도록 이벤트 감지 로직은 DOM과 브라우저 표준 API로 구현했습니다.

사용 과정에서 드러난 한계 보완

초기 버전은 파라미터를 유연하게 추가하기 어려워, data-track-params로 동적 데이터를 전달할 수 있도록 보완했습니다. API 요청 성공처럼 HTML 요소와 연결되지 않는 동작에는 track(key, params)를 제공해 이벤트를 직접 전송할 수 있도록 했습니다.

사내 공통 패키지로 확장

라이브러리는 @passorder/tracking-web으로 사내 패키지 저장소에 배포했으며, 현재 대부분의 웹 서비스에서 사용하고 있습니다.

선언형 트래킹 라이브러리 도입 이후 트래킹 코드 작성 공수는 약 60% 감소했습니다.

회원과 비회원을 함께 초대해 사다리게임으로 결제할 사람을 정한 뒤 실제 주문까지 이어지는 같이주문 서비스를 개발했습니다. 웹 결제 로직과 웹뷰 기반 사다리게임 개발을 담당했습니다.

출시 이후 사다리게임 결과 페이지 도달은 목표 달성률 130%, 홈 진입은 목표 달성률 152%를 기록했습니다.

웹 결제 기반과 공통 결제 패키지 구축

PG사와 결제수단마다 다른 연동 방식을 공통 결제 패키지 안쪽으로 감췄습니다. 같이주문뿐 아니라 다른 웹 서비스에서도 같은 인터페이스로 결제를 붙일 수 있는 기반을 마련했습니다.

웹뷰 기반 같이주문 경험 구축

사다리게임 화면을 웹뷰로 구현해 iOS와 Android에 동일한 경험을 제공했습니다. 이 과정에서 웹↔앱 브릿지 규격을 공통화하고 이벤트 기반으로 상태를 주고받는 구조를 만들어, 플랫폼별 중복 구현을 줄이고 이후 웹뷰 기능에서도 같은 통신 방식을 재사용할 수 있게 했습니다.

간헐적인 멤버 목록 유실을 통신 경계 재설계로 해결

앱이 내려주는 초기 멤버 목록을 웹이 간헐적으로 전달받지 못하는 문제가 있었습니다. 데이터를 전달받는 시점을 조정하고, 리스너가 준비되기 전에 도착한 이벤트는 큐에 쌓아 두었다가 처리하도록 했습니다.

사다리 렌더링 비용 개선

캐릭터가 움직이는 프레임마다 사다리 뼈대와 누적 경로를 다시 그려 렌더링 비용이 커지는 문제가 있었습니다. 사다리 원본을 그리는 정적 캔버스와 진행 중인 경로를 그리는 동적 캔버스로 분리해 렌더링 횟수가 최대 약 3,200회에서 27회로 감소했습니다.

레거시 디자인 시스템의 개선 필요성을 제안하고, 디자이너와 함께 컴포넌트 정책과 공통 설계 원칙을 정리했습니다. 이를 바탕으로 여러 웹 서비스에서 함께 쓰는 공통 컴포넌트를 설계·구현했습니다.

확장 가능한 컴포넌트 구조 설계

같은 컴포넌트라도 서비스마다 필요한 레이아웃과 기능이 달랐기 때문에, 요구사항이 추가될 때마다 props와 조건문을 늘리는 방식으로는 공통 컴포넌트를 유지하기 어렵다고 판단했습니다.

그래서 Headless 구조로 상태와 동작을 UI에서 분리하고, Compound Component 패턴으로 필요한 요소를 조합하도록 설계했습니다. HTML 기본 속성, className, forwardRef 등의 사용 방식도 공통 규칙으로 정리해 서비스별 확장성은 유지하면서 컴포넌트 사용 방식은 일관되게 맞췄습니다.

공통 컴포넌트의 변경은 별도 PR에서 리뷰하도록 규칙을 세웠습니다. 기존 컴포넌트와 신규 디자인 시스템의 영역도 구분해, 기존 서비스에 영향을 주지 않으면서 단계적으로 전환할 수 있는 환경을 만들었습니다.

Figma·AI 개발 워크플로우 연계

Figma와 코드에서 사용하는 컴포넌트명과 속성명이 달라, 디자인 구현 시 개발자가 적절한 컴포넌트를 다시 찾고 속성을 해석해야 했습니다. Figma MCP를 활용한 AI 개발에서도 같은 이유로 기존 공통 컴포넌트 대신 새로운 UI를 생성하는 문제가 있었습니다.

디자이너와 협업해 Figma 속성과 코드의 props·네이밍 기준을 맞추고, Figma 컴포넌트와 코드 컴포넌트를 연결하는 기준을 정리했습니다. 이 기준을 AI 개발 워크플로우에도 적용해 디자인에 맞는 공통 컴포넌트를 선택하도록 했고, UI 개발 공수를 10% 이상 줄였습니다.

대용량 테이블을 통한 확장성·성능 검증

디자인 시스템의 대표 컴포넌트로 백오피스용 대용량 테이블을 구현했습니다. Headless Hook과 Compound Component 구조를 결합해 툴바, 헤더, 그룹핑, 무한 스크롤 등을 화면에 따라 조합하도록 설계했습니다.

또한 react-virtual 기반 가상화와 메모이제이션을 적용해 화면에 필요한 행만 렌더링했습니다. 기존 구현과 비교한 결과 2,000건 이상의 실제 데이터에서 초기 렌더 시간을 약 2.0초에서 0.1초 미만으로 줄였습니다.

전자금융거래법 개정으로 패스머니·상품권 같은 선불수단과 PG 정산 데이터를 기존 서비스에서 분리해 관리해야 했습니다. 전자금융업 조건에 맞춘 백오피스 구축과 유지보수를 담당했으며, 사장님 페이지에서 금융 서비스를 별도 시스템으로 분리하는 작업을 진행했습니다.

재사용 가능한 전용 백오피스 구축

빠른 구축을 위해 기존 백오피스를 기반으로 개발하되, 복잡한 webpack 설정은 걷어내 Vite로 전환하고 Recoil에서 Zustand로 전역 상태 관리를 변경했습니다.

작업 공수 절감을 위해 공통 컴포넌트를 조합해 페이지 템플릿을 구성했습니다. 화면별 필터와 데이터 구조에 맞춰 템플릿을 재사용하도록 해, 새 화면의 구현 부담을 줄이면서 운영 화면의 일관성도 유지할 수 있었습니다.

사장님 페이지 금융 기능 보안 분리

공개 인터넷에 노출된 사장님 페이지가 내부 전산망과 직접 통신하지 않도록 iframe을 통해 정산 화면을 제공했습니다. 부모 페이지와 iframe 사이에는 필요한 정보만 postMessage로 주고받고, 허용한 Origin인지 검증한 뒤 CSP를 적용해 통신 대상과 실행 가능한 리소스를 제한했습니다.

iframe 내부 높이는 실시간으로 부모 페이지에 전달해, 내용에 따라 높이가 바뀔 때 발생하던 화면 깨짐을 해결했습니다.

CRM 메시지와 앱 푸시에 사용하던 외부 딥링크 서비스는 앱 MAU 구간에 따라 비용이 증가했습니다. 목적지가 바뀔 때마다 여러 채널의 링크를 교체하고 메시지 템플릿을 재검수해야 하는 부담도 있어, 외부 서비스 의존도를 줄이기 위해 자체 딥링크 웹 ‘패스링크’와 관리 백오피스를 구축했습니다.

앱 연결과 웹 처리를 분리해 링크 순환 해결

OS가 앱 연결을 처리하도록 Universal Links·App Links 도메인 연결 파일을 배포하고 Nginx 경로를 설정했습니다. 웹으로 진입했을 때는 커스텀 스킴으로 앱 실행을 시도하도록 구조를 바꿔, 같은 링크가 무한히 순환 호출되던 문제를 해결했습니다.

앱 실행을 확인할 수 없는 환경 대응

웹에서는 앱이 실제로 열렸는지 직접 확인할 수 없어, visibilitychange로 페이지가 숨겨지면 대체 경로 이동 타이머를 취소했습니다. 페이지가 표시된 상태여도 타이머가 지연 실행됐다면 곧바로 이동시키지 않도록 해, 앱이 열린 뒤 뒤늦게 웹으로 튕기는 상황을 막았습니다.

링크 운영·성과 측정 백오피스 구축

운영자가 링크 생성부터 사용 여부·운영 기간·대체 주소 변경까지 직접 처리하도록 백오피스를 개발하고, CRM에서 반복 사용하는 링크는 템플릿으로 묶어 관리할 수 있는 환경을 구성했습니다.