그림과 코드가 따로 논다
디자인 파일과 실제 화면 코드가 달라 수정할 때마다 다시 옮겨야 합니다.
솔루션사람과 AI 에이전트가 같은 레이어를 다루는 디자인 편집기연구 · 개발 중
디자인 원본을 HTML 한 장으로 두고, 사람은 레이어와 박스 모델을 직접 다루며 에이전트는 같은 구조를 읽고 수정안을 남깁니다. 에이전트의 변경은 사람이 확인한 뒤에만 반영됩니다.
- HTML 원본 한 장
- 레이어 · 박스 모델
- 에이전트 수정 제안
- 변경 기록 · 되돌리기
에이전트 네이티브 디자인 에디터연구 · 개발 중
지금의 디자인 도구에서 AI는 그림을 볼 뿐 구조를 다루지 못합니다. 사람과 AI가 같은 원본을 보지 않으면 결과를 다시 옮기는 일이 반복됩니다.
AI가 화면 구조를 모른다
이미지로만 보면 간격·정렬·반복 규칙을 이해하지 못해 수정안이 어긋납니다.
AI의 변경을 추적하기 어렵다
무엇을 왜 바꿨는지 남지 않아 사람이 결과를 믿고 쓰기 어렵습니다.
설계 중인 주요 화면입니다. 왼쪽 목록에서 화면을 골라 보세요.
에이전트 네이티브 디자인 에디터 › 편집기화면 예시
편집기 · 레이어, 캔버스, 박스 모델 패널과 에이전트 제안이 한 화면에 있습니다.
데모는 이해를 돕기 위한 예시 화면과 예시 데이터로 동작합니다.
레이어 · 박스 모델 편집
레이어 · 박스 모델
레이어 트리와 박스 모델(간격·패딩·크기)을 직접 다루며 HTML 원본을 편집합니다.
에이전트 수정 제안
제안 → 적용
에이전트는 같은 레이어를 읽고 변경안을 비교 형태로 남깁니다. 사람이 적용해야 반영됩니다.
세 겹의 레이어 구조
원본 · 손잡이 · 에이전트
원본 화면, 편집 손잡이, 에이전트 메모를 겹쳐 서로의 작업을 가리지 않게 했습니다.
변경 기록과 되돌리기
타임라인
사람과 에이전트의 모든 변경을 기록하고 원하는 시점으로 되돌립니다.
사람과 에이전트가 디자인 원본 하나를 함께 고치는 방식을 같이 검증해 주세요.
연구·개발 중인 제품입니다. 주요 디자인 도구의 패널 구성을 비교 연구해 설계하고 있습니다.