[아티클 읽기] 반복되는 어드민 디자인, PRD로 어디까지 자동화할 수 있을까?

https://www.bucketplace.com/post/2026-05-29-%EB%B0%98%EB%B3%B5%EB%90%98%EB%8A%94-%EC%96%B4%EB%93%9C%EB%AF%BC-%EB%94%94%EC%9E%90%EC%9D%B8-prd%EB%A1%9C-%EC%96%B4%EB%94%94%EA%B9%8C%EC%A7%80-%EC%9E%90%EB%8F%99%ED%99%94%ED%95%A0-%EC%88%98-%EC%9E%88%EC%9D%84%EA%B9%8C/

반복되는 어드민 디자인, PRD로 어디까지 자동화할 수 있을까? - 오늘의집 블로그

 

 

어드민 자동화를 시도했던 이유는

• 새로운 물류 서비스를 런칭하려고 하는데 9개의 어드민 신규 페이지가 필요했음
• → 새롭게 디자인을 하기 보다는 저액을 매핑하는 작업에 가까웠음

정책을 가장 잘 아는 PO가 직접 디자인까지 할 수 있으면 어떨까?

1차 시도 : ‘Figma Make’ 로 어드민 템플릿 만들기

• 어드민에 특화된 디자인 가이드를 먼저 구축하고 이를 템플릿에 세팅하는 방식으로 접근
• 어드민의 구조를 분해해보니 → ‘조회’ 와 ‘데이터 등록’ 두 가지 유형, 레이아웃은 3가지로 정리됨
• → 모든 페이지의 구조가 이 조합 안에서 이뤄진다는 것을 알게 됨

가장 작은 단위까지 쪼개기

• Page → Section → Component → Foundation
• AI가 이해할 수 있는 규칙 만들기
  1. 먼저 화면의 근간이 되는 Foundation 과 Component를 정리
  2. → 어떤 화면이 생성되더라도 어드민 특유의 톤과 구조를 유지할 수 있도록 함
• 각 페이지 유형별 섹션 구성과 필수 컴포넌트 규칙을 정함
• 컴포넌트를 나열하는 수준을 넘어 구체적인 사용 기준과 조합 패턴, 사용자 행동에 따른 화면 흐름까지 정의 → 그래야 AI가 화면을 막연히 그리는게 아니라 규칙에 맞춰 조립할 수 있다고 생각함

첫번째 시도의 한계 - PRD 만으로는 부족했던 디자인

• PRD를 그대로 입력하는 것만으로는 원하는 화면이 정확하게 나오지 않았다는 점
  • PRD의 정책 언어를 디자인 패턴과 컴포넌트 언어로 다시 해석하는 과정이 필요했음
• 결과의 일관성이 떨어지는 것도 아쉬움 포인트
  • PRD를 넣으면 일관된 디자인 결과물로 이어지는 과정 자체를 시스템화해야한다는 레슨런

두번째 시도 : Claude Code 기반 디자인 생성 시스템 구축

• PRD에서 디자인까지 이어지는 파이프라인을 시스템화 하는 것을 목표로 설계

1. 페이지 유형 및 레이아웃 매칭 : 유형에 따라 기본 레이아웃과 필수 구성 요소가 달라짐
2. 섹션 및 컴포넌트 매칭
3. 불명확한 부분은 디자인 전에 사용자에게 보고 : PRD에 명시되지 않은 내용은 AI가 자의적으로 판단해 채워넣도록 제어하는 것이 중요함 → 디자인 생성 전 확인이 필요한 내용은 사용자에게 먼저 보고하도록 설정

결과 - 정책을 만드는 사람이 디자인까지 할 수 있는 환경 구축

• 신규페이지 작업 예상 기간이 20일이었는데 5일로 단축됨
• PRD만으로 동작하는 프로토타입을 빠르게 생성할 수 있고 화면 흐름까지 확인할 수 있으니 개발자와 커뮤니케이션 비용도 눈에 띄게 줄어듦

마치며

• 반복되는 디자인 작업일수록 화면 하나씩 잘만드는 것만큼이나 화면이 만들어지는 방식을 설계하는 일이 중요함
• 매번 새로운 화면을 처음부터 그리는 대신 PRD를 어떻게 읽고 어떤 페이지 유형으로 나눌지, 어떤 컴포넌트와 패턴으로 조합할지에 대한 기준을 세우는 것이 훨씬 효과적

내 생각

• 난 지금까지 AI에게 그냥 디자인해줘! 이렇게 맡겼었는데 화면이 만들어지는 방식을 설계하는 일이 중요함을 깨달았다. 컴포넌트나 레이아웃을 먼저 정해주는 작업이 AI가 더 내가 원하는 방향으로 그려줄 수 있음을 깨달았다.