Read Original
#Design

AI로 만들고, 디자인으로 완성한 3개월

AI로 만들고, 디자인으로 완성한 3개월
01

Summary

개발자가 만든 디자인을 넘어 진짜 '쓸 수 있는 제품'으로: 채널톡의 3개월간 AI 협업 디자인 분투기

작동하는 제품과 사랑받는 제품의 한 끗 차이를 채우는 고밀도 UI 설계와 AI CoS 도입 비하인드

동작은 하지만 배포할 수 없었던 채널톡의 데이터 분석 도구 '노트북'을 단 3개월 만에 성공적으로 론칭한 한 디자이너의 생생한 여정입니다. Claude Code와의 분업을 통해 도메인 학습과 프로토타입 검증 속도를 극대화하고, 피그마와 수작업을 통해 UI 디테일과 밀도를 채우는 이상적인 AI 협업 워크플로우를 제시합니다. 최종적으로 데이터 분석의 진입 장벽을 무너뜨리는 'AI CoS' 기능까지 설계하며 진정한 제품의 완결성을 찾아가는 과정을 담았습니다.

  • 01도메인 학습부터 프로토타입 설계까지: Claude Code를 기획 파트너로 삼아 10가지 셀 타입 갤러리를 만들고 실행 컨텍스트를 시각화하여 빠르게 MVP 구조를 검증했습니다.
  • 02시스템 기본값을 뛰어넘는 고밀도 UI: 디자인 시스템 컴포넌트에만 의존하지 않고, 2px 단위의 미세 조정을 통해 분석 도구에 적합한 최적의 정보 밀도를 구현했습니다.
  • 03판단은 디자이너가, 구현은 AI가: 차트 컬러 토큰 적용 등 비효율적인 반복 작업은 피그마 플러그인을 직접 제작하여 AI에게 위임하고, 디자이너는 코어 맥락 설계에 집중했습니다.
  • 04진입 장벽을 낮춘 AI CoS 설계: 복잡한 SQL/Python 분석 도구의 허들을 낮추기 위해 사용자가 자연어로 질문하면 대시보드까지 생성해주는 신규 진입 경로를 기획 및 구현했습니다.

RECOMMENDATION

AI를 활용해 단순 제작 속도를 높이는 것을 넘어, 복잡한 신제품의 스코프를 조율하고 고밀도 UI/UX의 디테일을 채우고자 하는 기획자 및 프로덕트 디자이너에게 강력히 추천합니다.

The Problem

정형화된 통계 기능의 한계로 고객 맞춤형 데이터 분석 도구인 '노트북'을 개발했으나, 기존 채널톡의 태스크 중심 UI 체계로는 분석 도구 특유의 높은 정보 밀도와 복잡한 실행 모델을 감당하지 못해 배포에 어려움을 겪었습니다.

The Solution

Claude Code를 활용해 10가지 셀 타입 프로토타입을 빠르게 제작하여 실행 구조를 검증한 뒤, 피그마에서 디자인 시스템의 기본값을 뛰어넘는 2px 단위의 고밀도 UI를 직접 설계하고, 진입 장벽을 낮추기 위한 자연어 기반 데이터 분석 AI 기능인 'AI CoS'를 추가했습니다.

The Result

사내 여러 피처팀이 데이터 엔지니어의 도움 없이 스스로 지표를 분석할 수 있게 되었으며, OBT 배포 이후 일반 고객사들도 자발적으로 제품을 사용하는 지표 활성화 성과를 거두었습니다.

Trade-off

AI를 통해 빠른 구조 검증과 단순 반복 작업은 단축했으나, 제품의 최종적인 밀도 설계와 디테일한 미세 조정은 기존 디자인 시스템 규격과의 충돌을 피하기 위해 오너들과 소통하며 수작업으로 직접 해결해야만 했습니다.

03

Key Concepts

Concept · 01

실행 모델과 멘탈 모델

시스템이 백엔드에서 실제로 동작하는 기술적 메커니즘과 사용자가 제품을 다룰 때 직관적으로 머릿속에 그리는 인지 모형의 차이를 뜻합니다.

  • 노트북 제품에서 셀 간의 위아래 의존 관계, 데이터프레임 변수 스코프 공유 등의 기술적 실행 구조를 사용자가 쉽게 이해할 수 있는 UI로 풀어내는 데 활용되었습니다.
Concept · 02

UI 정보 밀도

화면 공간 내에 정보를 얼마나 촘촘하고 효율적으로 배치할 것인지에 대한 설계적 척도입니다.

  • 기존 채널톡의 태스크 기반 UI 컴포넌트 간격 기준을 깨고, 노트북 제품 특성에 맞춰 2px 단위의 스케일 조정을 통해 복잡한 코드 에디터와 차트를 한 화면에 배치했습니다.
Concept · 03

AI CoS

사용자가 분석하고 싶은 지표를 자연어로 질문하면, 데이터 웨어하우스나 내부 데이터를 기반으로 자동으로 노트북을 구성하고 대시보드를 생성해주는 도우미 기능입니다.

  • 데이터 분석이 어려운 일반 고객들의 진입 허들을 낮추기 위해 자연어 기반의 새로운 프로덕트 진입 경로로 설계 및 도입되었습니다.