AutoView
팀
1 PM, 1 디자이너, 3 엔지니어
역할
1인 프로덕트 디자이너
타임라인
플랫폼
웹, 모바일
개요
플랫폼을 관리하는 동안 한 가지 구조적 문제를 발견했습니다. 즉, 반복적인 프론트엔드 구성 요소를 하드코딩하는 데 상당한 내부 리소스가 낭비되고 있었습니다. 이를 해결하기 위해 기획자와 디자이너가 데이터 명세만 정의하면 AI를 통해 1분 이내에 React 코드를 생성할 수 있는 사내 생산성 도구로 프로젝트를 시작했습니다.
내부적으로 매우 긍정적인 피드백을 받은 후, 경영진은 이 도구를 글로벌 개발자를 타겟으로 하는 오픈 소스 제품으로 피벗하기로 결정했습니다. 대상 사용자가 외부 개발자 생태계로 확장됨에 따라, 저의 과제는 대시보드 코어를 완전히 재설계하여 GitHub 연동, API 키 관리, 협업 공유와 같은 기능을 도입하는 것이었습니다.
언어를 선택하세요:
The Problem
1~2분. LLM이 스키마를 분석하고 초기 React 코드를 생성하는 데 소요되는 시간입니다. 생성 자체는 1분 미만으로 매우 효율적이지만, 첫 번째 결과물이 사용자의 정확한 요구 사항과 일치하는 경우는 드물기 때문에 후속 수정이 불가피합니다.
또한, 수동으로 코드를 수정하는 과정에서 발생하는 빌드 오류의 빈도입니다. 비기술 사용자가 생성된 코드에서 사소한 세부 사항을 직접 수정하려고 했을 때 35%의 구문 오류율이 발생하여 시스템이 다운되고 워크플로우가 중단되었습니다.
마지막으로, 컴포넌트 커스터마이징 단계에서의 이탈률입니다. 사용자들이 아주 미세한 시각적 조정을 하기 위해서도 텍스트 기반 코딩을 사용해야 했기 때문에, 프로그래밍 배경지식이 없는 사용자는 가파른 학습 곡선에 직면하여 도구 사용을 중도 포기하는 경우가 빈번했습니다.
평균 UI 생성 시간
1~2분 이상
코드 수준 오류율
이후 수동 편집 시 약 35%
이탈률
비기술 사용자들의 경우 훨씬 더 높음
User Research
"AI가 1분도 채 되지 않아 코드를 생성할 수 있다는 것은 정말 놀랍습니다. 하지만 패딩이나 헤더 제목과 같은 사소한 UI 세부 사항을 수정할 때는 여전히 원시 코드를 직접 들여다봐야 합니다. 비 기술적인 사용자의 경우, 진입 장벽은 여전히 높습니다." - 제인, 디자이너
사용자 인터뷰(PM 3명, PD 3명)를 통해 중요한 페인 포인트를 발견했습니다. 사용자들은 AI가 첫 시도에 완벽한 UI를 생성할 것이라 기대하지 않습니다. 진짜 가치는 사용자가 AI와 대화하며 미세한 세부 사항을 쉽게 다듬고 조정할 수 있는 반복적인 프로세스에 있습니다.
Hypothesis
코드 편집기와 함께 라이브 미리보기와 자연어 채팅 인터페이스를 결합한다면, 기술적인 지식이 없는 사용자도 손쉽게 UI를 구축할 수 있을 것입니다. 나아가, 채팅 명령어와 직접적인 시각적 조작을 융합한 하이브리드 인터페이스는 유연성과 정밀함 사이의 최적의 균형을 제공할 것입니다.
하이브리드 편집 환경
코드 에디터와 더불어 자연어 채팅 인터페이스에 라이브 미리보기를 결합한다면, 기술적인 지식이 없는 사용자라도 원래의 코드를 직접 수정하지 않고 미세한 세부 사항을 손쉽게 개선하고 조정할 수 있을 것입니다.
역할 기반의 안전한 워크플로
외부 팀원의 편집 권한을 제한할 수 있는 별도의 읽기 전용 상태를 설계한다면, 실수로 코드가 수정되는 것을 방지하고 협업 과정에서 발생하는 마찰과 이탈률을 크게 낮출 수 있습니다.
워크보드
디자인 + PRD
Prototype
질적인 가설에만 의존하기보다, 실제 작동하는 환경을 통해 이 복잡한 대화형 대시보드의 사용성을 검증하고 싶었습니다. 코딩을 위해 Claude를 활용하여, 라이브 프리뷰가 실시간으로 렌더링되고 자연어 채팅 명령에 반응하는 고충실도 대화형 프로토타입을 직접 구축했습니다.
The Solution
Claude와 같은 범용 AI 빌더들이 존재하지만, 조직 환경에서 컴포넌트 에셋을 관리하고 프로덕션 코드베이스와 원활하게 통합하는 데는 한계가 있습니다. AutoView는 이러한 공백을 메워줍니다. 프로젝트 기반의 대시보드를 설계하고 안전한 읽기 전용 공유 시스템을 구현함으로써, 저는 단순한 AI 코딩 샌드박스 수준이었던 사용자 경험을 강력하고 프로덕션에 바로 투입할 수 있는 개발 워크플로우로 한 단계 끌어올렸습니다.
하이브리드 대시보드 인터페이스
사용자가 왼쪽 채팅 패널을 통해 주요 레이아웃 변경을 지시하는 동시에, 미리보기 화면의 직관적인 팝업을 통해 특정 컴포넌트 속성을 직접 수정할 수 있는 인터페이스를 설계했습니다.
맥락적 오류 처리
사용자가 유효하지 않은 TypeScript 인터페이스를 입력했을 때 시스템이 단순히 중단되는 것은 아닙니다. 대신, 하단에 명확하고 바로 실행 가능한 가이드를 제공하여 사용자가 디버깅을 하고 작업을 계속 진행할 수 있도록 도와줍니다.
안전한 협업을 위한 역할 기반 공유
프로젝트 링크를 공유할 때 안전한 워크플로우를 보장하기 위해, 외부 팀원들을 위한 별도의 뷰를 설계했습니다. 이 읽기 전용 상태는 편집 기능을 제한하여 의도치 않은 변경을 방지하는 동시에 대화형 테스트 기능은 그대로 유지합니다.
Reflection
AI는 실제로 정말 재미있습니다
이 프로젝트는 급변하는 비즈니스 요구사항 속에서 디자인 시스템을 신속하게 확장하는 저의 능력을 시험했습니다. 더 중요한 것은, AI 코딩 도구를 활용하여 고충실도 프로토타입을 구축하고 직접 사용자 테스트를 진행함으로써 디자인과 코드 간의 간극을 좁히는 방법을 배웠고, 이를 통해 기술적이고 비즈니스 지향적인 프로덕트 디자이너로 성장할 수 있었습니다.
