← 전체 사례  ·  CASE #01  ·  재직 중 · Startup

애드포터
광고 플랫폼 UI 구조화

광고주와 매체주를 연결하는 플랫폼의 Web · Admin · Mobile UI를 구축·고도화하고 있습니다. 기획 공백을 화면설계·상태 정의·예외 케이스로 구체화하며, 외부 개발사와 맞물리는 AI/AX 문서화·QA 흐름을 운영하는 현재 진행형 프로젝트입니다.

재직 중 · 진행 중 Startup · PL 과장 Web/Admin/Mobile UI AI/AX Workflow
UI POLICY MAP
screens/
├── media-register
├── media-detail
├── my-page
└── payment-flow
policy/
├── state
└── exceptions
// MUI + AI/AX QA checklist
결과
Results (현재 진행 중)
  • 광고 플랫폼 Web · Admin · Mobile UI 구조 설계·고도화
  • 매체 등록 · 상세 · 마이페이지 · 쿠폰 · 통합 결제 프로세스 화면 정책 정리
  • 기획 공백을 AS-IS/TO-BE, 와이어프레임, 상태별 동작, 예외 케이스로 문서화
  • AI/AX 기반 화면설계·코드 검토·QA 체크리스트 운영
Reflection

스타트업에서 '혼돈 → 구조'를 만든다는 것이 무엇인지를 가장 직접적으로 배우고 있습니다.

역할 경계가 모호할 때 판단 기준 자체를 먼저 만들어야 팀이 움직인다는 사실을 매일 확인하고 있습니다.

문제

애드포터는 스타트업 초기 단계로, 기획·디자인·개발 기준이 비동기적으로 움직이고 있었습니다. 화면 정책, 데이터 노출 조건, 예외 상태가 문서로 고정되지 않아 외부 개발사와의 확인 비용도 컸습니다.

핵심 과제: 프론트엔드 리소스가 제한적인 상황에서 Web · Admin · Mobile 전반의 UI 기준을 정리하고, 기획 산출물이 부족한 화면을 구현 가능한 수준의 설계와 상태 정의로 구체화하는 것이었습니다.

역할
과장 · PL / React UI Developer로서 UI 구조 설계, 화면 정책 정리, 외부 개발사 커뮤니케이션, AI/AX 문서화 흐름을 담당했습니다.
  • Web · Admin · Mobile 화면 구조와 사용자 플로우 정리
  • MUI 기반 Form, Modal, DataGrid, Popover, Chip 등 복합 UI 커스터마이징
  • 기획·디자인 공백 시 화면설계, 상태 정의, 예외 케이스로 개발 판단 기준 구체화
  • 외부 개발사·기획자·디자이너·대표/의사결정권자 간 Cross-functional 허브
  • AI/AX 도구를 활용한 화면설계, 코드 검토, 문서화, QA 체크리스트 운영 (ChatGPT, Claude, Codex, Cursor)
AI/AX 운영 핵심: AI Agent가 임의로 구조를 바꾸지 않도록 프로젝트 규칙, 레거시 className, SCSS 기준, 컴포넌트 경계를 작업 지침으로 명시하고 Human-in-the-loop 방식으로 검수합니다.
핵심 판단 접기

구조가 없으면 속도도 없습니다.

스타트업에서 "일단 빠르게"라는 명분으로 화면 정책 없이 달리면, 구현 후 확인 비용과 예외 처리가 반복됩니다. 초기에 상태 기준과 데이터 노출 조건을 정리하는 시간이 이후 개발 속도를 끌어올립니다.

AI 도구는 '개인 생산성 도구'가 아니라 '검수 가능한 업무 흐름'으로 정착시켜야 효과가 납니다. 이를 화면설계, 코드 검토, 문서화, QA까지 연결해 실험하고 있는 프로젝트입니다.

Next Case
S사 엔지니어링 MAP
복합 Admin UI 구조를 전담 설계한 프로젝트입니다.
다음 케이스 보기 →
Now
애드포터 — 현재 재직 중
광고 플랫폼 UI 구조화와 AI/AX 문서화·QA 흐름을 운영 중입니다.
현재 역할 보기 →
Next Conversation
이어서 대화하고 싶으시면 연락 주세요.
yoonkp0233@gmail.com
이력서 보기 →