[기획/FE]: AI 기반 보틀노트 디자인 시스템 운영 기준 수립

[bottlenote-app]

배경

LinkedIn/Inflab 기술 블로그 사례를 참고해, 보틀노트 디자인 시스템을 AI 기반으로 정리·운영할 수 있는 방식 검토가 필요합니다.

참고 링크:

• LinkedIn: https://www.linkedin.com/posts/jojoldu-%EC%9D%B4%EB%8F%99%EC%9A%B1_%ED%98%84%EC%9E%AC-%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%84%9C%EB%B9%84%EC%8A%A4%EB%8A%94-%EB%94%94%EC%9E%90%EC%9D%B8%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%84-mantine-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C-%EC%9A%B4%EC%98%81%ED%95%98%EA%B3%A0-%EC%9E%88%EB%8A%94%EB%8D%B0%EC%9A%94-share-7472540497601921025-Z8yJ/
• 원문 글: AI로 디자인시스템 마이그레이션하기 (1): 여정의 시작

참고 사례에서 확인한 방향

• 기존 디자인 시스템/공통 UI를 한 번에 갈아엎기보다, 현업 개발을 유지하면서 점진적으로 정리
• AI 에이전트와 codemod를 활용하되 Storybook/QA로 검증
• 공통 라이브러리, 디자인 토큰, 컴포넌트 사용 규칙을 자동화 가능한 형태로 구조화

작업 목표

• 보틀노트 어드민/프로덕트 UI의 디자인 시스템 기준을 AI가 이해·검증·제안할 수 있는 형태로 정리
• 디자인 토큰, 공통 컴포넌트, 페이지 패턴, Figma ↔ 코드 매핑 기준을 문서화
• 향후 UI 수정/QA/신규 화면 작업 시 AI가 기존 디자인 기준을 근거로 일관된 제안을 할 수 있도록 기반 마련

작업 범위

• 현재 디자인 시스템/공통 UI 자산 현황 파악
  • Figma 디자인 시스템
  • 어드민 대시보드 공통 컴포넌트
  • 프로덕트/모바일 웹 공통 UI 패턴
• AI 활용 가능한 산출물 구조 정의
  • 디자인 토큰 문서
  • 컴포넌트별 사용 규칙
  • variant/state 기준
  • 금지 패턴 및 예외 기준
  • 화면 템플릿/레이아웃 패턴
• AI 에이전트 작업 흐름 설계
  • Figma 기준 확인
  • 코드 컴포넌트 매핑
  • 변경 제안
  • Storybook 또는 화면 QA 검증
• 기존 이슈 #280과의 연결 범위 정리
  • #280은 현재 어드민 UI 기준 피그마 디자인 시스템 이관
  • 본 이슈는 AI가 활용 가능한 디자인 시스템 운영/검증 체계 수립에 초점

제외 범위

• 즉시 전면 리디자인
• 전체 UI 컴포넌트 일괄 교체
• 검증 없는 자동 마이그레이션 적용
• 운영 배포 자동화 또는 인프라 변경

완료 조건

• 보틀노트 디자인 시스템을 AI가 참조할 수 있는 문서/규칙 초안이 작성된다.
• Figma ↔ 코드 컴포넌트 매핑 방식이 정의된다.
• AI 작업 시 검증해야 할 Storybook/QA 체크리스트가 정리된다.
• 향후 디자인 시스템 개선 또는 마이그레이션 이슈로 분리 가능한 작업 단위가 도출된다.

담당

• 김주예 진행 예정

관련 이슈

• [어드민] 현재 UI 기준 피그마 디자인 시스템 이관 #280